Merge pull request #49 from QortalSeth/main

Navbar uses new Q-Tube Logo

src/components/Publish/PublishVideo/PublishVideo.tsx

@@ -1,25 +1,9 @@
-import React, { useEffect, useState } from "react";
-import Compressor from "compressorjs";
-import {
-  AddCoverImageButton,
-  AddLogoIcon,
-  CodecTypography,
-  CoverImagePreview,
-  CrowdfundActionButton,
-  CrowdfundActionButtonRow,
-  CustomInputField,
-  CustomSelect,
-  LogoPreviewRow,
-  ModalBody,
-  NewCrowdfundTitle,
-  StyledButton,
-  TimesIcon,
-} from "./PublishVideo-styles.tsx";
-import { CircularProgress } from "@mui/material";
-
+import AddIcon from "@mui/icons-material/Add";
+import AddBoxIcon from "@mui/icons-material/AddBox";
 import {
   Box,
   Button,
+  CircularProgress,
   FormControl,
   Input,
   InputLabel,
@@ -31,40 +15,12 @@ import {
   Typography,
   useTheme,
 } from "@mui/material";
-import ShortUniqueId from "short-unique-id";
-import { useDispatch, useSelector } from "react-redux";
-import AddBoxIcon from "@mui/icons-material/AddBox";
+import Compressor from "compressorjs";
+import React, { useState } from "react";
 import { useDropzone } from "react-dropzone";
-import AddIcon from "@mui/icons-material/Add";
-
-import { setNotification } from "../../../state/features/notificationsSlice.ts";
-import {
-  objectToBase64,
-  objectToFile,
-  uint8ArrayToBase64,
-} from "../../../utils/PublishFormatter.ts";
-import { RootState } from "../../../state/store.ts";
-import {
-  upsertVideosBeginning,
-  addToHashMap,
-  upsertVideos,
-} from "../../../state/features/videoSlice.ts";
-import ImageUploader from "../../common/ImageUploader.tsx";
+import { useDispatch, useSelector } from "react-redux";
+import ShortUniqueId from "short-unique-id";
 import { categories, subCategories } from "../../../constants/Categories.ts";
-import { MultiplePublish } from "../MultiplePublish/MultiplePublishAll.tsx";
-import {
-  CrowdfundSubTitle,
-  CrowdfundSubTitleRow,
-} from "../EditPlaylist/Upload-styles.tsx";
-import { CardContentContainerComment } from "../../common/Comments/Comments-styles.tsx";
-import { TextEditor } from "../../common/TextEditor/TextEditor.tsx";
-import { extractTextFromHTML } from "../../common/TextEditor/utils.ts";
-import {
-  FiltersCheckbox,
-  FiltersRow,
-  FiltersSubContainer,
-} from "../../../pages/Home/Components/VideoList-styles.tsx";
-import { FrameExtractor } from "../../common/FrameExtractor/FrameExtractor.tsx";
 import {
   QTUBE_PLAYLIST_BASE,
   QTUBE_VIDEO_BASE,
@@ -74,7 +30,41 @@ import {
   titleFormatter,
   videoMaxSize,
 } from "../../../constants/Misc.ts";
+import {
+  FiltersCheckbox,
+  FiltersRow,
+  FiltersSubContainer,
+} from "../../../pages/Home/Components/VideoList-styles.tsx";
+
+import { setNotification } from "../../../state/features/notificationsSlice.ts";
+import { RootState } from "../../../state/store.ts";
+import { objectToBase64 } from "../../../utils/PublishFormatter.ts";
 import { getFileName } from "../../../utils/stringFunctions.ts";
+import { CardContentContainerComment } from "../../common/Comments/Comments-styles.tsx";
+import { FrameExtractor } from "../../common/FrameExtractor/FrameExtractor.tsx";
+
+import ImageUploader from "../../common/ImageUploader.tsx";
+import { TextEditor } from "../../common/TextEditor/TextEditor.tsx";
+import { extractTextFromHTML } from "../../common/TextEditor/utils.ts";
+import {
+  CrowdfundSubTitle,
+  CrowdfundSubTitleRow,
+} from "../EditPlaylist/Upload-styles.tsx";
+import { MultiplePublish } from "../MultiplePublish/MultiplePublishAll.tsx";
+import {
+  AddCoverImageButton,
+  AddLogoIcon,
+  CodecTypography,
+  CoverImagePreview,
+  CrowdfundActionButton,
+  CrowdfundActionButtonRow,
+  CustomInputField,
+  LogoPreviewRow,
+  ModalBody,
+  NewCrowdfundTitle,
+  StyledButton,
+  TimesIcon,
+} from "./PublishVideo-styles.tsx";
 
 export const toBase64 = (file: File): Promise<string | ArrayBuffer | null> =>
   new Promise((resolve, reject) => {

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 }) => ({

src/pages/Home/Components/VideoListComponentLevel.tsx

@@ -2,6 +2,7 @@ import { Box, useTheme } from "@mui/material";
 import React, { useEffect, useRef, useState } from "react";
 import { useSelector } from "react-redux";
 import { useParams } from "react-router-dom";
+import LazyLoad from "../../../components/common/LazyLoad.tsx";
 import { QTUBE_VIDEO_BASE } from "../../../constants/Identifiers.ts";
 import { useFetchVideos } from "../../../hooks/useFetchVideos.tsx";
 import { Video } from "../../../state/features/videoSlice.ts";
@@ -9,6 +10,7 @@ import { RootState } from "../../../state/store.ts";
 import { queue } from "../../../wrappers/GlobalWrapper.tsx";
 import { VideoManagerRow } from "./VideoList-styles.tsx";
 import VideoList from "./VideoList.tsx";
+import { useSignal } from "@preact/signals-react";
 
 interface VideoListProps {
   mode?: string;
@@ -24,10 +26,11 @@ export const VideoListComponentLevel = ({ mode }: VideoListProps) => {
   );
 
   const [videos, setVideos] = React.useState<Video[]>([]);
-
+  const isLoading = useSignal(true);
   const { getVideo, checkAndUpdateVideo } = useFetchVideos();
 
   const getVideos = React.useCallback(async () => {
+    isLoading.value = true;
     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}`;
@@ -73,8 +76,10 @@ export const VideoListComponentLevel = ({ mode }: VideoListProps) => {
           }
         }
       }
+      isLoading.value = false;
     } catch (error) {
       console.log(error);
+      isLoading.value = false;
     }
   }, [videos, hashMapVideos]);
 
@@ -102,6 +107,7 @@ export const VideoListComponentLevel = ({ mode }: VideoListProps) => {
         }}
       >
         <VideoList videos={videos} />
+        <LazyLoad onLoadMore={getVideos} isLoading={isLoading.value}></LazyLoad>
       </Box>
     </VideoManagerRow>
   );