@remotion/player - npm Package Compare versions

Comparing version 4.0.187 to 4.0.188

dist/cjs/index.d.ts

 /// <reference types="react" />
 import type { CallbackListener, PlayerEventTypes } from './event-emitter.js';
 import { PlayerEmitter } from './event-emitter.js';
+export type { RenderMuteButton } from './MediaVolumeSlider.js';
 export type { PlayerMethods, PlayerRef, ThumbnailMethods, ThumbnailRef, } from './player-methods.js';
@@ -9,2 +10,3 @@ export { Player } from './Player.js';
 export type { ErrorFallback, RenderLoading, RenderPoster } from './PlayerUI.js';
+export type { RenderVolumeSlider } from './render-volume-slider.js';
 export { Thumbnail } from './Thumbnail.js';
@@ -11,0 +13,0 @@ export type { ThumbnailProps, ThumbnailPropsWithoutZod } from './Thumbnail.js';

dist/cjs/MediaVolumeSlider.d.ts

 import React from 'react';
+import type { RenderVolumeSlider } from './render-volume-slider.js';
 export declare const VOLUME_SLIDER_WIDTH = 100;
+export type RenderMuteButton = (props: {
+    muted: boolean;
+    volume: number;
+}) => React.ReactNode;
 export declare const MediaVolumeSlider: React.FC<{
-    displayVerticalVolumeSlider: Boolean;
+    readonly displayVerticalVolumeSlider: boolean;
+    readonly renderMuteButton: RenderMuteButton | null;
+    readonly renderVolumeSlider: RenderVolumeSlider | null;
 }>;

dist/cjs/MediaVolumeSlider.js

 "use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.MediaVolumeSlider = exports.VOLUME_SLIDER_WIDTH = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = __importStar(require("react"));
+const react_1 = require("react");
 const remotion_1 = require("remotion");
 const icons_js_1 = require("./icons.js");
+const render_volume_slider_js_1 = require("./render-volume-slider.js");
 const use_hover_state_js_1 = require("./use-hover-state.js");
-const BAR_HEIGHT = 5;
-const KNOB_SIZE = 12;
 exports.VOLUME_SLIDER_WIDTH = 100;
-const MediaVolumeSlider = ({ displayVerticalVolumeSlider }) => {
+const MediaVolumeSlider = ({ displayVerticalVolumeSlider, renderMuteButton, renderVolumeSlider }) => {
     const [mediaMuted, setMediaMuted] = remotion_1.Internals.useMediaMutedState();
@@ -42,20 +18,11 @@ const [mediaVolume, setMediaVolume] = remotion_1.Internals.useMediaVolumeState();
     const hover = (0, use_hover_state_js_1.useHoverState)(parentDivRef, false);
-    // Need to import it from React to fix React 17 ESM support.
-    const randomId = 
-    // eslint-disable-next-line react-hooks/rules-of-hooks
-    typeof react_1.default.useId === 'undefined' ? 'volume-slider' : react_1.default.useId();
-    const [randomClass] = (0, react_1.useState)(() => `__remotion-volume-slider-${(0, remotion_1.random)(randomId)}`.replace('.', ''));
-    const isMutedOrZero = mediaMuted || mediaVolume === 0;
-    const onVolumeChange = (0, react_1.useCallback)((e) => {
-        setMediaVolume(parseFloat(e.target.value));
-    }, [setMediaVolume]);
-    const onBlur = () => {
+    const onBlur = (0, react_1.useCallback)(() => {
         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) {
+            if (inputRef.current && document.activeElement !== inputRef.current) {
                 setFocused(false);
             }
         }, 10);
-    };
+    }, []);
     const isVolume0 = mediaVolume === 0;
@@ -93,66 +60,32 @@ const onClick = (0, react_1.useCallback)(() => {
     }, []);
