@remotion/player - npm Package Compare versions

Comparing version 2.2.0-alpha.fedc7825 to 2.2.0

dist/event-emitter.d.ts

@@ -1,2 +0,1 @@
-import './event-target-polyfill';
 declare type SeekPayload = {
@@ -8,14 +7,25 @@ frame: number;
 };
-interface StateEventMap {
-    seeked: CustomEvent<SeekPayload>;
-    pause: CustomEvent<undefined>;
-    play: CustomEvent<undefined>;
-    ended: CustomEvent<undefined>;
-    error: CustomEvent<ErrorPayload>;
-}
-export interface PlayerEventTarget extends EventTarget {
-    addEventListener<K extends keyof StateEventMap>(type: K, listener: (ev: StateEventMap[K]) => void, options?: boolean | AddEventListenerOptions): void;
-    addEventListener(type: string, callback: EventListenerOrEventListenerObject | null, options?: EventListenerOptions | boolean): void;
-}
-export declare class PlayerEmitter extends EventTarget {
+declare type TimeUpdateEventPayload = {
+    frame: number;
+};
+declare type StateEventMap = {
+    seeked: SeekPayload;
+    pause: undefined;
+    play: undefined;
+    ended: undefined;
+    error: ErrorPayload;
+    timeupdate: TimeUpdateEventPayload;
+};
+declare type EventTypes = keyof StateEventMap;
+declare type CallbackListener<T extends EventTypes> = (data: {
+    detail: StateEventMap[T];
+}) => void;
+declare type Listeners = {
+    [EventType in EventTypes]: CallbackListener<EventType>[];
+};
+export declare class PlayerEmitter {
+    listeners: Listeners;
+    addEventListener<Q extends EventTypes>(name: Q, callback: CallbackListener<Q>): void;
+    removeEventListener<Q extends EventTypes>(name: Q, callback: CallbackListener<Q>): void;
+    private dispatchEvent;
     dispatchSeek(frame: number): void;
@@ -26,4 +36,5 @@ dispatchPause(): void;
     dispatchError(error: Error): void;
+    dispatchTimeUpdate(event: TimeUpdateEventPayload): void;
 }
 export {};
 //# sourceMappingURL=event-emitter.d.ts.map

dist/event-emitter.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.PlayerEmitter = void 0;
-require("./event-target-polyfill");
-class PlayerEmitter extends EventTarget {
+class PlayerEmitter {
+    constructor() {
+        this.listeners = {
+            ended: [],
+            error: [],
+            pause: [],
+            play: [],
+            seeked: [],
+            timeupdate: [],
+        };
+    }
+    addEventListener(name, callback) {
+        this.listeners[name].push(callback);
+    }
+    removeEventListener(name, callback) {
+        this.listeners[name] = this.listeners[name].filter((l) => l !== callback);
+    }
+    dispatchEvent(dispatchName, context) {
+        this.listeners[dispatchName].forEach((callback) => {
+            callback({ detail: context });
+        });
+    }
     dispatchSeek(frame) {
-        this.dispatchEvent(new CustomEvent('seeked', {
-            detail: {
-                frame,
-            },
-        }));
+        this.dispatchEvent('seeked', {
+            frame,
+        });
     }
     dispatchPause() {
-        this.dispatchEvent(new CustomEvent('pause'));
+        this.dispatchEvent('pause', undefined);
     }
     dispatchPlay() {
-        this.dispatchEvent(new CustomEvent('play'));
+        this.dispatchEvent('play', undefined);
     }
     dispatchEnded() {
-        this.dispatchEvent(new CustomEvent('ended'));
+        this.dispatchEvent('ended', undefined);
     }
     dispatchError(error) {
-        this.dispatchEvent(new CustomEvent('error', {
-            detail: {
-                error,
-            },
-        }));
+        this.dispatchEvent('error', {
+            error,
+        });
     }
+    dispatchTimeUpdate(event) {
+        this.dispatchEvent('timeupdate', event);
+    }
 }
 exports.PlayerEmitter = PlayerEmitter;
 //# sourceMappingURL=event-emitter.js.map

dist/icons.d.ts

 import React from 'react';
+export declare const ICON_SIZE = 25;
 export declare const PlayIcon: React.FC;
@@ -7,2 +8,4 @@ export declare const PauseIcon: React.FC;
 }>;
+export declare const VolumeOffIcon: React.FC;
+export declare const VolumeOnIcon: React.FC;
 //# sourceMappingURL=icons.d.ts.map

dist/icons.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.FullscreenIcon = exports.PauseIcon = exports.PlayIcon = void 0;
+exports.VolumeOnIcon = exports.VolumeOffIcon = exports.FullscreenIcon = exports.PauseIcon = exports.PlayIcon = exports.ICON_SIZE = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const size = 25;
+exports.ICON_SIZE = 25;
 const fullscreenIconSize = 16;
@@ -11,7 +11,7 @@ const rotate = {
 const PlayIcon = () => {
-    return (jsx_runtime_1.jsx("svg", Object.assign({ width: size, height: size, viewBox: "-100 -100 400 400", style: rotate }, { children: 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" }, void 0) }), void 0));
+    return (jsx_runtime_1.jsx("svg", Object.assign({ width: exports.ICON_SIZE, height: exports.ICON_SIZE, viewBox: "-100 -100 400 400", style: rotate }, { children: 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" }, void 0) }), void 0));
 };
 exports.PlayIcon = PlayIcon;
 const PauseIcon = () => {
-    return (jsx_runtime_1.jsxs("svg", Object.assign({ viewBox: "0 0 100 100", width: size, height: size }, { children: [jsx_runtime_1.jsx("rect", { x: "25", y: "20", width: "20", height: "60", fill: "#fff", ry: "5", rx: "5" }, void 0),
+    return (jsx_runtime_1.jsxs("svg", Object.assign({ viewBox: "0 0 100 100", width: exports.ICON_SIZE, height: exports.ICON_SIZE }, { children: [jsx_runtime_1.jsx("rect", { x: "25", y: "20", width: "20", height: "60", fill: "#fff", ry: "5", rx: "5" }, void 0),
             jsx_runtime_1.jsx("rect", { x: "55", y: "20", width: "20", height: "60", fill: "#fff", ry: "5", rx: "5" }, void 0)] }), void 0));
@@ -48,2 +48,10 @@ };
 exports.FullscreenIcon = FullscreenIcon;
+const VolumeOffIcon = () => {
+    return (jsx_runtime_1.jsx("svg", Object.assign({ width: exports.ICON_SIZE, height: exports.ICON_SIZE, viewBox: "0 0 24 24" }, { children: jsx_runtime_1.jsx("path", { d: "M3.63 3.63a.996.996 0 000 1.41L7.29 8.7 7 9H4c-.55 0-1 .45-1 1v4c0 .55.45 1 1 1h3l3.29 3.29c.63.63 1.71.18 1.71-.71v-4.17l4.18 4.18c-.49.37-1.02.68-1.6.91-.36.15-.58.53-.58.92 0 .72.73 1.18 1.39.91.8-.33 1.55-.77 2.22-1.31l1.34 1.34a.996.996 0 101.41-1.41L5.05 3.63c-.39-.39-1.02-.39-1.42 0zM19 12c0 .82-.15 1.61-.41 2.34l1.53 1.53c.56-1.17.88-2.48.88-3.87 0-3.83-2.4-7.11-5.78-8.4-.59-.23-1.22.23-1.22.86v.19c0 .38.25.71.61.85C17.18 6.54 19 9.06 19 12zm-8.71-6.29l-.17.17L12 7.76V6.41c0-.89-1.08-1.33-1.71-.7zM16.5 12A4.5 4.5 0 0014 7.97v1.79l2.48 2.48c.01-.08.02-.16.02-.24z", fill: "#fff" }, void 0) }), void 0));
+};
+exports.VolumeOffIcon = VolumeOffIcon;
+const VolumeOnIcon = () => {
+    return (jsx_runtime_1.jsx("svg", Object.assign({ width: exports.ICON_SIZE, height: exports.ICON_SIZE, viewBox: "0 0 24 24" }, { children: jsx_runtime_1.jsx("path", { d: "M3 10v4c0 .55.45 1 1 1h3l3.29 3.29c.63.63 1.71.18 1.71-.71V6.41c0-.89-1.08-1.34-1.71-.71L7 9H4c-.55 0-1 .45-1 1zm13.5 2A4.5 4.5 0 0014 7.97v8.05c1.48-.73 2.5-2.25 2.5-4.02zM14 4.45v.2c0 .38.25.71.6.85C17.18 6.53 19 9.06 19 12s-1.82 5.47-4.4 6.5c-.36.14-.6.47-.6.85v.2c0 .63.63 1.07 1.21.85C18.6 19.11 21 15.84 21 12s-2.4-7.11-5.79-8.4c-.58-.23-1.21.22-1.21.85z", fill: "#fff" }, void 0) }), void 0));
+};
+exports.VolumeOnIcon = VolumeOnIcon;
 //# sourceMappingURL=icons.js.map

dist/index.d.ts

@@ -36,3 +36,4 @@ import { PlayerEmitter } from './event-emitter';
     };
+    useHoverState: (ref: import("react").RefObject<HTMLDivElement>) => boolean;
 };
 //# sourceMappingURL=index.d.ts.map

dist/index.js

@@ -7,2 +7,3 @@ "use strict";
 const event_emitter_1 = require("./event-emitter");
+const use_hover_state_1 = require("./use-hover-state");
 const use_playback_1 = require("./use-playback");
@@ -20,3 +21,4 @@ const use_player_1 = require("./use-player");
     calculateScale: calculate_scale_1.calculateScale,
+    useHoverState: use_hover_state_1.useHoverState,
 };
 //# sourceMappingURL=index.js.map

dist/player-methods.d.ts

@@ -1,2 +0,2 @@
-import { PlayerEventTarget } from './event-emitter';
+import { PlayerEmitter } from './event-emitter';
 export declare type PlayerMethods = {
@@ -11,4 +11,9 @@ play: () => void;
     isFullscreen: () => void;
+    setVolume: (num: number) => void;
+    getVolume: () => number;
+    isMuted: () => boolean;
+    mute: () => void;
+    unmute: () => void;
 };
-export declare type PlayerRef = PlayerEventTarget & PlayerMethods;
+export declare type PlayerRef = PlayerEmitter & PlayerMethods;
 //# sourceMappingURL=player-methods.d.ts.map

dist/Player.d.ts

@@ -14,2 +14,3 @@ import React, { MutableRefObject } from 'react';
     fps: number;
+    showVolumeControls?: boolean;
     controls?: boolean;
@@ -21,5 +22,5 @@ style?: React.CSSProperties;
     clickToPlay?: boolean;
-    inputProps?: unknown;
+    doubleClickToFullscreen?: boolean;
 } & PropsIfHasProps<T> & CompProps<T>;
-export declare const PlayerFn: <T>({ durationInFrames, compositionHeight: height, compositionWidth: width, fps, controls, style, loop, autoPlay, allowFullscreen, inputProps, clickToPlay, ...componentProps }: PlayerProps<T>, ref: MutableRefObject<PlayerRef>) => JSX.Element;
+export declare const PlayerFn: <T>({ durationInFrames, compositionHeight, compositionWidth, fps, inputProps, style, controls, loop, autoPlay, showVolumeControls, allowFullscreen, clickToPlay, doubleClickToFullscreen, ...componentProps }: PlayerProps<T>, ref: MutableRefObject<PlayerRef>) => JSX.Element;
 declare module 'react' {
@@ -26,0 +27,0 @@ function forwardRef<T, P = {}>(render: (props: P, ref: React.MutableRefObject<T>) => React.ReactElement | null): (props: P & React.RefAttributes<T>) => React.ReactElement | null;

dist/Player.js

@@ -14,4 +14,10 @@ "use strict";
 const PlayerUI_1 = __importDefault(require("./PlayerUI"));
+const volume_persistance_1 = require("./volume-persistance");
 remotion_1.Internals.CSSUtils.injectCSS(remotion_1.Internals.CSSUtils.makeDefaultCSS(`.${player_css_classname_1.PLAYER_CSS_CLASSNAME}`));
-const PlayerFn = ({ durationInFrames, compositionHeight: height, compositionWidth: width, fps, controls, style, loop, autoPlay, allowFullscreen = true, inputProps, clickToPlay = true, ...componentProps }, ref) => {
+const PlayerFn = ({ durationInFrames, compositionHeight, compositionWidth, fps, inputProps, style, controls = false, loop = false, autoPlay = false, showVolumeControls = true, allowFullscreen = true, clickToPlay, doubleClickToFullscreen = false, ...componentProps }, ref) => {
+    react_1.useLayoutEffect(() => {
+        if (typeof window !== 'undefined') {
+            window.remotion_isPlayer = true;
+        }
+    }, []);
     const component = remotion_1.Internals.useLazyComponent(componentProps);
@@ -23,2 +29,42 @@ const [frame, setFrame] = react_1.useState(0);
     const rootRef = react_1.useRef(null);
+    const [mediaMuted, setMediaMuted] = react_1.useState(false);
+    const [mediaVolume, setMediaVolume] = react_1.useState(volume_persistance_1.getPreferredVolume());
+    if (typeof compositionHeight !== 'number') {
+        throw new TypeError(`'compositionHeight' must be a number but got '${typeof compositionHeight}' instead`);
+    }
+    if (typeof compositionWidth !== 'number') {
+        throw new TypeError(`'compositionWidth' must be a number but got '${typeof compositionWidth}' instead`);
+    }
+    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, 'of the <Player/> component');
+    remotion_1.Internals.validateFps(fps, 'as a prop of the <Player/> component');
+    if (typeof controls !== 'boolean' && typeof controls !== 'undefined') {
+        throw new TypeError(`'controls' must be a boolean or undefined but got '${typeof controls}' instead`);
+    }
+    if (typeof autoPlay !== 'boolean' && typeof autoPlay !== 'undefined') {
+        throw new TypeError(`'autoPlay' must be a boolean or undefined but got '${typeof autoPlay}' instead`);
+    }
+    if (typeof loop !== 'boolean' && typeof loop !== 'undefined') {
+        throw new TypeError(`'loop' must be a boolean or undefined but got '${typeof loop}' instead`);
+    }
+    if (typeof doubleClickToFullscreen !== 'boolean' &&
+        typeof doubleClickToFullscreen !== 'undefined') {
+        throw new TypeError(`'doubleClickToFullscreen' must be a boolean or undefined but got '${typeof doubleClickToFullscreen}' instead`);
+    }
+    if (typeof showVolumeControls !== 'boolean' &&
+        typeof showVolumeControls !== 'undefined') {
+        throw new TypeError(`'showVolumeControls' must be a boolean or undefined but got '${typeof showVolumeControls}' instead`);
+    }
+    if (typeof allowFullscreen !== 'boolean' &&
+        typeof allowFullscreen !== 'undefined') {
+        throw new TypeError(`'allowFullscreen' must be a boolean or undefined but got '${typeof allowFullscreen}' instead`);
+    }
+    if (typeof clickToPlay !== 'boolean' && typeof clickToPlay !== 'undefined') {
+        throw new TypeError(`'clickToPlay' must be a boolean or undefined but got '${typeof clickToPlay}' instead`);
+    }
+    const setMediaVolumeAndPersist = react_1.useCallback((vol) => {
+        setMediaVolume(vol);
+        volume_persistance_1.persistVolume(vol);
+    }, []);
     react_1.useImperativeHandle(ref, () => rootRef.current);
@@ -39,2 +85,14 @@ const timelineContextValue = react_1.useMemo(() => {
     }, [setFrame]);
+    const mediaVolumeContextValue = react_1.useMemo(() => {
+        return {
+            mediaMuted,
+            mediaVolume,
+        };
+    }, [mediaMuted, mediaVolume]);
+    const setMediaVolumeContextValue = react_1.useMemo(() => {
+        return {
+            setMediaMuted,
+            setMediaVolume: setMediaVolumeAndPersist,
+        };
+    }, [setMediaVolumeAndPersist]);
     const compositionManagerContext = react_1.useMemo(() => {
@@ -46,4 +104,4 @@ return {
                     durationInFrames,
-                    height,
-                    width,
+                    height: compositionHeight,
+                    width: compositionWidth,
                     fps,
@@ -66,4 +124,16 @@ id: 'player-comp',
         };
-    }, [component, durationInFrames, height, width, fps, inputProps]);
-    return (jsx_runtime_1.jsx(remotion_1.Internals.Timeline.TimelineContext.Provider, Object.assign({ value: timelineContextValue }, { children: jsx_runtime_1.jsx(remotion_1.Internals.Timeline.SetTimelineContext.Provider, Object.assign({ value: setTimelineContextValue }, { children: jsx_runtime_1.jsx(remotion_1.Internals.CompositionManager.Provider, Object.assign({ value: compositionManagerContext }, { children: jsx_runtime_1.jsx(emitter_context_1.PlayerEventEmitterContext.Provider, Object.assign({ value: emitter }, { children: jsx_runtime_1.jsx(PlayerUI_1.default, { ref: rootRef, autoPlay: Boolean(autoPlay), loop: Boolean(loop), controls: Boolean(controls), style: style, inputProps: inputProps !== null && inputProps !== void 0 ? inputProps : {}, allowFullscreen: Boolean(allowFullscreen), clickToPlay: clickToPlay }, void 0) }), void 0) }), void 0) }), void 0) }), void 0));
+    }, [
+        component,
+        durationInFrames,
+        compositionHeight,
+        compositionWidth,
+        fps,
+        inputProps,
+    ]);
+    const passedInputProps = react_1.useMemo(() => {
+        return inputProps !== null && inputProps !== void 0 ? inputProps : {};
+    }, [inputProps]);
+    return (jsx_runtime_1.jsx(remotion_1.Internals.Timeline.TimelineContext.Provider, Object.assign({ value: timelineContextValue }, { children: jsx_runtime_1.jsx(remotion_1.Internals.Timeline.SetTimelineContext.Provider, Object.assign({ value: setTimelineContextValue }, { children: jsx_runtime_1.jsx(remotion_1.Internals.CompositionManager.Provider, Object.assign({ value: compositionManagerContext }, { children: jsx_runtime_1.jsx(remotion_1.Internals.MediaVolumeContext.Provider, Object.assign({ value: mediaVolumeContextValue }, { children: jsx_runtime_1.jsx(remotion_1.Internals.SetMediaVolumeContext.Provider, Object.assign({ value: setMediaVolumeContextValue }, { children: jsx_runtime_1.jsx(emitter_context_1.PlayerEventEmitterContext.Provider, Object.assign({ value: emitter }, { children: jsx_runtime_1.jsx(PlayerUI_1.default, { ref: rootRef, autoPlay: Boolean(autoPlay), loop: Boolean(loop), controls: Boolean(controls), style: style, inputProps: passedInputProps, allowFullscreen: Boolean(allowFullscreen), clickToPlay: typeof clickToPlay === 'boolean'
+                                    ? clickToPlay
+                                    : Boolean(controls), showVolumeControls: Boolean(showVolumeControls), setMediaVolume: setMediaVolumeAndPersist, mediaVolume: mediaVolume, mediaMuted: mediaMuted, doubleClickToFullscreen: Boolean(doubleClickToFullscreen), setMediaMuted: setMediaMuted }, void 0) }), void 0) }), void 0) }), void 0) }), void 0) }), void 0) }), void 0));
 };
@@ -70,0 +140,0 @@ exports.PlayerFn = PlayerFn;

dist/PlayerControls.d.ts

@@ -7,2 +7,3 @@ import React, { MouseEventHandler } from 'react';
     hovered: boolean;
+    showVolumeControls: boolean;
     player: ReturnType<typeof usePlayer>;
@@ -9,0 +10,0 @@ onFullscreenButtonClick: MouseEventHandler<HTMLButtonElement>;

dist/PlayerControls.js

@@ -9,2 +9,3 @@ "use strict";
 const icons_1 = require("./icons");
+const MediaVolumeSlider_1 = require("./MediaVolumeSlider");
 const PlayerSeekBar_1 = require("./PlayerSeekBar");
@@ -66,3 +67,3 @@ const browser_supports_fullscreen_1 = require("./utils/browser-supports-fullscreen");
 };
-const Controls = ({ durationInFrames, hovered, isFullscreen, fps, player, onFullscreenButtonClick, allowFullscreen, onExitFullscreenButtonClick, }) => {
+const Controls = ({ durationInFrames, hovered, isFullscreen, fps, player, showVolumeControls, onFullscreenButtonClick, allowFullscreen, onExitFullscreenButtonClick, }) => {
     const frame = remotion_1.Internals.Timeline.useTimelinePosition();
@@ -78,4 +79,7 @@ const containerCss = react_1.useMemo(() => {
     return (jsx_runtime_1.jsxs("div", Object.assign({ style: containerCss }, { children: [jsx_runtime_1.jsxs("div", Object.assign({ style: controlsRow }, { children: [jsx_runtime_1.jsxs("div", Object.assign({ style: leftPartStyle }, { children: [jsx_runtime_1.jsx("button", Object.assign({ type: "button", style: buttonStyle, onClick: player.playing ? player.pause : player.play, "aria-label": player.playing ? 'Pause video' : 'Play video', title: player.playing ? 'Pause video' : 'Play video' }, { children: player.playing ? jsx_runtime_1.jsx(icons_1.PauseIcon, {}, void 0) : jsx_runtime_1.jsx(icons_1.PlayIcon, {}, void 0) }), void 0),
+                            showVolumeControls ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [jsx_runtime_1.jsx("div", { style: xSpacer }, void 0),
+                                    jsx_runtime_1.jsx(MediaVolumeSlider_1.MediaVolumeSlider, {}, void 0)] }, void 0)) : null,
                             jsx_runtime_1.jsx("div", { style: xSpacer }, void 0),
-                            jsx_runtime_1.jsxs("div", Object.assign({ style: timeLabel }, { children: [format_time_1.formatTime(frame / fps), " / ", format_time_1.formatTime(durationInFrames / fps)] }), void 0)] }), void 0),
+                            jsx_runtime_1.jsxs("div", Object.assign({ style: timeLabel }, { children: [format_time_1.formatTime(frame / fps), " / ", format_time_1.formatTime(durationInFrames / fps)] }), void 0),
+                            jsx_runtime_1.jsx("div", { style: xSpacer }, void 0)] }), void 0),
                     jsx_runtime_1.jsx("div", { style: flex1 }, void 0),
@@ -82,0 +86,0 @@ browser_supports_fullscreen_1.browserSupportsFullscreen && allowFullscreen ? (jsx_runtime_1.jsx("div", Object.assign({ style: fullscreen }, { children: jsx_runtime_1.jsx("button", Object.assign({ type: "button", "aria-label": isFullscreen ? 'Exit fullscreen' : 'Enter Fullscreen', title: isFullscreen ? 'Exit fullscreen' : 'Enter Fullscreen', style: buttonStyle, onClick: isFullscreen

dist/PlayerSeekBar.js

@@ -102,3 +102,3 @@ "use strict";
             backgroundColor: 'white',
-            left: Math.max(-KNOB_SIZE / 2, (frame / (durationInFrames - 1)) * ((_a = size === null || size === void 0 ? void 0 : size.width) !== null && _a !== void 0 ? _a : 0) - KNOB_SIZE / 2),
+            left: Math.max(0, (frame / (durationInFrames - 1)) * ((_a = size === null || size === void 0 ? void 0 : size.width) !== null && _a !== void 0 ? _a : 0) - KNOB_SIZE / 2),
             boxShadow: '0 0 2px black',
@@ -112,3 +112,3 @@ opacity: Number(barHovered),
             backgroundColor: 'rgba(255, 255, 255, 1)',
-            width: (frame / durationInFrames) * 100 + '%',
+            width: (frame / (durationInFrames - 1)) * 100 + '%',
             borderRadius: BAR_HEIGHT / 2,
@@ -115,0 +115,0 @@ };

dist/PlayerUI.d.ts

@@ -9,4 +9,10 @@ import React from 'react';
     inputProps: unknown;
+    showVolumeControls: boolean;
+    mediaMuted: boolean;
     style?: React.CSSProperties | undefined;
     clickToPlay: boolean;
+    doubleClickToFullscreen: boolean;
+    setMediaVolume: (v: number) => void;
+    setMediaMuted: (v: boolean) => void;
+    mediaVolume: number;
 } & {
@@ -13,0 +19,0 @@ children?: React.ReactNode;

dist/PlayerUI.js

@@ -16,4 +16,5 @@ "use strict";
 const is_node_1 = require("./utils/is-node");
+const use_click_prevention_on_double_click_1 = require("./utils/use-click-prevention-on-double-click");
 const use_element_size_1 = require("./utils/use-element-size");
-const PlayerUI = ({ controls, style, loop, autoPlay, allowFullscreen, inputProps, clickToPlay }, ref) => {
+const PlayerUI = ({ controls, style, loop, autoPlay, allowFullscreen, inputProps, clickToPlay, showVolumeControls, mediaVolume, mediaMuted, doubleClickToFullscreen, setMediaMuted, setMediaVolume, }, ref) => {
     var _a, _b;
@@ -101,2 +102,27 @@ const config = remotion_1.Internals.useUnsafeVideoConfig();
             exitFullscreen,
+            getVolume: () => {
+                if (mediaMuted) {
+                    return 0;
+                }
+                return mediaVolume;
+            },
+            setVolume: (vol) => {
+                if (typeof vol !== 'number') {
+                    throw new TypeError(`setVolume() takes a number, got value of type ${typeof vol}`);
+                }
+                if (isNaN(vol)) {
+                    throw new TypeError(`setVolume() got a number that is NaN. Volume must be between 0 and 1.`);
+                }
+                if (vol < 0 || vol > 1) {
+                    throw new TypeError(`setVolume() got a number that is out of range. Must be between 0 and 1, got ${typeof vol}`);
+                }
+                setMediaVolume(vol);
+            },
+            isMuted: () => mediaMuted || mediaVolume === 0,
+            mute: () => {
+                setMediaMuted(true);
+            },
+            unmute: () => {
+                setMediaMuted(false);
+            },
         };
@@ -187,2 +213,11 @@ return Object.assign(player.emitter, methods);
     }, [toggle]);
+    const onDoubleClick = react_1.useCallback(() => {
+        if (isFullscreen) {
+            exitFullscreen();
+        }
+        else {
+            requestFullscreen();
+        }
+    }, [exitFullscreen, isFullscreen, requestFullscreen]);
+    const [handleClick, handleDoubleClick] = use_click_prevention_on_double_click_1.useClickPreventionOnDoubleClick(onSingleClick, onDoubleClick, doubleClickToFullscreen);
     react_1.useEffect(() => {
@@ -197,4 +232,4 @@ if (shouldAutoplay) {
     }
-    const content = (jsx_runtime_1.jsxs("div", Object.assign({ ref: container, style: outerStyle }, { children: [jsx_runtime_1.jsx("div", Object.assign({ style: outer, onClick: clickToPlay ? onSingleClick : undefined }, { children: jsx_runtime_1.jsx("div", Object.assign({ style: containerStyle, className: player_css_classname_1.PLAYER_CSS_CLASSNAME }, { children: VideoComponent ? (jsx_runtime_1.jsx(error_boundary_1.ErrorBoundary, Object.assign({ onError: onError }, { children: jsx_runtime_1.jsx(VideoComponent, Object.assign({}, ((_a = video === null || video === void 0 ? void 0 : video.props) !== null && _a !== void 0 ? _a : {}), ((_b = inputProps) !== null && _b !== void 0 ? _b : {})), void 0) }), void 0)) : null }), void 0) }), void 0),
-            controls ? (jsx_runtime_1.jsx(PlayerControls_1.Controls, { fps: config.fps, durationInFrames: config.durationInFrames, hovered: hovered, player: player, onFullscreenButtonClick: onFullscreenButtonClick, isFullscreen: isFullscreen, allowFullscreen: allowFullscreen, onExitFullscreenButtonClick: onExitFullscreenButtonClick }, void 0)) : null] }), void 0));
+    const content = (jsx_runtime_1.jsxs("div", Object.assign({ ref: container, style: outerStyle }, { children: [jsx_runtime_1.jsx("div", Object.assign({ style: outer, onClick: clickToPlay ? handleClick : undefined, onDoubleClick: doubleClickToFullscreen ? handleDoubleClick : undefined }, { children: jsx_runtime_1.jsx("div", Object.assign({ style: containerStyle, className: player_css_classname_1.PLAYER_CSS_CLASSNAME }, { children: VideoComponent ? (jsx_runtime_1.jsx(error_boundary_1.ErrorBoundary, Object.assign({ onError: onError }, { children: jsx_runtime_1.jsx(VideoComponent, Object.assign({}, ((_a = video === null || video === void 0 ? void 0 : video.props) !== null && _a !== void 0 ? _a : {}), ((_b = inputProps) !== null && _b !== void 0 ? _b : {})), void 0) }), void 0)) : null }), void 0) }), void 0),
+            controls ? (jsx_runtime_1.jsx(PlayerControls_1.Controls, { fps: config.fps, durationInFrames: config.durationInFrames, hovered: hovered, player: player, onFullscreenButtonClick: onFullscreenButtonClick, isFullscreen: isFullscreen, allowFullscreen: allowFullscreen, showVolumeControls: showVolumeControls, onExitFullscreenButtonClick: onExitFullscreenButtonClick }, void 0)) : null] }), void 0));
     // Don't render suspense on Node.js
@@ -201,0 +236,0 @@ if (is_node_1.IS_NODE) {

dist/use-playback.js

@@ -14,2 +14,3 @@ "use strict";
     frameRef.current = frame;
+    const lastTimeUpdateEvent = react_1.useRef(null);
     react_1.useEffect(() => {
@@ -53,5 +54,15 @@ if (!config) {
         };
-    }, [config, loop, pause, playing, setFrame]);
+    }, [config, loop, pause, playing, setFrame, emitter]);
+    react_1.useEffect(() => {
+        const interval = setInterval(() => {
+            if (lastTimeUpdateEvent.current === frameRef.current) {
+                return;
+            }
+            emitter.dispatchTimeUpdate({ frame: frameRef.current });
+            lastTimeUpdateEvent.current = frameRef.current;
+        }, 250);
+        return () => clearInterval(interval);
+    }, [emitter]);
 };
 exports.usePlayback = usePlayback;
 //# sourceMappingURL=use-playback.js.map

package.json

 {
 	"name": "@remotion/player",
-	"version": "2.2.0-alpha.fedc7825",
+	"version": "2.2.0",
 	"description": "Remotion Player",
@@ -14,3 +14,3 @@ "main": "dist/index.js",
 	"repository": {
-		"url": "https://github.com/JonnyBurger/remotion"
+		"url": "https://github.com/remotion-dev/remotion"
 	},
@@ -21,5 +21,5 @@ "files": [
 	],
-	"author": "Jonny Burger <[e-mail]>",
+	"author": "Jonny Burger <[e-mail]>",
 	"maintainers": [
-		"Jonny Burger <[e-mail]>",
+		"Jonny Burger <[e-mail]>",
 		"Shankhadeep Dey <[e-mail]>"
@@ -29,3 +29,3 @@ ],
 	"dependencies": {
-		"remotion": "2.2.0-alpha.fedc7825"
+		"remotion": "^2.2.0"
 	},
@@ -41,3 +41,3 @@ "peerDependencies": {
 		"@types/node": "^14.14.14",
-		"@types/react": "^17.0.0",
+		"@types/react": "17.0.8",
 		"@types/react-dom": "^17.0.0",
@@ -44,0 +44,0 @@ "eslint": "^7.4.0",

README.md

 ### Remotion Player
 
+[![NPM Version](http://img.shields.io/npm/v/@remotion/player.svg?style=flat)](https://www.npmjs.org/package/@remotion/player)
+[![NPM Downloads](https://img.shields.io/npm/dm/@remotion/player.svg?style=flat)](https://npmcharts.com/compare/@remotion/player?minimal=true)
+[![Install Size](https://packagephobia.now.sh/badge?p=@remotion/player)](https://packagephobia.now.sh/result?p=@remotion/player)
+
 This package allows you to include a Remotion video in your React app.
 Full documentation can be found under http://remotion.dev/docs/player.

New alerts

No repository

Supply chain risk

Package does not have a linked source code repository. Without this field, a package will have no reference to the location of the source code use to generate the package.

Found 1 instance in 1 package

Fixed alerts

No repository

Supply chain risk

Package does not have a linked source code repository. Without this field, a package will have no reference to the location of the source code use to generate the package.

Found 1 instance in 1 package

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

144436

increased by32.94%

Number of package files

130

increased by27.45%

Lines of code

1860

increased by29.71%

Number of low quality alerts

1

decreased by-50%

Number of lines in readme file

9

increased by80%

Dependency changes

• + Addedremotion@2.6.16(transitive)

• - Removedjs-tokens@4.0.0(transitive)

• - Removedloose-envify@1.4.0(transitive)

• - Removedobject-assign@4.1.1(transitive)

• - Removedreact@17.0.2(transitive)

• - Removedreact-dom@17.0.2(transitive)

• - [e-mail]7825(transitive)

• - Removedscheduler@0.20.2(transitive)

• Updatedremotion@^2.2.0