From 9812476b895e65d77e992f94d4402d035f875c59 Mon Sep 17 00:00:00 2001
From: N-Pex <npexdev@gmail.com>
Date: Thu, 16 Feb 2023 15:20:12 +0100
Subject: [PATCH 1/5] Fix wording and layout of voice mode settings

---
 src/assets/css/chat.scss        | 20 ++++++++++++++++++++
 src/assets/translations/en.json |  5 +++--
 src/components/Chat.vue         |  2 +-
 src/components/RoomInfo.vue     | 14 +++++++++-----
 4 files changed, 33 insertions(+), 8 deletions(-)

diff --git a/src/assets/css/chat.scss b/src/assets/css/chat.scss
index 175cd41..f01f3bb 100644
--- a/src/assets/css/chat.scss
+++ b/src/assets/css/chat.scss
@@ -906,6 +906,26 @@ body {
 
     text-decoration: underline;
   }
+
+  .with-right-label {
+    display: flex;
+    flex-wrap: nowrap;
+    flex-direction: row;
+    text-align: start;
+    & > * {
+      flex: 1 1 auto;
+    }
+    & > *:last-child {
+      flex: 0 0 auto;
+    }
+    .option-title {
+      color: #000;
+      font-size: 16 * $chat-text-size;
+    }
+    .option-text {
+      font-size: 13 * $chat-text-size;
+    }
+  }
 }
 
 .header-button-left {
diff --git a/src/assets/translations/en.json b/src/assets/translations/en.json
index fa3116e..249a3c2 100644
--- a/src/assets/translations/en.json
+++ b/src/assets/translations/en.json
@@ -243,8 +243,9 @@
     "export_room": "Export chat",
     "user_admin": "Administrator",
     "user_moderator": "Moderator",
-    "ui_options": "UI Options",
-    "audio_layout": "Use audio layout"
+    "experimental_features": "Experimental Features",
+    "voice_mode": "Voice mode",
+    "voice_mode_info": "Switches the chat interface to a 'listen and record' mode"
   },
   "room_info_sheet": {
     "this_room": "This room",
diff --git a/src/components/Chat.vue b/src/components/Chat.vue
index e3e48c2..36378d7 100644
--- a/src/components/Chat.vue
+++ b/src/components/Chat.vue
@@ -527,7 +527,7 @@ export default {
         if (this.room) {
           const tags = this.room.tags;
           if (tags && tags["ui_options"]) {
-            return tags["ui_options"]["audio_layout"] === 1;
+            return tags["ui_options"]["voice_mode"] === 1;
           }
         }
         return false;
diff --git a/src/components/RoomInfo.vue b/src/components/RoomInfo.vue
index 9dad7e1..1b58c03 100644
--- a/src/components/RoomInfo.vue
+++ b/src/components/RoomInfo.vue
@@ -166,11 +166,14 @@
     </v-card>
 
     <v-card class="account ma-3" flat>
-      <v-card-title class="h2">{{ $t("room_info.ui_options") }}</v-card-title>
-      <v-card-text>
+      <v-card-title class="h2 with-right-label"><div>{{ $t("room_info.experimental_features") }}</div><div></div></v-card-title>
+      <v-card-text class="with-right-label">
+        <div>
+          <div class="option-title">{{ $t('room_info.voice_mode') }}</div>
+          <div class="option-text">{{ $t('room_info.voice_mode_info') }}</div>
+        </div>
         <v-switch
         v-model="useAudioLayout"
-        :label="$t('room_info.audio_layout')"
       ></v-switch>
       </v-card-text>
     </v-card>
@@ -378,7 +381,7 @@ export default {
         if (this.room) {
           const tags = this.room.tags;
           if (tags && tags["ui_options"]) {
-            return tags["ui_options"]["audio_layout"] === 1;
+            return tags["ui_options"]["voice_mode"] === 1;
           }
         }
         return false;
@@ -386,7 +389,7 @@ export default {
       set: function (audioLayout) {
         if (this.room && this.room.tags) {
           let options = this.room.tags["ui_options"] || {}
-          options["audio_layout"] = (audioLayout ? 1 : 0);
+          options["voice_mode"] = (audioLayout ? 1 : 0);
           this.room.tags["ui_options"] = options;
           this.$matrix.matrixClient.setRoomTag(this.room.roomId, "ui_options", options);
         }
@@ -668,4 +671,5 @@ export default {
 
 <style lang="scss">
 @import "@/assets/css/chat.scss";
+
 </style>
\ No newline at end of file

From b61714fccfda52bc9dc96cc830052dd4e604c426 Mon Sep 17 00:00:00 2001
From: N-Pex <npexdev@gmail.com>
Date: Thu, 16 Feb 2023 15:20:30 +0100
Subject: [PATCH 2/5] Add import functionality to voice recorder

---
 src/assets/icons/audio_import.vue      |  9 ++++
 src/assets/icons/audio_import_play.vue |  7 +++
 src/components/VoiceRecorder.vue       | 62 ++++++++++++++++++++++++--
 3 files changed, 75 insertions(+), 3 deletions(-)
 create mode 100644 src/assets/icons/audio_import.vue
 create mode 100644 src/assets/icons/audio_import_play.vue

diff --git a/src/assets/icons/audio_import.vue b/src/assets/icons/audio_import.vue
new file mode 100644
index 0000000..d43e655
--- /dev/null
+++ b/src/assets/icons/audio_import.vue
@@ -0,0 +1,9 @@
+<template>
+    <svg width="35" height="24" viewBox="0 0 35 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path
+            d="M34.5045 2.00009C34.4955 1.99996 34.4865 1.99996 34.4773 2.00022C34.472 2.00022 34.4667 2.00009 34.4614 2.00022V2.00009H34.4468L34.4321 2.00191C34.3889 2.00685 34.3463 2.01738 34.3055 2.03338L34.3047 2.03364L34.3042 2.0339L22.3976 6.75159L22.3971 6.75172L22.3966 6.75198C22.2004 6.83079 22.0788 7.01118 22.08 7.22109H22.0798V7.22369C22.0796 10.8211 22.0798 14.4168 22.0798 18.0165C21.4362 17.3614 20.5389 16.9551 19.5466 16.9551C17.595 16.9551 16 18.5363 16 20.4775C16 22.4169 17.5946 24 19.5466 24C21.4924 24 23.0798 22.4297 23.0932 20.5018C23.0932 20.4994 23.0933 20.497 23.0933 20.4946H23.0932C23.0933 20.489 23.0933 20.4833 23.0932 20.4777H23.0933V10.8472L33.9865 6.7827V13.6522C33.3419 12.9981 32.4433 12.5915 31.4533 12.5915C29.4988 12.5915 27.9067 14.1736 27.9067 16.1139C27.9067 18.0522 29.4987 19.6364 31.4533 19.6364C33.3813 19.6364 34.9586 18.0837 34.9999 16.1792L35 16.1764V2.50378V2.50365C35.0001 2.22209 34.7842 2.00541 34.5048 2.00035L34.5045 2.00009Z"
+            fill="white" />
+        <rect x="15" y="6" width="3" height="15" rx="1.3" transform="rotate(90 15 6)" fill="white" />
+        <rect x="6" width="3" height="15" rx="1.3" fill="white" />
+    </svg>
+</template>
\ No newline at end of file
diff --git a/src/assets/icons/audio_import_play.vue b/src/assets/icons/audio_import_play.vue
new file mode 100644
index 0000000..b940826
--- /dev/null
+++ b/src/assets/icons/audio_import_play.vue
@@ -0,0 +1,7 @@
+<template>
+    <svg width="16" height="21" viewBox="0 0 16 21" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path fill-rule="evenodd" clip-rule="evenodd"
+            d="M15.2035 11.7865L1.92305 20.668C0.860979 21.3783 0 20.9103 0 19.6316V1.36924C0 0.0865306 0.861044 -0.377469 1.92305 0.33277L15.2035 9.21432C16.2655 9.9246 16.2655 11.0762 15.2035 11.7865Z"
+            fill="white" />
+    </svg>
+</template>
\ No newline at end of file
diff --git a/src/components/VoiceRecorder.vue b/src/components/VoiceRecorder.vue
index d1debf6..48879ba 100644
--- a/src/components/VoiceRecorder.vue
+++ b/src/components/VoiceRecorder.vue
@@ -11,6 +11,20 @@
             <v-btn v-show="state == states.RECORDED" icon @click.stop="redo">
               <v-icon color="white">undo</v-icon>
             </v-btn>
+            <v-btn v-show="state == states.INITIAL" icon @click.stop="importAudio">
+              <v-icon color="white">$vuetify.icons.audio_import</v-icon>
+              <input
+              ref="audio_import"
+              type="file"
+              name="audio_import"
+              @change="handleAudioImport($event)"
+              accept="audio/*"
+              class="d-none"
+            />
+            </v-btn>
+            <v-btn v-show="state == states.IMPORTED" icon @click.stop="previewAudio">
+              <v-icon color="white">$vuetify.icons.audio_import_play</v-icon>
+            </v-btn>
           </v-col>
           <v-col cols="4" align="center">
             <v-btn
@@ -23,7 +37,7 @@
               <v-icon color="white">stop</v-icon>
             </v-btn>
             <v-btn
-              v-else-if="state == states.RECORDED"
+              v-else-if="state == states.RECORDED || state == states.IMPORTED"
               id="btn-send"
               class="voice-recorder-btn recorded"
               icon
@@ -145,6 +159,7 @@ const State = {
   RECORDING: "recording",
   RECORDED: "recorded",
   ERROR: "error",
+  IMPORTED: "imported"
 };
 import util from "../plugins/utils";
 import VoiceRecorderLock from "./VoiceRecorderLock";
@@ -192,7 +207,8 @@ export default {
       recordingLocked: false,
       recordedFile: null,
       errorMessage: null,
-      recorder: null
+      recorder: null,
+      previewPlayer: null,
     };
   },
   watch: {
@@ -242,8 +258,10 @@ export default {
           this.startRecording();
         } else {
           console.log("Not PTT");
+          if (this.micButtonRef) {
           //eslint-disable-next-line
           this.micButtonRef.$el.style.display = "none";
+          }
         }
       } else {
         // Remove listeners
@@ -257,10 +275,17 @@ export default {
         this.startCoordinateX = null;
         this.startCoordinateY = null;
         this.recordingLocked = false;
+        if (this.micButtonRef) {
         //eslint-disable-next-line
         this.micButtonRef.$el.style.display = "block";
+        }
       }
     },
+    state() {
+      if (this.state != State.IMPORTED && this.previewPlayer) {
+        this.previewPlayer.pause();
+      }
+    }
   },
   computed: {
     lockButtonStyle() {
@@ -351,10 +376,10 @@ export default {
     },
     cancelRecording() {
       if(this.recorder) {
-        this.state = State.INITIAL;
         this.recorder.stop();
         this.recorder = null;
       }
+      this.state = State.INITIAL;
       this.close();
     },
     pauseRecording() {
@@ -433,6 +458,37 @@ export default {
         }
       });
     },
+
+    /**
+     * Show import picker to select file
+     */
+     importAudio() {
+      this.$refs.audio_import.click();
+    },
+
+    /**
+     * Handle picked audio file
+     */
+    handleAudioImport(event) {
+      if (event.target.files && event.target.files[0]) {
+        this.recordedFile = event.target.files[0];
+        this.state = State.IMPORTED;
+      }
+    },
+
+    previewAudio() {
+      if (this.recordedFile) {
+        if (!this.previewPlayer) {
+          this.previewPlayer = new Audio();
+        }
+        var reader = new FileReader();
+        reader.onload = (e) => {
+        this.previewPlayer.src = e.target.result;
+        this.previewPlayer.play();
+        };
+        reader.readAsDataURL(this.recordedFile);
+      }
+    }
   },
 };
 </script>

From 832a9676447d480f359fcfb6119a4d44ec46652c Mon Sep 17 00:00:00 2001
From: N-Pex <npexdev@gmail.com>
Date: Fri, 17 Feb 2023 17:20:26 +0100
Subject: [PATCH 3/5] Fix playback bug on first load

Also, don't replay our own messages when just sent.
---
 src/components/AudioLayout.vue | 47 ++++++++++++++++++++++------------
 1 file changed, 31 insertions(+), 16 deletions(-)

diff --git a/src/components/AudioLayout.vue b/src/components/AudioLayout.vue
index ff47abd..a3f145c 100644
--- a/src/components/AudioLayout.vue
+++ b/src/components/AudioLayout.vue
@@ -1,5 +1,5 @@
 <template>
-  <div v-bind="{...$props, ...$attrs}" v-on="$listeners" class="messageIn">
+  <div v-bind="{ ...$props, ...$attrs }" v-on="$listeners" class="messageIn">
     <div class="load-earlier clickable" @click="loadPrevious">
       <v-icon color="white" size="28">expand_less</v-icon>
     </div>
@@ -11,7 +11,7 @@
         @click.stop="otherAvatarClicked($refs.avatar.$el)">
         <img v-if="messageEventAvatar(currentAudioEvent)" :src="messageEventAvatar(currentAudioEvent)" />
         <span v-else class="white--text headline">{{
-        eventSenderDisplayName(currentAudioEvent).substring(0, 1).toUpperCase()
+          eventSenderDisplayName(currentAudioEvent).substring(0, 1).toUpperCase()
         }}</span>
       </v-avatar>
     </div>
@@ -25,7 +25,7 @@
       {{ currentTime }} / {{ totalTime }}
     </div>
     <audio ref="player" :src="src" @durationchange="updateDuration">
-      {{ $t('fallbacks.audio_file')}}
+      {{ $t('fallbacks.audio_file') }}
     </audio>
     <div v-if="currentAudioEvent" class="auto-audio-player">
       <v-btn id="btn-rewind" @click.stop="rewind" icon>
@@ -98,8 +98,26 @@ export default {
     document.body.classList.add("dark");
     this.$root.$on('playback-start', this.onPlaybackStart);
     this.player = this.$refs.player;
+    this.player.autoplay = false;
     this.player.addEventListener("timeupdate", this.updateProgressBar);
     this.player.addEventListener("play", () => {
+      if (!this.analyser) {
+
+        const audioCtx = new (window.AudioContext || window.webkitAudioContext)();
+        let audioSource = null;
+        if (audioCtx) {
+          audioSource = audioCtx.createMediaElementSource(this.player);
+          this.analyser = audioCtx.createAnalyser();
+          audioSource.connect(this.analyser);
+          this.analyser.connect(audioCtx.destination);
+
+          this.analyser.fftSize = 128;
+          const bufferLength = this.analyser.frequencyBinCount;
+          this.analyzerDataArray = new Uint8Array(bufferLength);
+        }
+      }
+
+
       this.playing = true;
       this.updateVisualization();
       if (this.currentAudioEvent) {
@@ -116,19 +134,6 @@ export default {
       this.clearVisualization();
       this.onPlaybackEnd();
     });
-
-    const audioCtx = new (window.AudioContext || window.webkitAudioContext)();
-    let audioSource = null;
-    if (audioCtx) {
-      audioSource = audioCtx.createMediaElementSource(this.player);
-      this.analyser = audioCtx.createAnalyser();
-      audioSource.connect(this.analyser);
-      this.analyser.connect(audioCtx.destination);
-
-      this.analyser.fftSize = 128;
-      const bufferLength = this.analyser.frequencyBinCount;
-      this.analyzerDataArray = new Uint8Array(bufferLength);
-    }
   },
   beforeDestroy() {
     document.body.classList.remove("dark");
@@ -204,7 +209,17 @@ export default {
           return;
         }
         this.src = null;
+        const autoPlayWasSet = this.autoPlayNextEvent;
         this.autoPlayNextEvent = false;
+
+        if (value.getSender() == this.$matrix.currentUserId) {
+          // Sent by us. Don't autoplay if we just sent this (i.e. it is ahead of our read marker)
+          if (this.room && !this.room.getReceiptsForEvent(value).includes(value.getSender())) {
+            this.player.autoplay = false;
+            this.autoPlayNextEvent = autoPlayWasSet;
+          }
+        }
+
         this.loadAudioAttachmentSource();
       }
     },

From a3627cf03c873011756950020a4653b599908126 Mon Sep 17 00:00:00 2001
From: N-Pex <npexdev@gmail.com>
Date: Fri, 17 Feb 2023 22:00:47 +0100
Subject: [PATCH 4/5] Allow "voice mode" to be set as default on room creation

Also, hide it behind a flag in config (experimental_voice_mode)
---
 src/assets/config.json          |   3 +-
 src/assets/css/chat.scss        |  51 +++--
 src/assets/translations/en.json |   3 +-
 src/components/Chat.vue         |  37 ++--
 src/components/CreateRoom.vue   | 350 ++++++++++++++------------------
 src/components/RoomInfo.vue     |  14 +-
 src/plugins/utils.js            |  32 +++
 7 files changed, 246 insertions(+), 244 deletions(-)

diff --git a/src/assets/config.json b/src/assets/config.json
index 389e901..a816ef7 100644
--- a/src/assets/config.json
+++ b/src/assets/config.json
@@ -39,5 +39,6 @@
                 "siteId": "25"
             }
         }
-    ]
+    ],
+    "experimental_voice_mode": true
 }
