remotion 3.3.52 → 3.3.53

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 (194) hide show
  1. package/dist/cjs/version.d.ts +1 -1
  2. package/dist/cjs/version.js +1 -1
  3. package/dist/esm/version.d.ts +1 -1
  4. package/dist/esm/version.js +1 -1
  5. package/dist/tsconfig-cjs.tsbuildinfo +1 -1
  6. package/package.json +2 -2
  7. package/dist/AbsoluteFill.d.ts +0 -6
  8. package/dist/AbsoluteFill.js +0 -28
  9. package/dist/CanUseRemotionHooks.d.ts +0 -5
  10. package/dist/CanUseRemotionHooks.js +0 -10
  11. package/dist/Clipper.d.ts +0 -7
  12. package/dist/Clipper.js +0 -24
  13. package/dist/Composition.d.ts +0 -23
  14. package/dist/Composition.js +0 -113
  15. package/dist/CompositionManager.d.ts +0 -82
  16. package/dist/CompositionManager.js +0 -164
  17. package/dist/Folder.d.ts +0 -15
  18. package/dist/Folder.js +0 -33
  19. package/dist/IFrame.d.ts +0 -2
  20. package/dist/IFrame.js +0 -24
  21. package/dist/Img.d.ts +0 -2
  22. package/dist/Img.js +0 -52
  23. package/dist/NativeLayers.d.ts +0 -13
  24. package/dist/NativeLayers.js +0 -29
  25. package/dist/Null.d.ts +0 -2
  26. package/dist/Null.js +0 -25
  27. package/dist/RemotionRoot.d.ts +0 -5
  28. package/dist/RemotionRoot.js +0 -73
  29. package/dist/Sequence.d.ts +0 -29
  30. package/dist/Sequence.js +0 -131
  31. package/dist/Still.d.ts +0 -2
  32. package/dist/Still.js +0 -9
  33. package/dist/absolute-src.d.ts +0 -1
  34. package/dist/absolute-src.js +0 -7
  35. package/dist/asset-types.d.ts +0 -50
  36. package/dist/asset-types.js +0 -1
  37. package/dist/audio/Audio.d.ts +0 -8
  38. package/dist/audio/Audio.js +0 -52
  39. package/dist/audio/AudioForDevelopment.d.ts +0 -11
  40. package/dist/audio/AudioForDevelopment.js +0 -94
  41. package/dist/audio/AudioForRendering.d.ts +0 -10
  42. package/dist/audio/AudioForRendering.js +0 -111
  43. package/dist/audio/index.d.ts +0 -2
  44. package/dist/audio/index.js +0 -18
  45. package/dist/audio/props.d.ts +0 -12
  46. package/dist/audio/props.js +0 -2
  47. package/dist/audio/shared-audio-tags.d.ts +0 -37
  48. package/dist/audio/shared-audio-tags.js +0 -222
  49. package/dist/audio/use-audio-frame.d.ts +0 -6
  50. package/dist/audio/use-audio-frame.js +0 -23
  51. package/dist/bezier.d.ts +0 -1
  52. package/dist/bezier.js +0 -114
  53. package/dist/cancel-render.d.ts +0 -1
  54. package/dist/cancel-render.js +0 -43
  55. package/dist/config/input-props.d.ts +0 -1
  56. package/dist/config/input-props.js +0 -31
  57. package/dist/config.d.ts +0 -285
  58. package/dist/config.js +0 -21
  59. package/dist/default-css.d.ts +0 -3
  60. package/dist/default-css.js +0 -49
  61. package/dist/delay-render.d.ts +0 -14
  62. package/dist/delay-render.js +0 -77
  63. package/dist/easing.d.ts +0 -19
  64. package/dist/easing.js +0 -77
  65. package/dist/freeze.d.ts +0 -7
  66. package/dist/freeze.js +0 -34
  67. package/dist/get-asset-file-name.d.ts +0 -1
  68. package/dist/get-asset-file-name.js +0 -14
  69. package/dist/get-environment.d.ts +0 -3
  70. package/dist/get-environment.js +0 -34
  71. package/dist/get-preview-dom-element.d.ts +0 -1
  72. package/dist/get-preview-dom-element.js +0 -7
  73. package/dist/get-static-files.d.ts +0 -17
  74. package/dist/get-static-files.js +0 -31
  75. package/dist/get-timeline-clip-name.d.ts +0 -1
  76. package/dist/get-timeline-clip-name.js +0 -25
  77. package/dist/index.d.ts +0 -92
  78. package/dist/index.js +0 -73
  79. package/dist/internals.d.ts +0 -97
  80. package/dist/internals.js +0 -99
  81. package/dist/interpolate-colors.d.ts +0 -5
  82. package/dist/interpolate-colors.js +0 -401
  83. package/dist/interpolate.d.ts +0 -18
  84. package/dist/interpolate.js +0 -123
  85. package/dist/is-approximately-the-same.d.ts +0 -1
  86. package/dist/is-approximately-the-same.js +0 -8
  87. package/dist/is-player.d.ts +0 -3
  88. package/dist/is-player.js +0 -14
  89. package/dist/loading-indicator.d.ts +0 -2
  90. package/dist/loading-indicator.js +0 -35
  91. package/dist/loop/index.d.ts +0 -9
  92. package/dist/loop/index.js +0 -29
  93. package/dist/multiple-versions-warning.d.ts +0 -1
  94. package/dist/multiple-versions-warning.js +0 -32
  95. package/dist/nonce.d.ts +0 -7
  96. package/dist/nonce.js +0 -17
  97. package/dist/play-and-handle-not-allowed-error.d.ts +0 -2
  98. package/dist/play-and-handle-not-allowed-error.js +0 -44
  99. package/dist/portal-node.d.ts +0 -1
  100. package/dist/portal-node.js +0 -23
  101. package/dist/prefetch-state.d.ts +0 -8
  102. package/dist/prefetch-state.js +0 -27
  103. package/dist/prefetch.d.ts +0 -9
  104. package/dist/prefetch.js +0 -108
  105. package/dist/random.d.ts +0 -7
  106. package/dist/random.js +0 -41
  107. package/dist/register-root.d.ts +0 -4
  108. package/dist/register-root.js +0 -33
  109. package/dist/series/flatten-children.d.ts +0 -2
  110. package/dist/series/flatten-children.js +0 -19
  111. package/dist/series/index.d.ts +0 -13
  112. package/dist/series/index.js +0 -60
  113. package/dist/setup-env-variables.d.ts +0 -2
  114. package/dist/setup-env-variables.js +0 -36
  115. package/dist/spring/index.d.ts +0 -27
  116. package/dist/spring/index.js +0 -51
  117. package/dist/spring/measure-spring.d.ts +0 -8
  118. package/dist/spring/measure-spring.js +0 -64
  119. package/dist/spring/spring-utils.d.ts +0 -21
  120. package/dist/spring/spring-utils.js +0 -103
  121. package/dist/static-file.d.ts +0 -5
  122. package/dist/static-file.js +0 -33
  123. package/dist/timeline-position-state.d.ts +0 -29
  124. package/dist/timeline-position-state.js +0 -41
  125. package/dist/truthy.d.ts +0 -3
  126. package/dist/truthy.js +0 -7
  127. package/dist/use-current-frame.d.ts +0 -6
  128. package/dist/use-current-frame.js +0 -28
  129. package/dist/use-lazy-component.d.ts +0 -7
  130. package/dist/use-lazy-component.js +0 -49
  131. package/dist/use-media-in-timeline.d.ts +0 -10
  132. package/dist/use-media-in-timeline.js +0 -129
  133. package/dist/use-media-playback.d.ts +0 -10
  134. package/dist/use-media-playback.js +0 -77
  135. package/dist/use-media-tag-volume.d.ts +0 -2
  136. package/dist/use-media-tag-volume.js +0 -31
  137. package/dist/use-sync-volume-with-media-tag.d.ts +0 -10
  138. package/dist/use-sync-volume-with-media-tag.js +0 -21
  139. package/dist/use-unsafe-video-config.d.ts +0 -2
  140. package/dist/use-unsafe-video-config.js +0 -27
  141. package/dist/use-video-config.d.ts +0 -7
  142. package/dist/use-video-config.js +0 -29
  143. package/dist/use-video.d.ts +0 -12
  144. package/dist/use-video.js +0 -28
  145. package/dist/validate-media-props.d.ts +0 -4
  146. package/dist/validate-media-props.js +0 -24
  147. package/dist/validate-start-from-props.d.ts +0 -1
  148. package/dist/validate-start-from-props.js +0 -31
  149. package/dist/validation/validate-composition-id.d.ts +0 -3
  150. package/dist/validation/validate-composition-id.js +0 -13
  151. package/dist/validation/validate-dimensions.d.ts +0 -1
  152. package/dist/validation/validate-dimensions.js +0 -21
  153. package/dist/validation/validate-duration-in-frames.d.ts +0 -1
  154. package/dist/validation/validate-duration-in-frames.js +0 -15
  155. package/dist/validation/validate-folder-name.d.ts +0 -3
  156. package/dist/validation/validate-folder-name.js +0 -19
  157. package/dist/validation/validate-fps.d.ts +0 -1
  158. package/dist/validation/validate-fps.js +0 -21
  159. package/dist/validation/validate-offthreadvideo-image-format.d.ts +0 -1
  160. package/dist/validation/validate-offthreadvideo-image-format.js +0 -15
  161. package/dist/validation/validation-spring-duration.d.ts +0 -1
  162. package/dist/validation/validation-spring-duration.js +0 -21
  163. package/dist/version.d.ts +0 -1
  164. package/dist/version.js +0 -5
  165. package/dist/video/OffthreadVideo.d.ts +0 -3
  166. package/dist/video/OffthreadVideo.js +0 -33
  167. package/dist/video/OffthreadVideoForRendering.d.ts +0 -3
  168. package/dist/video/OffthreadVideoForRendering.js +0 -104
  169. package/dist/video/Video.d.ts +0 -8
  170. package/dist/video/Video.js +0 -50
  171. package/dist/video/VideoForDevelopment.d.ts +0 -11
  172. package/dist/video/VideoForDevelopment.js +0 -113
  173. package/dist/video/VideoForRendering.d.ts +0 -10
  174. package/dist/video/VideoForRendering.js +0 -203
  175. package/dist/video/duration-state.d.ts +0 -17
  176. package/dist/video/duration-state.js +0 -34
  177. package/dist/video/get-current-time.d.ts +0 -13
  178. package/dist/video/get-current-time.js +0 -31
  179. package/dist/video/index.d.ts +0 -3
  180. package/dist/video/index.js +0 -7
  181. package/dist/video/props.d.ts +0 -25
  182. package/dist/video/props.js +0 -2
  183. package/dist/video/video-fragment.d.ts +0 -12
  184. package/dist/video/video-fragment.js +0 -60
  185. package/dist/video-config.d.ts +0 -8
  186. package/dist/video-config.js +0 -2
  187. package/dist/volume-position-state.d.ts +0 -19
  188. package/dist/volume-position-state.js +0 -32
  189. package/dist/volume-prop.d.ts +0 -7
  190. package/dist/volume-prop.js +0 -24
  191. package/dist/warn-about-non-seekable-media.d.ts +0 -1
  192. package/dist/warn-about-non-seekable-media.js +0 -34
  193. package/dist/wrap-remotion-context.d.ts +0 -18
  194. package/dist/wrap-remotion-context.js +0 -73
