remotion 3.3.15 → 3.3.17
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.
- package/.turbo/turbo-build.log +1 -1
- package/README.md +2 -2
- package/dist/CompositionManager.d.ts +3 -0
- package/dist/audio/Audio.d.ts +2 -1
- package/dist/audio/Audio.js +4 -1
- package/dist/audio/AudioForDevelopment.d.ts +1 -0
- package/dist/audio/AudioForDevelopment.js +1 -0
- package/dist/audio/AudioForRendering.d.ts +1 -0
- package/dist/audio/AudioForRendering.js +4 -1
- package/dist/audio/props.d.ts +1 -0
- package/dist/use-media-in-timeline.d.ts +2 -1
- package/dist/use-media-in-timeline.js +4 -1
- package/dist/use-sync-volume-with-media-tag.js +1 -0
- package/dist/version.d.ts +1 -1
- package/dist/version.js +1 -1
- package/dist/video/OffthreadVideoForRendering.js +4 -1
- package/dist/video/Video.d.ts +3 -2
- package/dist/video/Video.js +5 -1
- package/dist/video/VideoForDevelopment.d.ts +2 -1
- package/dist/video/VideoForDevelopment.js +10 -4
- package/dist/video/VideoForRendering.d.ts +2 -1
- package/dist/video/VideoForRendering.js +4 -1
- package/dist/video/props.d.ts +3 -1
- package/dist/volume-prop.d.ts +2 -1
- package/dist/volume-prop.js +4 -3
- package/package.json +2 -2
- package/version.js +3 -0
package/.turbo/turbo-build.log
CHANGED
package/README.md
CHANGED
|
@@ -11,7 +11,7 @@
|
|
|
11
11
|
[](https://www.npmjs.org/package/remotion)
|
|
12
12
|
[](https://npmcharts.com/compare/remotion?minimal=true)
|
|
13
13
|
[](https://packagephobia.now.sh/result?p=remotion)
|
|
14
|
-
<a href="https://twitter.com/
|
|
14
|
+
<a href="https://twitter.com/remotion"><img src="https://img.shields.io/twitter/follow/remotion?label=Twitter&style=social" alt="Twitter"></a>
|
|
15
15
|
|
|
16
16
|
Remotion is a framework for **creating videos programmatically using React.**
|
|
17
17
|
|
|
@@ -30,7 +30,7 @@ Remotion is a framework for **creating videos programmatically using React.**
|
|
|
30
30
|
<p>"This video was made with code" <em>- Fireship</em> <a href="https://youtu.be/deg8bOoziaE">Watch</a> • <a href="https://github.com/wcandillon/remotion-fireship">Source</a></p>
|
|
31
31
|
</td>
|
|
32
32
|
<td align="center">
|
|
33
|
-
<img style="width: 240px" src="packages/docs/static/img/
|
|
33
|
+
<img style="width: 240px" src="packages/docs/static/img/unwrapped-2022.gif" />
|
|
34
34
|
<p>GitHub Unwrapped - Personalized year in Review <a href="https://githubunwrapped.com">Try</a> • <a href="https://github.com/remotion-dev/github-unwrapped">Source</a></p>
|
|
35
35
|
</td>
|
|
36
36
|
<td align="center">
|
|
@@ -23,12 +23,14 @@ declare type EnhancedTSequenceData = {
|
|
|
23
23
|
volume: string | number;
|
|
24
24
|
doesVolumeChange: boolean;
|
|
25
25
|
startMediaFrom: number;
|
|
26
|
+
playbackRate: number;
|
|
26
27
|
} | {
|
|
27
28
|
type: 'video';
|
|
28
29
|
src: string;
|
|
29
30
|
volume: string | number;
|
|
30
31
|
doesVolumeChange: boolean;
|
|
31
32
|
startMediaFrom: number;
|
|
33
|
+
playbackRate: number;
|
|
32
34
|
};
|
|
33
35
|
export declare type TSequence = {
|
|
34
36
|
from: number;
|
|
@@ -49,6 +51,7 @@ export declare type TAsset = {
|
|
|
49
51
|
volume: number;
|
|
50
52
|
mediaFrame: number;
|
|
51
53
|
playbackRate: number;
|
|
54
|
+
allowAmplificationDuringRender: boolean;
|
|
52
55
|
};
|
|
53
56
|
declare type BaseMetadata = Pick<TCompMetadata, 'durationInFrames' | 'fps' | 'defaultProps' | 'height' | 'width'>;
|
|
54
57
|
export declare type CompositionManagerContext = {
|
package/dist/audio/Audio.d.ts
CHANGED
|
@@ -4,4 +4,5 @@ export declare const Audio: React.ForwardRefExoticComponent<Pick<Omit<React.Deta
|
|
|
4
4
|
volume?: import("../volume-prop").VolumeProp | undefined;
|
|
5
5
|
playbackRate?: number | undefined;
|
|
6
6
|
acceptableTimeShiftInSeconds?: number | undefined;
|
|
7
|
-
|
|
7
|
+
allowAmplificationDuringRender?: boolean | undefined;
|
|
8
|
+
} & RemotionMainAudioProps, "id" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "lang" | "placeholder" | "slot" | "spellCheck" | "style" | "tabIndex" | "title" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "src" | "volume" | "playbackRate" | "allowAmplificationDuringRender" | "controlsList" | "crossOrigin" | "loop" | "mediaGroup" | "muted" | "playsInline" | "preload" | "acceptableTimeShiftInSeconds" | keyof RemotionMainAudioProps> & React.RefAttributes<HTMLAudioElement>>;
|
package/dist/audio/Audio.js
CHANGED
|
@@ -14,6 +14,7 @@ const AudioForDevelopment_1 = require("./AudioForDevelopment");
|
|
|
14
14
|
const AudioForRendering_1 = require("./AudioForRendering");
|
|
15
15
|
const shared_audio_tags_1 = require("./shared-audio-tags");
|
|
16
16
|
const AudioRefForwardingFunction = (props, ref) => {
|
|
17
|
+
var _a;
|
|
17
18
|
const audioContext = (0, react_1.useContext)(shared_audio_tags_1.SharedAudioContext);
|
|
18
19
|
const { startFrom, endAt, ...otherProps } = props;
|
|
19
20
|
const { loop, ...propsOtherThanLoop } = props;
|
|
@@ -28,7 +29,9 @@ const AudioRefForwardingFunction = (props, ref) => {
|
|
|
28
29
|
}, [setDurations]);
|
|
29
30
|
if (loop && props.src && durations[props.src] !== undefined) {
|
|
30
31
|
const duration = Math.floor(durations[props.src] * fps);
|
|
31
|
-
|
|
32
|
+
const playbackRate = (_a = props.playbackRate) !== null && _a !== void 0 ? _a : 1;
|
|
33
|
+
const actualDuration = duration / playbackRate;
|
|
34
|
+
return ((0, jsx_runtime_1.jsx)(loop_1.Loop, { layout: "none", durationInFrames: Math.floor(actualDuration), children: (0, jsx_runtime_1.jsx)(exports.Audio, { ...propsOtherThanLoop, ref: ref }) }));
|
|
32
35
|
}
|
|
33
36
|
if (typeof startFrom !== 'undefined' || typeof endAt !== 'undefined') {
|
|
34
37
|
(0, validate_start_from_props_1.validateStartFromProps)(startFrom, endAt);
|
|
@@ -4,6 +4,7 @@ export declare const AudioForDevelopment: ForwardRefExoticComponent<Omit<React.D
|
|
|
4
4
|
volume?: import("../volume-prop").VolumeProp | undefined;
|
|
5
5
|
playbackRate?: number | undefined;
|
|
6
6
|
acceptableTimeShiftInSeconds?: number | undefined;
|
|
7
|
+
allowAmplificationDuringRender?: boolean | undefined;
|
|
7
8
|
} & {
|
|
8
9
|
shouldPreMountAudioTags: boolean;
|
|
9
10
|
onDuration: (src: string, durationInSeconds: number) => void;
|
|
@@ -52,6 +52,7 @@ const AudioForDevelopmentForwardRefFunction = (props, ref) => {
|
|
|
52
52
|
mediaRef: audioRef,
|
|
53
53
|
src,
|
|
54
54
|
mediaType: 'audio',
|
|
55
|
+
playbackRate: playbackRate !== null && playbackRate !== void 0 ? playbackRate : 1,
|
|
55
56
|
});
|
|
56
57
|
(0, use_media_playback_1.useMediaPlayback)({
|
|
57
58
|
mediaRef: audioRef,
|
|
@@ -4,6 +4,7 @@ export declare const AudioForRendering: ForwardRefExoticComponent<Omit<React.Det
|
|
|
4
4
|
volume?: import("../volume-prop").VolumeProp | undefined;
|
|
5
5
|
playbackRate?: number | undefined;
|
|
6
6
|
acceptableTimeShiftInSeconds?: number | undefined;
|
|
7
|
+
allowAmplificationDuringRender?: boolean | undefined;
|
|
7
8
|
} & {
|
|
8
9
|
onDuration: (src: string, durationInSeconds: number) => void;
|
|
9
10
|
} & RefAttributes<HTMLAudioElement>>;
|
|
@@ -26,11 +26,12 @@ const AudioForRenderingRefForwardingFunction = (props, ref) => {
|
|
|
26
26
|
var _a;
|
|
27
27
|
return `audio-${(0, random_1.random)((_a = props.src) !== null && _a !== void 0 ? _a : '')}-${sequenceContext === null || sequenceContext === void 0 ? void 0 : sequenceContext.relativeFrom}-${sequenceContext === null || sequenceContext === void 0 ? void 0 : sequenceContext.cumulatedFrom}-${sequenceContext === null || sequenceContext === void 0 ? void 0 : sequenceContext.durationInFrames}`;
|
|
28
28
|
}, [props.src, sequenceContext]);
|
|
29
|
-
const { volume: volumeProp, playbackRate, ...nativeProps } = props;
|
|
29
|
+
const { volume: volumeProp, playbackRate, allowAmplificationDuringRender, ...nativeProps } = props;
|
|
30
30
|
const volume = (0, volume_prop_1.evaluateVolume)({
|
|
31
31
|
volume: volumeProp,
|
|
32
32
|
frame: volumePropFrame,
|
|
33
33
|
mediaVolume: 1,
|
|
34
|
+
allowAmplificationDuringRender: allowAmplificationDuringRender !== null && allowAmplificationDuringRender !== void 0 ? allowAmplificationDuringRender : false,
|
|
34
35
|
});
|
|
35
36
|
(0, react_1.useImperativeHandle)(ref, () => {
|
|
36
37
|
return audioRef.current;
|
|
@@ -57,6 +58,7 @@ const AudioForRenderingRefForwardingFunction = (props, ref) => {
|
|
|
57
58
|
volume,
|
|
58
59
|
mediaFrame: frame,
|
|
59
60
|
playbackRate: (_a = props.playbackRate) !== null && _a !== void 0 ? _a : 1,
|
|
61
|
+
allowAmplificationDuringRender: allowAmplificationDuringRender !== null && allowAmplificationDuringRender !== void 0 ? allowAmplificationDuringRender : false,
|
|
60
62
|
});
|
|
61
63
|
return () => unregisterAsset(id);
|
|
62
64
|
}, [
|
|
@@ -71,6 +73,7 @@ const AudioForRenderingRefForwardingFunction = (props, ref) => {
|
|
|
71
73
|
frame,
|
|
72
74
|
playbackRate,
|
|
73
75
|
props.playbackRate,
|
|
76
|
+
allowAmplificationDuringRender,
|
|
74
77
|
]);
|
|
75
78
|
const { src, onDuration } = props;
|
|
76
79
|
// If audio source switches, make new handle
|
package/dist/audio/props.d.ts
CHANGED
|
@@ -1,9 +1,10 @@
|
|
|
1
1
|
import type { RefObject } from 'react';
|
|
2
2
|
import type { VolumeProp } from './volume-prop';
|
|
3
|
-
export declare const useMediaInTimeline: ({ volume, mediaVolume, mediaRef, src, mediaType, }: {
|
|
3
|
+
export declare const useMediaInTimeline: ({ volume, mediaVolume, mediaRef, src, mediaType, playbackRate, }: {
|
|
4
4
|
volume: VolumeProp | undefined;
|
|
5
5
|
mediaVolume: number;
|
|
6
6
|
mediaRef: RefObject<HTMLAudioElement | HTMLVideoElement>;
|
|
7
7
|
src: string | undefined;
|
|
8
8
|
mediaType: 'audio' | 'video';
|
|
9
|
+
playbackRate: number;
|
|
9
10
|
}) => void;
|
|
@@ -20,7 +20,7 @@ const warnOnce = (message) => {
|
|
|
20
20
|
console.warn(message);
|
|
21
21
|
didWarn[message] = true;
|
|
22
22
|
};
|
|
23
|
-
const useMediaInTimeline = ({ volume, mediaVolume, mediaRef, src, mediaType, }) => {
|
|
23
|
+
const useMediaInTimeline = ({ volume, mediaVolume, mediaRef, src, mediaType, playbackRate, }) => {
|
|
24
24
|
const videoConfig = (0, use_video_config_1.useVideoConfig)();
|
|
25
25
|
const { rootId, audioAndVideoTags } = (0, react_1.useContext)(timeline_position_state_1.TimelineContext);
|
|
26
26
|
const parentSequence = (0, react_1.useContext)(Sequence_1.SequenceContext);
|
|
@@ -48,6 +48,7 @@ const useMediaInTimeline = ({ volume, mediaVolume, mediaRef, src, mediaType, })
|
|
|
48
48
|
frame: i + startsAt,
|
|
49
49
|
volume,
|
|
50
50
|
mediaVolume,
|
|
51
|
+
allowAmplificationDuringRender: false,
|
|
51
52
|
});
|
|
52
53
|
})
|
|
53
54
|
.join(',');
|
|
@@ -84,6 +85,7 @@ const useMediaInTimeline = ({ volume, mediaVolume, mediaRef, src, mediaType, })
|
|
|
84
85
|
startMediaFrom: 0 - startsAt,
|
|
85
86
|
doesVolumeChange,
|
|
86
87
|
showLoopTimesInTimeline: undefined,
|
|
88
|
+
playbackRate,
|
|
87
89
|
});
|
|
88
90
|
return () => {
|
|
89
91
|
unregisterSequence(id);
|
|
@@ -104,6 +106,7 @@ const useMediaInTimeline = ({ volume, mediaVolume, mediaRef, src, mediaType, })
|
|
|
104
106
|
mediaRef,
|
|
105
107
|
mediaType,
|
|
106
108
|
startsAt,
|
|
109
|
+
playbackRate,
|
|
107
110
|
]);
|
|
108
111
|
(0, react_1.useEffect)(() => {
|
|
109
112
|
const tag = {
|
|
@@ -10,6 +10,7 @@ const useSyncVolumeWithMediaTag = ({ volumePropFrame, actualVolume, volume, medi
|
|
|
10
10
|
frame: volumePropFrame,
|
|
11
11
|
volume,
|
|
12
12
|
mediaVolume,
|
|
13
|
+
allowAmplificationDuringRender: false,
|
|
13
14
|
});
|
|
14
15
|
if (!(0, is_approximately_the_same_1.isApproximatelyTheSame)(userPreferredVolume, actualVolume) &&
|
|
15
16
|
mediaRef.current) {
|
package/dist/version.d.ts
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
export declare const VERSION = "3.3.
|
|
1
|
+
export declare const VERSION = "3.3.17";
|
package/dist/version.js
CHANGED
|
@@ -17,7 +17,7 @@ const use_unsafe_video_config_1 = require("../use-unsafe-video-config");
|
|
|
17
17
|
const volume_prop_1 = require("../volume-prop");
|
|
18
18
|
const get_current_time_1 = require("./get-current-time");
|
|
19
19
|
const DEFAULT_IMAGE_FORMAT = 'jpeg';
|
|
20
|
-
const OffthreadVideoForRendering = ({ onError, volume: volumeProp, playbackRate, src, muted, imageFormat, ...props }) => {
|
|
20
|
+
const OffthreadVideoForRendering = ({ onError, volume: volumeProp, playbackRate, src, muted, imageFormat, allowAmplificationDuringRender, ...props }) => {
|
|
21
21
|
const absoluteFrame = (0, timeline_position_state_1.useTimelinePosition)();
|
|
22
22
|
const frame = (0, use_current_frame_1.useCurrentFrame)();
|
|
23
23
|
const volumePropsFrame = (0, use_audio_frame_1.useFrameForVolumeProp)();
|
|
@@ -43,6 +43,7 @@ const OffthreadVideoForRendering = ({ onError, volume: volumeProp, playbackRate,
|
|
|
43
43
|
volume: volumeProp,
|
|
44
44
|
frame: volumePropsFrame,
|
|
45
45
|
mediaVolume: 1,
|
|
46
|
+
allowAmplificationDuringRender: allowAmplificationDuringRender !== null && allowAmplificationDuringRender !== void 0 ? allowAmplificationDuringRender : false,
|
|
46
47
|
});
|
|
47
48
|
(0, react_1.useEffect)(() => {
|
|
48
49
|
if (!src) {
|
|
@@ -65,6 +66,7 @@ const OffthreadVideoForRendering = ({ onError, volume: volumeProp, playbackRate,
|
|
|
65
66
|
volume,
|
|
66
67
|
mediaFrame: frame,
|
|
67
68
|
playbackRate: playbackRate !== null && playbackRate !== void 0 ? playbackRate : 1,
|
|
69
|
+
allowAmplificationDuringRender: allowAmplificationDuringRender !== null && allowAmplificationDuringRender !== void 0 ? allowAmplificationDuringRender : false,
|
|
68
70
|
});
|
|
69
71
|
return () => unregisterAsset(id);
|
|
70
72
|
}, [
|
|
@@ -77,6 +79,7 @@ const OffthreadVideoForRendering = ({ onError, volume: volumeProp, playbackRate,
|
|
|
77
79
|
frame,
|
|
78
80
|
absoluteFrame,
|
|
79
81
|
playbackRate,
|
|
82
|
+
allowAmplificationDuringRender,
|
|
80
83
|
]);
|
|
81
84
|
const currentTime = (0, react_1.useMemo)(() => {
|
|
82
85
|
return ((0, get_current_time_1.getExpectedMediaFrameUncorrected)({
|
package/dist/video/Video.d.ts
CHANGED
|
@@ -3,5 +3,6 @@ import type { RemotionMainVideoProps } from './props';
|
|
|
3
3
|
export declare const Video: React.ForwardRefExoticComponent<Pick<Omit<React.DetailedHTMLProps<React.VideoHTMLAttributes<HTMLVideoElement>, HTMLVideoElement>, "nonce" | "onEnded" | "autoPlay" | "controls"> & {
|
|
4
4
|
volume?: import("../volume-prop").VolumeProp | undefined;
|
|
5
5
|
playbackRate?: number | undefined;
|
|
6
|
-
|
|
7
|
-
|
|
6
|
+
acceptableTimeShiftInSeconds?: number | undefined;
|
|
7
|
+
allowAmplificationDuringRender?: boolean | undefined;
|
|
8
|
+
} & RemotionMainVideoProps, "id" | "height" | "width" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "lang" | "placeholder" | "slot" | "spellCheck" | "style" | "tabIndex" | "title" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "src" | "volume" | "playbackRate" | "allowAmplificationDuringRender" | "controlsList" | "crossOrigin" | "loop" | "mediaGroup" | "muted" | "playsInline" | "preload" | "acceptableTimeShiftInSeconds" | "poster" | "disablePictureInPicture" | "disableRemotePlayback" | keyof RemotionMainVideoProps> & React.RefAttributes<HTMLVideoElement>>;
|
package/dist/video/Video.js
CHANGED
|
@@ -13,6 +13,7 @@ const duration_state_1 = require("./duration-state");
|
|
|
13
13
|
const VideoForDevelopment_1 = require("./VideoForDevelopment");
|
|
14
14
|
const VideoForRendering_1 = require("./VideoForRendering");
|
|
15
15
|
const VideoForwardingFunction = (props, ref) => {
|
|
16
|
+
var _a;
|
|
16
17
|
const { startFrom, endAt, ...otherProps } = props;
|
|
17
18
|
const { loop, ...propsOtherThanLoop } = props;
|
|
18
19
|
const { fps } = (0, use_video_config_1.useVideoConfig)();
|
|
@@ -24,7 +25,10 @@ const VideoForwardingFunction = (props, ref) => {
|
|
|
24
25
|
setDurations({ type: 'got-duration', durationInSeconds, src });
|
|
25
26
|
}, [setDurations]);
|
|
26
27
|
if (loop && props.src && durations[props.src] !== undefined) {
|
|
27
|
-
|
|
28
|
+
const naturalDuration = durations[props.src] * fps;
|
|
29
|
+
const playbackRate = (_a = props.playbackRate) !== null && _a !== void 0 ? _a : 1;
|
|
30
|
+
const durationInFrames = Math.floor(naturalDuration / playbackRate);
|
|
31
|
+
return ((0, jsx_runtime_1.jsx)(loop_1.Loop, { durationInFrames: durationInFrames, children: (0, jsx_runtime_1.jsx)(exports.Video, { ...propsOtherThanLoop, ref: ref }) }));
|
|
28
32
|
}
|
|
29
33
|
if (typeof startFrom !== 'undefined' || typeof endAt !== 'undefined') {
|
|
30
34
|
(0, validate_start_from_props_1.validateStartFromProps)(startFrom, endAt);
|
|
@@ -3,7 +3,8 @@ import React from 'react';
|
|
|
3
3
|
export declare const VideoForDevelopment: ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.VideoHTMLAttributes<HTMLVideoElement>, HTMLVideoElement>, "nonce" | "onEnded" | "autoPlay" | "controls"> & {
|
|
4
4
|
volume?: import("../volume-prop").VolumeProp | undefined;
|
|
5
5
|
playbackRate?: number | undefined;
|
|
6
|
-
|
|
6
|
+
acceptableTimeShiftInSeconds?: number | undefined;
|
|
7
|
+
allowAmplificationDuringRender?: boolean | undefined;
|
|
7
8
|
} & {
|
|
8
9
|
onlyWarnForMediaSeekingError: boolean;
|
|
9
10
|
onDuration: (src: string, durationInSeconds: number) => void;
|
|
@@ -14,12 +14,17 @@ const use_video_config_1 = require("../use-video-config");
|
|
|
14
14
|
const volume_position_state_1 = require("../volume-position-state");
|
|
15
15
|
const video_fragment_1 = require("./video-fragment");
|
|
16
16
|
const VideoForDevelopmentRefForwardingFunction = (props, ref) => {
|
|
17
|
-
var _a;
|
|
17
|
+
var _a, _b;
|
|
18
18
|
const videoRef = (0, react_1.useRef)(null);
|
|
19
19
|
const volumePropFrame = (0, use_audio_frame_1.useFrameForVolumeProp)();
|
|
20
20
|
const { fps, durationInFrames } = (0, use_video_config_1.useVideoConfig)();
|
|
21
21
|
const parentSequence = (0, react_1.useContext)(Sequence_1.SequenceContext);
|
|
22
|
-
const { volume, muted, playbackRate, onlyWarnForMediaSeekingError, src, onDuration,
|
|
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
|
+
}
|
|
23
28
|
const actualVolume = (0, use_media_tag_volume_1.useMediaTagVolume)(videoRef);
|
|
24
29
|
const [mediaVolume] = (0, volume_position_state_1.useMediaVolumeState)();
|
|
25
30
|
const [mediaMuted] = (0, volume_position_state_1.useMediaMutedState)();
|
|
@@ -29,6 +34,7 @@ const VideoForDevelopmentRefForwardingFunction = (props, ref) => {
|
|
|
29
34
|
mediaVolume,
|
|
30
35
|
mediaType: 'video',
|
|
31
36
|
src,
|
|
37
|
+
playbackRate: (_a = props.playbackRate) !== null && _a !== void 0 ? _a : 1,
|
|
32
38
|
});
|
|
33
39
|
(0, use_sync_volume_with_media_tag_1.useSyncVolumeWithMediaTag)({
|
|
34
40
|
volumePropFrame,
|
|
@@ -41,9 +47,9 @@ const VideoForDevelopmentRefForwardingFunction = (props, ref) => {
|
|
|
41
47
|
mediaRef: videoRef,
|
|
42
48
|
src,
|
|
43
49
|
mediaType: 'video',
|
|
44
|
-
playbackRate: (
|
|
50
|
+
playbackRate: (_b = props.playbackRate) !== null && _b !== void 0 ? _b : 1,
|
|
45
51
|
onlyWarnForMediaSeekingError,
|
|
46
|
-
acceptableTimeshift:
|
|
52
|
+
acceptableTimeshift: acceptableTimeShiftInSeconds !== null && acceptableTimeShiftInSeconds !== void 0 ? acceptableTimeShiftInSeconds : use_media_playback_1.DEFAULT_ACCEPTABLE_TIMESHIFT,
|
|
47
53
|
});
|
|
48
54
|
const actualFrom = parentSequence
|
|
49
55
|
? parentSequence.relativeFrom + parentSequence.cumulatedFrom
|
|
@@ -3,7 +3,8 @@ import React from 'react';
|
|
|
3
3
|
export declare const VideoForRendering: ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.VideoHTMLAttributes<HTMLVideoElement>, HTMLVideoElement>, "nonce" | "onEnded" | "autoPlay" | "controls"> & {
|
|
4
4
|
volume?: import("../volume-prop").VolumeProp | undefined;
|
|
5
5
|
playbackRate?: number | undefined;
|
|
6
|
-
|
|
6
|
+
acceptableTimeShiftInSeconds?: number | undefined;
|
|
7
|
+
allowAmplificationDuringRender?: boolean | undefined;
|
|
7
8
|
} & {
|
|
8
9
|
onDuration: (src: string, durationInSeconds: number) => void;
|
|
9
10
|
} & RefAttributes<HTMLVideoElement>>;
|
|
@@ -17,7 +17,7 @@ const use_unsafe_video_config_1 = require("../use-unsafe-video-config");
|
|
|
17
17
|
const volume_prop_1 = require("../volume-prop");
|
|
18
18
|
const warn_about_non_seekable_media_1 = require("../warn-about-non-seekable-media");
|
|
19
19
|
const get_current_time_1 = require("./get-current-time");
|
|
20
|
-
const VideoForRenderingForwardFunction = ({ onError, volume: volumeProp, playbackRate, onDuration, ...props }, ref) => {
|
|
20
|
+
const VideoForRenderingForwardFunction = ({ onError, volume: volumeProp, allowAmplificationDuringRender, playbackRate, onDuration, ...props }, ref) => {
|
|
21
21
|
const absoluteFrame = (0, timeline_position_state_1.useTimelinePosition)();
|
|
22
22
|
const frame = (0, use_current_frame_1.useCurrentFrame)();
|
|
23
23
|
const volumePropsFrame = (0, use_audio_frame_1.useFrameForVolumeProp)();
|
|
@@ -44,6 +44,7 @@ const VideoForRenderingForwardFunction = ({ onError, volume: volumeProp, playbac
|
|
|
44
44
|
volume: volumeProp,
|
|
45
45
|
frame: volumePropsFrame,
|
|
46
46
|
mediaVolume: 1,
|
|
47
|
+
allowAmplificationDuringRender: allowAmplificationDuringRender !== null && allowAmplificationDuringRender !== void 0 ? allowAmplificationDuringRender : false,
|
|
47
48
|
});
|
|
48
49
|
(0, react_1.useEffect)(() => {
|
|
49
50
|
if (!props.src) {
|
|
@@ -66,6 +67,7 @@ const VideoForRenderingForwardFunction = ({ onError, volume: volumeProp, playbac
|
|
|
66
67
|
volume,
|
|
67
68
|
mediaFrame: frame,
|
|
68
69
|
playbackRate: playbackRate !== null && playbackRate !== void 0 ? playbackRate : 1,
|
|
70
|
+
allowAmplificationDuringRender: allowAmplificationDuringRender !== null && allowAmplificationDuringRender !== void 0 ? allowAmplificationDuringRender : false,
|
|
69
71
|
});
|
|
70
72
|
return () => unregisterAsset(id);
|
|
71
73
|
}, [
|
|
@@ -78,6 +80,7 @@ const VideoForRenderingForwardFunction = ({ onError, volume: volumeProp, playbac
|
|
|
78
80
|
frame,
|
|
79
81
|
absoluteFrame,
|
|
80
82
|
playbackRate,
|
|
83
|
+
allowAmplificationDuringRender,
|
|
81
84
|
]);
|
|
82
85
|
(0, react_1.useImperativeHandle)(ref, () => {
|
|
83
86
|
return videoRef.current;
|
package/dist/video/props.d.ts
CHANGED
|
@@ -7,7 +7,8 @@ export declare type RemotionMainVideoProps = {
|
|
|
7
7
|
export declare type RemotionVideoProps = Omit<React.DetailedHTMLProps<React.VideoHTMLAttributes<HTMLVideoElement>, HTMLVideoElement>, 'autoPlay' | 'controls' | 'onEnded' | 'nonce'> & {
|
|
8
8
|
volume?: VolumeProp;
|
|
9
9
|
playbackRate?: number;
|
|
10
|
-
|
|
10
|
+
acceptableTimeShiftInSeconds?: number;
|
|
11
|
+
allowAmplificationDuringRender?: boolean;
|
|
11
12
|
};
|
|
12
13
|
export declare type OffthreadVideoImageFormat = 'png' | 'jpeg';
|
|
13
14
|
export declare type OffthreadVideoProps = {
|
|
@@ -20,4 +21,5 @@ export declare type OffthreadVideoProps = {
|
|
|
20
21
|
onError?: React.ReactEventHandler<HTMLVideoElement | HTMLImageElement>;
|
|
21
22
|
imageFormat?: OffthreadVideoImageFormat;
|
|
22
23
|
acceptableTimeShiftInSeconds?: number;
|
|
24
|
+
allowAmplificationDuringRender?: boolean;
|
|
23
25
|
};
|
package/dist/volume-prop.d.ts
CHANGED
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
export declare type VolumeProp = number | ((frame: number) => number);
|
|
2
|
-
export declare const evaluateVolume: ({ frame, volume, mediaVolume, }: {
|
|
2
|
+
export declare const evaluateVolume: ({ frame, volume, mediaVolume, allowAmplificationDuringRender, }: {
|
|
3
3
|
frame: number;
|
|
4
4
|
volume: VolumeProp | undefined;
|
|
5
5
|
mediaVolume: number;
|
|
6
|
+
allowAmplificationDuringRender: boolean;
|
|
6
7
|
}) => number;
|
package/dist/volume-prop.js
CHANGED
|
@@ -1,9 +1,10 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
3
|
exports.evaluateVolume = void 0;
|
|
4
|
-
const evaluateVolume = ({ frame, volume, mediaVolume = 1, }) => {
|
|
4
|
+
const evaluateVolume = ({ frame, volume, mediaVolume = 1, allowAmplificationDuringRender, }) => {
|
|
5
|
+
const maxVolume = allowAmplificationDuringRender ? Infinity : 1;
|
|
5
6
|
if (typeof volume === 'number') {
|
|
6
|
-
return Math.min(
|
|
7
|
+
return Math.min(maxVolume, volume * mediaVolume);
|
|
7
8
|
}
|
|
8
9
|
if (typeof volume === 'undefined') {
|
|
9
10
|
return Number(mediaVolume);
|
|
@@ -18,6 +19,6 @@ const evaluateVolume = ({ frame, volume, mediaVolume = 1, }) => {
|
|
|
18
19
|
if (!Number.isFinite(evaluated)) {
|
|
19
20
|
throw new TypeError(`You passed in a function to the volume prop but it returned a non-finite number for frame ${frame}.`);
|
|
20
21
|
}
|
|
21
|
-
return Math.max(0, Math.min(
|
|
22
|
+
return Math.max(0, Math.min(maxVolume, evaluated));
|
|
22
23
|
};
|
|
23
24
|
exports.evaluateVolume = evaluateVolume;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "remotion",
|
|
3
|
-
"version": "3.3.
|
|
3
|
+
"version": "3.3.17",
|
|
4
4
|
"description": "Render videos in React",
|
|
5
5
|
"main": "dist/index.js",
|
|
6
6
|
"types": "dist/index.d.ts",
|
|
@@ -55,5 +55,5 @@
|
|
|
55
55
|
"publishConfig": {
|
|
56
56
|
"access": "public"
|
|
57
57
|
},
|
|
58
|
-
"gitHead": "
|
|
58
|
+
"gitHead": "0b80927c47c4216f84a4a34320d48b6f55488747"
|
|
59
59
|
}
|
package/version.js
CHANGED