VID-706: Add button to enable sound in live player

plugin/live/amd/src/audioswitch.js

@@ -0,0 +1,48 @@
+/*
+ * Audio control listner
+ *
+ * @package    videotimeplugin_live
+ * @module     videotimeplugin_live/audioswitch
+ * @copyright  2023 bdecent gmbh <https://bdecent.de>
+ * @license    http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
+ */
+
+/**
+ * Handle click event
+ *
+ * @param {Event} e Click event
+ */
+const handleClick = e => {
+    const button = e.target.closest('[data-contextid] button[data-audio]');
+
+    if (button) {
+        const action = button.getAttribute('data-audio'),
+            contextid = button.closest('[data-contextid]').getAttribute('data-contextid');
+
+        e.stopPropagation();
+        e.preventDefault();
+
+        document.querySelectorAll('[data-contextid] button[data-audio]').forEach(button => {
+            if (button.getAttribute('data-audio') === action) {
+                button.classList.add('hidden');
+            } else {
+                button.classList.remove('hidden');
+            }
+        });
+
+        document.querySelectorAll(`[data-contextid="${contextid}"] audio`).forEach(audio => {
+            audio.setAttribute('volume', action === 'disable' ? 0 : 1);
+            audio.muted = (action === 'disable');
+        });
+    }
+};
+
+export default {
+    /**
+     * Add listener
+     */
+    init: function() {
+        document.removeEventListener('click', handleClick);
+        document.addEventListener('click', handleClick);
+    }
+};

plugin/live/lang/en/videotimeplugin_live.php

@@ -24,6 +24,8 @@
 
 defined('MOODLE_INTERNAL') || die();
 
+$string['disableaudio'] = 'Disable audio';
+$string['enableaudio'] = 'Enable audio';
 $string['enabledeftvideo'] = 'The Video Time live player requires the
 admin to install Deft response block and enable video bridging in the
 site settings';

plugin/live/templates/video_embed.mustache

@@ -60,22 +60,26 @@
         <audio class="w-100"
             id="audio-embed-{{uniqueid}}"
             autoplay
-            controls {{# playsinline }} playsinline {{/ playsinline }}
+            muted
+            {{# playsinline }} playsinline {{/ playsinline }}
         >
         </audio>
+        <button class="" data-audio="enable">{{# str }} enableaudio, videotimeplugin_live {{/ str }}</button>
+        <button class="hidden" data-audio="disable">{{# str }} disableaudio, videotimeplugin_live {{/ str }}</button>
     </div>
     <div class="vimeo-video-description">
         {{{video_description}}}
     </div>
 </div>
 {{/ instance }}
 {{#js}}
-    require(['videotimeplugin_live/videotime'], function(VideoTime) {
+    require(['videotimeplugin_live/audioswitch', 'videotimeplugin_live/videotime'], function(AudioSwitch, VideoTime) {
         var v = new VideoTime('video-embed-{{uniqueid}}', {{cmid}}, {{haspro}}, {{interval}}, {{{instance}}});
         v.initialize(
             {{ contextid }},
             '{{ token }}',
             {{ peerid }}
         );
+        AudioSwitch.init();
     });
 {{/js}}