@remotion/player 4.1.0-alpha1 → 4.1.0-alpha11

package/dist/cjs/Player.js

@@ -43,7 +43,9 @@ const PlayerFn = ({ durationInFrames, compositionHeight, compositionWidth, fps,
     }
     const component = remotion_1.Internals.useLazyComponent(componentProps);
     (0, validate_initial_frame_js_1.validateInitialFrame)({ initialFrame, durationInFrames });
-    const [frame, setFrame] = (0, react_1.useState)(() => initialFrame !== null && initialFrame !== void 0 ? initialFrame : 0);
+    const [frame, setFrame] = (0, react_1.useState)(() => ({
+        [SharedPlayerContext_js_1.PLAYER_COMP_ID]: initialFrame !== null && initialFrame !== void 0 ? initialFrame : 0,
+    }));
     const [playing, setPlaying] = (0, react_1.useState)(false);
     const [rootId] = (0, react_1.useState)('player-comp');
     const [emitter] = (0, react_1.useState)(() => new event_emitter_js_1.PlayerEmitter());
@@ -59,8 +61,7 @@ const PlayerFn = ({ durationInFrames, compositionHeight, compositionWidth, fps,
     }
     remotion_1.Internals.validateDimension(compositionHeight, 'compositionHeight', 'of the <Player /> component');
     remotion_1.Internals.validateDimension(compositionWidth, 'compositionWidth', 'of the <Player /> component');
-    remotion_1.Internals.validateDurationInFrames({
-        durationInFrames,
+    remotion_1.Internals.validateDurationInFrames(durationInFrames, {
         component: 'of the <Player/> component',
         allowFloats: false,
     });

package/dist/cjs/PlayerUI.js

@@ -317,7 +317,7 @@ const PlayerUI = ({ controls, style, loop, autoPlay, allowFullscreen, inputProps
             showPosterWhenEnded && player.isLastFrame && !player.isPlaying(),
             showPosterWhenUnplayed && !player.hasPlayed && !player.isPlaying(),
         ].some(Boolean);
-    const content = ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { style: outer, onClick: clickToPlay ? handleClick : undefined, onDoubleClick: doubleClickToFullscreen ? handleDoubleClick : undefined, children: (0, jsx_runtime_1.jsx)("div", { style: containerStyle, className: player_css_classname_js_1.PLAYER_CSS_CLASSNAME, children: VideoComponent ? ((0, jsx_runtime_1.jsx)(error_boundary_js_1.ErrorBoundary, { onError: onError, errorFallback: errorFallback, children: (0, jsx_runtime_1.jsx)(VideoComponent, { ...((_c = video === null || video === void 0 ? void 0 : video.defaultProps) !== null && _c !== void 0 ? _c : {}), ...(inputProps !== null && inputProps !== void 0 ? inputProps : {}) }) })) : null }) }), shouldShowPoster ? ((0, jsx_runtime_1.jsx)("div", { style: outer, onClick: clickToPlay ? handleClick : undefined, onDoubleClick: doubleClickToFullscreen ? handleDoubleClick : undefined, children: poster })) : null, controls ? ((0, jsx_runtime_1.jsx)(PlayerControls_js_1.Controls, { fps: config.fps, durationInFrames: config.durationInFrames, hovered: hovered, player: player, onFullscreenButtonClick: onFullscreenButtonClick, isFullscreen: isFullscreen, allowFullscreen: allowFullscreen, showVolumeControls: showVolumeControls, onExitFullscreenButtonClick: onExitFullscreenButtonClick, spaceKeyToPlayOrPause: spaceKeyToPlayOrPause, onSeekEnd: onSeekEnd, onSeekStart: onSeekStart, inFrame: inFrame, outFrame: outFrame, initiallyShowControls: initiallyShowControls, canvasSize: canvasSize, renderFullscreenButton: renderFullscreenButton, renderPlayPauseButton: renderPlayPauseButton, alwaysShowControls: alwaysShowControls, showPlaybackRateControl: showPlaybackRateControl })) : null] }));
+    const content = ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { style: outer, onClick: clickToPlay ? handleClick : undefined, onDoubleClick: doubleClickToFullscreen ? handleDoubleClick : undefined, children: (0, jsx_runtime_1.jsx)("div", { style: containerStyle, className: player_css_classname_js_1.PLAYER_CSS_CLASSNAME, children: VideoComponent ? ((0, jsx_runtime_1.jsx)(error_boundary_js_1.ErrorBoundary, { onError: onError, errorFallback: errorFallback, children: (0, jsx_runtime_1.jsx)(remotion_1.Internals.ClipComposition, { children: (0, jsx_runtime_1.jsx)(VideoComponent, { ...((_c = video === null || video === void 0 ? void 0 : video.props) !== null && _c !== void 0 ? _c : {}), ...(inputProps !== null && inputProps !== void 0 ? inputProps : {}) }) }) })) : null }) }), shouldShowPoster ? ((0, jsx_runtime_1.jsx)("div", { style: outer, onClick: clickToPlay ? handleClick : undefined, onDoubleClick: doubleClickToFullscreen ? handleDoubleClick : undefined, children: poster })) : null, controls ? ((0, jsx_runtime_1.jsx)(PlayerControls_js_1.Controls, { fps: config.fps, durationInFrames: config.durationInFrames, hovered: hovered, player: player, onFullscreenButtonClick: onFullscreenButtonClick, isFullscreen: isFullscreen, allowFullscreen: allowFullscreen, showVolumeControls: showVolumeControls, onExitFullscreenButtonClick: onExitFullscreenButtonClick, spaceKeyToPlayOrPause: spaceKeyToPlayOrPause, onSeekEnd: onSeekEnd, onSeekStart: onSeekStart, inFrame: inFrame, outFrame: outFrame, initiallyShowControls: initiallyShowControls, canvasSize: canvasSize, renderFullscreenButton: renderFullscreenButton, renderPlayPauseButton: renderPlayPauseButton, alwaysShowControls: alwaysShowControls, showPlaybackRateControl: showPlaybackRateControl })) : null] }));
     if (is_node_js_1.IS_NODE && !doesReactVersionSupportSuspense) {
         return ((0, jsx_runtime_1.jsx)("div", { ref: container, style: outerStyle, className: className, children: content }));
     }

