@remotion/player 4.1.0-alpha11 → 4.1.0-alpha12

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.
Files changed (101) hide show
  1. package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/MediaVolumeSlider.d.ts +5 -0
  2. package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/MediaVolumeSlider.js +115 -0
  3. package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/PlaybackrateControl.d.ts +8 -0
  4. package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/PlaybackrateControl.js +155 -0
  5. package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/Player.d.ts +52 -0
  6. package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/Player.js +151 -0
  7. package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/PlayerControls.d.ts +42 -0
  8. package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/PlayerControls.js +159 -0
  9. package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/PlayerSeekBar.d.ts +8 -0
  10. package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/PlayerSeekBar.js +142 -0
  11. package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/PlayerUI.d.ts +40 -0
  12. package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/PlayerUI.js +299 -0
  13. package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/SharedPlayerContext.d.ts +16 -0
  14. package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/SharedPlayerContext.js +72 -0
  15. package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/Thumbnail.d.ts +24 -0
  16. package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/Thumbnail.js +41 -0
  17. package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/ThumbnailUI.d.ts +11 -0
  18. package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/ThumbnailUI.js +82 -0
  19. package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/calculate-next-frame.d.ts +14 -0
  20. package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/calculate-next-frame.js +24 -0
  21. package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/calculate-scale.d.ts +39 -0
  22. package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/calculate-scale.js +77 -0
  23. package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/emitter-context.d.ts +4 -0
  24. package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/emitter-context.js +3 -0
  25. package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/error-boundary.d.ts +19 -0
  26. package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/error-boundary.js +32 -0
  27. package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/event-emitter.d.ts +81 -0
  28. package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/event-emitter.js +98 -0
  29. package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/format-time.d.ts +1 -0
  30. package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/format-time.js +5 -0
  31. package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/icons.d.ts +10 -0
  32. package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/icons.js +39 -0
  33. package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/index.d.ts +61 -0
  34. package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/index.js +20 -0
  35. package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/is-backgrounded.d.ts +2 -0
  36. package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/is-backgrounded.js +20 -0
  37. package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/player-css-classname.d.ts +1 -0
  38. package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/player-css-classname.js +1 -0
  39. package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/player-methods.d.ts +24 -0
  40. package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/player-methods.js +1 -0
  41. package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/test/index.test.d.ts +1 -0
  42. package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/test/index.test.js +7 -0
  43. package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/test/test-utils.d.ts +6 -0
  44. package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/test/test-utils.js +14 -0
  45. package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/test/validate-in-out-frames.test.d.ts +1 -0
  46. package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/test/validate-in-out-frames.test.js +54 -0
  47. package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/test/validate-prop.test.d.ts +1 -0
  48. package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/test/validate-prop.test.js +129 -0
  49. package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/use-hover-state.d.ts +1 -0
  50. package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/use-hover-state.js +23 -0
  51. package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/use-playback.d.ts +7 -0
  52. package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/use-playback.js +125 -0
  53. package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/use-player.d.ts +19 -0
  54. package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/use-player.js +147 -0
  55. package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/use-thumbnail.d.ts +6 -0
  56. package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/use-thumbnail.js +14 -0
  57. package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/use-video-controls-resize.d.ts +11 -0
  58. package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/use-video-controls-resize.js +35 -0
  59. package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/utils/calculate-player-size.d.ts +9 -0
  60. package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/utils/calculate-player-size.js +24 -0
  61. package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/utils/cancellable-promise.d.ts +5 -0
  62. package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/utils/cancellable-promise.js +22 -0
  63. package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/utils/delay.d.ts +1 -0
  64. package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/utils/delay.js +2 -0
  65. package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/utils/is-node.d.ts +1 -0
  66. package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/utils/is-node.js +1 -0
  67. package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/utils/preview-size.d.ts +8 -0
  68. package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/utils/preview-size.js +1 -0
  69. package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/utils/props-if-has-props.d.ts +10 -0
  70. package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/utils/props-if-has-props.js +1 -0
  71. package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/utils/use-cancellable-promises.d.ts +7 -0
  72. package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/utils/use-cancellable-promises.js +18 -0
  73. package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/utils/use-click-prevention-on-double-click.d.ts +3 -0
  74. package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/utils/use-click-prevention-on-double-click.js +42 -0
  75. package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/utils/use-component-visible.d.ts +6 -0
  76. package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/utils/use-component-visible.js +18 -0
  77. package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/utils/use-element-size.d.ts +16 -0
  78. package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/utils/use-element-size.js +127 -0
  79. package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/utils/validate-in-out-frame.d.ts +6 -0
  80. package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/utils/validate-in-out-frame.js +49 -0
  81. package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/utils/validate-initial-frame.d.ts +4 -0
  82. package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/utils/validate-initial-frame.js +23 -0
  83. package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/utils/validate-playbackrate.d.ts +1 -0
  84. package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/utils/validate-playbackrate.js +14 -0
  85. package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/volume-persistance.d.ts +2 -0
  86. package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/volume-persistance.js +14 -0
  87. package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/tsconfig-esm.tsbuildinfo +1 -0
  88. package/dist/cjs/Player.d.ts +1 -1
  89. package/dist/cjs/Player.js +1 -1
  90. package/dist/cjs/PlayerControls.d.ts +1 -1
  91. package/dist/cjs/PlayerControls.js +3 -1
  92. package/dist/cjs/PlayerUI.js +1 -3
  93. package/dist/cjs/SharedPlayerContext.js +1 -1
  94. package/dist/cjs/utils/use-element-size.js +21 -4
  95. package/dist/esm/Player.d.ts +1 -1
  96. package/dist/esm/PlayerControls.d.ts +1 -1
  97. package/dist/esm/error-boundary.d.ts +1 -1
  98. package/dist/esm/index.mjs +26 -9
  99. package/package.json +2 -6
  100. package/dist/tsconfig-esm.tsbuildinfo +0 -1
  101. package/dist/tsconfig.tsbuildinfo +0 -1
