@remotion/player 4.0.251 → 4.0.253
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/cjs/Player.d.ts
CHANGED
|
@@ -56,6 +56,7 @@ export type PlayerProps<Schema extends AnyZodObject, Props extends Record<string
|
|
|
56
56
|
readonly browserMediaControlsBehavior?: BrowserMediaControlsBehavior;
|
|
57
57
|
readonly overrideInternalClassName?: string;
|
|
58
58
|
readonly logLevel?: LogLevel;
|
|
59
|
+
readonly acknowledgeRemotionLicense?: boolean;
|
|
59
60
|
} & CompProps<Props> & PropsIfHasProps<Schema, Props>;
|
|
60
61
|
export type PlayerPropsWithoutZod<Props extends Record<string, unknown>> = PlayerProps<AnyZodObject, Props>;
|
|
61
62
|
export declare const componentOrNullIfLazy: <Props>(props: CompProps<Props>) => ComponentType<Props> | null;
|
package/dist/cjs/Player.js
CHANGED
|
@@ -11,6 +11,7 @@ const EmitterProvider_js_1 = require("./EmitterProvider.js");
|
|
|
11
11
|
const PlayerUI_js_1 = __importDefault(require("./PlayerUI.js"));
|
|
12
12
|
const SharedPlayerContext_js_1 = require("./SharedPlayerContext.js");
|
|
13
13
|
const player_css_classname_js_1 = require("./player-css-classname.js");
|
|
14
|
+
const use_remotion_license_acknowledge_js_1 = require("./use-remotion-license-acknowledge.js");
|
|
14
15
|
const validate_in_out_frame_js_1 = require("./utils/validate-in-out-frame.js");
|
|
15
16
|
const validate_initial_frame_js_1 = require("./utils/validate-initial-frame.js");
|
|
16
17
|
const validate_playbackrate_js_1 = require("./utils/validate-playbackrate.js");
|
|
@@ -22,7 +23,7 @@ const componentOrNullIfLazy = (props) => {
|
|
|
22
23
|
return null;
|
|
23
24
|
};
|
|
24
25
|
exports.componentOrNullIfLazy = componentOrNullIfLazy;
|
|
25
|
-
const PlayerFn = ({ durationInFrames, compositionHeight, compositionWidth, fps, inputProps, style, controls = false, loop = false, autoPlay = false, showVolumeControls = true, allowFullscreen = true, clickToPlay, doubleClickToFullscreen = false, spaceKeyToPlayOrPause = true, moveToBeginningWhenEnded = true, numberOfSharedAudioTags = 5, errorFallback = () => '⚠️', playbackRate = 1, renderLoading, className, showPosterWhenUnplayed, showPosterWhenEnded, showPosterWhenPaused, showPosterWhenBuffering, initialFrame, renderPoster, inFrame, outFrame, initiallyShowControls, renderFullscreenButton, renderPlayPauseButton, renderVolumeSlider, alwaysShowControls = false, initiallyMuted = false, showPlaybackRateControl = false, posterFillMode = 'player-size', bufferStateDelayInMilliseconds, hideControlsWhenPointerDoesntMove = true, overflowVisible = false, renderMuteButton, browserMediaControlsBehavior: passedBrowserMediaControlsBehavior, overrideInternalClassName, logLevel = 'info', ...componentProps }, ref) => {
|
|
26
|
+
const PlayerFn = ({ durationInFrames, compositionHeight, compositionWidth, fps, inputProps, style, controls = false, loop = false, autoPlay = false, showVolumeControls = true, allowFullscreen = true, clickToPlay, doubleClickToFullscreen = false, spaceKeyToPlayOrPause = true, moveToBeginningWhenEnded = true, numberOfSharedAudioTags = 5, errorFallback = () => '⚠️', playbackRate = 1, renderLoading, className, showPosterWhenUnplayed, showPosterWhenEnded, showPosterWhenPaused, showPosterWhenBuffering, initialFrame, renderPoster, inFrame, outFrame, initiallyShowControls, renderFullscreenButton, renderPlayPauseButton, renderVolumeSlider, alwaysShowControls = false, initiallyMuted = false, showPlaybackRateControl = false, posterFillMode = 'player-size', bufferStateDelayInMilliseconds, hideControlsWhenPointerDoesntMove = true, overflowVisible = false, renderMuteButton, browserMediaControlsBehavior: passedBrowserMediaControlsBehavior, overrideInternalClassName, logLevel = 'info', acknowledgeRemotionLicense, ...componentProps }, ref) => {
|
|
26
27
|
if (typeof window !== 'undefined') {
|
|
27
28
|
// eslint-disable-next-line react-hooks/rules-of-hooks
|
|
28
29
|
(0, react_1.useLayoutEffect)(() => {
|
|
@@ -41,6 +42,7 @@ const PlayerFn = ({ durationInFrames, compositionHeight, compositionWidth, fps,
|
|
|
41
42
|
if (componentForValidation === remotion_1.Composition) {
|
|
42
43
|
throw new TypeError(`'component' must not be the 'Composition' component. Pass your own React component directly, and set the duration, fps and dimensions as separate props. See https://www.remotion.dev/docs/player/examples for an example.`);
|
|
43
44
|
}
|
|
45
|
+
(0, react_1.useState)(() => (0, use_remotion_license_acknowledge_js_1.acknowledgeRemotionLicenseMessage)(Boolean(acknowledgeRemotionLicense), logLevel));
|
|
44
46
|
const component = remotion_1.Internals.useLazyComponent(componentProps);
|
|
45
47
|
(0, validate_initial_frame_js_1.validateInitialFrame)({ initialFrame, durationInFrames });
|
|
46
48
|
const [frame, setFrame] = (0, react_1.useState)(() => ({
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.acknowledgeRemotionLicenseMessage = void 0;
|
|
4
|
+
const remotion_1 = require("remotion");
|
|
5
|
+
let warningShown = false;
|
|
6
|
+
const acknowledgeRemotionLicenseMessage = (acknowledge, logLevel) => {
|
|
7
|
+
if (acknowledge) {
|
|
8
|
+
return;
|
|
9
|
+
}
|
|
10
|
+
if (warningShown) {
|
|
11
|
+
return;
|
|
12
|
+
}
|
|
13
|
+
warningShown = true;
|
|
14
|
+
remotion_1.Internals.Log.warn(logLevel, 'Note: Some companies are required to obtain a license to use Remotion. See: https://remotion.dev/license');
|
|
15
|
+
remotion_1.Internals.Log.warn(logLevel, 'Pass the `acknowledgeRemotionLicense` prop to `<Player />` function to make this message disappear.');
|
|
16
|
+
};
|
|
17
|
+
exports.acknowledgeRemotionLicenseMessage = acknowledgeRemotionLicenseMessage;
|
package/dist/esm/index.mjs
CHANGED
|
@@ -1143,7 +1143,7 @@ import {
|
|
|
1143
1143
|
useRef as useRef11,
|
|
1144
1144
|
useState as useState13
|
|
1145
1145
|
} from "react";
|
|
1146
|
-
import { Composition, Internals as
|
|
1146
|
+
import { Composition, Internals as Internals15 } from "remotion";
|
|
1147
1147
|
|
|
1148
1148
|
// src/PlayerUI.tsx
|
|
1149
1149
|
import React10, {
|
|
@@ -2960,6 +2960,21 @@ var SharedPlayerContexts = ({
|
|
|
2960
2960
|
});
|
|
2961
2961
|
};
|
|
2962
2962
|
|
|
2963
|
+
// src/use-remotion-license-acknowledge.ts
|
|
2964
|
+
import { Internals as Internals14 } from "remotion";
|
|
2965
|
+
var warningShown = false;
|
|
2966
|
+
var acknowledgeRemotionLicenseMessage = (acknowledge, logLevel) => {
|
|
2967
|
+
if (acknowledge) {
|
|
2968
|
+
return;
|
|
2969
|
+
}
|
|
2970
|
+
if (warningShown) {
|
|
2971
|
+
return;
|
|
2972
|
+
}
|
|
2973
|
+
warningShown = true;
|
|
2974
|
+
Internals14.Log.warn(logLevel, "Note: Some companies are required to obtain a license to use Remotion. See: https://remotion.dev/license");
|
|
2975
|
+
Internals14.Log.warn(logLevel, "Pass the `acknowledgeRemotionLicense` prop to `<Player />` function to make this message disappear.");
|
|
2976
|
+
};
|
|
2977
|
+
|
|
2963
2978
|
// src/utils/validate-in-out-frame.ts
|
|
2964
2979
|
var validateSingleFrame = (frame, variableName) => {
|
|
2965
2980
|
if (typeof frame === "undefined" || frame === null) {
|
|
@@ -3109,6 +3124,7 @@ var PlayerFn = ({
|
|
|
3109
3124
|
browserMediaControlsBehavior: passedBrowserMediaControlsBehavior,
|
|
3110
3125
|
overrideInternalClassName,
|
|
3111
3126
|
logLevel = "info",
|
|
3127
|
+
acknowledgeRemotionLicense,
|
|
3112
3128
|
...componentProps
|
|
3113
3129
|
}, ref) => {
|
|
3114
3130
|
if (typeof window !== "undefined") {
|
|
@@ -3126,7 +3142,8 @@ var PlayerFn = ({
|
|
|
3126
3142
|
if (componentForValidation === Composition) {
|
|
3127
3143
|
throw new TypeError(`'component' must not be the 'Composition' component. Pass your own React component directly, and set the duration, fps and dimensions as separate props. See https://www.remotion.dev/docs/player/examples for an example.`);
|
|
3128
3144
|
}
|
|
3129
|
-
|
|
3145
|
+
useState13(() => acknowledgeRemotionLicenseMessage(Boolean(acknowledgeRemotionLicense), logLevel));
|
|
3146
|
+
const component = Internals15.useLazyComponent(componentProps);
|
|
3130
3147
|
validateInitialFrame({ initialFrame, durationInFrames });
|
|
3131
3148
|
const [frame, setFrame] = useState13(() => ({
|
|
3132
3149
|
[PLAYER_COMP_ID]: initialFrame ?? 0
|
|
@@ -3189,7 +3206,7 @@ var PlayerFn = ({
|
|
|
3189
3206
|
}, [playbackRate]);
|
|
3190
3207
|
useImperativeHandle2(ref, () => rootRef.current, []);
|
|
3191
3208
|
useState13(() => {
|
|
3192
|
-
|
|
3209
|
+
Internals15.Log.trace(logLevel, `[player] Mounting <Player>. User agent = ${typeof navigator === "undefined" ? "server" : navigator.userAgent}`);
|
|
3193
3210
|
});
|
|
3194
3211
|
const timelineContextValue = useMemo14(() => {
|
|
3195
3212
|
return {
|
|
@@ -3212,7 +3229,7 @@ var PlayerFn = ({
|
|
|
3212
3229
|
}, [setFrame]);
|
|
3213
3230
|
if (typeof window !== "undefined") {
|
|
3214
3231
|
useLayoutEffect(() => {
|
|
3215
|
-
|
|
3232
|
+
Internals15.CSSUtils.injectCSS(Internals15.CSSUtils.makeDefaultPreviewCSS(`.${playerCssClassname(overrideInternalClassName)}`, "#fff"));
|
|
3216
3233
|
}, [overrideInternalClassName]);
|
|
3217
3234
|
}
|
|
3218
3235
|
const actualInputProps = useMemo14(() => inputProps ?? {}, [inputProps]);
|
|
@@ -3221,7 +3238,7 @@ var PlayerFn = ({
|
|
|
3221
3238
|
mode: "prevent-media-session"
|
|
3222
3239
|
};
|
|
3223
3240
|
}, [passedBrowserMediaControlsBehavior]);
|
|
3224
|
-
return /* @__PURE__ */ jsx14(
|
|
3241
|
+
return /* @__PURE__ */ jsx14(Internals15.IsPlayerContextProvider, {
|
|
3225
3242
|
children: /* @__PURE__ */ jsx14(SharedPlayerContexts, {
|
|
3226
3243
|
timelineContext: timelineContextValue,
|
|
3227
3244
|
component,
|
|
@@ -3232,7 +3249,7 @@ var PlayerFn = ({
|
|
|
3232
3249
|
numberOfSharedAudioTags,
|
|
3233
3250
|
initiallyMuted,
|
|
3234
3251
|
logLevel,
|
|
3235
|
-
children: /* @__PURE__ */ jsx14(
|
|
3252
|
+
children: /* @__PURE__ */ jsx14(Internals15.Timeline.SetTimelineContext.Provider, {
|
|
3236
3253
|
value: setTimelineContextValue,
|
|
3237
3254
|
children: /* @__PURE__ */ jsx14(PlayerEmitterProvider, {
|
|
3238
3255
|
currentPlaybackRate,
|
|
@@ -3290,7 +3307,7 @@ import {
|
|
|
3290
3307
|
useRef as useRef13,
|
|
3291
3308
|
useState as useState14
|
|
3292
3309
|
} from "react";
|
|
3293
|
-
import { Internals as
|
|
3310
|
+
import { Internals as Internals17, random as random2 } from "remotion";
|
|
3294
3311
|
|
|
3295
3312
|
// src/ThumbnailUI.tsx
|
|
3296
3313
|
import React13, {
|
|
@@ -3301,7 +3318,7 @@ import React13, {
|
|
|
3301
3318
|
useMemo as useMemo16,
|
|
3302
3319
|
useRef as useRef12
|
|
3303
3320
|
} from "react";
|
|
3304
|
-
import { Internals as
|
|
3321
|
+
import { Internals as Internals16 } from "remotion";
|
|
3305
3322
|
|
|
3306
3323
|
// src/use-thumbnail.ts
|
|
3307
3324
|
import { useContext as useContext7, useMemo as useMemo15 } from "react";
|
|
@@ -3334,8 +3351,8 @@ var ThumbnailUI = ({
|
|
|
3334
3351
|
overflowVisible,
|
|
3335
3352
|
overrideInternalClassName
|
|
3336
3353
|
}, ref) => {
|
|
3337
|
-
const config =
|
|
3338
|
-
const video =
|
|
3354
|
+
const config = Internals16.useUnsafeVideoConfig();
|
|
3355
|
+
const video = Internals16.useVideo();
|
|
3339
3356
|
const container = useRef12(null);
|
|
3340
3357
|
const canvasSize = useElementSize(container, {
|
|
3341
3358
|
triggerOnWindowResize: false,
|
|
@@ -3411,7 +3428,7 @@ var ThumbnailUI = ({
|
|
|
3411
3428
|
children: VideoComponent ? /* @__PURE__ */ jsx15(ErrorBoundary, {
|
|
3412
3429
|
onError,
|
|
3413
3430
|
errorFallback,
|
|
3414
|
-
children: /* @__PURE__ */ jsx15(
|
|
3431
|
+
children: /* @__PURE__ */ jsx15(Internals16.CurrentScaleContext.Provider, {
|
|
3415
3432
|
value: currentScaleContext,
|
|
3416
3433
|
children: /* @__PURE__ */ jsx15(VideoComponent, {
|
|
3417
3434
|
...video?.props ?? {},
|
|
@@ -3485,12 +3502,12 @@ var ThumbnailFn = ({
|
|
|
3485
3502
|
return value;
|
|
3486
3503
|
}, [frameToDisplay, thumbnailId]);
|
|
3487
3504
|
useImperativeHandle4(ref, () => rootRef.current, []);
|
|
3488
|
-
const Component =
|
|
3505
|
+
const Component = Internals17.useLazyComponent(componentProps);
|
|
3489
3506
|
const [emitter] = useState14(() => new ThumbnailEmitter);
|
|
3490
3507
|
const passedInputProps = useMemo17(() => {
|
|
3491
3508
|
return inputProps ?? {};
|
|
3492
3509
|
}, [inputProps]);
|
|
3493
|
-
return /* @__PURE__ */ jsx16(
|
|
3510
|
+
return /* @__PURE__ */ jsx16(Internals17.IsPlayerContextProvider, {
|
|
3494
3511
|
children: /* @__PURE__ */ jsx16(SharedPlayerContexts, {
|
|
3495
3512
|
timelineContext: timelineState,
|
|
3496
3513
|
component: Component,
|
package/package.json
CHANGED
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
"url": "https://github.com/remotion-dev/remotion/tree/main/packages/player"
|
|
4
4
|
},
|
|
5
5
|
"name": "@remotion/player",
|
|
6
|
-
"version": "4.0.
|
|
6
|
+
"version": "4.0.253",
|
|
7
7
|
"description": "React component for embedding a Remotion preview into your app",
|
|
8
8
|
"main": "dist/cjs/index.js",
|
|
9
9
|
"types": "dist/cjs/index.d.ts",
|
|
@@ -28,7 +28,7 @@
|
|
|
28
28
|
],
|
|
29
29
|
"license": "SEE LICENSE IN LICENSE.md",
|
|
30
30
|
"dependencies": {
|
|
31
|
-
"remotion": "4.0.
|
|
31
|
+
"remotion": "4.0.253"
|
|
32
32
|
},
|
|
33
33
|
"peerDependencies": {
|
|
34
34
|
"react": ">=16.8.0",
|
|
@@ -43,7 +43,7 @@
|
|
|
43
43
|
"webpack": "5.96.1",
|
|
44
44
|
"zod": "3.22.3",
|
|
45
45
|
"eslint": "9.14.0",
|
|
46
|
-
"@remotion/eslint-config-internal": "4.0.
|
|
46
|
+
"@remotion/eslint-config-internal": "4.0.253"
|
|
47
47
|
},
|
|
48
48
|
"keywords": [
|
|
49
49
|
"remotion",
|