Fixed bug that starts videos at normal speed instead of saved playbac…

…kRate. Removed unnecessary useSignals() hook from components. StatsData.tsx uses Signals instead of Redux. New videos or edited videos that change the source file now display how long the video is and its file size.
Qortal · Nov 16, 2024 · ee96d52 · ee96d52
1 parent 9614b1c
commit ee96d52
Show file tree

Hide file tree

Showing 18 changed files with 318 additions and 287 deletions.
diff --git a/src/App-State.ts → src/App-Functions.ts b/src/App-State.ts → src/App-Functions.ts
@@ -1,20 +1,5 @@
-import { useEffect, useState } from "react";
 import { SubscriptionData } from "./components/common/ContentButtons/SubscribeButton.tsx";
-import { setFilteredSubscriptions } from "./state/features/videoSlice.ts";
 import { store } from "./state/store.ts";
-import { persistStore } from "redux-persist";
-
-export const useAppState = () => {
-  const [theme, setTheme] = useState("dark");
-  const persistor = persistStore(store);
-
-  useEffect(() => {
-    subscriptionListFilter(false).then(filteredList => {
-      store.dispatch(setFilteredSubscriptions(filteredList));
-    });
-  }, []);
-  return { persistor, theme, setTheme };
-};
 
 export const getUserName = async () => {
   const account = await qortalRequest({
@@ -28,6 +13,7 @@ export const getUserName = async () => {
   if (nameData?.length > 0) return nameData[0].name;
   else return "";
 };
+
 export const filterVideosByName = (
   subscriptionList: SubscriptionData[],
   userName: string

diff --git a/src/App.tsx b/src/App.tsx
@@ -1,15 +1,18 @@
 import { CssBaseline } from "@mui/material";
 import { ThemeProvider } from "@mui/material/styles";
+import { useEffect, useState } from "react";
 import { Provider } from "react-redux";
 import { Route, Routes } from "react-router-dom";
+import { persistStore } from "redux-persist";
 import { PersistGate } from "redux-persist/integration/react";
-import { useAppState } from "./App-State.ts";
+import { subscriptionListFilter } from "./App-Functions.ts";
 import Notification from "./components/common/Notification/Notification";
 import { useIframe } from "./hooks/useIframe.tsx";
 import { IndividualProfile } from "./pages/ContentPages/IndividualProfile/IndividualProfile";
 import { PlaylistContent } from "./pages/ContentPages/PlaylistContent/PlaylistContent";
 import { VideoContent } from "./pages/ContentPages/VideoContent/VideoContent";
 import { Home } from "./pages/Home/Home";
+import { setFilteredSubscriptions } from "./state/features/videoSlice.ts";
 import { store } from "./state/store";
 import { darkTheme, lightTheme } from "./styles/theme";
 import DownloadWrapper from "./wrappers/DownloadWrapper";
@@ -18,9 +21,16 @@ import { ScrollWrapper } from "./wrappers/ScrollWrapper.tsx";
 
 function App() {
   // const themeColor = window._qdnTheme
-  const { persistor, theme, setTheme } = useAppState();
+  const persistor = persistStore(store);
+  const [theme, setTheme] = useState("dark");
   useIframe();
 
+  useEffect(() => {
+    subscriptionListFilter(false).then(filteredList => {
+      store.dispatch(setFilteredSubscriptions(filteredList));
+    });
+  }, []);
+
   return (
     <Provider store={store}>
       <PersistGate loading={null} persistor={persistor}>

diff --git a/src/components/Publish/EditVideo/EditVideo.tsx b/src/components/Publish/EditVideo/EditVideo.tsx
@@ -1,5 +1,6 @@
 import React, { useEffect, useState } from "react";
 import Compressor from "compressorjs";
+import { formatBytes } from "../../../utils/numberFunctions.ts";
 
 import {
   AddCoverImageButton,
@@ -62,25 +63,11 @@ import {
   titleFormatter,
   videoMaxSize,
 } from "../../../constants/Misc.ts";
+import { Signal, useSignal } from "@preact/signals-react";
 
 const uid = new ShortUniqueId();
 const shortuid = new ShortUniqueId({ length: 5 });
 
-interface NewCrowdfundProps {
-  editId?: string;
-  editContent?: null | {
-    title: string;
-    user: string;
-    coverImage: string | null;
-  };
-}
-
-interface VideoFile {
-  file: File;
-  title: string;
-  description: string;
-  coverImage?: string;
-}
 export const EditVideo = () => {
   const theme = useTheme();
   const dispatch = useDispatch();
@@ -106,6 +93,10 @@ export const EditVideo = () => {
     useState<any>(null);
   const [imageExtracts, setImageExtracts] = useState<any>([]);
 
+  const videoDuration: Signal<number[]> = useSignal([
+    editVideoProperties?.duration || 0,
+  ]);
+
   const { getRootProps, getInputProps } = useDropzone({
     accept: {
       "video/*": [],
@@ -293,6 +284,8 @@ export const EditVideo = () => {
         code: editVideoProperties.code,
         videoType: file?.type || "video/mp4",
         filename: `${alphanumericString.trim()}.${fileExtension}`,
+        fileSize: file?.size || 0,
+        duration: videoDuration.value[0],
       };
 
       const metadescription =
@@ -508,6 +501,8 @@ export const EditVideo = () => {
               <FrameExtractor
                 videoFile={file}
                 onFramesExtracted={imgs => onFramesExtracted(imgs)}
+                videoDurations={videoDuration}
+                index={0}
               />
             )}
             <React.Fragment>

diff --git a/src/components/Publish/PublishVideo/PublishVideo.tsx b/src/components/Publish/PublishVideo/PublishVideo.tsx
@@ -16,7 +16,7 @@ import {
   useTheme,
 } from "@mui/material";
 import Compressor from "compressorjs";
-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
 import { useDropzone } from "react-dropzone";
 import { useDispatch, useSelector } from "react-redux";
 import ShortUniqueId from "short-unique-id";
@@ -38,6 +38,7 @@ import {
 
 import { setNotification } from "../../../state/features/notificationsSlice.ts";
 import { RootState } from "../../../state/store.ts";
+import { formatBytes } from "../../../utils/numberFunctions.ts";
 import { objectToBase64 } from "../../../utils/PublishFormatter.ts";
 import { getFileName } from "../../../utils/stringFunctions.ts";
 import { CardContentContainerComment } from "../../common/Comments/Comments-styles.tsx";
@@ -65,6 +66,8 @@ import {
   StyledButton,
   TimesIcon,
 } from "./PublishVideo-styles.tsx";
+import { signal, Signal, useSignal } from "@preact/signals-react";
+import { useSignals } from "@preact/signals-react/runtime";
 
 export const toBase64 = (file: File): Promise<string | ArrayBuffer | null> =>
   new Promise((resolve, reject) => {
@@ -103,10 +106,8 @@ export const PublishVideo = ({ editId, editContent }: NewCrowdfundProps) => {
     (state: RootState) => state.auth?.user?.address
   );
   const [files, setFiles] = useState<VideoFile[]>([]);
-
+  const videoDurations = useSignal<number[]>([]);
   const [isOpen, setIsOpen] = useState<boolean>(false);
-  const [title, setTitle] = useState<string>("");
-  const [description, setDescription] = useState<string>("");
   const [coverImageForAll, setCoverImageForAll] = useState<null | string>("");
 
   const [step, setStep] = useState<string>("videos");
@@ -136,6 +137,14 @@ export const PublishVideo = ({ editId, editContent }: NewCrowdfundProps) => {
     useState(false);
   const [imageExtracts, setImageExtracts] = useState<any>({});
 
+  useSignals();
+  const assembleVideoDurations = () => {
+    if (files.length === videoDurations.value.length) return;
+    const newArray: number[] = [];
+    files.map(() => newArray.push(0));
+    videoDurations.value = [...newArray];
+  };
+
   const { getRootProps, getInputProps } = useDropzone({
     accept: {
       "video/*": [],
@@ -302,6 +311,8 @@ export const PublishVideo = ({ editId, editContent }: NewCrowdfundProps) => {
           code,
           videoType: file?.type || "video/mp4",
           filename: `${alphanumericString.trim()}.${fileExtension}`,
+          fileSize: file?.size || 0,
+          duration: videoDurations.value[i],
         };
 
         const metadescription =
@@ -818,11 +829,14 @@ export const PublishVideo = ({ editId, editContent }: NewCrowdfundProps) => {
                 </>
               )}
               {files.map((file, index) => {
+                assembleVideoDurations();
                 return (
                   <React.Fragment key={index}>
                     <FrameExtractor
                       videoFile={file.file}
                       onFramesExtracted={imgs => onFramesExtracted(imgs, index)}
+                      videoDurations={videoDurations}
+                      index={index}
                     />
                     <Typography>{file?.file?.name}</Typography>
                     {!isCheckSameCoverImage && (
@@ -1159,7 +1173,7 @@ export const PublishVideo = ({ editId, editContent }: NewCrowdfundProps) => {
                   </Typography>
                   <TextEditor
                     inlineContent={playlistDescription}
-                    setInlineContent={value => {
+                    setInlineContent={(value: string) => {
                       setPlaylistDescription(value);
                     }}
                   />

diff --git a/src/components/StatsData.tsx b/src/components/StatsData.tsx
@@ -4,6 +4,12 @@ import { Grid } from "@mui/material";
 import { useFetchVideos } from "../hooks/useFetchVideos.tsx";
 import { useSelector } from "react-redux";
 import { RootState } from "../state/store.ts";
+import { signal } from "@preact/signals-react";
+
+/* eslint-disable react-refresh/only-export-components */
+export const totalVideosPublished = signal(0);
+export const totalNamesPublished = signal(0);
+export const videosPerNamePublished = signal(0);
 
 export const StatsData = () => {
   const StatsCol = styled(Grid)(({ theme }) => ({
@@ -14,44 +20,43 @@ export const StatsData = () => {
     backgroundColor: theme.palette.background.default,
   }));
 
-  const {
-    getVideos,
-    getNewVideos,
-    checkNewVideos,
-    getVideosFiltered,
-    getVideosCount,
-  } = useFetchVideos();
+  const { getVideosCount } = useFetchVideos();
 
-  const persistReducer = useSelector((state: RootState) => state.persist);
-  const totalVideosPublished = useSelector(
-    (state: RootState) => state.global.totalVideosPublished
-  );
-  const totalNamesPublished = useSelector(
-    (state: RootState) => state.global.totalNamesPublished
-  );
-  const videosPerNamePublished = useSelector(
-    (state: RootState) => state.global.videosPerNamePublished
-  );
+  const showValueIfExists = (value: number) => {
+    return value > 0 ? "inline" : "none";
+  };
 
+  const showStats = useSelector((state: RootState) => state.persist.showStats);
+  const showVideoCount = showValueIfExists(totalVideosPublished.value);
+  const showPublisherCount = showValueIfExists(totalNamesPublished.value);
+  const showAverage = showValueIfExists(videosPerNamePublished.value);
   useEffect(() => {
     getVideosCount();
   }, [getVideosCount]);
 
   return (
-    <StatsCol sx={{ display: persistReducer.showStats ? "block" : "none" }}>
+    <StatsCol sx={{ display: showStats ? "block" : "none" }}>
       <div>
         Videos:{" "}
-        <span style={{ fontWeight: "bold" }}>{totalVideosPublished}</span>
+        <span style={{ fontWeight: "bold", display: showVideoCount }}>
+          {totalVideosPublished.value}
+        </span>
       </div>
       <div>
         Publishers:{" "}
-        <span style={{ fontWeight: "bold" }}>{totalNamesPublished}</span>
+        <span style={{ fontWeight: "bold", display: showPublisherCount }}>
+          {totalNamesPublished.value}
+        </span>
       </div>
       <div>
         Average:{" "}
-        <span style={{ fontWeight: "bold" }}>
-          {videosPerNamePublished > 0 &&
-            Number(videosPerNamePublished).toFixed(0)}
+        <span
+          style={{
+            fontWeight: "bold",
+            display: showAverage,
+          }}
+        >
+          {Number(videosPerNamePublished.value).toFixed(0)}
         </span>
       </div>
     </StatsCol>

diff --git a/src/components/common/ContentButtons/SubscribeButton.tsx b/src/components/common/ContentButtons/SubscribeButton.tsx
@@ -1,7 +1,7 @@
 import { Button, ButtonProps, Tooltip } from "@mui/material";
 import { MouseEvent, useEffect, useState } from "react";
 import { useDispatch, useSelector } from "react-redux";
-import { subscriptionListFilter } from "../../../App-State.ts";
+import { subscriptionListFilter } from "../../../App-Functions.ts";
 import { RootState } from "../../../state/store.ts";
 import {
   subscribe,