@remotion/player - npm Package Compare versions

Comparing version 2.2.0-alpha.83b2280c to 2.2.0-alpha.c846c772

dist/icons.d.ts

 import React from 'react';
+export declare const ICON_SIZE = 25;
 export declare const PlayIcon: React.FC;
 export declare const PauseIcon: React.FC;
-export declare const FullscreenIcon: React.FC;
+export declare const FullscreenIcon: React.FC<{
+    minimized: boolean;
+}>;
+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;
 const rotate = {
@@ -10,15 +11,46 @@ transform: `rotate(90deg)`,
 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("g", Object.assign({ stroke: "#fff", strokeWidth: "100", strokeLinejoin: "round" }, { children: jsx_runtime_1.jsx("path", { fill: "#fff", 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) }), 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));
 };
 exports.PauseIcon = PauseIcon;
-const FullscreenIcon = () => {
-    return (jsx_runtime_1.jsxs("svg", Object.assign({ height: size, viewBox: "0 0 24 24", width: size }, { children: [jsx_runtime_1.jsx("path", { d: "M0 0h24v24H0z", fill: "none" }, void 0),
-            jsx_runtime_1.jsx("path", { d: "M7 14H5v5h5v-2H7v-3zm-2-4h2V7h3V5H5v5zm12 7h-3v2h5v-5h-2v3zM14 5v2h3v3h2V5h-5z", fill: "#fff" }, void 0)] }), void 0));
+const FullscreenIcon = ({ minimized }) => {
+    const strokeWidth = 6;
+    const viewSize = 32;
+    const out = minimized ? strokeWidth / 2 : 0;
+    const middleInset = minimized ? strokeWidth / 2 : strokeWidth * 1.6;
+    const inset = minimized ? strokeWidth * 2 : strokeWidth * 1.6;
+    return (jsx_runtime_1.jsxs("svg", Object.assign({ viewBox: `0 0 ${viewSize} ${viewSize}`, height: fullscreenIconSize, width: fullscreenIconSize }, { children: [jsx_runtime_1.jsx("path", { d: `
+				M ${out} ${inset}
+				L ${middleInset} ${middleInset}
+				L ${inset} ${out}
+				`, stroke: "#fff", strokeWidth: strokeWidth, fill: "none" }, void 0),
+            jsx_runtime_1.jsx("path", { d: `
+				M ${viewSize - out} ${inset}
+				L ${viewSize - middleInset} ${middleInset}
+				L ${viewSize - inset} ${out}
+				`, stroke: "#fff", strokeWidth: strokeWidth, fill: "none" }, void 0),
+            jsx_runtime_1.jsx("path", { d: `
+				M ${out} ${viewSize - inset}
+				L ${middleInset} ${viewSize - middleInset}
+				L ${inset} ${viewSize - out}
+				`, stroke: "#fff", strokeWidth: strokeWidth, fill: "none" }, void 0),
+            jsx_runtime_1.jsx("path", { d: `
+				M ${viewSize - out} ${viewSize - inset}
+				L ${viewSize - middleInset} ${viewSize - middleInset}
+				L ${viewSize - inset} ${viewSize - out}
+				`, stroke: "#fff", strokeWidth: strokeWidth, fill: "none" }, void 0)] }), void 0));
 };
 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

@@ -11,4 +11,9 @@ import { PlayerEventTarget } from './event-emitter';
     isFullscreen: () => void;
+    setVolume: (num: number) => void;
+    getVolume: () => number;
+    isMuted: () => boolean;
+    mute: () => void;
+    unmute: () => void;
 };
 export declare type PlayerRef = PlayerEventTarget & 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;
@@ -23,3 +24,3 @@ style?: React.CSSProperties;
 } & 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, ...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,5 @@ "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 = true, ...componentProps }, ref) => {
     const component = remotion_1.Internals.useLazyComponent(componentProps);
@@ -23,2 +24,38 @@ 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');
+    remotion_1.Internals.validateDimension(compositionWidth, 'compositionWidth');
+    remotion_1.Internals.validateDurationInFrames(durationInFrames);
+    remotion_1.Internals.validateFps(fps);
+    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 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 +76,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 +95,4 @@ return {
                     durationInFrames,
-                    height,
-                    width,
+                    height: compositionHeight,
+                    width: compositionWidth,
                     fps,
@@ -66,4 +115,14 @@ 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: clickToPlay, showVolumeControls: showVolumeControls, setMediaVolume: setMediaVolumeAndPersist, mediaVolume: mediaVolume, mediaMuted: mediaMuted, setMediaMuted: setMediaMuted }, void 0) }), void 0) }), void 0) }), void 0) }), void 0) }), void 0) }), void 0));
 };
