@remotion/player - npm Package Compare versions

Comparing version 4.0.213 to 4.0.214

dist/cjs/calculate-scale.d.ts

@@ -11,3 +11,3 @@ import type { PreviewSize, VideoConfig } from 'remotion';
 export declare const calculateCanvasTransformation: ({ previewSize, compositionWidth, compositionHeight, canvasSize, }: {
-    previewSize: PreviewSize['size'];
+    previewSize: PreviewSize["size"];
     compositionWidth: number;
@@ -17,3 +17,3 @@ compositionHeight: number;
 }) => Layout;
-export declare const calculateOuterStyle: ({ config, style, canvasSize, overflowVisible, }: {
+export declare const calculateOuterStyle: ({ config, style, canvasSize, overflowVisible, layout, }: {
     config: VideoConfig | null;
@@ -23,2 +23,3 @@ style: React.CSSProperties | undefined;
     overflowVisible: boolean;
+    layout: Layout | null;
 }) => React.CSSProperties;
@@ -25,0 +26,0 @@ export declare const calculateContainerStyle: ({ config, canvasSize, layout, scale, overflowVisible, }: {

dist/cjs/calculate-scale.js

@@ -29,3 +29,3 @@ "use strict";
 exports.calculateCanvasTransformation = calculateCanvasTransformation;
-const calculateOuterStyle = ({ config, style, canvasSize, overflowVisible, }) => {
+const calculateOuterStyle = ({ config, style, canvasSize, overflowVisible, layout, }) => {
     if (!config) {
@@ -44,2 +44,3 @@ return {};
         }),
+        opacity: layout ? 1 : 0,
         ...style,
@@ -46,0 +47,0 @@ };

dist/cjs/DefaultPlayPauseButton.d.ts

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

dist/cjs/index.d.ts

@@ -1,2 +0,1 @@
-/// <reference types="react" />
 import './_check-rsc.js';
@@ -26,3 +25,3 @@ import type { CallbackListener, PlayerEventTypes } from './event-emitter.js';
         playing: boolean;
-        play: (e?: PointerEvent | import("react").SyntheticEvent<Element, Event> | undefined) => void;
+        play: (e?: import("react").SyntheticEvent | PointerEvent) => void;
         pause: () => void;
@@ -35,3 +34,3 @@ pauseAndReturnToPlayStart: () => void;
         isBuffering: () => boolean;
-        remotionInternal_currentFrameRef: import("react").MutableRefObject<number>;
+        remotionInternal_currentFrameRef: React.MutableRefObject<number>;
     };
@@ -44,5 +43,5 @@ usePlayback: ({ loop, playbackRate, moveToBeginningWhenEnded, inFrame, outFrame, frameRef, }: {
         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;
@@ -52,3 +51,3 @@ shouldApplyCssTransforms: boolean;
     calculateCanvasTransformation: ({ previewSize, compositionWidth, compositionHeight, canvasSize, }: {
-        previewSize: number | "auto";
+        previewSize: import("remotion").PreviewSize["size"];
         compositionWidth: number;
@@ -64,6 +63,6 @@ compositionHeight: 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;
@@ -70,0 +69,0 @@ }>;

dist/cjs/is-backgrounded.d.ts

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

dist/cjs/PlayerControls.js

@@ -177,6 +177,6 @@ "use strict";
     }, [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
@@ -183,0 +183,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/PlayerSeekBar.d.ts

@@ -1,2 +0,1 @@
-/// <reference types="react" />
 export declare const PlayerSeekBar: React.FC<{
@@ -3,0 +2,0 @@ durationInFrames: number;

dist/cjs/PlayerSeekBar.js

@@ -11,5 +11,4 @@ "use strict";
 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',
@@ -16,0 +15,0 @@ extrapolateRight: 'clamp',

dist/cjs/PlayerUI.d.ts

@@ -23,3 +23,3 @@ import React from 'react';
     readonly showVolumeControls: boolean;
-    readonly style?: React.CSSProperties | undefined;
+    readonly style?: React.CSSProperties;
     readonly clickToPlay: boolean;
@@ -31,3 +31,3 @@ readonly doubleClickToFullscreen: boolean;
     readonly renderLoading: RenderLoading | undefined;
-    readonly renderPoster: RenderLoading | undefined;
+    readonly renderPoster: RenderPoster | undefined;
     readonly className: string | undefined;
@@ -50,5 +50,5 @@ readonly moveToBeginningWhenEnded: boolean;
     readonly bufferStateDelayInMilliseconds: number;
-    readonly hideControlsWhenPointerDoesntMove: number | boolean;
+    readonly hideControlsWhenPointerDoesntMove: boolean | number;
     readonly overflowVisible: boolean;
 } & React.RefAttributes<PlayerRef>>;
 export default _default;

dist/cjs/PlayerUI.js

@@ -320,4 +320,10 @@ "use strict";
     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)(() => {
@@ -324,0 +330,0 @@ return (0, calculate_scale_js_1.calculateOuter)({ config, layout, scale, overflowVisible });

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

 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 };

dist/cjs/ThumbnailUI.d.ts

@@ -6,3 +6,3 @@ import React from 'react';
     inputProps: Record<string, unknown>;
-    style?: React.CSSProperties | undefined;
+    style?: React.CSSProperties;
     errorFallback: ErrorFallback;
@@ -9,0 +9,0 @@ renderLoading: RenderLoading | undefined;

dist/cjs/ThumbnailUI.js

@@ -73,4 +73,10 @@ "use strict";
     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)(() => {
@@ -77,0 +83,0 @@ return (0, calculate_scale_js_1.calculateOuter)({ config, layout, scale, overflowVisible });

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

@@ -5,6 +5,6 @@ import type { StandardLonghandProperties } from 'csstype';
     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;

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

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

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

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = useComponentVisible;
 const react_1 = require("react");
@@ -21,2 +22,1 @@ // hook to hide a popup/modal when clicked outside
 }
-exports.default = useComponentVisible;

package.json

@@ -6,3 +6,3 @@ {
   "name": "@remotion/player",
-  "version": "4.0.213",
+  "version": "4.0.214",
   "description": "React component for embedding a Remotion preview into your app",
@@ -32,3 +32,3 @@ "main": "dist/cjs/index.js",
   "dependencies": {
-    "remotion": "4.0.213"
+    "remotion": "4.0.214"
   },
@@ -62,3 +62,3 @@ "peerDependencies": {
     "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",
@@ -65,0 +65,0 @@ "prerelease": "cp ../../README.md ."

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

279883

increased by0.03%

Lines of code

7124

increased by0.31%

Dependency changes

• + Addedremotion@4.0.214(transitive)

• - Removedremotion@4.0.213(transitive)

• Updatedremotion@4.0.214