@remotion/player 4.0.212 → 4.0.214

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 (113) hide show
  1. package/dist/cjs/DefaultPlayPauseButton.d.ts +0 -1
  2. package/dist/cjs/PlayerControls.js +2 -2
  3. package/dist/cjs/PlayerSeekBar.d.ts +0 -1
  4. package/dist/cjs/PlayerSeekBar.js +1 -2
  5. package/dist/cjs/PlayerUI.d.ts +3 -3
  6. package/dist/cjs/PlayerUI.js +8 -2
  7. package/dist/cjs/ThumbnailUI.d.ts +1 -1
  8. package/dist/cjs/ThumbnailUI.js +8 -2
  9. package/dist/cjs/calculate-scale.d.ts +3 -2
  10. package/dist/cjs/calculate-scale.js +2 -1
  11. package/dist/cjs/index.d.ts +7 -8
  12. package/dist/cjs/is-backgrounded.d.ts +0 -1
  13. package/dist/cjs/test/test-utils.d.ts +1 -1
  14. package/dist/cjs/utils/calculate-player-size.d.ts +2 -2
  15. package/dist/cjs/utils/use-component-visible.d.ts +0 -1
  16. package/dist/cjs/utils/use-component-visible.js +1 -1
  17. package/dist/esm/index.mjs +19 -5
  18. package/package.json +3 -3
  19. package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/BufferingIndicator.d.ts +0 -5
  20. package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/BufferingIndicator.js +0 -38
  21. package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/DefaultPlayPauseButton.d.ts +0 -5
  22. package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/DefaultPlayPauseButton.js +0 -12
  23. package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/EmitterProvider.d.ts +0 -5
  24. package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/EmitterProvider.js +0 -20
  25. package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/MediaVolumeSlider.d.ts +0 -5
  26. package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/MediaVolumeSlider.js +0 -129
  27. package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/PlaybackrateControl.d.ts +0 -8
  28. package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/PlaybackrateControl.js +0 -156
  29. package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/Player.d.ts +0 -56
  30. package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/Player.js +0 -143
  31. package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/PlayerControls.d.ts +0 -47
  32. package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/PlayerControls.js +0 -176
  33. package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/PlayerSeekBar.d.ts +0 -8
  34. package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/PlayerSeekBar.js +0 -145
  35. package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/PlayerUI.d.ts +0 -46
  36. package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/PlayerUI.js +0 -369
  37. package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/SharedPlayerContext.d.ts +0 -15
  38. package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/SharedPlayerContext.js +0 -55
  39. package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/Thumbnail.d.ts +0 -23
  40. package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/Thumbnail.js +0 -48
  41. package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/ThumbnailUI.d.ts +0 -11
  42. package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/ThumbnailUI.js +0 -89
  43. package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/calculate-next-frame.d.ts +0 -14
  44. package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/calculate-next-frame.js +0 -24
  45. package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/calculate-scale.d.ts +0 -50
  46. package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/calculate-scale.js +0 -72
  47. package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/emitter-context.d.ts +0 -4
  48. package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/emitter-context.js +0 -3
  49. package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/error-boundary.d.ts +0 -19
  50. package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/error-boundary.js +0 -32
  51. package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/event-emitter.d.ts +0 -91
  52. package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/event-emitter.js +0 -114
  53. package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/format-time.d.ts +0 -1
  54. package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/format-time.js +0 -5
  55. package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/icons.d.ts +0 -10
  56. package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/icons.js +0 -39
  57. package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/index.d.ts +0 -64
  58. package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/index.js +0 -23
  59. package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/is-backgrounded.d.ts +0 -2
  60. package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/is-backgrounded.js +0 -20
  61. package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/player-css-classname.d.ts +0 -1
  62. package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/player-css-classname.js +0 -1
  63. package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/player-methods.d.ts +0 -25
  64. package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/player-methods.js +0 -1
  65. package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/test/index.test.d.ts +0 -1
  66. package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/test/index.test.js +0 -7
  67. package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/test/test-utils.d.ts +0 -6
  68. package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/test/test-utils.js +0 -14
  69. package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/test/validate-in-out-frames.test.d.ts +0 -1
  70. package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/test/validate-in-out-frames.test.js +0 -54
  71. package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/test/validate-prop.test.d.ts +0 -1
  72. package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/test/validate-prop.test.js +0 -129
  73. package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/use-buffer-state-emitter.d.ts +0 -2
  74. package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/use-buffer-state-emitter.js +0 -22
  75. package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/use-hover-state.d.ts +0 -1
  76. package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/use-hover-state.js +0 -43
  77. package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/use-playback.d.ts +0 -8
  78. package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/use-playback.js +0 -157
  79. package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/use-player.d.ts +0 -24
  80. package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/use-player.js +0 -157
  81. package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/use-thumbnail.d.ts +0 -6
  82. package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/use-thumbnail.js +0 -14
  83. package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/use-video-controls-resize.d.ts +0 -11
  84. package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/use-video-controls-resize.js +0 -35
  85. package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/utils/calculate-player-size.d.ts +0 -9
  86. package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/utils/calculate-player-size.js +0 -24
  87. package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/utils/cancellable-promise.d.ts +0 -5
  88. package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/utils/cancellable-promise.js +0 -22
  89. package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/utils/delay.d.ts +0 -1
  90. package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/utils/delay.js +0 -2
  91. package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/utils/is-node.d.ts +0 -1
  92. package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/utils/is-node.js +0 -1
  93. package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/utils/props-if-has-props.d.ts +0 -10
  94. package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/utils/props-if-has-props.js +0 -1
  95. package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/utils/use-cancellable-promises.d.ts +0 -7
  96. package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/utils/use-cancellable-promises.js +0 -18
  97. package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/utils/use-click-prevention-on-double-click.d.ts +0 -3
  98. package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/utils/use-click-prevention-on-double-click.js +0 -41
  99. package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/utils/use-component-visible.d.ts +0 -6
  100. package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/utils/use-component-visible.js +0 -18
  101. package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/utils/use-element-size.d.ts +0 -16
  102. package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/utils/use-element-size.js +0 -127
  103. package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/utils/validate-in-out-frame.d.ts +0 -6
  104. package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/utils/validate-in-out-frame.js +0 -49
  105. package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/utils/validate-initial-frame.d.ts +0 -4
  106. package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/utils/validate-initial-frame.js +0 -23
  107. package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/utils/validate-playbackrate.d.ts +0 -1
  108. package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/utils/validate-playbackrate.js +0 -14
  109. package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/validate.d.ts +0 -5
  110. package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/validate.js +0 -6
  111. package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/volume-persistance.d.ts +0 -2
  112. package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/volume-persistance.js +0 -29
  113. package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/tsconfig-esm.tsbuildinfo +0 -1
