@remotion/player 4.0.305 → 4.0.308

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 (96) hide show
  1. package/package.json +3 -3
  2. package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/BufferingIndicator.d.ts +0 -5
  3. package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/BufferingIndicator.js +0 -38
  4. package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/DefaultPlayPauseButton.d.ts +0 -5
  5. package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/DefaultPlayPauseButton.js +0 -12
  6. package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/EmitterProvider.d.ts +0 -5
  7. package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/EmitterProvider.js +0 -20
  8. package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/MediaVolumeSlider.d.ts +0 -5
  9. package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/MediaVolumeSlider.js +0 -129
  10. package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/PlaybackrateControl.d.ts +0 -8
  11. package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/PlaybackrateControl.js +0 -156
  12. package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/Player.d.ts +0 -56
  13. package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/Player.js +0 -143
  14. package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/PlayerControls.d.ts +0 -47
  15. package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/PlayerControls.js +0 -176
  16. package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/PlayerSeekBar.d.ts +0 -8
  17. package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/PlayerSeekBar.js +0 -145
  18. package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/PlayerUI.d.ts +0 -46
  19. package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/PlayerUI.js +0 -369
  20. package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/SharedPlayerContext.d.ts +0 -15
  21. package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/SharedPlayerContext.js +0 -55
  22. package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/Thumbnail.d.ts +0 -23
  23. package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/Thumbnail.js +0 -48
  24. package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/ThumbnailUI.d.ts +0 -11
  25. package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/ThumbnailUI.js +0 -89
  26. package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/calculate-next-frame.d.ts +0 -14
  27. package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/calculate-next-frame.js +0 -24
  28. package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/calculate-scale.d.ts +0 -50
  29. package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/calculate-scale.js +0 -72
  30. package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/emitter-context.d.ts +0 -4
  31. package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/emitter-context.js +0 -3
  32. package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/error-boundary.d.ts +0 -19
  33. package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/error-boundary.js +0 -32
  34. package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/event-emitter.d.ts +0 -91
  35. package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/event-emitter.js +0 -114
  36. package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/format-time.d.ts +0 -1
  37. package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/format-time.js +0 -5
  38. package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/icons.d.ts +0 -10
  39. package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/icons.js +0 -39
  40. package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/index.d.ts +0 -64
  41. package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/index.js +0 -23
  42. package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/is-backgrounded.d.ts +0 -2
  43. package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/is-backgrounded.js +0 -20
  44. package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/player-css-classname.d.ts +0 -1
  45. package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/player-css-classname.js +0 -1
  46. package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/player-methods.d.ts +0 -25
  47. package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/player-methods.js +0 -1
  48. package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/test/index.test.d.ts +0 -1
  49. package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/test/index.test.js +0 -7
  50. package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/test/test-utils.d.ts +0 -6
  51. package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/test/test-utils.js +0 -14
  52. package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/test/validate-in-out-frames.test.d.ts +0 -1
  53. package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/test/validate-in-out-frames.test.js +0 -54
  54. package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/test/validate-prop.test.d.ts +0 -1
  55. package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/test/validate-prop.test.js +0 -129
  56. package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/use-buffer-state-emitter.d.ts +0 -2
  57. package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/use-buffer-state-emitter.js +0 -22
  58. package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/use-hover-state.d.ts +0 -1
  59. package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/use-hover-state.js +0 -43
  60. package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/use-playback.d.ts +0 -8
  61. package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/use-playback.js +0 -157
  62. package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/use-player.d.ts +0 -24
  63. package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/use-player.js +0 -157
  64. package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/use-thumbnail.d.ts +0 -6
  65. package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/use-thumbnail.js +0 -14
  66. package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/use-video-controls-resize.d.ts +0 -11
  67. package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/use-video-controls-resize.js +0 -35
  68. package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/utils/calculate-player-size.d.ts +0 -9
  69. package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/utils/calculate-player-size.js +0 -24
  70. package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/utils/cancellable-promise.d.ts +0 -5
  71. package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/utils/cancellable-promise.js +0 -22
  72. package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/utils/delay.d.ts +0 -1
  73. package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/utils/delay.js +0 -2
  74. package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/utils/is-node.d.ts +0 -1
  75. package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/utils/is-node.js +0 -1
  76. package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/utils/props-if-has-props.d.ts +0 -10
  77. package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/utils/props-if-has-props.js +0 -1
  78. package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/utils/use-cancellable-promises.d.ts +0 -7
  79. package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/utils/use-cancellable-promises.js +0 -18
  80. package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/utils/use-click-prevention-on-double-click.d.ts +0 -3
  81. package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/utils/use-click-prevention-on-double-click.js +0 -41
  82. package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/utils/use-component-visible.d.ts +0 -6
  83. package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/utils/use-component-visible.js +0 -18
  84. package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/utils/use-element-size.d.ts +0 -16
  85. package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/utils/use-element-size.js +0 -127
  86. package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/utils/validate-in-out-frame.d.ts +0 -6
  87. package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/utils/validate-in-out-frame.js +0 -49
  88. package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/utils/validate-initial-frame.d.ts +0 -4
  89. package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/utils/validate-initial-frame.js +0 -23
  90. package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/utils/validate-playbackrate.d.ts +0 -1
  91. package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/utils/validate-playbackrate.js +0 -14
  92. package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/validate.d.ts +0 -5
  93. package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/validate.js +0 -6
  94. package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/volume-persistance.d.ts +0 -2
  95. package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/volume-persistance.js +0 -29
  96. package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/tsconfig-esm.tsbuildinfo +0 -1
