Merge pull request #30 from QortalSeth/main

Fixed video skeleton not loading bug.

src/components/ResponsiveImage.tsx

@@ -1,14 +1,14 @@
-import React, { useState, useEffect, CSSProperties } from 'react'
-import Skeleton from '@mui/material/Skeleton'
-import { Box } from '@mui/material'
-
+import React, { useState, useEffect, CSSProperties } from "react";
+import Skeleton from "@mui/material/Skeleton";
+import { Box } from "@mui/material";
+import DeletedVideo from "../assets/img/DeletedVideo.jpg";
 interface ResponsiveImageProps {
-  src: string
-  width: number
-  height: number
-  alt?: string
-  className?: string
-  style?: CSSProperties
+  src: string;
+  width: number;
+  height: number;
+  alt?: string;
+  className?: string;
+  style?: CSSProperties;
 }
 
 const ResponsiveImage: React.FC<ResponsiveImageProps> = ({
@@ -17,49 +17,55 @@ const ResponsiveImage: React.FC<ResponsiveImageProps> = ({
   height,
   alt,
   className,
-  style
+  style,
 }) => {
-  const [loading, setLoading] = useState(true)
+  const [loading, setLoading] = useState(true);
 
+  const endLoading = (endTimeSeconds: number) => {
+    const endTimeMilliSeconds = endTimeSeconds * 1000;
+    setTimeout(() => {
+      if (loading) setLoading(false);
+    }, endTimeMilliSeconds);
+  };
 
+  useEffect(() => endLoading(5), []);
 
   return (
     <Box
       sx={{
-        padding: '2px',
-        height: '100%',
-        ...style
+        padding: "2px",
+        height: "100%",
+        ...style,
       }}
     >
-   
       {loading && (
         <Skeleton
           variant="rectangular"
           style={{
-            width: '100%',
+            width: "100%",
             height: 0,
             paddingBottom: `${(height / width) * 100}%`,
-            objectFit: 'contain',
-            visibility: loading ? 'visible' : 'hidden',
-            borderRadius: '8px'
+            objectFit: "contain",
+            visibility: loading ? "visible" : "hidden",
+            borderRadius: "8px",
           }}
         />
       )}
 
       <img
         onLoad={() => setLoading(false)}
-        src={src}
+        src={!src && !loading ? DeletedVideo : src}
         style={{
-          width: '100%',
-          height: '100%',
-          borderRadius: '8px',
-          visibility: loading ? 'hidden' : 'visible',
-          position: loading ? 'absolute' : 'unset',
-          objectFit: 'contain'
+          width: "100%",
+          height: "100%",
+          borderRadius: "8px",
+          visibility: loading ? "hidden" : "visible",
+          position: loading ? "absolute" : "unset",
+          objectFit: "contain",
         }}
       />
     </Box>
-  )
-}
+  );
+};
 
-export default ResponsiveImage
+export default ResponsiveImage;

src/components/common/SuperLikesList/CommentEditor.tsx

@@ -181,18 +181,17 @@ export const CommentEditor = ({
           notificationInformation: comment.notificationInformation,
           about: comment.about,
         };
-        const superLikeToFile = await objectToFile(superObj);
+        const superLikeToFile = objectToFile(superObj);
         dataFile = superLikeToFile;
       }
       if (isSuperLike && !dataFile)
         throw new Error("unable to edit Super like");
 