@@ -0,0 +1,72 @@
1
+ import { jsx as _jsx } from "react/jsx-runtime";
2
+ import { useCallback, useMemo, useState } from 'react';
3
+ import { Internals } from 'remotion';
4
+ import { getPreferredVolume, persistVolume } from './volume-persistance.js';
5
+ export const PLAYER_COMP_ID = 'player-comp';
6
+ export const SharedPlayerContexts = ({ children, timelineContext, inputProps, fps, compositionHeight, compositionWidth, durationInFrames, component, numberOfSharedAudioTags, initiallyMuted, }) => {
7
+ const compositionManagerContext = useMemo(() => {
8
+ return {
9
+ compositions: [
10
+ {
11
+ component: component,
12
+ durationInFrames,
13
+ height: compositionHeight,
14
+ width: compositionWidth,
15
+ fps,
16
+ id: PLAYER_COMP_ID,
17
+ props: inputProps,
18
+ nonce: 777,
19
+ scale: 1,
20
+ folderName: null,
21
+ defaultProps: undefined,
22
+ parentFolderName: null,
23
+ schema: null,
24
+ calculateMetadata: 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
+ registerRenderAsset: () => undefined,
38
+ unregisterAsset: () => undefined,
39
+ currentCompositionMetadata: null,
40
+ setCurrentCompositionMetadata: () => undefined,
41
+ assets: [],
42
+ setClipRegion: () => undefined,
43
+ resolved: null,
44
+ };
45
+ }, [
46
+ component,
47
+ durationInFrames,
48
+ compositionHeight,
49
+ compositionWidth,
50
+ fps,
51
+ inputProps,
52
+ ]);
53
+ const [mediaMuted, setMediaMuted] = useState(() => initiallyMuted);
54
+ const [mediaVolume, setMediaVolume] = useState(() => getPreferredVolume());
55
+ const mediaVolumeContextValue = useMemo(() => {
56
+ return {
57
+ mediaMuted,
58
+ mediaVolume,
59
+ };
60
+ }, [mediaMuted, mediaVolume]);
61
+ const setMediaVolumeAndPersist = useCallback((vol) => {
62
+ setMediaVolume(vol);
63
+ persistVolume(vol);
64
+ }, []);
65
+ const setMediaVolumeContextValue = useMemo(() => {
66
+ return {
67
+ setMediaMuted,
68
+ setMediaVolume: setMediaVolumeAndPersist,
69
+ };
70
+ }, [setMediaVolumeAndPersist]);
71
+ return (_jsx(Internals.CanUseRemotionHooksProvider, { children: _jsx(Internals.Timeline.TimelineContext.Provider, { value: timelineContext, children: _jsx(Internals.CompositionManager.Provider, { value: compositionManagerContext, children: _jsx(Internals.ResolveCompositionConfig, { children: _jsx(Internals.PrefetchProvider, { children: _jsx(Internals.DurationsContextProvider, { children: _jsx(Internals.MediaVolumeContext.Provider, { value: mediaVolumeContextValue, children: _jsx(Internals.NativeLayersProvider, { children: _jsx(Internals.SetMediaVolumeContext.Provider, { value: setMediaVolumeContextValue, children: _jsx(Internals.SharedAudioContextProvider, { numberOfAudioTags: numberOfSharedAudioTags, component: component, children: children }) }) }) }) }) }) }) }) }) }));
72
+ };
@@ -0,0 +1,24 @@
1
+ import type { CSSProperties, MutableRefObject } from 'react';
2
+ import type { CompProps } from 'remotion';
3
+ import type { AnyZodObject } from 'zod';
4
+ import type { ThumbnailMethods } from './player-methods.js';
5
+ import type { ErrorFallback, RenderLoading } from './PlayerUI.js';
6
+ import type { PropsIfHasProps } from './utils/props-if-has-props.js';
7
+ type ThumbnailProps<Schema extends AnyZodObject, Props extends Record<string, unknown>> = PropsIfHasProps<Schema, Props> & CompProps<Props> & {
8
+ frameToDisplay: number;
9
+ style?: CSSProperties;
10
+ durationInFrames: number;
11
+ compositionWidth: number;
12
+ compositionHeight: number;
13
+ fps: number;
14
+ errorFallback?: ErrorFallback;
15
+ renderLoading?: RenderLoading;
16
+ className?: string;
17
+ };
18
+ export declare const ThumbnailFn: <Schema extends AnyZodObject, Props extends Record<string, unknown>>({ frameToDisplay, style, inputProps, compositionHeight, compositionWidth, durationInFrames, fps, className, errorFallback, renderLoading, ...componentProps }: ThumbnailProps<Schema, Props>, ref: MutableRefObject<ThumbnailMethods>) => JSX.Element;
19
+ /**
20
+ * @description A component which can be rendered in a regular React App (for example: Create React App, Next.js) to display a single frame of a video.
21
+ * @see [Documentation](https://www.remotion.dev/docs/player/thumbnail)
22
+ */
23
+ export declare const Thumbnail: <Schema extends AnyZodObject, Props extends Record<string, unknown>>(props: ThumbnailProps<Schema, Props> & import("react").RefAttributes<ThumbnailMethods>) => React.ReactElement | null;
24
+ export {};
@@ -0,0 +1,41 @@
1
+ import { jsx as _jsx } from "react/jsx-runtime";
2
+ import { forwardRef, useImperativeHandle, useMemo, useRef, useState, } from 'react';
3
+ import { Internals, random } from 'remotion';
4
+ import { ThumbnailEmitterContext } from './emitter-context.js';
5
+ import { ThumbnailEmitter } from './event-emitter.js';
6
+ import { PLAYER_COMP_ID, SharedPlayerContexts } from './SharedPlayerContext.js';
7
+ import ThumbnailUI from './ThumbnailUI.js';
8
+ export const ThumbnailFn = ({ frameToDisplay, style, inputProps, compositionHeight, compositionWidth, durationInFrames, fps, className, errorFallback = () => '⚠️', renderLoading, ...componentProps }, ref) => {
9
+ const [thumbnailId] = useState(() => String(random(null)));
10
+ const rootRef = useRef(null);
11
+ const timelineState = useMemo(() => {
12
+ return {
13
+ playing: false,
14
+ frame: {
15
+ [PLAYER_COMP_ID]: frameToDisplay,
16
+ },
17
+ rootId: thumbnailId,
18
+ imperativePlaying: {
19
+ current: false,
20
+ },
21
+ playbackRate: 1,
22
+ setPlaybackRate: () => {
23
+ throw new Error('thumbnail');
24
+ },
25
+ audioAndVideoTags: { current: [] },
26
+ };
27
+ }, [frameToDisplay, thumbnailId]);
28
+ useImperativeHandle(ref, () => rootRef.current, []);
29
+ const Component = Internals.useLazyComponent(componentProps);
30
+ const [emitter] = useState(() => new ThumbnailEmitter());
31
+ const passedInputProps = useMemo(() => {
32
+ return inputProps !== null && inputProps !== void 0 ? inputProps : {};
33
+ }, [inputProps]);
34
+ return (_jsx(Internals.IsPlayerContextProvider, { children: _jsx(SharedPlayerContexts, { timelineContext: timelineState, component: Component, compositionHeight: compositionHeight, compositionWidth: compositionWidth, durationInFrames: durationInFrames, fps: fps, inputProps: passedInputProps, numberOfSharedAudioTags: 0, initiallyMuted: true, children: _jsx(ThumbnailEmitterContext.Provider, { value: emitter, children: _jsx(ThumbnailUI, { className: className, errorFallback: errorFallback, inputProps: passedInputProps, renderLoading: renderLoading, style: style }) }) }) }));
35
+ };
36
+ const forward = forwardRef;
37
+ /**
38
+ * @description A component which can be rendered in a regular React App (for example: Create React App, Next.js) to display a single frame of a video.
39
+ * @see [Documentation](https://www.remotion.dev/docs/player/thumbnail)
40
+ */
41
+ export const Thumbnail = forward(ThumbnailFn);
@@ -0,0 +1,11 @@
1
+ import React from 'react';
2
+ import type { ThumbnailMethods } from './player-methods.js';
3
+ import type { ErrorFallback, RenderLoading } from './PlayerUI.js';
4
+ declare const _default: React.ForwardRefExoticComponent<{
5
+ inputProps: Record<string, 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;
@@ -0,0 +1,82 @@
1
+ import { jsx as _jsx } from "react/jsx-runtime";
2
+ import React, { forwardRef, Suspense, useCallback, useImperativeHandle, useMemo, useRef, } from 'react';
3
+ import { Internals } from 'remotion';
4
+ import { calculateCanvasTransformation, calculateContainerStyle, calculateOuter, calculateOuterStyle, } from './calculate-scale.js';
5
+ import { ErrorBoundary } from './error-boundary.js';
6
+ import { PLAYER_CSS_CLASSNAME } from './player-css-classname.js';
7
+ import { useThumbnail } from './use-thumbnail.js';
8
+ import { IS_NODE } from './utils/is-node.js';
9
+ import { useElementSize } from './utils/use-element-size.js';
10
+ const reactVersion = React.version.split('.')[0];
11
+ if (reactVersion === '0') {
12
+ throw new Error(`Version ${reactVersion} of "react" is not supported by Remotion`);
13
+ }
14
+ const doesReactVersionSupportSuspense = parseInt(reactVersion, 10) >= 18;
15
+ const ThumbnailUI = ({ style, inputProps, errorFallback, renderLoading, className }, ref) => {
16
+ var _a, _b;
17
+ const config = Internals.useUnsafeVideoConfig();
18
+ const video = Internals.useVideo();
19
+ const container = useRef(null);
20
+ const canvasSize = useElementSize(container, {
21
+ triggerOnWindowResize: false,
22
+ shouldApplyCssTransforms: false,
23
+ });
24
+ const layout = useMemo(() => {
25
+ if (!config || !canvasSize) {
26
+ return null;
27
+ }
28
+ return calculateCanvasTransformation({
29
+ canvasSize,
30
+ compositionHeight: config.height,
31
+ compositionWidth: config.width,
32
+ previewSize: 'auto',
33
+ });
34
+ }, [canvasSize, config]);
35
+ const scale = (_a = layout === null || layout === void 0 ? void 0 : layout.scale) !== null && _a !== void 0 ? _a : 1;
36
+ const thumbnail = useThumbnail();
37
+ useImperativeHandle(ref, () => {
38
+ const methods = {
39
+ getContainerNode: () => container.current,
40
+ getScale: () => scale,
41
+ };
42
+ return Object.assign(thumbnail.emitter, methods);
43
+ }, [scale, thumbnail.emitter]);
44
+ const VideoComponent = video ? video.component : null;
45
+ const outerStyle = useMemo(() => {
46
+ return calculateOuterStyle({ config, style, canvasSize });
47
+ }, [canvasSize, config, style]);
48
+ const outer = useMemo(() => {
49
+ return calculateOuter({ config, layout, scale });
50
+ }, [config, layout, scale]);
51
+ const containerStyle = useMemo(() => {
52
+ return calculateContainerStyle({
53
+ canvasSize,
54
+ config,
55
+ layout,
56
+ scale,
57
+ });
58
+ }, [canvasSize, config, layout, scale]);
59
+ const onError = useCallback((error) => {
60
+ // Pay attention to `this context`
61
+ thumbnail.emitter.dispatchError(error);
62
+ }, [thumbnail.emitter]);
63
+ const rootRef = useRef(null);
64
+ useImperativeHandle(ref, () => rootRef.current, []);
65
+ const loadingMarkup = useMemo(() => {
66
+ return renderLoading
67
+ ? renderLoading({
68
+ height: outerStyle.height,
69
+ width: outerStyle.width,
70
+ })
71
+ : null;
72
+ }, [outerStyle.height, outerStyle.width, renderLoading]);
73
+ if (!config) {
74
+ return null;
75
+ }
76
+ const content = (_jsx("div", { style: outer, children: _jsx("div", { style: containerStyle, className: PLAYER_CSS_CLASSNAME, children: VideoComponent ? (_jsx(ErrorBoundary, { onError: onError, errorFallback: errorFallback, children: _jsx(VideoComponent, { ...((_b = video === null || video === void 0 ? void 0 : video.props) !== null && _b !== void 0 ? _b : {}), ...(inputProps !== null && inputProps !== void 0 ? inputProps : {}) }) })) : null }) }));
77
+ if (IS_NODE && !doesReactVersionSupportSuspense) {
78
+ return (_jsx("div", { ref: container, style: outerStyle, className: className, children: content }));
79
+ }
80
+ return (_jsx("div", { ref: container, style: outerStyle, className: className, children: _jsx(Suspense, { fallback: loadingMarkup, children: content }) }));
81
+ };
82
+ export default forwardRef(ThumbnailUI);
@@ -0,0 +1,14 @@
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
+ };
@@ -0,0 +1,24 @@
1
+ export const calculateNextFrame = ({ time, currentFrame: startFrame, playbackSpeed, fps, actualLastFrame, actualFirstFrame, framesAdvanced, shouldLoop, }) => {
2
+ const op = playbackSpeed < 0 ? Math.ceil : Math.floor;
3
+ const framesToAdvance = op((time * playbackSpeed) / (1000 / fps)) - framesAdvanced;
4
+ const nextFrame = framesToAdvance + startFrame;
5
+ const isCurrentFrameOutside = startFrame > actualLastFrame || startFrame < actualFirstFrame;
6
+ const isNextFrameOutside = nextFrame > actualLastFrame || nextFrame < actualFirstFrame;
7
+ const hasEnded = !shouldLoop && isNextFrameOutside && !isCurrentFrameOutside;
8
+ if (playbackSpeed > 0) {
9
+ // Play forwards
10
+ if (isNextFrameOutside) {
11
+ return {
12
+ nextFrame: actualFirstFrame,
13
+ framesToAdvance,
14
+ hasEnded,
15
+ };
16
+ }
17
+ return { nextFrame, framesToAdvance, hasEnded };
18
+ }
19
+ // Reverse playback
20
+ if (isNextFrameOutside) {
21
+ return { nextFrame: actualLastFrame, framesToAdvance, hasEnded };
22
+ }
23
+ return { nextFrame, framesToAdvance, hasEnded };
24
+ };
@@ -0,0 +1,39 @@
1
+ import type { VideoConfig } from 'remotion';
2
+ import type { PreviewSize } from './utils/preview-size.js';
3
+ import type { Size } from './utils/use-element-size.js';
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
+ 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 {};
@@ -0,0 +1,77 @@
1
+ import { calculatePlayerSize } from './utils/calculate-player-size.js';
2
+ export const calculateScale = ({ canvasSize, compositionHeight, compositionWidth, previewSize, }) => {
3
+ const heightRatio = canvasSize.height / compositionHeight;
4
+ const widthRatio = canvasSize.width / compositionWidth;
5
+ const ratio = Math.min(heightRatio, widthRatio);
6
+ return previewSize === 'auto' ? ratio : Number(previewSize);
7
+ };
8
+ export const calculateCanvasTransformation = ({ previewSize, compositionWidth, compositionHeight, canvasSize, }) => {
9
+ const scale = calculateScale({
10
+ canvasSize,
11
+ compositionHeight,
12
+ compositionWidth,
13
+ previewSize,
14
+ });
15
+ const correction = 0 - (1 - scale) / 2;
16
+ const xCorrection = correction * compositionWidth;
17
+ const yCorrection = correction * compositionHeight;
18
+ const width = compositionWidth * scale;
19
+ const height = compositionHeight * scale;
20
+ const centerX = canvasSize.width / 2 - width / 2;
21
+ const centerY = canvasSize.height / 2 - height / 2;
22
+ return {
23
+ centerX,
24
+ centerY,
25
+ xCorrection,
26
+ yCorrection,
27
+ scale,
28
+ };
29
+ };
30
+ export const calculateOuterStyle = ({ config, style, canvasSize, }) => {
31
+ if (!config) {
32
+ return {};
33
+ }
34
+ return {
35
+ position: 'relative',
36
+ overflow: 'hidden',
37
+ ...calculatePlayerSize({
38
+ compositionHeight: config.height,
39
+ compositionWidth: config.width,
40
+ currentSize: canvasSize,
41
+ height: style === null || style === void 0 ? void 0 : style.height,
42
+ width: style === null || style === void 0 ? void 0 : style.width,
43
+ }),
44
+ ...style,
45
+ };
46
+ };
47
+ export const calculateContainerStyle = ({ config, canvasSize, layout, scale, }) => {
48
+ if (!config || !canvasSize || !layout) {
49
+ return {};
50
+ }
51
+ return {
52
+ position: 'absolute',
53
+ width: config.width,
54
+ height: config.height,
55
+ display: 'flex',
56
+ transform: `scale(${scale})`,
57
+ marginLeft: layout.xCorrection,
58
+ marginTop: layout.yCorrection,
59
+ overflow: 'hidden',
60
+ };
61
+ };
62
+ export const calculateOuter = ({ layout, scale, config, }) => {
63
+ if (!layout || !config) {
64
+ return {};
65
+ }
66
+ const { centerX, centerY } = layout;
67
+ return {
68
+ width: config.width * scale,
69
+ height: config.height * scale,
70
+ display: 'flex',
71
+ flexDirection: 'column',
72
+ position: 'absolute',
73
+ left: centerX,
74
+ top: centerY,
75
+ overflow: 'hidden',
76
+ };
77
+ };
@@ -0,0 +1,4 @@
1
+ import React from 'react';
2
+ import type { PlayerEmitter, ThumbnailEmitter } from './event-emitter.js';
3
+ export declare const PlayerEventEmitterContext: React.Context<PlayerEmitter | undefined>;
4
+ export declare const ThumbnailEmitterContext: React.Context<ThumbnailEmitter | undefined>;
@@ -0,0 +1,3 @@
1
+ import React from 'react';
2
+ export const PlayerEventEmitterContext = React.createContext(undefined);
3
+ export const ThumbnailEmitterContext = React.createContext(undefined);
@@ -0,0 +1,19 @@
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 | React.ReactFragment | JSX.Element | null | undefined;
19
+ }
@@ -0,0 +1,32 @@
1
+ import { jsx as _jsx } from "react/jsx-runtime";
2
+ import React from 'react';
3
+ const errorStyle = {
4
+ display: 'flex',
5
+ justifyContent: 'center',
6
+ alignItems: 'center',
7
+ flex: 1,
8
+ height: '100%',
9
+ width: '100%',
10
+ };
11
+ export class ErrorBoundary extends React.Component {
12
+ constructor() {
13
+ super(...arguments);
14
+ this.state = { hasError: null };
15
+ }
16
+ static getDerivedStateFromError(error) {
17
+ // Update state so the next render will show the fallback UI.
18
+ return { hasError: error };
19
+ }
20
+ componentDidCatch(error) {
21
+ this.props.onError(error);
22
+ }
23
+ render() {
24
+ if (this.state.hasError) {
25
+ // You can render any custom fallback UI
26
+ return (_jsx("div", { style: errorStyle, children: this.props.errorFallback({
27
+ error: this.state.hasError,
28
+ }) }));
29
+ }
30
+ return this.props.children;
31
+ }
32
+ }
@@ -0,0 +1,81 @@
1
+ type SeekPayload = {
2
+ frame: number;
3
+ };
4
+ type ErrorPayload = {
5
+ error: Error;
6
+ };
7
+ type TimeUpdateEventPayload = {
8
+ frame: number;
9
+ };
10
+ type FrameUpdateEventPayload = {
11
+ frame: number;
12
+ };
13
+ type RateChangeEventPayload = {
14
+ playbackRate: number;
15
+ };
16
+ type ScaleChangeEventPayload = {
17
+ scale: number;
18
+ };
19
+ type VolumeChangeEventPayload = {
20
+ volume: number;
21
+ };
22
+ type FullscreenChangeEventPayload = {
23
+ isFullscreen: boolean;
24
+ };
25
+ type MuteChangeEventPayload = {
26
+ isMuted: boolean;
27
+ };
28
+ type PlayerStateEventMap = {
29
+ seeked: SeekPayload;
30
+ pause: undefined;
31
+ play: undefined;
32
+ ratechange: RateChangeEventPayload;
33
+ scalechange: ScaleChangeEventPayload;
34
+ volumechange: VolumeChangeEventPayload;
35
+ ended: undefined;
36
+ error: ErrorPayload;
37
+ timeupdate: TimeUpdateEventPayload;
38
+ frameupdate: FrameUpdateEventPayload;
39
+ fullscreenchange: FullscreenChangeEventPayload;
40
+ mutechange: MuteChangeEventPayload;
41
+ };
42
+ type ThumbnailStateEventMap = {
43
+ error: ErrorPayload;
44
+ };
45
+ export type PlayerEventTypes = keyof PlayerStateEventMap;
46
+ export type ThumbnailEventTypes = keyof ThumbnailStateEventMap;
47
+ export type CallbackListener<T extends PlayerEventTypes> = (data: {
48
+ detail: PlayerStateEventMap[T];
49
+ }) => void;
50
+ type PlayerListeners = {
51
+ [EventType in PlayerEventTypes]: CallbackListener<EventType>[];
52
+ };
53
+ type ThumbnailListeners = {
54
+ [EventType in ThumbnailEventTypes]: CallbackListener<EventType>[];
55
+ };
56
+ export declare class PlayerEmitter {
57
+ listeners: PlayerListeners;
58
+ addEventListener<Q extends PlayerEventTypes>(name: Q, callback: CallbackListener<Q>): void;
59
+ removeEventListener<Q extends PlayerEventTypes>(name: Q, callback: CallbackListener<Q>): void;
60
+ private dispatchEvent;
61
+ dispatchSeek(frame: number): void;
62
+ dispatchVolumeChange(volume: number): void;
63
+ dispatchPause(): void;
64
+ dispatchPlay(): void;
65
+ dispatchEnded(): void;
66
+ dispatchRateChange(playbackRate: number): void;
67
+ dispatchScaleChange(scale: number): void;
68
+ dispatchError(error: Error): void;
69
+ dispatchTimeUpdate(event: TimeUpdateEventPayload): void;
70
+ dispatchFrameUpdate(event: FrameUpdateEventPayload): void;
71
+ dispatchFullscreenChange(event: FullscreenChangeEventPayload): void;
72
+ dispatchMuteChange(event: MuteChangeEventPayload): void;
73
+ }
74
+ export declare class ThumbnailEmitter {
75
+ listeners: ThumbnailListeners;
76
+ addEventListener<Q extends ThumbnailEventTypes>(name: Q, callback: CallbackListener<Q>): void;
77
+ removeEventListener<Q extends ThumbnailEventTypes>(name: Q, callback: CallbackListener<Q>): void;
78
+ private dispatchEvent;
79
+ dispatchError(error: Error): void;
80
+ }
81
+ export {};
@@ -0,0 +1,98 @@
1
+ export class PlayerEmitter {
2
+ constructor() {
3
+ this.listeners = {
4
+ ended: [],
5
+ error: [],
6
+ pause: [],
7
+ play: [],
8
+ ratechange: [],
9
+ scalechange: [],
10
+ seeked: [],
11
+ timeupdate: [],
12
+ frameupdate: [],
13
+ fullscreenchange: [],
14
+ volumechange: [],
15
+ mutechange: [],
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
+ dispatchVolumeChange(volume) {
35
+ this.dispatchEvent('volumechange', {
36
+ volume,
37
+ });
38
+ }
39
+ dispatchPause() {
40
+ this.dispatchEvent('pause', undefined);
41
+ }
42
+ dispatchPlay() {
43
+ this.dispatchEvent('play', undefined);
44
+ }
45
+ dispatchEnded() {
46
+ this.dispatchEvent('ended', undefined);
47
+ }
48
+ dispatchRateChange(playbackRate) {
49
+ this.dispatchEvent('ratechange', {
50
+ playbackRate,
51
+ });
52
+ }
53
+ dispatchScaleChange(scale) {
54
+ this.dispatchEvent('scalechange', {
55
+ scale,
56
+ });
57
+ }
58
+ dispatchError(error) {
59
+ this.dispatchEvent('error', {
60
+ error,
61
+ });
62
+ }
63
+ dispatchTimeUpdate(event) {
64
+ this.dispatchEvent('timeupdate', event);
65
+ }
66
+ dispatchFrameUpdate(event) {
67
+ this.dispatchEvent('frameupdate', event);
68
+ }
69
+ dispatchFullscreenChange(event) {
70
+ this.dispatchEvent('fullscreenchange', event);
71
+ }
72
+ dispatchMuteChange(event) {
73
+ this.dispatchEvent('mutechange', event);
74
+ }
75
+ }
76
+ export class ThumbnailEmitter {
77
+ constructor() {
78
+ this.listeners = {
79
+ error: [],
80
+ };
81
+ }
82
+ addEventListener(name, callback) {
83
+ this.listeners[name].push(callback);
84
+ }
85
+ removeEventListener(name, callback) {
86
+ this.listeners[name] = this.listeners[name].filter((l) => l !== callback);
87
+ }
88
+ dispatchEvent(dispatchName, context) {
89
+ this.listeners[dispatchName].forEach((callback) => {
90
+ callback({ detail: context });
91
+ });
92
+ }
93
+ dispatchError(error) {
94
+ this.dispatchEvent('error', {
95
+ error,
96
+ });
97
+ }
98
+ }
@@ -0,0 +1 @@
1
+ export declare const formatTime: (timeInSeconds: number) => string;
@@ -0,0 +1,5 @@
1
+ export const formatTime = (timeInSeconds) => {
2
+ const minutes = Math.floor(timeInSeconds / 60);
3
+ const seconds = Math.floor(timeInSeconds - minutes * 60);
4
+ return `${String(minutes)}:${String(seconds).padStart(2, '0')}`;
5
+ };
@@ -0,0 +1,10 @@
1
+ import React from 'react';
2
+ export declare const ICON_SIZE = 25;
3
+ export declare const fullscreenIconSize = 16;
4
+ export declare const PlayIcon: React.FC;
5
+ export declare const PauseIcon: React.FC;
6
+ export declare const FullscreenIcon: React.FC<{
7
+ isFullscreen: boolean;
8
+ }>;
9
+ export declare const VolumeOffIcon: React.FC;
10
+ export declare const VolumeOnIcon: React.FC;