@remotion/player - npm Package Compare versions

Comparing version 2.2.0-alpha.9d9cdf5c to 2.2.0-alpha.c7551bfe

dist/event-emitter.d.ts

@@ -1,2 +0,1 @@
-import './event-target-polyfill';
 declare type SeekPayload = {
@@ -8,14 +7,21 @@ frame: number;
 };
-interface StateEventMap {
-    seeked: CustomEvent<SeekPayload>;
-    pause: CustomEvent<undefined>;
-    play: CustomEvent<undefined>;
-    ended: CustomEvent<undefined>;
-    error: CustomEvent<ErrorPayload>;
-}
-export interface PlayerEventTarget extends EventTarget {
-    addEventListener<K extends keyof StateEventMap>(type: K, listener: (ev: StateEventMap[K]) => void, options?: boolean | AddEventListenerOptions): void;
-    addEventListener(type: string, callback: EventListenerOrEventListenerObject | null, options?: EventListenerOptions | boolean): void;
-}
-export declare class PlayerEmitter extends EventTarget {
+declare type StateEventMap = {
+    seeked: SeekPayload;
+    pause: undefined;
+    play: undefined;
+    ended: undefined;
+    error: ErrorPayload;
+};
+declare type EventTypes = keyof StateEventMap;
+declare type CallbackListener<T extends EventTypes> = (data: {
+    detail: StateEventMap[T];
+}) => void;
+declare type Listeners = {
+    [EventType in EventTypes]: CallbackListener<EventType>[];
+};
+export declare class PlayerEmitter {
+    listeners: Listeners;
+    addEventListener<Q extends EventTypes>(name: Q, callback: CallbackListener<Q>): void;
+    removeEventListener<Q extends EventTypes>(name: Q, callback: CallbackListener<Q>): void;
+    private dispatchEvent;
     dispatchSeek(frame: number): void;
@@ -22,0 +28,0 @@ dispatchPause(): void;

dist/event-emitter.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.PlayerEmitter = void 0;
-require("./event-target-polyfill");
-class PlayerEmitter extends EventTarget {
+class PlayerEmitter {
+    constructor() {
+        this.listeners = {
+            ended: [],
+            error: [],
+            pause: [],
+            play: [],
+            seeked: [],
+        };
+    }
+    addEventListener(name, callback) {
+        this.listeners[name].push(callback);
+    }
+    removeEventListener(name, callback) {
+        this.listeners[name] = this.listeners[name].filter((l) => l !== callback);
+    }
+    dispatchEvent(dispatchName, context) {
+        this.listeners[dispatchName].forEach((callback) => {
+            callback({ detail: context });
+        });
+    }
     dispatchSeek(frame) {
-        this.dispatchEvent(new CustomEvent('seeked', {
-            detail: {
-                frame,
-            },
-        }));
+        this.dispatchEvent('seeked', {
+            frame,
+        });
     }
     dispatchPause() {
-        this.dispatchEvent(new CustomEvent('pause'));
+        this.dispatchEvent('pause', undefined);
     }
     dispatchPlay() {
-        this.dispatchEvent(new CustomEvent('play'));
+        this.dispatchEvent('play', undefined);
     }
     dispatchEnded() {
-        this.dispatchEvent(new CustomEvent('ended'));
+        this.dispatchEvent('ended', undefined);
     }
     dispatchError(error) {
-        this.dispatchEvent(new CustomEvent('error', {
-            detail: {
-                error,
-            },
-        }));
+        this.dispatchEvent('error', {
+            error,
+        });
     }
@@ -29,0 +44,0 @@ }

dist/player-methods.d.ts

@@ -1,2 +0,2 @@
-import { PlayerEventTarget } from './event-emitter';
+import { PlayerEmitter } from './event-emitter';
 export declare type PlayerMethods = {
@@ -17,3 +17,3 @@ play: () => void;
 };
-export declare type PlayerRef = PlayerEventTarget & PlayerMethods;
+export declare type PlayerRef = PlayerEmitter & PlayerMethods;
 //# sourceMappingURL=player-methods.d.ts.map

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,3 +16,8 @@ "use strict";
 remotion_1.Internals.CSSUtils.injectCSS(remotion_1.Internals.CSSUtils.makeDefaultCSS(`.${player_css_classname_1.PLAYER_CSS_CLASSNAME}`));
-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) => {
+    react_1.useLayoutEffect(() => {
+        if (typeof window !== 'undefined') {
+            window.remotion_isPlayer = true;
+        }
+    }, []);
     const component = remotion_1.Internals.useLazyComponent(componentProps);
@@ -32,6 +37,6 @@ const [frame, setFrame] = react_1.useState(0);
     }
-    remotion_1.Internals.validateDimension(compositionHeight, 'compositionHeight');
-    remotion_1.Internals.validateDimension(compositionWidth, 'compositionWidth');
-    remotion_1.Internals.validateDurationInFrames(durationInFrames);
-    remotion_1.Internals.validateFps(fps);
+    remotion_1.Internals.validateDimension(compositionHeight, 'compositionHeight', 'of the <Player /> component');
+    remotion_1.Internals.validateDimension(compositionWidth, 'compositionWidth', 'of the <Player /> component');
+    remotion_1.Internals.validateDurationInFrames(durationInFrames, 'of the <Player/> component');
+    remotion_1.Internals.validateFps(fps, 'as a prop of the <Player/> component');
     if (typeof controls !== 'boolean' && typeof controls !== 'undefined') {
@@ -46,2 +51,6 @@ throw new TypeError(`'controls' must be a boolean or undefined but got '${typeof controls}' instead`);
     }
+    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' &&
@@ -125,3 +134,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));
 };