@@ -1,11 +0,0 @@
1
- import type { ForwardRefExoticComponent, RefAttributes } from 'react';
2
- import React from 'react';
3
- export declare const VideoForDevelopment: ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.VideoHTMLAttributes<HTMLVideoElement>, HTMLVideoElement>, "nonce" | "autoPlay" | "controls" | "onEnded"> & {
4
- volume?: import("../volume-prop").VolumeProp | undefined;
5
- playbackRate?: number | undefined;
6
- acceptableTimeShiftInSeconds?: number | undefined;
7
- allowAmplificationDuringRender?: boolean | undefined;
8
- } & {
9
- onlyWarnForMediaSeekingError: boolean;
10
- onDuration: (src: string, durationInSeconds: number) => void;
11
- } & RefAttributes<HTMLVideoElement>>;
@@ -1,113 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.VideoForDevelopment = void 0;
4
- const jsx_runtime_1 = require("react/jsx-runtime");
5
- const react_1 = require("react");
6
- const use_audio_frame_1 = require("../audio/use-audio-frame");
7
- const prefetch_1 = require("../prefetch");
8
- const Sequence_1 = require("../Sequence");
9
- const use_media_in_timeline_1 = require("../use-media-in-timeline");
10
- const use_media_playback_1 = require("../use-media-playback");
11
- const use_media_tag_volume_1 = require("../use-media-tag-volume");
12
- const use_sync_volume_with_media_tag_1 = require("../use-sync-volume-with-media-tag");
13
- const use_video_config_1 = require("../use-video-config");
14
- const volume_position_state_1 = require("../volume-position-state");
15
- const video_fragment_1 = require("./video-fragment");
16
- const VideoForDevelopmentRefForwardingFunction = (props, ref) => {
17
- var _a, _b;
18
- const videoRef = (0, react_1.useRef)(null);
19
- const volumePropFrame = (0, use_audio_frame_1.useFrameForVolumeProp)();
20
- const { fps, durationInFrames } = (0, use_video_config_1.useVideoConfig)();
21
- const parentSequence = (0, react_1.useContext)(Sequence_1.SequenceContext);
22
- const { volume, muted, playbackRate, onlyWarnForMediaSeekingError, src, onDuration,
23
- // @ts-expect-error
24
- acceptableTimeShift, acceptableTimeShiftInSeconds, ...nativeProps } = props;
25
- if (typeof acceptableTimeShift !== 'undefined') {
26
- throw new Error('acceptableTimeShift has been removed. Use acceptableTimeShiftInSeconds instead.');
27
- }
28
- const actualVolume = (0, use_media_tag_volume_1.useMediaTagVolume)(videoRef);
29
- const [mediaVolume] = (0, volume_position_state_1.useMediaVolumeState)();
30
- const [mediaMuted] = (0, volume_position_state_1.useMediaMutedState)();
31
- (0, use_media_in_timeline_1.useMediaInTimeline)({
32
- mediaRef: videoRef,
33
- volume,
34
- mediaVolume,
35
- mediaType: 'video',
36
- src,
37
- playbackRate: (_a = props.playbackRate) !== null && _a !== void 0 ? _a : 1,
38
- });
39
- (0, use_sync_volume_with_media_tag_1.useSyncVolumeWithMediaTag)({
40
- volumePropFrame,
41
- actualVolume,
42
- volume,
43
- mediaVolume,
44
- mediaRef: videoRef,
45
- });
46
- (0, use_media_playback_1.useMediaPlayback)({
47
- mediaRef: videoRef,
48
- src,
49
- mediaType: 'video',
50
- playbackRate: (_b = props.playbackRate) !== null && _b !== void 0 ? _b : 1,
51
- onlyWarnForMediaSeekingError,
52
- acceptableTimeshift: acceptableTimeShiftInSeconds !== null && acceptableTimeShiftInSeconds !== void 0 ? acceptableTimeShiftInSeconds : use_media_playback_1.DEFAULT_ACCEPTABLE_TIMESHIFT,
53
- });
54
- const actualFrom = parentSequence
55
- ? parentSequence.relativeFrom + parentSequence.cumulatedFrom
56
- : 0;
57
- const duration = parentSequence
58
- ? Math.min(parentSequence.durationInFrames, durationInFrames)
59
- : durationInFrames;
60
- const actualSrc = (0, video_fragment_1.useAppendVideoFragment)({
61
- actualSrc: (0, prefetch_1.usePreload)(src),
62
- actualFrom,
63
- duration,
64
- fps,
65
- });
66
- (0, react_1.useImperativeHandle)(ref, () => {
67
- return videoRef.current;
68
- }, []);
69
- (0, react_1.useEffect)(() => {
70
- const { current } = videoRef;
71
- if (!current) {
72
- return;
73
- }
74
- const errorHandler = () => {
75
- var _a;
76
- if (current === null || current === void 0 ? void 0 : current.error) {
77
- console.error('Error occurred in video', current === null || current === void 0 ? void 0 : current.error);
78
- throw new Error(`The browser threw an error while playing the video ${src}: Code ${current.error.code} - ${(_a = current === null || current === void 0 ? void 0 : current.error) === null || _a === void 0 ? void 0 : _a.message}. See https://remotion.dev/docs/media-playback-error for help`);
79
- }
80
- else {
81
- throw new Error('The browser threw an error');
82
- }
83
- };
84
- current.addEventListener('error', errorHandler, { once: true });
85
- return () => {
86
- current.removeEventListener('error', errorHandler);
87
- };
88
- }, [src]);
89
- const currentOnDurationCallback = (0, react_1.useRef)();
90
- currentOnDurationCallback.current = onDuration;
91
- (0, react_1.useEffect)(() => {
92
- var _a;
93
- const { current } = videoRef;
94
- if (!current) {
95
- return;
96
- }
97
- if (current.duration) {
98
- (_a = currentOnDurationCallback.current) === null || _a === void 0 ? void 0 : _a.call(currentOnDurationCallback, src, current.duration);
99
- return;
100
- }
101
- const onLoadedMetadata = () => {
102
- var _a;
103
- (_a = currentOnDurationCallback.current) === null || _a === void 0 ? void 0 : _a.call(currentOnDurationCallback, src, current.duration);
104
- };
105
- current.addEventListener('loadedmetadata', onLoadedMetadata);
106
- return () => {
107
- current.removeEventListener('loadedmetadata', onLoadedMetadata);
108
- };
109
- }, [src]);
110
- return ((0, jsx_runtime_1.jsx)("video", { ref: videoRef, muted: muted || mediaMuted, playsInline: true, src: actualSrc, ...nativeProps }));
111
- };
112
- // Copy types from forwardRef but not necessary to remove ref
113
- exports.VideoForDevelopment = (0, react_1.forwardRef)(VideoForDevelopmentRefForwardingFunction);
@@ -1,10 +0,0 @@
1
- import type { ForwardRefExoticComponent, RefAttributes } from 'react';
2
- import React from 'react';
3
- export declare const VideoForRendering: ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.VideoHTMLAttributes<HTMLVideoElement>, HTMLVideoElement>, "nonce" | "autoPlay" | "controls" | "onEnded"> & {
4
- volume?: import("../volume-prop").VolumeProp | undefined;
5
- playbackRate?: number | undefined;
6
- acceptableTimeShiftInSeconds?: number | undefined;
7
- allowAmplificationDuringRender?: boolean | undefined;
8
- } & {
9
- onDuration: (src: string, durationInSeconds: number) => void;
10
- } & RefAttributes<HTMLVideoElement>>;
@@ -1,203 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.VideoForRendering = void 0;
4
- const jsx_runtime_1 = require("react/jsx-runtime");
5
- const react_1 = require("react");
6
- const absolute_src_1 = require("../absolute-src");
7
- const use_audio_frame_1 = require("../audio/use-audio-frame");
8
- const CompositionManager_1 = require("../CompositionManager");
9
- const delay_render_1 = require("../delay-render");
10
- const get_environment_1 = require("../get-environment");
11
- const is_approximately_the_same_1 = require("../is-approximately-the-same");
12
- const random_1 = require("../random");
13
- const Sequence_1 = require("../Sequence");
14
- const timeline_position_state_1 = require("../timeline-position-state");
15
- const use_current_frame_1 = require("../use-current-frame");
16
- const use_unsafe_video_config_1 = require("../use-unsafe-video-config");
17
- const volume_prop_1 = require("../volume-prop");
18
- const warn_about_non_seekable_media_1 = require("../warn-about-non-seekable-media");
19
- const get_current_time_1 = require("./get-current-time");
20
- const VideoForRenderingForwardFunction = ({ onError, volume: volumeProp, allowAmplificationDuringRender, playbackRate, onDuration, ...props }, ref) => {
21
- const absoluteFrame = (0, timeline_position_state_1.useTimelinePosition)();
22
- const frame = (0, use_current_frame_1.useCurrentFrame)();
23
- const volumePropsFrame = (0, use_audio_frame_1.useFrameForVolumeProp)();
24
- const videoConfig = (0, use_unsafe_video_config_1.useUnsafeVideoConfig)();
25
- const videoRef = (0, react_1.useRef)(null);
26
- const sequenceContext = (0, react_1.useContext)(Sequence_1.SequenceContext);
27
- const mediaStartsAt = (0, use_audio_frame_1.useMediaStartsAt)();
28
- const environment = (0, get_environment_1.useRemotionEnvironment)();
29
- const { registerAsset, unregisterAsset } = (0, react_1.useContext)(CompositionManager_1.CompositionManager);
30
- // Generate a string that's as unique as possible for this asset
31
- // but at the same time the same on all threads
32
- const id = (0, react_1.useMemo)(() => {
33
- var _a;
34
- return `video-${(0, random_1.random)((_a = props.src) !== null && _a !== void 0 ? _a : '')}-${sequenceContext === null || sequenceContext === void 0 ? void 0 : sequenceContext.cumulatedFrom}-${sequenceContext === null || sequenceContext === void 0 ? void 0 : sequenceContext.relativeFrom}-${sequenceContext === null || sequenceContext === void 0 ? void 0 : sequenceContext.durationInFrames}`;
35
- }, [
36
- props.src,
37
- sequenceContext === null || sequenceContext === void 0 ? void 0 : sequenceContext.cumulatedFrom,
38
- sequenceContext === null || sequenceContext === void 0 ? void 0 : sequenceContext.relativeFrom,
39
- sequenceContext === null || sequenceContext === void 0 ? void 0 : sequenceContext.durationInFrames,
40
- ]);
41
- if (!videoConfig) {
42
- throw new Error('No video config found');
43
- }
44
- const volume = (0, volume_prop_1.evaluateVolume)({
45
- volume: volumeProp,
46
- frame: volumePropsFrame,
47
- mediaVolume: 1,
48
- allowAmplificationDuringRender: allowAmplificationDuringRender !== null && allowAmplificationDuringRender !== void 0 ? allowAmplificationDuringRender : false,
49
- });
50
- (0, react_1.useEffect)(() => {
51
- if (!props.src) {
52
- throw new Error('No src passed');
53
- }
54
- if (props.muted) {
55
- return;
56
- }
57
- if (volume <= 0) {
58
- return;
59
- }
60
- if (!window.remotion_audioEnabled) {
61
- return;
62
- }
63
- registerAsset({
64
- type: 'video',
65
- src: (0, absolute_src_1.getAbsoluteSrc)(props.src),
66
- id,
67
- frame: absoluteFrame,
68
- volume,
69
- mediaFrame: frame,
70
- playbackRate: playbackRate !== null && playbackRate !== void 0 ? playbackRate : 1,
71
- allowAmplificationDuringRender: allowAmplificationDuringRender !== null && allowAmplificationDuringRender !== void 0 ? allowAmplificationDuringRender : false,
72
- });
73
- return () => unregisterAsset(id);
74
- }, [
75
- props.muted,
76
- props.src,
77
- registerAsset,
78
- id,
79
- unregisterAsset,
80
- volume,
81
- frame,
82
- absoluteFrame,
83
- playbackRate,
84
- allowAmplificationDuringRender,
85
- ]);
86
- (0, react_1.useImperativeHandle)(ref, () => {
87
- return videoRef.current;
88
- }, []);
89
- (0, react_1.useEffect)(() => {
90
- if (!window.remotion_videoEnabled) {
91
- return;
92
- }
93
- const { current } = videoRef;
94
- if (!current) {
95
- return;
96
- }
97
- const currentTime = (() => {
98
- return (0, get_current_time_1.getMediaTime)({
99
- fps: videoConfig.fps,
100
- frame,
101
- src: props.src,
102
- playbackRate: playbackRate || 1,
103
- startFrom: -mediaStartsAt,
104
- mediaType: 'video',
105
- });
106
- })();
107
- const handle = (0, delay_render_1.delayRender)(`Rendering <Video /> with src="${props.src}"`);
108
- if (process.env.NODE_ENV === 'test') {
109
- (0, delay_render_1.continueRender)(handle);
110
- return;
111
- }
112
- if ((0, is_approximately_the_same_1.isApproximatelyTheSame)(current.currentTime, currentTime)) {
113
- if (current.readyState >= 2) {
114
- (0, delay_render_1.continueRender)(handle);
115
- return;
116
- }
117
- const loadedDataHandler = () => {
118
- (0, delay_render_1.continueRender)(handle);
119
- };
120
- current.addEventListener('loadeddata', loadedDataHandler, { once: true });
121
- return () => {
122
- current.removeEventListener('loadeddata', loadedDataHandler);
123
- };
124
- }
125
- current.currentTime = currentTime;
126
- const seekedHandler = () => {
127
- (0, warn_about_non_seekable_media_1.warnAboutNonSeekableMedia)(current, 'exception');
128
- if (window.navigator.platform.startsWith('Mac')) {
129
- // Improve me: This is ensures frame perfectness but slows down render.
130
- // Please see this issue for context: https://github.com/remotion-dev/remotion/issues/200
131
- // Only affects macOS since it uses VideoToolbox decoding.
132
- setTimeout(() => {
133
- (0, delay_render_1.continueRender)(handle);
134
- }, 100);
135
- }
136
- else {
137
- (0, delay_render_1.continueRender)(handle);
138
- }
139
- };
140
- current.addEventListener('seeked', seekedHandler, { once: true });
141
- const endedHandler = () => {
142
- (0, delay_render_1.continueRender)(handle);
143
- };
144
- current.addEventListener('ended', endedHandler, { once: true });
145
- const errorHandler = () => {
146
- var _a;
147
- if (current === null || current === void 0 ? void 0 : current.error) {
148
- console.error('Error occurred in video', current === null || current === void 0 ? void 0 : current.error);
149
- throw new Error(`The browser threw an error while playing the video ${props.src}: Code ${current.error.code} - ${(_a = current === null || current === void 0 ? void 0 : current.error) === null || _a === void 0 ? void 0 : _a.message}. See https://remotion.dev/docs/media-playback-error for help`);
150
- }
151
- else {
152
- throw new Error('The browser threw an error');
153
- }
154
- };
155
- current.addEventListener('error', errorHandler, { once: true });
156
- // If video skips to another frame or unmounts, we clear the created handle
157
- return () => {
158
- current.removeEventListener('ended', endedHandler);
159
- current.removeEventListener('error', errorHandler);
160
- current.removeEventListener('seeked', seekedHandler);
161
- (0, delay_render_1.continueRender)(handle);
162
- };
163
- }, [
164
- volumePropsFrame,
165
- props.src,
166
- playbackRate,
167
- videoConfig.fps,
168
- frame,
169
- mediaStartsAt,
170
- ]);
171
- const { src } = props;
172
- // If video source switches, make new handle
173
- if (environment === 'rendering') {
174
- // eslint-disable-next-line react-hooks/rules-of-hooks
175
- (0, react_1.useLayoutEffect)(() => {
176
- if (process.env.NODE_ENV === 'test') {
177
- return;
178
- }
179
- const newHandle = (0, delay_render_1.delayRender)('Loading <Video> duration with src=' + src);
180
- const { current } = videoRef;
181
- const didLoad = () => {
182
- if (current === null || current === void 0 ? void 0 : current.duration) {
183
- onDuration(src, current.duration);
184
- }
185
- (0, delay_render_1.continueRender)(newHandle);
186
- };
187
- if (current === null || current === void 0 ? void 0 : current.duration) {
188
- onDuration(src, current.duration);
189
- (0, delay_render_1.continueRender)(newHandle);
190
- }
191
- else {
192
- current === null || current === void 0 ? void 0 : current.addEventListener('loadedmetadata', didLoad, { once: true });
193
- }
194
- // If tag gets unmounted, clear pending handles because video metadata is not going to load
195
- return () => {
196
- current === null || current === void 0 ? void 0 : current.removeEventListener('loadedmetadata', didLoad);
197
- (0, delay_render_1.continueRender)(newHandle);
198
- };
199
- }, [src, onDuration]);
200
- }
201
- return (0, jsx_runtime_1.jsx)("video", { ref: videoRef, ...props, onError: onError });
202
- };
203
- exports.VideoForRendering = (0, react_1.forwardRef)(VideoForRenderingForwardFunction);
@@ -1,17 +0,0 @@
1
- import React from 'react';
2
- declare type DurationState = Record<string, number>;
3
- declare type DurationAction = {
4
- type: 'got-duration';
5
- src: string;
6
- durationInSeconds: number;
7
- };
8
- export declare const durationReducer: (state: DurationState, action: DurationAction) => DurationState;
9
- declare type TDurationsContext = {
10
- durations: DurationState;
11
- setDurations: React.Dispatch<DurationAction>;
12
- };
13
- export declare const DurationsContext: React.Context<TDurationsContext>;
14
- export declare const DurationsContextProvider: React.FC<{
15
- children: React.ReactNode;
16
- }>;
17
- export {};
@@ -1,34 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.DurationsContextProvider = exports.DurationsContext = exports.durationReducer = void 0;
4
- const jsx_runtime_1 = require("react/jsx-runtime");
5
- const react_1 = require("react");
6
- const durationReducer = (state, action) => {
7
- switch (action.type) {
8
- case 'got-duration':
9
- return {
10
- ...state,
11
- [action.src]: action.durationInSeconds,
12
- };
13
- default:
14
- return state;
15
- }
16
- };
17
- exports.durationReducer = durationReducer;
18
- exports.DurationsContext = (0, react_1.createContext)({
19
- durations: {},
20
- setDurations: () => {
21
- throw new Error('context missing');
22
- },
23
- });
24
- const DurationsContextProvider = ({ children }) => {
25
- const [durations, setDurations] = (0, react_1.useReducer)(exports.durationReducer, {});
26
- const value = (0, react_1.useMemo)(() => {
27
- return {
28
- durations,
29
- setDurations,
30
- };
31
- }, [durations]);
32
- return ((0, jsx_runtime_1.jsx)(exports.DurationsContext.Provider, { value: value, children: children }));
33
- };
34
- exports.DurationsContextProvider = DurationsContextProvider;
@@ -1,13 +0,0 @@
1
- export declare const getExpectedMediaFrameUncorrected: ({ frame, playbackRate, startFrom, }: {
2
- frame: number;
3
- playbackRate: number;
4
- startFrom: number;
5
- }) => number;
6
- export declare const getMediaTime: ({ fps, frame, src, playbackRate, startFrom, mediaType, }: {
7
- fps: number;
8
- frame: number;
9
- src: string;
10
- playbackRate: number;
11
- startFrom: number;
12
- mediaType: 'video' | 'audio';
13
- }) => number;
@@ -1,31 +0,0 @@
1
- "use strict";
2
- // Calculate the `.currentTime` of a video or audio element
3
- Object.defineProperty(exports, "__esModule", { value: true });
4
- exports.getMediaTime = exports.getExpectedMediaFrameUncorrected = void 0;
5
- const interpolate_1 = require("../interpolate");
6
- const getExpectedMediaFrameUncorrected = ({ frame, playbackRate, startFrom, }) => {
7
- return (0, interpolate_1.interpolate)(frame, [-1, startFrom, startFrom + 1], [-1, startFrom, startFrom + playbackRate]);
8
- };
9
- exports.getExpectedMediaFrameUncorrected = getExpectedMediaFrameUncorrected;
10
- const getMediaTime = ({ fps, frame, src, playbackRate, startFrom, mediaType, }) => {
11
- const expectedFrame = (0, exports.getExpectedMediaFrameUncorrected)({
12
- frame,
13
- playbackRate,
14
- startFrom,
15
- });
16
- if (src.endsWith('webm')) {
17
- // For WebM videos, we need to add a little bit of shift to get the right frame.
18
- const msPerFrame = 1000 / fps;
19
- const msShift = msPerFrame / 2;
20
- return (expectedFrame * msPerFrame + msShift) / 1000;
21
- }
22
- if (mediaType === 'video') {
23
- // In Chrome, for MP4s, if 30fps, the first frame is still displayed at 0.033333
24
- // even though after that it increases by 0.033333333 each.
25
- // So frame = 0 in Remotion is like frame = 1 for the browser
26
- return (expectedFrame + 1) / fps;
27
- }
28
- // For audio, we don't do any shift correction
29
- return expectedFrame / fps;
30
- };
31
- exports.getMediaTime = getMediaTime;
@@ -1,3 +0,0 @@
1
- export { OffthreadVideo } from './OffthreadVideo';
2
- export { OffthreadVideoImageFormat, OffthreadVideoProps as RemotionOffthreadVideoProps, RemotionMainVideoProps, RemotionVideoProps, } from './props';
3
- export { Video } from './Video';
@@ -1,7 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.Video = exports.OffthreadVideo = void 0;
4
- var OffthreadVideo_1 = require("./OffthreadVideo");
5
- Object.defineProperty(exports, "OffthreadVideo", { enumerable: true, get: function () { return OffthreadVideo_1.OffthreadVideo; } });
6
- var Video_1 = require("./Video");
7
- Object.defineProperty(exports, "Video", { enumerable: true, get: function () { return Video_1.Video; } });
@@ -1,25 +0,0 @@
1
- import type React from 'react';
2
- import type { VolumeProp } from '../volume-prop';
3
- export declare type RemotionMainVideoProps = {
4
- startFrom?: number;
5
- endAt?: number;
6
- };
7
- export declare type RemotionVideoProps = Omit<React.DetailedHTMLProps<React.VideoHTMLAttributes<HTMLVideoElement>, HTMLVideoElement>, 'autoPlay' | 'controls' | 'onEnded' | 'nonce'> & {
8
- volume?: VolumeProp;
9
- playbackRate?: number;
10
- acceptableTimeShiftInSeconds?: number;
11
- allowAmplificationDuringRender?: boolean;
12
- };
13
- export declare type OffthreadVideoImageFormat = 'png' | 'jpeg';
14
- export declare type OffthreadVideoProps = {
15
- src: string;
16
- className?: string;
17
- style?: React.CSSProperties;
18
- volume?: VolumeProp;
19
- playbackRate?: number;
20
- muted?: boolean;
21
- onError?: React.ReactEventHandler<HTMLVideoElement | HTMLImageElement>;
22
- imageFormat?: OffthreadVideoImageFormat;
23
- acceptableTimeShiftInSeconds?: number;
24
- allowAmplificationDuringRender?: boolean;
25
- };
@@ -1,2 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
@@ -1,12 +0,0 @@
1
- export declare const useAppendVideoFragment: ({ actualSrc: initialActualSrc, actualFrom: initialActualFrom, duration: initialDuration, fps, }: {
2
- actualSrc: string;
3
- actualFrom: number;
4
- duration: number;
5
- fps: number;
6
- }) => string;
7
- export declare const appendVideoFragment: ({ actualSrc, actualFrom, duration, fps, }: {
8
- actualSrc: string;
9
- actualFrom: number;
10
- duration: number;
11
- fps: number;
12
- }) => string;
@@ -1,60 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.appendVideoFragment = exports.useAppendVideoFragment = void 0;
4
- const react_1 = require("react");
5
- const toSeconds = (time, fps) => {
6
- return Math.round((time / fps) * 100) / 100;
7
- };
8
- const isSubsetOfDuration = (prevStartFrom, newStartFrom, prevDuration, newDuration) => {
9
- return (prevStartFrom <= newStartFrom &&
10
- prevStartFrom + prevDuration >= newStartFrom + newDuration);
11
- };
12
- const useAppendVideoFragment = ({ actualSrc: initialActualSrc, actualFrom: initialActualFrom, duration: initialDuration, fps, }) => {
13
- const actualFromRef = (0, react_1.useRef)(initialActualFrom);
14
- const actualDuration = (0, react_1.useRef)(initialDuration);
15
- const actualSrc = (0, react_1.useRef)(initialActualSrc);
16
- if (!isSubsetOfDuration || initialActualSrc !== actualSrc.current) {
17
- actualFromRef.current = initialActualFrom;
18
- actualDuration.current = initialDuration;
19
- actualSrc.current = initialActualSrc;
20
- }
21
- const appended = (0, exports.appendVideoFragment)({
22
- actualSrc: actualSrc.current,
23
- actualFrom: actualFromRef.current,
24
- duration: actualDuration.current,
25
- fps,
26
- });
27
- return appended;
28
- };
29
- exports.useAppendVideoFragment = useAppendVideoFragment;
30
- // https://github.com/remotion-dev/remotion/issues/1655
31
- const isIOSSafariCase = (actualSrc) => {
32
- return typeof window === 'undefined'
33
- ? false
34
- : /iP(ad|od|hone)/i.test(window.navigator.userAgent) &&
35
- Boolean(navigator.userAgent.match(/Version\/[\d.]+.*Safari/)) &&
36
- actualSrc.startsWith('blob:');
37
- };
38
- const appendVideoFragment = ({ actualSrc, actualFrom, duration, fps, }) => {
39
- var _a;
40
- if (isIOSSafariCase(actualSrc)) {
41
- return actualSrc;
42
- }
43
- if (actualSrc.startsWith('data:')) {
44
- return actualSrc;
45
- }
46
- const existingHash = Boolean(new URL(actualSrc, (_a = (typeof window === 'undefined' ? null : window.location.href)) !== null && _a !== void 0 ? _a : 'http://localhost:3000').hash);
47
- if (existingHash) {
48
- return actualSrc;
49
- }
50
- if (!Number.isFinite(actualFrom)) {
51
- return actualSrc;
52
- }
53
- actualSrc += `#t=${toSeconds(-actualFrom, fps)}`;
54
- if (!Number.isFinite(duration)) {
55
- return actualSrc;
56
- }
57
- actualSrc += `,${toSeconds(duration, fps)}`;
58
- return actualSrc;
59
- };
60
- exports.appendVideoFragment = appendVideoFragment;
@@ -1,8 +0,0 @@
1
- export declare type VideoConfig = {
2
- width: number;
3
- height: number;
4
- fps: number;
5
- durationInFrames: number;
6
- id: string;
7
- defaultProps: unknown;
8
- };
@@ -1,2 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
@@ -1,19 +0,0 @@
1
- /// <reference types="react" />
2
- export declare type MediaVolumeContextValue = {
3
- mediaMuted: boolean;
4
- mediaVolume: number;
5
- };
6
- export declare type SetMediaVolumeContextValue = {
7
- setMediaMuted: (u: React.SetStateAction<boolean>) => void;
8
- setMediaVolume: (u: number) => void;
9
- };
10
- export declare const MediaVolumeContext: import("react").Context<MediaVolumeContextValue>;
11
- export declare const SetMediaVolumeContext: import("react").Context<SetMediaVolumeContextValue>;
12
- declare type MediaVolumeReturnType = readonly [number, (u: number) => void];
13
- export declare const useMediaVolumeState: () => MediaVolumeReturnType;
14
- declare type MediaMutedReturnType = readonly [
15
- boolean,
16
- (u: React.SetStateAction<boolean>) => void
17
- ];
18
- export declare const useMediaMutedState: () => MediaMutedReturnType;
19
- export {};
@@ -1,32 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.useMediaMutedState = exports.useMediaVolumeState = exports.SetMediaVolumeContext = exports.MediaVolumeContext = void 0;
4
- const react_1 = require("react");
5
- exports.MediaVolumeContext = (0, react_1.createContext)({
6
- mediaMuted: false,
7
- mediaVolume: 1,
8
- });
9
- exports.SetMediaVolumeContext = (0, react_1.createContext)({
10
- setMediaMuted: () => {
11
- throw new Error('default');
12
- },
13
- setMediaVolume: () => {
14
- throw new Error('default');
15
- },
16
- });
17
- const useMediaVolumeState = () => {
18
- const { mediaVolume } = (0, react_1.useContext)(exports.MediaVolumeContext);
19
- const { setMediaVolume } = (0, react_1.useContext)(exports.SetMediaVolumeContext);
20
- return (0, react_1.useMemo)(() => {
21
- return [mediaVolume, setMediaVolume];
22
- }, [mediaVolume, setMediaVolume]);
23
- };
24
- exports.useMediaVolumeState = useMediaVolumeState;
25
- const useMediaMutedState = () => {
26
- const { mediaMuted } = (0, react_1.useContext)(exports.MediaVolumeContext);
27
- const { setMediaMuted } = (0, react_1.useContext)(exports.SetMediaVolumeContext);
28
- return (0, react_1.useMemo)(() => {
29
- return [mediaMuted, setMediaMuted];
30
- }, [mediaMuted, setMediaMuted]);
31
- };
32
- exports.useMediaMutedState = useMediaMutedState;
@@ -1,7 +0,0 @@
1
- export declare type VolumeProp = number | ((frame: number) => number);
2
- export declare const evaluateVolume: ({ frame, volume, mediaVolume, allowAmplificationDuringRender, }: {
3
- frame: number;
4
- volume: VolumeProp | undefined;
5
- mediaVolume: number;
6
- allowAmplificationDuringRender: boolean;
7
- }) => number;
@@ -1,24 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.evaluateVolume = void 0;
4
- const evaluateVolume = ({ frame, volume, mediaVolume = 1, allowAmplificationDuringRender, }) => {
5
- const maxVolume = allowAmplificationDuringRender ? Infinity : 1;
6
- if (typeof volume === 'number') {
7
- return Math.min(maxVolume, volume * mediaVolume);
8
- }
9
- if (typeof volume === 'undefined') {
10
- return Number(mediaVolume);
11
- }
12
- const evaluated = volume(frame) * mediaVolume;
13
- if (typeof evaluated !== 'number') {
14
- throw new TypeError(`You passed in a a function to the volume prop but it did not return a number but a value of type ${typeof evaluated} for frame ${frame}`);
15
- }
16
- if (Number.isNaN(evaluated)) {
17
- throw new TypeError(`You passed in a function to the volume prop but it returned NaN for frame ${frame}.`);
18
- }
19
- if (!Number.isFinite(evaluated)) {
20
- throw new TypeError(`You passed in a function to the volume prop but it returned a non-finite number for frame ${frame}.`);
21
- }
22
- return Math.max(0, Math.min(maxVolume, evaluated));
23
- };
24
- exports.evaluateVolume = evaluateVolume;
@@ -1 +0,0 @@
1
- export declare const warnAboutNonSeekableMedia: (ref: HTMLMediaElement | null, type: 'console-warning' | 'console-error' | 'exception') => void;