\ No newline at end of file
diff --git a/src/assets/css/chat.scss b/src/assets/css/chat.scss
index f01f3bb..2c8eaea 100644
--- a/src/assets/css/chat.scss
+++ b/src/assets/css/chat.scss
@@ -906,25 +906,25 @@ body {
 
     text-decoration: underline;
   }
+}
 
-  .with-right-label {
-    display: flex;
-    flex-wrap: nowrap;
-    flex-direction: row;
-    text-align: start;
-    & > * {
-      flex: 1 1 auto;
-    }
-    & > *:last-child {
-      flex: 0 0 auto;
-    }
-    .option-title {
-      color: #000;
-      font-size: 16 * $chat-text-size;
-    }
-    .option-text {
-      font-size: 13 * $chat-text-size;
-    }
+.with-right-label {
+  display: flex;
+  flex-wrap: nowrap;
+  flex-direction: row;
+  text-align: start;
+  & > * {
+    flex: 1 1 auto;
+  }
+  & > *:last-child {
+    flex: 0 0 auto;
+  }
+  .option-title {
+    color: #000;
+    font-size: 16 * $chat-text-size;
+  }
+  .option-text {
+    font-size: 13 * $chat-text-size;
   }
 }
 
@@ -1143,6 +1143,21 @@ body {
     border: 1px solid #808080 !important;
     position: relative;
   }
+
+  .options {
+    display: flex;
+    width: 100%;
+    justify-content: flex-end;
+    color: black;
+    font-size: 14 * $chat-text-size;
+    font-weight: bold;
+    margin-left: 10px;
+    [dir="rtl"] & {
+      margin-left: initial;
+      margin-right: 10px;
+    }
+    text-transform: none !important;
+  }
 }
 
 .room-link .v-input__slot::before {
diff --git a/src/assets/translations/en.json b/src/assets/translations/en.json
index 249a3c2..77f4bc4 100644
--- a/src/assets/translations/en.json
+++ b/src/assets/translations/en.json
@@ -127,7 +127,8 @@
     "status_avatar_total": "Uploading avatar: {count} of {total}",
     "status_avatar": "Uploading avatar: {count}",
     "room_name_limit_error_msg": "Maximum 50 characters allowed",
-    "colon_not_allowed": "Colon is not allowed"
+    "colon_not_allowed": "Colon is not allowed",
+    "options": "Options"
   },
   "device_list": {
     "title": "DEVICES",
diff --git a/src/components/Chat.vue b/src/components/Chat.vue
index 36378d7..645d316 100644
--- a/src/components/Chat.vue
+++ b/src/components/Chat.vue
@@ -4,7 +4,7 @@
       {{ $tc("room.invitations", invitationCount) }}
     </div>
     <ChatHeader class="chat-header flex-grow-0 flex-shrink-0" v-on:header-click="onHeaderClick" />
-    <AudioLayout ref="chatContainer" class="auto-audio-player-root" v-if="useAudioLayout" :room="room"
+    <AudioLayout ref="chatContainer" class="auto-audio-player-root" v-if="useVoiceMode" :room="room"
       :events="events" :autoplay="!showRecorder" 
       :timelineSet="timelineSet"
       :readMarker="readMarker"
@@ -13,11 +13,11 @@
       v-on:loadprevious="handleScrolledToTop()"
       v-on:mark-read="sendRR"
       />
-      <VoiceRecorder class="audio-layout" v-if="useAudioLayout" :micButtonRef="$refs.mic_button" :ptt="showRecorderPTT" :show="showRecorder"
-          v-on:close="showRecorder = false" v-on:file="onVoiceRecording" />
+      <VoiceRecorder class="audio-layout" v-if="useVoiceMode" :micButtonRef="$refs.mic_button" :ptt="showRecorderPTT" :show="showRecorder"
+          v-on:close="showRecorder = false" v-on:file="onVoiceRecording" :sendTypingIndicators="useVoiceMode" />
 
 
-    <div v-if="!useAudioLayout" class="chat-content flex-grow-1 flex-shrink-1" ref="chatContainer"
+    <div v-if="!useVoiceMode" class="chat-content flex-grow-1 flex-shrink-1" ref="chatContainer"
       v-on:scroll="onScroll" @click="closeContextMenusIfOpen">
       <div ref="messageOperationsStrut" class="message-operations-strut">
         <message-operations ref="messageOperations" :style="opStyle" :emojis="recentEmojis" v-on:close="
@@ -69,10 +69,10 @@
     </div>
 
     <!-- Input area -->
-    <v-container v-if="!useAudioLayout && room" fluid :class="['input-area-outer', replyToEvent ? 'reply-to' : '']">
+    <v-container v-if="!useVoiceMode && room" fluid :class="['input-area-outer', replyToEvent ? 'reply-to' : '']">
       <div :class="[replyToEvent ? 'iput-area-inner-box' : '']">
         <!-- "Scroll to end"-button -->
-        <v-btn v-if="!useAudioLayout" class="scroll-to-end" v-show="showScrollToEnd" fab x-small elevation="0" color="black"
+        <v-btn v-if="!useVoiceMode" class="scroll-to-end" v-show="showScrollToEnd" fab x-small elevation="0" color="black"
           @click.stop="scrollToEndOfTimeline">
           <v-icon color="white">arrow_downward</v-icon>
         </v-btn>
@@ -421,7 +421,7 @@ export default {
     chatContainer() {
       const container = this.$refs.chatContainer;
       console.log("GOT CONTAINER", container);
-      if (this.useAudioLayout) {
+      if (this.useVoiceMode) {
         return container.$el;
       }
       return container;
@@ -522,15 +522,10 @@ export default {
         me && this.room.currentState && this.room.currentState.hasSufficientPowerLevelFor("redact", me.powerLevel);
       return isAdmin;
     },
-    useAudioLayout: {
+    useVoiceMode: {
       get: function () {
-        if (this.room) {
-          const tags = this.room.tags;
-          if (tags && tags["ui_options"]) {
-            return tags["ui_options"]["voice_mode"] === 1;
-          }
-        }
-        return false;
+        if (!this.$config.experimental_voice_mode) return false;
+        return util.useVoiceMode(this.room);
       },
     }
   },
@@ -611,6 +606,12 @@ export default {
         });
       }
     },
+    showRecorder(show) {
+      if (this.useVoiceMode) {
+        // Send typing indicators when recorder UI is opened/closed
+        this.$matrix.matrixClient.sendTyping(this.roomId, show, 10 * 60 * 1000);
+      }
+    }
   },
 
   methods: {
@@ -826,7 +827,7 @@ export default {
       const loadingDone = this.initialLoadDone;
       this.$matrix.matrixClient.decryptEventIfNeeded(event, {});
 
-      if (this.initialLoadDone && !this.useAudioLayout) {
+      if (this.initialLoadDone && !this.useVoiceMode) {
         this.paginateBackIfNeeded();
       }
 
@@ -1055,7 +1056,7 @@ export default {
           .then((success) => {
             if (success) {
               this.events = this.timelineWindow.getEvents();
-              if (!this.useAudioLayout) {
+              if (!this.useVoiceMode) {
                 this.scrollPosition.prepareFor("down");
                 this.$nextTick(() => {
                   // restore scroll position!
@@ -1312,7 +1313,7 @@ export default {
 
       let eventIdFirst = null;
       let eventIdLast = null;
-      if (!this.useAudioLayout) {
+      if (!this.useVoiceMode) {
         const container = this.chatContainer;
         const elFirst = util.getFirstVisibleElement(container);
         const elLast = util.getLastVisibleElement(container);
diff --git a/src/components/CreateRoom.vue b/src/components/CreateRoom.vue
index 3332e2a..85d08ea 100644
--- a/src/components/CreateRoom.vue
+++ b/src/components/CreateRoom.vue
@@ -3,29 +3,23 @@
     <div>
       <v-container fluid>
         <div class="room-name no-upper">{{ $t("new_room.new_room") }}</div>
-        <v-btn
-          id="btn-back"
-          text
-          class="header-button-left"
-          v-show="$navigation && $navigation.canPop()"
-          @click.stop="goBack"
-          :disabled="step > steps.NAME_SET"
-        >
+        <v-btn id="btn-back" text class="header-button-left" v-show="$navigation && $navigation.canPop()"
+          @click.stop="goBack" :disabled="step > steps.NAME_SET">
           <v-icon>arrow_back</v-icon>
           <span class="d-none d-sm-block">{{ $t("menu.back") }}</span>
         </v-btn>
         <!-- <v-btn
-          text
-          :disabled="
-            !roomName || (step != steps.INITIAL && step != steps.CREATED)
-          "
-          class="header-button-right"
-          @click.stop="onCreate"
-        >
-          <span>{{
-            step == steps.CREATED ? $t("new_room.done") : $t("new_room.next")
-          }}</span>
-        </v-btn> -->
+              text
+              :disabled="
+                !roomName || (step != steps.INITIAL && step != steps.CREATED)
+              "
+              class="header-button-right"
+              @click.stop="onCreate"
+            >
+              <span>{{
+                step == steps.CREATED ? $t("new_room.done") : $t("new_room.next")
+              }}</span>
+            </v-btn> -->
       </v-container>
     </div>
 
@@ -39,51 +33,43 @@
         </v-col>
       </v-row>
       <v-row cols="12" align="center" justify="center">
-        <v-col sm="8"  align="center">
+        <v-col sm="8" align="center">
           <div class="text-left font-weight-light">{{ $t("new_room.name_room") }}</div>
-          <v-text-field
-            v-model="roomName"
-            color="black"
-            :rules="roomNamerules"
-            counter="50"
-            maxlength="50"
-            background-color="white"
-            v-on:keyup.enter="$refs.topic.focus()"
-            :disabled="step > steps.INITIAL"
-            autofocus
-            solo
-            @update:error="updateErrorState"
-          ></v-text-field>
-          <div class="text-left font-weight-light" v-show="roomName.length> 0">{{ $t("new_room.room_topic") }}</div>
-          <v-text-field
-            v-model="roomTopic"
-            v-show="roomName.length > 0"
-            color="black"
-            background-color="white"
-            v-on:keyup.enter="$refs.create.focus()"
-            :disabled="step > steps.INITIAL"
-            solo
-          ></v-text-field>
-          <div class="error--text" v-if="roomCreationErrorMsg"> {{roomCreationErrorMsg}}</div>
-          <v-btn
-            id="btn-room-create"
-            color="black"
-            depressed
-            class="filled-button"
-            @click.stop="onCreate"
-            :disabled="isDisabled"
-            >
-              <div v-if="status && !enterRoomDialog" class="text-center">
-                {{ status }}
-                <v-progress-circular
-                  v-if="step == steps.CREATING"
-                  indeterminate
-                  color="primary"
-                  size="20"
-                ></v-progress-circular>
-              </div>
-              <span v-else>{{ $t("new_room.create") }}</span>
-            </v-btn>
+          <v-text-field v-model="roomName" color="black" :rules="roomNamerules" counter="50" maxlength="50"
+            background-color="white" v-on:keyup.enter="$refs.topic.focus()" :disabled="step > steps.INITIAL" autofocus
+            solo @update:error="updateErrorState"></v-text-field>
+          <div class="text-left font-weight-light" v-show="roomName.length > 0">{{ $t("new_room.room_topic") }}</div>
+          <v-text-field v-model="roomTopic" v-show="roomName.length > 0" color="black" background-color="white"
+            v-on:keyup.enter="$refs.create.focus()" :disabled="step > steps.INITIAL" solo></v-text-field>
+
+          <!-- Our only option right now is voice mode, so if not enabled, hide the 'options' drop down as well -->
+          <template v-if="$config.experimental_voice_mode">
+            <div @click.stop="showOptions = !showOptions" v-show="roomName.length > 0" class="options clickable">
+              <div>{{ $t("new_room.options") }}</div>
+              <v-icon v-if="!showOptions">expand_more</v-icon>
+              <v-icon v-else>expand_less</v-icon>
+            </div>
+            <v-card v-show="showOptions" class="account ma-3" flat>
+              <v-card-text class="with-right-label">
+                <div>
+                  <div class="option-title">{{ $t('room_info.voice_mode') }}</div>
+                  <div class="option-text">{{ $t('room_info.voice_mode_info') }}</div>
+                </div>
+                <v-switch v-model="useVoiceMode"></v-switch>
+              </v-card-text>
+            </v-card>
+          </template>
+
+          <div class="error--text" v-if="roomCreationErrorMsg"> {{ roomCreationErrorMsg }}</div>
+          <v-btn id="btn-room-create" color="black" depressed class="filled-button" @click.stop="onCreate"
+            :disabled="isDisabled">
+            <div v-if="status && !enterRoomDialog" class="text-center">
+              {{ status }}
+              <v-progress-circular v-if="step == steps.CREATING" indeterminate color="primary"
+                size="20"></v-progress-circular>
+            </div>
+            <span v-else>{{ $t("new_room.create") }}</span>
+          </v-btn>
         </v-col>
       </v-row>
     </v-container>
@@ -91,126 +77,101 @@
     <v-fade-transition>
       <!-- <div class="section ma-3" flat v-if="step > steps.INITIAL"> -->
       <!--    <div class="h4 text-left">{{ $t("new_room.join_permissions") }}</div>
-        <div class="h2 text-left">
-          {{ $t("new_room.set_join_permissions") }}
-        </div>
-        <div>{{ $t("new_room.join_permissions_info") }}</div>
-        <v-select
-          :disabled="step >= steps.CREATING"
-          :items="joinRules"
-          class="mt-4"
-          v-model="joinRule"
-          item-value="id"
-        >
-          <template v-slot:selection="{ item }">
-            {{ item.text }}
-          </template>
-          <template v-slot:item="{ item, attrs, on }">
-            <v-list-item v-on="on" v-bind="attrs" #default="{ active }">
-              <v-list-item-avatar>
-                <v-icon class="grey lighten-1" dark>{{ item.icon }}</v-icon>
-              </v-list-item-avatar>
-              <v-list-item-content>
-                <v-list-item-title v-text="item.text"></v-list-item-title>
-                <v-list-item-subtitle
-                  v-text="item.descr"
-                ></v-list-item-subtitle>
-              </v-list-item-content>
-              <v-list-item-action>
-                <v-btn icon v-if="active">
-                  <v-icon color="grey lighten-1">check</v-icon>
-                </v-btn>
-              </v-list-item-action>
-            </v-list-item>
-          </template>
-        </v-select>
+            <div class="h2 text-left">
+              {{ $t("new_room.set_join_permissions") }}
+            </div>
+            <div>{{ $t("new_room.join_permissions_info") }}</div>
+            <v-select
+              :disabled="step >= steps.CREATING"
+              :items="joinRules"
+              class="mt-4"
+              v-model="joinRule"
+              item-value="id"
+            >
+              <template v-slot:selection="{ item }">
+                {{ item.text }}
+              </template>
+              <template v-slot:item="{ item, attrs, on }">
+                <v-list-item v-on="on" v-bind="attrs" #default="{ active }">
+                  <v-list-item-avatar>
+                    <v-icon class="grey lighten-1" dark>{{ item.icon }}</v-icon>
+                  </v-list-item-avatar>
+                  <v-list-item-content>
+                    <v-list-item-title v-text="item.text"></v-list-item-title>
+                    <v-list-item-subtitle
+                      v-text="item.descr"
+                    ></v-list-item-subtitle>
+                  </v-list-item-content>
+                  <v-list-item-action>
+                    <v-btn icon v-if="active">
+                      <v-icon color="grey lighten-1">check</v-icon>
+                    </v-btn>
+                  </v-list-item-action>
+                </v-list-item>
+              </template>
+            </v-select>
 
-        <v-divider style="margin-bottom: 20px" />
+            <v-divider style="margin-bottom: 20px" />
 
-        <v-text-field
-          v-if="publicRoomLink"
-          :value="publicRoomLink"
-          class="room-link"
-          readonly
-          filled
-          background-color="transparent"
-          append-icon="content_copy"
-          type="text"
-          @click:append.stop="copyRoomLink"
-        ></v-text-field>
-        <v-btn
-          v-else-if="joinRule == 'public'"
-          :loading="step == steps.CREATING"
-          block
-          depressed
-          class="outlined-button"
-          @click.stop="getPublicLink"
-          ><v-icon class="me-2">link</v-icon
-          >{{ $t("new_room.get_link") }}</v-btn
-        >
-        <v-btn
-          v-else-if="joinRule == 'invite'"
-          block
-          depressed
-          class="outlined-button"
-          @click.stop="addPeople"
-          ><v-icon class="me-2">person_add</v-icon
-          >{{ $t("new_room.add_people") }}</v-btn
-        >
+            <v-text-field
+              v-if="publicRoomLink"
+              :value="publicRoomLink"
+              class="room-link"
+              readonly
+              filled
+              background-color="transparent"
+              append-icon="content_copy"
+              type="text"
+              @click:append.stop="copyRoomLink"
+            ></v-text-field>
+            <v-btn
+              v-else-if="joinRule == 'public'"
+              :loading="step == steps.CREATING"
+              block
+              depressed
+              class="outlined-button"
+              @click.stop="getPublicLink"
+              ><v-icon class="me-2">link</v-icon
+              >{{ $t("new_room.get_link") }}</v-btn
+            >
+            <v-btn
+              v-else-if="joinRule == 'invite'"
+              block
+              depressed
+              class="outlined-button"
+              @click.stop="addPeople"
+              ><v-icon class="me-2">person_add</v-icon
+              >{{ $t("new_room.add_people") }}</v-btn
+            >
 
-        <div v-if="publicRoomLinkCopied" class="link-copied">
-          {{ $t("new_room.link_copied") }}
-        </div>
--->
+            <div v-if="publicRoomLinkCopied" class="link-copied">
+              {{ $t("new_room.link_copied") }}
+            </div>
+    -->
       <!-- <div v-if="status && !enterRoomDialog" class="text-center">
-        <v-progress-circular
-          v-if="step == steps.CREATING"
-          indeterminate
-          color="primary"
-          size="20"
-        ></v-progress-circular>
-        {{ status }}
-      </div> -->
+            <v-progress-circular
+              v-if="step == steps.CREATING"
+              indeterminate
+              color="primary"
+              size="20"
+            ></v-progress-circular>
+            {{ status }}
+          </div> -->
       <!-- </div> -->
     </v-fade-transition>
-    <input
-      id="room-avatar-picker"
-      ref="avatar"
-      type="file"
-      name="avatar"
-      @change="handlePickedAvatar($event)"
-      accept="image/*"
-      class="d-none"
-    />
-    <v-dialog
-      v-model="enterRoomDialog"
-      :width="$vuetify.breakpoint.smAndUp ? '50%' : '90%'"
-    >
+    <input id="room-avatar-picker" ref="avatar" type="file" name="avatar" @change="handlePickedAvatar($event)"
+      accept="image/*" class="d-none" />
+    <v-dialog v-model="enterRoomDialog" :width="$vuetify.breakpoint.smAndUp ? '50%' : '90%'">
       <v-card>
         <v-container v-if="canEditProfile" class="pa-10">
           <v-row class="align-center">
             <v-col class="py-0">
               <div class="text-left font-weight-bold">{{ $t("join.choose_name") }}</div>
-              <v-select
-                ref="avatar"
-                :items="availableAvatars"
-                cache-items
-                outlined
-                dense
-                @change="selectAvatar"
-                :value="availableAvatars[0]"
-                single-line
-                autofocus
-              >
+              <v-select ref="avatar" :items="availableAvatars" cache-items outlined dense @change="selectAvatar"
+                :value="availableAvatars[0]" single-line autofocus>
                 <template v-slot:selection>
-                  <v-text-field
-                    background-color="transparent"
-                    solo
-                    flat
-                    hide-details
-                    @click.native.stop="{}"
-                    v-model="selectedProfile.name"
-                  ></v-text-field>
+                  <v-text-field background-color="transparent" solo flat hide-details @click.native.stop="{}"
+                    v-model="selectedProfile.name"></v-text-field>
                 </template>
                 <template v-slot:item="data">
                   <v-avatar size="32">
@@ -219,33 +180,23 @@
                   <div class="ms-2">{{ data.item.name }}</div>
                 </template>
               </v-select>
-              </v-col>
-              <v-col cols="2" class="py-0">
-                 <v-avatar @click="showAvatarPickerList">
+            </v-col>
+            <v-col cols="2" class="py-0">
+              <v-avatar @click="showAvatarPickerList">
                 <v-img v-if="selectedProfile" :src="selectedProfile.image" />
               </v-avatar>
             </v-col>
           </v-row>
           <v-row class="mt-0">
             <v-col class="py-0">
-              <v-checkbox
-                id="chk-remember-me"
-                class="mt-0"
-                v-model="rememberMe"
-                @change="onRememberMe"
-                :label="$t('join.remember_me')"
-              />
+              <v-checkbox id="chk-remember-me" class="mt-0" v-model="rememberMe" @change="onRememberMe"
+                :label="$t('join.remember_me')" />
             </v-col>
           </v-row>
-          <v-btn
-            color="black"
-            depressed
-            class="filled-button"
-            @click.stop="onEnterRoom"
-            :disabled="!selectedProfile.name"
-            >
-              {{ $t("join.enter_room") }}
-            </v-btn>
+          <v-btn color="black" depressed class="filled-button" @click.stop="onEnterRoom"
+            :disabled="!selectedProfile.name">
+            {{ $t("join.enter_room") }}
+          </v-btn>
         </v-container>
       </v-card>
     </v-dialog>
@@ -253,7 +204,7 @@
 </template>
 
 <script>
-import util from "../plugins/utils";
+import util, { ROOM_TYPE_VOICE_MODE } from "../plugins/utils";
 import rememberMeMixin from "./rememberMeMixin";
 
 const steps = Object.freeze({
@@ -265,7 +216,7 @@ const steps = Object.freeze({
 
 export default {
   name: "CreateRoom",
-  mixins:[rememberMeMixin],
+  mixins: [rememberMeMixin],
   data() {
     return {
       steps,
@@ -305,7 +256,9 @@ export default {
         v => !v.includes(':') || this.$t("new_room.colon_not_allowed")
       ],
       roomNameHasError: false,
-      roomCreationErrorMsg: ""
+      roomCreationErrorMsg: "",
+      showOptions: false,
+      useVoiceMode: false,
     };
   },
 
@@ -314,7 +267,7 @@ export default {
     this.availableAvatars = util.getDefaultAvatars();
     this.selectAvatar(
       this.availableAvatars[
-        Math.floor(Math.random() * this.availableAvatars.length)
+      Math.floor(Math.random() * this.availableAvatars.length)
       ]
     );
   },
@@ -359,7 +312,7 @@ export default {
     },
 
     onCreate() {
-      if(this.currentUser) {
+      if (this.currentUser) {
         this.onEnterRoom();
       } else {
         this.enterRoomDialog = true;
@@ -486,6 +439,11 @@ export default {
         // Add topic
         createRoomOptions.topic = this.roomTopic;
       }
+      if (this.useVoiceMode) {
+        createRoomOptions.creation_content = {
+          type: ROOM_TYPE_VOICE_MODE
+        }
+      }
 
       return this.$matrix
         .getLoginPromise()
@@ -592,7 +550,7 @@ export default {
         })
         .catch((error) => {
           this.status = ""
-          this.roomCreationErrorMsg =  (error.data && error.data.error) || error.message || error.toString();
+          this.roomCreationErrorMsg = (error.data && error.data.error) || error.message || error.toString();
           this.step = steps.INITIAL; // revert
           return null;
         });
diff --git a/src/components/RoomInfo.vue b/src/components/RoomInfo.vue
index 1b58c03..def4419 100644
--- a/src/components/RoomInfo.vue
+++ b/src/components/RoomInfo.vue
@@ -165,7 +165,7 @@
       </v-card-text>
     </v-card>
 
-    <v-card class="account ma-3" flat>
+    <v-card class="account ma-3" flat v-if="$config.experimental_voice_mode">
       <v-card-title class="h2 with-right-label"><div>{{ $t("room_info.experimental_features") }}</div><div></div></v-card-title>
       <v-card-text class="with-right-label">
         <div>
@@ -173,7 +173,7 @@
           <div class="option-text">{{ $t('room_info.voice_mode_info') }}</div>
         </div>
         <v-switch
-        v-model="useAudioLayout"
+        v-model="useVoiceMode"
       ></v-switch>
       </v-card-text>
     </v-card>
@@ -376,15 +376,9 @@ export default {
       return "";
     },
 
-    useAudioLayout: {
+    useVoiceMode: {
       get: function () {
-        if (this.room) {
-          const tags = this.room.tags;
-          if (tags && tags["ui_options"]) {
-            return tags["ui_options"]["voice_mode"] === 1;
-          }
-        }
-        return false;
+        return util.useVoiceMode(this.room);
       },
       set: function (audioLayout) {
         if (this.room && this.room.tags) {
diff --git a/src/plugins/utils.js b/src/plugins/utils.js
index 740c2a4..95ea715 100644
--- a/src/plugins/utils.js
+++ b/src/plugins/utils.js
@@ -3,6 +3,8 @@ import * as ContentHelpers from "matrix-js-sdk/lib/content-helpers";
 import dataUriToBuffer from "data-uri-to-buffer";
 import ImageResize from "image-resize";
 
+export const ROOM_TYPE_VOICE_MODE = "im.keanu.room_type_voice";
+
 const sizeOf = require("image-size");
 
 var dayjs = require('dayjs');
@@ -424,6 +426,36 @@ class Util {
         });
     }
 
+    /**
+     * Return 'true' if we should use voice mode for the given room.
+     * 
+     * The default value is given by the room itself. If the "type" of the
+     * room is set to 'im.keanu.room_type_voice' then we default to voice mode,
+     * else not. The user can then override this default by flipping the "voice mode"
+     * swicth on room settings (it will be persisted as a user specific tag on the room) 
+     */
+    useVoiceMode(roomOrNull) {
+        if (roomOrNull) {
+            const room = roomOrNull;
+
+            // Have we changed our local view mode of this room?
+            const tags = room.tags;
+            if (tags && tags["ui_options"]) {
+              return tags["ui_options"]["voice_mode"] === 1;
+            }
+  
+            // Was the room created with a voice mode type?
+            const createEvent = room.currentState.getStateEvents(
+              "m.room.create",
+              ""
+            );
+            if (createEvent) {
+                return createEvent.getContent().type === ROOM_TYPE_VOICE_MODE;
+            }
+        }
+        return false;
+    }
+
     /** Generate a random user name */
     randomUser(prefix) {
         var pfx = prefix ? prefix.replace(/[^0-9a-zA-Z\-_]/gi, '') : null;

From 33f0821c92f39a5aa59a2bfb2f815617f9a75a85 Mon Sep 17 00:00:00 2001
From: N-Pex <npexdev@gmail.com>
Date: Fri, 17 Feb 2023 22:30:15 +0100
Subject: [PATCH 5/5] Show recording users in the audio layout

---
 src/assets/css/chat.scss       | 21 +++++++++++++++++++
 src/components/AudioLayout.vue | 38 +++++++++++++++++++++++++++++++++-
 src/components/Chat.vue        |  1 +
 3 files changed, 59 insertions(+), 1 deletion(-)

diff --git a/src/assets/css/chat.scss b/src/assets/css/chat.scss
index 2c8eaea..e76e6e8 100644
--- a/src/assets/css/chat.scss
+++ b/src/assets/css/chat.scss
@@ -1283,6 +1283,27 @@ body {
     flex: 1 0 auto;
     padding: 20px;
   }
+  .typing-users {
+    flex: 1 0 52px;
+    min-height: 52px;
+    padding: 20px;
+    overflow-x: auto;
+    overflow-y: hidden;
+    max-width: 100%;
+    display: flex;
+    .typing-user {
+      width: 32px !important;
+      height: 32px !important;
+      margin-left: -8px !important;
+    }
+    .list-enter-active, .list-leave-active {
+      transition: all 1s;
+    }
+    .list-enter, .list-leave-to /* .list-leave-active below version 2.1.8 */ {
+      opacity: 0;
+      transform: translateY(24px);
+    }
+  }
   .load-later {
     flex: 1 0 auto;
     padding: 20px;
diff --git a/src/components/AudioLayout.vue b/src/components/AudioLayout.vue
index a3f145c..d3b9920 100644
--- a/src/components/AudioLayout.vue
+++ b/src/components/AudioLayout.vue
@@ -3,6 +3,19 @@
     <div class="load-earlier clickable" @click="loadPrevious">
       <v-icon color="white" size="28">expand_less</v-icon>
     </div>
+
+    <!-- Currently recording users -->
+    <div class="typing-users">
+      <transition-group name="list" tag="div">
+        <v-avatar v-for="(member) in recordingMembersExceptMe" :key="member.userId" class="typing-user" size="32" color="grey">
+          <img v-if="memberAvatar(member)" :src="memberAvatar(member)" />
+          <span v-else class="white--text headline">{{
+            member.name.substring(0, 1).toUpperCase()
+          }}</span>
+        </v-avatar>
+      </transition-group>
+    </div>
+
     <div class="sound-wave-view">
       <div class="volume-container">
         <div ref="volume"></div>
@@ -77,7 +90,13 @@ export default {
       default: function () {
         return null;
       }
-    }
+    },
+    recordingMembers: {
+      type: Array,
+      default: function () {
+        return []
+      }
+    },
   },
   data() {
     return {
@@ -167,6 +186,11 @@ export default {
         }
       },
     },
+    recordingMembersExceptMe() {
+      return this.recordingMembers.filter((member) => {
+        return member.userId !== this.$matrix.currentUserId;
+      });
+    },
   },
   watch: {
     autoplay: {
@@ -412,6 +436,18 @@ export default {
             });
       }
     },
+    memberAvatar(member) {
+      if (member) {
+        return member.getAvatarUrl(
+          this.$matrix.matrixClient.getHomeserverUrl(),
+          40,
+          40,
+          "scale",
+          true
+        );
+      }
+      return null;
+    },
   }
 };
 </script>
diff --git a/src/components/Chat.vue b/src/components/Chat.vue
index 645d316..bf26cf4 100644
--- a/src/components/Chat.vue
+++ b/src/components/Chat.vue
@@ -8,6 +8,7 @@
       :events="events" :autoplay="!showRecorder" 
       :timelineSet="timelineSet"
       :readMarker="readMarker"
+      :recordingMembers="typingMembers"
       v-on:start-recording="showRecorder = true"
       v-on:loadnext="handleScrolledToBottom(false)"
       v-on:loadprevious="handleScrolledToTop()"