package/dist/cjs/SharedPlayerContext.d.ts

@@ -1,6 +1,7 @@
 import type { ComponentType, LazyExoticComponent } from 'react';
 import React from 'react';
 import type { TimelineContextValue } from 'remotion';
+export declare const PLAYER_COMP_ID = "player-comp";
 export declare const SharedPlayerContexts: React.FC<{
     children: React.ReactNode;
     timelineContext: TimelineContextValue;

package/dist/cjs/SharedPlayerContext.js

@@ -1,10 +1,11 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.SharedPlayerContexts = void 0;
+exports.SharedPlayerContexts = exports.PLAYER_COMP_ID = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const remotion_1 = require("remotion");
 const volume_persistance_js_1 = require("./volume-persistance.js");
+exports.PLAYER_COMP_ID = 'player-comp';
 const SharedPlayerContexts = ({ children, timelineContext, inputProps, fps, compositionHeight, compositionWidth, durationInFrames, component, numberOfSharedAudioTags, initiallyMuted, }) => {
     const compositionManagerContext = (0, react_1.useMemo)(() => {
         return {
@@ -15,7 +16,7 @@ const SharedPlayerContexts = ({ children, timelineContext, inputProps, fps, comp
                     height: compositionHeight,
                     width: compositionWidth,
                     fps,
-                    id: 'player-comp',
+                    id: exports.PLAYER_COMP_ID,
                     props: inputProps,
                     nonce: 777,
                     scale: 1,
@@ -70,6 +71,6 @@ const SharedPlayerContexts = ({ children, timelineContext, inputProps, fps, comp
             setMediaVolume: setMediaVolumeAndPersist,
         };
     }, [setMediaVolumeAndPersist]);
-    return ((0, jsx_runtime_1.jsx)(remotion_1.Internals.CanUseRemotionHooksProvider, { children: (0, jsx_runtime_1.jsx)(remotion_1.Internals.Timeline.TimelineContext.Provider, { value: timelineContext, children: (0, jsx_runtime_1.jsx)(remotion_1.Internals.CompositionManager.Provider, { value: compositionManagerContext, children: (0, jsx_runtime_1.jsx)(remotion_1.Internals.ResolveCompositionConfig, { children: (0, jsx_runtime_1.jsx)(remotion_1.Internals.PrefetchProvider, { children: (0, jsx_runtime_1.jsx)(remotion_1.Internals.DurationsContextProvider, { children: (0, jsx_runtime_1.jsx)(remotion_1.Internals.MediaVolumeContext.Provider, { value: mediaVolumeContextValue, children: (0, jsx_runtime_1.jsx)(remotion_1.Internals.SetMediaVolumeContext.Provider, { value: setMediaVolumeContextValue, children: (0, jsx_runtime_1.jsx)(remotion_1.Internals.SharedAudioContextProvider, { numberOfAudioTags: numberOfSharedAudioTags, component: component, children: children }) }) }) }) }) }) }) }) }));
+    return ((0, jsx_runtime_1.jsx)(remotion_1.Internals.CanUseRemotionHooksProvider, { children: (0, jsx_runtime_1.jsx)(remotion_1.Internals.Timeline.TimelineContext.Provider, { value: timelineContext, children: (0, jsx_runtime_1.jsx)(remotion_1.Internals.CompositionManager.Provider, { value: compositionManagerContext, children: (0, jsx_runtime_1.jsx)(remotion_1.Internals.ResolveCompositionConfig, { children: (0, jsx_runtime_1.jsx)(remotion_1.Internals.PrefetchProvider, { children: (0, jsx_runtime_1.jsx)(remotion_1.Internals.DurationsContextProvider, { children: (0, jsx_runtime_1.jsx)(remotion_1.Internals.MediaVolumeContext.Provider, { value: mediaVolumeContextValue, children: (0, jsx_runtime_1.jsx)(remotion_1.Internals.NativeLayersProvider, { children: (0, jsx_runtime_1.jsx)(remotion_1.Internals.SetMediaVolumeContext.Provider, { value: setMediaVolumeContextValue, children: (0, jsx_runtime_1.jsx)(remotion_1.Internals.SharedAudioContextProvider, { numberOfAudioTags: numberOfSharedAudioTags, component: component, children: children }) }) }) }) }) }) }) }) }) }));
 };
 exports.SharedPlayerContexts = SharedPlayerContexts;

package/dist/cjs/Thumbnail.d.ts

@@ -4,7 +4,7 @@ import type { AnyZodObject } from 'zod';
 import type { ThumbnailMethods } from './player-methods.js';
 import type { ErrorFallback, RenderLoading } from './PlayerUI.js';
 import type { PropsIfHasProps } from './utils/props-if-has-props.js';
-type ThumbnailProps<Schema extends AnyZodObject, Props> = PropsIfHasProps<Schema, Props> & CompProps<Schema> & {
+type ThumbnailProps<Schema extends AnyZodObject, Props extends Record<string, unknown>> = PropsIfHasProps<Schema, Props> & CompProps<Props> & {
     frameToDisplay: number;
     style?: CSSProperties;
     durationInFrames: number;
@@ -15,10 +15,10 @@ type ThumbnailProps<Schema extends AnyZodObject, Props> = PropsIfHasProps<Schema
     renderLoading?: RenderLoading;
     className?: string;
 };
-export declare const ThumbnailFn: <Schema extends AnyZodObject, Props>({ frameToDisplay, style, inputProps, compositionHeight, compositionWidth, durationInFrames, fps, className, errorFallback, renderLoading, ...componentProps }: ThumbnailProps<Schema, Props>, ref: MutableRefObject<ThumbnailMethods>) => JSX.Element;
+export declare const ThumbnailFn: <Schema extends AnyZodObject, Props extends Record<string, unknown>>({ frameToDisplay, style, inputProps, compositionHeight, compositionWidth, durationInFrames, fps, className, errorFallback, renderLoading, ...componentProps }: ThumbnailProps<Schema, Props>, ref: MutableRefObject<ThumbnailMethods>) => JSX.Element;
 /**
  * @description A component which can be rendered in a regular React App (for example: Create React App, Next.js) to display a single frame of a video.
  * @see [Documentation](https://www.remotion.dev/docs/player/thumbnail)
  */
-export declare const Thumbnail: <Schema extends AnyZodObject, Props>(props: ThumbnailProps<Schema, Props> & import("react").RefAttributes<ThumbnailMethods>) => React.ReactElement | null;
+export declare const Thumbnail: <Schema extends AnyZodObject, Props extends Record<string, unknown>>(props: ThumbnailProps<Schema, Props> & import("react").RefAttributes<ThumbnailMethods>) => React.ReactElement | null;
 export {};

package/dist/cjs/Thumbnail.js

@@ -17,7 +17,9 @@ const ThumbnailFn = ({ frameToDisplay, style, inputProps, compositionHeight, com
     const timelineState = (0, react_1.useMemo)(() => {
         return {
             playing: false,
-            frame: frameToDisplay,
+            frame: {
+                [SharedPlayerContext_js_1.PLAYER_COMP_ID]: frameToDisplay,
+            },
             rootId: thumbnailId,
             imperativePlaying: {
                 current: false,

package/dist/cjs/ThumbnailUI.js

@@ -98,7 +98,7 @@ const ThumbnailUI = ({ style, inputProps, errorFallback, renderLoading, classNam
     if (!config) {
         return null;
     }
-    const content = ((0, jsx_runtime_1.jsx)("div", { style: outer, children: (0, jsx_runtime_1.jsx)("div", { style: containerStyle, className: player_css_classname_js_1.PLAYER_CSS_CLASSNAME, children: VideoComponent ? ((0, jsx_runtime_1.jsx)(error_boundary_js_1.ErrorBoundary, { onError: onError, errorFallback: errorFallback, children: (0, jsx_runtime_1.jsx)(VideoComponent, { ...((_b = video === null || video === void 0 ? void 0 : video.defaultProps) !== null && _b !== void 0 ? _b : {}), ...(inputProps !== null && inputProps !== void 0 ? inputProps : {}) }) })) : null }) }));
+    const content = ((0, jsx_runtime_1.jsx)("div", { style: outer, children: (0, jsx_runtime_1.jsx)("div", { style: containerStyle, className: player_css_classname_js_1.PLAYER_CSS_CLASSNAME, children: VideoComponent ? ((0, jsx_runtime_1.jsx)(error_boundary_js_1.ErrorBoundary, { onError: onError, errorFallback: errorFallback, children: (0, jsx_runtime_1.jsx)(VideoComponent, { ...((_b = video === null || video === void 0 ? void 0 : video.props) !== null && _b !== void 0 ? _b : {}), ...(inputProps !== null && inputProps !== void 0 ? inputProps : {}) }) })) : null }) }));
     if (is_node_js_1.IS_NODE && !doesReactVersionSupportSuspense) {
         return ((0, jsx_runtime_1.jsx)("div", { ref: container, style: outerStyle, className: className, children: content }));
     }

package/dist/cjs/icons.js

@@ -4,11 +4,8 @@ exports.VolumeOnIcon = exports.VolumeOffIcon = exports.FullscreenIcon = exports.
 const jsx_runtime_1 = require("react/jsx-runtime");
 exports.ICON_SIZE = 25;
 exports.fullscreenIconSize = 16;
-const rotate = {
-    transform: `rotate(90deg)`,
-};
 const PlayIcon = () => {
-    return ((0, jsx_runtime_1.jsx)("svg", { width: exports.ICON_SIZE, height: exports.ICON_SIZE, viewBox: "-100 -100 400 400", style: rotate, children: (0, jsx_runtime_1.jsx)("path", { fill: "#fff", stroke: "#fff", strokeWidth: "100", strokeLinejoin: "round", d: "M 2 172 a 196 100 0 0 0 195 5 A 196 240 0 0 0 100 2.259 A 196 240 0 0 0 2 172 z" }) }));
+    return ((0, jsx_runtime_1.jsx)("svg", { width: exports.ICON_SIZE, height: exports.ICON_SIZE, viewBox: "0 0 25 25", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: (0, jsx_runtime_1.jsx)("path", { d: "M8 6.375C7.40904 8.17576 7.06921 10.2486 7.01438 12.3871C6.95955 14.5255 7.19163 16.6547 7.6875 18.5625C9.95364 18.2995 12.116 17.6164 14.009 16.5655C15.902 15.5147 17.4755 14.124 18.6088 12.5C17.5158 10.8949 15.9949 9.51103 14.1585 8.45082C12.3222 7.3906 10.2174 6.68116 8 6.375Z", fill: "white", stroke: "white", strokeWidth: "6.25", strokeLinejoin: "round" }) }));
 };
 exports.PlayIcon = PlayIcon;
 const PauseIcon = () => {

package/dist/cjs/use-playback.js

@@ -7,8 +7,8 @@ const calculate_next_frame_js_1 = require("./calculate-next-frame.js");
 const is_backgrounded_js_1 = require("./is-backgrounded.js");
 const use_player_js_1 = require("./use-player.js");
 const usePlayback = ({ loop, playbackRate, moveToBeginningWhenEnded, inFrame, outFrame, }) => {
-    const frame = remotion_1.Internals.Timeline.useTimelinePosition();
     const config = remotion_1.Internals.useUnsafeVideoConfig();
+    const frame = remotion_1.Internals.Timeline.useTimelinePosition();
     const { playing, pause, emitter } = (0, use_player_js_1.usePlayer)();
     const setFrame = remotion_1.Internals.Timeline.useTimelineSetFrame();
     // requestAnimationFrame() does not work if the tab is not active.
@@ -60,7 +60,7 @@ const usePlayback = ({ loop, playbackRate, moveToBeginningWhenEnded, inFrame, ou
             framesAdvanced += framesToAdvance;
             if (nextFrame !== frameRef.current &&
                 (!hasEnded || moveToBeginningWhenEnded)) {
-                setFrame(nextFrame);
+                setFrame((c) => ({ ...c, [config.id]: nextFrame }));
             }
             if (hasEnded) {
                 stop();

package/dist/cjs/use-player.js

@@ -26,9 +26,11 @@ const usePlayer = () => {
         throw new TypeError('Expected Player event emitter context');
     }
     const seek = (0, react_1.useCallback)((newFrame) => {
-        setTimelinePosition(newFrame);
+        if (video === null || video === void 0 ? void 0 : video.id) {
+            setTimelinePosition((c) => ({ ...c, [video.id]: newFrame }));
+        }
         emitter.dispatchSeek(newFrame);
-    }, [emitter, setTimelinePosition]);
+    }, [emitter, setTimelinePosition, video === null || video === void 0 ? void 0 : video.id]);
     const play = (0, react_1.useCallback)((e) => {
         if (imperativePlaying.current) {
             return;
@@ -71,32 +73,49 @@ const usePlayer = () => {
     const pauseAndReturnToPlayStart = (0, react_1.useCallback)(() => {
         if (imperativePlaying.current) {
             imperativePlaying.current = false;
-            setTimelinePosition(playStart.current);
-            setPlaying(false);
-            emitter.dispatchPause();
+            if (config) {
+                setTimelinePosition((c) => ({
+                    ...c,
+                    [config.id]: playStart.current,
+                }));
+                setPlaying(false);
+                emitter.dispatchPause();
+            }
         }
-    }, [emitter, imperativePlaying, setPlaying, setTimelinePosition]);
-    const hasVideo = Boolean(video);
+    }, [config, emitter, imperativePlaying, setPlaying, setTimelinePosition]);
+    const videoId = video === null || video === void 0 ? void 0 : video.id;
     const frameBack = (0, react_1.useCallback)((frames) => {
-        if (!hasVideo) {
+        if (!videoId) {
             return null;
         }
         if (imperativePlaying.current) {
             return;
         }
-        setFrame((f) => {
-            return Math.max(0, f - frames);
+        setFrame((c) => {
+            var _a, _b;
+            const prev = (_b = (_a = c[videoId]) !== null && _a !== void 0 ? _a : window.remotion_initialFrame) !== null && _b !== void 0 ? _b : 0;
+            return {
+                ...c,
+                [videoId]: Math.max(0, prev - frames),
+            };
         });
-    }, [hasVideo, imperativePlaying, setFrame]);
+    }, [imperativePlaying, setFrame, videoId]);
     const frameForward = (0, react_1.useCallback)((frames) => {
-        if (!hasVideo) {
+        if (!videoId) {
             return null;
         }
         if (imperativePlaying.current) {
             return;
         }
-        setFrame((f) => Math.min(lastFrame, f + frames));
-    }, [hasVideo, imperativePlaying, lastFrame, setFrame]);
+        setFrame((c) => {
+            var _a, _b;
+            const prev = (_b = (_a = c[videoId]) !== null && _a !== void 0 ? _a : window.remotion_initialFrame) !== null && _b !== void 0 ? _b : 0;
+            return {
+                ...c,
+                [videoId]: Math.min(lastFrame, prev + frames),
+            };
+        });
+    }, [videoId, imperativePlaying, lastFrame, setFrame]);
     const returnValue = (0, react_1.useMemo)(() => {
         return {
             frameBack,

package/dist/esm/SharedPlayerContext.d.ts

@@ -1,6 +1,7 @@
 import type { ComponentType, LazyExoticComponent } from 'react';
 import React from 'react';
 import type { TimelineContextValue } from 'remotion';
+export declare const PLAYER_COMP_ID = "player-comp";
 export declare const SharedPlayerContexts: React.FC<{
     children: React.ReactNode;
     timelineContext: TimelineContextValue;

package/dist/esm/Thumbnail.d.ts

@@ -4,7 +4,7 @@ import type { AnyZodObject } from 'zod';
 import type { ThumbnailMethods } from './player-methods.js';
 import type { ErrorFallback, RenderLoading } from './PlayerUI.js';
 import type { PropsIfHasProps } from './utils/props-if-has-props.js';
-type ThumbnailProps<Schema extends AnyZodObject, Props> = PropsIfHasProps<Schema, Props> & CompProps<Schema> & {
+type ThumbnailProps<Schema extends AnyZodObject, Props extends Record<string, unknown>> = PropsIfHasProps<Schema, Props> & CompProps<Props> & {
     frameToDisplay: number;
     style?: CSSProperties;
     durationInFrames: number;
@@ -15,10 +15,10 @@ type ThumbnailProps<Schema extends AnyZodObject, Props> = PropsIfHasProps<Schema
     renderLoading?: RenderLoading;
     className?: string;
 };
-export declare const ThumbnailFn: <Schema extends AnyZodObject, Props>({ frameToDisplay, style, inputProps, compositionHeight, compositionWidth, durationInFrames, fps, className, errorFallback, renderLoading, ...componentProps }: ThumbnailProps<Schema, Props>, ref: MutableRefObject<ThumbnailMethods>) => JSX.Element;
+export declare const ThumbnailFn: <Schema extends AnyZodObject, Props extends Record<string, unknown>>({ frameToDisplay, style, inputProps, compositionHeight, compositionWidth, durationInFrames, fps, className, errorFallback, renderLoading, ...componentProps }: ThumbnailProps<Schema, Props>, ref: MutableRefObject<ThumbnailMethods>) => JSX.Element;
 /**
  * @description A component which can be rendered in a regular React App (for example: Create React App, Next.js) to display a single frame of a video.
  * @see [Documentation](https://www.remotion.dev/docs/player/thumbnail)
  */
-export declare const Thumbnail: <Schema extends AnyZodObject, Props>(props: ThumbnailProps<Schema, Props> & import("react").RefAttributes<ThumbnailMethods>) => React.ReactElement | null;
+export declare const Thumbnail: <Schema extends AnyZodObject, Props extends Record<string, unknown>>(props: ThumbnailProps<Schema, Props> & import("react").RefAttributes<ThumbnailMethods>) => React.ReactElement | null;
 export {};

package/dist/esm/index.mjs

@@ -297,9 +297,11 @@ const usePlayer = () => {
         throw new TypeError('Expected Player event emitter context');
     }
     const seek = useCallback((newFrame) => {
-        setTimelinePosition(newFrame);
+        if (video === null || video === void 0 ? void 0 : video.id) {
+            setTimelinePosition((c) => ({ ...c, [video.id]: newFrame }));
+        }
         emitter.dispatchSeek(newFrame);
-    }, [emitter, setTimelinePosition]);
+    }, [emitter, setTimelinePosition, video === null || video === void 0 ? void 0 : video.id]);
     const play = useCallback((e) => {
         if (imperativePlaying.current) {
             return;
@@ -342,32 +344,49 @@ const usePlayer = () => {
     const pauseAndReturnToPlayStart = useCallback(() => {
         if (imperativePlaying.current) {
             imperativePlaying.current = false;
-            setTimelinePosition(playStart.current);
-            setPlaying(false);
-            emitter.dispatchPause();
+            if (config) {
+                setTimelinePosition((c) => ({
+                    ...c,
+                    [config.id]: playStart.current,
+                }));
+                setPlaying(false);
+                emitter.dispatchPause();
+            }
         }
-    }, [emitter, imperativePlaying, setPlaying, setTimelinePosition]);
-    const hasVideo = Boolean(video);
+    }, [config, emitter, imperativePlaying, setPlaying, setTimelinePosition]);
+    const videoId = video === null || video === void 0 ? void 0 : video.id;
     const frameBack = useCallback((frames) => {
-        if (!hasVideo) {
+        if (!videoId) {
             return null;
         }
         if (imperativePlaying.current) {
             return;
         }
-        setFrame((f) => {
-            return Math.max(0, f - frames);
+        setFrame((c) => {
+            var _a, _b;
+            const prev = (_b = (_a = c[videoId]) !== null && _a !== void 0 ? _a : window.remotion_initialFrame) !== null && _b !== void 0 ? _b : 0;
+            return {
+                ...c,
+                [videoId]: Math.max(0, prev - frames),
+            };
         });
-    }, [hasVideo, imperativePlaying, setFrame]);
+    }, [imperativePlaying, setFrame, videoId]);
     const frameForward = useCallback((frames) => {
-        if (!hasVideo) {
+        if (!videoId) {
             return null;
         }
         if (imperativePlaying.current) {
             return;
         }
-        setFrame((f) => Math.min(lastFrame, f + frames));
-    }, [hasVideo, imperativePlaying, lastFrame, setFrame]);
+        setFrame((c) => {
+            var _a, _b;
+            const prev = (_b = (_a = c[videoId]) !== null && _a !== void 0 ? _a : window.remotion_initialFrame) !== null && _b !== void 0 ? _b : 0;
+            return {
+                ...c,
+                [videoId]: Math.min(lastFrame, prev + frames),
+            };
+        });
+    }, [videoId, imperativePlaying, lastFrame, setFrame]);
     const returnValue = useMemo(() => {
         return {
             frameBack,
@@ -402,8 +421,8 @@ const usePlayer = () => {
 };
 
 const usePlayback = ({ loop, playbackRate, moveToBeginningWhenEnded, inFrame, outFrame, }) => {
-    const frame = Internals.Timeline.useTimelinePosition();
     const config = Internals.useUnsafeVideoConfig();
+    const frame = Internals.Timeline.useTimelinePosition();
     const { playing, pause, emitter } = usePlayer();
     const setFrame = Internals.Timeline.useTimelineSetFrame();
     // requestAnimationFrame() does not work if the tab is not active.
@@ -455,7 +474,7 @@ const usePlayback = ({ loop, playbackRate, moveToBeginningWhenEnded, inFrame, ou
             framesAdvanced += framesToAdvance;
             if (nextFrame !== frameRef.current &&
                 (!hasEnded || moveToBeginningWhenEnded)) {
-                setFrame(nextFrame);
+                setFrame((c) => ({ ...c, [config.id]: nextFrame }));
             }
             if (hasEnded) {
                 stop();
@@ -673,11 +692,8 @@ const formatTime = (timeInSeconds) => {
 
 const ICON_SIZE = 25;
 const fullscreenIconSize = 16;
-const rotate = {
-    transform: `rotate(90deg)`,
-};
 const PlayIcon = () => {
-    return (jsx("svg", { width: ICON_SIZE, height: ICON_SIZE, viewBox: "-100 -100 400 400", style: rotate, children: jsx("path", { fill: "#fff", stroke: "#fff", strokeWidth: "100", strokeLinejoin: "round", d: "M 2 172 a 196 100 0 0 0 195 5 A 196 240 0 0 0 100 2.259 A 196 240 0 0 0 2 172 z" }) }));
+    return (jsx("svg", { width: ICON_SIZE, height: ICON_SIZE, viewBox: "0 0 25 25", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: jsx("path", { d: "M8 6.375C7.40904 8.17576 7.06921 10.2486 7.01438 12.3871C6.95955 14.5255 7.19163 16.6547 7.6875 18.5625C9.95364 18.2995 12.116 17.6164 14.009 16.5655C15.902 15.5147 17.4755 14.124 18.6088 12.5C17.5158 10.8949 15.9949 9.51103 14.1585 8.45082C12.3222 7.3906 10.2174 6.68116 8 6.375Z", fill: "white", stroke: "white", strokeWidth: "6.25", strokeLinejoin: "round" }) }));
 };
 const PauseIcon = () => {
     return (jsxs("svg", { viewBox: "0 0 100 100", width: ICON_SIZE, height: ICON_SIZE, children: [jsx("rect", { x: "25", y: "20", width: "20", height: "60", fill: "#fff", ry: "5", rx: "5" }), jsx("rect", { x: "55", y: "20", width: "20", height: "60", fill: "#fff", ry: "5", rx: "5" })] }));
@@ -1677,7 +1693,7 @@ const PlayerUI = ({ controls, style, loop, autoPlay, allowFullscreen, inputProps
             showPosterWhenEnded && player.isLastFrame && !player.isPlaying(),
             showPosterWhenUnplayed && !player.hasPlayed && !player.isPlaying(),
         ].some(Boolean);
-    const content = (jsxs(Fragment, { children: [jsx("div", { style: outer, onClick: clickToPlay ? handleClick : undefined, onDoubleClick: doubleClickToFullscreen ? handleDoubleClick : undefined, children: jsx("div", { style: containerStyle, className: PLAYER_CSS_CLASSNAME, children: VideoComponent ? (jsx(ErrorBoundary, { onError: onError, errorFallback: errorFallback, children: jsx(VideoComponent, { ...((_c = video === null || video === void 0 ? void 0 : video.defaultProps) !== null && _c !== void 0 ? _c : {}), ...(inputProps !== null && inputProps !== void 0 ? inputProps : {}) }) })) : null }) }), shouldShowPoster ? (jsx("div", { style: outer, onClick: clickToPlay ? handleClick : undefined, onDoubleClick: doubleClickToFullscreen ? handleDoubleClick : undefined, children: poster })) : null, controls ? (jsx(Controls, { fps: config.fps, durationInFrames: config.durationInFrames, hovered: hovered, player: player, onFullscreenButtonClick: onFullscreenButtonClick, isFullscreen: isFullscreen, allowFullscreen: allowFullscreen, showVolumeControls: showVolumeControls, onExitFullscreenButtonClick: onExitFullscreenButtonClick, spaceKeyToPlayOrPause: spaceKeyToPlayOrPause, onSeekEnd: onSeekEnd, onSeekStart: onSeekStart, inFrame: inFrame, outFrame: outFrame, initiallyShowControls: initiallyShowControls, canvasSize: canvasSize, renderFullscreenButton: renderFullscreenButton, renderPlayPauseButton: renderPlayPauseButton, alwaysShowControls: alwaysShowControls, showPlaybackRateControl: showPlaybackRateControl })) : null] }));
+    const content = (jsxs(Fragment, { children: [jsx("div", { style: outer, onClick: clickToPlay ? handleClick : undefined, onDoubleClick: doubleClickToFullscreen ? handleDoubleClick : undefined, children: jsx("div", { style: containerStyle, className: PLAYER_CSS_CLASSNAME, children: VideoComponent ? (jsx(ErrorBoundary, { onError: onError, errorFallback: errorFallback, children: jsx(Internals.ClipComposition, { children: jsx(VideoComponent, { ...((_c = video === null || video === void 0 ? void 0 : video.props) !== null && _c !== void 0 ? _c : {}), ...(inputProps !== null && inputProps !== void 0 ? inputProps : {}) }) }) })) : null }) }), shouldShowPoster ? (jsx("div", { style: outer, onClick: clickToPlay ? handleClick : undefined, onDoubleClick: doubleClickToFullscreen ? handleDoubleClick : undefined, children: poster })) : null, controls ? (jsx(Controls, { fps: config.fps, durationInFrames: config.durationInFrames, hovered: hovered, player: player, onFullscreenButtonClick: onFullscreenButtonClick, isFullscreen: isFullscreen, allowFullscreen: allowFullscreen, showVolumeControls: showVolumeControls, onExitFullscreenButtonClick: onExitFullscreenButtonClick, spaceKeyToPlayOrPause: spaceKeyToPlayOrPause, onSeekEnd: onSeekEnd, onSeekStart: onSeekStart, inFrame: inFrame, outFrame: outFrame, initiallyShowControls: initiallyShowControls, canvasSize: canvasSize, renderFullscreenButton: renderFullscreenButton, renderPlayPauseButton: renderPlayPauseButton, alwaysShowControls: alwaysShowControls, showPlaybackRateControl: showPlaybackRateControl })) : null] }));
     if (IS_NODE && !doesReactVersionSupportSuspense$1) {
         return (jsx("div", { ref: container, style: outerStyle, className: className, children: content }));
     }
@@ -1700,6 +1716,7 @@ const getPreferredVolume = () => {
     return val ? Number(val) : 1;
 };
 
+const PLAYER_COMP_ID = 'player-comp';
 const SharedPlayerContexts = ({ children, timelineContext, inputProps, fps, compositionHeight, compositionWidth, durationInFrames, component, numberOfSharedAudioTags, initiallyMuted, }) => {
     const compositionManagerContext = useMemo(() => {
         return {
@@ -1710,7 +1727,7 @@ const SharedPlayerContexts = ({ children, timelineContext, inputProps, fps, comp
                     height: compositionHeight,
                     width: compositionWidth,
                     fps,
-                    id: 'player-comp',
+                    id: PLAYER_COMP_ID,
                     props: inputProps,
                     nonce: 777,
                     scale: 1,
@@ -1765,7 +1782,7 @@ const SharedPlayerContexts = ({ children, timelineContext, inputProps, fps, comp
             setMediaVolume: setMediaVolumeAndPersist,
         };
     }, [setMediaVolumeAndPersist]);
-    return (jsx(Internals.CanUseRemotionHooksProvider, { children: jsx(Internals.Timeline.TimelineContext.Provider, { value: timelineContext, children: jsx(Internals.CompositionManager.Provider, { value: compositionManagerContext, children: jsx(Internals.ResolveCompositionConfig, { children: jsx(Internals.PrefetchProvider, { children: jsx(Internals.DurationsContextProvider, { children: jsx(Internals.MediaVolumeContext.Provider, { value: mediaVolumeContextValue, children: jsx(Internals.SetMediaVolumeContext.Provider, { value: setMediaVolumeContextValue, children: jsx(Internals.SharedAudioContextProvider, { numberOfAudioTags: numberOfSharedAudioTags, component: component, children: children }) }) }) }) }) }) }) }) }));
+    return (jsx(Internals.CanUseRemotionHooksProvider, { children: jsx(Internals.Timeline.TimelineContext.Provider, { value: timelineContext, children: jsx(Internals.CompositionManager.Provider, { value: compositionManagerContext, children: jsx(Internals.ResolveCompositionConfig, { children: jsx(Internals.PrefetchProvider, { children: jsx(Internals.DurationsContextProvider, { children: jsx(Internals.MediaVolumeContext.Provider, { value: mediaVolumeContextValue, children: jsx(Internals.NativeLayersProvider, { children: jsx(Internals.SetMediaVolumeContext.Provider, { value: setMediaVolumeContextValue, children: jsx(Internals.SharedAudioContextProvider, { numberOfAudioTags: numberOfSharedAudioTags, component: component, children: children }) }) }) }) }) }) }) }) }) }));
 };
 
 const validateSingleFrame = (frame, variableName) => {
@@ -1884,7 +1901,9 @@ const PlayerFn = ({ durationInFrames, compositionHeight, compositionWidth, fps,
     }
     const component = Internals.useLazyComponent(componentProps);
     validateInitialFrame({ initialFrame, durationInFrames });
-    const [frame, setFrame] = useState(() => initialFrame !== null && initialFrame !== void 0 ? initialFrame : 0);
+    const [frame, setFrame] = useState(() => ({
+        [PLAYER_COMP_ID]: initialFrame !== null && initialFrame !== void 0 ? initialFrame : 0,
+    }));
     const [playing, setPlaying] = useState(false);
     const [rootId] = useState('player-comp');
     const [emitter] = useState(() => new PlayerEmitter());
@@ -1900,8 +1919,7 @@ const PlayerFn = ({ durationInFrames, compositionHeight, compositionWidth, fps,
     }
     Internals.validateDimension(compositionHeight, 'compositionHeight', 'of the <Player /> component');
     Internals.validateDimension(compositionWidth, 'compositionWidth', 'of the <Player /> component');
-    Internals.validateDurationInFrames({
-        durationInFrames,
+    Internals.validateDurationInFrames(durationInFrames, {
         component: 'of the <Player/> component',
         allowFloats: false,
     });
@@ -2076,7 +2094,7 @@ const ThumbnailUI = ({ style, inputProps, errorFallback, renderLoading, classNam
     if (!config) {
         return null;
     }
-    const content = (jsx("div", { style: outer, children: jsx("div", { style: containerStyle, className: PLAYER_CSS_CLASSNAME, children: VideoComponent ? (jsx(ErrorBoundary, { onError: onError, errorFallback: errorFallback, children: jsx(VideoComponent, { ...((_b = video === null || video === void 0 ? void 0 : video.defaultProps) !== null && _b !== void 0 ? _b : {}), ...(inputProps !== null && inputProps !== void 0 ? inputProps : {}) }) })) : null }) }));
+    const content = (jsx("div", { style: outer, children: jsx("div", { style: containerStyle, className: PLAYER_CSS_CLASSNAME, children: VideoComponent ? (jsx(ErrorBoundary, { onError: onError, errorFallback: errorFallback, children: jsx(VideoComponent, { ...((_b = video === null || video === void 0 ? void 0 : video.props) !== null && _b !== void 0 ? _b : {}), ...(inputProps !== null && inputProps !== void 0 ? inputProps : {}) }) })) : null }) }));
     if (IS_NODE && !doesReactVersionSupportSuspense) {
         return (jsx("div", { ref: container, style: outerStyle, className: className, children: content }));
     }
@@ -2090,7 +2108,9 @@ const ThumbnailFn = ({ frameToDisplay, style, inputProps, compositionHeight, com
     const timelineState = useMemo(() => {
         return {
             playing: false,
-            frame: frameToDisplay,
+            frame: {
+                [PLAYER_COMP_ID]: frameToDisplay,
+            },
             rootId: thumbnailId,
             imperativePlaying: {
                 current: false,