Fixed various bugs

GoogleForCreators · Aug 8, 2022 · a09ede4 · a09ede4
1 parent 6ee0b54
commit a09ede4
Show file tree

Hide file tree

Showing 2 changed files with 36 additions and 22 deletions.
diff --git a/packages/story-editor/src/components/mediaRecording/provider.js b/packages/story-editor/src/components/mediaRecording/provider.js
@@ -134,21 +134,6 @@ function MediaRecordingProvider({ children }) {
     [showSnackbar, hasVideo]
   );
 
-  const onTrimmed = useCallback((trimmedFile) => {
-    setMediaBlobUrl(createBlob(trimmedFile));
-    setFile(trimmedFile);
-  }, []);
-
-  const {
-    trimData,
-    isAdjustingTrim,
-    isProcessingTrim,
-    startTrim,
-    onTrim,
-    resetTrim,
-    cancelTrim,
-  } = useTrim({ setDuration, onTrimmed, file: originalFile });
-
   const {
     error,
     status,
@@ -177,6 +162,23 @@ function MediaRecordingProvider({ children }) {
     onStop,
   });
 
+  const isRecording = 'recording' === status;
+
+  const onTrimmed = useCallback((trimmedFile) => {
+    setMediaBlobUrl(createBlob(trimmedFile));
+    setFile(trimmedFile);
+  }, []);
+
+  const {
+    trimData,
+    isAdjustingTrim,
+    isProcessingTrim,
+    startTrim,
+    onTrim,
+    resetTrim,
+    cancelTrim,
+  } = useTrim({ setDuration, onTrimmed, file: originalFile, isRecording });
+
   useEffect(() => {
     if (
       error?.name === 'NotFoundError' ||
@@ -252,12 +254,14 @@ function MediaRecordingProvider({ children }) {
   const previousBlobUrl = usePrevious(mediaBlobUrl);
 
   useEffect(() => {
-    if (previousBlobUrl && previousBlobUrl !== mediaBlobUrl) {
+    if (
+      previousBlobUrl &&
+      previousBlobUrl !== mediaBlobUrl &&
+      previousBlobUrl !== originalMediaBlobUrl
+    ) {
       revokeBlob(previousBlobUrl);
     }
-  }, [mediaBlobUrl, previousBlobUrl]);
-
-  const isRecording = 'recording' === status;
+  }, [mediaBlobUrl, previousBlobUrl, originalMediaBlobUrl]);
 
   useEffect(() => {
     let timeout;

diff --git a/packages/story-editor/src/components/mediaRecording/useTrim.js b/packages/story-editor/src/components/mediaRecording/useTrim.js
@@ -19,13 +19,14 @@
  */
 import { formatMsToHMS } from '@googleforcreators/media';
 import { useState, useCallback, useRef } from '@googleforcreators/react';
+import { useEffect } from 'react';
 
 /**
  * Internal dependencies
  */
 import useFFmpeg from '../../app/media/utils/useFFmpeg';
 
-function useTrim({ setDuration, onTrimmed, file }) {
+function useTrim({ setDuration, onTrimmed, file, isRecording }) {
   const [trimData, setTrimData] = useState({ start: 0, end: null });
   const [isAdjustingTrim, setIsAdjustingTrim] = useState(false);
   const [isProcessingTrim, setIsProcessingTrim] = useState(false);
@@ -35,7 +36,6 @@ function useTrim({ setDuration, onTrimmed, file }) {
     async (newTrimData) => {
       setIsAdjustingTrim(false);
       if (newTrimData) {
-        setTrimData(newTrimData);
         hasCancelledTrim.current = false;
         setIsProcessingTrim(true);
         const start = formatMsToHMS(newTrimData.start);
@@ -45,6 +45,7 @@ function useTrim({ setDuration, onTrimmed, file }) {
         if (hasCancelledTrim.current) {
           return;
         }
+        setTrimData(newTrimData);
         setIsProcessingTrim(false);
         onTrimmed(result);
         setDuration(newTrimData.end - newTrimData.start);
@@ -53,11 +54,20 @@ function useTrim({ setDuration, onTrimmed, file }) {
     [file, onTrimmed, setDuration, trimVideo]
   );
   const startTrim = useCallback(() => setIsAdjustingTrim(true), []);
-  const resetTrim = useCallback(() => setIsAdjustingTrim(false), []);
+  const resetTrim = useCallback(() => {
+    setIsAdjustingTrim(false);
+    setTrimData({ start: 0, end: null });
+  }, []);
   const cancelTrim = useCallback(() => {
     hasCancelledTrim.current = true;
     setIsProcessingTrim(false);
   }, []);
+  // Whenever a new recording starts, reset any previously captured trim data
+  useEffect(() => {
+    if (isRecording) {
+      resetTrim();
+    }
+  }, [isRecording, resetTrim]);
 
   return {
     trimData,