@remotion/player 4.0.214 → 4.0.215

package/dist/cjs/index.d.ts

@@ -59,7 +59,7 @@ export declare const PlayerInternals: {
     useHoverState: (ref: React.RefObject<HTMLDivElement>, hideControlsWhenPointerDoesntMove: boolean | number) => boolean;
     updateAllElementsSizes: () => void;
     PlayerEmitterProvider: import("react").FC<{
-        children: React.ReactNode;
+        children: import("react").ReactNode;
         currentPlaybackRate: number | null;
     }>;
     BufferingIndicator: import("react").FC<{

package/dist/esm/index.mjs

@@ -1,9 +1,6 @@
 "use client";
 // src/icons.tsx
-import {
-jsx,
-jsxs
-} from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 var ICON_SIZE = 25;
 var fullscreenIconSize = 16;
 var PlayIcon = () => {
@@ -128,11 +125,7 @@ var VolumeOnIcon = () => {
 };
 
 // src/BufferingIndicator.tsx
-import {
-jsx as jsx2,
-jsxs as jsxs2,
-Fragment
-} from "react/jsx-runtime";
+import { jsx as jsx2, jsxs as jsxs2, Fragment } from "react/jsx-runtime";
 var className = "__remotion_buffering_indicator";
 var remotionBufferingAnimation = "__remotion_buffering_animation";
 var playerStyle = {
@@ -190,7 +183,7 @@ var BufferingIndicator = ({ type }) => {
 };
 
 // src/calculate-scale.ts
-import {Internals} from "remotion";
+import { Internals } from "remotion";
 
 // src/utils/calculate-player-size.ts
 var calculatePlayerSize = ({
@@ -323,8 +316,8 @@ var PlayerEventEmitterContext = React.createContext(undefined);
 var ThumbnailEmitterContext = React.createContext(undefined);
 
 // src/EmitterProvider.tsx
-import {useContext as useContext2, useEffect as useEffect2, useState} from "react";
-import {Internals as Internals3} from "remotion";
+import { useContext as useContext2, useEffect as useEffect2, useState } from "react";
+import { Internals as Internals3 } from "remotion";
 
 // src/event-emitter.ts
 class PlayerEmitter {
@@ -440,8 +433,8 @@ class ThumbnailEmitter {
 }
 
 // src/use-buffer-state-emitter.ts
-import {useContext, useEffect} from "react";
-import {Internals as Internals2} from "remotion";
+import { useContext, useEffect } from "react";
+import { Internals as Internals2 } from "remotion";
 var useBufferStateEmitter = (emitter) => {
   const bufferManager = useContext(Internals2.BufferingContextReact);
   if (!bufferManager) {
@@ -464,9 +457,7 @@ var useBufferStateEmitter = (emitter) => {
 };
 
 // src/EmitterProvider.tsx
-import {
-jsx as jsx3
-} from "react/jsx-runtime";
+import { jsx as jsx3 } from "react/jsx-runtime";
 var PlayerEmitterProvider = ({ children, currentPlaybackRate }) => {
   const [emitter] = useState(() => new PlayerEmitter);
   const bufferManager = useContext2(Internals3.BufferingContextReact);
@@ -486,7 +477,7 @@ var PlayerEmitterProvider = ({ children, currentPlaybackRate }) => {
 };
 
 // src/use-hover-state.ts
-import {useEffect as useEffect3, useState as useState2} from "react";
+import { useEffect as useEffect3, useState as useState2 } from "react";
 var useHoverState = (ref, hideControlsWhenPointerDoesntMove) => {
   const [hovered, setHovered] = useState2(false);
   useEffect3(() => {
@@ -529,8 +520,8 @@ var useHoverState = (ref, hideControlsWhenPointerDoesntMove) => {
 };
 
 // src/use-playback.ts
-import {useContext as useContext4, useEffect as useEffect5, useRef as useRef3} from "react";
-import {Internals as Internals5} from "remotion";
+import { useContext as useContext4, useEffect as useEffect5, useRef as useRef3 } from "react";
+import { Internals as Internals5 } from "remotion";
 
 // src/calculate-next-frame.ts
 var calculateNextFrame = ({
@@ -566,7 +557,7 @@ var calculateNextFrame = ({
 };
 
 // src/is-backgrounded.ts
-import {useEffect as useEffect4, useRef} from "react";
+import { useEffect as useEffect4, useRef } from "react";
 var getIsBackgrounded = () => {
   if (typeof document === "undefined") {
     return false;
@@ -588,8 +579,8 @@ var useIsBackgrounded = () => {
 };
 
 // src/use-player.ts
-import {useCallback, useContext as useContext3, useMemo, useRef as useRef2, useState as useState3} from "react";
-import {Internals as Internals4} from "remotion";
+import { useCallback, useContext as useContext3, useMemo, useRef as useRef2, useState as useState3 } from "react";
+import { Internals as Internals4 } from "remotion";
 var usePlayer = () => {
   const [playing, setPlaying, imperativePlaying] = Internals4.Timeline.usePlayingState();
   const [hasPlayed, setHasPlayed] = useState3(false);
@@ -887,7 +878,7 @@ var usePlayback = ({
 };
 
 // src/utils/use-element-size.ts
-import {useCallback as useCallback2, useEffect as useEffect6, useMemo as useMemo2, useState as useState4} from "react";
+import { useCallback as useCallback2, useEffect as useEffect6, useMemo as useMemo2, useState as useState4 } from "react";
 var elementSizeHooks = [];
 var updateAllElementsSizes = () => {
   for (const listener of elementSizeHooks) {
@@ -1005,38 +996,36 @@ var useElementSize = (ref, options) => {
 
 // src/Player.tsx
 import {
-forwardRef as forwardRef2,
-useEffect as useEffect12,
-useImperativeHandle as useImperativeHandle2,
-useLayoutEffect,
-useMemo as useMemo13,
-useRef as useRef10,
-useState as useState13
+  forwardRef as forwardRef2,
+  useEffect as useEffect12,
+  useImperativeHandle as useImperativeHandle2,
+  useLayoutEffect,
+  useMemo as useMemo13,
+  useRef as useRef10,
+  useState as useState13
 } from "react";
-import {Composition, Internals as Internals12} from "remotion";
+import { Composition, Internals as Internals12 } from "remotion";
 
 // src/PlayerUI.tsx
 import React8, {
-Suspense,
-forwardRef,
-useCallback as useCallback10,
-useContext as useContext6,
-useEffect as useEffect11,
-useImperativeHandle,
-useMemo as useMemo11,
-useRef as useRef9,
-useState as useState11
+  Suspense,
+  forwardRef,
+  useCallback as useCallback10,
+  useContext as useContext6,
+  useEffect as useEffect11,
+  useImperativeHandle,
+  useMemo as useMemo11,
+  useRef as useRef9,
+  useState as useState11
 } from "react";
-import {Internals as Internals10} from "remotion";
+import { Internals as Internals10 } from "remotion";
 
 // src/PlayerControls.tsx
-import {useCallback as useCallback7, useEffect as useEffect10, useMemo as useMemo8, useRef as useRef7, useState as useState10} from "react";
-import {Internals as Internals9} from "remotion";
+import { useCallback as useCallback7, useEffect as useEffect10, useMemo as useMemo8, useRef as useRef7, useState as useState10 } from "react";
+import { Internals as Internals9 } from "remotion";
 
 // src/DefaultPlayPauseButton.tsx
-import {
-jsx as jsx4
-} from "react/jsx-runtime";
+import { jsx as jsx4 } from "react/jsx-runtime";
 var DefaultPlayPauseButton = ({ playing, buffering }) => {
   if (playing && buffering) {
     return /* @__PURE__ */ jsx4(BufferingIndicator, {
@@ -1050,16 +1039,13 @@ var DefaultPlayPauseButton = ({ playing, buffering }) => {
 };
 
 // src/MediaVolumeSlider.tsx
-import {useCallback as useCallback4, useMemo as useMemo4, useRef as useRef4, useState as useState6} from "react";
-import {Internals as Internals6} from "remotion";
+import { useCallback as useCallback4, useMemo as useMemo4, useRef as useRef4, useState as useState6 } from "react";
+import { Internals as Internals6 } from "remotion";
 
 // src/render-volume-slider.tsx
-import React3, {useCallback as useCallback3, useMemo as useMemo3, useState as useState5} from "react";
-import {random} from "remotion";
-import {
-jsx as jsx5,
-jsxs as jsxs3
-} from "react/jsx-runtime";
+import React3, { useCallback as useCallback3, useMemo as useMemo3, useState as useState5 } from "react";
+import { random } from "remotion";
+import { jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
 var KNOB_SIZE = 12;
 var BAR_HEIGHT = 5;
 var DefaultVolumeSlider = ({
@@ -1165,12 +1151,9 @@ var renderDefaultVolumeSlider = (props) => {
 };
 
 // src/MediaVolumeSlider.tsx
-import {
-jsx as jsx6,
-jsxs as jsxs4
-} from "react/jsx-runtime";
+import { jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
 var VOLUME_SLIDER_WIDTH = 100;
-var MediaVolumeSlider2 = ({ displayVerticalVolumeSlider, renderMuteButton, renderVolumeSlider }) => {
+var MediaVolumeSlider = ({ displayVerticalVolumeSlider, renderMuteButton, renderVolumeSlider }) => {
   const [mediaMuted, setMediaMuted] = Internals6.useMediaMutedState();
   const [mediaVolume, setMediaVolume] = Internals6.useMediaVolumeState();
   const [focused, setFocused] = useState6(false);
@@ -1261,16 +1244,16 @@ var MediaVolumeSlider2 = ({ displayVerticalVolumeSlider, renderMuteButton, rende
 
 // src/PlaybackrateControl.tsx
 import {
-useCallback as useCallback5,
-useContext as useContext5,
-useEffect as useEffect8,
-useMemo as useMemo5,
-useState as useState8
+  useCallback as useCallback5,
+  useContext as useContext5,
+  useEffect as useEffect8,
+  useMemo as useMemo5,
+  useState as useState8
 } from "react";
-import {Internals as Internals7} from "remotion";
+import { Internals as Internals7 } from "remotion";
 
 // src/utils/use-component-visible.ts
-import {useEffect as useEffect7, useRef as useRef5, useState as useState7} from "react";
+import { useEffect as useEffect7, useRef as useRef5, useState as useState7 } from "react";
 function useComponentVisible(initialIsVisible) {
   const [isComponentVisible, setIsComponentVisible] = useState7(initialIsVisible);
   const ref = useRef5(null);
@@ -1289,10 +1272,7 @@ function useComponentVisible(initialIsVisible) {
 }
 
 // src/PlaybackrateControl.tsx
-import {
-jsx as jsx7,
-jsxs as jsxs5
-} from "react/jsx-runtime";
+import { jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
 var BOTTOM = 35;
 var THRESHOLD = 70;
 var rateDiv = {
@@ -1492,12 +1472,9 @@ var PlaybackrateControl = ({ playbackRates, canvasSize }) => {
 };
 
 // src/PlayerSeekBar.tsx
-import {useCallback as useCallback6, useEffect as useEffect9, useMemo as useMemo6, useRef as useRef6, useState as useState9} from "react";
-import {Internals as Internals8, interpolate} from "remotion";
-import {
-jsx as jsx8,
-jsxs as jsxs6
-} from "react/jsx-runtime";
+import { useCallback as useCallback6, useEffect as useEffect9, useMemo as useMemo6, useRef as useRef6, useState as useState9 } from "react";
+import { Internals as Internals8, interpolate } from "remotion";
+import { jsx as jsx8, jsxs as jsxs6 } from "react/jsx-runtime";
 var getFrameFromX = (clientX, durationInFrames, width) => {
   const pos = clientX;
   const frame = Math.round(interpolate(pos, [0, width], [0, durationInFrames - 1], {
@@ -1659,7 +1636,7 @@ var formatTime = (timeInSeconds) => {
 };
 
 // src/use-video-controls-resize.ts
-import {useMemo as useMemo7} from "react";
+import { useMemo as useMemo7 } from "react";
 var X_SPACER = 10;
 var X_PADDING = 12;
 var useVideoControlsResize = ({
@@ -1686,11 +1663,7 @@ var useVideoControlsResize = ({
 };
 
 // src/PlayerControls.tsx
-import {
-jsx as jsx9,
-jsxs as jsxs7,
-Fragment as Fragment2
-} from "react/jsx-runtime";
+import { jsx as jsx9, jsxs as jsxs7, Fragment as Fragment2 } from "react/jsx-runtime";
 var gradientSteps = [
   0,
   0.013,
@@ -1930,7 +1903,7 @@ var Controls = ({
                   /* @__PURE__ */ jsx9("div", {
                     style: xSpacer
                   }),
-                  /* @__PURE__ */ jsx9(MediaVolumeSlider2, {
+                  /* @__PURE__ */ jsx9(MediaVolumeSlider, {
                     renderMuteButton,
                     renderVolumeSlider,
                     displayVerticalVolumeSlider
@@ -1994,9 +1967,7 @@ var Controls = ({
 
 // src/error-boundary.tsx
 import React7 from "react";
-import {
-jsx as jsx10
-} from "react/jsx-runtime";
+import { jsx as jsx10 } from "react/jsx-runtime";
 var errorStyle = {
   display: "flex",
   justifyContent: "center",
@@ -2034,7 +2005,7 @@ var PLAYER_CSS_CLASSNAME = "__remotion-player";
 var IS_NODE = typeof document === "undefined";
 
 // src/utils/use-click-prevention-on-double-click.ts
-import {useCallback as useCallback9, useMemo as useMemo10} from "react";
+import { useCallback as useCallback9, useMemo as useMemo10 } from "react";
 
 // src/utils/cancellable-promise.ts
 var cancellablePromise = (promise) => {
@@ -2062,7 +2033,7 @@ var cancellablePromise = (promise) => {
 var delay = (n) => new Promise((resolve) => setTimeout(resolve, n));
 
 // src/utils/use-cancellable-promises.ts
-import {useCallback as useCallback8, useMemo as useMemo9, useRef as useRef8} from "react";
+import { useCallback as useCallback8, useMemo as useMemo9, useRef as useRef8 } from "react";
 var useCancellablePromises = () => {
   const pendingPromises = useRef8([]);
   const appendPendingPromise = useCallback8((promise) => {
@@ -2126,11 +2097,7 @@ var useClickPreventionOnDoubleClick = (onClick, onDoubleClick, doubleClickToFull
 };
 
 // src/PlayerUI.tsx
-import {
-jsx as jsx11,
-jsxs as jsxs8,
-Fragment as Fragment3
-} from "react/jsx-runtime";
+import { jsx as jsx11, jsxs as jsxs8, Fragment as Fragment3 } from "react/jsx-runtime";
 var reactVersion = React8.version.split(".")[0];
 if (reactVersion === "0") {
   throw new Error(`Version ${reactVersion} of "react" is not supported by Remotion`);
@@ -2607,8 +2574,8 @@ var PlayerUI = ({
 var PlayerUI_default = forwardRef(PlayerUI);
 
 // src/SharedPlayerContext.tsx
-import {useCallback as useCallback11, useMemo as useMemo12, useState as useState12} from "react";
-import {Internals as Internals11} from "remotion";
+import { useCallback as useCallback11, useMemo as useMemo12, useState as useState12 } from "react";
+import { Internals as Internals11 } from "remotion";
 
 // src/volume-persistance.ts
 var VOLUME_PERSISTANCE_KEY = "remotion.volumePreference";
@@ -2635,9 +2602,7 @@ var getPreferredVolume = () => {
 };
 
 // src/SharedPlayerContext.tsx
-import {
-jsx as jsx12
-} from "react/jsx-runtime";
+import { jsx as jsx12 } from "react/jsx-runtime";
 var PLAYER_COMP_ID = "player-comp";
 var SharedPlayerContexts = ({
   children,
@@ -2834,16 +2799,14 @@ var validatePlaybackRate = (playbackRate) => {
 };
 
 // src/validate.ts
-import {NoReactInternals} from "remotion/no-react";
+import { NoReactInternals } from "remotion/no-react";
 var validateFps = NoReactInternals.validateFps;
 var validateDimension = NoReactInternals.validateDimension;
 var validateDurationInFrames = NoReactInternals.validateDurationInFrames;
 var validateDefaultAndInputProps = NoReactInternals.validateDefaultAndInputProps;
 
 // src/Player.tsx
-import {
-jsx as jsx13
-} from "react/jsx-runtime";
+import { jsx as jsx13 } from "react/jsx-runtime";
 var componentOrNullIfLazy = (props) => {
   if ("component" in props) {
     return props.component;
@@ -3054,28 +3017,28 @@ var forward = forwardRef2;
 var Player = forward(PlayerFn);
 // src/Thumbnail.tsx
 import {
-forwardRef as forwardRef4,
-useImperativeHandle as useImperativeHandle4,
-useLayoutEffect as useLayoutEffect2,
-useMemo as useMemo16,
-useRef as useRef12,
-useState as useState14
+  forwardRef as forwardRef4,
+  useImperativeHandle as useImperativeHandle4,
+  useLayoutEffect as useLayoutEffect2,
+  useMemo as useMemo16,
+  useRef as useRef12,
+  useState as useState14
 } from "react";
-import {Internals as Internals14, random as random2} from "remotion";
+import { Internals as Internals14, random as random2 } from "remotion";
 
 // src/ThumbnailUI.tsx
 import React11, {
-forwardRef as forwardRef3,
-Suspense as Suspense2,
-useCallback as useCallback12,
-useImperativeHandle as useImperativeHandle3,
-useMemo as useMemo15,
-useRef as useRef11
+  forwardRef as forwardRef3,
+  Suspense as Suspense2,
+  useCallback as useCallback12,
+  useImperativeHandle as useImperativeHandle3,
+  useMemo as useMemo15,
+  useRef as useRef11
 } from "react";
-import {Internals as Internals13} from "remotion";
+import { Internals as Internals13 } from "remotion";
 
 // src/use-thumbnail.ts
-import {useContext as useContext7, useMemo as useMemo14} from "react";
+import { useContext as useContext7, useMemo as useMemo14 } from "react";
 var useThumbnail = () => {
   const emitter = useContext7(ThumbnailEmitterContext);
   if (!emitter) {
@@ -3090,9 +3053,7 @@ var useThumbnail = () => {
 };
 
 // src/ThumbnailUI.tsx
-import {
-jsx as jsx14
-} from "react/jsx-runtime";
+import { jsx as jsx14 } from "react/jsx-runtime";
 var reactVersion2 = React11.version.split(".")[0];
 if (reactVersion2 === "0") {
   throw new Error(`Version ${reactVersion2} of "react" is not supported by Remotion`);
@@ -3207,9 +3168,7 @@ var ThumbnailUI = ({ style, inputProps, errorFallback, renderLoading, className:
 var ThumbnailUI_default = forwardRef3(ThumbnailUI);
 
 // src/Thumbnail.tsx
-import {
-jsx as jsx15
-} from "react/jsx-runtime";
+import { jsx as jsx15 } from "react/jsx-runtime";
 var ThumbnailFn = ({
   frameToDisplay,
   style,

package/package.json

@@ -3,7 +3,7 @@
     "url": "https://github.com/remotion-dev/remotion/tree/main/packages/player"
   },
   "name": "@remotion/player",
-  "version": "4.0.214",
+  "version": "4.0.215",
   "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.214"
+    "remotion": "4.0.215"
   },
   "peerDependencies": {
     "react": ">=16.8.0",