Merge pull request #856 from biigle/mute_unmute_video

Implement setting to mute/unmute video
biigle · Jun 14, 2024 · e765ccd · e765ccd
2 parents d6cffb0 + 34dbf36
commit e765ccd
Show file tree

Hide file tree

Showing 5 changed files with 26 additions and 1 deletion.
diff --git a/resources/assets/js/videos/components/settingsTab.vue b/resources/assets/js/videos/components/settingsTab.vue
@@ -16,6 +16,7 @@ export default {
                 'showMousePosition',
                 'showProgressIndicator',
                 'jumpStep',
+                'muteVideo'
             ],
             annotationOpacity: 1,
             showMinimap: true,
@@ -25,6 +26,7 @@ export default {
             playbackRate: 1.0,
             jumpStep: 5.0,
             showProgressIndicator: true,
+            muteVideo: true,
         };
     },
     methods: {
@@ -52,6 +54,12 @@ export default {
         handleHideProgressIndicator() {
             this.showProgressIndicator = false;
         },
+        handleMuteVideo() {
+            this.muteVideo = true;
+        },
+        handleUnmuteVideo() {
+            this.muteVideo = false;
+        },
     },
     watch: {
         annotationOpacity(value) {
@@ -93,6 +101,10 @@ export default {
             this.$emit('update', 'showProgressIndicator', show);
             Settings.set('showProgressIndicator', show);
         },
+        muteVideo(show) {
+            this.$emit('update', 'muteVideo', show);
+            Settings.set('muteVideo', show);
+        },
     },
     created() {
         this.restoreKeys.forEach((key) => {

diff --git a/resources/assets/js/videos/stores/settings.js b/resources/assets/js/videos/stores/settings.js
@@ -8,6 +8,7 @@ let defaults = {
     showMousePosition: false,
     showProgressIndicator: true,
     jumpStep: 5.0,
+    muteVideo: true,
 };
 
 export default new Settings({

diff --git a/resources/assets/js/videos/videoContainer.vue b/resources/assets/js/videos/videoContainer.vue
@@ -69,6 +69,7 @@ export default {
                 playbackRate: 1.0,
                 jumpStep: 5.0,
                 showProgressIndicator: true,
+                muteVideo: true,
             },
             openTab: '',
             urlParams: {
@@ -671,6 +672,9 @@ export default {
         'settings.playbackRate'(rate) {
             this.video.playbackRate = rate;
         },
+        'settings.muteVideo'(mute) {
+            this.video.muted = mute;
+        },
         urlParams: {
             deep: true,
             handler(params) {
@@ -697,7 +701,7 @@ export default {
 
         this.initAnnotationFilters();
         this.restoreUrlParams();
-        this.video.muted = true;
+        this.video.muted = this.settings.muteVideo;
         this.video.preload = 'auto';
         this.video.addEventListener('error', function (e) {
             if (e.target.error.code === MediaError.MEDIA_ERR_SRC_NOT_SUPPORTED) {

diff --git a/resources/views/manual/tutorials/videos/sidebar.blade.php b/resources/views/manual/tutorials/videos/sidebar.blade.php
@@ -75,5 +75,9 @@
         <p>
             The mouse position switch controls the display of an additional map overlay that shows the current position of the cursor on the video in pixels.
         </p>
+
+        <p>
+            The mute video switch enables or disables the audio track of the video.
+        </p>
     </div>
 @endsection
diff --git a/resources/views/videos/show/sidebar-settings.blade.php b/resources/views/videos/show/sidebar-settings.blade.php
@@ -39,6 +39,10 @@
                     <power-toggle :active="showMousePosition" title-off="Show mouse position" title-on="Hide mouse position" v-on:on="handleShowMousePosition" v-on:off="handleHideMousePosition">Mouse Position</power-toggle>
                 </div>
 
+                <div class="sidebar-tab__section">
+                    <power-toggle :active="muteVideo" title-off="Mute video" title-on="Unmute video" v-on:on="handleMuteVideo" v-on:off="handleUnmuteVideo">Mute Video</power-toggle>
+                </div>
+
             </div>
     </settings-tab>
 </sidebar-tab>