Add volume control

src/i18n/locales/de-DE.json

@@ -37,6 +37,10 @@
         "time-duration-tooltip": "Videodauer",
         "duration-aria": "Dauer",
         "time-aria": "Aktuelle Zeit",
+        "mutebutton-tooltip": "Video stummschalten",
+        "unmutebutton-tooltip": "Stummschaltung aufheben",
+        "volume-tooltip": "Lautstärke: {{current}}%",
+        "volumeSlider-aria": "Anpassen der Videolautstärke.",
         "comError-text": "Bei der Kommunikation mit Opencast ist ein Problem aufgetreten.",
         "loadError-text": "Beim Laden des Videos ist ein Fehler aufgetreten.",
         "durationError-text": "Opencast konnte die Video-Dauer nicht angeben.",

src/i18n/locales/en-US.json

@@ -39,6 +39,10 @@
       "time-duration-tooltip": "Video duration",
       "duration-aria": "Duration",
       "time-aria": "Current time",
+      "mutebutton-tooltip": "Mute video",
+      "unmutebutton-tooltip": "Unmute video",
+      "volume-tooltip": "Adjust volume: {{current}}%",
+      "volumeSlider-aria": "Adjust the volume level of the video.",
       "comError-text": "A problem occurred during communication with Opencast.",
       "loadError-text": "An error has occurred loading this video.",
       "durationError-text": "Opencast failed to provide the video duration.",

src/main/Cutting.tsx

@@ -1,7 +1,7 @@
 import React, { useEffect } from "react";
 import CuttingActions from "./CuttingActions"
 import Timeline from './Timeline';
-import { fetchVideoInformation, selectCurrentlyAt, selectDuration, selectIsPlaying, selectIsPlayPreview, selectTitle, setClickTriggered, setCurrentlyAt, setIsPlaying, setIsPlayPreview } from '../redux/videoSlice';
+import { fetchVideoInformation, selectCurrentlyAt, selectDuration, selectIsPlaying, selectIsMuted, selectVolume, selectIsPlayPreview, selectTitle, setClickTriggered, setCurrentlyAt, setIsPlaying, setIsMuted, setVolume, setIsPlayPreview } from '../redux/videoSlice';
 import { useTranslation } from 'react-i18next';
 import { useDispatch, useSelector } from 'react-redux';
 import { AppDispatch } from '../redux/store';
