From cb0d2a2c4f49e72713b743c1d5af3323c36da593 Mon Sep 17 00:00:00 2001
From: Travis Ralston <travisr@matrix.org>
Date: Fri, 25 Jun 2021 13:54:05 -0600
Subject: [PATCH 1/3] Encrypt the voice message file if needed

Fixes https://github.com/vector-im/element-web/issues/17729

"oops, should have done that"
---
 src/ContentMessages.tsx                       |  2 +-
 .../views/rooms/VoiceRecordComposerTile.tsx   |  8 +++--
 src/voice/VoiceRecording.ts                   | 31 +++++++++----------
 3 files changed, 21 insertions(+), 20 deletions(-)

diff --git a/src/ContentMessages.tsx b/src/ContentMessages.tsx
index 9042d47243..7a3cf5d50f 100644
--- a/src/ContentMessages.tsx
+++ b/src/ContentMessages.tsx
@@ -307,7 +307,7 @@ function readFileAsArrayBuffer(file: File | Blob): Promise<ArrayBuffer> {
  *  If the file is unencrypted then the object will have a "url" key.
  *  If the file is encrypted then the object will have a "file" key.
  */
-function uploadFile(
+export function uploadFile(
     matrixClient: MatrixClient,
     roomId: string,
     file: File | Blob,
diff --git a/src/components/views/rooms/VoiceRecordComposerTile.tsx b/src/components/views/rooms/VoiceRecordComposerTile.tsx
index 122ba0ca0b..248d196506 100644
--- a/src/components/views/rooms/VoiceRecordComposerTile.tsx
+++ b/src/components/views/rooms/VoiceRecordComposerTile.tsx
@@ -65,12 +65,13 @@ export default class VoiceRecordComposerTile extends React.PureComponent<IProps,
         }
 
         await this.state.recorder.stop();
-        const mxc = await this.state.recorder.upload();
+        const upload = await this.state.recorder.upload(this.props.room.roomId);
         MatrixClientPeg.get().sendMessage(this.props.room.roomId, {
             "body": "Voice message",
             //"msgtype": "org.matrix.msc2516.voice",
             "msgtype": MsgType.Audio,
-            "url": mxc,
+            "url": upload.mxc,
+            "file": upload.encrypted,
             "info": {
                 duration: Math.round(this.state.recorder.durationSeconds * 1000),
                 mimetype: this.state.recorder.contentType,
@@ -81,7 +82,8 @@ export default class VoiceRecordComposerTile extends React.PureComponent<IProps,
             // https://github.com/matrix-org/matrix-doc/pull/3245
             "org.matrix.msc1767.text": "Voice message",
             "org.matrix.msc1767.file": {
-                url: mxc,
+                "url": upload.mxc,
+                "file": upload.encrypted,
                 name: "Voice message.ogg",
                 mimetype: this.state.recorder.contentType,
                 size: this.state.recorder.contentLength,
diff --git a/src/voice/VoiceRecording.ts b/src/voice/VoiceRecording.ts
index 8f9e03bb8e..0304a297ef 100644
--- a/src/voice/VoiceRecording.ts
+++ b/src/voice/VoiceRecording.ts
@@ -27,6 +27,8 @@ import {PayloadEvent, WORKLET_NAME} from "./consts";
 import {UPDATE_EVENT} from "../stores/AsyncStore";
 import {Playback} from "./Playback";
 import {createAudioContext} from "./compat";
+import { IEncryptedFile } from "matrix-js-sdk/src/@types/event";
+import { uploadFile } from "../ContentMessages";
 
 const CHANNELS = 1; // stereo isn't important
 export const SAMPLE_RATE = 48000; // 48khz is what WebRTC uses. 12khz is where we lose quality.
@@ -49,6 +51,11 @@ export enum RecordingState {
     Uploaded = "uploaded",
 }
 
+export interface IUpload {
+    mxc?: string; // for unencrypted uploads
+    encrypted?: IEncryptedFile;
+}
+
 export class VoiceRecording extends EventEmitter implements IDestroyable {
     private recorder: Recorder;
     private recorderContext: AudioContext;
@@ -58,7 +65,7 @@ export class VoiceRecording extends EventEmitter implements IDestroyable {
     private recorderWorklet: AudioWorkletNode;
     private recorderProcessor: ScriptProcessorNode;
     private buffer = new Uint8Array(0); // use this.audioBuffer to access
-    private mxc: string;
+    private lastUpload: IUpload;
     private recording = false;
     private observable: SimpleObservable<IRecordingUpdate>;
     private amplitudes: number[] = []; // at each second mark, generated
@@ -214,13 +221,6 @@ export class VoiceRecording extends EventEmitter implements IDestroyable {
         return this.buffer.length > 0;
     }
 
-    public get mxcUri(): string {
-        if (!this.mxc) {
-            throw new Error("Recording has not been uploaded yet");
-        }
-        return this.mxc;
-    }
-
     private onAudioProcess = (ev: AudioProcessingEvent) => {
         this.processAudioUpdate(ev.playbackTime);
 
@@ -290,7 +290,7 @@ export class VoiceRecording extends EventEmitter implements IDestroyable {
     };
 
     public async start(): Promise<void> {
-        if (this.mxc || this.hasRecording) {
+        if (this.lastUpload || this.hasRecording) {
             throw new Error("Recording already prepared");
         }
         if (this.recording) {
@@ -362,20 +362,19 @@ export class VoiceRecording extends EventEmitter implements IDestroyable {
         this.observable.close();
     }
 
-    public async upload(): Promise<string> {
+    public async upload(inRoomId: string): Promise<IUpload> {
         if (!this.hasRecording) {
             throw new Error("No recording available to upload");
         }
 
-        if (this.mxc) return this.mxc;
+        if (this.lastUpload) return this.lastUpload;
 
         this.emit(RecordingState.Uploading);
-        this.mxc = await this.client.uploadContent(new Blob([this.audioBuffer], {
+        const { url: mxc, file: encrypted } = await uploadFile(this.client, inRoomId, new Blob([this.audioBuffer], {
             type: this.contentType,
-        }), {
-            onlyContentUri: false, // to stop the warnings in the console
-        }).then(r => r['content_uri']);
+        }));
+        this.lastUpload = {mxc, encrypted};
         this.emit(RecordingState.Uploaded);
-        return this.mxc;
+        return this.lastUpload;
     }
 }

From b5bb767b8fac9bd35bafdb38a60971b6241a8eb9 Mon Sep 17 00:00:00 2001
From: Travis Ralston <travisr@matrix.org>
Date: Fri, 25 Jun 2021 14:11:50 -0600
Subject: [PATCH 2/3] Appease the linter

---
 src/components/views/rooms/VoiceRecordComposerTile.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/views/rooms/VoiceRecordComposerTile.tsx b/src/components/views/rooms/VoiceRecordComposerTile.tsx
index 248d196506..eb86737d58 100644
--- a/src/components/views/rooms/VoiceRecordComposerTile.tsx
+++ b/src/components/views/rooms/VoiceRecordComposerTile.tsx
@@ -82,8 +82,8 @@ export default class VoiceRecordComposerTile extends React.PureComponent<IProps,
             // https://github.com/matrix-org/matrix-doc/pull/3245
             "org.matrix.msc1767.text": "Voice message",
             "org.matrix.msc1767.file": {
-                "url": upload.mxc,
-                "file": upload.encrypted,
+                url: upload.mxc,
+                file: upload.encrypted,
                 name: "Voice message.ogg",
                 mimetype: this.state.recorder.contentType,
                 size: this.state.recorder.contentLength,

From c16228b8ca3f10c4bc27bf950a12c1bbaddf3a40 Mon Sep 17 00:00:00 2001
From: Travis Ralston <travisr@matrix.org>
Date: Mon, 28 Jun 2021 01:22:05 -0600
Subject: [PATCH 3/3] Update src/voice/VoiceRecording.ts

Co-authored-by: Michael Telatynski <7t3chguy@gmail.com>
---
 src/voice/VoiceRecording.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/voice/VoiceRecording.ts b/src/voice/VoiceRecording.ts
index 0304a297ef..2243d49873 100644
--- a/src/voice/VoiceRecording.ts
+++ b/src/voice/VoiceRecording.ts
@@ -373,7 +373,7 @@ export class VoiceRecording extends EventEmitter implements IDestroyable {
         const { url: mxc, file: encrypted } = await uploadFile(this.client, inRoomId, new Blob([this.audioBuffer], {
             type: this.contentType,
         }));
-        this.lastUpload = {mxc, encrypted};
+        this.lastUpload = { mxc, encrypted };
         this.emit(RecordingState.Uploaded);
         return this.lastUpload;
     }