Merge pull request #38 from QortalSeth/main

Videoplayer volume now persists across videos and app reloads. Default value is 50%.

src/components/common/VideoPlayer/VideoPlayer.tsx

@@ -37,6 +37,7 @@ import CSS from "csstype";
 import {
   setReduxPlaybackRate,
   setStretchVideoSetting,
+  setVolumeSetting,
   StretchVideoType,
 } from "../../../state/features/persistSlice.ts";
 
@@ -87,12 +88,13 @@ export const VideoPlayer = React.forwardRef<refType, VideoPlayerProps>(
   ) => {
     const videoSelector = useSelector((state: RootState) => state.video);
     const persistSelector = useSelector((state: RootState) => state.persist);
+
     const dispatch = useDispatch();
     const videoRef = useRef<HTMLVideoElement>(null);
     const containerRef = useRef<HTMLDivElement>(null);
     const [playing, setPlaying] = useState(false);
-    const [volume, setVolume] = useState(1);
-    const [mutedVolume, setMutedVolume] = useState(1);
+    const [volume, setVolume] = useState(persistSelector.volume);
+    const [mutedVolume, setMutedVolume] = useState(persistSelector.volume);
     const [isMuted, setIsMuted] = useState(false);
     const [progress, setProgress] = useState(0);
     const [isLoading, setIsLoading] = useState(false);
@@ -240,9 +242,11 @@ export const VideoPlayer = React.forwardRef<refType, VideoPlayerProps>(
 
     const onVolumeChange = (_: any, value: number | number[]) => {
       if (!videoRef.current) return;
-      videoRef.current.volume = value as number;
-      setVolume(value as number);
+      const newVolume = value as number;
+      videoRef.current.volume = newVolume;
+      setVolume(newVolume);
       setIsMuted(false);
+      dispatch(setVolumeSetting(newVolume));
     };
 
     const onProgressChange = async (_: any, value: number | number[]) => {
@@ -309,6 +313,7 @@ export const VideoPlayer = React.forwardRef<refType, VideoPlayerProps>(
     }, []);
 
     useEffect(() => {
+      videoRef.current.volume = volume;
       if (
         videoPlaying &&
         videoPlaying.id === identifier &&
@@ -316,7 +321,7 @@ export const VideoPlayer = React.forwardRef<refType, VideoPlayerProps>(
         videoRef?.current
       ) {
         handleCanPlay();
-        videoRef.current.volume = videoPlaying.volume;
+
         videoRef.current.currentTime = videoPlaying.currentTime;
         videoRef.current.play().then(() => {
           setPlaying(true);
@@ -571,6 +576,7 @@ export const VideoPlayer = React.forwardRef<refType, VideoPlayerProps>(
         setMutedVolume(newVolume);
         videoRef.current.volume = newVolume;
         setVolume(newVolume);
+        dispatch(setVolumeSetting(newVolume));
       }
     };
     const setProgressRelative = (secondsChange: number) => {

src/hooks/useFetchVideos.tsx

@@ -7,7 +7,8 @@ import {
   upsertVideos,
   upsertVideosBeginning,
   Video,
-  upsertFilteredVideos, removeFromHashMap,
+  upsertFilteredVideos,
+  removeFromHashMap,
 } from "../state/features/videoSlice";
 import {
   setIsLoadingGlobal,
@@ -85,7 +86,9 @@ export const useFetchVideos = () => {
           url,
         })
       );
-    } catch (error) {console.log(error)}
+    } catch (error) {
+      console.log(error);
+    }
   }, []);
 
   const getVideo = async (
@@ -186,7 +189,8 @@ export const useFetchVideos = () => {
           }
         }
       }
-    } catch (error) {console.log(error)
+    } catch (error) {
+      console.log(error);
     } finally {
       dispatch(setIsLoadingGlobal(false));
     }
@@ -231,7 +235,7 @@ export const useFetchVideos = () => {
         const videoLimit = limit || 20;
 
         let defaultUrl = `/arbitrary/resources/search?mode=ALL&includemetadata=false&reverse=true&excludeblocked=true&exactmatchnames=true&offset=${offset}&limit=${videoLimit}`;
-
+        
         if (name) {
           defaultUrl = defaultUrl + `&name=${name}`;
         } else if (videoListType === "subscriptions") {
@@ -372,7 +376,8 @@ export const useFetchVideos = () => {
             }
           }
         }
-      } catch (error) {console.log(error)
+      } catch (error) {
+        console.log(error);
       }
     },
     [filteredVideos, hashMapVideos]
@@ -412,7 +417,9 @@ export const useFetchVideos = () => {
       const newArray = responseData.slice(0, findVideo);
       dispatch(setCountNewVideos(newArray.length));
       return;
-    } catch (error) {console.log(error)}
+    } catch (error) {
+      console.log(error);
+    }
   }, [videos]);
 
   const getVideosCount = React.useCallback(async () => {

src/state/features/persistSlice.ts

@@ -18,6 +18,7 @@ interface settingsState {
   playbackRate: number;
   subscriptionListFilter: SubscriptionListFilterType;
   showStats: boolean;
+  volume: number;
 }
 
 const initialState: settingsState = {
@@ -28,6 +29,7 @@ const initialState: settingsState = {
   playbackRate: 1,
   subscriptionListFilter: "currentNameOnly",
   showStats: true,
+  volume: 0.5,
 };
 
 export const persistSlice = createSlice({
@@ -72,6 +74,9 @@ export const persistSlice = createSlice({
     changeFilterType: (state, action) => {
       state.filterType = action.payload;
     },
+    setVolumeSetting: (state, action: PayloadAction<number>) => {
+      state.volume = action.payload;
+    },
   },
 });
 
@@ -83,6 +88,7 @@ export const {
   setReduxPlaybackRate,
   changeFilterType,
   resetSubscriptions,
+  setVolumeSetting,
 } = persistSlice.actions;
 
 export default persistSlice.reducer;