diff --git a/src/assets/img/DeletedVideo.jpg b/src/assets/img/DeletedVideo.jpg new file mode 100644 index 0000000..1b2f276 Binary files /dev/null and b/src/assets/img/DeletedVideo.jpg differ diff --git a/src/components/ResponsiveImage.tsx b/src/components/ResponsiveImage.tsx index f184f31..f4412a8 100644 --- a/src/components/ResponsiveImage.tsx +++ b/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 = ({ @@ -17,49 +17,55 @@ const ResponsiveImage: React.FC = ({ 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 ( - {loading && ( )} 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", }} /> - ) -} + ); +}; -export default ResponsiveImage +export default ResponsiveImage; diff --git a/src/components/common/SuperLikesList/CommentEditor.tsx b/src/components/common/SuperLikesList/CommentEditor.tsx index 8d256a4..b2917b7 100644 --- a/src/components/common/SuperLikesList/CommentEditor.tsx +++ b/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, diff --git a/src/constants/Misc.ts b/src/constants/Misc.ts index 678e413..742589b 100644 --- a/src/constants/Misc.ts +++ b/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 \ No newline at end of file +export const maxSize = videoMaxSize * 1024 * 1024; diff --git a/src/pages/ContentPages/VideoContent/VideoContent.tsx b/src/pages/ContentPages/VideoContent/VideoContent.tsx index a6032d9..1985638 100644 --- a/src/pages/ContentPages/VideoContent/VideoContent.tsx +++ b/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 ? ( { customStyle={{ aspectRatio: "16/9" }} ref={containerRef} /> + ) : ( + )} { {}} loadingSuperLikes={loadingSuperLikes} superlikes={superlikeList} diff --git a/src/pages/Home/VideoList.tsx b/src/pages/Home/VideoList.tsx index 5aa258f..525a298 100644 --- a/src/pages/Home/VideoList.tsx +++ b/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 ( - {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 || []} /> - {/* */} {videoObj.title} { 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; +};