diff --git a/src/components/views/messages/MAudioBody.js b/src/components/views/messages/MAudioBody.js index 6113fa7c6c..375b2431c3 100644 --- a/src/components/views/messages/MAudioBody.js +++ b/src/components/views/messages/MAudioBody.js @@ -21,28 +21,75 @@ import MFileBody from './MFileBody'; import MatrixClientPeg from '../../../MatrixClientPeg'; import sdk from '../../../index'; +import { decryptFile } from '../../../utils/DecryptFile'; export default class MAudioBody extends React.Component { constructor(props) { super(props); this.state = { - playing: false + playing: false, + decryptedUrl: null, } } - onPlayToggle() { this.setState({ playing: !this.state.playing }); } + _getContentUrl() { + var content = this.props.mxEvent.getContent(); + if (content.file !== undefined) { + return this.state.decryptedUrl; + } else { + return MatrixClientPeg.get().mxcUrlToHttp(content.url); + } + } + + componentDidMount() { + var content = this.props.mxEvent.getContent(); + if (content.file !== undefined && this.state.decryptedUrl === null) { + decryptFile(content.file).then((blob) => { + if (!this._unmounted) { + this.setState({ + decryptedUrl: window.URL.createObjectURL(blob), + }); + } + }).catch((err) => { + console.warn("Unable to decrypt attachment: ", err) + // Set a placeholder image when we can't decrypt the image. + this.refs.image.src = "img/warning.svg"; + }); + } + } + + componentWillUnmount() { + this._unmounted = true; + if (this.state.decryptedUrl) { + window.URL.revokeObjectURL(this.state.decryptedUrl); + } + } + render() { var content = this.props.mxEvent.getContent(); - var cli = MatrixClientPeg.get(); + + if (content.file !== undefined && this.state.decryptedUrl === null) { + // Need to decrypt the attachment + // The attachment is decrypted in componentDidMount. + // For now add an img tag with a spinner. + return ( + + {content.body} + + ); + } + + var contentUrl = this._getContentUrl(); return ( - );