@remotion/player 4.0.212 → 4.0.214

package/dist/cjs/DefaultPlayPauseButton.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export declare const DefaultPlayPauseButton: React.FC<{
     playing: boolean;
     buffering: boolean;

package/dist/cjs/PlayerControls.js

@@ -174,10 +174,10 @@ const Controls = ({ durationInFrames, isFullscreen, fps, player, showVolumeContr
             onDoubleClick === null || onDoubleClick === void 0 ? void 0 : onDoubleClick(e);
         }
     }, [onDoubleClick]);
-    return ((0, jsx_runtime_1.jsxs)("div", { ref: ref, style: containerCss, onPointerDown: onPointerDownIfContainer, onDoubleClick: onDoubleClickIfContainer, children: [(0, jsx_runtime_1.jsxs)("div", { ref: flexRef, style: controlsRow, children: [(0, jsx_runtime_1.jsxs)("div", { style: leftPartStyle, children: [(0, jsx_runtime_1.jsx)("button", { ref: playButtonRef, type: "button", style: PlaybackrateControl_js_1.playerButtonStyle, onClick: player.playing ? player.pause : player.play, "aria-label": player.playing ? 'Pause video' : 'Play video', title: player.playing ? 'Pause video' : 'Play video', children: renderPlayPauseButton === null ? ((0, jsx_runtime_1.jsx)(DefaultPlayPauseButton_js_1.DefaultPlayPauseButton, { buffering: buffering, playing: player.playing })) : ((_b = renderPlayPauseButton({
+    return ((0, jsx_runtime_1.jsxs)("div", { ref: ref, style: containerCss, onPointerDown: onPointerDownIfContainer, onDoubleClick: onDoubleClickIfContainer, children: [(0, jsx_runtime_1.jsxs)("div", { ref: flexRef, style: controlsRow, children: [(0, jsx_runtime_1.jsxs)("div", { style: leftPartStyle, children: [(0, jsx_runtime_1.jsx)("button", { ref: playButtonRef, type: "button", style: PlaybackrateControl_js_1.playerButtonStyle, onClick: player.playing ? player.pause : player.play, "aria-label": player.playing ? 'Pause video' : 'Play video', title: player.playing ? 'Pause video' : 'Play video', children: renderPlayPauseButton === null ? ((0, jsx_runtime_1.jsx)(DefaultPlayPauseButton_js_1.DefaultPlayPauseButton, { buffering: buffering, playing: player.playing })) : (((_b = renderPlayPauseButton({
                                     playing: player.playing,
                                     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, { 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
+                                })) !== 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
                                 : 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 })] }));
 };

package/dist/cjs/PlayerSeekBar.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export declare const PlayerSeekBar: React.FC<{
     durationInFrames: number;
     onSeekStart: () => void;

package/dist/cjs/PlayerSeekBar.js

@@ -8,9 +8,8 @@ const use_hover_state_js_1 = require("./use-hover-state.js");
 const use_player_js_1 = require("./use-player.js");
 const use_element_size_js_1 = require("./utils/use-element-size.js");
 const getFrameFromX = (clientX, durationInFrames, width) => {
-    var _a;
     const pos = clientX;
-    const frame = Math.round((0, remotion_1.interpolate)(pos, [0, width], [0, (_a = durationInFrames - 1) !== null && _a !== void 0 ? _a : 0], {
+    const frame = Math.round((0, remotion_1.interpolate)(pos, [0, width], [0, durationInFrames - 1], {
         extrapolateLeft: 'clamp',
         extrapolateRight: 'clamp',
     }));

package/dist/cjs/PlayerUI.d.ts

@@ -20,14 +20,14 @@ declare const _default: React.ForwardRefExoticComponent<{
     readonly allowFullscreen: boolean;
     readonly inputProps: Record<string, unknown>;
     readonly showVolumeControls: boolean;
-    readonly style?: React.CSSProperties | undefined;
+    readonly style?: React.CSSProperties;
     readonly clickToPlay: boolean;
     readonly doubleClickToFullscreen: boolean;
     readonly spaceKeyToPlayOrPause: boolean;
     readonly errorFallback: ErrorFallback;
     readonly playbackRate: number;
     readonly renderLoading: RenderLoading | undefined;
-    readonly renderPoster: RenderLoading | undefined;
+    readonly renderPoster: RenderPoster | undefined;
     readonly className: string | undefined;
     readonly moveToBeginningWhenEnded: boolean;
     readonly showPosterWhenPaused: boolean;
@@ -45,7 +45,7 @@ declare const _default: React.ForwardRefExoticComponent<{
     readonly showPlaybackRateControl: boolean | number[];
     readonly posterFillMode: PosterFillMode;
     readonly bufferStateDelayInMilliseconds: number;
-    readonly hideControlsWhenPointerDoesntMove: number | boolean;
+    readonly hideControlsWhenPointerDoesntMove: boolean | number;
     readonly overflowVisible: boolean;
 } & React.RefAttributes<PlayerRef>>;
 export default _default;

package/dist/cjs/PlayerUI.js

@@ -317,8 +317,14 @@ const PlayerUI = ({ controls, style, loop, autoPlay, allowFullscreen, inputProps
     ]);
     const VideoComponent = video ? video.component : null;
     const outerStyle = (0, react_1.useMemo)(() => {
-        return (0, calculate_scale_js_1.calculateOuterStyle)({ canvasSize, config, style, overflowVisible });
-    }, [canvasSize, config, overflowVisible, style]);
+        return (0, calculate_scale_js_1.calculateOuterStyle)({
+            canvasSize,
+            config,
+            style,
+            overflowVisible,
+            layout,
+        });
+    }, [canvasSize, config, layout, overflowVisible, style]);
     const outer = (0, react_1.useMemo)(() => {
         return (0, calculate_scale_js_1.calculateOuter)({ config, layout, scale, overflowVisible });
     }, [config, layout, overflowVisible, scale]);

package/dist/cjs/ThumbnailUI.d.ts

@@ -3,7 +3,7 @@ import type { ThumbnailMethods } from './player-methods.js';
 import type { ErrorFallback, RenderLoading } from './PlayerUI.js';
 declare const _default: React.ForwardRefExoticComponent<{
     inputProps: Record<string, unknown>;
-    style?: React.CSSProperties | undefined;
+    style?: React.CSSProperties;
     errorFallback: ErrorFallback;
     renderLoading: RenderLoading | undefined;
     className: string | undefined;

package/dist/cjs/ThumbnailUI.js

@@ -70,8 +70,14 @@ const ThumbnailUI = ({ style, inputProps, errorFallback, renderLoading, classNam
     }, [scale, thumbnail.emitter]);
     const VideoComponent = video ? video.component : null;
     const outerStyle = (0, react_1.useMemo)(() => {
-        return (0, calculate_scale_js_1.calculateOuterStyle)({ config, style, canvasSize, overflowVisible });
-    }, [canvasSize, config, overflowVisible, style]);
+        return (0, calculate_scale_js_1.calculateOuterStyle)({
+            config,
+            style,
+            canvasSize,
+            overflowVisible,
+            layout,
+        });
+    }, [canvasSize, config, layout, overflowVisible, style]);
     const outer = (0, react_1.useMemo)(() => {
         return (0, calculate_scale_js_1.calculateOuter)({ config, layout, scale, overflowVisible });
     }, [config, layout, overflowVisible, scale]);

package/dist/cjs/calculate-scale.d.ts

@@ -8,16 +8,17 @@ type Layout = {
     scale: number;
 };
 export declare const calculateCanvasTransformation: ({ previewSize, compositionWidth, compositionHeight, canvasSize, }: {
-    previewSize: PreviewSize['size'];
+    previewSize: PreviewSize["size"];
     compositionWidth: number;
     compositionHeight: number;
     canvasSize: Size;
 }) => Layout;
-export declare const calculateOuterStyle: ({ config, style, canvasSize, overflowVisible, }: {
+export declare const calculateOuterStyle: ({ config, style, canvasSize, overflowVisible, layout, }: {
     config: VideoConfig | null;
     style: React.CSSProperties | undefined;
     canvasSize: Size | null;
     overflowVisible: boolean;
+    layout: Layout | null;
 }) => React.CSSProperties;
 export declare const calculateContainerStyle: ({ config, canvasSize, layout, scale, overflowVisible, }: {
     config: VideoConfig | null;

package/dist/cjs/calculate-scale.js

@@ -26,7 +26,7 @@ const calculateCanvasTransformation = ({ previewSize, compositionWidth, composit
     };
 };
 exports.calculateCanvasTransformation = calculateCanvasTransformation;
-const calculateOuterStyle = ({ config, style, canvasSize, overflowVisible, }) => {
+const calculateOuterStyle = ({ config, style, canvasSize, overflowVisible, layout, }) => {
     if (!config) {
         return {};
     }
@@ -40,6 +40,7 @@ const calculateOuterStyle = ({ config, style, canvasSize, overflowVisible, }) =>
             height: style === null || style === void 0 ? void 0 : style.height,
             width: style === null || style === void 0 ? void 0 : style.width,
         }),
+        opacity: layout ? 1 : 0,
         ...style,
     };
 };

package/dist/cjs/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import './_check-rsc.js';
 import type { CallbackListener, PlayerEventTypes } from './event-emitter.js';
 import { PlayerEmitter } from './event-emitter.js';
@@ -23,7 +22,7 @@ export declare const PlayerInternals: {
         isFirstFrame: boolean;
         emitter: PlayerEmitter;
         playing: boolean;
-        play: (e?: PointerEvent | import("react").SyntheticEvent<Element, Event> | undefined) => void;
+        play: (e?: import("react").SyntheticEvent | PointerEvent) => void;
         pause: () => void;
         pauseAndReturnToPlayStart: () => void;
         seek: (newFrame: number) => void;
@@ -31,7 +30,7 @@ export declare const PlayerInternals: {
         isPlaying: () => boolean;
         hasPlayed: boolean;
         isBuffering: () => boolean;
-        remotionInternal_currentFrameRef: import("react").MutableRefObject<number>;
+        remotionInternal_currentFrameRef: React.MutableRefObject<number>;
     };
     usePlayback: ({ loop, playbackRate, moveToBeginningWhenEnded, inFrame, outFrame, frameRef, }: {
         loop: boolean;
@@ -39,14 +38,14 @@ export declare const PlayerInternals: {
         moveToBeginningWhenEnded: boolean;
         inFrame: number | null;
         outFrame: number | null;
-        frameRef: import("react").MutableRefObject<number>;
+        frameRef: React.MutableRefObject<number>;
     }) => void;
-    useElementSize: (ref: import("react").RefObject<HTMLElement>, options: {
+    useElementSize: (ref: React.RefObject<HTMLElement>, options: {
         triggerOnWindowResize: boolean;
         shouldApplyCssTransforms: boolean;
     }) => import("./utils/use-element-size.js").Size | null;
     calculateCanvasTransformation: ({ previewSize, compositionWidth, compositionHeight, canvasSize, }: {
-        previewSize: number | "auto";
+        previewSize: import("remotion").PreviewSize["size"];
         compositionWidth: number;
         compositionHeight: number;
         canvasSize: import("./utils/use-element-size.js").Size;
@@ -57,10 +56,10 @@ export declare const PlayerInternals: {
         yCorrection: number;
         scale: number;
     };
-    useHoverState: (ref: import("react").RefObject<HTMLDivElement>, hideControlsWhenPointerDoesntMove: number | boolean) => boolean;
+    useHoverState: (ref: React.RefObject<HTMLDivElement>, hideControlsWhenPointerDoesntMove: boolean | number) => boolean;
     updateAllElementsSizes: () => void;
     PlayerEmitterProvider: import("react").FC<{
-        children: import("react").ReactNode;
+        children: React.ReactNode;
         currentPlaybackRate: number | null;
     }>;
     BufferingIndicator: import("react").FC<{

package/dist/cjs/is-backgrounded.d.ts

@@ -1,2 +1 @@
-/// <reference types="react" />
 export declare const useIsBackgrounded: () => import("react").MutableRefObject<boolean>;

package/dist/cjs/test/test-utils.d.ts

@@ -1,6 +1,6 @@
 import type { queries, RenderOptions } from '@testing-library/react';
 import type { FC, ReactElement } from 'react';
 declare const HelloWorld: FC;
-declare const customRender: (ui: ReactElement, options?: Omit<RenderOptions, 'queries'>) => import("@testing-library/react").RenderResult<typeof queries, HTMLElement, HTMLElement>;
+declare const customRender: (ui: ReactElement, options?: Omit<RenderOptions, "queries">) => import("@testing-library/react").RenderResult<typeof queries, HTMLElement, HTMLElement>;
 export * from '@testing-library/react';
 export { HelloWorld, customRender as render };

package/dist/cjs/utils/calculate-player-size.d.ts

@@ -2,8 +2,8 @@ import type { StandardLonghandProperties } from 'csstype';
 import type { Size } from './use-element-size.js';
 export declare const calculatePlayerSize: ({ currentSize, width, height, compositionWidth, compositionHeight, }: {
     currentSize: Size | null;
-    width: StandardLonghandProperties['width'] | undefined;
-    height: StandardLonghandProperties['height'] | undefined;
+    width: StandardLonghandProperties["width"] | undefined;
+    height: StandardLonghandProperties["height"] | undefined;
     compositionWidth: number;
     compositionHeight: number;
 }) => React.CSSProperties;

package/dist/cjs/utils/use-component-visible.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export default function useComponentVisible(initialIsVisible: boolean): {
     ref: import("react").RefObject<HTMLDivElement>;
     isComponentVisible: boolean;

package/dist/cjs/utils/use-component-visible.js

@@ -1,5 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = useComponentVisible;
 const react_1 = require("react");
 // hook to hide a popup/modal when clicked outside
 function useComponentVisible(initialIsVisible) {
@@ -18,4 +19,3 @@ function useComponentVisible(initialIsVisible) {
     }, []);
     return { ref, isComponentVisible, setIsComponentVisible };
 }
-exports.default = useComponentVisible;

package/dist/esm/index.mjs

@@ -254,7 +254,8 @@ var calculateOuterStyle = ({
   config,
   style,
   canvasSize,
-  overflowVisible
+  overflowVisible,
+  layout
 }) => {
   if (!config) {
     return {};
@@ -269,6 +270,7 @@ var calculateOuterStyle = ({
       height: style?.height,
       width: style?.width
     }),
+    opacity: layout ? 1 : 0,
     ...style
   };
 };
@@ -2422,8 +2424,14 @@ var PlayerUI = ({
   ]);
   const VideoComponent = video ? video.component : null;
   const outerStyle = useMemo11(() => {
-    return calculateOuterStyle({ canvasSize, config, style, overflowVisible });
-  }, [canvasSize, config, overflowVisible, style]);
+    return calculateOuterStyle({
+      canvasSize,
+      config,
+      style,
+      overflowVisible,
+      layout
+    });
+  }, [canvasSize, config, layout, overflowVisible, style]);
   const outer = useMemo11(() => {
     return calculateOuter({ config, layout, scale, overflowVisible });
   }, [config, layout, overflowVisible, scale]);
@@ -3121,8 +3129,14 @@ var ThumbnailUI = ({ style, inputProps, errorFallback, renderLoading, className:
   }, [scale, thumbnail.emitter]);
   const VideoComponent = video ? video.component : null;
   const outerStyle = useMemo15(() => {
-    return calculateOuterStyle({ config, style, canvasSize, overflowVisible });
-  }, [canvasSize, config, overflowVisible, style]);
+    return calculateOuterStyle({
+      config,
+      style,
+      canvasSize,
+      overflowVisible,
+      layout
+    });
+  }, [canvasSize, config, layout, overflowVisible, style]);
   const outer = useMemo15(() => {
     return calculateOuter({ config, layout, scale, overflowVisible });
   }, [config, layout, overflowVisible, scale]);

package/package.json

@@ -3,7 +3,7 @@
     "url": "https://github.com/remotion-dev/remotion/tree/main/packages/player"
   },
   "name": "@remotion/player",
-  "version": "4.0.212",
+  "version": "4.0.214",
   "description": "React component for embedding a Remotion preview into your app",
   "main": "dist/cjs/index.js",
   "types": "dist/cjs/index.d.ts",
@@ -28,7 +28,7 @@
   ],
   "license": "SEE LICENSE IN LICENSE.md",
   "dependencies": {
-    "remotion": "4.0.212"
+    "remotion": "4.0.214"
   },
   "peerDependencies": {
     "react": ">=16.8.0",
@@ -57,7 +57,7 @@
   "scripts": {
     "formatting": "prettier src --check",
     "lint": "eslint src --ext ts,tsx",
-    "build": "bun ensure-correct-version.ts && bun --env-file=../.env.bundle bundle.ts",
+    "make": "bun ensure-correct-version.ts && bun --env-file=../.env.bundle bundle.ts",
     "test": "bun test src",
     "prerelease": "cp ../../README.md ."
   }

package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/BufferingIndicator.d.ts

@@ -1,5 +0,0 @@
-import React from 'react';
-export declare const bufferingIndicatorStrokeWidth = 3;
-export declare const BufferingIndicator: React.FC<{
-    type: 'player' | 'studio';
-}>;

package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/BufferingIndicator.js

@@ -1,38 +0,0 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { ICON_SIZE } from './icons.js';
-const className = '__remotion_buffering_indicator';
-const remotionBufferingAnimation = '__remotion_buffering_animation';
-export const bufferingIndicatorStrokeWidth = 3;
-const playerStyle = {
-    width: ICON_SIZE,
-    height: ICON_SIZE,
-    overflow: 'hidden',
-    lineHeight: 'normal',
-    fontSize: 'inherit',
-};
-const studioStyle = {
-    width: 14,
-    height: 14,
-    overflow: 'hidden',
-    lineHeight: 'normal',
-    fontSize: 'inherit',
-};
-export const BufferingIndicator = ({ type }) => {
-    const style = type === 'player' ? playerStyle : studioStyle;
-    return (_jsxs(_Fragment, { children: [_jsx("style", { type: "text/css", children: `
-				@keyframes ${remotionBufferingAnimation} {
-          0% {
-            rotate: 0deg;
-          }
-          100% {
-            rotate: 360deg;
-          }
-        }
-        
-        .${className} {
-            animation: ${remotionBufferingAnimation} 1s linear infinite;
-        }        
-			` }), _jsx("div", { style: style, children: _jsx("svg", { viewBox: type === 'player' ? '0 0 22 22' : '0 0 18 18', style: style, className: className, children: _jsx("path", { d: type === 'player'
-                            ? 'M 11 4 A 7 7 0 0 1 15.1145 16.66312'
-                            : 'M 9 2 A 7 7 0 0 1 13.1145 14.66312', stroke: "white", strokeLinecap: "round", fill: "none", strokeWidth: 3 }) }) })] }));
-};

package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/DefaultPlayPauseButton.d.ts

@@ -1,5 +0,0 @@
-/// <reference types="react" />
-export declare const DefaultPlayPauseButton: React.FC<{
-    playing: boolean;
-    buffering: boolean;
-}>;

package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/DefaultPlayPauseButton.js

@@ -1,12 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { BufferingIndicator } from './BufferingIndicator.js';
-import { PauseIcon, PlayIcon } from './icons.js';
-export const DefaultPlayPauseButton = ({ playing, buffering }) => {
-    if (playing && buffering) {
-        return _jsx(BufferingIndicator, { type: "player" });
-    }
-    if (playing) {
-        return _jsx(PauseIcon, {});
-    }
-    return _jsx(PlayIcon, {});
-};

package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/EmitterProvider.d.ts

@@ -1,5 +0,0 @@
-import React from 'react';
-export declare const PlayerEmitterProvider: React.FC<{
-    children: React.ReactNode;
-    currentPlaybackRate: number | null;
-}>;

package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/EmitterProvider.js

@@ -1,20 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { useContext, useEffect, useState } from 'react';
-import { Internals } from 'remotion';
-import { PlayerEventEmitterContext } from './emitter-context.js';
-import { PlayerEmitter } from './event-emitter.js';
-import { useBufferStateEmitter } from './use-buffer-state-emitter.js';
-export const PlayerEmitterProvider = ({ children, currentPlaybackRate }) => {
-    const [emitter] = useState(() => new PlayerEmitter());
-    const bufferManager = useContext(Internals.BufferingContextReact);
-    if (!bufferManager) {
-        throw new Error('BufferingContextReact not found');
-    }
-    useEffect(() => {
-        if (currentPlaybackRate) {
-            emitter.dispatchRateChange(currentPlaybackRate);
-        }
-    }, [emitter, currentPlaybackRate]);
-    useBufferStateEmitter(emitter);
-    return (_jsx(PlayerEventEmitterContext.Provider, { value: emitter, children: children }));
-};

package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/MediaVolumeSlider.d.ts

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

package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/MediaVolumeSlider.js

@@ -1,129 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React, { useCallback, useMemo, useRef, useState } from 'react';
-import { Internals, random } from 'remotion';
-import { ICON_SIZE, VolumeOffIcon, VolumeOnIcon } from './icons.js';
-import { useHoverState } from './use-hover-state.js';
-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, 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.useId === 'undefined' ? 'volume-slider' : React.useId();
-    const [randomClass] = useState(() => `__remotion-volume-slider-${random(randomId)}`.replace('.', ''));
-    const isMutedOrZero = mediaMuted || mediaVolume === 0;
-    const onVolumeChange = useCallback((e) => {
-        setMediaVolume(parseFloat(e.target.value));
-    }, [setMediaVolume]);
-    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 isVolume0 = mediaVolume === 0;
-    const onClick = useCallback(() => {
-        if (isVolume0) {
-            setMediaVolume(1);
-            setMediaMuted(false);
-            return;
-        }
-        setMediaMuted((mute) => !mute);
-    }, [isVolume0, setMediaMuted, setMediaVolume]);
-    const parentDivStyle = useMemo(() => {
-        return {
-            display: 'inline-flex',
-            background: 'none',
-            border: 'none',
-            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 sliderContainer = useMemo(() => {
-        const paddingLeft = 5;
-        const common = {
-            paddingLeft,
-            height: ICON_SIZE,
-            width: VOLUME_SLIDER_WIDTH,
-        };
-        if (displayVerticalVolumeSlider) {
-            return {
-                ...common,
-                position: 'absolute',
-                transform: `rotate(-90deg) translateX(${VOLUME_SLIDER_WIDTH / 2 + ICON_SIZE / 2}px)`,
-            };
-        }
-        return {
-            ...common,
-        };
-    }, [displayVerticalVolumeSlider]);
-    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,
-                bottom: ICON_SIZE + 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 (_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 && !Internals.isIosSafari() ? (_jsx("div", { style: sliderContainer, children: _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/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/PlaybackrateControl.d.ts

@@ -1,8 +0,0 @@
-import React from 'react';
-import type { Size } from './utils/use-element-size.js';
-export declare const Checkmark: () => import("react/jsx-runtime.js").JSX.Element;
-export declare const playerButtonStyle: React.CSSProperties;
-export declare const PlaybackrateControl: React.FC<{
-    playbackRates: number[];
-    canvasSize: Size;
-}>;