remotion 4.0.12 → 4.0.15

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.
@@ -54,7 +54,7 @@ export type TSequence = {
54
54
  nonce: number;
55
55
  loopDisplay: LoopDisplay | undefined;
56
56
  } & EnhancedTSequenceData;
57
- export type TAsset = {
57
+ export type TRenderAsset = {
58
58
  type: 'audio' | 'video';
59
59
  src: string;
60
60
  id: string;
@@ -26,9 +26,9 @@ Object.defineProperty(exports, "__esModule", { value: true });
26
26
  exports.CompositionManagerProvider = exports.compositionsRef = void 0;
27
27
  const jsx_runtime_1 = require("react/jsx-runtime");
28
28
  const react_1 = __importStar(require("react"));
29
- const AssetManager_js_1 = require("./AssetManager.js");
30
29
  const shared_audio_tags_js_1 = require("./audio/shared-audio-tags.js");
31
30
  const CompositionManagerContext_js_1 = require("./CompositionManagerContext.js");
31
+ const RenderAssetManager_js_1 = require("./RenderAssetManager.js");
32
32
  const ResolveCompositionConfig_js_1 = require("./ResolveCompositionConfig.js");
33
33
  const SequenceManager_js_1 = require("./SequenceManager.js");
34
34
  exports.compositionsRef = react_1.default.createRef();
@@ -112,6 +112,6 @@ const CompositionManagerProvider = ({ children, numberOfAudioTags }) => {
112
112
  unregisterFolder,
113
113
  currentCompositionMetadata,
114
114
  ]);
115
- return ((0, jsx_runtime_1.jsx)(CompositionManagerContext_js_1.CompositionManager.Provider, { value: contextValue, children: (0, jsx_runtime_1.jsx)(SequenceManager_js_1.SequenceManagerProvider, { children: (0, jsx_runtime_1.jsx)(AssetManager_js_1.AssetManagerProvider, { children: (0, jsx_runtime_1.jsx)(ResolveCompositionConfig_js_1.ResolveCompositionConfig, { children: (0, jsx_runtime_1.jsx)(shared_audio_tags_js_1.SharedAudioContextProvider, { numberOfAudioTags: numberOfAudioTags, component: (_a = composition === null || composition === void 0 ? void 0 : composition.component) !== null && _a !== void 0 ? _a : null, children: children }) }) }) }) }));
115
+ return ((0, jsx_runtime_1.jsx)(CompositionManagerContext_js_1.CompositionManager.Provider, { value: contextValue, children: (0, jsx_runtime_1.jsx)(SequenceManager_js_1.SequenceManagerProvider, { children: (0, jsx_runtime_1.jsx)(RenderAssetManager_js_1.RenderAssetManagerProvider, { children: (0, jsx_runtime_1.jsx)(ResolveCompositionConfig_js_1.ResolveCompositionConfig, { children: (0, jsx_runtime_1.jsx)(shared_audio_tags_js_1.SharedAudioContextProvider, { numberOfAudioTags: numberOfAudioTags, component: (_a = composition === null || composition === void 0 ? void 0 : composition.component) !== null && _a !== void 0 ? _a : null, children: children }) }) }) }) }));
116
116
  };
117
117
  exports.CompositionManagerProvider = CompositionManagerProvider;
@@ -0,0 +1,11 @@
1
+ /// <reference types="react" />
2
+ import type { TRenderAsset } from './CompositionManager.js';
3
+ export type RenderAssetManagerContext = {
4
+ registerRenderAsset: (renderAsset: TRenderAsset) => void;
5
+ unregisterRenderAsset: (id: string) => void;
6
+ renderAssets: TRenderAsset[];
7
+ };
8
+ export declare const RenderAssetManager: import("react").Context<RenderAssetManagerContext>;
9
+ export declare const RenderAssetManagerProvider: React.FC<{
10
+ children: React.ReactNode;
11
+ }>;
@@ -0,0 +1,40 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
3
+ exports.RenderAssetManagerProvider = exports.RenderAssetManager = void 0;
4
+ const jsx_runtime_1 = require("react/jsx-runtime");
5
+ const react_1 = require("react");
6
+ exports.RenderAssetManager = (0, react_1.createContext)({
7
+ registerRenderAsset: () => undefined,
8
+ unregisterRenderAsset: () => undefined,
9
+ renderAssets: [],
10
+ });
11
+ const RenderAssetManagerProvider = ({ children }) => {
12
+ const [renderAssets, setRenderAssets] = (0, react_1.useState)([]);
13
+ const registerRenderAsset = (0, react_1.useCallback)((renderAsset) => {
14
+ setRenderAssets((assets) => {
15
+ return [...assets, renderAsset];
16
+ });
17
+ }, []);
18
+ const unregisterRenderAsset = (0, react_1.useCallback)((id) => {
19
+ setRenderAssets((assts) => {
20
+ return assts.filter((a) => a.id !== id);
21
+ });
22
+ }, []);
23
+ (0, react_1.useLayoutEffect)(() => {
24
+ if (typeof window !== 'undefined') {
25
+ window.remotion_collectAssets = () => {
26
+ setRenderAssets([]); // clear assets at next render
27
+ return renderAssets;
28
+ };
29
+ }
30
+ }, [renderAssets]);
31
+ const contextValue = (0, react_1.useMemo)(() => {
32
+ return {
33
+ registerRenderAsset,
34
+ unregisterRenderAsset,
35
+ renderAssets,
36
+ };
37
+ }, [renderAssets, registerRenderAsset, unregisterRenderAsset]);
38
+ return ((0, jsx_runtime_1.jsx)(exports.RenderAssetManager.Provider, { value: contextValue, children: children }));
39
+ };
40
+ exports.RenderAssetManagerProvider = RenderAssetManagerProvider;
@@ -28,8 +28,16 @@ const AudioRefForwardingFunction = (props, ref) => {
28
28
  }
