fix when download gets stuck

src/components/common/FileElement.tsx

@@ -75,6 +75,8 @@ export default function FileElement({
   const [fileProperties, setFileProperties] = React.useState<any>(null);
   const [downloadLoader, setDownloadLoader] = React.useState<any>(false);
   const downloads  = useSelector((state: RootState) => state.global?.downloads);
+  const status = React.useRef<null | string>(null)
+
   const hasCommencedDownload = React.useRef(false);
   const dispatch = useDispatch();
   const reDownload = React.useRef<boolean>(false)
@@ -200,10 +202,10 @@ export default function FileElement({
   const refetchInInterval = ()=> {
     try {
       const interval = setInterval(()=> {
-          if(resourceStatus?.current === 'DOWNLOADED'){
+          if(status?.current === 'DOWNLOADED'){
             refetch()
           }
-          if(resourceStatus?.current === 'READY'){
+          if(status?.current === 'READY'){
             clearInterval(interval);
           }
          
@@ -213,6 +215,20 @@ export default function FileElement({
     }
   }
 
+  React.useEffect(() => {
+    if(resourceStatus?.status){
+      status.current = resourceStatus?.status
+    }
+    if (
+      resourceStatus?.status === 'DOWNLOADED' &&
+      reDownload?.current === false
+    ) {
+      refetchInInterval()
+      reDownload.current = true
+    }
+  }, [resourceStatus])
+
+
   React.useEffect(() => {
     if (
       resourceStatus?.status === "READY" &&
@@ -227,12 +243,6 @@ export default function FileElement({
           alertType: "info",
         })
       );
-    } else  if (
-      resourceStatus?.status === 'DOWNLOADED' &&
-      reDownload?.current === false
-    ) {
-      refetchInInterval()
-      reDownload.current = true
     }
   }, [resourceStatus, download]);
 

src/components/layout/Navbar/Navbar.tsx

@@ -1,5 +1,5 @@
 import React, { useState, useRef } from "react";
-import { Box, Button, Input, Popover, useTheme } from "@mui/material";
+import { Box, Button, Input, Popover, Typography, useTheme } from "@mui/material";
 import ExitToAppIcon from "@mui/icons-material/ExitToApp";
 import { BlockedNamesModal } from "../../common/BlockedNamesModal/BlockedNamesModal";
 import AddBoxIcon from "@mui/icons-material/AddBox";
@@ -100,6 +100,12 @@ const NavBar: React.FC<Props> = ({
   return (
     <CustomAppBar position="sticky" elevation={2}>
       <ThemeSelectRow>
+        <Box sx={{
+          display: 'flex',
+          height: '100%',
+          alignItems: 'center',
+          gap: '20px'
+        }}>
         <LogoContainer
           onClick={() => {
             navigate("/");
@@ -120,6 +126,11 @@ const NavBar: React.FC<Props> = ({
             }}
           />
         </LogoContainer>
+        <Typography sx={{
+          fontSize: '16px',
+          whiteSpace: 'nowrap'
+        }}>Sharing is caring</Typography>
+        </Box>
       </ThemeSelectRow>
       <Box
         sx={{

src/hooks/useFetchVideos.tsx

@@ -178,7 +178,7 @@ export const useFetchVideos = () => {
       if(reset){
         offset = 0
       }
-      const videoLimit = limit || 20
+      const videoLimit = limit || 50
       let defaultUrl = `/arbitrary/resources/search?mode=ALL&includemetadata=false&reverse=true&excludeblocked=true&exactmatchnames=true&offset=${offset}&limit=${videoLimit}`;
 
       if (name) {

src/pages/Home/VideoListComponentLevel.tsx

@@ -56,7 +56,7 @@ export const VideoListComponentLevel = ({ mode }: VideoListProps) => {
   const getVideos = React.useCallback(async () => {
     try {
       const offset = videos.length   
-      const url = `/arbitrary/resources/search?mode=ALL&service=DOCUMENT&query=${QTUBE_VIDEO_BASE}_&limit=20&includemetadata=false&reverse=true&excludeblocked=true&name=${paramName}&exactmatchnames=true&offset=${offset}`
+      const url = `/arbitrary/resources/search?mode=ALL&service=DOCUMENT&query=${QTUBE_VIDEO_BASE}_&limit=50&includemetadata=false&reverse=true&excludeblocked=true&name=${paramName}&exactmatchnames=true&offset=${offset}`
       const response = await fetch(url, {
         method: 'GET',
         headers: {