@remotion/player 4.0.0-copy.4 → 4.0.0-esm.17

package/LICENSE.md

@@ -7,7 +7,7 @@ Depending on the type of your legal entity, you are granted permission to use Re
 
 ## Free license
 
-Copyright © 2022 [Remotion](https://www.remotion.dev/)
+Copyright © 2023 [Remotion](https://www.remotion.dev/)
 
 ### Eligibility
 

package/dist/{MediaVolumeSlider.js → cjs/MediaVolumeSlider.js}

@@ -72,6 +72,10 @@ const MediaVolumeSlider = ({ displayVerticalVolumeSlider }) => {
             cursor: 'pointer',
             height: BAR_HEIGHT,
             width: exports.VOLUME_SLIDER_WIDTH,
+            backgroundImage: `linear-gradient(
+				to right,
+				white ${mediaVolume * 100}%, rgba(255, 255, 255, 0) ${mediaVolume * 100}%
+			)`,
         };
         if (displayVerticalVolumeSlider) {
             return {
@@ -85,7 +89,7 @@ const MediaVolumeSlider = ({ displayVerticalVolumeSlider }) => {
             ...commonStyle,
             marginLeft: 5,
         };
-    }, [displayVerticalVolumeSlider]);
+    }, [displayVerticalVolumeSlider, mediaVolume]);
     const sliderStyle = `
 	.${randomClass}::-webkit-slider-thumb {
 		-webkit-appearance: none;
@@ -95,12 +99,6 @@ const MediaVolumeSlider = ({ displayVerticalVolumeSlider }) => {
 		height: ${KNOB_SIZE}px;
 		width: ${KNOB_SIZE}px;
 	}
-	.${randomClass} {
-		background-image: linear-gradient(
-			to right,
-			white ${mediaVolume * 100}%, rgba(255, 255, 255, 0) ${mediaVolume * 100}%
-		);
-	}
 
 	.${randomClass}::-moz-range-thumb {
 		-webkit-appearance: none;

package/dist/{Player.d.ts → cjs/Player.d.ts}

@@ -40,7 +40,4 @@ export declare type PlayerProps<T> = {
     renderFullscreenButton?: RenderFullscreenButton;
 } & PropsIfHasProps<T> & CompProps<T>;
 export declare const componentOrNullIfLazy: <T>(props: CompProps<T>) => ComponentType<T> | null;
-declare module 'react' {
-    function forwardRef<T, P = {}>(render: (props: P, ref: React.MutableRefObject<T>) => React.ReactElement | null): (props: P & React.RefAttributes<T>) => React.ReactElement | null;
-}
-export declare const Player: <T>(props: PlayerProps<T> & React.RefAttributes<PlayerRef>) => React.ReactElement<any, string | React.JSXElementConstructor<any>> | null;
+export declare const Player: <T>(props: PlayerProps<T> & React.RefAttributes<PlayerRef>) => React.ReactElement | null;

package/dist/{Player.js → cjs/Player.js}

@@ -135,6 +135,9 @@ const PlayerFn = ({ durationInFrames, compositionHeight, compositionWidth, fps,
             remotion_1.Internals.CSSUtils.injectCSS(remotion_1.Internals.CSSUtils.makeDefaultCSS(`.${player_css_classname_1.PLAYER_CSS_CLASSNAME}`, '#fff'));
         }, []);
     }
-    return ((0, jsx_runtime_1.jsx)(SharedPlayerContext_1.SharedPlayerContexts, { timelineContext: timelineContextValue, component: component, compositionHeight: compositionHeight, compositionWidth: compositionWidth, durationInFrames: durationInFrames, fps: fps, inputProps: inputProps, numberOfSharedAudioTags: numberOfSharedAudioTags, children: (0, jsx_runtime_1.jsx)(remotion_1.Internals.Timeline.SetTimelineContext.Provider, { value: setTimelineContextValue, children: (0, jsx_runtime_1.jsx)(emitter_context_1.PlayerEventEmitterContext.Provider, { value: emitter, children: (0, jsx_runtime_1.jsx)(PlayerUI_1.default, { ref: rootRef, renderLoading: renderLoading, autoPlay: Boolean(autoPlay), loop: Boolean(loop), controls: Boolean(controls), errorFallback: errorFallback, style: style, inputProps: passedInputProps, allowFullscreen: Boolean(allowFullscreen), moveToBeginningWhenEnded: Boolean(moveToBeginningWhenEnded), clickToPlay: typeof clickToPlay === 'boolean' ? clickToPlay : Boolean(controls), showVolumeControls: Boolean(showVolumeControls), doubleClickToFullscreen: Boolean(doubleClickToFullscreen), spaceKeyToPlayOrPause: Boolean(spaceKeyToPlayOrPause), playbackRate: playbackRate, className: className !== null && className !== void 0 ? className : undefined, showPosterWhenUnplayed: Boolean(showPosterWhenUnplayed), showPosterWhenEnded: Boolean(showPosterWhenEnded), showPosterWhenPaused: Boolean(showPosterWhenPaused), renderPoster: renderPoster, inFrame: inFrame !== null && inFrame !== void 0 ? inFrame : null, outFrame: outFrame !== null && outFrame !== void 0 ? outFrame : null, initiallyShowControls: initiallyShowControls !== null && initiallyShowControls !== void 0 ? initiallyShowControls : true, renderFullscreen: renderFullscreenButton !== null && renderFullscreenButton !== void 0 ? renderFullscreenButton : null, renderPlayPauseButton: renderPlayPauseButton !== null && renderPlayPauseButton !== void 0 ? renderPlayPauseButton : null }) }) }) }));
+    return ((0, jsx_runtime_1.jsx)(remotion_1.Internals.IsPlayerContextProvider, { children: (0, jsx_runtime_1.jsx)(SharedPlayerContext_1.SharedPlayerContexts, { timelineContext: timelineContextValue, component: component, compositionHeight: compositionHeight, compositionWidth: compositionWidth, durationInFrames: durationInFrames, fps: fps, inputProps: inputProps, numberOfSharedAudioTags: numberOfSharedAudioTags, children: (0, jsx_runtime_1.jsx)(remotion_1.Internals.Timeline.SetTimelineContext.Provider, { value: setTimelineContextValue, children: (0, jsx_runtime_1.jsx)(emitter_context_1.PlayerEventEmitterContext.Provider, { value: emitter, children: (0, jsx_runtime_1.jsx)(PlayerUI_1.default, { ref: rootRef, renderLoading: renderLoading, autoPlay: Boolean(autoPlay), loop: Boolean(loop), controls: Boolean(controls), errorFallback: errorFallback, style: style, inputProps: passedInputProps, allowFullscreen: Boolean(allowFullscreen), moveToBeginningWhenEnded: Boolean(moveToBeginningWhenEnded), clickToPlay: typeof clickToPlay === 'boolean'
+                            ? clickToPlay
+                            : Boolean(controls), showVolumeControls: Boolean(showVolumeControls), doubleClickToFullscreen: Boolean(doubleClickToFullscreen), spaceKeyToPlayOrPause: Boolean(spaceKeyToPlayOrPause), playbackRate: playbackRate, className: className !== null && className !== void 0 ? className : undefined, showPosterWhenUnplayed: Boolean(showPosterWhenUnplayed), showPosterWhenEnded: Boolean(showPosterWhenEnded), showPosterWhenPaused: Boolean(showPosterWhenPaused), renderPoster: renderPoster, inFrame: inFrame !== null && inFrame !== void 0 ? inFrame : null, outFrame: outFrame !== null && outFrame !== void 0 ? outFrame : null, initiallyShowControls: initiallyShowControls !== null && initiallyShowControls !== void 0 ? initiallyShowControls : true, renderFullscreen: renderFullscreenButton !== null && renderFullscreenButton !== void 0 ? renderFullscreenButton : null, renderPlayPauseButton: renderPlayPauseButton !== null && renderPlayPauseButton !== void 0 ? renderPlayPauseButton : null }) }) }) }) }));
 };
-exports.Player = (0, react_1.forwardRef)(PlayerFn);
+const forward = react_1.forwardRef;
+exports.Player = forward(PlayerFn);

package/dist/{PlayerUI.d.ts → cjs/PlayerUI.d.ts}

@@ -9,7 +9,7 @@ export declare type RenderLoading = (canvas: {
     width: number;
 }) => React.ReactNode;
 export declare type RenderPoster = RenderLoading;
-declare const _default: (props: {
+declare const _default: React.ForwardRefExoticComponent<{
     controls: boolean;
     loop: boolean;
     autoPlay: boolean;
@@ -34,5 +34,5 @@ declare const _default: (props: {
     initiallyShowControls: number | boolean;
     renderPlayPauseButton: RenderPlayPauseButton | null;
     renderFullscreen: RenderFullscreenButton | null;
-} & React.RefAttributes<PlayerRef | null>) => React.ReactElement<any, string | React.JSXElementConstructor<any>> | null;
+} & React.RefAttributes<PlayerRef>>;
 export default _default;

package/dist/{SharedPlayerContext.js → cjs/SharedPlayerContext.js}

@@ -39,6 +39,7 @@ const SharedPlayerContexts = ({ children, timelineContext, inputProps, fps, comp
             currentCompositionMetadata: null,
             setCurrentCompositionMetadata: () => undefined,
             assets: [],
+            setClipRegion: () => undefined,
         };
     }, [
         component,

package/dist/{Thumbnail.d.ts → cjs/Thumbnail.d.ts}

@@ -16,8 +16,5 @@ declare type ThumbnailProps<T> = PropsIfHasProps<T> & CompProps<T> & {
     className?: string;
 };
 export declare const ThumbnailFn: <T>({ frameToDisplay, style, inputProps, compositionHeight, compositionWidth, durationInFrames, fps, className, errorFallback, renderLoading, ...componentProps }: ThumbnailProps<T>, ref: MutableRefObject<ThumbnailMethods>) => JSX.Element;
-declare module 'react' {
-    function forwardRef<T, P = {}>(render: (props: P, ref: React.MutableRefObject<T>) => React.ReactElement | null): (props: P & React.RefAttributes<T>) => React.ReactElement | null;
-}
 export declare const Thumbnail: <T>(props: ThumbnailProps<T> & import("react").RefAttributes<ThumbnailMethods>) => React.ReactElement | null;
 export {};

package/dist/{Thumbnail.js → cjs/Thumbnail.js}

@@ -35,7 +35,8 @@ const ThumbnailFn = ({ frameToDisplay, style, inputProps, compositionHeight, com
     const passedInputProps = (0, react_1.useMemo)(() => {
         return inputProps !== null && inputProps !== void 0 ? inputProps : {};
     }, [inputProps]);
-    return ((0, jsx_runtime_1.jsx)(SharedPlayerContext_1.SharedPlayerContexts, { timelineContext: timelineState, component: Component, compositionHeight: compositionHeight, compositionWidth: compositionWidth, durationInFrames: durationInFrames, fps: fps, inputProps: inputProps, numberOfSharedAudioTags: 0, children: (0, jsx_runtime_1.jsx)(emitter_context_1.ThumbnailEmitterContext.Provider, { value: emitter, children: (0, jsx_runtime_1.jsx)(ThumbnailUI_1.default, { className: className, errorFallback: errorFallback, inputProps: passedInputProps, renderLoading: renderLoading, style: style }) }) }));
+    return ((0, jsx_runtime_1.jsx)(remotion_1.Internals.IsPlayerContextProvider, { children: (0, jsx_runtime_1.jsx)(SharedPlayerContext_1.SharedPlayerContexts, { timelineContext: timelineState, component: Component, compositionHeight: compositionHeight, compositionWidth: compositionWidth, durationInFrames: durationInFrames, fps: fps, inputProps: inputProps, numberOfSharedAudioTags: 0, children: (0, jsx_runtime_1.jsx)(emitter_context_1.ThumbnailEmitterContext.Provider, { value: emitter, children: (0, jsx_runtime_1.jsx)(ThumbnailUI_1.default, { className: className, errorFallback: errorFallback, inputProps: passedInputProps, renderLoading: renderLoading, style: style }) }) }) }));
 };
 exports.ThumbnailFn = ThumbnailFn;
-exports.Thumbnail = (0, react_1.forwardRef)(exports.ThumbnailFn);
+const forward = react_1.forwardRef;
+exports.Thumbnail = forward(exports.ThumbnailFn);

package/dist/{ThumbnailUI.d.ts → cjs/ThumbnailUI.d.ts}

@@ -1,11 +1,11 @@
 import React from 'react';
 import type { ThumbnailMethods } from './player-methods';
 import type { ErrorFallback, RenderLoading } from './PlayerUI';
-declare const _default: (props: {
+declare const _default: React.ForwardRefExoticComponent<{
     inputProps: unknown;
     style?: React.CSSProperties | undefined;
     errorFallback: ErrorFallback;
     renderLoading: RenderLoading | undefined;
     className: string | undefined;
-} & React.RefAttributes<ThumbnailMethods | null>) => React.ReactElement<any, string | React.JSXElementConstructor<any>> | null;
+} & React.RefAttributes<ThumbnailMethods>>;
 export default _default;

package/dist/{utils → cjs/utils}/use-element-size.d.ts

@@ -7,6 +7,7 @@ export declare type Size = {
         width: number;
         height: number;
     };
+    refresh: () => void;
 };
 export declare const updateAllElementsSizes: () => void;
 export declare const useElementSize: (ref: React.RefObject<HTMLElement>, options: {

package/dist/{utils → cjs/utils}/use-element-size.js

@@ -93,6 +93,6 @@ const useElementSize = (ref, options) => {
             elementSizeHooks = elementSizeHooks.filter((e) => e !== updateSize);
         };
     }, [updateSize]);
-    return size;
+    return size ? { ...size, refresh: updateSize } : null;
 };
 exports.useElementSize = useElementSize;

package/dist/{utils → cjs/utils}/validate-in-out-frame.d.ts

@@ -1,4 +1,4 @@
-export declare const validateSingleFrameFrame: (frame: unknown, variableName: string) => number | null;
+export declare const validateSingleFrame: (frame: unknown, variableName: string) => number | null;
 export declare const validateInOutFrames: ({ inFrame, durationInFrames, outFrame, }: {
     inFrame: unknown;
     outFrame: unknown;

package/dist/{utils → cjs/utils}/validate-in-out-frame.js

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.validateInOutFrames = exports.validateSingleFrameFrame = void 0;
-const validateSingleFrameFrame = (frame, variableName) => {
+exports.validateInOutFrames = exports.validateSingleFrame = void 0;
+const validateSingleFrame = (frame, variableName) => {
     if (typeof frame === 'undefined' || frame === null) {
         return frame !== null && frame !== void 0 ? frame : null;
     }
@@ -19,11 +19,11 @@ const validateSingleFrameFrame = (frame, variableName) => {
     }
     return frame;
 };
-exports.validateSingleFrameFrame = validateSingleFrameFrame;
+exports.validateSingleFrame = validateSingleFrame;
 const validateInOutFrames = ({ inFrame, durationInFrames, outFrame, }) => {
-    const validatedInFrame = (0, exports.validateSingleFrameFrame)(inFrame, 'inFrame');
-    const validateOutFrame = (0, exports.validateSingleFrameFrame)(outFrame, 'outFrame');
-    if (validatedInFrame === null && validateOutFrame === null) {
+    const validatedInFrame = (0, exports.validateSingleFrame)(inFrame, 'inFrame');
+    const validatedOutFrame = (0, exports.validateSingleFrame)(outFrame, 'outFrame');
+    if (validatedInFrame === null && validatedOutFrame === null) {
         return;
     }
     // Must not be over the duration
@@ -31,22 +31,22 @@ const validateInOutFrames = ({ inFrame, durationInFrames, outFrame, }) => {
         throw new Error('inFrame must be less than (durationInFrames - 1), but is ' +
             validatedInFrame);
     }
-    if (validateOutFrame !== null && validateOutFrame > durationInFrames - 1) {
+    if (validatedOutFrame !== null && validatedOutFrame > durationInFrames - 1) {
         throw new Error('outFrame must be less than (durationInFrames - 1), but is ' +
-            validatedInFrame);
+            validatedOutFrame);
     }
     // Must not be under 0
     if (validatedInFrame !== null && validatedInFrame < 0) {
         throw new Error('inFrame must be greater than 0, but is ' + validatedInFrame);
     }
-    if (validateOutFrame !== null && validateOutFrame < 0) {
-        throw new Error('outFrame must be greater than 0, but is ' + validateOutFrame);
+    if (validatedOutFrame !== null && validatedOutFrame <= 0) {
+        throw new Error(`outFrame must be greater than 0, but is ${validatedOutFrame}. If you want to render a single frame, use <Thumbnail /> instead.`);
     }
-    if (validateOutFrame !== null &&
+    if (validatedOutFrame !== null &&
         validatedInFrame !== null &&
-        validateOutFrame <= validatedInFrame) {
+        validatedOutFrame <= validatedInFrame) {
         throw new Error('outFrame must be greater than inFrame, but is ' +
-            validateOutFrame +
+            validatedOutFrame +
             ' <= ' +
             validatedInFrame);
     }

package/dist/esm/MediaVolumeSlider.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+export declare const VOLUME_SLIDER_WIDTH = 100;
+export declare const MediaVolumeSlider: React.FC<{
+    displayVerticalVolumeSlider: Boolean;
+}>;

package/dist/esm/MediaVolumeSlider.js

@@ -0,0 +1,114 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useId, useMemo, useRef, useState } from 'react';
+import { Internals, random } from 'remotion';
+import { ICON_SIZE, VolumeOffIcon, VolumeOnIcon } from './icons';
+import { useHoverState } from './use-hover-state';
+const BAR_HEIGHT = 5;
+const KNOB_SIZE = 12;
+export const VOLUME_SLIDER_WIDTH = 100;
+export const MediaVolumeSlider = ({ displayVerticalVolumeSlider }) => {
+    const [mediaMuted, setMediaMuted] = Internals.useMediaMutedState();
+    const [mediaVolume, setMediaVolume] = Internals.useMediaVolumeState();
+    const [focused, setFocused] = useState(false);
+    const parentDivRef = useRef(null);
+    const inputRef = useRef(null);
+    const hover = useHoverState(parentDivRef);
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    const randomId = typeof useId === 'undefined' ? 'volume-slider' : useId();
+    const [randomClass] = useState(() => `__remotion-volume-slider-${random(randomId)}`.replace('.', ''));
+    const isMutedOrZero = mediaMuted || mediaVolume === 0;
+    const onVolumeChange = (e) => {
+        setMediaVolume(parseFloat(e.target.value));
+    };
+    const onBlur = () => {
+        setTimeout(() => {
+            // We need a small delay to check which element was focused next,
+            // and if it wasn't the volume slider, we hide it
+            if (document.activeElement !== inputRef.current) {
+                setFocused(false);
+            }
+        }, 10);
+    };
+    const onClick = useCallback(() => {
+        if (mediaVolume === 0) {
+            setMediaVolume(1);
+            setMediaMuted(false);
+            return;
+        }
+        setMediaMuted((mute) => !mute);
+    }, [mediaVolume, setMediaMuted, setMediaVolume]);
+    const parentDivStyle = useMemo(() => {
+        return {
+            display: 'inline-flex',
+            background: 'none',
+            border: 'none',
+            padding: '6px',
+            justifyContent: 'center',
+            alignItems: 'center',
+            touchAction: 'none',
+            ...(displayVerticalVolumeSlider && { position: 'relative' }),
+        };
+    }, [displayVerticalVolumeSlider]);
+    const volumeContainer = useMemo(() => {
+        return {
+            display: 'inline',
+            width: ICON_SIZE,
+            height: ICON_SIZE,
+            cursor: 'pointer',
+            appearance: 'none',
+            background: 'none',
+            border: 'none',
+            padding: 0,
+        };
+    }, []);
+    const inputStyle = useMemo(() => {
+        const commonStyle = {
+            WebkitAppearance: 'none',
+            backgroundColor: 'rgba(255, 255, 255, 0.5)',
+            borderRadius: BAR_HEIGHT / 2,
+            cursor: 'pointer',
+            height: BAR_HEIGHT,
+            width: VOLUME_SLIDER_WIDTH,
+            backgroundImage: `linear-gradient(
+				to right,
+				white ${mediaVolume * 100}%, rgba(255, 255, 255, 0) ${mediaVolume * 100}%
+			)`,
+        };
+        if (displayVerticalVolumeSlider) {
+            return {
+                ...commonStyle,
+                transform: `rotate(-90deg)`,
+                position: 'absolute',
+                bottom: ICON_SIZE + VOLUME_SLIDER_WIDTH / 2 + 5,
+            };
+        }
+        return {
+            ...commonStyle,
+            marginLeft: 5,
+        };
+    }, [displayVerticalVolumeSlider, mediaVolume]);
+    const sliderStyle = `
+	.${randomClass}::-webkit-slider-thumb {
+		-webkit-appearance: none;
+		background-color: white;
+		border-radius: ${KNOB_SIZE / 2}px;
+		box-shadow: 0 0 2px black;
+		height: ${KNOB_SIZE}px;
+		width: ${KNOB_SIZE}px;
+	}
+
+	.${randomClass}::-moz-range-thumb {
+		-webkit-appearance: none;
+		background-color: white;
+		border-radius: ${KNOB_SIZE / 2}px;
+		box-shadow: 0 0 2px black;
+		height: ${KNOB_SIZE}px;
+		width: ${KNOB_SIZE}px;
+	}
+`;
+    return (_jsxs("div", { ref: parentDivRef, style: parentDivStyle, children: [_jsx("style", { 
+                // eslint-disable-next-line react/no-danger
+                dangerouslySetInnerHTML: {
+                    __html: sliderStyle,
+                } }), _jsx("button", { "aria-label": isMutedOrZero ? 'Unmute sound' : 'Mute sound', title: isMutedOrZero ? 'Unmute sound' : 'Mute sound', onClick: onClick, onBlur: onBlur, onFocus: () => setFocused(true), style: volumeContainer, type: "button", children: isMutedOrZero ? _jsx(VolumeOffIcon, {}) : _jsx(VolumeOnIcon, {}) }), (focused || hover) && !mediaMuted ? (_jsx("input", { ref: inputRef, "aria-label": "Change volume", className: randomClass, max: 1, min: 0, onBlur: () => setFocused(false), onChange: onVolumeChange, step: 0.01, type: "range", value: mediaVolume, style: inputStyle })) : null] }));
+};

package/dist/esm/Player.d.ts

@@ -0,0 +1,43 @@
+import type { ComponentType } from 'react';
+import React from 'react';
+import type { CompProps } from 'remotion';
+import type { PlayerRef } from './player-methods';
+import type { RenderFullscreenButton, RenderPlayPauseButton } from './PlayerControls';
+import type { RenderLoading, RenderPoster } from './PlayerUI';
+import type { PropsIfHasProps } from './utils/props-if-has-props';
+export declare type ErrorFallback = (info: {
+    error: Error;
+}) => React.ReactNode;
+export declare type PlayerProps<T> = {
+    durationInFrames: number;
+    compositionWidth: number;
+    compositionHeight: number;
+    fps: number;
+    showVolumeControls?: boolean;
+    controls?: boolean;
+    errorFallback?: ErrorFallback;
+    style?: React.CSSProperties;
+    loop?: boolean;
+    autoPlay?: boolean;
+    allowFullscreen?: boolean;
+    clickToPlay?: boolean;
+    doubleClickToFullscreen?: boolean;
+    spaceKeyToPlayOrPause?: boolean;
+    numberOfSharedAudioTags?: number;
+    playbackRate?: number;
+    renderLoading?: RenderLoading;
+    moveToBeginningWhenEnded?: boolean;
+    className?: string;
+    initialFrame?: number;
+    renderPoster?: RenderPoster;
+    showPosterWhenPaused?: boolean;
+    showPosterWhenEnded?: boolean;
+    showPosterWhenUnplayed?: boolean;
+    inFrame?: number | null;
+    outFrame?: number | null;
+    initiallyShowControls?: number | boolean;
+    renderPlayPauseButton?: RenderPlayPauseButton;
+    renderFullscreenButton?: RenderFullscreenButton;
+} & PropsIfHasProps<T> & CompProps<T>;
+export declare const componentOrNullIfLazy: <T>(props: CompProps<T>) => ComponentType<T> | null;
+export declare const Player: <T>(props: PlayerProps<T> & React.RefAttributes<PlayerRef>) => React.ReactElement | null;