29
29
  const onError = (0, react_1.useCallback)((e) => {
30
30
  console.log(e.currentTarget.error);
31
- (0, cancel_render_js_1.cancelRender)(new Error(`Could not play audio with src ${otherProps.src}: ${e.currentTarget.error}. See https://remotion.dev/docs/media-playback-error for help.`));
32
- }, [otherProps.src]);
31
+ // If there is no `loop` property, we don't need to get the duration
32
+ // and thsi does not need to be a fatal error
33
+ const errMessage = `Could not play audio with src ${otherProps.src}: ${e.currentTarget.error}. See https://remotion.dev/docs/media-playback-error for help.`;
34
+ if (loop) {
35
+ (0, cancel_render_js_1.cancelRender)(new Error(errMessage));
36
+ }
37
+ else {
38
+ console.warn(errMessage);
39
+ }
40
+ }, [loop, otherProps.src]);
33
41
  const onDuration = (0, react_1.useCallback)((src, durationInSeconds) => {
34
42
  setDurations({ type: 'got-duration', durationInSeconds, src });
35
43
  }, [setDurations]);
@@ -4,10 +4,10 @@ exports.AudioForRendering = void 0;
4
4
  const jsx_runtime_1 = require("react/jsx-runtime");
5
5
  const react_1 = require("react");
6
6
  const absolute_src_js_1 = require("../absolute-src.js");
7
- const AssetManager_js_1 = require("../AssetManager.js");
8
7
  const delay_render_js_1 = require("../delay-render.js");
9
8
  const get_environment_js_1 = require("../get-environment.js");
10
9
  const random_js_1 = require("../random.js");
10
+ const RenderAssetManager_js_1 = require("../RenderAssetManager.js");
11
11
  const SequenceContext_js_1 = require("../SequenceContext.js");
12
12
  const timeline_position_state_js_1 = require("../timeline-position-state.js");
13
13
  const use_current_frame_js_1 = require("../use-current-frame.js");
