@remotion/studio 4.0.285 → 4.0.287

package/dist/components/QuickSwitcher/QuickSwitcherContent.js

@@ -9,7 +9,6 @@ const is_composition_still_1 = require("../../helpers/is-composition-still");
 const use_keybinding_1 = require("../../helpers/use-keybinding");
 const use_menu_structure_1 = require("../../helpers/use-menu-structure");
 const modals_1 = require("../../state/modals");
-const CompositionSelector_1 = require("../CompositionSelector");
 const InitialCompositionLoader_1 = require("../InitialCompositionLoader");
 const KeyboardShortcutsExplainer_1 = require("../KeyboardShortcutsExplainer");
 const is_menu_item_1 = require("../Menu/is-menu-item");
@@ -136,7 +135,7 @@ const QuickSwitcherContent = ({ initialMode, invocationTimestamp, readOnlyStudio
                     selectComposition(c, true);
                     setSelectedModal(null);
                     const selector = `.__remotion-composition[data-compname="${c.id}"]`;
-                    (_a = CompositionSelector_1.compositionSelectorRef.current) === null || _a === void 0 ? void 0 : _a.expandComposition(c.id);
+                    (_a = remotion_1.Internals.compositionSelectorRef.current) === null || _a === void 0 ? void 0 : _a.expandComposition(c.id);
                     waitForElm(selector).then(() => {
                         var _a;
                         (_a = document

package/dist/components/RenderModal/DataEditor.js

@@ -15,13 +15,23 @@ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (
 }) : function(o, v) {
     o["default"] = v;
 });
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.DataEditor = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");

package/dist/components/RenderModal/EnvInput.js

@@ -15,13 +15,23 @@ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (
 }) : function(o, v) {
     o["default"] = v;
 });
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.EnvInput = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");

package/dist/components/RenderModal/RenderModalJSONPropsEditor.js

@@ -15,13 +15,23 @@ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (
 }) : function(o, v) {
     o["default"] = v;
 });
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.RenderModalJSONPropsEditor = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");

package/dist/components/RenderModal/ResolveCompositionBeforeModal.js

@@ -15,13 +15,23 @@ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (
 }) : function(o, v) {
     o["default"] = v;
 });
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ResolveCompositionBeforeModal = exports.ResolvedCompositionContext = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");

package/dist/components/RenderModal/SchemaEditor/ZodArrayEditor.js

@@ -15,13 +15,23 @@ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (
 }) : function(o, v) {
     o["default"] = v;
 });
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ZodArrayEditor = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");

package/dist/components/RenderModal/SchemaEditor/ZodObjectEditor.js

@@ -15,13 +15,23 @@ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (
 }) : function(o, v) {
     o["default"] = v;
 });
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ZodObjectEditor = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");

package/dist/components/RenderModal/SchemaEditor/ZodTupleEditor.js

@@ -15,13 +15,23 @@ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (
 }) : function(o, v) {
     o["default"] = v;
 });
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ZodTupleEditor = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");

package/dist/components/RenderQueue/RenderQueueItemStatus.js

@@ -15,13 +15,23 @@ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (
 }) : function(o, v) {
     o["default"] = v;
 });
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.RenderQueueItemStatus = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");

package/dist/components/RenderQueue/context.js

@@ -15,13 +15,23 @@ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (
 }) : function(o, v) {
     o["default"] = v;
 });
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.RenderQueueContextProvider = exports.renderJobsRef = exports.RenderQueueContext = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");

package/dist/components/RenderQueue/index.js

@@ -15,13 +15,23 @@ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (
 }) : function(o, v) {
     o["default"] = v;
 });
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.RenderQueue = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");

package/dist/components/TimeValue.js

