New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More

@remotion/player

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@remotion/player - npm Package Compare versions

Comparing version 3.0.0-lambda.288 to 3.0.0-pnpm.8

@@ -1,5 +0,4 @@

/// <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 +43,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;

@@ -18,3 +18,3 @@ "use strict";

// 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-pnpm.8+5cc910c87",
"description": "Remotion Player",

@@ -27,3 +27,3 @@ "main": "dist/index.js",

"dependencies": {
"remotion": "3.0.0-lambda.288+6ab6c681d"
"remotion": "3.0.0-pnpm.8+5cc910c87"
},

@@ -53,3 +53,3 @@ "peerDependencies": {

},
"gitHead": "6ab6c681d4f1d42b00b08ffd4dfb44c18c1cc6f1"
"gitHead": "5cc910c87ac178dff0e31c86516c896c7303d620"
}

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