@@ -19,7 +19,7 @@ const AudioForRenderingRefForwardingFunction = (props, ref) => {
19
19
  const volumePropFrame = (0, use_audio_frame_js_1.useFrameForVolumeProp)();
20
20
  const frame = (0, use_current_frame_js_1.useCurrentFrame)();
21
21
  const sequenceContext = (0, react_1.useContext)(SequenceContext_js_1.SequenceContext);
22
- const { registerAsset, unregisterAsset } = (0, react_1.useContext)(AssetManager_js_1.AssetManager);
22
+ const { registerRenderAsset, unregisterRenderAsset } = (0, react_1.useContext)(RenderAssetManager_js_1.RenderAssetManager);
23
23
  const environment = (0, get_environment_js_1.useRemotionEnvironment)();
24
24
  // Generate a string that's as unique as possible for this asset
25
25
  // but at the same time the same on all threads
@@ -51,7 +51,7 @@ const AudioForRenderingRefForwardingFunction = (props, ref) => {
51
51
  if (volume <= 0) {
52
52
  return;
53
53
  }
54
- registerAsset({
54
+ registerRenderAsset({
55
55
  type: 'audio',
56
56
  src: (0, absolute_src_js_1.getAbsoluteSrc)(props.src),
57
57
  id,
@@ -61,14 +61,14 @@ const AudioForRenderingRefForwardingFunction = (props, ref) => {
61
61
  playbackRate: (_a = props.playbackRate) !== null && _a !== void 0 ? _a : 1,
62
62
  allowAmplificationDuringRender: allowAmplificationDuringRender !== null && allowAmplificationDuringRender !== void 0 ? allowAmplificationDuringRender : false,
63
63
  });
64
- return () => unregisterAsset(id);
64
+ return () => unregisterRenderAsset(id);
65
65
  }, [
66
66
  props.muted,
67
67
  props.src,
68
- registerAsset,
68
+ registerRenderAsset,
69
69
  absoluteFrame,
70
70
  id,
71
- unregisterAsset,
71
+ unregisterRenderAsset,
72
72
  volume,
73
73
  volumePropFrame,
74
74
  frame,
@@ -1,6 +1,6 @@
1
1
  /// <reference types="node" />
2
2
  import './asset-types.js';
3
- import type { TAsset } from './CompositionManager.js';
3
+ import type { TRenderAsset } from './CompositionManager.js';
4
4
  import type { StaticFile } from './get-static-files.js';
5
5
  import type { ClipRegion } from './NativeLayers.js';
6
6
  import type { VideoConfig } from './video-config.js';
@@ -23,6 +23,7 @@ declare global {
23
23
  remotion_setBundleMode: (bundleMode: BundleState) => void;
24
24
  remotion_staticBase: string;
25
25
  remotion_staticFiles: StaticFile[];
26
+ remotion_publicFolderExists: string | null;
26
27
  remotion_editorName: string | null;
27
28
  remotion_numberOfAudioTags: number;
28
29
  remotion_projectName: string;
@@ -36,7 +37,7 @@ declare global {
36
37
  remotion_puppeteerTimeout: number;
37
38
  remotion_inputProps: string;
38
39
  remotion_envVariables: string;
39
- remotion_collectAssets: () => TAsset[];
40
+ remotion_collectAssets: () => TRenderAsset[];
40
41
  remotion_getClipRegion: () => ClipRegion | null;
41
42
  remotion_isPlayer: boolean;
42
43
  remotion_isBuilding: undefined | (() => void);
@@ -63,7 +64,7 @@ export * from './AbsoluteFill.js';
63
64
  export * from './audio/index.js';
64
65
  export { cancelRender } from './cancel-render.js';
65
66
  export { CalculateMetadataFunction, Composition, CompositionProps, CompProps, StillProps, } from './Composition.js';
66
- export { AnyCompMetadata, AnyComposition, SmallTCompMetadata, TAsset, TCompMetadata, } from './CompositionManager.js';
67
+ export { AnyCompMetadata, AnyComposition, SmallTCompMetadata, TCompMetadata, TRenderAsset, } from './CompositionManager.js';
67
68
  export { getInputProps } from './config/input-props.js';
68
69
  export { continueRender, delayRender } from './delay-render.js';
69
70
  export * from './easing.js';
@@ -1,6 +1,6 @@
1
1
  /// <reference types="react" />
2
2
  import { type CompProps } from './Composition.js';
3
- import type { TAsset, TCompMetadata, TComposition, TSequence } from './CompositionManager.js';
3
+ import type { TCompMetadata, TComposition, TRenderAsset, TSequence } from './CompositionManager.js';
4
4
  import type { CompositionManagerContext } from './CompositionManagerContext.js';
5
5
  import * as CSSUtils from './default-css.js';
6
6
  import type { RemotionEnvironment } from './get-environment.js';
@@ -126,7 +126,7 @@ export declare const Internals: {
126
126
  children: import("react").ReactNode;
127
127
  }>>;
128
128
  readonly REMOTION_STUDIO_CONTAINER_ELEMENT: "__remotion-studio-container";
129
- readonly AssetManager: import("react").Context<import("./AssetManager.js").AssetManagerContext>;
129
+ readonly RenderAssetManager: import("react").Context<import("./RenderAssetManager.js").RenderAssetManagerContext>;
130
130
  readonly bundleName: "bundle.js";
131
131
  readonly bundleMapName: "bundle.js.map";
132
132
  readonly persistCurrentFrame: (frame: number, composition: string) => void;
@@ -146,4 +146,4 @@ export declare const Internals: {
146
146
  children?: import("react").ReactNode;
147
147
  }>;
148
148
  };
149
- export type { TComposition, Timeline, TCompMetadata, TSequence, TAsset, TimelineContextValue, SetTimelineContextValue, CompProps, CompositionManagerContext, MediaVolumeContextValue, SetMediaVolumeContextValue, RemotionEnvironment, SerializedJSONWithCustomFields, };
149
+ export type { TComposition, Timeline, TCompMetadata, TSequence, TRenderAsset as TAsset, TimelineContextValue, SetTimelineContextValue, CompProps, CompositionManagerContext, MediaVolumeContextValue, SetMediaVolumeContextValue, RemotionEnvironment, SerializedJSONWithCustomFields, };
@@ -24,7 +24,6 @@ var __importStar = (this && this.__importStar) || function (mod) {
24
24
  };
25
25
  Object.defineProperty(exports, "__esModule", { value: true });
26
26
  exports.Internals = void 0;
27
- const AssetManager_js_1 = require("./AssetManager.js");
28
27
  const shared_audio_tags_js_1 = require("./audio/shared-audio-tags.js");
29
28
  const CanUseRemotionHooks_js_1 = require("./CanUseRemotionHooks.js");
30
29
  const Composition_js_1 = require("./Composition.js");
@@ -45,6 +44,7 @@ const prefetch_state_js_1 = require("./prefetch-state.js");
45
44
  const prefetch_js_1 = require("./prefetch.js");
46
45
  const register_root_js_1 = require("./register-root.js");
47
46
  const RemotionRoot_js_1 = require("./RemotionRoot.js");
47
+ const RenderAssetManager_js_1 = require("./RenderAssetManager.js");
48
48
  const resolve_video_config_js_1 = require("./resolve-video-config.js");
49
49
  const ResolveCompositionConfig_js_1 = require("./ResolveCompositionConfig.js");
50
50
  const SequenceContext_js_1 = require("./SequenceContext.js");
@@ -119,7 +119,7 @@ exports.Internals = {
119
119
  resolveCompositionsRef: ResolveCompositionConfig_js_1.resolveCompositionsRef,
120
120
  ResolveCompositionConfig: ResolveCompositionConfig_js_1.ResolveCompositionConfig,
121
121
  REMOTION_STUDIO_CONTAINER_ELEMENT: get_preview_dom_element_js_1.REMOTION_STUDIO_CONTAINER_ELEMENT,
122
- AssetManager: AssetManager_js_1.AssetManager,
122
+ RenderAssetManager: RenderAssetManager_js_1.RenderAssetManager,
123
123
  bundleName: 'bundle.js',
124
124
  bundleMapName: 'bundle.js.map',
125
125
  persistCurrentFrame: timeline_position_state_js_1.persistCurrentFrame,
@@ -1 +1 @@
1
- export declare const VERSION = "4.0.12";
1
+ export declare const VERSION = "4.0.15";
@@ -2,4 +2,4 @@
2
2
  Object.defineProperty(exports, "__esModule", { value: true });
3
3
  exports.VERSION = void 0;
4
4
  // Automatically generated on publish
5
- exports.VERSION = '4.0.12';
5
+ exports.VERSION = '4.0.15';
@@ -4,12 +4,12 @@ exports.OffthreadVideoForRendering = void 0;
4
4
  const jsx_runtime_1 = require("react/jsx-runtime");
5
5
  const react_1 = require("react");
6
6
  const absolute_src_js_1 = require("../absolute-src.js");
7
- const AssetManager_js_1 = require("../AssetManager.js");
8
7
  const use_audio_frame_js_1 = require("../audio/use-audio-frame.js");
9
8
  const cancel_render_js_1 = require("../cancel-render.js");
10
9
  const default_css_js_1 = require("../default-css.js");
11
10
  const Img_js_1 = require("../Img.js");
12
11
  const random_js_1 = require("../random.js");
12
+ const RenderAssetManager_js_1 = require("../RenderAssetManager.js");
13
13
  const SequenceContext_js_1 = require("../SequenceContext.js");
14
14
  const timeline_position_state_js_1 = require("../timeline-position-state.js");
15
15
  const truthy_js_1 = require("../truthy.js");
@@ -24,7 +24,7 @@ const OffthreadVideoForRendering = ({ onError, volume: volumeProp, playbackRate,
24
24
  const videoConfig = (0, use_unsafe_video_config_js_1.useUnsafeVideoConfig)();
25
25
  const sequenceContext = (0, react_1.useContext)(SequenceContext_js_1.SequenceContext);
26
26
  const mediaStartsAt = (0, use_audio_frame_js_1.useMediaStartsAt)();
27
- const { registerAsset, unregisterAsset } = (0, react_1.useContext)(AssetManager_js_1.AssetManager);
27
+ const { registerRenderAsset, unregisterRenderAsset } = (0, react_1.useContext)(RenderAssetManager_js_1.RenderAssetManager);
28
28
  if (!src) {
29
29
  throw new TypeError('No `src` was passed to <OffthreadVideo>.');
30
30
  }
@@ -58,7 +58,7 @@ const OffthreadVideoForRendering = ({ onError, volume: volumeProp, playbackRate,
58
58
  if (volume <= 0) {
59
59
  return;
60
60
  }
61
- registerAsset({
61
+ registerRenderAsset({
62
62
  type: 'video',
63
63
  src: (0, absolute_src_js_1.getAbsoluteSrc)(src),
64
64
  id,
@@ -68,13 +68,13 @@ const OffthreadVideoForRendering = ({ onError, volume: volumeProp, playbackRate,
68
68
  playbackRate: playbackRate !== null && playbackRate !== void 0 ? playbackRate : 1,
69
69
  allowAmplificationDuringRender: allowAmplificationDuringRender !== null && allowAmplificationDuringRender !== void 0 ? allowAmplificationDuringRender : false,
70
70
  });
71
- return () => unregisterAsset(id);
71
+ return () => unregisterRenderAsset(id);
72
72
  }, [
73
73
  muted,
74
74
  src,
75
- registerAsset,
75
+ registerRenderAsset,
76
76
  id,
77
- unregisterAsset,
77
+ unregisterRenderAsset,
78
78
  volume,
79
79
  frame,
80
80
  absoluteFrame,
@@ -4,12 +4,12 @@ exports.VideoForRendering = void 0;
4
4
  const jsx_runtime_1 = require("react/jsx-runtime");
5
5
  const react_1 = require("react");
6
6
  const absolute_src_js_1 = require("../absolute-src.js");
7
- const AssetManager_js_1 = require("../AssetManager.js");
8
7
  const use_audio_frame_js_1 = require("../audio/use-audio-frame.js");
9
8
  const delay_render_js_1 = require("../delay-render.js");
10
9
  const get_environment_js_1 = require("../get-environment.js");
11
10
  const is_approximately_the_same_js_1 = require("../is-approximately-the-same.js");
12
11
  const random_js_1 = require("../random.js");
12
+ const RenderAssetManager_js_1 = require("../RenderAssetManager.js");
13
13
  const SequenceContext_js_1 = require("../SequenceContext.js");
14
14
  const timeline_position_state_js_1 = require("../timeline-position-state.js");
15
15
  const use_current_frame_js_1 = require("../use-current-frame.js");
@@ -26,7 +26,7 @@ const VideoForRenderingForwardFunction = ({ onError, volume: volumeProp, allowAm
26
26
  const sequenceContext = (0, react_1.useContext)(SequenceContext_js_1.SequenceContext);
27
27
  const mediaStartsAt = (0, use_audio_frame_js_1.useMediaStartsAt)();
28
28
  const environment = (0, get_environment_js_1.useRemotionEnvironment)();
29
- const { registerAsset, unregisterAsset } = (0, react_1.useContext)(AssetManager_js_1.AssetManager);
29
+ const { registerRenderAsset, unregisterRenderAsset } = (0, react_1.useContext)(RenderAssetManager_js_1.RenderAssetManager);
30
30
  // Generate a string that's as unique as possible for this asset
31
31
  // but at the same time the same on all threads
32
32
  const id = (0, react_1.useMemo)(() => {
@@ -60,7 +60,7 @@ const VideoForRenderingForwardFunction = ({ onError, volume: volumeProp, allowAm
60
60
  if (!window.remotion_audioEnabled) {
61
61
  return;
62
62
  }
63
- registerAsset({
63
+ registerRenderAsset({
64
64
  type: 'video',
65
65
  src: (0, absolute_src_js_1.getAbsoluteSrc)(props.src),
66
66
  id,
@@ -70,13 +70,13 @@ const VideoForRenderingForwardFunction = ({ onError, volume: volumeProp, allowAm
70
70
  playbackRate: playbackRate !== null && playbackRate !== void 0 ? playbackRate : 1,
71
71
  allowAmplificationDuringRender: allowAmplificationDuringRender !== null && allowAmplificationDuringRender !== void 0 ? allowAmplificationDuringRender : false,
72
72
  });
73
- return () => unregisterAsset(id);
73
+ return () => unregisterRenderAsset(id);
74
74
  }, [
75
75
  props.muted,
76
76
  props.src,
77
- registerAsset,
77
+ registerRenderAsset,
78
78
  id,
79
- unregisterAsset,
79
+ unregisterRenderAsset,
80
80
  volume,
81
81
  frame,
82
82
  absoluteFrame,
@@ -21,7 +21,7 @@ export declare function useRemotionContexts(): {
21
21
  error: Error;
22
22
  }) | undefined;
23
23
  } | null;
24
- assetManagerContext: import("./AssetManager.js").AssetManagerContext;
24
+ renderAssetManagerContext: import("./RenderAssetManager.js").RenderAssetManagerContext;
25
25
  sequenceManagerContext: import("./SequenceManager.js").SequenceManagerContext;
26
26
  };
27
27
  export interface RemotionContextProviderProps {
@@ -29,12 +29,12 @@ const jsx_runtime_1 = require("react/jsx-runtime");
29
29
  // such as in React Three Fiber. All the contexts need to be passed again
30
30
  // for them to be useable
31
31
  const react_1 = __importStar(require("react"));
32
- const AssetManager_js_1 = require("./AssetManager.js");
33
32
  const CanUseRemotionHooks_js_1 = require("./CanUseRemotionHooks.js");
34
33
  const CompositionManagerContext_js_1 = require("./CompositionManagerContext.js");
35
34
  const NativeLayers_js_1 = require("./NativeLayers.js");
36
35
  const nonce_js_1 = require("./nonce.js");
37
36
  const prefetch_state_js_1 = require("./prefetch-state.js");
37
+ const RenderAssetManager_js_1 = require("./RenderAssetManager.js");
38
38
  const ResolveCompositionConfig_js_1 = require("./ResolveCompositionConfig.js");
39
39
  const SequenceContext_js_1 = require("./SequenceContext.js");
40
40
  const SequenceManager_js_1 = require("./SequenceManager.js");
@@ -49,7 +49,7 @@ function useRemotionContexts() {
49
49
  const nativeLayersContext = react_1.default.useContext(NativeLayers_js_1.NativeLayersContext);
50
50
  const preloadContext = react_1.default.useContext(prefetch_state_js_1.PreloadContext);
51
51
  const resolveCompositionContext = react_1.default.useContext(ResolveCompositionConfig_js_1.ResolveCompositionContext);
52
- const assetManagerContext = react_1.default.useContext(AssetManager_js_1.AssetManager);
52
+ const renderAssetManagerContext = react_1.default.useContext(RenderAssetManager_js_1.RenderAssetManager);
53
53
  const sequenceManagerContext = react_1.default.useContext(SequenceManager_js_1.SequenceManager);
54
54
  return (0, react_1.useMemo)(() => ({
55
55
  compositionManagerCtx,
@@ -61,7 +61,7 @@ function useRemotionContexts() {
61
61
  nativeLayersContext,
62
62
  preloadContext,
63
63
  resolveCompositionContext,
64
- assetManagerContext,
64
+ renderAssetManagerContext,
65
65
  sequenceManagerContext,
66
66
  }), [
67
67
  compositionManagerCtx,
@@ -73,13 +73,13 @@ function useRemotionContexts() {
73
73
  nativeLayersContext,
74
74
  preloadContext,
75
75
  resolveCompositionContext,
76
- assetManagerContext,
76
+ renderAssetManagerContext,
77
77
  sequenceManagerContext,
78
78
  ]);
79
79
  }
80
80
  exports.useRemotionContexts = useRemotionContexts;
81
81
  const RemotionContextProvider = (props) => {
82
82
  const { children, contexts } = props;
83
- return ((0, jsx_runtime_1.jsx)(CanUseRemotionHooks_js_1.CanUseRemotionHooks.Provider, { value: contexts.canUseRemotionHooksContext, children: (0, jsx_runtime_1.jsx)(nonce_js_1.NonceContext.Provider, { value: contexts.nonceContext, children: (0, jsx_runtime_1.jsx)(NativeLayers_js_1.NativeLayersContext.Provider, { value: contexts.nativeLayersContext, children: (0, jsx_runtime_1.jsx)(prefetch_state_js_1.PreloadContext.Provider, { value: contexts.preloadContext, children: (0, jsx_runtime_1.jsx)(CompositionManagerContext_js_1.CompositionManager.Provider, { value: contexts.compositionManagerCtx, children: (0, jsx_runtime_1.jsx)(SequenceManager_js_1.SequenceManager.Provider, { value: contexts.sequenceManagerContext, children: (0, jsx_runtime_1.jsx)(AssetManager_js_1.AssetManager.Provider, { value: contexts.assetManagerContext, children: (0, jsx_runtime_1.jsx)(ResolveCompositionConfig_js_1.ResolveCompositionContext.Provider, { value: contexts.resolveCompositionContext, children: (0, jsx_runtime_1.jsx)(timeline_position_state_js_1.TimelineContext.Provider, { value: contexts.timelineContext, children: (0, jsx_runtime_1.jsx)(timeline_position_state_js_1.SetTimelineContext.Provider, { value: contexts.setTimelineContext, children: (0, jsx_runtime_1.jsx)(SequenceContext_js_1.SequenceContext.Provider, { value: contexts.sequenceContext, children: children }) }) }) }) }) }) }) }) }) }) }));
83
+ return ((0, jsx_runtime_1.jsx)(CanUseRemotionHooks_js_1.CanUseRemotionHooks.Provider, { value: contexts.canUseRemotionHooksContext, children: (0, jsx_runtime_1.jsx)(nonce_js_1.NonceContext.Provider, { value: contexts.nonceContext, children: (0, jsx_runtime_1.jsx)(NativeLayers_js_1.NativeLayersContext.Provider, { value: contexts.nativeLayersContext, children: (0, jsx_runtime_1.jsx)(prefetch_state_js_1.PreloadContext.Provider, { value: contexts.preloadContext, children: (0, jsx_runtime_1.jsx)(CompositionManagerContext_js_1.CompositionManager.Provider, { value: contexts.compositionManagerCtx, children: (0, jsx_runtime_1.jsx)(SequenceManager_js_1.SequenceManager.Provider, { value: contexts.sequenceManagerContext, children: (0, jsx_runtime_1.jsx)(RenderAssetManager_js_1.RenderAssetManager.Provider, { value: contexts.renderAssetManagerContext, children: (0, jsx_runtime_1.jsx)(ResolveCompositionConfig_js_1.ResolveCompositionContext.Provider, { value: contexts.resolveCompositionContext, children: (0, jsx_runtime_1.jsx)(timeline_position_state_js_1.TimelineContext.Provider, { value: contexts.timelineContext, children: (0, jsx_runtime_1.jsx)(timeline_position_state_js_1.SetTimelineContext.Provider, { value: contexts.setTimelineContext, children: (0, jsx_runtime_1.jsx)(SequenceContext_js_1.SequenceContext.Provider, { value: contexts.sequenceContext, children: children }) }) }) }) }) }) }) }) }) }) }));
84
84
  };
85
85
  exports.RemotionContextProvider = RemotionContextProvider;
@@ -59,7 +59,7 @@ function truthy(value) {
59
59
  }
60
60
 
61
61
  // Automatically generated on publish
62
- const VERSION = '4.0.12';
62
+ const VERSION = '4.0.15';
63
63
 
64
64
  const checkMultipleRemotionVersions = () => {
65
65
  if (typeof globalThis === 'undefined') {
@@ -1772,8 +1772,11 @@ const useMediaPlayback = ({ mediaRef, src, mediaType, playbackRate: localPlaybac
1772
1772
  if (!src) {
1773
1773
  throw new Error(`No 'src' attribute was passed to the ${tagName} element.`);
1774
1774
  }
1775
- mediaRef.current.playbackRate = Math.max(0, playbackRate);
1776
- const shouldBeTime = getMediaTime({
1775
+ const playbackRateToSet = Math.max(0, playbackRate);
1776
+ if (mediaRef.current.playbackRate !== playbackRateToSet) {
1777
+ mediaRef.current.playbackRate = playbackRateToSet;
1778
+ }
1779
+ const _shouldBeTime = getMediaTime({
1777
1780
  fps,
1778
1781
  frame,
1779
1782
  src,
@@ -1781,11 +1784,16 @@ const useMediaPlayback = ({ mediaRef, src, mediaType, playbackRate: localPlaybac
1781
1784
  startFrom: -mediaStartsAt,
1782
1785
  mediaType,
1783
1786
  });
1787
+ const { duration } = mediaRef.current;
1788
+ const shouldBeTime = !Number.isNaN(duration) && Number.isFinite(duration)
1789
+ ? Math.min(duration, _shouldBeTime)
1790
+ : _shouldBeTime;
1784
1791
  const isTime = mediaRef.current.currentTime;
1785
1792
  const timeShift = Math.abs(shouldBeTime - isTime);
1786
- if (timeShift > acceptableTimeshift && !mediaRef.current.ended) {
1793
+ if (timeShift > acceptableTimeshift) {
1787
1794
  // If scrubbing around, adjust timing
1788
- // or if time shift is bigger than 0.2sec
1795
+ // or if time shift is bigger than 0.45sec
1796
+ console.log('seekingA', timeShift, mediaRef.current.currentTime, shouldBeTime);
1789
1797
  mediaRef.current.currentTime = shouldBeTime;
1790
1798
  if (!onlyWarnForMediaSeekingError) {
1791
1799
  warnAboutNonSeekableMedia(mediaRef.current, onlyWarnForMediaSeekingError ? 'console-warning' : 'console-error');
@@ -1799,11 +1807,13 @@ const useMediaPlayback = ({ mediaRef, src, mediaType, playbackRate: localPlaybac
1799
1807
  const makesSenseToSeek = Math.abs(mediaRef.current.currentTime - shouldBeTime) > 0.00001;
1800
1808
  if (!playing || absoluteFrame === 0) {
1801
1809
  if (makesSenseToSeek) {
1810
+ console.log('seekingB');
1802
1811
  mediaRef.current.currentTime = shouldBeTime;
1803
1812
  }
1804
1813
  }
1805
1814
  if (mediaRef.current.paused && !mediaRef.current.ended && playing) {
1806
1815
  if (makesSenseToSeek) {
1816
+ console.log('seekingC');
1807
1817
  mediaRef.current.currentTime = shouldBeTime;
1808
1818
  }
1809
1819
  playAndHandleNotAllowedError(mediaRef, mediaType);
@@ -2201,41 +2211,6 @@ const AudioForDevelopmentForwardRefFunction = (props, ref) => {
2201
2211
  };
2202
2212
  const AudioForDevelopment = forwardRef(AudioForDevelopmentForwardRefFunction);
2203
2213
 
2204
- const AssetManager = createContext({
2205
- registerAsset: () => undefined,
2206
- unregisterAsset: () => undefined,
2207
- assets: [],
2208
- });
2209
- const AssetManagerProvider = ({ children }) => {
2210
- const [assets, setAssets] = useState([]);
2211
- const registerAsset = useCallback((asset) => {
2212
- setAssets((assts) => {
2213
- return [...assts, asset];
2214
- });
2215
- }, []);
2216
- const unregisterAsset = useCallback((id) => {
2217
- setAssets((assts) => {
2218
- return assts.filter((a) => a.id !== id);
2219
- });
2220
- }, []);
2221
- useLayoutEffect(() => {
2222
- if (typeof window !== 'undefined') {
2223
- window.remotion_collectAssets = () => {
2224
- setAssets([]); // clear assets at next render
2225
- return assets;
2226
- };
2227
- }
2228
- }, [assets]);
2229
- const contextValue = useMemo(() => {
2230
- return {
2231
- registerAsset,
2232
- unregisterAsset,
2233
- assets,
2234
- };
2235
- }, [assets, registerAsset, unregisterAsset]);
2236
- return (jsx(AssetManager.Provider, { value: contextValue, children: children }));
2237
- };
2238
-
2239
2214
  if (typeof window !== 'undefined') {
2240
2215
  window.remotion_renderReady = false;
2241
2216
  }
@@ -2315,13 +2290,48 @@ const continueRender = (handle) => {
2315
2290
  }
2316
2291
  };
2317
2292
 
2293
+ const RenderAssetManager = createContext({
2294
+ registerRenderAsset: () => undefined,
2295
+ unregisterRenderAsset: () => undefined,
2296
+ renderAssets: [],
2297
+ });
2298
+ const RenderAssetManagerProvider = ({ children }) => {
2299
+ const [renderAssets, setRenderAssets] = useState([]);
2300
+ const registerRenderAsset = useCallback((renderAsset) => {
2301
+ setRenderAssets((assets) => {
2302
+ return [...assets, renderAsset];
2303
+ });
2304
+ }, []);
2305
+ const unregisterRenderAsset = useCallback((id) => {
2306
+ setRenderAssets((assts) => {
2307
+ return assts.filter((a) => a.id !== id);
2308
+ });
2309
+ }, []);
2310
+ useLayoutEffect(() => {
2311
+ if (typeof window !== 'undefined') {
2312
+ window.remotion_collectAssets = () => {
2313
+ setRenderAssets([]); // clear assets at next render
2314
+ return renderAssets;
2315
+ };
2316
+ }
2317
+ }, [renderAssets]);
2318
+ const contextValue = useMemo(() => {
2319
+ return {
2320
+ registerRenderAsset,
2321
+ unregisterRenderAsset,
2322
+ renderAssets,
2323
+ };
2324
+ }, [renderAssets, registerRenderAsset, unregisterRenderAsset]);
2325
+ return (jsx(RenderAssetManager.Provider, { value: contextValue, children: children }));
2326
+ };
2327
+
2318
2328
  const AudioForRenderingRefForwardingFunction = (props, ref) => {
2319
2329
  const audioRef = useRef(null);
2320
2330
  const absoluteFrame = useTimelinePosition();
2321
2331
  const volumePropFrame = useFrameForVolumeProp();
2322
2332
  const frame = useCurrentFrame();
2323
2333
  const sequenceContext = useContext(SequenceContext);
2324
- const { registerAsset, unregisterAsset } = useContext(AssetManager);
2334
+ const { registerRenderAsset, unregisterRenderAsset } = useContext(RenderAssetManager);
2325
2335
  const environment = useRemotionEnvironment();
2326
2336
  // Generate a string that's as unique as possible for this asset
2327
2337
  // but at the same time the same on all threads
@@ -2353,7 +2363,7 @@ const AudioForRenderingRefForwardingFunction = (props, ref) => {
2353
2363
  if (volume <= 0) {
2354
2364
  return;
2355
2365
  }
2356
- registerAsset({
2366
+ registerRenderAsset({
2357
2367
  type: 'audio',
2358
2368
  src: getAbsoluteSrc(props.src),
2359
2369
  id,
@@ -2363,14 +2373,14 @@ const AudioForRenderingRefForwardingFunction = (props, ref) => {
2363
2373
  playbackRate: (_a = props.playbackRate) !== null && _a !== void 0 ? _a : 1,
2364
2374
  allowAmplificationDuringRender: allowAmplificationDuringRender !== null && allowAmplificationDuringRender !== void 0 ? allowAmplificationDuringRender : false,
2365
2375
  });
2366
- return () => unregisterAsset(id);
2376
+ return () => unregisterRenderAsset(id);
2367
2377
  }, [
2368
2378
  props.muted,
2369
2379
  props.src,
2370
- registerAsset,
2380
+ registerRenderAsset,
2371
2381
  absoluteFrame,
2372
2382
  id,
2373
- unregisterAsset,
2383
+ unregisterRenderAsset,
2374
2384
  volume,
2375
2385
  volumePropFrame,
2376
2386
  frame,
@@ -2425,8 +2435,16 @@ const AudioRefForwardingFunction = (props, ref) => {
2425
2435
  }
2426
2436
  const onError = useCallback((e) => {
2427
2437
  console.log(e.currentTarget.error);
2428
- cancelRender(new Error(`Could not play audio with src ${otherProps.src}: ${e.currentTarget.error}. See https://remotion.dev/docs/media-playback-error for help.`));
2429
- }, [otherProps.src]);
2438
+ // If there is no `loop` property, we don't need to get the duration
2439
+ // and thsi does not need to be a fatal error
2440
+ const errMessage = `Could not play audio with src ${otherProps.src}: ${e.currentTarget.error}. See https://remotion.dev/docs/media-playback-error for help.`;
2441
+ if (loop) {
2442
+ cancelRender(new Error(errMessage));
2443
+ }
2444
+ else {
2445
+ console.warn(errMessage);
2446
+ }
2447
+ }, [loop, otherProps.src]);
2430
2448
  const onDuration = useCallback((src, durationInSeconds) => {
2431
2449
  setDurations({ type: 'got-duration', durationInSeconds, src });
2432
2450
  }, [setDurations]);
@@ -3141,7 +3159,7 @@ const CompositionManagerProvider = ({ children, numberOfAudioTags }) => {
3141
3159
  unregisterFolder,
3142
3160
  currentCompositionMetadata,
3143
3161
  ]);
3144
- return (jsx(CompositionManager.Provider, { value: contextValue, children: jsx(SequenceManagerProvider, { children: jsx(AssetManagerProvider, { children: jsx(ResolveCompositionConfig, { children: jsx(SharedAudioContextProvider, { numberOfAudioTags: numberOfAudioTags, component: (_a = composition === null || composition === void 0 ? void 0 : composition.component) !== null && _a !== void 0 ? _a : null, children: children }) }) }) }) }));
3162
+ return (jsx(CompositionManager.Provider, { value: contextValue, children: jsx(SequenceManagerProvider, { children: jsx(RenderAssetManagerProvider, { children: jsx(ResolveCompositionConfig, { children: jsx(SharedAudioContextProvider, { numberOfAudioTags: numberOfAudioTags, component: (_a = composition === null || composition === void 0 ? void 0 : composition.component) !== null && _a !== void 0 ? _a : null, children: children }) }) }) }) }));
3145
3163
  };
3146
3164
 
3147
3165
  const injected = {};
@@ -3749,7 +3767,7 @@ function useRemotionContexts() {
3749
3767
  const nativeLayersContext = React.useContext(NativeLayersContext);
3750
3768
  const preloadContext = React.useContext(PreloadContext);
3751
3769
  const resolveCompositionContext = React.useContext(ResolveCompositionContext);
3752
- const assetManagerContext = React.useContext(AssetManager);
3770
+ const renderAssetManagerContext = React.useContext(RenderAssetManager);
3753
3771
  const sequenceManagerContext = React.useContext(SequenceManager);
3754
3772
  return useMemo(() => ({
3755
3773
  compositionManagerCtx,
@@ -3761,7 +3779,7 @@ function useRemotionContexts() {
3761
3779
  nativeLayersContext,
3762
3780
  preloadContext,
3763
3781
  resolveCompositionContext,
3764
- assetManagerContext,
3782
+ renderAssetManagerContext,
3765
3783
  sequenceManagerContext,
3766
3784
  }), [
3767
3785
  compositionManagerCtx,
@@ -3773,13 +3791,13 @@ function useRemotionContexts() {
3773
3791
  nativeLayersContext,
3774
3792
  preloadContext,
3775
3793
  resolveCompositionContext,
3776
- assetManagerContext,
3794
+ renderAssetManagerContext,
3777
3795
  sequenceManagerContext,
3778
3796
  ]);
3779
3797
  }
3780
3798
  const RemotionContextProvider = (props) => {
3781
3799
  const { children, contexts } = props;
3782
- return (jsx(CanUseRemotionHooks.Provider, { value: contexts.canUseRemotionHooksContext, children: jsx(NonceContext.Provider, { value: contexts.nonceContext, children: jsx(NativeLayersContext.Provider, { value: contexts.nativeLayersContext, children: jsx(PreloadContext.Provider, { value: contexts.preloadContext, children: jsx(CompositionManager.Provider, { value: contexts.compositionManagerCtx, children: jsx(SequenceManager.Provider, { value: contexts.sequenceManagerContext, children: jsx(AssetManager.Provider, { value: contexts.assetManagerContext, children: jsx(ResolveCompositionContext.Provider, { value: contexts.resolveCompositionContext, children: jsx(TimelineContext.Provider, { value: contexts.timelineContext, children: jsx(SetTimelineContext.Provider, { value: contexts.setTimelineContext, children: jsx(SequenceContext.Provider, { value: contexts.sequenceContext, children: children }) }) }) }) }) }) }) }) }) }) }));
3800
+ return (jsx(CanUseRemotionHooks.Provider, { value: contexts.canUseRemotionHooksContext, children: jsx(NonceContext.Provider, { value: contexts.nonceContext, children: jsx(NativeLayersContext.Provider, { value: contexts.nativeLayersContext, children: jsx(PreloadContext.Provider, { value: contexts.preloadContext, children: jsx(CompositionManager.Provider, { value: contexts.compositionManagerCtx, children: jsx(SequenceManager.Provider, { value: contexts.sequenceManagerContext, children: jsx(RenderAssetManager.Provider, { value: contexts.renderAssetManagerContext, children: jsx(ResolveCompositionContext.Provider, { value: contexts.resolveCompositionContext, children: jsx(TimelineContext.Provider, { value: contexts.timelineContext, children: jsx(SetTimelineContext.Provider, { value: contexts.setTimelineContext, children: jsx(SequenceContext.Provider, { value: contexts.sequenceContext, children: children }) }) }) }) }) }) }) }) }) }) }));
3783
3801
  };
3784
3802
 
3785
3803
  const Timeline = TimelinePosition;
@@ -3836,7 +3854,7 @@ const Internals = {
3836
3854
  resolveCompositionsRef,
3837
3855
  ResolveCompositionConfig,
3838
3856
  REMOTION_STUDIO_CONTAINER_ELEMENT,
3839
- AssetManager,
3857
+ RenderAssetManager,
3840
3858
  bundleName: 'bundle.js',
3841
3859
  bundleMapName: 'bundle.js.map',
3842
3860
  persistCurrentFrame,
@@ -4188,7 +4206,7 @@ const OffthreadVideoForRendering = ({ onError, volume: volumeProp, playbackRate,
4188
4206
  const videoConfig = useUnsafeVideoConfig();
4189
4207
  const sequenceContext = useContext(SequenceContext);
4190
4208
  const mediaStartsAt = useMediaStartsAt();
4191
- const { registerAsset, unregisterAsset } = useContext(AssetManager);
4209
+ const { registerRenderAsset, unregisterRenderAsset } = useContext(RenderAssetManager);
4192
4210
  if (!src) {
4193
4211
  throw new TypeError('No `src` was passed to <OffthreadVideo>.');
4194
4212
  }
@@ -4222,7 +4240,7 @@ const OffthreadVideoForRendering = ({ onError, volume: volumeProp, playbackRate,
4222
4240
  if (volume <= 0) {
4223
4241
  return;
4224
4242
  }
4225
- registerAsset({
4243
+ registerRenderAsset({
4226
4244
  type: 'video',
4227
4245
  src: getAbsoluteSrc(src),
4228
4246
  id,
@@ -4232,13 +4250,13 @@ const OffthreadVideoForRendering = ({ onError, volume: volumeProp, playbackRate,
4232
4250
  playbackRate: playbackRate !== null && playbackRate !== void 0 ? playbackRate : 1,
4233
4251
  allowAmplificationDuringRender: allowAmplificationDuringRender !== null && allowAmplificationDuringRender !== void 0 ? allowAmplificationDuringRender : false,
4234
4252
  });
4235
- return () => unregisterAsset(id);
4253
+ return () => unregisterRenderAsset(id);
4236
4254
  }, [
4237
4255
  muted,
4238
4256
  src,
4239
- registerAsset,
4257
+ registerRenderAsset,
4240
4258
  id,
4241
- unregisterAsset,
4259
+ unregisterRenderAsset,
4242
4260
  volume,
4243
4261
  frame,
4244
4262
  absoluteFrame,
@@ -4468,7 +4486,7 @@ const VideoForRenderingForwardFunction = ({ onError, volume: volumeProp, allowAm
4468
4486
  const sequenceContext = useContext(SequenceContext);
4469
4487
  const mediaStartsAt = useMediaStartsAt();
4470
4488
  const environment = useRemotionEnvironment();
4471
- const { registerAsset, unregisterAsset } = useContext(AssetManager);
4489
+ const { registerRenderAsset, unregisterRenderAsset } = useContext(RenderAssetManager);
4472
4490
  // Generate a string that's as unique as possible for this asset
4473
4491
  // but at the same time the same on all threads
4474
4492
  const id = useMemo(() => {
@@ -4502,7 +4520,7 @@ const VideoForRenderingForwardFunction = ({ onError, volume: volumeProp, allowAm
4502
4520
  if (!window.remotion_audioEnabled) {
4503
4521
  return;
4504
4522
  }
4505
- registerAsset({
4523
+ registerRenderAsset({
4506
4524
  type: 'video',
4507
4525
  src: getAbsoluteSrc(props.src),
4508
4526
  id,
@@ -4512,13 +4530,13 @@ const VideoForRenderingForwardFunction = ({ onError, volume: volumeProp, allowAm
4512
4530
  playbackRate: playbackRate !== null && playbackRate !== void 0 ? playbackRate : 1,
4513
4531
  allowAmplificationDuringRender: allowAmplificationDuringRender !== null && allowAmplificationDuringRender !== void 0 ? allowAmplificationDuringRender : false,
4514
4532
  });
4515
- return () => unregisterAsset(id);
4533
+ return () => unregisterRenderAsset(id);
4516
4534
  }, [
4517
4535
  props.muted,
4518
4536
  props.src,
4519
- registerAsset,
4537
+ registerRenderAsset,
4520
4538
  id,
4521
- unregisterAsset,
4539
+ unregisterRenderAsset,
4522
4540
  volume,
4523
4541
  frame,
4524
4542
  absoluteFrame,
@@ -1,4 +1,4 @@
1
1
  // Automatically generated on publish
2
- const VERSION = '4.0.12';
2
+ const VERSION = '4.0.15';
3
3
 
4
4
  export { VERSION };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "remotion",
3
- "version": "4.0.12",
3
+ "version": "4.0.15",
4
4
  "description": "Render videos in React",
5
5
  "main": "dist/cjs/index.js",
6
6
  "types": "dist/cjs/index.d.ts",