remotion 3.3.92 → 3.3.93

package/dist/cjs/CompositionManager.d.ts

@@ -32,6 +32,11 @@ declare type EnhancedTSequenceData = {
     startMediaFrom: number;
     playbackRate: number;
 };
+export declare type LoopDisplay = {
+    numberOfTimes: number;
+    startOffset: number;
+    durationInFrames: number;
+};
 export declare type TSequence = {
     from: number;
     duration: number;
@@ -41,7 +46,7 @@ export declare type TSequence = {
     rootId: string;
     showInTimeline: boolean;
     nonce: number;
-    showLoopTimesInTimeline: number | undefined;
+    loopDisplay: LoopDisplay | undefined;
 } & EnhancedTSequenceData;
 export declare type TAsset = {
     type: 'audio' | 'video';

package/dist/cjs/Sequence.d.ts

@@ -1,4 +1,5 @@
 import React from 'react';
+import type { LoopDisplay } from './CompositionManager.js';
 export declare type LayoutAndStyle = {
     layout: 'none';
 } | {
@@ -12,7 +13,7 @@ export declare type SequenceProps = {
     durationInFrames?: number;
     name?: string;
     showInTimeline?: boolean;
-    showLoopTimesInTimeline?: number;
+    loopDisplay?: LoopDisplay;
 } & LayoutAndStyle;
 /**
  * @description A component that time-shifts its children and wraps them in an absolutely positioned <div>.

package/dist/cjs/Sequence.js

@@ -11,7 +11,7 @@ const nonce_js_1 = require("./nonce.js");
 const SequenceContext_js_1 = require("./SequenceContext.js");
 const timeline_position_state_js_1 = require("./timeline-position-state.js");
 const use_video_config_js_1 = require("./use-video-config.js");
-const SequenceRefForwardingFunction = ({ from = 0, durationInFrames = Infinity, children, name, showInTimeline = true, showLoopTimesInTimeline, ...other }, ref) => {
+const SequenceRefForwardingFunction = ({ from = 0, durationInFrames = Infinity, children, name, showInTimeline = true, loopDisplay, ...other }, ref) => {
     const { layout = 'absolute-fill' } = other;
     const [id] = (0, react_1.useState)(() => String(Math.random()));
     const parentSequence = (0, react_1.useContext)(SequenceContext_js_1.SequenceContext);
@@ -81,7 +81,7 @@ const SequenceRefForwardingFunction = ({ from = 0, durationInFrames = Infinity,
             rootId,
             showInTimeline,
             nonce,
-            showLoopTimesInTimeline,
+            loopDisplay,
         });
         return () => {
             unregisterSequence(id);
@@ -99,7 +99,7 @@ const SequenceRefForwardingFunction = ({ from = 0, durationInFrames = Infinity,
         from,
         showInTimeline,
         nonce,
-        showLoopTimesInTimeline,
+        loopDisplay,
         environment,
     ]);
     const endThreshold = cumulatedFrom + from + durationInFrames - 1;

package/dist/cjs/loop/index.js

@@ -2,7 +2,9 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Loop = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
 const Sequence_js_1 = require("../Sequence.js");
+const use_current_frame_js_1 = require("../use-current-frame.js");
 const use_video_config_js_1 = require("../use-video-config.js");
 const validate_duration_in_frames_js_1 = require("../validation/validate-duration-in-frames.js");
 /**
@@ -10,6 +12,7 @@ const validate_duration_in_frames_js_1 = require("../validation/validate-duratio
  * @see [Documentation](https://www.remotion.dev/docs/loop)
  */
 const Loop = ({ durationInFrames, times = Infinity, children, name, ...props }) => {
+    const currentFrame = (0, use_current_frame_js_1.useCurrentFrame)();
     const { durationInFrames: compDuration } = (0, use_video_config_js_1.useVideoConfig)();
     (0, validate_duration_in_frames_js_1.validateDurationInFrames)({
         durationInFrames,
@@ -28,10 +31,16 @@ const Loop = ({ durationInFrames, times = Infinity, children, name, ...props })
     const maxTimes = Math.ceil(compDuration / durationInFrames);
     const actualTimes = Math.min(maxTimes, times);
     const style = props.layout === 'none' ? undefined : props.style;
-    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: new Array(actualTimes).fill(true).map((_, i) => {
-            return ((0, jsx_runtime_1.jsx)(Sequence_js_1.Sequence
-            // eslint-disable-next-line react/no-array-index-key
-            , { durationInFrames: durationInFrames, from: i * durationInFrames, name: name, showLoopTimesInTimeline: actualTimes, showInTimeline: i === 0, layout: props.layout, style: style, children: children }, `loop-${i}`));
-        }) }));
+    const maxFrame = durationInFrames * (actualTimes - 1);
+    const start = Math.floor(currentFrame / durationInFrames) * durationInFrames;
+    const from = Math.min(start, maxFrame);
+    const loopDisplay = (0, react_1.useMemo)(() => {
+        return {
+            numberOfTimes: actualTimes,
+            startOffset: -from,
+            durationInFrames,
+        };
+    }, [actualTimes, durationInFrames, from]);
+    return ((0, jsx_runtime_1.jsx)(Sequence_js_1.Sequence, { durationInFrames: durationInFrames, from: from, name: name, loopDisplay: loopDisplay, layout: props.layout, style: style, children: children }));
 };
 exports.Loop = Loop;

package/dist/cjs/use-media-in-timeline.js

@@ -84,7 +84,7 @@ const useMediaInTimeline = ({ volume, mediaVolume, mediaRef, src, mediaType, pla
             nonce,
             startMediaFrom: 0 - startsAt,
             doesVolumeChange,
-            showLoopTimesInTimeline: undefined,
+            loopDisplay: undefined,
             playbackRate,
         });
         return () => {

package/dist/cjs/version.d.ts

@@ -1 +1 @@
-export declare const VERSION = "3.3.92";
+export declare const VERSION = "3.3.93";

package/dist/cjs/version.js

@@ -2,4 +2,4 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.VERSION = void 0;
 // Automatically generated on publish
-exports.VERSION = '3.3.92';
+exports.VERSION = '3.3.93';

package/dist/esm/index.mjs

@@ -58,7 +58,7 @@ function truthy(value) {
 }
 
 // Automatically generated on publish
-const VERSION = '3.3.92';
+const VERSION = '3.3.93';
 
 const checkMultipleRemotionVersions = () => {
     if (typeof globalThis === 'undefined') {
@@ -666,7 +666,7 @@ const useVideoConfig = () => {
     return videoConfig;
 };
 
-const SequenceRefForwardingFunction = ({ from = 0, durationInFrames = Infinity, children, name, showInTimeline = true, showLoopTimesInTimeline, ...other }, ref) => {
+const SequenceRefForwardingFunction = ({ from = 0, durationInFrames = Infinity, children, name, showInTimeline = true, loopDisplay, ...other }, ref) => {
     const { layout = 'absolute-fill' } = other;
     const [id] = useState(() => String(Math.random()));
     const parentSequence = useContext(SequenceContext);
@@ -736,7 +736,7 @@ const SequenceRefForwardingFunction = ({ from = 0, durationInFrames = Infinity,
             rootId,
             showInTimeline,
             nonce,
-            showLoopTimesInTimeline,
+            loopDisplay,
         });
         return () => {
             unregisterSequence(id);
@@ -754,7 +754,7 @@ const SequenceRefForwardingFunction = ({ from = 0, durationInFrames = Infinity,
         from,
         showInTimeline,
         nonce,
-        showLoopTimesInTimeline,
+        loopDisplay,
         environment,
     ]);
     const endThreshold = cumulatedFrom + from + durationInFrames - 1;
@@ -781,6 +781,26 @@ const SequenceRefForwardingFunction = ({ from = 0, durationInFrames = Infinity,
  */
 const Sequence = forwardRef(SequenceRefForwardingFunction);
 
+/**
+ * @description Get the current frame of the video. Frames are 0-indexed, meaning the first frame is 0, the last frame is the duration of the composition in frames minus one.
+ * @see [Documentation](https://remotion.dev/docs/use-current-frame)
+ */
+const useCurrentFrame = () => {
+    const canUseRemotionHooks = useContext(CanUseRemotionHooks);
+    if (!canUseRemotionHooks) {
+        if (typeof window !== 'undefined' && window.remotion_isPlayer) {
+            throw new Error(`useCurrentFrame can only be called inside a component that was passed to <Player>. See: https://www.remotion.dev/docs/player/examples`);
+        }
+        throw new Error(`useCurrentFrame() can only be called inside a component that was registered as a composition. See https://www.remotion.dev/docs/the-fundamentals#defining-compositions`);
+    }
+    const frame = useTimelinePosition();
+    const context = useContext(SequenceContext);
+    const contextOffset = context
+        ? context.cumulatedFrom + context.relativeFrom
+        : 0;
+    return frame - contextOffset;
+};
+
 const validateDurationInFrames = ({ allowFloats, component, durationInFrames, }) => {
     if (typeof durationInFrames !== 'number') {
         throw new Error(`The "durationInFrames" prop ${component} must be a number, but you passed a value of type ${typeof durationInFrames}`);
@@ -801,6 +821,7 @@ const validateDurationInFrames = ({ allowFloats, component, durationInFrames, })
  * @see [Documentation](https://www.remotion.dev/docs/loop)
  */
 const Loop = ({ durationInFrames, times = Infinity, children, name, ...props }) => {
+    const currentFrame = useCurrentFrame();
     const { durationInFrames: compDuration } = useVideoConfig();
     validateDurationInFrames({
         durationInFrames,
@@ -819,11 +840,17 @@ const Loop = ({ durationInFrames, times = Infinity, children, name, ...props })
     const maxTimes = Math.ceil(compDuration / durationInFrames);
     const actualTimes = Math.min(maxTimes, times);
     const style = props.layout === 'none' ? undefined : props.style;
-    return (jsx(Fragment, { children: new Array(actualTimes).fill(true).map((_, i) => {
-            return (jsx(Sequence
-            // eslint-disable-next-line react/no-array-index-key
-            , { durationInFrames: durationInFrames, from: i * durationInFrames, name: name, showLoopTimesInTimeline: actualTimes, showInTimeline: i === 0, layout: props.layout, style: style, children: children }, `loop-${i}`));
-        }) }));
+    const maxFrame = durationInFrames * (actualTimes - 1);
+    const start = Math.floor(currentFrame / durationInFrames) * durationInFrames;
+    const from = Math.min(start, maxFrame);
+    const loopDisplay = useMemo(() => {
+        return {
+            numberOfTimes: actualTimes,
+            startOffset: -from,
+            durationInFrames,
+        };
+    }, [actualTimes, durationInFrames, from]);
+    return (jsx(Sequence, { durationInFrames: durationInFrames, from: from, name: name, loopDisplay: loopDisplay, layout: props.layout, style: style, children: children }));
 };
 
 const validateMediaProps = (props, component) => {
@@ -1067,26 +1094,6 @@ const random = (seed, dummy) => {
     throw new Error('random() argument must be a number or a string');
 };
 
-/**
- * @description Get the current frame of the video. Frames are 0-indexed, meaning the first frame is 0, the last frame is the duration of the composition in frames minus one.
- * @see [Documentation](https://remotion.dev/docs/use-current-frame)
- */
-const useCurrentFrame = () => {
-    const canUseRemotionHooks = useContext(CanUseRemotionHooks);
-    if (!canUseRemotionHooks) {
-        if (typeof window !== 'undefined' && window.remotion_isPlayer) {
-            throw new Error(`useCurrentFrame can only be called inside a component that was passed to <Player>. See: https://www.remotion.dev/docs/player/examples`);
-        }
-        throw new Error(`useCurrentFrame() can only be called inside a component that was registered as a composition. See https://www.remotion.dev/docs/the-fundamentals#defining-compositions`);
-    }
-    const frame = useTimelinePosition();
-    const context = useContext(SequenceContext);
-    const contextOffset = context
-        ? context.cumulatedFrom + context.relativeFrom
-        : 0;
-    return frame - contextOffset;
-};
-
 const useMediaStartsAt = () => {
     var _a;
     const parentSequence = useContext(SequenceContext);
@@ -1248,7 +1255,7 @@ const useMediaInTimeline = ({ volume, mediaVolume, mediaRef, src, mediaType, pla
             nonce,
             startMediaFrom: 0 - startsAt,
             doesVolumeChange,
-            showLoopTimesInTimeline: undefined,
+            loopDisplay: undefined,
             playbackRate,
         });
         return () => {

package/dist/esm/version.mjs

@@ -1,4 +1,4 @@
 // Automatically generated on publish
-const VERSION = '3.3.92';
+const VERSION = '3.3.93';
 
 export { VERSION };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "remotion",
-  "version": "3.3.92",
+  "version": "3.3.93",
   "description": "Render videos in React",
   "main": "dist/cjs/index.js",
   "types": "dist/cjs/index.d.ts",

package/dist/cjs/EditorProps.d.ts

@@ -1,15 +0,0 @@
-import React from 'react';
-declare type Props = Record<string, object>;
-export declare type EditorPropsContextType = {
-    props: Props;
-    updateProps: (options: {
-        id: string;
-        defaultProps: object;
-        newProps: object;
-    }) => void;
-};
-export declare const EditorPropsContext: React.Context<EditorPropsContextType>;
-export declare const EditorPropsProvider: React.FC<{
-    children: React.ReactNode;
-}>;
-export {};

package/dist/cjs/EditorProps.js

@@ -1,53 +0,0 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : 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;
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.EditorPropsProvider = exports.EditorPropsContext = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = __importStar(require("react"));
-exports.EditorPropsContext = (0, react_1.createContext)({
-    props: {},
-    updateProps: () => {
-        throw new Error('Not implemented');
-    },
-});
-const EditorPropsProvider = ({ children }) => {
-    const [props, setProps] = react_1.default.useState({});
-    const updateProps = (0, react_1.useCallback)(({ defaultProps, id, newProps, }) => {
-        setProps((prev) => {
-            var _a;
-            return {
-                ...prev,
-                [id]: typeof newProps === 'function'
-                    ? newProps((_a = prev[id]) !== null && _a !== void 0 ? _a : defaultProps)
-                    : newProps,
-            };
-        });
-    }, []);
-    const ctx = (0, react_1.useMemo)(() => {
-        return { props, updateProps };
-    }, [props, updateProps]);
-    return ((0, jsx_runtime_1.jsx)(exports.EditorPropsContext.Provider, { value: ctx, children: children }));
-};
-exports.EditorPropsProvider = EditorPropsProvider;

package/dist/cjs/props-if-has-props.d.ts

@@ -1,10 +0,0 @@
-import type { z } from 'zod';
-export declare type PropsIfHasProps<Schema extends z.ZodTypeAny, Props> = z.ZodTypeAny extends Schema ? {} extends Props ? {
-    defaultProps?: Props;
-} : {
-    defaultProps: Props;
-} : {} extends Props ? {
-    defaultProps: z.infer<Schema>;
-} : {
-    defaultProps: z.infer<Schema> & Props;
-};

package/dist/cjs/props-if-has-props.js

@@ -1,2 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });

package/dist/cjs/z-color.d.ts

@@ -1,9 +0,0 @@
-import { z } from 'zod';
-export declare const REMOTION_COLOR_BRAND = "__remotion-color";
-export declare const parseColor: (value: string) => {
-    a: number;
-    r: number;
-    g: number;
-    b: number;
-};
-export declare const zColor: () => z.ZodEffects<z.ZodString, string, string>;

package/dist/cjs/z-color.js

@@ -1,28 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.zColor = exports.parseColor = exports.REMOTION_COLOR_BRAND = void 0;
-const zod_1 = require("zod");
-const interpolate_colors_js_1 = require("./interpolate-colors.js");
-exports.REMOTION_COLOR_BRAND = '__remotion-color';
-const parseColor = (value) => {
-    const colored = (0, interpolate_colors_js_1.processColor)(value).toString(16).padStart(8, '0');
-    const opacity = parseInt(colored.slice(0, 2), 16);
-    const r = parseInt(colored.slice(2, 4), 16);
-    const g = parseInt(colored.slice(4, 6), 16);
-    const b = parseInt(colored.slice(6, 8), 16);
-    return { a: opacity, r, g, b };
-};
-exports.parseColor = parseColor;
-const zColor = () => zod_1.z
-    .string()
-    .refine((value) => {
-    try {
-        (0, exports.parseColor)(value);
-        return true;
-    }
-    catch (err) {
-        return false;
-    }
-}, { message: 'Invalid color' })
-    .describe(exports.REMOTION_COLOR_BRAND);
-exports.zColor = zColor;