@remotion/player - npm Package Compare versions

Comparing version 2.2.0-alpha.ddf867ea to 2.2.0-alpha.f837594a

dist/Player.d.ts

@@ -21,5 +21,5 @@ import React, { MutableRefObject } from 'react';
     clickToPlay?: boolean;
-    inputProps?: unknown;
+    doubleClickToFullscreen?: boolean;
 } & PropsIfHasProps<T> & CompProps<T>;
-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;
+export declare const PlayerFn: <T>({ durationInFrames, compositionHeight, compositionWidth, fps, inputProps, style, controls, loop, autoPlay, showVolumeControls, allowFullscreen, clickToPlay, doubleClickToFullscreen, ...componentProps }: PlayerProps<T>, ref: MutableRefObject<PlayerRef>) => JSX.Element;
 declare module 'react' {
@@ -26,0 +26,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

@@ -16,6 +16,3 @@ "use strict";
 remotion_1.Internals.CSSUtils.injectCSS(remotion_1.Internals.CSSUtils.makeDefaultCSS(`.${player_css_classname_1.PLAYER_CSS_CLASSNAME}`));
-if (typeof window !== 'undefined') {
-    window.remotion_isPlayer = true;
-}
-const PlayerFn = ({ durationInFrames, compositionHeight, compositionWidth, fps, inputProps, style, controls = false, loop = false, autoPlay = false, showVolumeControls = true, allowFullscreen = true, clickToPlay = true, ...componentProps }, ref) => {
+const PlayerFn = ({ durationInFrames, compositionHeight, compositionWidth, fps, inputProps, style, controls = false, loop = false, autoPlay = false, showVolumeControls = true, allowFullscreen = true, clickToPlay, doubleClickToFullscreen = false, ...componentProps }, ref) => {
     const component = remotion_1.Internals.useLazyComponent(componentProps);
@@ -35,4 +32,4 @@ const [frame, setFrame] = react_1.useState(0);
     }
-    remotion_1.Internals.validateDimension(compositionHeight, 'compositionHeight');
-    remotion_1.Internals.validateDimension(compositionWidth, 'compositionWidth');
+    remotion_1.Internals.validateDimension(compositionHeight, 'compositionHeight', 'Player');
+    remotion_1.Internals.validateDimension(compositionWidth, 'compositionWidth', 'Player');
     remotion_1.Internals.validateDurationInFrames(durationInFrames);
@@ -49,2 +46,6 @@ remotion_1.Internals.validateFps(fps);
     }
+    if (typeof doubleClickToFullscreen !== 'boolean' &&
+        typeof doubleClickToFullscreen !== 'undefined') {
+        throw new TypeError(`'doubleClickToFullscreen' must be a boolean or undefined but got '${typeof doubleClickToFullscreen}' instead`);
+    }
     if (typeof showVolumeControls !== 'boolean' &&
@@ -128,3 +129,5 @@ typeof showVolumeControls !== 'undefined') {
     }, [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));
+    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: typeof clickToPlay === 'boolean'
+                                    ? clickToPlay
+                                    : Boolean(controls), showVolumeControls: Boolean(showVolumeControls), setMediaVolume: setMediaVolumeAndPersist, mediaVolume: mediaVolume, mediaMuted: mediaMuted, doubleClickToFullscreen: Boolean(doubleClickToFullscreen), setMediaMuted: setMediaMuted }, void 0) }), void 0) }), void 0) }), void 0) }), void 0) }), void 0) }), void 0));
 };
@@ -131,0 +134,0 @@ exports.PlayerFn = PlayerFn;

dist/PlayerUI.d.ts

@@ -13,2 +13,3 @@ import React from 'react';
     clickToPlay: boolean;
+    doubleClickToFullscreen: boolean;
     setMediaVolume: (v: number) => void;
@@ -15,0 +16,0 @@ setMediaMuted: (v: boolean) => void;

dist/PlayerUI.js

@@ -16,4 +16,5 @@ "use strict";
 const is_node_1 = require("./utils/is-node");
+const use_click_prevention_on_double_click_1 = require("./utils/use-click-prevention-on-double-click");
 const use_element_size_1 = require("./utils/use-element-size");
-const PlayerUI = ({ controls, style, loop, autoPlay, allowFullscreen, inputProps, clickToPlay, showVolumeControls, mediaVolume, mediaMuted, setMediaMuted, setMediaVolume, }, ref) => {
+const PlayerUI = ({ controls, style, loop, autoPlay, allowFullscreen, inputProps, clickToPlay, showVolumeControls, mediaVolume, mediaMuted, doubleClickToFullscreen, setMediaMuted, setMediaVolume, }, ref) => {
     var _a, _b;
@@ -211,2 +212,11 @@ const config = remotion_1.Internals.useUnsafeVideoConfig();
     }, [toggle]);
+    const onDoubleClick = react_1.useCallback(() => {
+        if (isFullscreen) {
+            exitFullscreen();
+        }
+        else {
+            requestFullscreen();
+        }
+    }, [exitFullscreen, isFullscreen, requestFullscreen]);
+    const [handleClick, handleDoubleClick] = use_click_prevention_on_double_click_1.useClickPreventionOnDoubleClick(onSingleClick, onDoubleClick, doubleClickToFullscreen);
     react_1.useEffect(() => {
@@ -221,3 +231,3 @@ if (shouldAutoplay) {
     }
-    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),
+    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 ? handleClick : undefined, onDoubleClick: doubleClickToFullscreen ? handleDoubleClick : 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));
@@ -224,0 +234,0 @@ // Don't render suspense on Node.js

dist/test/validate-prop.test.js

@@ -63,2 +63,3 @@ "use strict";
     ['clickToPlay'],
+    ['doubleClickToFullscreen'],
 ])('No durationInFrames should give errors %s', (a) => {
@@ -65,0 +66,0 @@ const props = {};

package.json

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

No alert changes

Improved metrics

Total package byte prevSize

139581

increased by1.27%

Lines of code

1791

increased by0.9%

Dependency changes

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

• - [e-mail]867ea(transitive)

• Updatedremotion@2.2.0-alpha.f837594a