Experimental "read only" room support

src/components/AudioLayout.vue

@@ -56,12 +56,14 @@
     </div>
 
     <div class="load-later">
-      <v-btn v-if="canRecordAudio" class="mic-button" ref="mic_button" fab small elevation="0" v-blur
-        @click.stop="$emit('start-recording')">
+      <v-btn :class="{'mic-button': true, 'dimmed': !canRecordAudio}" ref="mic_button" fab small elevation="0" v-blur
+        @click.stop="micButtonClicked()">
         <v-icon color="white">mic</v-icon>
       </v-btn>
       <v-icon class="clickable" @click="loadNext" color="white" size="28">expand_more</v-icon>
     </div>
+
+    <div v-if="showReadOnlyToast" class="toast-read-only">{{ $t("message.not_allowed_to_send") }}</div>
   </div>
 </template>
 
@@ -111,6 +113,7 @@ export default {
       playing: false,
       analyzer: null,
       analyzerDataArray: null,
+      showReadOnlyToast: false,
     };
   },
   mounted() {
@@ -162,12 +165,7 @@ export default {
   },
   computed: {
     canRecordAudio() {
-      if (this.room) {
-        const myUserId = this.$matrix.currentUserId;
-        const me = this.room.getMember(myUserId);
-        return me && me.powerLevelNorm > 0 && util.browserCanRecordAudio();
-      }
-      return false;
+      return !this.$matrix.currentRoomIsReadOnlyForUser && util.browserCanRecordAudio();
     },
     currentTime() {
       return util.formatDuration(this.playTime);
@@ -448,6 +446,17 @@ export default {
       }
       return null;
     },
+
+    micButtonClicked() {
+      if (this.$matrix.currentRoomIsReadOnlyForUser) {
+        this.showReadOnlyToast = true;
+        setTimeout(() => {
+          this.showReadOnlyToast = false;
+        }, 3000);
+      } else {
+        this.$emit('start-recording');
+      }
+    }
   }
 };
 </script>