@remotion/studio 4.0.298 → 4.0.301

package/dist/esm/internals.mjs

@@ -2963,6 +2963,38 @@ var CurrentComposition = () => {
 
 // src/components/CompositionSelector.tsx
 import { jsx as jsx32, jsxs as jsxs8 } from "react/jsx-runtime";
+var useCompositionNavigation = () => {
+  const { compositions, canvasContent } = useContext9(Internals7.CompositionManager);
+  const selectComposition = useSelectComposition();
+  const navigateToNextComposition = useCallback15(() => {
+    if (!canvasContent || canvasContent.type !== "composition" || compositions.length <= 1) {
+      return;
+    }
+    const currentIndex = compositions.findIndex((c) => c.id === canvasContent.compositionId);
+    if (currentIndex === -1) {
+      return;
+    }
+    const nextIndex = (currentIndex + 1) % compositions.length;
+    const nextComposition = compositions[nextIndex];
+    selectComposition(nextComposition, true);
+  }, [canvasContent, compositions, selectComposition]);
+  const navigateToPreviousComposition = useCallback15(() => {
+    if (!canvasContent || canvasContent.type !== "composition" || compositions.length <= 1) {
+      return;
+    }
+    const currentIndex = compositions.findIndex((c) => c.id === canvasContent.compositionId);
+    if (currentIndex === -1) {
+      return;
+    }
+    const previousIndex = (currentIndex - 1 + compositions.length) % compositions.length;
+    const previousComposition = compositions[previousIndex];
+    selectComposition(previousComposition, true);
+  }, [canvasContent, compositions, selectComposition]);
+  return useMemo21(() => ({
+    navigateToNextComposition,
+    navigateToPreviousComposition
+  }), [navigateToNextComposition, navigateToPreviousComposition]);
+};
 var container7 = {
   display: "flex",
   flexDirection: "column",
@@ -20784,6 +20816,7 @@ var GlobalKeybindings = () => {
   const keybindings = useKeybinding();
   const { setSelectedModal } = useContext69(ModalsContext);
   const { setCheckerboard } = useContext69(CheckerboardContext);
+  const { navigateToNextComposition, navigateToPreviousComposition } = useCompositionNavigation();
   useEffect66(() => {
     const nKey = keybindings.registerKeybinding({
       event: "keypress",
@@ -20848,14 +20881,40 @@ var GlobalKeybindings = () => {
       triggerIfInputFieldFocused: false,
       keepRegisteredWhenNotHighestContext: false
     });
+    const pageDown = keybindings.registerKeybinding({
+      event: "keydown",
+      key: "PageDown",
+      callback: navigateToNextComposition,
+      commandCtrlKey: false,
+      preventDefault: true,
+      triggerIfInputFieldFocused: false,
+      keepRegisteredWhenNotHighestContext: false
+    });
+    const pageUp = keybindings.registerKeybinding({
+      event: "keydown",
+      key: "PageUp",
+      callback: navigateToPreviousComposition,
+      commandCtrlKey: false,
+      preventDefault: true,
+      triggerIfInputFieldFocused: false,
+      keepRegisteredWhenNotHighestContext: false
+    });
     return () => {
       nKey.unregister();
       cKey.unregister();
       questionMark.unregister();
       cmdKKey.unregister();
       cmdIKey.unregister();
+      pageDown.unregister();
+      pageUp.unregister();
     };
-  }, [keybindings, setCheckerboard, setSelectedModal]);
+  }, [
+    keybindings,
+    setCheckerboard,
+    setSelectedModal,
+    navigateToNextComposition,
+    navigateToPreviousComposition
+  ]);
   return null;
 };
 
@@ -22496,6 +22555,38 @@ var KeyboardShortcutsExplainer = () => {
                 style: title4,
                 children: "Navigation"
               }),