-    const sliderContainer = (0, react_1.useMemo)(() => {
-        const paddingLeft = 5;
-        const common = {
-            paddingLeft,
-            height: icons_js_1.ICON_SIZE,
-            width: exports.VOLUME_SLIDER_WIDTH,
-        };
-        if (displayVerticalVolumeSlider) {
-            return {
-                ...common,
-                position: 'absolute',
-                transform: `rotate(-90deg) translateX(${exports.VOLUME_SLIDER_WIDTH / 2 + icons_js_1.ICON_SIZE / 2}px)`,
-            };
-        }
-        return {
-            ...common,
-        };
-    }, [displayVerticalVolumeSlider]);
-    const inputStyle = (0, react_1.useMemo)(() => {
-        const commonStyle = {
-            WebkitAppearance: 'none',
-            backgroundColor: 'rgba(255, 255, 255, 0.5)',
-            borderRadius: BAR_HEIGHT / 2,
-            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 {
-                ...commonStyle,
-                bottom: icons_js_1.ICON_SIZE + exports.VOLUME_SLIDER_WIDTH / 2,
-            };
-        }
-        return commonStyle;
-    }, [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 ((0, jsx_runtime_1.jsxs)("div", { ref: parentDivRef, style: parentDivStyle, children: [(0, jsx_runtime_1.jsx)("style", { 
-                // eslint-disable-next-line react/no-danger
-                dangerouslySetInnerHTML: {
-                    __html: sliderStyle,
-                } }), (0, jsx_runtime_1.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 ? (0, jsx_runtime_1.jsx)(icons_js_1.VolumeOffIcon, {}) : (0, jsx_runtime_1.jsx)(icons_js_1.VolumeOnIcon, {}) }), (focused || hover) && !mediaMuted && !remotion_1.Internals.isIosSafari() ? ((0, jsx_runtime_1.jsx)("div", { style: sliderContainer, children: (0, jsx_runtime_1.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] }));
+    const renderDefaultMuteButton = (0, react_1.useCallback)(({ muted, volume }) => {
+        const isMutedOrZero = muted || volume === 0;
+        return ((0, jsx_runtime_1.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 ? (0, jsx_runtime_1.jsx)(icons_js_1.VolumeOffIcon, {}) : (0, jsx_runtime_1.jsx)(icons_js_1.VolumeOnIcon, {}) }));
+    }, [onBlur, onClick, volumeContainer]);
+    const muteButton = (0, react_1.useMemo)(() => {
+        return renderMuteButton
+            ? renderMuteButton({ muted: mediaMuted, volume: mediaVolume })
+            : renderDefaultMuteButton({ muted: mediaMuted, volume: mediaVolume });
+    }, [mediaMuted, mediaVolume, renderDefaultMuteButton, renderMuteButton]);
+    const volumeSlider = (0, react_1.useMemo)(() => {
+        return (focused || hover) && !mediaMuted && !remotion_1.Internals.isIosSafari()
+            ? (renderVolumeSlider !== null && renderVolumeSlider !== void 0 ? renderVolumeSlider : render_volume_slider_js_1.renderDefaultVolumeSlider)({
+                isVertical: displayVerticalVolumeSlider,
+                volume: mediaVolume,
+                onBlur: () => setFocused(false),
+                inputRef,
+                setVolume: setMediaVolume,
+            })
+            : null;
+    }, [
+        displayVerticalVolumeSlider,
+        focused,
+        hover,
+        mediaMuted,
+        mediaVolume,
+        renderVolumeSlider,
+        setMediaVolume,
+    ]);
+    return ((0, jsx_runtime_1.jsxs)("div", { ref: parentDivRef, style: parentDivStyle, children: [muteButton, volumeSlider] }));
 };
 exports.MediaVolumeSlider = MediaVolumeSlider;

dist/cjs/Player.d.ts

@@ -5,5 +5,7 @@ import type { ComponentType } from 'react';
 import type { AnyZodObject } from 'zod';
+import type { RenderMuteButton } from './MediaVolumeSlider.js';
 import type { RenderFullscreenButton, RenderPlayPauseButton } from './PlayerControls.js';
 import type { PosterFillMode, RenderLoading, RenderPoster } from './PlayerUI.js';
 import type { PlayerRef } from './player-methods.js';
+import type { RenderVolumeSlider } from './render-volume-slider.js';
 import type { PropsIfHasProps } from './utils/props-if-has-props.js';
@@ -44,2 +46,4 @@ export type ErrorFallback = (info: {
     readonly renderFullscreenButton?: RenderFullscreenButton;
+    readonly renderMuteButton?: RenderMuteButton;
+    readonly renderVolumeSlider?: RenderVolumeSlider;
     readonly alwaysShowControls?: boolean;
@@ -46,0 +50,0 @@ readonly schema?: Schema;

dist/cjs/Player.js

@@ -25,3 +25,3 @@ "use strict";
 exports.componentOrNullIfLazy = componentOrNullIfLazy;
-const PlayerFn = ({ durationInFrames, compositionHeight, compositionWidth, fps, inputProps, style, controls = false, loop = false, autoPlay = false, showVolumeControls = true, allowFullscreen = true, clickToPlay, doubleClickToFullscreen = false, spaceKeyToPlayOrPause = true, moveToBeginningWhenEnded = true, numberOfSharedAudioTags = 5, errorFallback = () => '⚠️', playbackRate = 1, renderLoading, className, showPosterWhenUnplayed, showPosterWhenEnded, showPosterWhenPaused, showPosterWhenBuffering, initialFrame, renderPoster, inFrame, outFrame, initiallyShowControls, renderFullscreenButton, renderPlayPauseButton, alwaysShowControls = false, initiallyMuted = false, showPlaybackRateControl = false, posterFillMode = 'player-size', bufferStateDelayInMilliseconds, hideControlsWhenPointerDoesntMove = true, overflowVisible = false, ...componentProps }, ref) => {
+const PlayerFn = ({ durationInFrames, compositionHeight, compositionWidth, fps, inputProps, style, controls = false, loop = false, autoPlay = false, showVolumeControls = true, allowFullscreen = true, clickToPlay, doubleClickToFullscreen = false, spaceKeyToPlayOrPause = true, moveToBeginningWhenEnded = true, numberOfSharedAudioTags = 5, errorFallback = () => '⚠️', playbackRate = 1, renderLoading, className, showPosterWhenUnplayed, showPosterWhenEnded, showPosterWhenPaused, showPosterWhenBuffering, initialFrame, renderPoster, inFrame, outFrame, initiallyShowControls, renderFullscreenButton, renderPlayPauseButton, renderVolumeSlider, alwaysShowControls = false, initiallyMuted = false, showPlaybackRateControl = false, posterFillMode = 'player-size', bufferStateDelayInMilliseconds, hideControlsWhenPointerDoesntMove = true, overflowVisible = false, renderMuteButton, ...componentProps }, ref) => {
     if (typeof window !== 'undefined') {
@@ -144,3 +144,3 @@ // eslint-disable-next-line react-hooks/rules-of-hooks
                             ? clickToPlay
-                            : Boolean(controls), showVolumeControls: Boolean(showVolumeControls), doubleClickToFullscreen: Boolean(doubleClickToFullscreen), spaceKeyToPlayOrPause: Boolean(spaceKeyToPlayOrPause), playbackRate: currentPlaybackRate, className: className !== null && className !== void 0 ? className : undefined, showPosterWhenUnplayed: Boolean(showPosterWhenUnplayed), showPosterWhenEnded: Boolean(showPosterWhenEnded), showPosterWhenPaused: Boolean(showPosterWhenPaused), showPosterWhenBuffering: Boolean(showPosterWhenBuffering), 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, alwaysShowControls: alwaysShowControls, showPlaybackRateControl: showPlaybackRateControl, bufferStateDelayInMilliseconds: bufferStateDelayInMilliseconds !== null && bufferStateDelayInMilliseconds !== void 0 ? bufferStateDelayInMilliseconds : 300, hideControlsWhenPointerDoesntMove: hideControlsWhenPointerDoesntMove, overflowVisible: overflowVisible }) }) }) }) }));
+                            : Boolean(controls), showVolumeControls: Boolean(showVolumeControls), doubleClickToFullscreen: Boolean(doubleClickToFullscreen), spaceKeyToPlayOrPause: Boolean(spaceKeyToPlayOrPause), playbackRate: currentPlaybackRate, className: className !== null && className !== void 0 ? className : undefined, showPosterWhenUnplayed: Boolean(showPosterWhenUnplayed), showPosterWhenEnded: Boolean(showPosterWhenEnded), showPosterWhenPaused: Boolean(showPosterWhenPaused), showPosterWhenBuffering: Boolean(showPosterWhenBuffering), 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, renderMuteButton: renderMuteButton !== null && renderMuteButton !== void 0 ? renderMuteButton : null, renderVolumeSlider: renderVolumeSlider !== null && renderVolumeSlider !== void 0 ? renderVolumeSlider : null, alwaysShowControls: alwaysShowControls, showPlaybackRateControl: showPlaybackRateControl, bufferStateDelayInMilliseconds: bufferStateDelayInMilliseconds !== null && bufferStateDelayInMilliseconds !== void 0 ? bufferStateDelayInMilliseconds : 300, hideControlsWhenPointerDoesntMove: hideControlsWhenPointerDoesntMove, overflowVisible: overflowVisible }) }) }) }) }));
 };
