fix(volume): bind output slider volume to stream volume

components/ui/Chat/TypingIndicator/TypingIndicator.vue

@@ -22,7 +22,7 @@ export default Vue.extend({
    */
   methods: {
     checkUsersTyping() {
-      if (this.users.length <= 3 && this.users.length != 0) {
+      if (this.users.length <= 3 && this.users.length) {
         return 1
       }
       if (this.users.length > 3) {

components/views/media/Media.vue

@@ -203,6 +203,18 @@ export default Vue.extend({
         })
       }
     },
+    'audio.volume': {
+      handler(volume) {
+        // Bind stream audio element volume to slider volume
+        const audioStreamElements = document.getElementsByClassName(
+          'remote-audio-stream',
+        ) as HTMLCollectionOf<HTMLAudioElement>
+
+        for (const audioStreamElement of audioStreamElements) {
+          audioStreamElement.volume = volume / 100
+        }
+      },
+    },
   },
   beforeMount() {
     // TODO: Create mixin/library that will handle call rejoining and closing

components/views/media/user/User.html

@@ -33,10 +33,11 @@
     />
     <TypographyTag :text="user.name" inverted />
   </div>
-  <div
-    v-if="!isLocal && !audio.deafened && audioStream"
-    class="audio-stream-container"
-  >
-    <audio :src-object.prop="audioStream" autoplay />
+    <div
+      v-if="!isLocal && !audio.deafened && audioStream"
+      class="audio-stream-container"
+    >
+      <audio :id="`audio-stream-${audioStream.id}`" :class="`${isLocal ? 'local' : 'remote'}-audio-stream`" :src-object.prop="audioStream" autoplay />
+    </div>
   </div>
 </div>

components/views/media/user/User.vue

@@ -142,6 +142,18 @@ export default Vue.extend({
       loadVideos()
     })
   },
+  updated() {
+    // When audio is streamed, initialize stream volume to current volume.
+    if (!this.isLocal && !this.audio.deafened && this.audioStream) {
+      const audioStreamElements = document.getElementsByClassName(
+        `remote-audio-stream`,
+      ) as HTMLCollectionOf<HTMLAudioElement>
+
+      for (const audioStreamElement of audioStreamElements) {
+        audioStreamElement.volume = this.audio.volume / 100
+      }
+    }
+  },
 })
 </script>
 

components/views/settings/pages/realms/realm/index.vue

@@ -9,7 +9,7 @@ export default Vue.extend({
   props: {
     realm: {
       type: Object as PropType<Realm>,
-      default: {},
+      default: () => ({}),
     },
   },
   computed: {