@@ -1,54 +0,0 @@
1
- import { expect, test } from 'vitest';
2
- import { validateInOutFrames } from '../utils/validate-in-out-frame.js';
3
- test('Validate in out frames', () => {
4
- expect(() => validateInOutFrames({
5
- durationInFrames: 200,
6
- inFrame: 201,
7
- outFrame: undefined,
8
- })).toThrow(/inFrame must be less than \(durationInFrames - 1\)/);
9
- expect(() => validateInOutFrames({
10
- durationInFrames: 200,
11
- inFrame: 199,
12
- outFrame: 201,
13
- })).toThrow(/outFrame must be less than \(durationInFrames - 1\)/);
14
- expect(() => validateInOutFrames({
15
- durationInFrames: 200,
16
- inFrame: -10,
17
- outFrame: null,
18
- })).toThrow(/inFrame must be greater than 0, but is -10/);
19
- expect(() => validateInOutFrames({
20
- durationInFrames: 200,
21
- inFrame: null,
22
- outFrame: -10,
23
- })).toThrow(/outFrame must be greater than 0, but is -10/);
24
- expect(() => validateInOutFrames({
25
- durationInFrames: 200,
26
- inFrame: 1.5,
27
- outFrame: null,
28
- })).toThrow(/"inFrame" must be an integer, but is 1.5/);
29
- expect(() => validateInOutFrames({
30
- durationInFrames: 200,
31
- inFrame: 20,
32
- outFrame: 20,
33
- })).toThrow(/outFrame must be greater than inFrame, but is 20/);
34
- expect(() => validateInOutFrames({
35
- durationInFrames: 200,
36
- inFrame: 21,
37
- outFrame: 20,
38
- })).toThrow(/outFrame must be greater than inFrame, but is 20 <= 21/);
39
- expect(() => validateInOutFrames({
40
- durationInFrames: 200,
41
- inFrame: null,
42
- outFrame: 20,
43
- })).not.toThrow();
44
- expect(() => validateInOutFrames({
45
- durationInFrames: 200,
46
- inFrame: null,
47
- outFrame: null,
48
- })).not.toThrow();
49
- expect(() => validateInOutFrames({
50
- durationInFrames: 200,
51
- inFrame: 10,
52
- outFrame: 20,
53
- })).not.toThrow();
54
- });
@@ -1,129 +0,0 @@
1
- import { jsx as _jsx } from "react/jsx-runtime";
2
- import { Composition } from 'remotion';
3
- import { expect, test } from 'vitest';
4
- import { Player } from '../index.js';
5
- import { HelloWorld, render } from './test-utils.js';
6
- test('no compositionWidth should give errors', () => {
7
- try {
8
- render(_jsx(Player
9
- // @ts-expect-error
10
- , {
11
- // @ts-expect-error
12
- compositionWidth: null, errorFallback: () => 'something went wrong', compositionHeight: 400, fps: 30, durationInFrames: 500, component: HelloWorld, controls: true, showVolumeControls: true }));
13
- }
14
- catch (e) {
15
- expect(e.message).toMatch(/'compositionWidth' must be a number but got 'object' instead/);
16
- }
17
- });
18
- test('no compositionHeight should give errors', () => {
19
- try {
20
- render(_jsx(Player, { compositionWidth: 400, errorFallback: () => 'something went wrong',
21
- // @ts-expect-error
22
- compositionHeight: undefined, fps: 30, durationInFrames: 500, component: HelloWorld, controls: true, showVolumeControls: true }));
23
- }
24
- catch (e) {
25
- expect(e.message).toMatch(/'compositionHeight' must be a number but got 'undefined' instead/);
26
- }
27
- });
28
- test('No fps should give errors', () => {
29
- try {
30
- render(_jsx(Player, { compositionWidth: 500, compositionHeight: 400, errorFallback: () => 'something went wrong',
31
- // @ts-expect-error
32
- fps: null, durationInFrames: 500, component: HelloWorld, controls: true, showVolumeControls: true }));
33
- }
34
- catch (e) {
35
- expect(e.message).toMatch(/"fps" must be a number, but you passed a value of type object/);
36
- }
37
- try {
38
- render(_jsx(Player, { compositionWidth: 500, compositionHeight: 400, errorFallback: () => 'something went wrong',
39
- // @ts-expect-error
40
- fps: undefined, durationInFrames: 500, component: HelloWorld, controls: true, showVolumeControls: true }));
41
- }
42
- catch (e) {
43
- expect(e.message).toMatch(/"fps" must be a number, but you passed a value of type undefined/);
44
- }
45
- });
46
- test('No durationInFrames should give errors', () => {
47
- try {
48
- render(_jsx(Player, { compositionWidth: 500, compositionHeight: 400, errorFallback: () => 'something went wrong', fps: 30,
49
- // @ts-expect-error
50
- durationInFrames: undefined, component: HelloWorld, controls: true, showVolumeControls: true }));
51
- }
52
- catch (e) {
53
- expect(e.message).toMatch(/durationInFrames` must be a number, but is undefined/);
54
- }
55
- });
56
- test('Invalid playbackRate should give error', () => {
57
- try {
58
- render(_jsx(Player, { compositionWidth: 500, compositionHeight: 400, fps: 30, durationInFrames: 500, component: HelloWorld, controls: true, showVolumeControls: true, playbackRate: -5, inputProps: {} }));
59
- }
60
- catch (e) {
61
- expect(e.message).toMatch(/The lowest possible playback rate is -4. You passed: -5/);
62
- }
63
- });
64
- test('playbackRate of 0 should not be possible', () => {
65
- try {
66
- render(_jsx(Player, { compositionWidth: 500, compositionHeight: 400, fps: 30, durationInFrames: 500, component: HelloWorld, controls: true, showVolumeControls: true, playbackRate: 0 }));
67
- }
68
- catch (e) {
69
- expect(e.message).toMatch(/A playback rate of 0 is not supported./);
70
- }
71
- });
72
- test('playbackRate of wrong type should not be possible', () => {
73
- try {
74
- render(_jsx(Player, { compositionWidth: 500, compositionHeight: 400, fps: 30, durationInFrames: 500, component: HelloWorld, controls: true, showVolumeControls: true,
75
- // @ts-expect-error
76
- playbackRate: 'hi' }));
77
- }
78
- catch (e) {
79
- expect(e.message).toMatch(/A playback rate of 0 is not supported./);
80
- }
81
- });
82
- test('playbackRate of undefined should be okay', () => {
83
- render(_jsx(Player, { compositionWidth: 500, compositionHeight: 400, fps: 30, durationInFrames: 500, component: HelloWorld, controls: true, showVolumeControls: true }));
84
- expect(true).toBe(true);
85
- });
86
- test('passing in <Composition /> instance should not be possible', () => {
87
- expect(() => {
88
- render(_jsx(Player, { compositionWidth: 500, compositionHeight: 400, fps: 30, durationInFrames: 500, component: Composition, controls: true, showVolumeControls: true, inputProps: {
89
- id: 'HelloWorld',
90
- width: 500,
91
- height: 400,
92
- fps: 30,
93
- durationInFrames: 500,
94
- component: HelloWorld,
95
- } }));
96
- }).toThrow(/'component' must not be the 'Composition' component\. Pass your own React/);
97
- });
98
- test('passing in <Composition /> instance should not be possible', () => {
99
- expect(() => {
100
- render(_jsx(Player, { compositionWidth: 500, compositionHeight: 400, fps: 30, durationInFrames: 500,
101
- // @ts-expect-error
102
- component: _jsx(Composition, { durationInFrames: 30, fps: 30, height: 10, width: 10, id: "hello", component: HelloWorld }), controls: true, showVolumeControls: true, inputProps: {
103
- id: 'HelloWorld',
104
- width: 500,
105
- height: 400,
106
- fps: 30,
107
- durationInFrames: 500,
108
- component: HelloWorld,
109
- } }));
110
- }).toThrow(/'component' should not be an instance of <Composition\/>\. Pass the React component dir/);
111
- });
112
- test.each([
113
- ['controls'],
114
- ['loop'],
115
- ['autoPlay'],
116
- ['showVolumeControls'],
117
- ['allowFullscreen'],
118
- ['clickToPlay'],
119
- ['doubleClickToFullscreen'],
120
- ])('No durationInFrames should give errors %s', (a) => {
121
- const props = {};
122
- props[a] = 'hey';
123
- try {
124
- render(_jsx(Player, { compositionWidth: 500, compositionHeight: 400, errorFallback: () => 'something went wrong', fps: 30, durationInFrames: 100, component: HelloWorld, ...props }));
125
- }
126
- catch (e) {
127
- expect(e.message).toMatch(`'${a}' must be a boolean or undefined but got 'string' instead`);
128
- }
129
- });
@@ -1,2 +0,0 @@
1
- import type { PlayerEmitter, ThumbnailEmitter } from './event-emitter.js';
2
- export declare const useBufferStateEmitter: (emitter: PlayerEmitter | ThumbnailEmitter) => void;
@@ -1,22 +0,0 @@
1
- import { useContext, useEffect } from 'react';
2
- import { Internals } from 'remotion';
3
- export const useBufferStateEmitter = (emitter) => {
4
- const bufferManager = useContext(Internals.BufferingContextReact);
5
- if (!bufferManager) {
6
- throw new Error('BufferingContextReact not found');
7
- }
8
- useEffect(() => {
9
- const clear1 = bufferManager.listenForBuffering(() => {
10
- bufferManager.buffering.current = true;
11
- emitter.dispatchWaiting({});
12
- });
13
- const clear2 = bufferManager.listenForResume(() => {
14
- bufferManager.buffering.current = false;
15
- emitter.dispatchResume({});
16
- });
17
- return () => {
18
- clear1.remove();
19
- clear2.remove();
20
- };
21
- }, [bufferManager, emitter]);
22
- };
@@ -1 +0,0 @@
1
- export declare const useHoverState: (ref: React.RefObject<HTMLDivElement>, hideControlsWhenPointerDoesntMove: boolean | number) => boolean;
@@ -1,43 +0,0 @@
1
- import { useEffect, useState } from 'react';
2
- export const useHoverState = (ref, hideControlsWhenPointerDoesntMove) => {
3
- const [hovered, setHovered] = useState(false);
4
- useEffect(() => {
5
- const { current } = ref;
6
- if (!current) {
7
- return;
8
- }
9
- let hoverTimeout;
10
- const addHoverTimeout = () => {
11
- if (hideControlsWhenPointerDoesntMove) {
12
- clearTimeout(hoverTimeout);
13
- hoverTimeout = setTimeout(() => {
14
- setHovered(false);
15
- }, hideControlsWhenPointerDoesntMove === true
16
- ? 3000
17
- : hideControlsWhenPointerDoesntMove);
18
- }
19
- };
20
- const onHover = () => {
21
- setHovered(true);
22
- addHoverTimeout();
23
- };
24
- const onLeave = () => {
25
- setHovered(false);
26
- clearTimeout(hoverTimeout);
27
- };
28
- const onMove = () => {
29
- setHovered(true);
30
- addHoverTimeout();
31
- };
32
- current.addEventListener('mouseenter', onHover);
33
- current.addEventListener('mouseleave', onLeave);
34
- current.addEventListener('mousemove', onMove);
35
- return () => {
36
- current.removeEventListener('mouseenter', onHover);
37
- current.removeEventListener('mouseleave', onLeave);
38
- current.removeEventListener('mousemove', onMove);
39
- clearTimeout(hoverTimeout);
40
- };
41
- }, [hideControlsWhenPointerDoesntMove, ref]);
42
- return hovered;
43
- };
@@ -1,8 +0,0 @@
1
- export declare const usePlayback: ({ loop, playbackRate, moveToBeginningWhenEnded, inFrame, outFrame, frameRef, }: {
2
- loop: boolean;
3
- playbackRate: number;
4
- moveToBeginningWhenEnded: boolean;
5
- inFrame: number | null;
6
- outFrame: number | null;
7
- frameRef: React.MutableRefObject<number>;
8
- }) => void;
@@ -1,157 +0,0 @@
1
- /* eslint-disable @typescript-eslint/no-use-before-define */
2
- import { useContext, useEffect, useRef } from 'react';
3
- import { Internals } from 'remotion';
4
- import { calculateNextFrame } from './calculate-next-frame.js';
5
- import { useIsBackgrounded } from './is-backgrounded.js';
6
- import { usePlayer } from './use-player.js';
7
- export const usePlayback = ({ loop, playbackRate, moveToBeginningWhenEnded, inFrame, outFrame, frameRef, }) => {
8
- const config = Internals.useUnsafeVideoConfig();
9
- const frame = Internals.Timeline.useTimelinePosition();
10
- const { playing, pause, emitter } = usePlayer();
11
- const setFrame = Internals.Timeline.useTimelineSetFrame();
12
- const buffering = useRef(null);
13
- // requestAnimationFrame() does not work if the tab is not active.
14
- // This means that audio will keep playing even if it has ended.
15
- // In that case, we use setTimeout() instead.
16
- const isBackgroundedRef = useIsBackgrounded();
17
- const lastTimeUpdateEvent = useRef(null);
18
- const context = useContext(Internals.BufferingContextReact);
19
- if (!context) {
20
- throw new Error('Missing the buffering context. Most likely you have a Remotion version mismatch.');
21
- }
22
- useEffect(() => {
23
- const onBufferClear = context.listenForBuffering(() => {
24
- buffering.current = performance.now();
25
- });
26
- const onResumeClear = context.listenForResume(() => {
27
- buffering.current = null;
28
- });
29
- return () => {
30
- onBufferClear.remove();
31
- onResumeClear.remove();
32
- };
33
- }, [context]);
34
- useEffect(() => {
35
- if (!config) {
36
- return;
37
- }
38
- if (!playing) {
39
- return;
40
- }
41
- let hasBeenStopped = false;
42
- let reqAnimFrameCall = null;
43
- let startedTime = performance.now();
44
- let framesAdvanced = 0;
45
- const cancelQueuedFrame = () => {
46
- if (reqAnimFrameCall !== null) {
47
- if (reqAnimFrameCall.type === 'raf') {
48
- cancelAnimationFrame(reqAnimFrameCall.id);
49
- }
50
- else {
51
- clearTimeout(reqAnimFrameCall.id);
52
- }
53
- }
54
- };
55
- const stop = () => {
56
- hasBeenStopped = true;
57
- cancelQueuedFrame();
58
- };
59
- const callback = () => {
60
- const time = performance.now() - startedTime;
61
- const actualLastFrame = outFrame !== null && outFrame !== void 0 ? outFrame : config.durationInFrames - 1;
62
- const actualFirstFrame = inFrame !== null && inFrame !== void 0 ? inFrame : 0;
63
- const currentFrame = frameRef.current;
64
- const { nextFrame, framesToAdvance, hasEnded } = calculateNextFrame({
65
- time,
66
- currentFrame,
67
- playbackSpeed: playbackRate,
68
- fps: config.fps,
69
- actualFirstFrame,
70
- actualLastFrame,
71
- framesAdvanced,
72
- shouldLoop: loop,
73
- });
74
- framesAdvanced += framesToAdvance;
75
- if (nextFrame !== frameRef.current &&
76
- (!hasEnded || moveToBeginningWhenEnded)) {
77
- setFrame((c) => ({ ...c, [config.id]: nextFrame }));
78
- }
79
- if (hasEnded) {
80
- stop();
81
- pause();
82
- emitter.dispatchEnded();
83
- return;
84
- }
85
- if (!hasBeenStopped) {
86
- queueNextFrame();
87
- }
88
- };
89
- const queueNextFrame = () => {
90
- if (buffering.current) {
91
- const stopListening = context.listenForResume(() => {
92
- stopListening.remove();
93
- if (hasBeenStopped) {
94
- return;
95
- }
96
- startedTime = performance.now();
97
- framesAdvanced = 0;
98
- callback();
99
- });
100
- return;
101
- }
102
- if (isBackgroundedRef.current) {
103
- reqAnimFrameCall = {
104
- type: 'timeout',
105
- // Note: Most likely, this will not be 1000 / fps, but the browser will throttle it to ~1/sec.
106
- id: setTimeout(callback, 1000 / config.fps),
107
- };
108
- }
109
- else {
110
- reqAnimFrameCall = { type: 'raf', id: requestAnimationFrame(callback) };
111
- }
112
- };
113
- queueNextFrame();
114
- const onVisibilityChange = () => {
115
- if (document.visibilityState === 'visible') {
116
- return;
117
- }
118
- // If tab goes into the background, cancel requestAnimationFrame() and update immediately.
119
- // , so the transition to setTimeout() can be fulfilled.
120
- cancelQueuedFrame();
121
- callback();
122
- };
123
- window.addEventListener('visibilitychange', onVisibilityChange);
124
- return () => {
125
- window.removeEventListener('visibilitychange', onVisibilityChange);
126
- stop();
127
- };
128
- }, [
129
- config,
130
- loop,
131
- pause,
132
- playing,
133
- setFrame,
134
- emitter,
135
- playbackRate,
136
- inFrame,
137
- outFrame,
138
- moveToBeginningWhenEnded,
139
- isBackgroundedRef,
140
- frameRef,
141
- buffering,
142
- context,
143
- ]);
144
- useEffect(() => {
145
- const interval = setInterval(() => {
146
- if (lastTimeUpdateEvent.current === frameRef.current) {
147
- return;
148
- }
149
- emitter.dispatchTimeUpdate({ frame: frameRef.current });
150
- lastTimeUpdateEvent.current = frameRef.current;
151
- }, 250);
152
- return () => clearInterval(interval);
153
- }, [emitter, frameRef]);
154
- useEffect(() => {
155
- emitter.dispatchFrameUpdate({ frame });
156
- }, [emitter, frame]);
157
- };
@@ -1,24 +0,0 @@
1
- import type { SyntheticEvent } from 'react';
2
- import type { PlayerEmitter } from './event-emitter.js';
3
- type UsePlayerMethods = {
4
- frameBack: (frames: number) => void;
5
- frameForward: (frames: number) => void;
6
- isLastFrame: boolean;
7
- isFirstFrame: boolean;
8
- emitter: PlayerEmitter;
9
- playing: boolean;
10
- play: (e?: SyntheticEvent) => void;
11
- pause: () => void;
12
- pauseAndReturnToPlayStart: () => void;
13
- seek: (newFrame: number) => void;
14
- getCurrentFrame: () => number;
15
- isPlaying: () => boolean;
16
- hasPlayed: boolean;
17
- isBuffering: () => boolean;
18
- /**
19
- * @deprecated Remotion internal API
20
- */
21
- remotionInternal_currentFrameRef: React.MutableRefObject<number>;
22
- };
23
- export declare const usePlayer: () => UsePlayerMethods;
24
- export {};
@@ -1,157 +0,0 @@
1
- import { useCallback, useContext, useMemo, useRef, useState } from 'react';
2
- import { Internals } from 'remotion';
3
- import { PlayerEventEmitterContext } from './emitter-context.js';
4
- export const usePlayer = () => {
5
- var _a;
6
- const [playing, setPlaying, imperativePlaying] = Internals.Timeline.usePlayingState();
7
- const [hasPlayed, setHasPlayed] = useState(false);
8
- const frame = Internals.Timeline.useTimelinePosition();
9
- const playStart = useRef(frame);
10
- const setFrame = Internals.Timeline.useTimelineSetFrame();
11
- const setTimelinePosition = Internals.Timeline.useTimelineSetFrame();
12
- const audioContext = useContext(Internals.SharedAudioContext);
13
- const { audioAndVideoTags } = useContext(Internals.Timeline.TimelineContext);
14
- const frameRef = useRef(frame);
15
- frameRef.current = frame;
16
- const video = Internals.useVideo();
17
- const config = Internals.useUnsafeVideoConfig();
18
- const emitter = useContext(PlayerEventEmitterContext);
19
- const lastFrame = ((_a = config === null || config === void 0 ? void 0 : config.durationInFrames) !== null && _a !== void 0 ? _a : 1) - 1;
20
- const isLastFrame = frame === lastFrame;
21
- const isFirstFrame = frame === 0;
22
- if (!emitter) {
23
- throw new TypeError('Expected Player event emitter context');
24
- }
25
- const bufferingContext = useContext(Internals.BufferingContextReact);
26
- if (!bufferingContext) {
27
- throw new Error('Missing the buffering context. Most likely you have a Remotion version mismatch.');
28
- }
29
- const { buffering } = bufferingContext;
30
- const seek = useCallback((newFrame) => {
31
- if (video === null || video === void 0 ? void 0 : video.id) {
32
- setTimelinePosition((c) => ({ ...c, [video.id]: newFrame }));
33
- }
34
- frameRef.current = newFrame;
35
- emitter.dispatchSeek(newFrame);
36
- }, [emitter, setTimelinePosition, video === null || video === void 0 ? void 0 : video.id]);
37
- const play = useCallback((e) => {
38
- if (imperativePlaying.current) {
39
- return;
40
- }
41
- setHasPlayed(true);
42
- if (isLastFrame) {
43
- seek(0);
44
- }
45
- /**
46
- * Play silent audio tags to warm them up for autoplay
47
- */
48
- if (audioContext && audioContext.numberOfAudioTags > 0 && e) {
49
- audioContext.playAllAudios();
50
- }
51
- /**
52
- * Play audios and videos directly here so they can benefit from
53
- * being triggered by a click
54
- */
55
- audioAndVideoTags.current.forEach((a) => a.play());
56
- imperativePlaying.current = true;
57
- setPlaying(true);
58
- playStart.current = frameRef.current;
59
- emitter.dispatchPlay();
60
- }, [
61
- imperativePlaying,
62
- isLastFrame,
63
- audioContext,
64
- setPlaying,
65
- emitter,
66
- seek,
67
- audioAndVideoTags,
68
- ]);
69
- const pause = useCallback(() => {
70
- if (imperativePlaying.current) {
71
- imperativePlaying.current = false;
72
- setPlaying(false);
73
- emitter.dispatchPause();
74
- }
75
- }, [emitter, imperativePlaying, setPlaying]);
76
- const pauseAndReturnToPlayStart = useCallback(() => {
77
- if (imperativePlaying.current) {
78
- imperativePlaying.current = false;
79
- frameRef.current = playStart.current;
80
- if (config) {
81
- setTimelinePosition((c) => ({
82
- ...c,
83
- [config.id]: playStart.current,
84
- }));
85
- setPlaying(false);
86
- emitter.dispatchPause();
87
- }
88
- }
89
- }, [config, emitter, imperativePlaying, setPlaying, setTimelinePosition]);
90
- const videoId = video === null || video === void 0 ? void 0 : video.id;
91
- const frameBack = useCallback((frames) => {
92
- if (!videoId) {
93
- return null;
94
- }
95
- if (imperativePlaying.current) {
96
- return;
97
- }
98
- setFrame((c) => {
99
- var _a, _b;
100
- const prev = (_b = (_a = c[videoId]) !== null && _a !== void 0 ? _a : window.remotion_initialFrame) !== null && _b !== void 0 ? _b : 0;
101
- return {
102
- ...c,
103
- [videoId]: Math.max(0, prev - frames),
104
- };
105
- });
106
- }, [imperativePlaying, setFrame, videoId]);
107
- const frameForward = useCallback((frames) => {
108
- if (!videoId) {
109
- return null;
110
- }
111
- if (imperativePlaying.current) {
112
- return;
113
- }
114
- setFrame((c) => {
115
- var _a, _b;
116
- const prev = (_b = (_a = c[videoId]) !== null && _a !== void 0 ? _a : window.remotion_initialFrame) !== null && _b !== void 0 ? _b : 0;
117
- return {
118
- ...c,
119
- [videoId]: Math.min(lastFrame, prev + frames),
120
- };
121
- });
122
- }, [videoId, imperativePlaying, lastFrame, setFrame]);
123
- const returnValue = useMemo(() => {
124
- return {
125
- frameBack,
126
- frameForward,
127
- isLastFrame,
128
- emitter,
129
- playing,
130
- play,
131
- pause,
132
- seek,
133
- isFirstFrame,
134
- getCurrentFrame: () => frameRef.current,
135
- isPlaying: () => imperativePlaying.current,
136
- isBuffering: () => buffering.current,
137
- pauseAndReturnToPlayStart,
138
- hasPlayed,
139
- remotionInternal_currentFrameRef: frameRef,
140
- };
141
- }, [
142
- frameBack,
143
- frameForward,
144
- isLastFrame,
145
- emitter,
146
- playing,
147
- play,
148
- pause,
149
- seek,
150
- isFirstFrame,
151
- pauseAndReturnToPlayStart,
152
- hasPlayed,
153
- imperativePlaying,
154
- buffering,
155
- ]);
156
- return returnValue;
157
- };
@@ -1,6 +0,0 @@
1
- import type { ThumbnailEmitter } from './event-emitter.js';
2
- type UseThumbnailMethods = {
3
- emitter: ThumbnailEmitter;
4
- };
5
- export declare const useThumbnail: () => UseThumbnailMethods;
6
- export {};
@@ -1,14 +0,0 @@
1
- import { useContext, useMemo } from 'react';
2
- import { ThumbnailEmitterContext } from './emitter-context.js';
3
- export const useThumbnail = () => {
4
- const emitter = useContext(ThumbnailEmitterContext);
5
- if (!emitter) {
6
- throw new TypeError('Expected Player event emitter context');
7
- }
8
- const returnValue = useMemo(() => {
9
- return {
10
- emitter,
11
- };
12
- }, [emitter]);
13
- return returnValue;
14
- };
@@ -1,11 +0,0 @@
1
- type Info = {
2
- maxTimeLabelWidth: number | null;
3
- displayVerticalVolumeSlider: boolean;
4
- };
5
- export declare const X_SPACER = 10;
6
- export declare const X_PADDING = 12;
7
- export declare const useVideoControlsResize: ({ allowFullscreen: allowFullScreen, playerWidth, }: {
8
- allowFullscreen: boolean;
9
- playerWidth: number;
10
- }) => Info;
11
- export {};