@remotion/player 3.3.43 → 3.3.44
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/PlayerControls.js +1 -1
- package/dist/cjs/error-boundary.d.ts +1 -1
- package/dist/cjs/use-video-controls-resize.d.ts +6 -4
- package/dist/cjs/use-video-controls-resize.js +3 -1
- package/dist/cjs/utils/calculate-player-size.js +9 -10
- package/dist/esm/PlayerControls.js +1 -1
- package/dist/esm/use-video-controls-resize.d.ts +6 -4
- package/dist/esm/use-video-controls-resize.js +3 -1
- package/dist/esm/utils/calculate-player-size.js +9 -10
- package/dist/tsconfig-cjs.tsbuildinfo +1 -1
- package/dist/tsconfig.tsbuildinfo +1 -1
- package/package.json +3 -3
- package/dist/MediaVolumeSlider.d.ts +0 -5
- package/dist/MediaVolumeSlider.js +0 -118
- package/dist/Player.d.ts +0 -43
- package/dist/Player.js +0 -141
- package/dist/PlayerControls.d.ts +0 -41
- package/dist/PlayerControls.js +0 -138
- package/dist/PlayerSeekBar.d.ts +0 -8
- package/dist/PlayerSeekBar.js +0 -146
- package/dist/PlayerUI.d.ts +0 -38
- package/dist/PlayerUI.js +0 -308
- package/dist/SharedPlayerContext.d.ts +0 -14
- package/dist/SharedPlayerContext.js +0 -72
- package/dist/Thumbnail.d.ts +0 -20
- package/dist/Thumbnail.js +0 -42
- package/dist/ThumbnailUI.d.ts +0 -11
- package/dist/ThumbnailUI.js +0 -107
- package/dist/calculate-next-frame.d.ts +0 -14
- package/dist/calculate-next-frame.js +0 -28
- package/dist/calculate-scale.d.ts +0 -39
- package/dist/calculate-scale.js +0 -85
- package/dist/emitter-context.d.ts +0 -4
- package/dist/emitter-context.js +0 -9
- package/dist/error-boundary.d.ts +0 -19
- package/dist/error-boundary.js +0 -39
- package/dist/event-emitter.d.ts +0 -66
- package/dist/event-emitter.js +0 -87
- package/dist/format-time.d.ts +0 -1
- package/dist/format-time.js +0 -9
- package/dist/icons.d.ts +0 -10
- package/dist/icons.js +0 -50
- package/dist/index.d.ts +0 -61
- package/dist/index.js +0 -25
- package/dist/player-css-classname.d.ts +0 -1
- package/dist/player-css-classname.js +0 -4
- package/dist/player-methods.d.ts +0 -24
- package/dist/player-methods.js +0 -2
- package/dist/test/index.test.d.ts +0 -1
- package/dist/test/index.test.js +0 -9
- package/dist/test/test-utils.d.ts +0 -6
- package/dist/test/test-utils.js +0 -32
- package/dist/test/validate-in-out-frames.test.d.ts +0 -1
- package/dist/test/validate-in-out-frames.test.js +0 -56
- package/dist/test/validate-prop.test.d.ts +0 -1
- package/dist/test/validate-prop.test.js +0 -131
- package/dist/use-hover-state.d.ts +0 -1
- package/dist/use-hover-state.js +0 -27
- package/dist/use-playback.d.ts +0 -7
- package/dist/use-playback.js +0 -92
- package/dist/use-player.d.ts +0 -19
- package/dist/use-player.js +0 -132
- package/dist/use-thumbnail.d.ts +0 -6
- package/dist/use-thumbnail.js +0 -18
- package/dist/use-video-controls-resize.d.ts +0 -7
- package/dist/use-video-controls-resize.js +0 -36
- package/dist/utils/calculate-player-size.d.ts +0 -9
- package/dist/utils/calculate-player-size.js +0 -29
- package/dist/utils/cancellable-promise.d.ts +0 -5
- package/dist/utils/cancellable-promise.js +0 -26
- package/dist/utils/delay.d.ts +0 -1
- package/dist/utils/delay.js +0 -6
- package/dist/utils/is-node.d.ts +0 -1
- package/dist/utils/is-node.js +0 -4
- package/dist/utils/preview-size.d.ts +0 -8
- package/dist/utils/preview-size.js +0 -2
- package/dist/utils/props-if-has-props.d.ts +0 -5
- package/dist/utils/props-if-has-props.js +0 -2
- package/dist/utils/use-cancellable-promises.d.ts +0 -7
- package/dist/utils/use-cancellable-promises.js +0 -21
- package/dist/utils/use-click-prevention-on-double-click.d.ts +0 -3
- package/dist/utils/use-click-prevention-on-double-click.js +0 -45
- package/dist/utils/use-element-size.d.ts +0 -15
- package/dist/utils/use-element-size.js +0 -98
- package/dist/utils/validate-in-out-frame.d.ts +0 -6
- package/dist/utils/validate-in-out-frame.js +0 -54
- package/dist/utils/validate-initial-frame.d.ts +0 -4
- package/dist/utils/validate-initial-frame.js +0 -27
- package/dist/utils/validate-playbackrate.d.ts +0 -1
- package/dist/utils/validate-playbackrate.js +0 -18
- package/dist/volume-persistance.d.ts +0 -2
- package/dist/volume-persistance.js +0 -19
|
@@ -1,14 +0,0 @@
|
|
|
1
|
-
import type { ComponentType, LazyExoticComponent } from 'react';
|
|
2
|
-
import React from 'react';
|
|
3
|
-
import type { TimelineContextValue } from 'remotion';
|
|
4
|
-
export declare const SharedPlayerContexts: React.FC<{
|
|
5
|
-
children: React.ReactNode;
|
|
6
|
-
timelineContext: TimelineContextValue;
|
|
7
|
-
inputProps?: unknown;
|
|
8
|
-
fps: number;
|
|
9
|
-
compositionWidth: number;
|
|
10
|
-
compositionHeight: number;
|
|
11
|
-
durationInFrames: number;
|
|
12
|
-
component: LazyExoticComponent<ComponentType<unknown>>;
|
|
13
|
-
numberOfSharedAudioTags: number;
|
|
14
|
-
}>;
|
|
@@ -1,72 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
exports.SharedPlayerContexts = void 0;
|
|
4
|
-
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
5
|
-
const react_1 = require("react");
|
|
6
|
-
const remotion_1 = require("remotion");
|
|
7
|
-
const volume_persistance_1 = require("./volume-persistance");
|
|
8
|
-
const SharedPlayerContexts = ({ children, timelineContext, inputProps, fps, compositionHeight, compositionWidth, durationInFrames, component, numberOfSharedAudioTags, }) => {
|
|
9
|
-
const compositionManagerContext = (0, react_1.useMemo)(() => {
|
|
10
|
-
return {
|
|
11
|
-
compositions: [
|
|
12
|
-
{
|
|
13
|
-
component: component,
|
|
14
|
-
durationInFrames,
|
|
15
|
-
height: compositionHeight,
|
|
16
|
-
width: compositionWidth,
|
|
17
|
-
fps,
|
|
18
|
-
id: 'player-comp',
|
|
19
|
-
props: inputProps,
|
|
20
|
-
nonce: 777,
|
|
21
|
-
scale: 1,
|
|
22
|
-
folderName: null,
|
|
23
|
-
defaultProps: undefined,
|
|
24
|
-
parentFolderName: null,
|
|
25
|
-
},
|
|
26
|
-
],
|
|
27
|
-
folders: [],
|
|
28
|
-
registerFolder: () => undefined,
|
|
29
|
-
unregisterFolder: () => undefined,
|
|
30
|
-
currentComposition: 'player-comp',
|
|
31
|
-
registerComposition: () => undefined,
|
|
32
|
-
registerSequence: () => undefined,
|
|
33
|
-
sequences: [],
|
|
34
|
-
setCurrentComposition: () => undefined,
|
|
35
|
-
unregisterComposition: () => undefined,
|
|
36
|
-
unregisterSequence: () => undefined,
|
|
37
|
-
registerAsset: () => undefined,
|
|
38
|
-
unregisterAsset: () => undefined,
|
|
39
|
-
currentCompositionMetadata: null,
|
|
40
|
-
setCurrentCompositionMetadata: () => undefined,
|
|
41
|
-
assets: [],
|
|
42
|
-
setClipRegion: () => undefined,
|
|
43
|
-
};
|
|
44
|
-
}, [
|
|
45
|
-
component,
|
|
46
|
-
durationInFrames,
|
|
47
|
-
compositionHeight,
|
|
48
|
-
compositionWidth,
|
|
49
|
-
fps,
|
|
50
|
-
inputProps,
|
|
51
|
-
]);
|
|
52
|
-
const [mediaMuted, setMediaMuted] = (0, react_1.useState)(false);
|
|
53
|
-
const [mediaVolume, setMediaVolume] = (0, react_1.useState)((0, volume_persistance_1.getPreferredVolume)());
|
|
54
|
-
const mediaVolumeContextValue = (0, react_1.useMemo)(() => {
|
|
55
|
-
return {
|
|
56
|
-
mediaMuted,
|
|
57
|
-
mediaVolume,
|
|
58
|
-
};
|
|
59
|
-
}, [mediaMuted, mediaVolume]);
|
|
60
|
-
const setMediaVolumeAndPersist = (0, react_1.useCallback)((vol) => {
|
|
61
|
-
setMediaVolume(vol);
|
|
62
|
-
(0, volume_persistance_1.persistVolume)(vol);
|
|
63
|
-
}, []);
|
|
64
|
-
const setMediaVolumeContextValue = (0, react_1.useMemo)(() => {
|
|
65
|
-
return {
|
|
66
|
-
setMediaMuted,
|
|
67
|
-
setMediaVolume: setMediaVolumeAndPersist,
|
|
68
|
-
};
|
|
69
|
-
}, [setMediaVolumeAndPersist]);
|
|
70
|
-
return ((0, jsx_runtime_1.jsx)(remotion_1.Internals.CanUseRemotionHooksProvider, { children: (0, jsx_runtime_1.jsx)(remotion_1.Internals.Timeline.TimelineContext.Provider, { value: timelineContext, children: (0, jsx_runtime_1.jsx)(remotion_1.Internals.CompositionManager.Provider, { value: compositionManagerContext, children: (0, jsx_runtime_1.jsx)(remotion_1.Internals.PrefetchProvider, { children: (0, jsx_runtime_1.jsx)(remotion_1.Internals.DurationsContextProvider, { children: (0, jsx_runtime_1.jsx)(remotion_1.Internals.MediaVolumeContext.Provider, { value: mediaVolumeContextValue, children: (0, jsx_runtime_1.jsx)(remotion_1.Internals.SetMediaVolumeContext.Provider, { value: setMediaVolumeContextValue, children: (0, jsx_runtime_1.jsx)(remotion_1.Internals.SharedAudioContextProvider, { numberOfAudioTags: numberOfSharedAudioTags, children: children }) }) }) }) }) }) }) }));
|
|
71
|
-
};
|
|
72
|
-
exports.SharedPlayerContexts = SharedPlayerContexts;
|
package/dist/Thumbnail.d.ts
DELETED
|
@@ -1,20 +0,0 @@
|
|
|
1
|
-
import type { CSSProperties, MutableRefObject } from 'react';
|
|
2
|
-
import type { CompProps } from 'remotion';
|
|
3
|
-
import type { ThumbnailMethods } from './player-methods';
|
|
4
|
-
import type { ErrorFallback, RenderLoading } from './PlayerUI';
|
|
5
|
-
import type { PropsIfHasProps } from './utils/props-if-has-props';
|
|
6
|
-
declare type ThumbnailProps<T> = PropsIfHasProps<T> & CompProps<T> & {
|
|
7
|
-
frameToDisplay: number;
|
|
8
|
-
style?: CSSProperties;
|
|
9
|
-
durationInFrames: number;
|
|
10
|
-
compositionWidth: number;
|
|
11
|
-
compositionHeight: number;
|
|
12
|
-
inputProps?: unknown;
|
|
13
|
-
fps: number;
|
|
14
|
-
errorFallback?: ErrorFallback;
|
|
15
|
-
renderLoading?: RenderLoading;
|
|
16
|
-
className?: string;
|
|
17
|
-
};
|
|
18
|
-
export declare const ThumbnailFn: <T>({ frameToDisplay, style, inputProps, compositionHeight, compositionWidth, durationInFrames, fps, className, errorFallback, renderLoading, ...componentProps }: ThumbnailProps<T>, ref: MutableRefObject<ThumbnailMethods>) => JSX.Element;
|
|
19
|
-
export declare const Thumbnail: <T>(props: ThumbnailProps<T> & import("react").RefAttributes<ThumbnailMethods>) => React.ReactElement | null;
|
|
20
|
-
export {};
|
package/dist/Thumbnail.js
DELETED
|
@@ -1,42 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
3
|
-
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
4
|
-
};
|
|
5
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
|
-
exports.Thumbnail = exports.ThumbnailFn = void 0;
|
|
7
|
-
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
8
|
-
const react_1 = require("react");
|
|
9
|
-
const remotion_1 = require("remotion");
|
|
10
|
-
const emitter_context_1 = require("./emitter-context");
|
|
11
|
-
const event_emitter_1 = require("./event-emitter");
|
|
12
|
-
const SharedPlayerContext_1 = require("./SharedPlayerContext");
|
|
13
|
-
const ThumbnailUI_1 = __importDefault(require("./ThumbnailUI"));
|
|
14
|
-
const ThumbnailFn = ({ frameToDisplay, style, inputProps, compositionHeight, compositionWidth, durationInFrames, fps, className, errorFallback = () => '⚠️', renderLoading, ...componentProps }, ref) => {
|
|
15
|
-
const [thumbnailId] = (0, react_1.useState)(() => String((0, remotion_1.random)(null)));
|
|
16
|
-
const rootRef = (0, react_1.useRef)(null);
|
|
17
|
-
const timelineState = (0, react_1.useMemo)(() => {
|
|
18
|
-
return {
|
|
19
|
-
playing: false,
|
|
20
|
-
frame: frameToDisplay,
|
|
21
|
-
rootId: thumbnailId,
|
|
22
|
-
imperativePlaying: {
|
|
23
|
-
current: false,
|
|
24
|
-
},
|
|
25
|
-
playbackRate: 1,
|
|
26
|
-
setPlaybackRate: () => {
|
|
27
|
-
throw new Error('thumbnail');
|
|
28
|
-
},
|
|
29
|
-
audioAndVideoTags: { current: [] },
|
|
30
|
-
};
|
|
31
|
-
}, [frameToDisplay, thumbnailId]);
|
|
32
|
-
(0, react_1.useImperativeHandle)(ref, () => rootRef.current, []);
|
|
33
|
-
const Component = remotion_1.Internals.useLazyComponent(componentProps);
|
|
34
|
-
const [emitter] = (0, react_1.useState)(() => new event_emitter_1.ThumbnailEmitter());
|
|
35
|
-
const passedInputProps = (0, react_1.useMemo)(() => {
|
|
36
|
-
return inputProps !== null && inputProps !== void 0 ? inputProps : {};
|
|
37
|
-
}, [inputProps]);
|
|
38
|
-
return ((0, jsx_runtime_1.jsx)(SharedPlayerContext_1.SharedPlayerContexts, { timelineContext: timelineState, component: Component, compositionHeight: compositionHeight, compositionWidth: compositionWidth, durationInFrames: durationInFrames, fps: fps, inputProps: inputProps, numberOfSharedAudioTags: 0, children: (0, jsx_runtime_1.jsx)(emitter_context_1.ThumbnailEmitterContext.Provider, { value: emitter, children: (0, jsx_runtime_1.jsx)(ThumbnailUI_1.default, { className: className, errorFallback: errorFallback, inputProps: passedInputProps, renderLoading: renderLoading, style: style }) }) }));
|
|
39
|
-
};
|
|
40
|
-
exports.ThumbnailFn = ThumbnailFn;
|
|
41
|
-
const forward = react_1.forwardRef;
|
|
42
|
-
exports.Thumbnail = forward(exports.ThumbnailFn);
|
package/dist/ThumbnailUI.d.ts
DELETED
|
@@ -1,11 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import type { ThumbnailMethods } from './player-methods';
|
|
3
|
-
import type { ErrorFallback, RenderLoading } from './PlayerUI';
|
|
4
|
-
declare const _default: React.ForwardRefExoticComponent<{
|
|
5
|
-
inputProps: unknown;
|
|
6
|
-
style?: React.CSSProperties | undefined;
|
|
7
|
-
errorFallback: ErrorFallback;
|
|
8
|
-
renderLoading: RenderLoading | undefined;
|
|
9
|
-
className: string | undefined;
|
|
10
|
-
} & React.RefAttributes<ThumbnailMethods>>;
|
|
11
|
-
export default _default;
|
package/dist/ThumbnailUI.js
DELETED
|
@@ -1,107 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
3
|
-
if (k2 === undefined) k2 = k;
|
|
4
|
-
var desc = Object.getOwnPropertyDescriptor(m, k);
|
|
5
|
-
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
|
|
6
|
-
desc = { enumerable: true, get: function() { return m[k]; } };
|
|
7
|
-
}
|
|
8
|
-
Object.defineProperty(o, k2, desc);
|
|
9
|
-
}) : (function(o, m, k, k2) {
|
|
10
|
-
if (k2 === undefined) k2 = k;
|
|
11
|
-
o[k2] = m[k];
|
|
12
|
-
}));
|
|
13
|
-
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
|
|
14
|
-
Object.defineProperty(o, "default", { enumerable: true, value: v });
|
|
15
|
-
}) : function(o, v) {
|
|
16
|
-
o["default"] = v;
|
|
17
|
-
});
|
|
18
|
-
var __importStar = (this && this.__importStar) || function (mod) {
|
|
19
|
-
if (mod && mod.__esModule) return mod;
|
|
20
|
-
var result = {};
|
|
21
|
-
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
|
|
22
|
-
__setModuleDefault(result, mod);
|
|
23
|
-
return result;
|
|
24
|
-
};
|
|
25
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
26
|
-
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
27
|
-
const react_1 = __importStar(require("react"));
|
|
28
|
-
const remotion_1 = require("remotion");
|
|
29
|
-
const calculate_scale_1 = require("./calculate-scale");
|
|
30
|
-
const error_boundary_1 = require("./error-boundary");
|
|
31
|
-
const player_css_classname_1 = require("./player-css-classname");
|
|
32
|
-
const use_thumbnail_1 = require("./use-thumbnail");
|
|
33
|
-
const is_node_1 = require("./utils/is-node");
|
|
34
|
-
const use_element_size_1 = require("./utils/use-element-size");
|
|
35
|
-
const reactVersion = react_1.default.version.split('.')[0];
|
|
36
|
-
if (reactVersion === '0') {
|
|
37
|
-
throw new Error(`Version ${reactVersion} of "react" is not supported by Remotion`);
|
|
38
|
-
}
|
|
39
|
-
const doesReactVersionSupportSuspense = parseInt(reactVersion, 10) >= 18;
|
|
40
|
-
const ThumbnailUI = ({ style, inputProps, errorFallback, renderLoading, className }, ref) => {
|
|
41
|
-
var _a, _b, _c;
|
|
42
|
-
const config = remotion_1.Internals.useUnsafeVideoConfig();
|
|
43
|
-
const video = remotion_1.Internals.useVideo();
|
|
44
|
-
const container = (0, react_1.useRef)(null);
|
|
45
|
-
const canvasSize = (0, use_element_size_1.useElementSize)(container, {
|
|
46
|
-
triggerOnWindowResize: false,
|
|
47
|
-
shouldApplyCssTransforms: false,
|
|
48
|
-
});
|
|
49
|
-
const layout = (0, react_1.useMemo)(() => {
|
|
50
|
-
if (!config || !canvasSize) {
|
|
51
|
-
return null;
|
|
52
|
-
}
|
|
53
|
-
return (0, calculate_scale_1.calculateCanvasTransformation)({
|
|
54
|
-
canvasSize,
|
|
55
|
-
compositionHeight: config.height,
|
|
56
|
-
compositionWidth: config.width,
|
|
57
|
-
previewSize: 'auto',
|
|
58
|
-
});
|
|
59
|
-
}, [canvasSize, config]);
|
|
60
|
-
const scale = (_a = layout === null || layout === void 0 ? void 0 : layout.scale) !== null && _a !== void 0 ? _a : 1;
|
|
61
|
-
const thumbnail = (0, use_thumbnail_1.useThumbnail)();
|
|
62
|
-
(0, react_1.useImperativeHandle)(ref, () => {
|
|
63
|
-
const methods = {
|
|
64
|
-
getContainerNode: () => container.current,
|
|
65
|
-
getScale: () => scale,
|
|
66
|
-
};
|
|
67
|
-
return Object.assign(thumbnail.emitter, methods);
|
|
68
|
-
}, [scale, thumbnail.emitter]);
|
|
69
|
-
const VideoComponent = video ? video.component : null;
|
|
70
|
-
const outerStyle = (0, react_1.useMemo)(() => {
|
|
71
|
-
return (0, calculate_scale_1.calculateOuterStyle)({ config, style, canvasSize });
|
|
72
|
-
}, [canvasSize, config, style]);
|
|
73
|
-
const outer = (0, react_1.useMemo)(() => {
|
|
74
|
-
return (0, calculate_scale_1.calculateOuter)({ config, layout, scale });
|
|
75
|
-
}, [config, layout, scale]);
|
|
76
|
-
const containerStyle = (0, react_1.useMemo)(() => {
|
|
77
|
-
return (0, calculate_scale_1.calculateContainerStyle)({
|
|
78
|
-
canvasSize,
|
|
79
|
-
config,
|
|
80
|
-
layout,
|
|
81
|
-
scale,
|
|
82
|
-
});
|
|
83
|
-
}, [canvasSize, config, layout, scale]);
|
|
84
|
-
const onError = (0, react_1.useCallback)((error) => {
|
|
85
|
-
// Pay attention to `this context`
|
|
86
|
-
thumbnail.emitter.dispatchError(error);
|
|
87
|
-
}, [thumbnail.emitter]);
|
|
88
|
-
const rootRef = (0, react_1.useRef)(null);
|
|
89
|
-
(0, react_1.useImperativeHandle)(ref, () => rootRef.current, []);
|
|
90
|
-
const loadingMarkup = (0, react_1.useMemo)(() => {
|
|
91
|
-
return renderLoading
|
|
92
|
-
? renderLoading({
|
|
93
|
-
height: outerStyle.height,
|
|
94
|
-
width: outerStyle.width,
|
|
95
|
-
})
|
|
96
|
-
: null;
|
|
97
|
-
}, [outerStyle.height, outerStyle.width, renderLoading]);
|
|
98
|
-
if (!config) {
|
|
99
|
-
return null;
|
|
100
|
-
}
|
|
101
|
-
const content = ((0, jsx_runtime_1.jsx)("div", { style: outer, children: (0, jsx_runtime_1.jsx)("div", { style: containerStyle, className: player_css_classname_1.PLAYER_CSS_CLASSNAME, children: VideoComponent ? ((0, jsx_runtime_1.jsx)(error_boundary_1.ErrorBoundary, { onError: onError, errorFallback: errorFallback, children: (0, jsx_runtime_1.jsx)(VideoComponent, { ...((_b = video === null || video === void 0 ? void 0 : video.defaultProps) !== null && _b !== void 0 ? _b : {}), ...((_c = inputProps) !== null && _c !== void 0 ? _c : {}) }) })) : null }) }));
|
|
102
|
-
if (is_node_1.IS_NODE && !doesReactVersionSupportSuspense) {
|
|
103
|
-
return ((0, jsx_runtime_1.jsx)("div", { ref: container, style: outerStyle, className: className, children: content }));
|
|
104
|
-
}
|
|
105
|
-
return ((0, jsx_runtime_1.jsx)("div", { ref: container, style: outerStyle, className: className, children: (0, jsx_runtime_1.jsx)(react_1.Suspense, { fallback: loadingMarkup, children: content }) }));
|
|
106
|
-
};
|
|
107
|
-
exports.default = (0, react_1.forwardRef)(ThumbnailUI);
|
|
@@ -1,14 +0,0 @@
|
|
|
1
|
-
export declare const calculateNextFrame: ({ time, currentFrame: startFrame, playbackSpeed, fps, actualLastFrame, actualFirstFrame, framesAdvanced, shouldLoop, }: {
|
|
2
|
-
time: number;
|
|
3
|
-
currentFrame: number;
|
|
4
|
-
playbackSpeed: number;
|
|
5
|
-
fps: number;
|
|
6
|
-
actualFirstFrame: number;
|
|
7
|
-
actualLastFrame: number;
|
|
8
|
-
framesAdvanced: number;
|
|
9
|
-
shouldLoop: boolean;
|
|
10
|
-
}) => {
|
|
11
|
-
nextFrame: number;
|
|
12
|
-
framesToAdvance: number;
|
|
13
|
-
hasEnded: boolean;
|
|
14
|
-
};
|
|
@@ -1,28 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
exports.calculateNextFrame = void 0;
|
|
4
|
-
const calculateNextFrame = ({ time, currentFrame: startFrame, playbackSpeed, fps, actualLastFrame, actualFirstFrame, framesAdvanced, shouldLoop, }) => {
|
|
5
|
-
const op = playbackSpeed < 0 ? Math.ceil : Math.floor;
|
|
6
|
-
const framesToAdvance = op((time * playbackSpeed) / (1000 / fps)) - framesAdvanced;
|
|
7
|
-
const nextFrame = framesToAdvance + startFrame;
|
|
8
|
-
const isCurrentFrameOutside = startFrame > actualLastFrame || startFrame < actualFirstFrame;
|
|
9
|
-
const isNextFrameOutside = nextFrame > actualLastFrame || nextFrame < actualFirstFrame;
|
|
10
|
-
const hasEnded = !shouldLoop && isNextFrameOutside && !isCurrentFrameOutside;
|
|
11
|
-
if (playbackSpeed > 0) {
|
|
12
|
-
// Play forwards
|
|
13
|
-
if (isNextFrameOutside) {
|
|
14
|
-
return {
|
|
15
|
-
nextFrame: actualFirstFrame,
|
|
16
|
-
framesToAdvance,
|
|
17
|
-
hasEnded,
|
|
18
|
-
};
|
|
19
|
-
}
|
|
20
|
-
return { nextFrame, framesToAdvance, hasEnded };
|
|
21
|
-
}
|
|
22
|
-
// Reverse playback
|
|
23
|
-
if (isNextFrameOutside) {
|
|
24
|
-
return { nextFrame: actualLastFrame, framesToAdvance, hasEnded };
|
|
25
|
-
}
|
|
26
|
-
return { nextFrame, framesToAdvance, hasEnded };
|
|
27
|
-
};
|
|
28
|
-
exports.calculateNextFrame = calculateNextFrame;
|
|
@@ -1,39 +0,0 @@
|
|
|
1
|
-
import type { VideoConfig } from 'remotion';
|
|
2
|
-
import type { PreviewSize } from './utils/preview-size';
|
|
3
|
-
import type { Size } from './utils/use-element-size';
|
|
4
|
-
export declare const calculateScale: ({ canvasSize, compositionHeight, compositionWidth, previewSize, }: {
|
|
5
|
-
previewSize: PreviewSize['size'];
|
|
6
|
-
compositionWidth: number;
|
|
7
|
-
compositionHeight: number;
|
|
8
|
-
canvasSize: Size;
|
|
9
|
-
}) => number;
|
|
10
|
-
declare type Layout = {
|
|
11
|
-
centerX: number;
|
|
12
|
-
centerY: number;
|
|
13
|
-
xCorrection: number;
|
|
14
|
-
yCorrection: number;
|
|
15
|
-
scale: number;
|
|
16
|
-
};
|
|
17
|
-
export declare const calculateCanvasTransformation: ({ previewSize, compositionWidth, compositionHeight, canvasSize, }: {
|
|
18
|
-
previewSize: PreviewSize['size'];
|
|
19
|
-
compositionWidth: number;
|
|
20
|
-
compositionHeight: number;
|
|
21
|
-
canvasSize: Size;
|
|
22
|
-
}) => Layout;
|
|
23
|
-
export declare const calculateOuterStyle: ({ config, style, canvasSize, }: {
|
|
24
|
-
config: VideoConfig | null;
|
|
25
|
-
style: React.CSSProperties | undefined;
|
|
26
|
-
canvasSize: Size | null;
|
|
27
|
-
}) => React.CSSProperties;
|
|
28
|
-
export declare const calculateContainerStyle: ({ config, canvasSize, layout, scale, }: {
|
|
29
|
-
config: VideoConfig | null;
|
|
30
|
-
canvasSize: Size | null;
|
|
31
|
-
layout: Layout | null;
|
|
32
|
-
scale: number;
|
|
33
|
-
}) => React.CSSProperties;
|
|
34
|
-
export declare const calculateOuter: ({ layout, scale, config, }: {
|
|
35
|
-
layout: Layout | null;
|
|
36
|
-
scale: number;
|
|
37
|
-
config: VideoConfig | null;
|
|
38
|
-
}) => React.CSSProperties;
|
|
39
|
-
export {};
|
package/dist/calculate-scale.js
DELETED
|
@@ -1,85 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
exports.calculateOuter = exports.calculateContainerStyle = exports.calculateOuterStyle = exports.calculateCanvasTransformation = exports.calculateScale = void 0;
|
|
4
|
-
const calculate_player_size_1 = require("./utils/calculate-player-size");
|
|
5
|
-
const calculateScale = ({ canvasSize, compositionHeight, compositionWidth, previewSize, }) => {
|
|
6
|
-
const heightRatio = canvasSize.height / compositionHeight;
|
|
7
|
-
const widthRatio = canvasSize.width / compositionWidth;
|
|
8
|
-
const ratio = Math.min(heightRatio, widthRatio);
|
|
9
|
-
return previewSize === 'auto' ? ratio : Number(previewSize);
|
|
10
|
-
};
|
|
11
|
-
exports.calculateScale = calculateScale;
|
|
12
|
-
const calculateCanvasTransformation = ({ previewSize, compositionWidth, compositionHeight, canvasSize, }) => {
|
|
13
|
-
const scale = (0, exports.calculateScale)({
|
|
14
|
-
canvasSize,
|
|
15
|
-
compositionHeight,
|
|
16
|
-
compositionWidth,
|
|
17
|
-
previewSize,
|
|
18
|
-
});
|
|
19
|
-
const correction = 0 - (1 - scale) / 2;
|
|
20
|
-
const xCorrection = correction * compositionWidth;
|
|
21
|
-
const yCorrection = correction * compositionHeight;
|
|
22
|
-
const width = compositionWidth * scale;
|
|
23
|
-
const height = compositionHeight * scale;
|
|
24
|
-
const centerX = canvasSize.width / 2 - width / 2;
|
|
25
|
-
const centerY = canvasSize.height / 2 - height / 2;
|
|
26
|
-
return {
|
|
27
|
-
centerX,
|
|
28
|
-
centerY,
|
|
29
|
-
xCorrection,
|
|
30
|
-
yCorrection,
|
|
31
|
-
scale,
|
|
32
|
-
};
|
|
33
|
-
};
|
|
34
|
-
exports.calculateCanvasTransformation = calculateCanvasTransformation;
|
|
35
|
-
const calculateOuterStyle = ({ config, style, canvasSize, }) => {
|
|
36
|
-
if (!config) {
|
|
37
|
-
return {};
|
|
38
|
-
}
|
|
39
|
-
return {
|
|
40
|
-
position: 'relative',
|
|
41
|
-
overflow: 'hidden',
|
|
42
|
-
...(0, calculate_player_size_1.calculatePlayerSize)({
|
|
43
|
-
compositionHeight: config.height,
|
|
44
|
-
compositionWidth: config.width,
|
|
45
|
-
currentSize: canvasSize,
|
|
46
|
-
height: style === null || style === void 0 ? void 0 : style.height,
|
|
47
|
-
width: style === null || style === void 0 ? void 0 : style.width,
|
|
48
|
-
}),
|
|
49
|
-
...style,
|
|
50
|
-
};
|
|
51
|
-
};
|
|
52
|
-
exports.calculateOuterStyle = calculateOuterStyle;
|
|
53
|
-
const calculateContainerStyle = ({ config, canvasSize, layout, scale, }) => {
|
|
54
|
-
if (!config || !canvasSize || !layout) {
|
|
55
|
-
return {};
|
|
56
|
-
}
|
|
57
|
-
return {
|
|
58
|
-
position: 'absolute',
|
|
59
|
-
width: config.width,
|
|
60
|
-
height: config.height,
|
|
61
|
-
display: 'flex',
|
|
62
|
-
transform: `scale(${scale})`,
|
|
63
|
-
marginLeft: layout.xCorrection,
|
|
64
|
-
marginTop: layout.yCorrection,
|
|
65
|
-
overflow: 'hidden',
|
|
66
|
-
};
|
|
67
|
-
};
|
|
68
|
-
exports.calculateContainerStyle = calculateContainerStyle;
|
|
69
|
-
const calculateOuter = ({ layout, scale, config, }) => {
|
|
70
|
-
if (!layout || !config) {
|
|
71
|
-
return {};
|
|
72
|
-
}
|
|
73
|
-
const { centerX, centerY } = layout;
|
|
74
|
-
return {
|
|
75
|
-
width: config.width * scale,
|
|
76
|
-
height: config.height * scale,
|
|
77
|
-
display: 'flex',
|
|
78
|
-
flexDirection: 'column',
|
|
79
|
-
position: 'absolute',
|
|
80
|
-
left: centerX,
|
|
81
|
-
top: centerY,
|
|
82
|
-
overflow: 'hidden',
|
|
83
|
-
};
|
|
84
|
-
};
|
|
85
|
-
exports.calculateOuter = calculateOuter;
|
|
@@ -1,4 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import type { PlayerEmitter, ThumbnailEmitter } from './event-emitter';
|
|
3
|
-
export declare const PlayerEventEmitterContext: React.Context<PlayerEmitter | undefined>;
|
|
4
|
-
export declare const ThumbnailEmitterContext: React.Context<ThumbnailEmitter | undefined>;
|
package/dist/emitter-context.js
DELETED
|
@@ -1,9 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
3
|
-
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
4
|
-
};
|
|
5
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
|
-
exports.ThumbnailEmitterContext = exports.PlayerEventEmitterContext = void 0;
|
|
7
|
-
const react_1 = __importDefault(require("react"));
|
|
8
|
-
exports.PlayerEventEmitterContext = react_1.default.createContext(undefined);
|
|
9
|
-
exports.ThumbnailEmitterContext = react_1.default.createContext(undefined);
|
package/dist/error-boundary.d.ts
DELETED
|
@@ -1,19 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
export declare class ErrorBoundary extends React.Component<{
|
|
3
|
-
onError: (error: Error) => void;
|
|
4
|
-
children: React.ReactNode;
|
|
5
|
-
errorFallback: (info: {
|
|
6
|
-
error: Error;
|
|
7
|
-
}) => React.ReactNode;
|
|
8
|
-
}, {
|
|
9
|
-
hasError: Error | null;
|
|
10
|
-
}> {
|
|
11
|
-
state: {
|
|
12
|
-
hasError: null;
|
|
13
|
-
};
|
|
14
|
-
static getDerivedStateFromError(error: Error): {
|
|
15
|
-
hasError: Error;
|
|
16
|
-
};
|
|
17
|
-
componentDidCatch(error: Error): void;
|
|
18
|
-
render(): string | number | boolean | JSX.Element | React.ReactFragment | null | undefined;
|
|
19
|
-
}
|
package/dist/error-boundary.js
DELETED
|
@@ -1,39 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
3
|
-
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
4
|
-
};
|
|
5
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
|
-
exports.ErrorBoundary = void 0;
|
|
7
|
-
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
8
|
-
const react_1 = __importDefault(require("react"));
|
|
9
|
-
const errorStyle = {
|
|
10
|
-
display: 'flex',
|
|
11
|
-
justifyContent: 'center',
|
|
12
|
-
alignItems: 'center',
|
|
13
|
-
flex: 1,
|
|
14
|
-
height: '100%',
|
|
15
|
-
width: '100%',
|
|
16
|
-
};
|
|
17
|
-
class ErrorBoundary extends react_1.default.Component {
|
|
18
|
-
constructor() {
|
|
19
|
-
super(...arguments);
|
|
20
|
-
this.state = { hasError: null };
|
|
21
|
-
}
|
|
22
|
-
static getDerivedStateFromError(error) {
|
|
23
|
-
// Update state so the next render will show the fallback UI.
|
|
24
|
-
return { hasError: error };
|
|
25
|
-
}
|
|
26
|
-
componentDidCatch(error) {
|
|
27
|
-
this.props.onError(error);
|
|
28
|
-
}
|
|
29
|
-
render() {
|
|
30
|
-
if (this.state.hasError) {
|
|
31
|
-
// You can render any custom fallback UI
|
|
32
|
-
return ((0, jsx_runtime_1.jsx)("div", { style: errorStyle, children: this.props.errorFallback({
|
|
33
|
-
error: this.state.hasError,
|
|
34
|
-
}) }));
|
|
35
|
-
}
|
|
36
|
-
return this.props.children;
|
|
37
|
-
}
|
|
38
|
-
}
|
|
39
|
-
exports.ErrorBoundary = ErrorBoundary;
|
package/dist/event-emitter.d.ts
DELETED
|
@@ -1,66 +0,0 @@
|
|
|
1
|
-
declare type SeekPayload = {
|
|
2
|
-
frame: number;
|
|
3
|
-
};
|
|
4
|
-
declare type ErrorPayload = {
|
|
5
|
-
error: Error;
|
|
6
|
-
};
|
|
7
|
-
declare type TimeUpdateEventPayload = {
|
|
8
|
-
frame: number;
|
|
9
|
-
};
|
|
10
|
-
declare type FrameUpdateEventPayload = {
|
|
11
|
-
frame: number;
|
|
12
|
-
};
|
|
13
|
-
declare type RateChangeEventPayload = {
|
|
14
|
-
playbackRate: number;
|
|
15
|
-
};
|
|
16
|
-
declare type FullscreenChangeEventPayload = {
|
|
17
|
-
isFullscreen: boolean;
|
|
18
|
-
};
|
|
19
|
-
declare type PlayerStateEventMap = {
|
|
20
|
-
seeked: SeekPayload;
|
|
21
|
-
pause: undefined;
|
|
22
|
-
play: undefined;
|
|
23
|
-
ratechange: RateChangeEventPayload;
|
|
24
|
-
ended: undefined;
|
|
25
|
-
error: ErrorPayload;
|
|
26
|
-
timeupdate: TimeUpdateEventPayload;
|
|
27
|
-
frameupdate: FrameUpdateEventPayload;
|
|
28
|
-
fullscreenchange: FullscreenChangeEventPayload;
|
|
29
|
-
};
|
|
30
|
-
declare type ThumbnailStateEventMap = {
|
|
31
|
-
error: ErrorPayload;
|
|
32
|
-
};
|
|
33
|
-
export declare type PlayerEventTypes = keyof PlayerStateEventMap;
|
|
34
|
-
export declare type ThumbnailEventTypes = keyof ThumbnailStateEventMap;
|
|
35
|
-
export declare type CallbackListener<T extends PlayerEventTypes> = (data: {
|
|
36
|
-
detail: PlayerStateEventMap[T];
|
|
37
|
-
}) => void;
|
|
38
|
-
declare type PlayerListeners = {
|
|
39
|
-
[EventType in PlayerEventTypes]: CallbackListener<EventType>[];
|
|
40
|
-
};
|
|
41
|
-
declare type ThumbnailListeners = {
|
|
42
|
-
[EventType in ThumbnailEventTypes]: CallbackListener<EventType>[];
|
|
43
|
-
};
|
|
44
|
-
export declare class PlayerEmitter {
|
|
45
|
-
listeners: PlayerListeners;
|
|
46
|
-
addEventListener<Q extends PlayerEventTypes>(name: Q, callback: CallbackListener<Q>): void;
|
|
47
|
-
removeEventListener<Q extends PlayerEventTypes>(name: Q, callback: CallbackListener<Q>): void;
|
|
48
|
-
private dispatchEvent;
|
|
49
|
-
dispatchSeek(frame: number): void;
|
|
50
|
-
dispatchPause(): void;
|
|
51
|
-
dispatchPlay(): void;
|
|
52
|
-
dispatchEnded(): void;
|
|
53
|
-
dispatchRatechange(playbackRate: number): void;
|
|
54
|
-
dispatchError(error: Error): void;
|
|
55
|
-
dispatchTimeUpdate(event: TimeUpdateEventPayload): void;
|
|
56
|
-
dispatchFrameUpdate(event: FrameUpdateEventPayload): void;
|
|
57
|
-
dispatchFullscreenChangeUpdate(event: FullscreenChangeEventPayload): void;
|
|
58
|
-
}
|
|
59
|
-
export declare class ThumbnailEmitter {
|
|
60
|
-
listeners: ThumbnailListeners;
|
|
61
|
-
addEventListener<Q extends ThumbnailEventTypes>(name: Q, callback: CallbackListener<Q>): void;
|
|
62
|
-
removeEventListener<Q extends ThumbnailEventTypes>(name: Q, callback: CallbackListener<Q>): void;
|
|
63
|
-
private dispatchEvent;
|
|
64
|
-
dispatchError(error: Error): void;
|
|
65
|
-
}
|
|
66
|
-
export {};
|
package/dist/event-emitter.js
DELETED
|
@@ -1,87 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
exports.ThumbnailEmitter = exports.PlayerEmitter = void 0;
|
|
4
|
-
class PlayerEmitter {
|
|
5
|
-
constructor() {
|
|
6
|
-
this.listeners = {
|
|
7
|
-
ended: [],
|
|
8
|
-
error: [],
|
|
9
|
-
pause: [],
|
|
10
|
-
play: [],
|
|
11
|
-
ratechange: [],
|
|
12
|
-
seeked: [],
|
|
13
|
-
timeupdate: [],
|
|
14
|
-
frameupdate: [],
|
|
15
|
-
fullscreenchange: [],
|
|
16
|
-
};
|
|
17
|
-
}
|
|
18
|
-
addEventListener(name, callback) {
|
|
19
|
-
this.listeners[name].push(callback);
|
|
20
|
-
}
|
|
21
|
-
removeEventListener(name, callback) {
|
|
22
|
-
this.listeners[name] = this.listeners[name].filter((l) => l !== callback);
|
|
23
|
-
}
|
|
24
|
-
dispatchEvent(dispatchName, context) {
|
|
25
|
-
this.listeners[dispatchName].forEach((callback) => {
|
|
26
|
-
callback({ detail: context });
|
|
27
|
-
});
|
|
28
|
-
}
|
|
29
|
-
dispatchSeek(frame) {
|
|
30
|
-
this.dispatchEvent('seeked', {
|
|
31
|
-
frame,
|
|
32
|
-
});
|
|
33
|
-
}
|
|
34
|
-
dispatchPause() {
|
|
35
|
-
this.dispatchEvent('pause', undefined);
|
|
36
|
-
}
|
|
37
|
-
dispatchPlay() {
|
|
38
|
-
this.dispatchEvent('play', undefined);
|
|
39
|
-
}
|
|
40
|
-
dispatchEnded() {
|
|
41
|
-
this.dispatchEvent('ended', undefined);
|
|
42
|
-
}
|
|
43
|
-
dispatchRatechange(playbackRate) {
|
|
44
|
-
this.dispatchEvent('ratechange', {
|
|
45
|
-
playbackRate,
|
|
46
|
-
});
|
|
47
|
-
}
|
|
48
|
-
dispatchError(error) {
|
|
49
|
-
this.dispatchEvent('error', {
|
|
50
|
-
error,
|
|
51
|
-
});
|
|
52
|
-
}
|
|
53
|
-
dispatchTimeUpdate(event) {
|
|
54
|
-
this.dispatchEvent('timeupdate', event);
|
|
55
|
-
}
|
|
56
|
-
dispatchFrameUpdate(event) {
|
|
57
|
-
this.dispatchEvent('frameupdate', event);
|
|
58
|
-
}
|
|
59
|
-
dispatchFullscreenChangeUpdate(event) {
|
|
60
|
-
this.dispatchEvent('fullscreenchange', event);
|
|
61
|
-
}
|
|
62
|
-
}
|
|
63
|
-
exports.PlayerEmitter = PlayerEmitter;
|
|
64
|
-
class ThumbnailEmitter {
|
|
65
|
-
constructor() {
|
|
66
|
-
this.listeners = {
|
|
67
|
-
error: [],
|
|
68
|
-
};
|
|
69
|
-
}
|
|
70
|
-
addEventListener(name, callback) {
|
|
71
|
-
this.listeners[name].push(callback);
|
|
72
|
-
}
|
|
73
|
-
removeEventListener(name, callback) {
|
|
74
|
-
this.listeners[name] = this.listeners[name].filter((l) => l !== callback);
|
|
75
|
-
}
|
|
76
|
-
dispatchEvent(dispatchName, context) {
|
|
77
|
-
this.listeners[dispatchName].forEach((callback) => {
|
|
78
|
-
callback({ detail: context });
|
|
79
|
-
});
|
|
80
|
-
}
|
|
81
|
-
dispatchError(error) {
|
|
82
|
-
this.dispatchEvent('error', {
|
|
83
|
-
error,
|
|
84
|
-
});
|
|
85
|
-
}
|
|
86
|
-
}
|
|
87
|
-
exports.ThumbnailEmitter = ThumbnailEmitter;
|