Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
@remotion/player
Advanced tools
@remotion/player - npm Package Compare versions
Comparing version 2.2.0-alpha.ddf867ea to 2.2.0-alpha.f837594a
@@ -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; |
@@ -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; |
@@ -13,2 +13,3 @@ import React from 'react'; | ||
| clickToPlay: boolean; | ||
| doubleClickToFullscreen: boolean; | ||
| setMediaVolume: (v: number) => void; | ||
@@ -15,0 +16,0 @@ setMediaMuted: (v: boolean) => void; |
@@ -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 |
@@ -63,2 +63,3 @@ "use strict"; | ||
| ['clickToPlay'], | ||
| ['doubleClickToFullscreen'], | ||
| ])('No durationInFrames should give errors %s', (a) => { | ||
@@ -65,0 +66,0 @@ const props = {}; |
| { | ||
| "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": { |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
New alerts
License Policy Violation
LicenseThis 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
LicenseThis 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
- increased by1.27%
139581
- Lines of code
- increased by0.9%
1791
Dependency changes
+ Addedremotion@2.2.0-alpha.f837594a(transitive)
- Removedremotion@2.2.0-alpha.ddf867ea(transitive)