Updates to VideoPlayer and VideoContent pages

Area that clicking focuses video in VideoContent.tsx has been increased on left side of page. Video is also autofocused by default.

Fixed issue where changing video progress (such as the left/right or 1-9 hotkeys) would make a paused video play.

Removed old logos

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}
       >