@@ -147,0 +147,0 @@ const forward = react_1.forwardRef;

dist/cjs/PlayerControls.d.ts

 import type { MouseEventHandler, ReactNode, SyntheticEvent } from 'react';
 import React from 'react';
+import type { RenderMuteButton } from './MediaVolumeSlider.js';
+import type { RenderVolumeSlider } from './render-volume-slider.js';
 import type { usePlayer } from './use-player.js';
@@ -37,2 +39,4 @@ import type { Size } from './utils/use-element-size.js';
     readonly onDoubleClick: MouseEventHandler<HTMLDivElement> | undefined;
+    readonly renderMuteButton: RenderMuteButton | null;
+    readonly renderVolumeSlider: RenderVolumeSlider | null;
 }>;

dist/cjs/PlayerControls.js

@@ -69,3 +69,3 @@ "use strict";
 const fullscreen = {};
-const Controls = ({ durationInFrames, isFullscreen, fps, player, showVolumeControls, onFullscreenButtonClick, allowFullscreen, onExitFullscreenButtonClick, spaceKeyToPlayOrPause, onSeekEnd, onSeekStart, inFrame, outFrame, initiallyShowControls, canvasSize, renderPlayPauseButton, renderFullscreenButton, alwaysShowControls, showPlaybackRateControl, containerRef, buffering, hideControlsWhenPointerDoesntMove, onPointerDown, onDoubleClick, }) => {
+const Controls = ({ durationInFrames, isFullscreen, fps, player, showVolumeControls, onFullscreenButtonClick, allowFullscreen, onExitFullscreenButtonClick, spaceKeyToPlayOrPause, onSeekEnd, onSeekStart, inFrame, outFrame, initiallyShowControls, canvasSize, renderPlayPauseButton, renderFullscreenButton, alwaysShowControls, showPlaybackRateControl, containerRef, buffering, hideControlsWhenPointerDoesntMove, onPointerDown, onDoubleClick, renderMuteButton, renderVolumeSlider, }) => {
     var _a, _b;
@@ -181,3 +181,3 @@ const playButtonRef = (0, react_1.useRef)(null);
                                     isBuffering: buffering,
-                                })) !== null && _b !== void 0 ? _b : ((0, jsx_runtime_1.jsx)(DefaultPlayPauseButton_js_1.DefaultPlayPauseButton, { buffering: buffering, playing: player.playing }))) }), showVolumeControls ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { style: xSpacer }), (0, jsx_runtime_1.jsx)(MediaVolumeSlider_js_1.MediaVolumeSlider, { displayVerticalVolumeSlider: displayVerticalVolumeSlider })] })) : null, (0, jsx_runtime_1.jsx)("div", { style: xSpacer }), (0, jsx_runtime_1.jsxs)("div", { style: timeLabel, children: [(0, format_time_js_1.formatTime)(frame / fps), " / ", (0, format_time_js_1.formatTime)(durationInFrames / fps)] }), (0, jsx_runtime_1.jsx)("div", { style: xSpacer })] }), (0, jsx_runtime_1.jsx)("div", { style: flex1 }), playbackRates && canvasSize && ((0, jsx_runtime_1.jsx)(PlaybackrateControl_js_1.PlaybackrateControl, { canvasSize: canvasSize, playbackRates: playbackRates })), playbackRates && supportsFullscreen && allowFullscreen ? ((0, jsx_runtime_1.jsx)("div", { style: xSpacer })) : null, (0, jsx_runtime_1.jsx)("div", { style: fullscreen, children: supportsFullscreen && allowFullscreen ? ((0, jsx_runtime_1.jsx)("button", { type: "button", "aria-label": isFullscreen ? 'Exit fullscreen' : 'Enter Fullscreen', title: isFullscreen ? 'Exit fullscreen' : 'Enter Fullscreen', style: PlaybackrateControl_js_1.playerButtonStyle, onClick: isFullscreen
+                                })) !== null && _b !== void 0 ? _b : ((0, jsx_runtime_1.jsx)(DefaultPlayPauseButton_js_1.DefaultPlayPauseButton, { buffering: buffering, playing: player.playing }))) }), showVolumeControls ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { style: xSpacer }), (0, jsx_runtime_1.jsx)(MediaVolumeSlider_js_1.MediaVolumeSlider, { renderMuteButton: renderMuteButton, renderVolumeSlider: renderVolumeSlider, displayVerticalVolumeSlider: displayVerticalVolumeSlider })] })) : null, (0, jsx_runtime_1.jsx)("div", { style: xSpacer }), (0, jsx_runtime_1.jsxs)("div", { style: timeLabel, children: [(0, format_time_js_1.formatTime)(frame / fps), " / ", (0, format_time_js_1.formatTime)(durationInFrames / fps)] }), (0, jsx_runtime_1.jsx)("div", { style: xSpacer })] }), (0, jsx_runtime_1.jsx)("div", { style: flex1 }), playbackRates && canvasSize && ((0, jsx_runtime_1.jsx)(PlaybackrateControl_js_1.PlaybackrateControl, { canvasSize: canvasSize, playbackRates: playbackRates })), playbackRates && supportsFullscreen && allowFullscreen ? ((0, jsx_runtime_1.jsx)("div", { style: xSpacer })) : null, (0, jsx_runtime_1.jsx)("div", { style: fullscreen, children: supportsFullscreen && allowFullscreen ? ((0, jsx_runtime_1.jsx)("button", { type: "button", "aria-label": isFullscreen ? 'Exit fullscreen' : 'Enter Fullscreen', title: isFullscreen ? 'Exit fullscreen' : 'Enter Fullscreen', style: PlaybackrateControl_js_1.playerButtonStyle, onClick: isFullscreen
                                 ? onExitFullscreenButtonClick
@@ -184,0 +184,0 @@ : onFullscreenButtonClick, children: renderFullscreenButton === null ? ((0, jsx_runtime_1.jsx)(icons_js_1.FullscreenIcon, { isFullscreen: isFullscreen })) : (renderFullscreenButton({ isFullscreen })) })) : null })] }), (0, jsx_runtime_1.jsx)("div", { style: ySpacer }), (0, jsx_runtime_1.jsx)(PlayerSeekBar_js_1.PlayerSeekBar, { onSeekEnd: onSeekEnd, onSeekStart: onSeekStart, durationInFrames: durationInFrames, inFrame: inFrame, outFrame: outFrame })] }));