@@ -70,0 +129,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");
@@ -17,3 +18,3 @@ const browser_supports_fullscreen_1 = require("./utils/browser-supports-fullscreen");
     width: '100%',
-    paddingTop: 40,
+    paddingTop: 10,
     paddingBottom: 10,
@@ -35,2 +36,3 @@ background: 'linear-gradient(transparent, rgba(0, 0, 0, 0.4))',
     marginBottom: 0,
+    marginTop: 0,
     height: 25,
@@ -43,3 +45,3 @@ };
     alignItems: 'center',
-    justifyContent: 'space-between',
+    justifyContent: 'center',
     userSelect: 'none',
@@ -59,5 +61,6 @@ };
 };
-const fullscreen = {
-    justifyItems: 'flex-end',
+const flex1 = {
+    flex: 1,
 };
+const fullscreen = {};
 const timeLabel = {
@@ -68,3 +71,3 @@ color: 'white',
 };
-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();
@@ -80,7 +83,11 @@ 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),
                     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
                                 ? onExitFullscreenButtonClick
-                                : onFullscreenButtonClick }, { children: jsx_runtime_1.jsx(icons_1.FullscreenIcon, {}, void 0) }), void 0) }), void 0)) : null] }), void 0),
+                                : onFullscreenButtonClick }, { children: jsx_runtime_1.jsx(icons_1.FullscreenIcon, { minimized: !isFullscreen }, void 0) }), void 0) }), void 0)) : null] }), void 0),
             jsx_runtime_1.jsx("div", { style: ySpacer }, void 0),
@@ -87,0 +94,0 @@ jsx_runtime_1.jsx(PlayerSeekBar_1.PlayerSeekBar, { durationInFrames: durationInFrames }, void 0)] }), void 0));

dist/PlayerSeekBar.js

@@ -102,3 +102,3 @@ "use strict";
             backgroundColor: 'white',
-            left: (frame / durationInFrames) * (((_a = size === null || size === void 0 ? void 0 : size.width) !== null && _a !== void 0 ? _a : 0) - KNOB_SIZE),
+            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,9 @@ import React from 'react';
     inputProps: unknown;
+    showVolumeControls: boolean;
+    mediaMuted: boolean;
     style?: React.CSSProperties | undefined;
     clickToPlay: boolean;
+    setMediaVolume: (v: number) => void;
+    setMediaMuted: (v: boolean) => void;
+    mediaVolume: number;
 } & {
@@ -13,0 +18,0 @@ children?: React.ReactNode;

dist/PlayerUI.js

@@ -17,3 +17,3 @@ "use strict";
 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, setMediaMuted, setMediaVolume, }, ref) => {
     var _a, _b;
@@ -101,2 +101,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);
+            },
         };
@@ -196,4 +221,4 @@ return Object.assign(player.emitter, methods);
     }
-    const content = (jsx_runtime_1.jsxs("div", Object.assign({ ref: container, style: outerStyle, onClick: clickToPlay ? onSingleClick : undefined }, { children: [jsx_runtime_1.jsx("div", Object.assign({ style: outer }, { 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 ? 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, showVolumeControls: showVolumeControls, onExitFullscreenButtonClick: onExitFullscreenButtonClick }, void 0)) : null] }), void 0));
     // Don't render suspense on Node.js
@@ -200,0 +225,0 @@ if (is_node_1.IS_NODE) {

dist/utils/use-element-size.js

@@ -13,3 +13,3 @@ "use strict";
             const newSize = entries[0].target.getClientRects();
-            if (!newSize) {
+            if (!newSize || !newSize[0]) {
                 setSize(null);
@@ -16,0 +16,0 @@ return;

package.json

 {
 	"name": "@remotion/player",
-	"version": "2.2.0-alpha.83b2280c",
+	"version": "2.2.0-alpha.c846c772",
 	"description": "Remotion Player",
@@ -27,3 +27,3 @@ "main": "dist/index.js",
 	"dependencies": {
-		"remotion": "2.2.0-alpha.83b2280c"
+		"remotion": "2.2.0-alpha.c846c772"
 	},
@@ -30,0 +30,0 @@ "peerDependencies": {

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

128643

increased by38.12%

Number of package files

110

increased by17.02%

Lines of code

1660

increased by33.87%

Dependency changes

• + Addedremotion@2.2.0-alpha.c846c772(transitive)

• - Removedremotion@2.2.0-alpha.83b2280c(transitive)

• Updatedremotion@2.2.0-alpha.c846c772