@@ -71,8 +71,12 @@ const Cutting: React.FC = () => {
         <VideoControls
           selectCurrentlyAt={selectCurrentlyAt}
           selectIsPlaying={selectIsPlaying}
+          selectIsMuted={selectIsMuted}
+          selectVolume={selectVolume}
           selectIsPlayPreview={selectIsPlayPreview}
           setIsPlaying={setIsPlaying}
+          setIsMuted={setIsMuted}
+          setVolume={setVolume}
           setIsPlayPreview={setIsPlayPreview}
         />
       </div>

src/main/SubtitleVideoArea.tsx

@@ -15,7 +15,7 @@ import { selectCurrentlyAt,
   selectIsPlayPreview,
   setIsPlayPreview,
   setCurrentlyAtAndTriggerPreview} from "../redux/subtitleSlice";
-import { selectVideos } from "../redux/videoSlice";
+import {selectIsMuted, selectVideos, selectVolume, setIsMuted, setVolume} from "../redux/videoSlice";
 import { Flavor } from "../types";
 import { settings } from "../config";
 import { useTranslation } from "react-i18next";
@@ -122,11 +122,13 @@ const SubtitleVideoArea : React.FC = () => {
             first={true}
             last={true}
             selectIsPlaying={selectIsPlaying}
+            selectIsMuted={selectIsMuted}
             selectCurrentlyAtInSeconds={selectCurrentlyAtInSeconds}
             selectPreviewTriggered={selectPreviewTriggered}
             selectClickTriggered={selectClickTriggered}
             selectAspectRatio={selectAspectRatio}
             setIsPlaying={setIsPlaying}
+            selectVolume={selectVolume}
             setPreviewTriggered={setPreviewTriggered}
             setClickTriggered={setClickTriggered}
             setCurrentlyAt={setCurrentlyAtAndTriggerPreview}
@@ -135,8 +137,12 @@ const SubtitleVideoArea : React.FC = () => {
           <VideoControls
             selectCurrentlyAt={selectCurrentlyAt}
             selectIsPlaying={selectIsPlaying}
+            selectIsMuted={selectIsMuted}
+            selectVolume={selectVolume}
             selectIsPlayPreview={selectIsPlayPreview}
             setIsPlaying={setIsPlaying}
+            setIsMuted={setIsMuted}
+            setVolume={setVolume}
             setIsPlayPreview={setIsPlayPreview}
           />
         </div>

src/main/Thumbnail.tsx

@@ -12,7 +12,7 @@ import { selectOriginalThumbnails, selectVideos, selectTracks, setHasChanges, se
 import { Track } from "../types";
 import Timeline from "./Timeline";
 import {
-  selectIsPlaying, selectCurrentlyAt, setIsPlaying, selectIsPlayPreview, setIsPlayPreview, setClickTriggered, setCurrentlyAt
+  selectIsPlaying, selectIsMuted, selectVolume, selectCurrentlyAt, setIsPlaying, selectIsPlayPreview, setIsPlayPreview, setClickTriggered, setIsMuted, setVolume, setCurrentlyAt
 } from '../redux/videoSlice'
 import { ThemedTooltip } from "./Tooltip";
 import VideoPlayers from "./VideoPlayers";
@@ -120,8 +120,12 @@ const Thumbnail : React.FC = () => {
           <VideoControls
             selectCurrentlyAt={selectCurrentlyAt}
             selectIsPlaying={selectIsPlaying}
+            selectIsMuted={selectIsMuted}
+            selectVolume={selectVolume}
             selectIsPlayPreview={selectIsPlayPreview}
             setIsPlaying={setIsPlaying}
+            setIsMuted={setIsMuted}
+            setVolume={setVolume}
             setIsPlayPreview={setIsPlayPreview}
           />
         </div>

src/main/VideoControls.tsx

@@ -3,7 +3,7 @@ import React from "react";
 import { css } from '@emotion/react'
 
 import { FaToggleOn, FaToggleOff } from "react-icons/fa";
-import { LuPlay, LuPause } from "react-icons/lu";
+import { LuPlay, LuPause, LuVolume2, LuVolumeX } from "react-icons/lu";
 
 import { useSelector, useDispatch } from 'react-redux';
 import {
@@ -22,6 +22,7 @@ import { ActionCreatorWithPayload } from "@reduxjs/toolkit";
 import { ThemedTooltip } from "./Tooltip";
 import { Theme, useTheme } from "../themes";
 import { useHotkeys } from "react-hotkeys-hook";
+import { Slider } from "@mui/material";
 
 /**
  * Contains controls for manipulating multiple video players at once
@@ -30,14 +31,22 @@ import { useHotkeys } from "react-hotkeys-hook";
 const VideoControls: React.FC<{
   selectCurrentlyAt: (state: RootState) => number,
   selectIsPlaying: (state: RootState) => boolean,
+  selectIsMuted: (state: RootState) => boolean,
+  selectVolume: (state: RootState) => number,
   selectIsPlayPreview: (state: RootState) => boolean,
   setIsPlaying: ActionCreatorWithPayload<boolean, string>,
+  setIsMuted: ActionCreatorWithPayload<boolean, string>,
+  setVolume: ActionCreatorWithPayload<number, string>,
   setIsPlayPreview: ActionCreatorWithPayload<boolean, string>,
 }> = ({
   selectCurrentlyAt,
   selectIsPlaying,
+  selectIsMuted,
+  selectVolume,
   selectIsPlayPreview,
   setIsPlaying,
+  setIsMuted,
+  setVolume,
   setIsPlayPreview
 }) => {
 
@@ -80,6 +89,12 @@ const VideoControls: React.FC<{
         selectIsPlaying={selectIsPlaying}
         setIsPlaying={setIsPlaying}
       />
+      <VolumeSlider
+        selectIsMuted={selectIsMuted}
+        setIsMuted={setIsMuted}
+        selectVolume={selectVolume}
+        setVolume={setVolume}
+      />
       <div css={rightSideBoxStyle}>
         <PreviewMode
           selectIsPlayPreview={selectIsPlayPreview}
@@ -264,4 +279,108 @@ const TimeDisplay: React.FC<{
   );
 }
 
+const VolumeSlider: React.FC<{
+  selectIsMuted: (state: RootState) => boolean,
+  setIsMuted: ActionCreatorWithPayload<boolean, string>,
+  selectVolume: (state: RootState) => number,
+  setVolume: ActionCreatorWithPayload<number, string>,
+}> = ({
+        selectIsMuted,
+        setIsMuted,
+        selectVolume,
+        setVolume
+      }) => {
+
+  const { t } = useTranslation();
+
+  // Init redux variables
+  const dispatch = useDispatch();
+  const isMuted = useSelector(selectIsMuted)
+  const volume = useSelector(selectVolume)
+  const theme = useTheme();
+
+  // Toggle video mute
+  const switchIsMuted = () => {
+    // Increase volume when unmuting and no volume was set before
+    if (volume === 0 && isMuted) {
+      dispatch(setVolume(1));
+    }
+
+    dispatch(setIsMuted(!isMuted));
+  }
+
+  const volumeOnChange = (_event: Event, newValue: number | number[]) => {
+    // Disable mute when silder is moved
+    if (isMuted) {
+      dispatch(setIsMuted(false));
+    }
+
+    // Get first value if array given
+    if (Array.isArray(newValue)) {
+      newValue = newValue[0];
+    }
+
+    // Enable mute if no volume is set
+    if (newValue === 0) {
+      dispatch(setIsMuted(true));
+    }
+
+    dispatch(setVolume(Number(newValue)));
+  }
+
+  const volumeStyle = css({
+    display: 'flex',
+    flexDirection: 'row',
+    gap: '15px',
+    justifyContent: 'center',
+    alignItems: 'center'
+  })
+
+  const sliderStyle = css({
+    width: '80px',
+    "& .MuiSlider-thumb": {
+      color: `${theme.slider_thumb_color}`,
+      "&:hover, &.Mui-focusVisible, &.Mui-active": {
+        boxShadow: `${theme.slider_thumb_shadow}`,
+      },
+    },
+    "& .MuiSlider-rail": {
+      color: `${theme.slider_track_color}`,
+    },
+    "& .MuiSlider-track": {
+      color: `${theme.slider_track_color}`,
+    },
+  })
+
+  const volumeIconStyle = css({
+    fontSize: 24,
+    paddingLeft: '3px',
+  })
+
+  return (
+    <div css={volumeStyle}>
+      <ThemedTooltip title={isMuted ? t("video.unmutebutton-tooltip") : t("video.mutebutton-tooltip")}>
+        <div css={[basicButtonStyle(theme)]}
+          role="button" aria-pressed={isMuted} tabIndex={0} aria-hidden={false}
+          aria-label={t("video.mutebutton-tooltip")}
+          onClick={switchIsMuted}>
+          {isMuted ? <LuVolumeX css={volumeIconStyle} /> : <LuVolume2 css={volumeIconStyle} />}
+        </div>
+      </ThemedTooltip>
+      <ThemedTooltip title={t("video.volume-tooltip", { current: Math.trunc(volume * 100) })}>
+        <Slider
+          css={sliderStyle}
+          min={0}
+          max={1}
+          step={0.01}
+          value={isMuted ? 0 : volume}
+          onChange={volumeOnChange}
+          aria-label={t("video.volume-tooltip", { current: Math.trunc(volume * 100) })}
+          valueLabelDisplay="off"
+        />
+      </ThemedTooltip>
+    </div>
+  );
+}
+
 export default VideoControls

src/main/VideoPlayers.tsx

@@ -4,7 +4,7 @@ import { css } from '@emotion/react'
 
 import { useSelector, useDispatch } from 'react-redux';
 import {
-  selectIsPlaying, selectCurrentlyAtInSeconds, setIsPlaying,
+  selectIsPlaying, selectCurrentlyAtInSeconds, setIsPlaying, selectIsMuted, selectVolume,
   selectVideoURL, selectVideoCount, selectDurationInSeconds,
   setPreviewTriggered, selectPreviewTriggered, setAspectRatio, selectAspectRatio, setClickTriggered, selectClickTriggered, setCurrentlyAt
 } from '../redux/videoSlice'
@@ -53,6 +53,8 @@ const VideoPlayers: React.FC<{refs: any, widthInPercent?: number}> = ({refs, wid
         first={i === 0}
         last={i === videoCount - 1}
         selectIsPlaying={selectIsPlaying}
+        selectIsMuted={selectIsMuted}
+        selectVolume={selectVolume}
         selectCurrentlyAtInSeconds={selectCurrentlyAtInSeconds}
         selectPreviewTriggered={selectPreviewTriggered}
         selectClickTriggered={selectClickTriggered}
@@ -91,6 +93,8 @@ export const VideoPlayer = React.forwardRef(
     first: boolean,
     last: boolean,
     selectIsPlaying:(state: RootState) => boolean,
+    selectIsMuted:(state: RootState) => boolean,
+    selectVolume:(state: RootState) => number,
     selectCurrentlyAtInSeconds: (state: RootState) => number,
     selectPreviewTriggered:(state: RootState) => boolean,
     selectClickTriggered:(state: RootState) => boolean,
@@ -108,6 +112,8 @@ export const VideoPlayer = React.forwardRef(
       url,
       isPrimary,
       selectIsPlaying,
+      selectIsMuted,
+      selectVolume,
       subtitleUrl,
       first,
       last,
@@ -127,6 +133,8 @@ export const VideoPlayer = React.forwardRef(
     // Init redux variables
     const dispatch = useDispatch();
     const isPlaying = useSelector(selectIsPlaying)
+    const isMuted = useSelector(selectIsMuted)
+    const volume = useSelector(selectVolume)
     const currentlyAt = useSelector(selectCurrentlyAtInSeconds)
     const duration = useSelector(selectDurationInSeconds)
     const previewTriggered = useSelector(selectPreviewTriggered)
@@ -347,7 +355,8 @@ export const VideoPlayer = React.forwardRef(
             width="unset"
             height="unset"
             playing={isPlaying}
-            muted={!isPrimary}
+            volume={volume}
+            muted={!isPrimary || isMuted}
             onProgress={onProgressCallback}
             progressInterval={100}
             onReady={onReadyCallback}

src/redux/videoSlice.ts

@@ -8,6 +8,8 @@ import { settings } from '../config';
 export interface video {
   isPlaying: boolean,             // Are videos currently playing?
   isPlayPreview: boolean,         // Should deleted segments be skipped?
+  isMuted: boolean,               // Is the volume muted?
+  volume: number,                 // Video playback volume
   previewTriggered: boolean,      // Basically acts as a callback for the video players.
   clickTriggered: boolean,        // Another video player callback
   currentlyAt: number,            // Position in the video in milliseconds
@@ -32,6 +34,8 @@ export interface video {
 export const initialState: video & httpRequestState = {
   isPlaying: false,
   isPlayPreview: true,
+  isMuted: false,
+  volume: 1,
   currentlyAt: 0,   // Position in the video in milliseconds
   segments: [{id: nanoid(), start: 0, end: 1, deleted: false}],
   tracks: [],
@@ -105,6 +109,12 @@ const videoSlice = createSlice({
     setIsPlayPreview: (state, action: PayloadAction<video["isPlaying"]>) => {
       state.isPlayPreview = action.payload;
     },
+    setIsMuted: (state, action: PayloadAction<video["isMuted"]>) => {
+      state.isMuted = action.payload;
+    },
+    setVolume: (state, action: PayloadAction<video["volume"]>) => {
+      state.volume = action.payload;
+    },
     setPreviewTriggered: (state, action) => {
       state.previewTriggered = action.payload
     },
@@ -348,7 +358,7 @@ const setThumbnailHelper = (state: video, id: Track["id"], uri: Track["thumbnail
   }
 }
 
-export const { setTrackEnabled, setIsPlaying, setIsPlayPreview, setCurrentlyAt, setCurrentlyAtInSeconds,
+export const { setTrackEnabled, setIsPlaying, setIsPlayPreview, setIsMuted, setVolume, setCurrentlyAt, setCurrentlyAtInSeconds,
   addSegment, setAspectRatio, setHasChanges, setWaveformImages, setThumbnails, setThumbnail, removeThumbnail,
   cut, markAsDeletedOrAlive, setSelectedWorkflowIndex, mergeLeft, mergeRight, mergeAll, setPreviewTriggered,
   setClickTriggered } = videoSlice.actions
@@ -359,6 +369,10 @@ export const selectIsPlaying = (state: { videoState: { isPlaying: video["isPlayi
   state.videoState.isPlaying
 export const selectIsPlayPreview = (state: { videoState: { isPlayPreview: video["isPlayPreview"] }; }) =>
   state.videoState.isPlayPreview
+export const selectIsMuted = (state: { videoState: { isMuted: video["isMuted"] }; }) =>
+  state.videoState.isMuted
+export const selectVolume = (state: { videoState: { volume: video["volume"] }; }) =>
+  state.videoState.volume
 export const selectPreviewTriggered = (state: { videoState: { previewTriggered: video["previewTriggered"] } }) =>
   state.videoState.previewTriggered
 export const selectClickTriggered = (state: { videoState: { clickTriggered: video["clickTriggered"] } }) =>