Merge pull request #50 from QortalSeth/main

Updates to VideoPlayer and VideoContent pages

src/App-State.ts

@@ -9,7 +9,6 @@ export const useAppState = () => {
   const persistor = persistStore(store);
 
   useEffect(() => {
-    const subscriptionList = store.getState().persist.subscriptionList;
     subscriptionListFilter(false).then(filteredList => {
       store.dispatch(setFilteredSubscriptions(filteredList));
     });

src/components/common/VideoPlayer/Components/VideoControls-State.ts

@@ -149,11 +149,11 @@ export const useVideoControlsState = (
     togglePlay();
   };
 
+  const firstPlay = useSignal(true);
   const handleCanPlay = () => {
+    if (firstPlay.value) setPlaying(true); // makes the video play when fully loaded
+    firstPlay.value = false;
     isLoading.value = false;
-    canPlay.value = true;
-    updatePlaybackRate(playbackRate.value);
-    setPlaying(true); // makes the video play when fully loaded
   };
 
   const setPlaying = async (setPlay: boolean) => {

src/components/common/VideoPlayer/VideoPlayer-State.ts

@@ -110,15 +110,6 @@ export const useVideoPlayerState = (props: VideoPlayerProps, ref: any) => {
   const toggleRef = useRef<any>(null);
   const { downloadVideo } = useContext(MyContext);
 
-  if (resourceStatus?.status === "READY") {
-    canPlay.value = true;
-    isLoading.value = false;
-    //startPlay.value = true;
-
-    // playing.value = false;
-    // videoRef.current.pause();
-  }
-
   const onProgressChange = async (_: any, value: number | number[]) => {
     if (!videoRef.current) return;
     videoRef.current.currentTime = value as number;
@@ -142,6 +133,14 @@ export const useVideoPlayerState = (props: VideoPlayerProps, ref: any) => {
     progress.value = videoRef.current.currentTime;
   };
 
+  const videoCanPlayIfDownloaded = () => {
+    if (resourceStatus?.status === "READY") {
+      canPlay.value = true;
+    }
+  };
+
+  videoCanPlayIfDownloaded();
+
   const getSrc = React.useCallback(async () => {
     if (!name || !identifier || !service || !jsonId || !user) return;
     try {

src/components/common/VideoPlayer/VideoPlayer-styles.ts

@@ -11,7 +11,6 @@ export const VideoContainer = styled(Box)(({ theme }) => ({
   height: "100%",
   margin: 0,
   padding: 0,
-
   "&:focus": { outline: "none" },
 }));
 

src/pages/ContentPages/VideoContent/VideoContent-State.ts

@@ -236,11 +236,17 @@ export const useVideoContentState = () => {
     if (!nameAddress || !id) return;
     getComments(id, nameAddress);
   }, [getComments, id, nameAddress]);
-  const subList = useSelector(
-    (state: RootState) => state.persist.subscriptionList
-  );
 
-  const focusVideo = (e: React.MouseEvent<HTMLDivElement>) => {
+  const focusVideo = () => {
+    const focusRef = containerRef.current?.getContainerRef()?.current;
+    focusRef?.focus({ preventScroll: true });
+  };
+
+  useEffect(() => {
+    focusVideo();
+  });
+
+  const focusVideoOnClick = (e: React.MouseEvent<HTMLDivElement>) => {
     console.log("in focusVideo");
     const target = e.target as Element;
 
@@ -259,12 +265,11 @@ export const useVideoContentState = () => {
 
     if (target == e.currentTarget || clickOnEmptySpace) {
       console.log("in correctTarget");
-      const focusRef = containerRef.current?.getContainerRef()?.current;
-      focusRef.focus({ preventScroll: true });
+      focusVideo();
     }
   };
   return {
-    focusVideo,
+    focusVideo: focusVideoOnClick,
     videoReference,
     channelName,
     id,

src/pages/ContentPages/VideoContent/VideoContent.tsx

@@ -68,9 +68,8 @@ export const VideoContent = () => {
       <Box
         sx={{
           display: "flex",
-          marginLeft: "5%",
           flexDirection: "column",
-          padding: "0px 10px",
+          padding: "0px 10px 0px 5%",
         }}
         onClick={focusVideo}
       >