Merge pull request #44 from QortalSeth/main

Fixed bug causing video to play after Saving to Disk.
2025-02-11 17:55:51 +00:00 · 2024-10-17 13:29:04 -06:00 · 2024-10-17 13:29:04 -06:00 · f14b3a9e2f
commit f14b3a9e2f
parent 0bfc3fede7 db490ec6b1
4 changed files with 108 additions and 102 deletions
--- a/src/components/common/FileElement.tsx
+++ b/src/components/common/FileElement.tsx
@ -68,15 +68,15 @@ export default function FileElement({
  customStyles,
 }: IAudioElement) {
  const { downloadVideo } = React.useContext(MyContext);
-  const [startedDownload, setStartedDownload] = React.useState<boolean>(false)
+  const [startedDownload, setStartedDownload] = React.useState<boolean>(false);
  const [isLoading, setIsLoading] = React.useState<boolean>(false);
  const [fileProperties, setFileProperties] = React.useState<any>(null);
  const [downloadLoader, setDownloadLoader] = React.useState<any>(false);
-  const downloads  = useSelector((state: RootState) => state.global?.downloads);
+  const downloads = useSelector((state: RootState) => state.global?.downloads);
  const hasCommencedDownload = React.useRef(false);
  const dispatch = useDispatch();
-  const reDownload = React.useRef<boolean>(false)
-  const isFetchingProperties = React.useRef<boolean>(false)
+  const reDownload = React.useRef<boolean>(false);
+  const isFetchingProperties = React.useRef<boolean>(false);
  const download = React.useMemo(() => {
    if (!downloads || !fileInfo?.identifier) return {};
    const findDownload = downloads[fileInfo?.identifier];
@ -94,15 +94,13 @@ export default function FileElement({
  const handlePlay = async () => {
    if (disable) return;
    hasCommencedDownload.current = true;
-    setStartedDownload(true)
-    if (
-      resourceStatus?.status === "READY"
-    ) {
+    setStartedDownload(true);
+    if (resourceStatus?.status === "READY") {
      if (downloadLoader) return;
-     
+
      setDownloadLoader(true);
-      let filename = download?.properties?.filename
-      let mimeType = download?.properties?.type
+      let filename = download?.properties?.filename;
+      let mimeType = download?.properties?.type;

      try {
        const { name, service, identifier } = fileInfo;
@ -122,7 +120,7 @@ export default function FileElement({
        }
        mimeType = res?.mimeType || mimeType;
      } catch (error) {
-        
+        console.log(error);
      }
      try {
        const { name, service, identifier } = fileInfo;
@ -168,7 +166,7 @@ export default function FileElement({
    }

    const { name, service, identifier } = fileInfo;
-   
+
    setIsLoading(true);
    downloadVideo({
      name,
@ -181,40 +179,37 @@ export default function FileElement({
  };

  const refetch = React.useCallback(async () => {
-    if (!fileInfo) return
+    if (!fileInfo) return;
    try {
      const { name, service, identifier } = fileInfo;
-      isFetchingProperties.current = true
+      isFetchingProperties.current = true;
      await qortalRequest({
-        action: 'GET_QDN_RESOURCE_PROPERTIES',
+        action: "GET_QDN_RESOURCE_PROPERTIES",
        name,
        service,
-        identifier
-      })
-      
+        identifier,
+      });
    } catch (error) {
-      
+      console.log(error);
    } finally {
-      isFetchingProperties.current = false
+      isFetchingProperties.current = false;
    }
-   
-  }, [fileInfo])
+  }, [fileInfo]);

-  const refetchInInterval = ()=> {
+  const refetchInInterval = () => {
    try {
-      const interval = setInterval(()=> {
-          if(resourceStatus?.current === 'DOWNLOADED'){
-            refetch()
-          }
-          if(resourceStatus?.current === 'READY'){
-            clearInterval(interval);
-          }
-         
-        }, 7500)
+      const interval = setInterval(() => {
+        if (resourceStatus?.current === "DOWNLOADED") {
+          refetch();
+        }
+        if (resourceStatus?.current === "READY") {
+          clearInterval(interval);
+        }
+      }, 7500);
    } catch (error) {
-      
+      console.log(error);
    }
-  }
+  };

  React.useEffect(() => {
    if (
@ -230,12 +225,12 @@ export default function FileElement({
          alertType: "info",
        })
      );
-    } else  if (
-      resourceStatus?.status === 'DOWNLOADED' &&
+    } else if (
+      resourceStatus?.status === "DOWNLOADED" &&
      reDownload?.current === false
    ) {
-      refetchInInterval()
-      reDownload.current = true
+      refetchInInterval();
+      reDownload.current = true;
    }
  }, [resourceStatus, download]);

@ -261,7 +256,8 @@ export default function FileElement({
        >
          {children}{" "}
          {((resourceStatus.status && resourceStatus?.status !== "READY") ||
-          isLoading) && startedDownload ? (
+            isLoading) &&
+          startedDownload ? (
            <>
              <CircularProgress color="secondary" size={14} />
              <Typography variant="body2">{`${Math.round(
@ -334,38 +330,53 @@ export default function FileElement({
            </Box>
          </Box>
          {((resourceStatus.status && resourceStatus?.status !== "READY") ||
-            isLoading) && startedDownload && (
-            <Box
-              position="absolute"
-              top={0}
-              left={0}
-              right={0}
-              bottom={0}
-              display="flex"
-              justifyContent="center"
-              alignItems="center"
-              zIndex={4999}
-              bgcolor="rgba(0, 0, 0, 0.6)"
-              sx={{
-                display: "flex",
-                flexDirection: "column",
-                gap: "10px",
-                padding: "8px",
-                borderRadius: "10px",
-              }}
-            >
-              <CircularProgress color="secondary" />
-              {resourceStatus && (
-                <Typography
-                  variant="subtitle2"
-                  component="div"
-                  sx={{
-                    color: "white",
-                    fontSize: "14px",
-                  }}
-                >
-                  {resourceStatus?.status === "REFETCHING" ? (
-                    <>
+            isLoading) &&
+            startedDownload && (
+              <Box
+                position="absolute"
+                top={0}
+                left={0}
+                right={0}
+                bottom={0}
+                display="flex"
+                justifyContent="center"
+                alignItems="center"
+                zIndex={4999}
+                bgcolor="rgba(0, 0, 0, 0.6)"
+                sx={{
+                  display: "flex",
+                  flexDirection: "column",
+                  gap: "10px",
+                  padding: "8px",
+                  borderRadius: "10px",
+                }}
+              >
+                <CircularProgress color="secondary" />
+                {resourceStatus && (
+                  <Typography
+                    variant="subtitle2"
+                    component="div"
+                    sx={{
+                      color: "white",
+                      fontSize: "14px",
+                    }}
+                  >
+                    {resourceStatus?.status === "REFETCHING" ? (
+                      <>
+                        <>
+                          {(
+                            (resourceStatus?.localChunkCount /
+                              resourceStatus?.totalChunkCount) *
+                            100
+                          )?.toFixed(0)}
+                          %
+                        </>
+
+                        <> Refetching in 2 minutes</>
+                      </>
+                    ) : resourceStatus?.status === "DOWNLOADED" ? (
+                      <>Download Completed: building file...</>
+                    ) : resourceStatus?.status !== "READY" ? (
                      <>
                        {(
                          (resourceStatus?.localChunkCount /
@ -374,27 +385,13 @@ export default function FileElement({
                        )?.toFixed(0)}
                        %
                      </>
-
-                      <> Refetching in 2 minutes</>
-                    </>
-                  ) : resourceStatus?.status === "DOWNLOADED" ? (
-                    <>Download Completed: building file...</>
-                  ) : resourceStatus?.status !== "READY" ? (
-                    <>
-                      {(
-                        (resourceStatus?.localChunkCount /
-                          resourceStatus?.totalChunkCount) *
-                        100
-                      )?.toFixed(0)}
-                      %
-                    </>
-                  ) : (
-                    <>Download Completed: fetching file...</>
-                  )}
-                </Typography>
-              )}
-            </Box>
-          )}
+                    ) : (
+                      <>Download Completed: fetching file...</>
+                    )}
+                  </Typography>
+                )}
+              </Box>
+            )}
          {resourceStatus?.status === "READY" &&
            download?.url &&
            download?.properties?.filename && (
--- a/src/components/common/VideoPlayer/Components/LoadingVideo.tsx
+++ b/src/components/common/VideoPlayer/Components/LoadingVideo.tsx
@ -2,6 +2,7 @@ import { Box, CircularProgress, Typography } from "@mui/material";
 import { setVideoPlaying } from "../../../../state/features/globalSlice.ts";
 import { useDispatch } from "react-redux";
 import { PlayArrow } from "@mui/icons-material";
+import { playing } from "../VideoPlayer-State.ts";

 export interface LoadingVideoProps {
  isLoading: boolean;
@ -9,7 +10,7 @@ export interface LoadingVideoProps {
  src: any;
  startPlay: boolean;
  from: any;
-  togglePlay: (isPlay?: boolean) => void;
+  togglePlay: () => void;
 }
 export const LoadingVideo = ({
  isLoading,
@ -102,6 +103,7 @@ export const LoadingVideo = ({
          onClick={() => {
            if (from === "create") return;
            dispatch(setVideoPlaying(null));
+            playing.value = true; // makes autoplay after video loaded work properly
            togglePlay();
          }}
          sx={{
--- a/src/components/common/VideoPlayer/Components/VideoControls-State.ts
+++ b/src/components/common/VideoPlayer/Components/VideoControls-State.ts
@ -21,7 +21,7 @@ import {
 } from "../VideoPlayer-State.ts";
 import { useEffect } from "react";
 import { signal, useSignal } from "@preact/signals-react";
-import { useSignals } from "@preact/signals-react/runtime";
+import { useSignalEffect, useSignals } from "@preact/signals-react/runtime";
 import { VideoPlayerProps } from "../VideoPlayer.tsx";
 import ReactDOM from "react-dom";
 import { useSelector } from "react-redux";
@ -30,7 +30,7 @@ export const showControlsFullScreen = signal(true);

 export const useVideoControlsState = (
  props: VideoPlayerProps,
-  videoRef,
+  videoRef: React.MutableRefObject<HTMLVideoElement>,
  videoPlayerState: ReturnType<typeof useVideoPlayerState>
 ) => {
  useSignals();
@ -142,7 +142,6 @@ export const useVideoControlsState = (
    videoRef.current.src = src;
    videoRef.current.load();
    videoRef.current.currentTime = currentTime;
-
    playing.value = true;
    togglePlay();
  };
@ -178,8 +177,10 @@ export const useVideoControlsState = (
  };

  useEffect(() => {
-    playing.value = true;
-    if (autoPlay && identifier) togglePlay();
+    if (autoPlay && identifier) {
+      console.log("autoplay useEffect");
+      togglePlay();
+    }
  }, [autoPlay, identifier]);

  const mute = () => {
--- a/src/components/common/VideoPlayer/VideoPlayer.tsx
+++ b/src/components/common/VideoPlayer/VideoPlayer.tsx
@ -89,8 +89,14 @@ export const VideoPlayer = forwardRef<refType, VideoPlayerProps>(
        <VideoElement
          id={identifier}
          ref={videoRef}
-          src={!startPlay ? "" : resourceStatus?.status === "READY" ? src : ""}
-          poster={!startPlay ? poster : ""}
+          src={
+            !startPlay.value
+              ? ""
+              : resourceStatus?.status === "READY"
+              ? src
+              : ""
+          }
+          poster={!startPlay.value ? poster : ""}
          onTimeUpdate={updateProgress}
          autoPlay={autoplay}
          onClick={() => togglePlay()}
@ -105,7 +111,7 @@ export const VideoPlayer = forwardRef<refType, VideoPlayerProps>(
          }}
          preload="metadata"
          style={
-            startPlay
+            startPlay.value
              ? {
                  ...videoStyles?.video,
                  objectFit: videoObjectFit.value,