Merge pull request #52 from QortalSeth/main

fileSize and duration don't show if they are below a minimum value.

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

@@ -1,4 +1,5 @@
 import { Box, CircularProgress, Typography } from "@mui/material";
+import { minDuration } from "../../../../constants/Misc.ts";
 import { setVideoPlaying } from "../../../../state/features/globalSlice.ts";
 import { useDispatch } from "react-redux";
 import { PlayArrow } from "@mui/icons-material";
@@ -88,7 +89,7 @@ export const LoadingVideo = () => {
 
       {((!src && !isLoading.value) || (!startPlay.value && !canPlay.value)) && (
         <>
-          {duration && (
+          {duration > minDuration && (
             <Box
               position="absolute"
               right={0}

src/constants/Misc.ts

@@ -12,3 +12,5 @@ export const fontSizeMedium = "100%";
 export const fontSizeLarge = "120%";
 export const fontSizeExLarge = "150%";
 export const maxCommentLength = 10_000;
+export const minFileSize = 1_000;
+export const minDuration = 5;

src/pages/ContentPages/VideoContent/VideoContent.tsx

@@ -1,47 +1,22 @@
-import { Avatar, Box, Typography, useTheme } from "@mui/material";
+import { Box, Typography } from "@mui/material";
 import React from "react";
 
 import DeletedVideo from "../../../assets/img/DeletedVideo.jpg";
 import { CommentSection } from "../../../components/common/Comments/CommentSection.tsx";
 import { SuperLikesSection } from "../../../components/common/SuperLikesList/SuperLikesSection.tsx";
 import { DisplayHtml } from "../../../components/common/TextEditor/DisplayHtml.tsx";
-import {
-  videoRefType,
-  VideoPlayer,
-} from "../../../components/common/VideoPlayer/VideoPlayer.tsx";
-import {
-  QTUBE_VIDEO_BASE,
-  SUPER_LIKE_BASE,
-} from "../../../constants/Identifiers.ts";
-import {
-  fontSizeMedium,
-  minPriceSuperlike,
-  titleFormatterOnSave,
-} from "../../../constants/Misc.ts";
-import { useFetchSuperLikes } from "../../../hooks/useFetchSuperLikes.tsx";
-import { setIsLoadingGlobal } from "../../../state/features/globalSlice.ts";
-import { addToHashMap } from "../../../state/features/videoSlice.ts";
-import { RootState } from "../../../state/store.ts";
+import { VideoPlayer } from "../../../components/common/VideoPlayer/VideoPlayer.tsx";
+import { minFileSize } from "../../../constants/Misc.ts";
 import { formatBytes } from "../../../utils/numberFunctions.ts";
 import { formatDate } from "../../../utils/time.ts";
 import { VideoActionsBar } from "./VideoActionsBar.tsx";
+import { useVideoContentState } from "./VideoContent-State.ts";
 import {
-  extractSigValue,
-  getPaymentInfo,
-  isTimestampWithinRange,
-  useVideoContentState,
-} from "./VideoContent-State.ts";
-import {
-  AuthorTextComment,
-  FileAttachmentContainer,
-  FileAttachmentFont,
   Spacer,
-  StyledCardColComment,
-  StyledCardHeaderComment,
-  VideoDescription,
   VideoContentContainer,
-  VideoTitle,
+  VideoDescription,
   VideoPlayerContainer,
+  VideoTitle,
 } from "./VideoContent-styles.tsx";
 
 export const VideoContent = () => {
@@ -130,7 +105,7 @@ export const VideoContent = () => {
               {videoData?.title}
             </VideoTitle>
           </Box>
-          {videoData?.fileSize && (
+          {videoData?.fileSize > minFileSize && (
             <Typography
               variant="h1"
               sx={{

src/pages/Home/Components/VideoList.tsx

@@ -6,7 +6,7 @@ import { useDispatch, useSelector } from "react-redux";
 import { useNavigate } from "react-router-dom";
 import { PlaylistSVG } from "../../../assets/svgs/PlaylistSVG.tsx";
 import ResponsiveImage from "../../../components/ResponsiveImage.tsx";
-import { fontSizeSmall } from "../../../constants/Misc.ts";
+import { fontSizeSmall, minDuration } from "../../../constants/Misc.ts";
 import {
   blockUser,
   setEditPlaylist,
@@ -236,7 +236,7 @@ export const VideoList = ({ videos }: VideoListProps) => {
                 navigate(`/video/${videoObj?.user}/${videoObj?.id}`);
               }}
             >
-              {videoObj?.duration && (
+              {videoObj?.duration > minDuration && (
                 <Box
                   position="absolute"
                   right={0}