From 079327dac35ee6551c6a9c9cba5cc193d87c1082 Mon Sep 17 00:00:00 2001
From: Mikael Finstad <finstaden@gmail.com>
Date: Tue, 24 Aug 2021 21:22:56 +0700
Subject: [PATCH] allow controlling audio playback volume

closes #307
#125
---
 public/configStore.js            |  2 +-
 src/App.jsx                      | 31 ++++++-----------
 src/components/VolumeControl.jsx | 57 ++++++++++++++++++++++++++++++++
 src/hooks/useUserPreferences.js  |  8 ++---
 4 files changed, 72 insertions(+), 26 deletions(-)
 create mode 100644 src/components/VolumeControl.jsx

diff --git a/public/configStore.js b/public/configStore.js
index 7da02313..2006ac35 100644
--- a/public/configStore.js
+++ b/public/configStore.js
@@ -20,7 +20,7 @@ const defaults = {
   askBeforeClose: false,
   enableAskForImportChapters: true,
   enableAskForFileOpenAction: true,
-  muted: false,
+  playbackVolume: 1,
   autoSaveProjectFile: true,
   wheelSensitivity: 0.2,
   language: undefined,
diff --git a/src/App.jsx b/src/App.jsx
index 2a6dc69e..66ba7777 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -1,5 +1,5 @@
 import React, { memo, useEffect, useState, useCallback, useRef, useMemo } from 'react';
-import { FaVolumeMute, FaVolumeUp, FaAngleLeft, FaWindowClose } from 'react-icons/fa';
+import { FaAngleLeft, FaWindowClose } from 'react-icons/fa';
 import { AnimatePresence, motion } from 'framer-motion';
 import Swal from 'sweetalert2';
 import Lottie from 'react-lottie-player';
@@ -38,6 +38,7 @@ import RightMenu from './RightMenu';
 import TimelineControls from './TimelineControls';
 import ExportConfirm from './ExportConfirm';
 import ValueTuner from './components/ValueTuner';
+import VolumeControl from './components/VolumeControl';
 import { loadMifiLink } from './mifi';
 import { primaryColor, controlsBackground } from './colors';
 import allOutFormats from './outFormats';
@@ -149,7 +150,7 @@ const App = memo(() => {
   const isCustomFormatSelected = fileFormat !== detectedFileFormat;
 
   const {
-    captureFormat, setCaptureFormat, customOutDir, setCustomOutDir, keyframeCut, setKeyframeCut, preserveMovData, setPreserveMovData, movFastStart, setMovFastStart, avoidNegativeTs, setAvoidNegativeTs, autoMerge, setAutoMerge, timecodeShowFrames, setTimecodeShowFrames, invertCutSegments, setInvertCutSegments, autoExportExtraStreams, setAutoExportExtraStreams, askBeforeClose, setAskBeforeClose, enableAskForImportChapters, setEnableAskForImportChapters, enableAskForFileOpenAction, setEnableAskForFileOpenAction, muted, setMuted, autoSaveProjectFile, setAutoSaveProjectFile, wheelSensitivity, setWheelSensitivity, invertTimelineScroll, setInvertTimelineScroll, language, setLanguage, ffmpegExperimental, setFfmpegExperimental, hideNotifications, setHideNotifications, autoLoadTimecode, setAutoLoadTimecode, autoDeleteMergedSegments, setAutoDeleteMergedSegments, exportConfirmEnabled, setExportConfirmEnabled, segmentsToChapters, setSegmentsToChapters, preserveMetadataOnMerge, setPreserveMetadataOnMerge, simpleMode, setSimpleMode, outSegTemplate, setOutSegTemplate, keyboardSeekAccFactor, setKeyboardSeekAccFactor, keyboardNormalSeekSpeed, setKeyboardNormalSeekSpeed, enableTransferTimestamps, setEnableTransferTimestamps, outFormatLocked, setOutFormatLocked, safeOutputFileName, setSafeOutputFileName,
+    captureFormat, setCaptureFormat, customOutDir, setCustomOutDir, keyframeCut, setKeyframeCut, preserveMovData, setPreserveMovData, movFastStart, setMovFastStart, avoidNegativeTs, setAvoidNegativeTs, autoMerge, setAutoMerge, timecodeShowFrames, setTimecodeShowFrames, invertCutSegments, setInvertCutSegments, autoExportExtraStreams, setAutoExportExtraStreams, askBeforeClose, setAskBeforeClose, enableAskForImportChapters, setEnableAskForImportChapters, enableAskForFileOpenAction, setEnableAskForFileOpenAction, playbackVolume, setPlaybackVolume, autoSaveProjectFile, setAutoSaveProjectFile, wheelSensitivity, setWheelSensitivity, invertTimelineScroll, setInvertTimelineScroll, language, setLanguage, ffmpegExperimental, setFfmpegExperimental, hideNotifications, setHideNotifications, autoLoadTimecode, setAutoLoadTimecode, autoDeleteMergedSegments, setAutoDeleteMergedSegments, exportConfirmEnabled, setExportConfirmEnabled, segmentsToChapters, setSegmentsToChapters, preserveMetadataOnMerge, setPreserveMetadataOnMerge, simpleMode, setSimpleMode, outSegTemplate, setOutSegTemplate, keyboardSeekAccFactor, setKeyboardSeekAccFactor, keyboardNormalSeekSpeed, setKeyboardNormalSeekSpeed, enableTransferTimestamps, setEnableTransferTimestamps, outFormatLocked, setOutFormatLocked, safeOutputFileName, setSafeOutputFileName,
   } = useUserPreferences();
 
   const {
@@ -237,12 +238,9 @@ const App = memo(() => {
     return !v;
   }), [setSafeOutputFileName, hideAllNotifications]);
 
-  const toggleMute = useCallback(() => {
-    setMuted((v) => {
-      if (!v && !hideAllNotifications) toast.fire({ icon: 'info', title: i18n.t('Muted preview (exported file will not be affected)') });
-      return !v;
-    });
-  }, [hideAllNotifications, setMuted]);
+  useEffect(() => {
+    if (videoRef.current) videoRef.current.volume = playbackVolume;
+  }, [playbackVolume]);
 
   const seekAbs = useCallback((val) => {
     const video = videoRef.current;
@@ -2037,9 +2035,6 @@ const App = memo(() => {
     // if (isDev) load({ filePath: '/Users/mifi/Downloads/inp.MOV', customOutDir });
   }, []);
 
-  // TODO fastest-audio shows as muted
-  const VolumeIcon = muted || usingDummyVideo ? FaVolumeMute : FaVolumeUp;
-
   useEffect(() => {
     const keyScrollPreventer = (e) => {
       // https://stackoverflow.com/questions/8916620/disable-arrow-key-scrolling-in-users-browser
@@ -2199,7 +2194,7 @@ const App = memo(() => {
       <div className="no-user-select" style={{ position: 'absolute', top: topBarHeight, left: 0, right: sideBarWidth, bottom: bottomBarHeight, visibility: !isFileOpened ? 'hidden' : undefined }} onWheel={onTimelineWheel}>
         {/* eslint-disable-next-line jsx-a11y/media-has-caption */}
         <video
-          muted={muted}
+          muted={playbackVolume === 0}
           ref={videoRef}
           style={videoStyle}
           src={fileUri}
@@ -2228,23 +2223,17 @@ const App = memo(() => {
           <div
             className="no-user-select"
             style={{
-              position: 'absolute', right: sideBarWidth, bottom: bottomBarHeight, color: 'rgba(255,255,255,0.7)',
+              position: 'absolute', right: sideBarWidth, bottom: bottomBarHeight, marginBottom: 10, color: 'rgba(255,255,255,0.7)', display: 'flex', alignItems: 'center',
             }}
           >
-            <VolumeIcon
-              title={t('Mute preview? (will not affect output)')}
-              size={30}
-              role="button"
-              style={{ margin: '0 10px 10px 10px' }}
-              onClick={toggleMute}
-            />
+            <VolumeControl playbackVolume={playbackVolume} setPlaybackVolume={setPlaybackVolume} usingDummyVideo={usingDummyVideo} />
 
             {!showSideBar && (
               <FaAngleLeft
                 title={t('Show sidebar')}
                 size={30}
                 role="button"
-                style={{ margin: '0 10px 10px 10px' }}
+                style={{ margin: '0 7px' }}
                 onClick={toggleSideBar}
               />
             )}
diff --git a/src/components/VolumeControl.jsx b/src/components/VolumeControl.jsx
new file mode 100644
index 00000000..e0be3e81
--- /dev/null
+++ b/src/components/VolumeControl.jsx
@@ -0,0 +1,57 @@
+import React, { memo, useState, useCallback, useRef, useEffect } from 'react';
+import { FaVolumeMute, FaVolumeUp } from 'react-icons/fa';
+import { useTranslation } from 'react-i18next';
+
+const VolumeControl = memo(({ playbackVolume, setPlaybackVolume, usingDummyVideo }) => {
+  const [volumeControlVisible, setVolumeControlVisible] = useState(false);
+  const timeoutRef = useRef();
+  const { t } = useTranslation();
+
+  useEffect(() => {
+    const clear = () => clearTimeout(timeoutRef.current);
+    clear();
+    timeoutRef.current = setTimeout(() => setVolumeControlVisible(false), 5000);
+    return () => clear();
+  }, [playbackVolume, volumeControlVisible]);
+
+  const onVolumeChange = useCallback((e) => {
+    e.target.blur();
+    setPlaybackVolume(e.target.value / 100);
+  }, [setPlaybackVolume]);
+
+  const onVolumeIconClick = useCallback(() => {
+    if (volumeControlVisible) {
+      if (playbackVolume === 0) setPlaybackVolume(1);
+      if (playbackVolume === 1) setPlaybackVolume(0);
+    } else {
+      setVolumeControlVisible(true);
+    }
+  }, [volumeControlVisible, setPlaybackVolume, playbackVolume]);
+
+  // TODO fastest-audio currently shows as muted
+  const VolumeIcon = playbackVolume === 0 || usingDummyVideo ? FaVolumeMute : FaVolumeUp;
+
+  return (
+    <>
+      {volumeControlVisible && (
+        <input
+          type="range"
+          min={0}
+          max={100}
+          value={playbackVolume * 100}
+          onChange={onVolumeChange}
+        />
+      )}
+
+      <VolumeIcon
+        title={t('Mute preview? (will not affect output)')}
+        size={30}
+        role="button"
+        style={{ margin: '0 7px' }}
+        onClick={onVolumeIconClick}
+      />
+    </>
+  );
+});
+
+export default VolumeControl;
diff --git a/src/hooks/useUserPreferences.js b/src/hooks/useUserPreferences.js
index d99ead6b..1ca1e3bb 100644
--- a/src/hooks/useUserPreferences.js
+++ b/src/hooks/useUserPreferences.js
@@ -50,8 +50,8 @@ export default () => {
   useEffect(() => safeSetConfig('enableAskForImportChapters', enableAskForImportChapters), [enableAskForImportChapters]);
   const [enableAskForFileOpenAction, setEnableAskForFileOpenAction] = useState(configStore.get('enableAskForFileOpenAction'));
   useEffect(() => safeSetConfig('enableAskForFileOpenAction', enableAskForFileOpenAction), [enableAskForFileOpenAction]);
-  const [muted, setMuted] = useState(configStore.get('muted'));
-  useEffect(() => safeSetConfig('muted', muted), [muted]);
+  const [playbackVolume, setPlaybackVolume] = useState(configStore.get('playbackVolume'));
+  useEffect(() => safeSetConfig('playbackVolume', playbackVolume), [playbackVolume]);
   const [autoSaveProjectFile, setAutoSaveProjectFile] = useState(configStore.get('autoSaveProjectFile'));
   useEffect(() => safeSetConfig('autoSaveProjectFile', autoSaveProjectFile), [autoSaveProjectFile]);
   const [wheelSensitivity, setWheelSensitivity] = useState(configStore.get('wheelSensitivity'));
@@ -125,8 +125,8 @@ export default () => {
     setEnableAskForImportChapters,
     enableAskForFileOpenAction,
     setEnableAskForFileOpenAction,
-    muted,
-    setMuted,
+    playbackVolume,
+    setPlaybackVolume,
     autoSaveProjectFile,
     setAutoSaveProjectFile,
     wheelSensitivity,