@@ -1,145 +0,0 @@
1
- import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
- import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
3
- import { Internals, interpolate } from 'remotion';
4
- import { useHoverState } from './use-hover-state.js';
5
- import { usePlayer } from './use-player.js';
6
- import { useElementSize } from './utils/use-element-size.js';
7
- const getFrameFromX = (clientX, durationInFrames, width) => {
8
- var _a;
9
- const pos = clientX;
10
- const frame = Math.round(interpolate(pos, [0, width], [0, (_a = durationInFrames - 1) !== null && _a !== void 0 ? _a : 0], {
11
- extrapolateLeft: 'clamp',
12
- extrapolateRight: 'clamp',
13
- }));
14
- return frame;
15
- };
16
- const BAR_HEIGHT = 5;
17
- const KNOB_SIZE = 12;
18
- const VERTICAL_PADDING = 4;
19
- const containerStyle = {
20
- userSelect: 'none',
21
- paddingTop: VERTICAL_PADDING,
22
- paddingBottom: VERTICAL_PADDING,
23
- boxSizing: 'border-box',
24
- cursor: 'pointer',
25
- position: 'relative',
26
- touchAction: 'none',
27
- };
28
- const barBackground = {
29
- height: BAR_HEIGHT,
30
- backgroundColor: 'rgba(255, 255, 255, 0.25)',
31
- width: '100%',
32
- borderRadius: BAR_HEIGHT / 2,
33
- };
34
- const findBodyInWhichDivIsLocated = (div) => {
35
- let current = div;
36
- while (current.parentElement) {
37
- current = current.parentElement;
38
- }
39
- return current;
40
- };
41
- export const PlayerSeekBar = ({ durationInFrames, onSeekEnd, onSeekStart, inFrame, outFrame }) => {
42
- var _a;
43
- const containerRef = useRef(null);
44
- const barHovered = useHoverState(containerRef, false);
45
- const size = useElementSize(containerRef, {
46
- triggerOnWindowResize: true,
47
- shouldApplyCssTransforms: true,
48
- });
49
- const { seek, play, pause, playing } = usePlayer();
50
- const frame = Internals.Timeline.useTimelinePosition();
51
- const [dragging, setDragging] = useState({
52
- dragging: false,
53
- });
54
- const width = (_a = size === null || size === void 0 ? void 0 : size.width) !== null && _a !== void 0 ? _a : 0;
55
- const onPointerDown = useCallback((e) => {
56
- var _a;
57
- if (e.button !== 0) {
58
- return;
59
- }
60
- const posLeft = (_a = containerRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect().left;
61
- const _frame = getFrameFromX(e.clientX - posLeft, durationInFrames, width);
62
- pause();
63
- seek(_frame);
64
- setDragging({
65
- dragging: true,
66
- wasPlaying: playing,
67
- });
68
- onSeekStart();
69
- }, [durationInFrames, width, pause, seek, playing, onSeekStart]);
70
- const onPointerMove = useCallback((e) => {
71
- var _a;
72
- if (!size) {
73
- throw new Error('Player has no size');
74
- }
75
- if (!dragging.dragging) {
76
- return;
77
- }
78
- const posLeft = (_a = containerRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect().left;
79
- const _frame = getFrameFromX(e.clientX - posLeft, durationInFrames, size.width);
80
- seek(_frame);
81
- }, [dragging.dragging, durationInFrames, seek, size]);
82
- const onPointerUp = useCallback(() => {
83
- setDragging({
84
- dragging: false,
85
- });
86
- if (!dragging.dragging) {
87
- return;
88
- }
89
- if (dragging.wasPlaying) {
90
- play();
91
- }
92
- else {
93
- pause();
94
- }
95
- onSeekEnd();
96
- }, [dragging, onSeekEnd, pause, play]);
97
- useEffect(() => {
98
- if (!dragging.dragging) {
99
- return;
100
- }
101
- const body = findBodyInWhichDivIsLocated(containerRef.current);
102
- body.addEventListener('pointermove', onPointerMove);
103
- body.addEventListener('pointerup', onPointerUp);
104
- return () => {
105
- body.removeEventListener('pointermove', onPointerMove);
106
- body.removeEventListener('pointerup', onPointerUp);
107
- };
108
- }, [dragging.dragging, onPointerMove, onPointerUp]);
109
- const knobStyle = useMemo(() => {
110
- return {
111
- height: KNOB_SIZE,
112
- width: KNOB_SIZE,
113
- borderRadius: KNOB_SIZE / 2,
114
- position: 'absolute',
115
- top: VERTICAL_PADDING - KNOB_SIZE / 2 + 5 / 2,
116
- backgroundColor: 'white',
117
- left: Math.max(0, (frame / Math.max(1, durationInFrames - 1)) * width - KNOB_SIZE / 2),
118
- boxShadow: '0 0 2px black',
119
- opacity: Number(barHovered),
120
- };
121
- }, [barHovered, durationInFrames, frame, width]);
122
- const fillStyle = useMemo(() => {
123
- return {
124
- height: BAR_HEIGHT,
125
- backgroundColor: 'rgba(255, 255, 255, 1)',
126
- width: ((frame - (inFrame !== null && inFrame !== void 0 ? inFrame : 0)) / (durationInFrames - 1)) * 100 + '%',
127
- marginLeft: ((inFrame !== null && inFrame !== void 0 ? inFrame : 0) / (durationInFrames - 1)) * 100 + '%',
128
- borderRadius: BAR_HEIGHT / 2,
129
- };
130
- }, [durationInFrames, frame, inFrame]);
131
- const active = useMemo(() => {
132
- return {
133
- height: BAR_HEIGHT,
134
- backgroundColor: 'rgba(255, 255, 255, 0.25)',
135
- width: (((outFrame !== null && outFrame !== void 0 ? outFrame : durationInFrames - 1) - (inFrame !== null && inFrame !== void 0 ? inFrame : 0)) /
136
- (durationInFrames - 1)) *
137
- 100 +
138
- '%',
139
- marginLeft: ((inFrame !== null && inFrame !== void 0 ? inFrame : 0) / (durationInFrames - 1)) * 100 + '%',
140
- borderRadius: BAR_HEIGHT / 2,
141
- position: 'absolute',
142
- };
143
- }, [durationInFrames, inFrame, outFrame]);
144
- return (_jsxs("div", { ref: containerRef, onPointerDown: onPointerDown, style: containerStyle, children: [_jsxs("div", { style: barBackground, children: [_jsx("div", { style: active }), _jsx("div", { style: fillStyle })] }), _jsx("div", { style: knobStyle })] }));
145
- };
@@ -1,46 +0,0 @@
1
- import React from 'react';
2
- import type { PlayerRef } from './player-methods.js';
3
- import type { RenderFullscreenButton, RenderPlayPauseButton } from './PlayerControls.js';
4
- export type ErrorFallback = (info: {
5
- error: Error;
6
- }) => React.ReactNode;
7
- export type RenderLoading = (canvas: {
8
- height: number;
9
- width: number;
10
- isBuffering: boolean;
11
- }) => React.ReactNode;
12
- export type RenderPoster = RenderLoading;
13
- export type PosterFillMode = 'player-size' | 'composition-size';
14
- declare const _default: React.ForwardRefExoticComponent<{
15
- controls: boolean;
16
- loop: boolean;
17
- autoPlay: boolean;
18
- allowFullscreen: boolean;
19
- inputProps: Record<string, unknown>;
20
- showVolumeControls: boolean;
21
- style?: React.CSSProperties | undefined;
22
- clickToPlay: boolean;
23
- doubleClickToFullscreen: boolean;
24
- spaceKeyToPlayOrPause: boolean;
25
- errorFallback: ErrorFallback;
26
- playbackRate: number;
27
- renderLoading: RenderLoading | undefined;
28
- renderPoster: RenderLoading | undefined;
29
- className: string | undefined;
30
- moveToBeginningWhenEnded: boolean;
31
- showPosterWhenPaused: boolean;
32
- showPosterWhenEnded: boolean;
33
- showPosterWhenUnplayed: boolean;
34
- showPosterWhenBuffering: boolean;
35
- inFrame: number | null;
36
- outFrame: number | null;
37
- initiallyShowControls: number | boolean;
38
- renderPlayPauseButton: RenderPlayPauseButton | null;
39
- renderFullscreen: RenderFullscreenButton | null;
40
- alwaysShowControls: boolean;
41
- showPlaybackRateControl: boolean | number[];
42
- posterFillMode: PosterFillMode;
43
- bufferStateDelayInMilliseconds: number;
44
- hideControlsWhenPointerDoesntMove: number | boolean;
45
- } & React.RefAttributes<PlayerRef>>;
46
- export default _default;
@@ -1,369 +0,0 @@
1
- import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
2
- import React, { forwardRef, Suspense, useCallback, useContext, useEffect, useImperativeHandle, useMemo, useRef, useState, } 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 { Controls } from './PlayerControls.js';
8
- import { usePlayback } from './use-playback.js';
9
- import { usePlayer } from './use-player.js';
10
- import { IS_NODE } from './utils/is-node.js';
11
- import { useClickPreventionOnDoubleClick } from './utils/use-click-prevention-on-double-click.js';
12
- import { useElementSize } from './utils/use-element-size.js';
13
- const reactVersion = React.version.split('.')[0];
14
- if (reactVersion === '0') {
15
- throw new Error(`Version ${reactVersion} of "react" is not supported by Remotion`);
16
- }
17
- const doesReactVersionSupportSuspense = parseInt(reactVersion, 10) >= 18;
18
- const PlayerUI = ({ controls, style, loop, autoPlay, allowFullscreen, inputProps, clickToPlay, showVolumeControls, doubleClickToFullscreen, spaceKeyToPlayOrPause, errorFallback, playbackRate, renderLoading, renderPoster, className, moveToBeginningWhenEnded, showPosterWhenUnplayed, showPosterWhenEnded, showPosterWhenPaused, showPosterWhenBuffering, inFrame, outFrame, initiallyShowControls, renderFullscreen: renderFullscreenButton, renderPlayPauseButton, alwaysShowControls, showPlaybackRateControl, posterFillMode, bufferStateDelayInMilliseconds, hideControlsWhenPointerDoesntMove, }, ref) => {
19
- var _a, _b, _c;
20
- const config = Internals.useUnsafeVideoConfig();
21
- const video = Internals.useVideo();
22
- const container = useRef(null);
23
- const canvasSize = useElementSize(container, {
24
- triggerOnWindowResize: false,
25
- shouldApplyCssTransforms: false,
26
- });
27
- const [hasPausedToResume, setHasPausedToResume] = useState(false);
28
- const [shouldAutoplay, setShouldAutoPlay] = useState(autoPlay);
29
- const [isFullscreen, setIsFullscreen] = useState(() => false);
30
- const [seeking, setSeeking] = useState(false);
31
- const supportsFullScreen = useMemo(() => {
32
- if (typeof document === 'undefined') {
33
- return false;
34
- }
35
- return Boolean(document.fullscreenEnabled || document.webkitFullscreenEnabled);
36
- }, []);
37
- const player = usePlayer();
38
- usePlayback({
39
- loop,
40
- playbackRate,
41
- moveToBeginningWhenEnded,
42
- inFrame,
43
- outFrame,
44
- frameRef: player.remotionInternal_currentFrameRef,
45
- });
46
- useEffect(() => {
47
- if (hasPausedToResume && !player.playing) {
48
- setHasPausedToResume(false);
49
- player.play();
50
- }
51
- }, [hasPausedToResume, player]);
52
- useEffect(() => {
53
- const { current } = container;
54
- if (!current) {
55
- return;
56
- }
57
- const onFullscreenChange = () => {
58
- setIsFullscreen(document.fullscreenElement === current ||
59
- document.webkitFullscreenElement === current);
60
- };
61
- document.addEventListener('fullscreenchange', onFullscreenChange);
62
- document.addEventListener('webkitfullscreenchange', onFullscreenChange);
63
- return () => {
64
- document.removeEventListener('fullscreenchange', onFullscreenChange);
65
- document.removeEventListener('webkitfullscreenchange', onFullscreenChange);
66
- };
67
- }, []);
68
- const toggle = useCallback((e) => {
69
- if (player.isPlaying()) {
70
- player.pause();
71
- }
72
- else {
73
- player.play(e);
74
- }
75
- }, [player]);
76
- const requestFullscreen = useCallback(() => {
77
- if (!allowFullscreen) {
78
- throw new Error('allowFullscreen is false');
79
- }
80
- if (!supportsFullScreen) {
81
- throw new Error('Browser doesnt support fullscreen');
82
- }
83
- if (!container.current) {
84
- throw new Error('No player ref found');
85
- }
86
- if (container.current.webkitRequestFullScreen) {
87
- container.current.webkitRequestFullScreen();
88
- }
89
- else {
90
- container.current.requestFullscreen();
91
- }
92
- }, [allowFullscreen, supportsFullScreen]);
93
- const exitFullscreen = useCallback(() => {
94
- if (document.webkitExitFullscreen) {
95
- document.webkitExitFullscreen();
96
- }
97
- else {
98
- document.exitFullscreen();
99
- }
100
- }, []);
101
- useEffect(() => {
102
- const { current } = container;
103
- if (!current) {
104
- return;
105
- }
106
- const fullscreenChange = () => {
107
- var _a;
108
- const element = (_a = document.webkitFullscreenElement) !== null && _a !== void 0 ? _a : document.fullscreenElement;
109
- if (element && element === container.current) {
110
- player.emitter.dispatchFullscreenChange({
111
- isFullscreen: true,
112
- });
113
- }
114
- else {
115
- player.emitter.dispatchFullscreenChange({
116
- isFullscreen: false,
117
- });
118
- }
119
- };
120
- current.addEventListener('webkitfullscreenchange', fullscreenChange);
121
- current.addEventListener('fullscreenchange', fullscreenChange);
122
- return () => {
123
- current.removeEventListener('webkitfullscreenchange', fullscreenChange);
124
- current.removeEventListener('fullscreenchange', fullscreenChange);
125
- };
126
- }, [player.emitter]);
127
- const durationInFrames = (_a = config === null || config === void 0 ? void 0 : config.durationInFrames) !== null && _a !== void 0 ? _a : 1;
128
- const layout = useMemo(() => {
129
- if (!config || !canvasSize) {
130
- return null;
131
- }
132
- return calculateCanvasTransformation({
133
- canvasSize,
134
- compositionHeight: config.height,
135
- compositionWidth: config.width,
136
- previewSize: 'auto',
137
- });
138
- }, [canvasSize, config]);
139
- const scale = (_b = layout === null || layout === void 0 ? void 0 : layout.scale) !== null && _b !== void 0 ? _b : 1;
140
- const initialScaleIgnored = useRef(false);
141
- useEffect(() => {
142
- if (!initialScaleIgnored.current) {
143
- initialScaleIgnored.current = true;
144
- return;
145
- }
146
- player.emitter.dispatchScaleChange(scale);
147
- }, [player.emitter, scale]);
148
- const { setMediaVolume, setMediaMuted } = useContext(Internals.SetMediaVolumeContext);
149
- const { mediaMuted, mediaVolume } = useContext(Internals.MediaVolumeContext);
150
- useEffect(() => {
151
- player.emitter.dispatchVolumeChange(mediaVolume);
152
- }, [player.emitter, mediaVolume]);
153
- const isMuted = mediaMuted || mediaVolume === 0;
154
- useEffect(() => {
155
- player.emitter.dispatchMuteChange({
156
- isMuted,
157
- });
158
- }, [player.emitter, isMuted]);
159
- const [showBufferIndicator, setShowBufferState] = useState(false);
160
- useEffect(() => {
161
- let timeout = null;
162
- let stopped = false;
163
- const onBuffer = () => {
164
- requestAnimationFrame(() => {
165
- if (bufferStateDelayInMilliseconds === 0) {
166
- setShowBufferState(true);
167
- }
168
- else {
169
- timeout = setTimeout(() => {
170
- if (!stopped) {
171
- setShowBufferState(true);
172
- }
173
- }, bufferStateDelayInMilliseconds);
174
- }
175
- });
176
- };
177
- const onResume = () => {
178
- requestAnimationFrame(() => {
179
- setShowBufferState(false);
180
- if (timeout) {
181
- clearTimeout(timeout);
182
- }
183
- });
184
- };
185
- player.emitter.addEventListener('waiting', onBuffer);
186
- player.emitter.addEventListener('resume', onResume);
187
- return () => {
188
- player.emitter.removeEventListener('waiting', onBuffer);
189
- player.emitter.removeEventListener('resume', onResume);
190
- setShowBufferState(false);
191
- if (timeout) {
192
- clearTimeout(timeout);
193
- }
194
- stopped = true;
195
- };
196
- }, [bufferStateDelayInMilliseconds, player.emitter]);
197
- useImperativeHandle(ref, () => {
198
- const methods = {
199
- play: player.play,
200
- pause: () => {
201
- // If, after .seek()-ing, the player was explicitly paused, we don't resume
202
- setHasPausedToResume(false);
203
- player.pause();
204
- },
205
- toggle,
206
- getContainerNode: () => container.current,
207
- getCurrentFrame: player.getCurrentFrame,
208
- isPlaying: () => player.playing,
209
- seekTo: (f) => {
210
- const lastFrame = durationInFrames - 1;
211
- const frameToSeekTo = Math.max(0, Math.min(lastFrame, f));
212
- // continue playing after seeking if the player was playing before
213
- if (player.isPlaying()) {
214
- const pauseToResume = frameToSeekTo !== lastFrame || loop;
215
- setHasPausedToResume(pauseToResume);
216
- player.pause();
217
- }
218
- if (frameToSeekTo === lastFrame && !loop) {
219
- player.emitter.dispatchEnded();
220
- }
221
- player.seek(frameToSeekTo);
222
- },
223
- isFullscreen: () => isFullscreen,
224
- requestFullscreen,
225
- exitFullscreen,
226
- getVolume: () => {
227
- if (mediaMuted) {
228
- return 0;
229
- }
230
- return mediaVolume;
231
- },
232
- setVolume: (vol) => {
233
- if (typeof vol !== 'number') {
234
- throw new TypeError(`setVolume() takes a number, got value of type ${typeof vol}`);
235
- }
236
- if (isNaN(vol)) {
237
- throw new TypeError(`setVolume() got a number that is NaN. Volume must be between 0 and 1.`);
238
- }
239
- if (vol < 0 || vol > 1) {
240
- throw new TypeError(`setVolume() got a number that is out of range. Must be between 0 and 1, got ${typeof vol}`);
241
- }
242
- setMediaVolume(vol);
243
- },
244
- isMuted: () => isMuted,
245
- mute: () => {
246
- setMediaMuted(true);
247
- },
248
- unmute: () => {
249
- setMediaMuted(false);
250
- },
251
- getScale: () => scale,
252
- pauseAndReturnToPlayStart: () => {
253
- player.pauseAndReturnToPlayStart();
254
- },
255
- };
256
- return Object.assign(player.emitter, methods);
257
- }, [
258
- durationInFrames,
259
- exitFullscreen,
260
- isFullscreen,
261
- loop,
262
- mediaMuted,
263
- isMuted,
264
- mediaVolume,
265
- player,
266
- requestFullscreen,
267
- setMediaMuted,
268
- setMediaVolume,
269
- toggle,
270
- scale,
271
- ]);
272
- const VideoComponent = video ? video.component : null;
273
- const outerStyle = useMemo(() => {
274
- return calculateOuterStyle({ canvasSize, config, style });
275
- }, [canvasSize, config, style]);
276
- const outer = useMemo(() => {
277
- return calculateOuter({ config, layout, scale });
278
- }, [config, layout, scale]);
279
- const containerStyle = useMemo(() => {
280
- return calculateContainerStyle({ canvasSize, config, layout, scale });
281
- }, [canvasSize, config, layout, scale]);
282
- const onError = useCallback((error) => {
283
- player.pause();
284
- // Pay attention to `this context`
285
- player.emitter.dispatchError(error);
286
- }, [player]);
287
- const onFullscreenButtonClick = useCallback((e) => {
288
- e.stopPropagation();
289
- requestFullscreen();
290
- }, [requestFullscreen]);
291
- const onExitFullscreenButtonClick = useCallback((e) => {
292
- e.stopPropagation();
293
- exitFullscreen();
294
- }, [exitFullscreen]);
295
- const onSingleClick = useCallback((e) => {
296
- toggle(e);
297
- }, [toggle]);
298
- const onSeekStart = useCallback(() => {
299
- setSeeking(true);
300
- }, []);
301
- const onSeekEnd = useCallback(() => {
302
- setSeeking(false);
303
- }, []);
304
- const onDoubleClick = useCallback(() => {
305
- if (isFullscreen) {
306
- exitFullscreen();
307
- }
308
- else {
309
- requestFullscreen();
310
- }
311
- }, [exitFullscreen, isFullscreen, requestFullscreen]);
312
- const [handleClick, handleDoubleClick] = useClickPreventionOnDoubleClick(onSingleClick, onDoubleClick, doubleClickToFullscreen && allowFullscreen && supportsFullScreen);
313
- useEffect(() => {
314
- if (shouldAutoplay) {
315
- player.play();
316
- setShouldAutoPlay(false);
317
- }
318
- }, [shouldAutoplay, player]);
319
- const loadingMarkup = useMemo(() => {
320
- return renderLoading
321
- ? renderLoading({
322
- height: outerStyle.height,
323
- width: outerStyle.width,
324
- isBuffering: showBufferIndicator,
325
- })
326
- : null;
327
- }, [outerStyle.height, outerStyle.width, renderLoading, showBufferIndicator]);
328
- const currentScale = useMemo(() => {
329
- return {
330
- type: 'scale',
331
- scale,
332
- };
333
- }, [scale]);
334
- if (!config) {
335
- return null;
336
- }
337
- const poster = renderPoster
338
- ? renderPoster({
339
- height: posterFillMode === 'player-size'
340
- ? outerStyle.height
341
- : config.height,
342
- width: posterFillMode === 'player-size'
343
- ? outerStyle.width
344
- : config.width,
345
- isBuffering: showBufferIndicator,
346
- })
347
- : null;
348
- if (poster === undefined) {
349
- throw new TypeError('renderPoster() must return a React element, but undefined was returned');
350
- }
351
- const shouldShowPoster = poster &&
352
- [
353
- showPosterWhenPaused && !player.isPlaying() && !seeking,
354
- showPosterWhenEnded && player.isLastFrame && !player.isPlaying(),
355
- showPosterWhenUnplayed && !player.hasPlayed && !player.isPlaying(),
356
- showPosterWhenBuffering && showBufferIndicator && player.isPlaying(),
357
- ].some(Boolean);
358
- const { left, top, width, height, ...outerWithoutScale } = outer;
359
- const content = (_jsxs(_Fragment, { children: [_jsx("div", { style: outer, onPointerUp: clickToPlay ? handleClick : undefined, onDoubleClick: doubleClickToFullscreen ? handleDoubleClick : undefined, children: _jsxs("div", { style: containerStyle, className: PLAYER_CSS_CLASSNAME, children: [VideoComponent ? (_jsx(ErrorBoundary, { onError: onError, errorFallback: errorFallback, children: _jsx(Internals.ClipComposition, { children: _jsx(Internals.CurrentScaleContext.Provider, { value: currentScale, children: _jsx(VideoComponent, { ...((_c = video === null || video === void 0 ? void 0 : video.props) !== null && _c !== void 0 ? _c : {}), ...(inputProps !== null && inputProps !== void 0 ? inputProps : {}) }) }) }) })) : null, shouldShowPoster && posterFillMode === 'composition-size' ? (_jsx("div", { style: {
360
- ...outerWithoutScale,
361
- width: config.width,
362
- height: config.height,
363
- }, onPointerUp: clickToPlay ? handleClick : undefined, onDoubleClick: doubleClickToFullscreen ? handleDoubleClick : undefined, children: poster })) : null] }) }), shouldShowPoster && posterFillMode === 'player-size' ? (_jsx("div", { style: outer, onPointerUp: clickToPlay ? handleClick : undefined, onDoubleClick: doubleClickToFullscreen ? handleDoubleClick : undefined, children: poster })) : null, controls ? (_jsx(Controls, { fps: config.fps, durationInFrames: config.durationInFrames, player: player, containerRef: container, onFullscreenButtonClick: onFullscreenButtonClick, isFullscreen: isFullscreen, allowFullscreen: allowFullscreen, showVolumeControls: showVolumeControls, onExitFullscreenButtonClick: onExitFullscreenButtonClick, spaceKeyToPlayOrPause: spaceKeyToPlayOrPause, onSeekEnd: onSeekEnd, onSeekStart: onSeekStart, inFrame: inFrame, outFrame: outFrame, initiallyShowControls: initiallyShowControls, canvasSize: canvasSize, renderFullscreenButton: renderFullscreenButton, renderPlayPauseButton: renderPlayPauseButton, alwaysShowControls: alwaysShowControls, showPlaybackRateControl: showPlaybackRateControl, buffering: showBufferIndicator, hideControlsWhenPointerDoesntMove: hideControlsWhenPointerDoesntMove, onDoubleClick: doubleClickToFullscreen ? handleDoubleClick : undefined, onPointerUp: clickToPlay ? handleClick : undefined })) : null] }));
364
- if (IS_NODE && !doesReactVersionSupportSuspense) {
365
- return (_jsx("div", { ref: container, style: outerStyle, className: className, children: content }));
366
- }
367
- return (_jsx("div", { ref: container, style: outerStyle, className: className, children: _jsx(Suspense, { fallback: loadingMarkup, children: content }) }));
368
- };
369
- export default forwardRef(PlayerUI);
@@ -1,15 +0,0 @@
1
- import type { ComponentType, LazyExoticComponent } from 'react';
2
- import React from 'react';
3
- import type { TimelineContextValue } from 'remotion';
4
- export declare const PLAYER_COMP_ID = "player-comp";
5
- export declare const SharedPlayerContexts: React.FC<{
6
- children: React.ReactNode;
7
- timelineContext: TimelineContextValue;
8
- fps: number;
9
- compositionWidth: number;
10
- compositionHeight: number;
11
- durationInFrames: number;
12
- component: LazyExoticComponent<ComponentType<unknown>>;
13
- numberOfSharedAudioTags: number;
14
- initiallyMuted: boolean;
15
- }>;
@@ -1,55 +0,0 @@
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, fps, compositionHeight, compositionWidth, durationInFrames, component, numberOfSharedAudioTags, initiallyMuted, }) => {
7
- const compositionManagerContext = useMemo(() => {
8
- const context = {
9
- compositions: [
10
- {
11
- component: component,
12
- durationInFrames,
13
- height: compositionHeight,
14
- width: compositionWidth,
15
- fps,
16
- id: PLAYER_COMP_ID,
17
- nonce: 777,
18
- folderName: null,
19
- parentFolderName: null,
20
- schema: null,
21
- calculateMetadata: null,
22
- },
23
- ],
24
- folders: [],
25
- registerFolder: () => undefined,
26
- unregisterFolder: () => undefined,
27
- registerComposition: () => undefined,
28
- unregisterComposition: () => undefined,
29
- currentCompositionMetadata: null,
30
- setCurrentCompositionMetadata: () => undefined,
31
- canvasContent: { type: 'composition', compositionId: 'player-comp' },
32
- setCanvasContent: () => undefined,
33
- };
34
- return context;
35
- }, [component, durationInFrames, compositionHeight, compositionWidth, fps]);
36
- const [mediaMuted, setMediaMuted] = useState(() => initiallyMuted);
37
- const [mediaVolume, setMediaVolume] = useState(() => getPreferredVolume());
38
- const mediaVolumeContextValue = useMemo(() => {
39
- return {
40
- mediaMuted,
41
- mediaVolume,
42
- };
43
- }, [mediaMuted, mediaVolume]);
44
- const setMediaVolumeAndPersist = useCallback((vol) => {
45
- setMediaVolume(vol);
46
- persistVolume(vol);
47
- }, []);
48
- const setMediaVolumeContextValue = useMemo(() => {
49
- return {
50
- setMediaMuted,
51
- setMediaVolume: setMediaVolumeAndPersist,
52
- };
53
- }, [setMediaVolumeAndPersist]);
54
- 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: _jsx(Internals.BufferingProvider, { children: children }) }) }) }) }) }) }) }) }) }) }));
55
- };
@@ -1,23 +0,0 @@
1
- import type { CSSProperties } 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
- /**
19
- * @description A component which can be rendered in a regular React App (for example: Next.js, Vite) to display a single frame of a video.
20
- * @see [Documentation](https://www.remotion.dev/docs/player/thumbnail)
21
- */
22
- export declare const Thumbnail: <Schema extends AnyZodObject, Props extends Record<string, unknown>>(props: ThumbnailProps<Schema, Props> & import("react").RefAttributes<ThumbnailMethods>) => React.ReactElement | null;
23
- export {};