dist/cjs/PlayerUI.d.ts

 import React from 'react';
+import type { RenderMuteButton } from './MediaVolumeSlider.js';
 import type { RenderFullscreenButton, RenderPlayPauseButton } from './PlayerControls.js';
 import type { PlayerRef } from './player-methods.js';
+import type { RenderVolumeSlider } from './render-volume-slider.js';
 export type ErrorFallback = (info: {
@@ -40,2 +42,4 @@ error: Error;
     readonly renderFullscreen: RenderFullscreenButton | null;
+    readonly renderMuteButton: RenderMuteButton | null;
+    readonly renderVolumeSlider: RenderVolumeSlider | null;
     readonly alwaysShowControls: boolean;
@@ -42,0 +46,0 @@ readonly showPlaybackRateControl: boolean | number[];

dist/cjs/PlayerUI.js

@@ -43,3 +43,3 @@ "use strict";
 const doesReactVersionSupportSuspense = parseInt(reactVersion, 10) >= 18;
-const PlayerUI = ({ controls, style, loop, autoPlay, allowFullscreen, inputProps, clickToPlay, showVolumeControls, doubleClickToFullscreen, spaceKeyToPlayOrPause, errorFallback, playbackRate, renderLoading, renderPoster, className, moveToBeginningWhenEnded, showPosterWhenUnplayed, showPosterWhenEnded, showPosterWhenPaused, showPosterWhenBuffering, inFrame, outFrame, initiallyShowControls, renderFullscreen: renderFullscreenButton, renderPlayPauseButton, alwaysShowControls, showPlaybackRateControl, posterFillMode, bufferStateDelayInMilliseconds, hideControlsWhenPointerDoesntMove, overflowVisible, }, ref) => {
+const PlayerUI = ({ controls, style, loop, autoPlay, allowFullscreen, inputProps, clickToPlay, showVolumeControls, doubleClickToFullscreen, spaceKeyToPlayOrPause, errorFallback, playbackRate, renderLoading, renderPoster, className, moveToBeginningWhenEnded, showPosterWhenUnplayed, showPosterWhenEnded, showPosterWhenPaused, showPosterWhenBuffering, inFrame, outFrame, initiallyShowControls, renderFullscreen: renderFullscreenButton, renderPlayPauseButton, renderMuteButton, renderVolumeSlider, alwaysShowControls, showPlaybackRateControl, posterFillMode, bufferStateDelayInMilliseconds, hideControlsWhenPointerDoesntMove, overflowVisible, }, ref) => {
     var _a, _b, _c;
@@ -408,3 +408,3 @@ const config = remotion_1.Internals.useUnsafeVideoConfig();
                                 height: config.height,
-                            }, onPointerDown: clickToPlay ? handlePointerDown : undefined, onDoubleClick: doubleClickToFullscreen ? handleDoubleClick : undefined, children: poster })) : null] }) }), shouldShowPoster && posterFillMode === 'player-size' ? ((0, jsx_runtime_1.jsx)("div", { style: outer, onPointerDown: clickToPlay ? handlePointerDown : undefined, onDoubleClick: doubleClickToFullscreen ? handleDoubleClick : undefined, children: poster })) : null, controls ? ((0, jsx_runtime_1.jsx)(PlayerControls_js_1.Controls, { fps: config.fps, durationInFrames: config.durationInFrames, player: player, containerRef: container, 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, buffering: showBufferIndicator, hideControlsWhenPointerDoesntMove: hideControlsWhenPointerDoesntMove, onDoubleClick: doubleClickToFullscreen ? handleDoubleClick : undefined, onPointerDown: clickToPlay ? handlePointerDown : undefined })) : null] }));
+                            }, onPointerDown: clickToPlay ? handlePointerDown : undefined, onDoubleClick: doubleClickToFullscreen ? handleDoubleClick : undefined, children: poster })) : null] }) }), shouldShowPoster && posterFillMode === 'player-size' ? ((0, jsx_runtime_1.jsx)("div", { style: outer, onPointerDown: clickToPlay ? handlePointerDown : undefined, onDoubleClick: doubleClickToFullscreen ? handleDoubleClick : undefined, children: poster })) : null, controls ? ((0, jsx_runtime_1.jsx)(PlayerControls_js_1.Controls, { fps: config.fps, durationInFrames: config.durationInFrames, player: player, containerRef: container, 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, buffering: showBufferIndicator, hideControlsWhenPointerDoesntMove: hideControlsWhenPointerDoesntMove, onDoubleClick: doubleClickToFullscreen ? handleDoubleClick : undefined, onPointerDown: clickToPlay ? handlePointerDown : undefined, renderMuteButton: renderMuteButton, renderVolumeSlider: renderVolumeSlider })) : null] }));
     if (is_node_js_1.IS_NODE && !doesReactVersionSupportSuspense) {
@@ -411,0 +411,0 @@ return ((0, jsx_runtime_1.jsx)("div", { ref: container, style: outerStyle, className: className, children: content }));

package.json

@@ -6,3 +6,3 @@ {
   "name": "@remotion/player",
-  "version": "4.0.187",
+  "version": "4.0.188",
   "description": "React component for embedding a Remotion preview into your app",
@@ -32,3 +32,3 @@ "main": "dist/cjs/index.js",
   "dependencies": {
-    "remotion": "4.0.187"
+    "remotion": "4.0.188"
   },
@@ -35,0 +35,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

277084

increased by2.24%

Number of package files

104

increased by2.97%

Lines of code

7076

increased by2.18%

Dependency changes

• + Addedremotion@4.0.188(transitive)

• - Removedremotion@4.0.187(transitive)

• Updatedremotion@4.0.188