@@ -128,0 +139,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

@@ -53,3 +53,3 @@ "use strict";
     catch (e) {
-        expect(e.message).toMatch(/The "durationInFrames" of a composition must be a number, but you passed a value of type undefined/);
+        expect(e.message).toMatch(/The "durationInFrames" prop of the <Player\/> component must be a number, but you passed a value of type undefined/);
     }
@@ -64,2 +64,3 @@ });
     ['clickToPlay'],
+    ['doubleClickToFullscreen'],
 ])('No durationInFrames should give errors %s', (a) => {
@@ -66,0 +67,0 @@ const props = {};

dist/use-playback.js

@@ -52,5 +52,5 @@ "use strict";
         };
-    }, [config, loop, pause, playing, setFrame]);
+    }, [config, loop, pause, playing, setFrame, emitter]);
 };
 exports.usePlayback = usePlayback;
 //# sourceMappingURL=use-playback.js.map

package.json

 {
 	"name": "@remotion/player",
-	"version": "2.2.0-alpha.9d9cdf5c",
+	"version": "2.2.0-alpha.c7551bfe",
 	"description": "Remotion Player",
@@ -14,3 +14,3 @@ "main": "dist/index.js",
 	"repository": {
-		"url": "https://github.com/JonnyBurger/remotion"
+		"url": "https://github.com/remotion-dev/remotion"
 	},
@@ -21,5 +21,5 @@ "files": [
 	],
-	"author": "Jonny Burger <[e-mail]>",
+	"author": "Jonny Burger <[e-mail]>",
 	"maintainers": [
-		"Jonny Burger <[e-mail]>",
+		"Jonny Burger <[e-mail]>",
 		"Shankhadeep Dey <[e-mail]>"
@@ -29,3 +29,3 @@ ],
 	"dependencies": {
-		"remotion": "2.2.0-alpha.9d9cdf5c"
+		"remotion": "2.2.0-alpha.c7551bfe"
 	},
@@ -41,3 +41,3 @@ "peerDependencies": {
 		"@types/node": "^14.14.14",
-		"@types/react": "^17.0.0",
+		"@types/react": "17.0.8",
 		"@types/react-dom": "^17.0.0",
@@ -44,0 +44,0 @@ "eslint": "^7.4.0",

README.md

 ### Remotion Player
 
+[![NPM Version](http://img.shields.io/npm/v/@remotion/player.svg?style=flat)](https://www.npmjs.org/package/@remotion/player)
+[![NPM Downloads](https://img.shields.io/npm/dm/@remotion/player.svg?style=flat)](https://npmcharts.com/compare/@remotion/player?minimal=true)
+[![Install Size](https://packagephobia.now.sh/badge?p=@remotion/player)](https://packagephobia.now.sh/result?p=@remotion/player)
+
 This package allows you to include a Remotion video in your React app.
 Full documentation can be found under http://remotion.dev/docs/player.

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

No repository

Supply chain risk

Package does not have a linked source code repository. Without this field, a package will have no reference to the location of the source code use to generate the package.

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

No repository

Supply chain risk

Package does not have a linked source code repository. Without this field, a package will have no reference to the location of the source code use to generate the package.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

141661

increased by10.12%

Number of package files

130

increased by18.18%

Lines of code

1818

increased by9.52%

Number of lines in readme file

9

increased by80%

Dependency changes

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

• - Removedremotion@2.2.0-alpha.9d9cdf5c(transitive)

• Updatedremotion@2.2.0-alpha.c7551bfe