@@ -40,7 +40,7 @@ const TimeValue = () => {
     const frame = (0, remotion_1.useCurrentFrame)();
     const config = remotion_1.Internals.useUnsafeVideoConfig();
     const isStill = (0, is_current_selected_still_1.useIsStill)();
-    const { seek } = player_1.PlayerInternals.usePlayer();
+    const { seek, play, pause, toggle } = player_1.PlayerInternals.usePlayer();
     const keybindings = (0, use_keybinding_1.useKeybinding)();
     const ref = (0, react_1.useRef)(null);
     const onTextChange = (0, react_1.useCallback)((newVal) => {
@@ -55,7 +55,10 @@ const TimeValue = () => {
             (_a = ref.current) === null || _a === void 0 ? void 0 : _a.click();
         },
         seek,
-    }), [seek]);
+        play,
+        pause,
+        toggle,
+    }), [seek, play, pause, toggle]);
     (0, react_1.useEffect)(() => {
         const gKey = keybindings.registerKeybinding({
             event: 'keypress',

package/dist/components/Timeline/TimelineLayerEye.js

@@ -23,6 +23,7 @@ const container = {
     justifyContent: 'center',
     alignItems: 'center',
     marginRight: 6,
+    flexShrink: 0,
 };
 let layerPointedDown = null;
 const TimelineLayerEye = ({ onInvoked, hidden, type }) => {

package/dist/components/get-zod-if-possible.js

@@ -15,13 +15,23 @@ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (
 }) : function(o, v) {
     o["default"] = v;
 });
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ZodProvider = exports.useZodTypesIfPossible = exports.useZodIfPossible = exports.getZTypesIfPossible = exports.getZodIfPossible = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");

package/dist/esm/index.mjs

@@ -134,13 +134,18 @@ var getStaticFiles = () => {
   }
   return window.remotion_staticFiles;
 };
+// src/api/go-to-composition.ts
+import { Internals } from "remotion";
+var goToComposition = (compositionId) => {
+  Internals.compositionSelectorRef.current?.selectComposition(compositionId);
+};
 // src/api/helpers/calc-new-props.ts
-import { Internals, getRemotionEnvironment as getRemotionEnvironment2 } from "remotion";
+import { Internals as Internals2, getRemotionEnvironment as getRemotionEnvironment2 } from "remotion";
 var calcNewProps = (compositionId, defaultProps) => {
   if (!getRemotionEnvironment2().isStudio) {
     throw new Error("saveDefaultProps can only be called in the Remotion Studio.");
   }
-  const { compositionsRef, editorPropsProviderRef } = Internals;
+  const { compositionsRef, editorPropsProviderRef } = Internals2;
   const compositionsStore = compositionsRef.current;
   if (!compositionsStore) {
     throw new Error("No compositions ref found. Are you in the Remotion Studio and are the Remotion versions aligned?");
@@ -167,10 +172,20 @@ var calcNewProps = (compositionId, defaultProps) => {
   };
 };
 
+// src/api/pause.ts
+import { Internals as Internals3 } from "remotion";
+var pause = () => {
+  Internals3.timeValueRef.current?.pause();
+};
+// src/api/play.ts
+import { Internals as Internals4 } from "remotion";
+var play = (e) => {
+  Internals4.timeValueRef.current?.play(e);
+};
 // src/api/reevaluate-composition.ts
-import { Internals as Internals2 } from "remotion";
+import { Internals as Internals5 } from "remotion";
 var reevaluateComposition = () => {
-  Internals2.resolveCompositionsRef.current?.reloadCurrentlySelectedComposition();
+  Internals5.resolveCompositionsRef.current?.reloadCurrentlySelectedComposition();
 };
 // src/api/restart-studio.ts
 import { getRemotionEnvironment as getRemotionEnvironment3 } from "remotion";
@@ -340,18 +355,23 @@ var saveDefaultProps = async ({
   return Promise.reject(err);
 };
 // src/api/seek.ts
-import { Internals as Internals3 } from "remotion";
+import { Internals as Internals6 } from "remotion";
 var seek = (frame) => {
-  Internals3.timeValueRef.current?.seek(Math.max(0, frame));
+  Internals6.timeValueRef.current?.seek(Math.max(0, frame));
+};
+// src/api/toggle.ts
+import { Internals as Internals7 } from "remotion";
+var toggle = (e) => {
+  Internals7.timeValueRef.current?.toggle(e);
 };
 // src/api/update-default-props.ts
-import { Internals as Internals4 } from "remotion";
+import { Internals as Internals8 } from "remotion";
 var updateDefaultProps = ({
   compositionId,
   defaultProps
 }) => {
   const { generatedDefaultProps, composition } = calcNewProps(compositionId, defaultProps);
-  const propsStore = Internals4.editorPropsProviderRef.current;
+  const propsStore = Internals8.editorPropsProviderRef.current;
   if (!propsStore) {
     throw new Error("No props store found. Are you in the Remotion Studio and are the Remotion versions aligned?");
   }
@@ -361,7 +381,7 @@ var updateDefaultProps = ({
       [composition.id]: generatedDefaultProps
     };
   });
-  window.dispatchEvent(new CustomEvent(Internals4.PROPS_UPDATED_EXTERNALLY, {
+  window.dispatchEvent(new CustomEvent(Internals8.PROPS_UPDATED_EXTERNALLY, {
     detail: {
       resetUnsaved: false
     }
@@ -458,10 +478,14 @@ export {
   watchStaticFile,
   watchPublicFolder,
   updateDefaultProps,
+  toggle,
   seek,
   saveDefaultProps,
   restartStudio,
   reevaluateComposition,
+  play,
+  pause,
+  goToComposition,
   getStaticFiles,
   focusDefaultPropsPath,
   deleteStaticFile,