New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →
@remotion/player
Advanced tools
@remotion/player - npm Package Compare versions
Comparing version 3.0.0-lambda.288 to 3.0.0-lambda.295
| /// <reference types="react" /> | ||
| import { CallbackListener, EventTypes, PlayerEmitter } from './event-emitter'; | ||
| import { ErrorFallback } from './Player'; | ||
| export { Player } from './Player'; | ||
| export { Player, ErrorFallback } from './Player'; | ||
| export type { RenderLoading } from './PlayerUI'; | ||
| export { PlayerMethods, PlayerRef } from './player-methods'; | ||
@@ -44,3 +44,3 @@ export { PreviewSize } from './utils/preview-size'; | ||
| }; | ||
| export type { ErrorFallback, CallbackListener, EventTypes }; | ||
| export type { CallbackListener, EventTypes }; | ||
| //# sourceMappingURL=index.d.ts.map |
| import React, { MutableRefObject } from 'react'; | ||
| import { CompProps } from 'remotion'; | ||
| import { PlayerRef } from './player-methods'; | ||
| import { RenderLoading } from './PlayerUI'; | ||
| declare type PropsIfHasProps<Props> = {} extends Props ? { | ||
@@ -29,4 +30,5 @@ inputProps?: Props; | ||
| playbackRate?: number; | ||
| renderLoading?: RenderLoading; | ||
| } & PropsIfHasProps<T> & CompProps<T>; | ||
| export declare const PlayerFn: <T>({ durationInFrames, compositionHeight, compositionWidth, fps, inputProps, style, controls, loop, autoPlay, showVolumeControls, allowFullscreen, clickToPlay, doubleClickToFullscreen, spaceKeyToPlayOrPause, numberOfSharedAudioTags, errorFallback, playbackRate, ...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, spaceKeyToPlayOrPause, numberOfSharedAudioTags, errorFallback, playbackRate, renderLoading, ...componentProps }: PlayerProps<T>, ref: MutableRefObject<PlayerRef>) => JSX.Element; | ||
| declare module 'react' { | ||
@@ -33,0 +35,0 @@ function forwardRef<T, P = {}>(render: (props: P, ref: React.MutableRefObject<T>) => React.ReactElement | null): (props: P & React.RefAttributes<T>) => React.ReactElement | null; |
@@ -16,5 +16,5 @@ "use strict"; | ||
| const volume_persistance_1 = require("./volume-persistance"); | ||
| remotion_1.Internals.CSSUtils.injectCSS(remotion_1.Internals.CSSUtils.makeDefaultCSS(`.${player_css_classname_1.PLAYER_CSS_CLASSNAME}`)); | ||
| remotion_1.Internals.CSSUtils.injectCSS(remotion_1.Internals.CSSUtils.makeDefaultCSS(`.${player_css_classname_1.PLAYER_CSS_CLASSNAME}`, '#fff')); | ||
| // eslint-disable-next-line complexity | ||
| const PlayerFn = ({ durationInFrames, compositionHeight, compositionWidth, fps, inputProps, style, controls = false, loop = false, autoPlay = false, showVolumeControls = true, allowFullscreen = true, clickToPlay, doubleClickToFullscreen = false, spaceKeyToPlayOrPause = true, numberOfSharedAudioTags = 5, errorFallback = () => '⚠️', playbackRate = 1, ...componentProps }, ref) => { | ||
| const PlayerFn = ({ durationInFrames, compositionHeight, compositionWidth, fps, inputProps, style, controls = false, loop = false, autoPlay = false, showVolumeControls = true, allowFullscreen = true, clickToPlay, doubleClickToFullscreen = false, spaceKeyToPlayOrPause = true, numberOfSharedAudioTags = 5, errorFallback = () => '⚠️', playbackRate = 1, renderLoading, ...componentProps }, ref) => { | ||
| if (typeof window !== 'undefined') { | ||
@@ -34,2 +34,3 @@ // eslint-disable-next-line react-hooks/rules-of-hooks | ||
| const [mediaVolume, setMediaVolume] = (0, react_1.useState)((0, volume_persistance_1.getPreferredVolume)()); | ||
| const audioAndVideoTags = (0, react_1.useRef)([]); | ||
| const imperativePlaying = (0, react_1.useRef)(false); | ||
@@ -101,2 +102,3 @@ if (typeof compositionHeight !== 'number') { | ||
| }, | ||
| audioAndVideoTags, | ||
| }; | ||
@@ -134,2 +136,3 @@ }, [frame, playbackRate, playing, rootId]); | ||
| nonce: 777, | ||
| defaultProps: undefined, | ||
| }, | ||
@@ -159,3 +162,3 @@ ], | ||
| }, [inputProps]); | ||
| return ((0, jsx_runtime_1.jsx)(remotion_1.Internals.Timeline.TimelineContext.Provider, Object.assign({ value: timelineContextValue }, { children: (0, jsx_runtime_1.jsx)(remotion_1.Internals.Timeline.SetTimelineContext.Provider, Object.assign({ value: setTimelineContextValue }, { children: (0, jsx_runtime_1.jsx)(remotion_1.Internals.CompositionManager.Provider, Object.assign({ value: compositionManagerContext }, { children: (0, jsx_runtime_1.jsx)(remotion_1.Internals.MediaVolumeContext.Provider, Object.assign({ value: mediaVolumeContextValue }, { children: (0, jsx_runtime_1.jsx)(remotion_1.Internals.SetMediaVolumeContext.Provider, Object.assign({ value: setMediaVolumeContextValue }, { children: (0, jsx_runtime_1.jsx)(remotion_1.Internals.SharedAudioContextProvider, Object.assign({ numberOfAudioTags: numberOfSharedAudioTags }, { children: (0, jsx_runtime_1.jsx)(emitter_context_1.PlayerEventEmitterContext.Provider, Object.assign({ value: emitter }, { children: (0, jsx_runtime_1.jsx)(PlayerUI_1.default, { ref: rootRef, autoPlay: Boolean(autoPlay), loop: Boolean(loop), controls: Boolean(controls), errorFallback: errorFallback, style: style, inputProps: passedInputProps, allowFullscreen: Boolean(allowFullscreen), clickToPlay: typeof clickToPlay === 'boolean' | ||
| return ((0, jsx_runtime_1.jsx)(remotion_1.Internals.Timeline.TimelineContext.Provider, Object.assign({ value: timelineContextValue }, { children: (0, jsx_runtime_1.jsx)(remotion_1.Internals.Timeline.SetTimelineContext.Provider, Object.assign({ value: setTimelineContextValue }, { children: (0, jsx_runtime_1.jsx)(remotion_1.Internals.CompositionManager.Provider, Object.assign({ value: compositionManagerContext }, { children: (0, jsx_runtime_1.jsx)(remotion_1.Internals.MediaVolumeContext.Provider, Object.assign({ value: mediaVolumeContextValue }, { children: (0, jsx_runtime_1.jsx)(remotion_1.Internals.SetMediaVolumeContext.Provider, Object.assign({ value: setMediaVolumeContextValue }, { children: (0, jsx_runtime_1.jsx)(remotion_1.Internals.SharedAudioContextProvider, Object.assign({ numberOfAudioTags: numberOfSharedAudioTags }, { children: (0, jsx_runtime_1.jsx)(emitter_context_1.PlayerEventEmitterContext.Provider, Object.assign({ value: emitter }, { children: (0, jsx_runtime_1.jsx)(PlayerUI_1.default, { ref: rootRef, renderLoading: renderLoading, autoPlay: Boolean(autoPlay), loop: Boolean(loop), controls: Boolean(controls), errorFallback: errorFallback, style: style, inputProps: passedInputProps, allowFullscreen: Boolean(allowFullscreen), clickToPlay: typeof clickToPlay === 'boolean' | ||
| ? clickToPlay | ||
@@ -162,0 +165,0 @@ : Boolean(controls), showVolumeControls: Boolean(showVolumeControls), setMediaVolume: setMediaVolumeAndPersist, mediaVolume: mediaVolume, mediaMuted: mediaMuted, doubleClickToFullscreen: Boolean(doubleClickToFullscreen), setMediaMuted: setMediaMuted, spaceKeyToPlayOrPause: Boolean(spaceKeyToPlayOrPause), playbackRate: playbackRate }, void 0) }), void 0) }), void 0) }), void 0) }), void 0) }), void 0) }), void 0) }), void 0)); |
| import React from 'react'; | ||
| import { PlayerRef } from './player-methods'; | ||
| export declare type ErrorFallback = (info: { | ||
| error: Error; | ||
| }) => React.ReactNode; | ||
| export declare type RenderLoading = (canvas: { | ||
| height: number; | ||
| width: number; | ||
| }) => React.ReactChild; | ||
| declare const _default: (props: { | ||
@@ -18,6 +25,5 @@ controls: boolean; | ||
| mediaVolume: number; | ||
| errorFallback: (info: { | ||
| error: Error; | ||
| }) => React.ReactNode; | ||
| errorFallback: ErrorFallback; | ||
| playbackRate: number; | ||
| renderLoading?: RenderLoading | undefined; | ||
| } & { | ||
@@ -24,0 +30,0 @@ children?: React.ReactNode; |
@@ -18,3 +18,3 @@ "use strict"; | ||
| const use_element_size_1 = require("./utils/use-element-size"); | ||
| const PlayerUI = ({ controls, style, loop, autoPlay, allowFullscreen, inputProps, clickToPlay, showVolumeControls, mediaVolume, mediaMuted, doubleClickToFullscreen, setMediaMuted, setMediaVolume, spaceKeyToPlayOrPause, errorFallback, playbackRate, }, ref) => { | ||
| const PlayerUI = ({ controls, style, loop, autoPlay, allowFullscreen, inputProps, clickToPlay, showVolumeControls, mediaVolume, mediaMuted, doubleClickToFullscreen, setMediaMuted, setMediaVolume, spaceKeyToPlayOrPause, errorFallback, playbackRate, renderLoading, }, ref) => { | ||
| var _a, _b, _c; | ||
@@ -251,10 +251,16 @@ const config = remotion_1.Internals.useUnsafeVideoConfig(); | ||
| } | ||
| const content = ((0, jsx_runtime_1.jsxs)("div", Object.assign({ ref: container, style: outerStyle }, { children: [(0, jsx_runtime_1.jsx)("div", Object.assign({ style: outer, onClick: clickToPlay ? handleClick : undefined, onDoubleClick: doubleClickToFullscreen ? handleDoubleClick : undefined }, { children: (0, jsx_runtime_1.jsx)("div", Object.assign({ style: containerStyle, className: player_css_classname_1.PLAYER_CSS_CLASSNAME }, { children: VideoComponent ? ((0, jsx_runtime_1.jsx)(error_boundary_1.ErrorBoundary, Object.assign({ onError: onError, errorFallback: errorFallback }, { children: (0, jsx_runtime_1.jsx)(VideoComponent, Object.assign({}, ((_b = video === null || video === void 0 ? void 0 : video.props) !== null && _b !== void 0 ? _b : {}), ((_c = inputProps) !== null && _c !== void 0 ? _c : {})), void 0) }), void 0)) : null }), void 0) }), void 0), controls ? ((0, 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, spaceKeyToPlayOrPause: spaceKeyToPlayOrPause }, void 0)) : null] }), void 0)); | ||
| const content = ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", Object.assign({ style: outer, onClick: clickToPlay ? handleClick : undefined, onDoubleClick: doubleClickToFullscreen ? handleDoubleClick : undefined }, { children: (0, jsx_runtime_1.jsx)("div", Object.assign({ style: containerStyle, className: player_css_classname_1.PLAYER_CSS_CLASSNAME }, { children: VideoComponent ? ((0, jsx_runtime_1.jsx)(error_boundary_1.ErrorBoundary, Object.assign({ onError: onError, errorFallback: errorFallback }, { children: (0, jsx_runtime_1.jsx)(VideoComponent, Object.assign({}, ((_b = video === null || video === void 0 ? void 0 : video.defaultProps) !== null && _b !== void 0 ? _b : {}), ((_c = inputProps) !== null && _c !== void 0 ? _c : {})), void 0) }), void 0)) : null }), void 0) }), void 0), controls ? ((0, 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, spaceKeyToPlayOrPause: spaceKeyToPlayOrPause }, void 0)) : null] }, void 0)); | ||
| // Don't render suspense on Node.js | ||
| if (is_node_1.IS_NODE) { | ||
| return content; | ||
| return ((0, jsx_runtime_1.jsx)("div", Object.assign({ ref: container, style: outerStyle }, { children: content }), void 0)); | ||
| } | ||
| return (0, jsx_runtime_1.jsx)(react_1.Suspense, Object.assign({ fallback: (0, jsx_runtime_1.jsx)("h1", { children: "Loading..." }, void 0) }, { children: content }), void 0); | ||
| const loadingMarkup = renderLoading | ||
| ? renderLoading({ | ||
| height: outerStyle.height, | ||
| width: outerStyle.width, | ||
| }) | ||
| : null; | ||
| return ((0, jsx_runtime_1.jsx)("div", Object.assign({ ref: container, style: outerStyle }, { children: (0, jsx_runtime_1.jsx)(react_1.Suspense, Object.assign({ fallback: loadingMarkup }, { children: content }), void 0) }), void 0)); | ||
| }; | ||
| exports.default = (0, react_1.forwardRef)(PlayerUI); | ||
| //# sourceMappingURL=PlayerUI.js.map |
@@ -14,2 +14,3 @@ "use strict"; | ||
| const audioContext = (0, react_1.useContext)(remotion_1.Internals.SharedAudioContext); | ||
| const { audioAndVideoTags } = (0, react_1.useContext)(remotion_1.Internals.Timeline.TimelineContext); | ||
| const frameRef = (0, react_1.useRef)(); | ||
@@ -36,9 +37,25 @@ frameRef.current = frame; | ||
| } | ||
| /** | ||
| * Play silent audio tags to warm them up for autoplay | ||
| */ | ||
| if (audioContext && audioContext.numberOfAudioTags > 0 && e) { | ||
| audioContext.playAllAudios(); | ||
| } | ||
| /** | ||
| * Play audios and videos directly here so they can benefit from | ||
| * being triggered by a click | ||
| */ | ||
| audioAndVideoTags.current.forEach((a) => a.play()); | ||
| imperativePlaying.current = true; | ||
| setPlaying(true); | ||
| emitter.dispatchPlay(); | ||
| }, [imperativePlaying, isLastFrame, audioContext, setPlaying, emitter, seek]); | ||
| }, [ | ||
| imperativePlaying, | ||
| isLastFrame, | ||
| audioContext, | ||
| setPlaying, | ||
| emitter, | ||
| seek, | ||
| audioAndVideoTags, | ||
| ]); | ||
| const pause = (0, react_1.useCallback)(() => { | ||
@@ -45,0 +62,0 @@ if (imperativePlaying.current) { |
| { | ||
| "name": "@remotion/player", | ||
| "version": "3.0.0-lambda.288+6ab6c681d", | ||
| "version": "3.0.0-lambda.295+27d414600", | ||
| "description": "Remotion Player", | ||
@@ -27,3 +27,3 @@ "main": "dist/index.js", | ||
| "dependencies": { | ||
| "remotion": "3.0.0-lambda.288+6ab6c681d" | ||
| "remotion": "3.0.0-lambda.295+27d414600" | ||
| }, | ||
@@ -53,3 +53,3 @@ "peerDependencies": { | ||
| }, | ||
| "gitHead": "6ab6c681d4f1d42b00b08ffd4dfb44c18c1cc6f1" | ||
| "gitHead": "27d414600609e5076fc3b6144a352389dcb22f83" | ||
| } |
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
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
Manifest confusion
Supply chain riskThis package has inconsistent metadata. This could be malicious or caused by an error when publishing the package.
Found 1 instance in 1 package
Fixed alerts
Manifest confusion
Supply chain riskThis package has inconsistent metadata. This could be malicious or caused by an error when publishing the package.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by1.23%
177081
- Lines of code
- increased by1.57%
2206