-      const stringFile = stringToFile(value);
       const resourceResponse = await qortalRequest({
         action: "PUBLISH_QDN_RESOURCE",
         name: name,
         service: "BLOG_COMMENT",
-        file: isSuperLike ? dataFile : stringFile,
+        file: isSuperLike ? dataFile : stringToFile(value),
         identifier: identifier,
         description,
         tag1,

src/constants/Misc.ts

@@ -1,6 +1,7 @@
 export const minPriceSuperlike = 1;
-export const titleFormatter = /[^a-zA-Z0-9\s-_!?()&'",.;:|—~@#$%^*+=<>]/g;
-export const titleFormatterOnSave = /[^a-zA-Z0-9\s-_!()&',.;—~@#$%^+=]/g;
+
+export const titleFormatter = /[\r\n]+/g;
+export const titleFormatterOnSave = /[\r\n/<>:"'\\*|?]+/g;
 
 export const videoMaxSize = 400; // Size in Megabytes (decimal)
-export const maxSize = videoMaxSize *1024*1024
+export const maxSize = videoMaxSize * 1024 * 1024;

src/pages/ContentPages/VideoContent/VideoContent.tsx

@@ -7,6 +7,7 @@ import React, {
 } from "react";
 import { useDispatch, useSelector } from "react-redux";
 import { useNavigate, useParams } from "react-router-dom";
+import ResponsiveImage from "../../../components/ResponsiveImage.tsx";
 import { setIsLoadingGlobal } from "../../../state/features/globalSlice.ts";
 import { Avatar, Box, Typography, useTheme } from "@mui/material";
 import {
@@ -17,6 +18,7 @@ import { RootState } from "../../../state/store.ts";
 import { addToHashMap } from "../../../state/features/videoSlice.ts";
 import AttachFileIcon from "@mui/icons-material/AttachFile";
 import DownloadIcon from "@mui/icons-material/Download";
+import DeletedVideo from "../../../assets/img/DeletedVideo.jpg";
 
 import mockImg from "../../../test/mockimg.jpg";
 import {
@@ -403,7 +405,7 @@ export const VideoContent = () => {
           width: "70vw",
         }}
       >
-        {videoReference && (
+        {videoReference ? (
           <VideoPlayer
             name={videoReference?.name}
             service={videoReference?.service}
@@ -414,6 +416,8 @@ export const VideoContent = () => {
             customStyle={{ aspectRatio: "16/9" }}
             ref={containerRef}
           />
+        ) : (
+          <img src={DeletedVideo} width={"100%"} height={"100%"} />
         )}
         <Box
           sx={{
@@ -630,6 +634,7 @@ export const VideoContent = () => {
         </Box>
       </VideoPlayerContainer>
       <SuperLikesSection
+        /* eslint-disable-next-line @typescript-eslint/no-empty-function */
         getMore={() => {}}
         loadingSuperLikes={loadingSuperLikes}
         superlikes={superlikeList}

src/pages/Home/VideoList.tsx

@@ -6,7 +6,12 @@ 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 { blockUser, setEditPlaylist, setEditVideo, Video } from "../../state/features/videoSlice.ts";
+import {
+  blockUser,
+  setEditPlaylist,
+  setEditVideo,
+  Video,
+} from "../../state/features/videoSlice.ts";
 import { RootState } from "../../state/store.ts";
 import { formatDate } from "../../utils/time.ts";
 import { VideoCardImageContainer } from "./VideoCardImageContainer.tsx";
@@ -55,16 +60,14 @@ export const VideoList = ({ videos }: VideoListProps) => {
       if (response === true) {
         dispatch(blockUser(user));
       }
-    } catch (error) {console.log(error)}
+    } catch (error) {
+      console.log(error);
+    }
   };
 
-  const filteredVideos = useMemo(() => {
-    return videos.filter((video: Video) => hashMapVideos[`${video.id}-${video.user}`]?.isValid);
-  }, [videos, hashMapVideos]);
-
   return (
     <VideoCardContainer>
-      {filteredVideos.map((video: any) => {
+      {videos.map((video: any) => {
         const fullId = video ? `${video.id}-${video.user}` : undefined;
         const existingVideo = hashMapVideos[fullId];
         let hasHash = false;
@@ -244,11 +247,6 @@ export const VideoList = ({ videos }: VideoListProps) => {
                 videoImage={videoObj.videoImage}
                 frameImages={videoObj?.extracts || []}
               />
-              {/* <ResponsiveImage
-                      src={videoObj.videoImage}
-                      width={266}
-                      height={150}
-                    /> */}
               <VideoCardTitle>{videoObj.title}</VideoCardTitle>
               <BottomParent>
                 <NameContainer

src/state/store.ts

@@ -1,3 +1,4 @@
+/* eslint-disable */
 import { combineReducers, configureStore } from "@reduxjs/toolkit";
 import notificationsReducer from "./features/notificationsSlice";
 import authReducer from "./features/authSlice";

src/utils/fetchVideos.ts

@@ -1,36 +1,35 @@
-import { checkStructure } from './checkStructure'
+import { checkStructure } from "./checkStructure";
 
 export const fetchAndEvaluateVideos = async (data: any) => {
   const getVideo = async () => {
-    const { user, videoId, content } = data
+    const { user, videoId, content } = data;
     let obj: any = {
       ...content,
-      isValid: false
-    }
+    };
 
-    if (!user || !videoId) return obj
+    if (!user || !videoId) return obj;
 
     try {
-
       const responseData = await qortalRequest({
-        action: 'FETCH_QDN_RESOURCE',
+        action: "FETCH_QDN_RESOURCE",
         name: user,
-        service: content?.service || 'DOCUMENT',
-        identifier: videoId
-      })
+        service: content?.service || "DOCUMENT",
+        identifier: videoId,
+      });
       if (responseData) {
         obj = {
           ...content,
           ...responseData,
-          isValid: true
+          isValid: true,
+          isDeleted: false,
+        };
       }
-      }
-      return obj
+      return obj;
     } catch (error: any) {
-      throw new Error(error?.message || 'error')
-    }
+      throw new Error(error?.message || "error");
     }
+  };
 
-  const res = await getVideo()
-  return res
-}
+  const res = await getVideo();
+  return res;
+};