Merge pull request #82 from os2display/feature/AR-853-video-mute

Feature/ar 853 video mute
os2display · Aug 30, 2022 · ffb546a · ffb546a
2 parents 4533758 + dd4c073
commit ffb546a
Show file tree

Hide file tree

Showing 4 changed files with 25 additions and 2 deletions.
diff --git a/build/video-admin.json b/build/video-admin.json
@@ -21,5 +21,13 @@
     "acceptedMimetypes": ["video/webm", "video/mp4"],
     "formGroupClasses": "h5 mb-3",
     "helpText": "Følgende formatter accepteres: .webm, mp4"
+  },
+  {
+    "key": "video-form-sound",
+    "input": "checkbox",
+    "label": "Afspil lyd",
+    "name": "sound",
+    "formGroupClasses": "col-md-9 mt-3",
+    "helpText": "Hvis videoen har lyd, skal enheden konfigureres til at automatisk afspilning er muligt."
   }
 ]
diff --git a/build/video.js b/build/video.js
diff --git a/src/video/video-admin.json b/src/video/video-admin.json
@@ -21,5 +21,13 @@
     "acceptedMimetypes": ["video/webm", "video/mp4"],
     "formGroupClasses": "h5 mb-3",
     "helpText": "Følgende formatter accepteres: .webm, mp4"
+  },
+  {
+    "key": "video-form-sound",
+    "input": "checkbox",
+    "label": "Afspil lyd",
+    "name": "sound",
+    "formGroupClasses": "col-md-9 mt-3",
+    "helpText": "Hvis videoen har lyd, skal enheden konfigureres til at automatisk afspilning er muligt."
   }
 ]
diff --git a/src/video/video.js b/src/video/video.js
@@ -17,6 +17,7 @@ import "../global-styles.css";
 function Video({ slide, content, run, slideDone, executionId }) {
   const videoUrls = getAllMediaUrlsFromField(slide.mediaData, content.video);
   const videoRef = useRef();
+  const { sound } = content;
 
   const onEnded = () => {
     slideDone(slide);
@@ -31,6 +32,11 @@ function Video({ slide, content, run, slideDone, executionId }) {
       videoRef?.current?.load();
       videoRef?.current?.addEventListener("ended", onEnded);
       videoRef?.current?.addEventListener("error", onError);
+      videoRef.current.muted = true;
+      if (sound) {
+        videoRef.current.muted = false;
+      }
+      console.log(videoRef.current.muted);
 
       const promise = videoRef.current.play();
 
@@ -56,7 +62,7 @@ function Video({ slide, content, run, slideDone, executionId }) {
       {/* eslint-disable-next-line jsx-a11y/media-has-caption */}
       <video width="100%" height="100%" ref={videoRef}>
         {videoUrls.map((url) => (
-          <source key={url} src={url} />
+          <source muted={!sound} key={url} src={url} />
         ))}
       </video>
 
@@ -76,6 +82,7 @@ Video.propTypes = {
     }),
   }).isRequired,
   content: PropTypes.shape({
+    sound: PropTypes.bool,
     video: PropTypes.arrayOf(PropTypes.string),
   }).isRequired,
   executionId: PropTypes.string.isRequired,