+              /* @__PURE__ */ jsxs109(Row, {
+                align: "center",
+                children: [
+                  /* @__PURE__ */ jsx215("div", {
+                    style: left3,
+                    children: /* @__PURE__ */ jsx215("kbd", {
+                      style: key4,
+                      children: "PageUp"
+                    })
+                  }),
+                  /* @__PURE__ */ jsx215("div", {
+                    style: right2,
+                    children: "Previous composition"
+                  })
+                ]
+              }),
+              /* @__PURE__ */ jsxs109(Row, {
+                align: "center",
+                children: [
+                  /* @__PURE__ */ jsx215("div", {
+                    style: left3,
+                    children: /* @__PURE__ */ jsx215("kbd", {
+                      style: key4,
+                      children: "PageDown"
+                    })
+                  }),
+                  /* @__PURE__ */ jsx215("div", {
+                    style: right2,
+                    children: "Next composition"
+                  })
+                ]
+              }),
               /* @__PURE__ */ jsxs109(Row, {
                 align: "center",
                 children: [

package/dist/esm/previewEntry.mjs

@@ -2968,6 +2968,38 @@ var CurrentComposition = () => {
 
 // src/components/CompositionSelector.tsx
 import { jsx as jsx32, jsxs as jsxs8 } from "react/jsx-runtime";
+var useCompositionNavigation = () => {
+  const { compositions, canvasContent } = useContext9(Internals7.CompositionManager);
+  const selectComposition = useSelectComposition();
+  const navigateToNextComposition = useCallback15(() => {
+    if (!canvasContent || canvasContent.type !== "composition" || compositions.length <= 1) {
+      return;
+    }
+    const currentIndex = compositions.findIndex((c) => c.id === canvasContent.compositionId);
+    if (currentIndex === -1) {
+      return;
+    }
+    const nextIndex = (currentIndex + 1) % compositions.length;
+    const nextComposition = compositions[nextIndex];
+    selectComposition(nextComposition, true);
+  }, [canvasContent, compositions, selectComposition]);
+  const navigateToPreviousComposition = useCallback15(() => {
+    if (!canvasContent || canvasContent.type !== "composition" || compositions.length <= 1) {
+      return;
+    }
+    const currentIndex = compositions.findIndex((c) => c.id === canvasContent.compositionId);
+    if (currentIndex === -1) {
+      return;
+    }
+    const previousIndex = (currentIndex - 1 + compositions.length) % compositions.length;
+    const previousComposition = compositions[previousIndex];
+    selectComposition(previousComposition, true);
+  }, [canvasContent, compositions, selectComposition]);
+  return useMemo21(() => ({
+    navigateToNextComposition,
+    navigateToPreviousComposition
+  }), [navigateToNextComposition, navigateToPreviousComposition]);
+};
 var container7 = {
   display: "flex",
   flexDirection: "column",
@@ -21064,6 +21096,7 @@ var GlobalKeybindings = () => {
   const keybindings = useKeybinding();
   const { setSelectedModal } = useContext69(ModalsContext);
   const { setCheckerboard } = useContext69(CheckerboardContext);
+  const { navigateToNextComposition, navigateToPreviousComposition } = useCompositionNavigation();
   useEffect66(() => {
     const nKey = keybindings.registerKeybinding({
       event: "keypress",
@@ -21128,14 +21161,40 @@ var GlobalKeybindings = () => {
       triggerIfInputFieldFocused: false,
       keepRegisteredWhenNotHighestContext: false
     });
+    const pageDown = keybindings.registerKeybinding({
+      event: "keydown",
+      key: "PageDown",
+      callback: navigateToNextComposition,
+      commandCtrlKey: false,
+      preventDefault: true,
+      triggerIfInputFieldFocused: false,
+      keepRegisteredWhenNotHighestContext: false
+    });
+    const pageUp = keybindings.registerKeybinding({
+      event: "keydown",
+      key: "PageUp",
+      callback: navigateToPreviousComposition,
+      commandCtrlKey: false,
+      preventDefault: true,
+      triggerIfInputFieldFocused: false,
+      keepRegisteredWhenNotHighestContext: false
+    });
     return () => {
       nKey.unregister();
       cKey.unregister();
       questionMark.unregister();
       cmdKKey.unregister();
       cmdIKey.unregister();
+      pageDown.unregister();
+      pageUp.unregister();
     };
-  }, [keybindings, setCheckerboard, setSelectedModal]);
+  }, [
+    keybindings,
+    setCheckerboard,
+    setSelectedModal,
+    navigateToNextComposition,
+    navigateToPreviousComposition
+  ]);
   return null;
 };
 
@@ -22776,6 +22835,38 @@ var KeyboardShortcutsExplainer = () => {
                 style: title4,
                 children: "Navigation"
               }),
+              /* @__PURE__ */ jsxs109(Row, {
+                align: "center",
+                children: [
+                  /* @__PURE__ */ jsx216("div", {
+                    style: left3,
+                    children: /* @__PURE__ */ jsx216("kbd", {
+                      style: key4,
+                      children: "PageUp"
+                    })
+                  }),
+                  /* @__PURE__ */ jsx216("div", {
+                    style: right2,
+                    children: "Previous composition"
+                  })
+                ]
+              }),
+              /* @__PURE__ */ jsxs109(Row, {
+                align: "center",
+                children: [
+                  /* @__PURE__ */ jsx216("div", {
+                    style: left3,
+                    children: /* @__PURE__ */ jsx216("kbd", {
+                      style: key4,
+                      children: "PageDown"
+                    })
+                  }),
+                  /* @__PURE__ */ jsx216("div", {
+                    style: right2,
+                    children: "Next composition"
+                  })
+                ]
+              }),
               /* @__PURE__ */ jsxs109(Row, {
                 align: "center",
                 children: [