Videoplayer is prepared to play video if downloaded through Save to Disk button

Navbar uses new Q-Tube Logo

src/components/common/VideoPlayer/Components/LoadingVideo.tsx

@@ -5,8 +5,15 @@ import { PlayArrow } from "@mui/icons-material";
 import { useVideoContext } from "./VideoContext.ts";
 
 export const LoadingVideo = () => {
-  const { isLoading, resourceStatus, src, startPlay, from, togglePlay } =
-    useVideoContext();
+  const {
+    isLoading,
+    resourceStatus,
+    src,
+    startPlay,
+    canPlay,
+    from,
+    togglePlay,
+  } = useVideoContext();
 
   const getDownloadProgress = (current: number, total: number) => {
     const progress = (current / total) * 100;
@@ -76,7 +83,7 @@ export const LoadingVideo = () => {
           )}
         </Box>
       )}
-      {((!src && !isLoading.value) || !startPlay.value) && (
+      {((!src && !isLoading.value) || (!startPlay.value && !canPlay.value)) && (
         <Box
           position="absolute"
           top={0}

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

@@ -140,7 +140,7 @@ export const useVideoControlsState = (
   }
 
   const reloadVideo = async () => {
-    if (!videoRef.current) return;
+    if (!videoRef.current || !src) return;
     const currentTime = videoRef.current.currentTime;
     videoRef.current.src = src;
     videoRef.current.load();
@@ -393,5 +393,6 @@ export const useVideoControlsState = (
     handleCanPlay,
     toggleMute,
     showControlsFullScreen,
+    setPlaying,
   };
 };

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

@@ -110,6 +110,15 @@ 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;

src/components/layout/Navbar/Navbar-styles.tsx

@@ -16,7 +16,7 @@ export const CustomAppBar = styled(AppBar)(({ theme }) => ({
   [theme.breakpoints.only("xs")]: {
     gap: "15px",
   },
-  height: "40px",
+  height: "50px",
 }));
 export const LogoContainer = styled("div")({
   cursor: "pointer",

src/components/layout/Navbar/Navbar.tsx

@@ -25,7 +25,7 @@ import { useNavigate } from "react-router-dom";
 import SearchIcon from "@mui/icons-material/Search";
 
 import { DownloadTaskManager } from "../../common/DownloadTaskManager";
-import Logo from "../../../assets/img/logo.png";
+import Logo from "../../../assets/img/logo.webp";
 import { useDispatch, useSelector } from "react-redux";
 import {
   addFilteredVideos,
@@ -120,8 +120,9 @@ const NavBar: React.FC<Props> = ({
             src={Logo}
             style={{
               width: "auto",
-              height: "55px",
+              height: "45px",
               padding: "2px",
+              marginTop: "5px",
             }}
           />
         </LogoContainer>
@@ -133,135 +134,6 @@ const NavBar: React.FC<Props> = ({
           gap: "10px",
         }}
       >
-        {/* {windowSize.width <= 600 ? (
-           <Box
-           sx={{
-             display: 'flex',
-             alignItems: 'center',
-             gap: 1
-           }}
-           className="myClassOver600"
-          
-         
-         >
-         <Box  onClick={openNotificationPopover}>
-         <SearchIcon
-             sx={{
-               cursor: 'pointer',
-               display: 'flex'
-             }}
-             
-           />
-         </Box>
-          {filterValue && (
-             <BackspaceIcon
-             sx={{
-               cursor: 'pointer'
-             }}
-             onClick={() => {
-               dispatch(setIsFiltering(false))
-               dispatch(setFilterValue(''))
-               dispatch(addFilteredVideos([]))
-               searchValRef.current = ''
-               if (!inputRef.current) return
-               inputRef.current.value = ''
-             }}
-           />
-          )}
-         
-         </Box>
-        ): (
-          <Box
-          sx={{
-            display: 'flex',
-            alignItems: 'center',
-            gap: 1
-          }}
-          className="myClassUnder600"
-        >
-          <Input
-            id="standard-adornment-name"
-            inputRef={inputRef}
-            onChange={(e) => {
-              searchValRef.current = e.target.value
-            }}
-            onKeyDown={(event) => {
-              if (event.key === 'Enter' || event.keyCode === 13) {
-                if (!searchValRef.current) {
-                  dispatch(setIsFiltering(false))
-                  dispatch(setFilterValue(''))
-                  dispatch(addFilteredVideos([]))
-                  searchValRef.current = ''
-                  if (!inputRef.current) return
-                  inputRef.current.value = ''
-                  return
-                }
-                navigate('/')
-                dispatch(setIsFiltering(true))
-                dispatch(addFilteredVideos([]))
-                dispatch(setFilterValue(searchValRef.current))
-              }
-            }}
-            placeholder="Search"
-            sx={{
-              '&&:before': {
-                borderBottom: 'none'
-              },
-              '&&:after': {
-                borderBottom: 'none'
-              },
-              '&&:hover:before': {
-                borderBottom: 'none'
-              },
-              '&&.Mui-focused:before': {
-                borderBottom: 'none'
-              },
-              '&&.Mui-focused': {
-                outline: 'none'
-              },
-              fontSize: '18px'
-            }}
-          />
-
-          <SearchIcon
-            sx={{
-              cursor: 'pointer'
-            }}
-            onClick={() => {
-              if (!searchValRef.current) {
-                dispatch(setIsFiltering(false))
-                dispatch(setFilterValue(''))
-                dispatch(addFilteredVideos([]))
-                searchValRef.current = ''
-                if (!inputRef.current) return
-                inputRef.current.value = ''
-                return
-              }
-              navigate('/')
-              dispatch(setIsFiltering(true))
-              dispatch(addFilteredVideos([]))
-              dispatch(setFilterValue(searchValRef.current))
-            }}
-          />
-          {filterValue && (
-             <BackspaceIcon
-             sx={{
-               cursor: 'pointer'
-             }}
-             onClick={() => {
-               dispatch(setIsFiltering(false))
-               dispatch(setFilterValue(''))
-               dispatch(addFilteredVideos([]))
-               searchValRef.current = ''
-               if (!inputRef.current) return
-               inputRef.current.value = ''
-             }}
-           />
-          )}
-         
-        </Box>
-        )} */}
-
         <Popover
           id={idNotification}
           open={openPopover}
@@ -374,15 +246,15 @@ const NavBar: React.FC<Props> = ({
               {!userAvatar ? (
                 <AccountCircleSVG
                   color={theme.palette.text.primary}
-                  width="30"
-                  height="30"
+                  width="40"
+                  height="40"
                 />
               ) : (
                 <img
                   src={userAvatar}
                   alt="User Avatar"
-                  width="30"
-                  height="30"
+                  width="40"
+                  height="40"
                   style={{
                     borderRadius: "50%",
                   }}

src/pages/ContentPages/VideoContent/VideoActionsBar.tsx

@@ -86,6 +86,7 @@ export const VideoActionsBar = ({
         display: "grid",
         gridTemplateColumns: "1fr 1fr",
         marginTop: "15px",
+        alignItems: "center",
         ...sx,
       }}
     >

src/pages/ContentPages/VideoContent/VideoContent-styles.tsx

@@ -73,6 +73,7 @@ export const FileAttachmentContainer = styled(Box)(({ theme }) => ({
   padding: "5px 10px",
   border: `1px solid ${theme.palette.text.primary}`,
   width: "350px",
+  height: "50px",
 }));
 
 export const FileAttachmentFont = styled(Typography)(({ theme }) => ({