From f4a71b943d17fe1a78eeefc3ced0c457bc59226b Mon Sep 17 00:00:00 2001
From: Pascal Birchler <pascalb@google.com>
Date: Mon, 6 Jan 2025 20:45:05 +0100
Subject: [PATCH] Fix another `null` issue in `useVideoTrimMode`

---
 .../components/videoTrim/useVideoTrimMode.js  | 43 ++++++++++++-------
 1 file changed, 28 insertions(+), 15 deletions(-)

diff --git a/packages/story-editor/src/components/videoTrim/useVideoTrimMode.js b/packages/story-editor/src/components/videoTrim/useVideoTrimMode.js
index fbeef0f6bc46..f4d7e508770d 100644
--- a/packages/story-editor/src/components/videoTrim/useVideoTrimMode.js
+++ b/packages/story-editor/src/components/videoTrim/useVideoTrimMode.js
@@ -40,9 +40,18 @@ function useVideoTrimMode() {
         clearEditing,
       })
     );
-  const { selectedElement } = useStory(({ state: { selectedElements } }) => ({
-    selectedElement: selectedElements.length === 1 ? selectedElements[0] : null,
-  }));
+  const { selectedElement, selectedId, selectedResource, isVideo } = useStory(
+    ({ state: { selectedElements } }) => {
+      const selectedElement =
+        selectedElements.length === 1 ? selectedElements[0] : null;
+      return {
+        selectedElement,
+        selectedId: selectedElement ? selectedElement?.id : null,
+        selectedResource: selectedElement?.resource || {},
+        isVideo: selectedElement?.type === 'video',
+      };
+    }
+  );
 
   const {
     actions: { getMediaById },
@@ -56,12 +65,11 @@ function useVideoTrimMode() {
   );
 
   const getVideoData = useCallback(() => {
-    const { resource } = selectedElement;
-    const { trimData } = resource;
+    const { trimData } = selectedResource;
 
     const defaultVideoData = {
       element: selectedElement,
-      resource,
+      resource: selectedResource,
       start: 0,
       end: null,
     };
@@ -87,13 +95,13 @@ function useVideoTrimMode() {
     } else {
       setVideoData(defaultVideoData);
     }
-  }, [getMediaById, selectedElement]);
+  }, [getMediaById, selectedElement, selectedResource]);
 
   const toggleTrimMode = useCallback(() => {
     if (isEditing) {
       clearEditing();
-    } else if (selectedElement) {
-      setEditingElementWithState(selectedElement.id, {
+    } else if (selectedId) {
+      setEditingElementWithState(selectedId, {
         isTrimMode: true,
         hasEditMenu: true,
         showOverflow: false,
@@ -108,23 +116,28 @@ function useVideoTrimMode() {
     isEditing,
     clearEditing,
     setEditingElementWithState,
-    selectedElement,
+    selectedId,
     getVideoData,
   ]);
 
   const { isTranscodingEnabled } = useFFmpeg();
 
   const hasTrimMode = useMemo(() => {
-    if (selectedElement?.type !== 'video' || !selectedElement?.resource) {
+    if (!isVideo) {
       return false;
     }
 
-    const { id, isExternal } = selectedElement.resource;
-
     return (
-      isTranscodingEnabled && !isExternal && !isCurrentResourceUploading(id)
+      isTranscodingEnabled &&
+      !selectedResource.isExternal &&
+      !isCurrentResourceUploading(selectedResource.id)
     );
-  }, [selectedElement, isTranscodingEnabled, isCurrentResourceUploading]);
+  }, [
+    isVideo,
+    selectedResource,
+    isTranscodingEnabled,
+    isCurrentResourceUploading,
+  ]);
 
   return {
     isTrimMode: Boolean(isEditing && isTrimMode),