New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

remotion

Package Overview
Dependencies
Maintainers
1
Versions
1006
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

remotion - npm Package Compare versions

Comparing version 1.6.0-alpha.9f690548 to 1.6.0-alpha.ae9eb233

dist/audio-processing.d.ts
dist/audio-processing.d.ts.map
dist/audio-processing.js
dist/audio-processing.js.map
dist/audio-worklet.d.ts
dist/audio-worklet.d.ts.map
dist/audio-worklet.js
dist/audio-worklet.js.map
dist/audio/use-audio-frame.d.ts
dist/audio/use-audio-frame.d.ts.map
dist/audio/use-audio-frame.js
dist/audio/use-audio-frame.js.map
dist/get-audio-visualization-layout.d.ts
dist/get-audio-visualization-layout.d.ts.map
dist/get-audio-visualization-layout.js
dist/get-audio-visualization-layout.js.map
dist/get-lazy-component.d.ts
dist/get-lazy-component.d.ts.map
dist/get-lazy-component.js
dist/get-lazy-component.js.map
dist/is-audio-codec.d.ts
dist/is-audio-codec.d.ts.map
dist/is-audio-codec.js
dist/is-audio-codec.js.map
dist/is-remote-asset.d.ts
dist/is-remote-asset.d.ts.map
dist/is-remote-asset.js
dist/is-remote-asset.js.map
dist/nonce.d.ts
dist/nonce.d.ts.map
dist/nonce.js
dist/nonce.js.map
dist/NonceContext.d.ts
dist/NonceContext.d.ts.map
dist/NonceContext.js
dist/NonceContext.js.map
dist/sync-actual-volume.d.ts
dist/sync-actual-volume.d.ts.map
dist/sync-actual-volume.js
dist/sync-actual-volume.js.map
dist/test/audio.d.ts
dist/test/audio.d.ts.map
dist/test/audio.js
dist/test/audio.js.map
dist/test/audio.test.d.ts
dist/test/audio.test.d.ts.map
dist/test/audio.test.js
dist/test/audio.test.js.map
dist/test/bezier.test.d.ts
dist/test/bezier.test.d.ts.map
dist/test/bezier.test.js
dist/test/bezier.test.js.map
dist/test/concurrency.test.d.ts
dist/test/concurrency.test.d.ts.map
dist/test/concurrency.test.js
dist/test/concurrency.test.js.map
dist/test/image-sequence.test.d.ts
dist/test/image-sequence.test.d.ts.map
dist/test/image-sequence.test.js
dist/test/image-sequence.test.js.map
dist/test/Img.test.d.ts
dist/test/Img.test.d.ts.map
dist/test/Img.test.js
dist/test/Img.test.js.map
dist/test/overwrite.test.d.ts
dist/test/overwrite.test.d.ts.map
dist/test/overwrite.test.js
dist/test/overwrite.test.js.map
dist/test/ready-manager.test.d.ts
dist/test/ready-manager.test.d.ts.map
dist/test/ready-manager.test.js
dist/test/ready-manager.test.js.map
dist/test/start-at.d.ts
dist/test/start-at.d.ts.map
dist/test/start-at.js
dist/test/start-at.js.map
dist/test/start-at.test.d.ts
dist/test/start-at.test.d.ts.map
dist/test/start-at.test.js
dist/test/start-at.test.js.map
dist/test/video.test.d.ts
dist/test/video.test.d.ts.map
dist/test/video.test.js
dist/test/video.test.js.map
dist/test/webpack-caching.test.d.ts
dist/test/webpack-caching.test.d.ts.map
dist/test/webpack-caching.test.js
dist/test/webpack-caching.test.js.map
dist/use-lazy-component.d.ts
dist/use-lazy-component.d.ts.map
dist/use-lazy-component.js
dist/use-lazy-component.js.map
dist/use-media-in-timeline.d.ts
dist/use-media-in-timeline.d.ts.map
dist/use-media-in-timeline.js
dist/use-media-in-timeline.js.map
dist/use-media-playback.d.ts
dist/use-media-playback.d.ts.map
dist/use-media-playback.js
dist/use-media-playback.js.map
dist/use-media-tag-volume.d.ts
dist/use-media-tag-volume.d.ts.map
dist/use-media-tag-volume.js
dist/use-media-tag-volume.js.map
dist/use-sync-volume-with-media-tag.d.ts
dist/use-sync-volume-with-media-tag.d.ts.map
dist/use-sync-volume-with-media-tag.js
dist/use-sync-volume-with-media-tag.js.map
dist/validate-start-from-props.d.ts
dist/validate-start-from-props.d.ts.map
dist/validate-start-from-props.js
dist/validate-start-from-props.js.map
dist/video/get-current-time.d.ts
dist/video/get-current-time.d.ts.map
dist/video/get-current-time.js
dist/video/get-current-time.js.map
dist/volume-prop.d.ts
dist/volume-prop.d.ts.map
dist/volume-prop.js
dist/volume-prop.js.map

4

dist/audio/Audio.d.ts
import React from 'react';
import { RemotionAudioProps } from './props';
export declare const Audio: React.FC<RemotionAudioProps>;
import { RemotionAudioProps, RemotionMainAudioProps } from './props';
export declare const Audio: React.FC<RemotionAudioProps & RemotionMainAudioProps>;
//# sourceMappingURL=Audio.d.ts.map

11

dist/audio/Audio.js

@@ -5,5 +5,16 @@ "use strict";

const jsx_runtime_1 = require("react/jsx-runtime");
const sequencing_1 = require("../sequencing");
const validate_media_props_1 = require("../validate-media-props");
const validate_start_from_props_1 = require("../validate-start-from-props");
const AudioForDevelopment_1 = require("./AudioForDevelopment");
const AudioForRendering_1 = require("./AudioForRendering");
const Audio = (props) => {
const { startFrom, endAt, ...otherProps } = props;
if (typeof startFrom !== 'undefined' || typeof endAt !== 'undefined') {
validate_start_from_props_1.validateStartFromProps(startFrom, endAt);
const startFromFrameNo = startFrom !== null && startFrom !== void 0 ? startFrom : 0;
const endAtFrameNo = endAt !== null && endAt !== void 0 ? endAt : Infinity;
return (jsx_runtime_1.jsx(sequencing_1.Sequence, Object.assign({ layout: "none", from: 0 - startFromFrameNo, showInTimeline: false, durationInFrames: endAtFrameNo }, { children: jsx_runtime_1.jsx(exports.Audio, Object.assign({}, otherProps), void 0) }), void 0));
}
validate_media_props_1.validateMediaProps(props, 'Audio');
if (process.env.NODE_ENV === 'development') {

@@ -10,0 +21,0 @@ return jsx_runtime_1.jsx(AudioForDevelopment_1.AudioForDevelopment, Object.assign({}, props), void 0);

147

dist/audio/AudioForDevelopment.js

@@ -6,128 +6,29 @@ "use strict";

const react_1 = require("react");
const CompositionManager_1 = require("../CompositionManager");
const get_asset_file_name_1 = require("../get-asset-file-name");
const is_approximately_the_same_1 = require("../is-approximately-the-same");
const sequencing_1 = require("../sequencing");
const timeline_position_state_1 = require("../timeline-position-state");
const use_frame_1 = require("../use-frame");
const use_unsafe_video_config_1 = require("../use-unsafe-video-config");
const validate_media_props_1 = require("../validate-media-props");
const use_media_in_timeline_1 = require("../use-media-in-timeline");
const use_media_playback_1 = require("../use-media-playback");
const use_media_tag_volume_1 = require("../use-media-tag-volume");
const use_sync_volume_with_media_tag_1 = require("../use-sync-volume-with-media-tag");
const use_audio_frame_1 = require("./use-audio-frame");
const AudioForDevelopment = (props) => {
var _a, _b;
const audioRef = react_1.useRef(null);
const currentFrame = use_frame_1.useCurrentFrame();
const absoluteFrame = use_frame_1.useAbsoluteCurrentFrame();
const [actualVolume, setActualVolume] = react_1.useState(1);
const videoConfig = use_unsafe_video_config_1.useUnsafeVideoConfig();
const [playing] = timeline_position_state_1.usePlayingState();
const { isThumbnail, rootId } = react_1.useContext(timeline_position_state_1.TimelineContext);
const parentSequence = react_1.useContext(sequencing_1.SequenceContext);
const actualFrom = (_a = parentSequence === null || parentSequence === void 0 ? void 0 : parentSequence.from) !== null && _a !== void 0 ? _a : 0;
const { registerSequence, unregisterSequence } = react_1.useContext(CompositionManager_1.CompositionManager);
const [id] = react_1.useState(() => String(Math.random()));
validate_media_props_1.validateMediaProps(props, 'Audio');
const volumePropFrame = use_audio_frame_1.useFrameForVolumeProp();
const { volume, ...nativeProps } = props;
react_1.useEffect(() => {
if (!audioRef.current) {
return;
}
audioRef.current.volume = volume !== null && volume !== void 0 ? volume : 1;
}, [volume]);
react_1.useEffect(() => {
const ref = audioRef.current;
if (!ref) {
return;
}
if (ref.volume !== actualVolume) {
setActualVolume(ref.volume);
return;
}
const onChange = () => {
setActualVolume(ref.volume);
};
ref.addEventListener('volumechange', onChange);
return () => ref.removeEventListener('volumechange', onChange);
}, [actualVolume]);
const userPreferredVolume = (_b = props.volume) !== null && _b !== void 0 ? _b : 1;
react_1.useEffect(() => {
if (!is_approximately_the_same_1.isApproximatelyTheSame(userPreferredVolume, actualVolume) &&
audioRef.current) {
audioRef.current.volume = userPreferredVolume;
}
}, [actualVolume, props.volume, userPreferredVolume]);
react_1.useEffect(() => {
var _a, _b;
if (playing) {
(_a = audioRef.current) === null || _a === void 0 ? void 0 : _a.play();
}
else {
(_b = audioRef.current) === null || _b === void 0 ? void 0 : _b.pause();
}
}, [playing]);
react_1.useEffect(() => {
var _a;
if (!audioRef.current) {
return;
}
if (!videoConfig) {
return;
}
if (!props.src) {
throw new Error('No src passed');
}
const duration = parentSequence
? Math.min(parentSequence.durationInFrames, videoConfig.durationInFrames)
: videoConfig.durationInFrames;
registerSequence({
type: 'audio',
src: props.src,
id,
// TODO: Cap to audio duration
duration,
from: actualFrom,
parent: (_a = parentSequence === null || parentSequence === void 0 ? void 0 : parentSequence.id) !== null && _a !== void 0 ? _a : null,
displayName: get_asset_file_name_1.getAssetFileName(props.src),
isThumbnail,
rootId,
});
return () => unregisterSequence(id);
}, [
actualFrom,
id,
isThumbnail,
parentSequence,
props.src,
registerSequence,
rootId,
unregisterSequence,
videoConfig,
]);
react_1.useEffect(() => {
if (!audioRef.current) {
throw new Error('No audio ref found');
}
if (!videoConfig) {
throw new Error('No video config found. <Audio> must be placed inside a composition.');
}
const shouldBeTime = currentFrame / videoConfig.fps;
const isTime = audioRef.current.currentTime;
const timeShift = Math.abs(shouldBeTime - isTime);
if (timeShift > 0.5 &&
!audioRef.current.ended &&
shouldBeTime <= audioRef.current.currentTime) {
console.log('Time has shifted by', timeShift, 'sec. Fixing...');
// If scrubbing around, adjust timing
// or if time shift is bigger than 0.2sec
audioRef.current.currentTime = shouldBeTime;
}
if (!playing || absoluteFrame === 0) {
// If scrubbing around, adjust timing
// or if time shift is bigger than 0.2sec
audioRef.current.currentTime = shouldBeTime;
}
if (audioRef.current.paused && !audioRef.current.ended && playing) {
// Play audio
audioRef.current.play();
}
}, [absoluteFrame, currentFrame, playing, videoConfig]);
const actualVolume = use_media_tag_volume_1.useMediaTagVolume(audioRef);
use_sync_volume_with_media_tag_1.useSyncVolumeWithMediaTag({
volumePropFrame,
actualVolume,
volume,
mediaRef: audioRef,
});
use_media_in_timeline_1.useMediaInTimeline({
volume,
mediaRef: audioRef,
src: nativeProps.src,
mediaType: 'audio',
});
use_media_playback_1.useMediaPlayback({
mediaRef: audioRef,
src: nativeProps.src,
mediaType: 'audio',
});
return jsx_runtime_1.jsx("audio", Object.assign({ ref: audioRef }, nativeProps), void 0);

@@ -134,0 +35,0 @@ };

26

dist/audio/AudioForRendering.js

@@ -6,12 +6,14 @@ "use strict";

const CompositionManager_1 = require("../CompositionManager");
const is_remote_asset_1 = require("../is-remote-asset");
const random_1 = require("../random");
const sequencing_1 = require("../sequencing");
const use_frame_1 = require("../use-frame");
const validate_media_props_1 = require("../validate-media-props");
const volume_prop_1 = require("../volume-prop");
const use_audio_frame_1 = require("./use-audio-frame");
const AudioForRendering = (props) => {
const absoluteFrame = use_frame_1.useAbsoluteCurrentFrame();
const sequenceFrame = use_frame_1.useCurrentFrame();
const volumePropFrame = use_audio_frame_1.useFrameForVolumeProp();
const frame = use_frame_1.useCurrentFrame();
const sequenceContext = react_1.useContext(sequencing_1.SequenceContext);
const { registerAsset, unregisterAsset } = react_1.useContext(CompositionManager_1.CompositionManager);
validate_media_props_1.validateMediaProps(props, 'Audio');
// Generate a string that's as unique as possible for this asset

@@ -21,6 +23,9 @@ // but at the same time the same on all threads

var _a;
return `audio-${random_1.random((_a = props.src) !== null && _a !== void 0 ? _a : '')}-${sequenceContext === null || sequenceContext === void 0 ? void 0 : sequenceContext.from}-${sequenceContext === null || sequenceContext === void 0 ? void 0 : sequenceContext.durationInFrames}-muted:${props.muted}`;
return `audio-${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}-muted:${props.muted}`;
}, [props.muted, props.src, sequenceContext]);
const volume = volume_prop_1.evaluateVolume({
volume: props.volume,
frame: volumePropFrame,
});
react_1.useEffect(() => {
var _a;
if (!props.src) {

@@ -36,4 +41,6 @@ throw new Error('No src passed');

id,
sequenceFrame,
volume: (_a = props.volume) !== null && _a !== void 0 ? _a : 1,
frame: absoluteFrame,
volume,
isRemote: is_remote_asset_1.isRemoteAsset(props.src),
mediaFrame: frame,
});

@@ -48,4 +55,5 @@ return () => unregisterAsset(id);

unregisterAsset,
sequenceFrame,
props.volume,
volume,
volumePropFrame,
frame,
]);

@@ -52,0 +60,0 @@ return null;

7

dist/audio/props.d.ts
/// <reference types="react" />
import { VolumeProp } from '../volume-prop';
export declare type RemotionMainAudioProps = {
startFrom?: number;
endAt?: number;
};
export declare type RemotionAudioProps = Omit<React.DetailedHTMLProps<React.AudioHTMLAttributes<HTMLAudioElement>, HTMLAudioElement>, 'autoplay' | 'controls'> & {
volume?: number;
volume?: VolumeProp;
};
//# sourceMappingURL=props.d.ts.map

5

dist/Composition.js

@@ -25,5 +25,7 @@ "use strict";

const CompositionManager_1 = require("./CompositionManager");
const nonce_1 = require("./nonce");
const register_root_1 = require("./register-root");
const Composition = ({ width, height, fps, durationInFrames, id, defaultProps: props, ...compProps }) => {
const { registerComposition, unregisterComposition } = react_1.useContext(CompositionManager_1.CompositionManager);
const nonce = nonce_1.useNonce();
const lazy = react_1.useMemo(() => {

@@ -80,2 +82,3 @@ if ('lazyComponent' in compProps) {

props,
nonce,
});

@@ -90,2 +93,3 @@ if (register_root_1.getIsEvaluation()) {

width,
nonce,
});

@@ -107,2 +111,3 @@ }

width,
nonce,
]);

@@ -109,0 +114,0 @@ return null;

14

dist/CompositionManager.d.ts

@@ -10,2 +10,3 @@ /// <reference types="react" />

props?: T;
nonce: number;
};

@@ -18,5 +19,11 @@ export declare type TCompMetadata = Pick<TComposition, 'id' | 'height' | 'width' | 'fps' | 'durationInFrames'>;

src: string;
volume: string | number;
doesVolumeChange: boolean;
startMediaFrom: number;
} | {
type: 'video';
src: string;
volume: string | number;
startMediaFrom: number;
doesVolumeChange: boolean;
};

@@ -29,4 +36,5 @@ export declare type TSequence = {

parent: string | null;
isThumbnail: boolean;
rootId: string;
showInTimeline: boolean;
nonce: number;
} & EnhancedTSequenceData;

@@ -37,4 +45,6 @@ export declare type TAsset = {

id: string;
sequenceFrame: number;
frame: number;
volume: number;
isRemote: boolean;
mediaFrame: number;
};

@@ -41,0 +51,0 @@ export declare type RenderAssetInfo = {

2

dist/config/codec.d.ts

@@ -1,2 +0,2 @@

declare const validCodecs: readonly ["h264", "h265", "vp8", "vp9"];
declare const validCodecs: readonly ["h264", "h265", "vp8", "vp9", "mp3", "aac", "wav"];
export declare type Codec = typeof validCodecs[number];

@@ -3,0 +3,0 @@ export declare type CodecOrUndefined = Codec | undefined;

36

dist/config/codec.js
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.setCodec = exports.setOutputFormat = exports.getFinalOutputCodec = exports.DEFAULT_CODEC = exports.getOutputCodecOrUndefined = void 0;
const validCodecs = ['h264', 'h265', 'vp8', 'vp9'];
const validCodecs = [
'h264',
'h265',
'vp8',
'vp9',
'mp3',
'aac',
'wav',
];
const validLegacyFormats = ['mp4', 'png-sequence'];

@@ -21,6 +29,30 @@ let codec = undefined;

if (emitWarning) {
console.info('You have specified a .hevc extension, using it using H265 encoder.');
console.info('You have specified a .hevc extension, using the H265 encoder.');
}
return 'h265';
}
if (inputCodec === undefined && fileExtension === 'mp3') {
if (emitWarning) {
console.info('You have specified a .mp3 extension, using the MP3 encoder.');
}
return 'mp3';
}
if (inputCodec === undefined && fileExtension === 'wav') {
if (emitWarning) {
console.info('You have specified a .wav extension, using the WAV encoder.');
}
return 'wav';
}
if (inputCodec === undefined && fileExtension === 'aac') {
if (emitWarning) {
console.info('You have specified a .aac extension, using the AAC encoder.');
}
return 'aac';
}
if (inputCodec === undefined && fileExtension === 'm4a') {
if (emitWarning) {
console.info('You have specified a .m4a extension, using the AAC encoder.');
}
return 'aac';
}
return inputCodec !== null && inputCodec !== void 0 ? inputCodec : exports.DEFAULT_CODEC;

@@ -27,0 +59,0 @@ };

7

dist/config/crf.js
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.getActualCrf = exports.validateSelectedCrfAndCodecCombination = exports.getValidCrfRanges = exports.getDefaultCrfForCodec = exports.getCrfOrUndefined = exports.setCrf = void 0;
const is_audio_codec_1 = require("../is-audio-codec");
let currentCrf = undefined;

@@ -17,2 +18,5 @@ const setCrf = (newCrf) => {

const getDefaultCrfForCodec = (codec) => {
if (is_audio_codec_1.isAudioCodec(codec)) {
return 0;
}
if (codec === 'h264') {

@@ -34,2 +38,5 @@ return 18; // FFMPEG default 23

const getValidCrfRanges = (codec) => {
if (is_audio_codec_1.isAudioCodec(codec)) {
return [0, 0];
}
if (codec === 'h264') {

@@ -36,0 +43,0 @@ return [0, 51];

4

dist/config/image-format.d.ts
import { PixelFormat } from '.';
declare const validOptions: readonly ["png", "jpeg"];
declare const validOptions: readonly ["png", "jpeg", "none"];
export declare type ImageFormat = typeof validOptions[number];
export declare const setImageFormat: (format: ImageFormat) => void;
export declare const getUserPreferredImageFormat: () => "png" | "jpeg" | undefined;
export declare const getUserPreferredImageFormat: () => "png" | "jpeg" | "none" | undefined;
export declare const validateSelectedPixelFormatAndImageFormatCombination: (pixelFormat: PixelFormat, imageFormat: ImageFormat) => void;
export {};
//# sourceMappingURL=image-format.d.ts.map

5

dist/config/image-format.js
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.validateSelectedPixelFormatAndImageFormatCombination = exports.getUserPreferredImageFormat = exports.setImageFormat = void 0;
const validOptions = ['png', 'jpeg'];
const validOptions = ['png', 'jpeg', 'none'];
let currentImageFormat = undefined;

@@ -22,2 +22,5 @@ const setImageFormat = (format) => {

const validateSelectedPixelFormatAndImageFormatCombination = (pixelFormat, imageFormat) => {
if (imageFormat === 'none') {
return;
}
if (!validOptions.includes(imageFormat)) {

@@ -24,0 +27,0 @@ throw new TypeError(`Value ${imageFormat} is not valid as an image format.`);

8

dist/config/index.d.ts

@@ -28,3 +28,3 @@ import { Browser } from './browser';

*/
readonly setBrowserExecutable: (newBrowserExecutablePath: string | null) => void;
readonly setBrowserExecutable: (newBrowserExecutablePath: BrowserExecutable) => void;
};

@@ -36,3 +36,3 @@ readonly Rendering: {

*/
readonly setConcurrency: (newConcurrency: number | null) => void;
readonly setConcurrency: (newConcurrency: Concurrency) => void;
/**

@@ -48,3 +48,3 @@ * Set the JPEG quality for the frames.

*/
readonly setImageFormat: (format: "png" | "jpeg") => void;
readonly setImageFormat: (format: "png" | "jpeg" | "none") => void;
/**

@@ -61,3 +61,3 @@ * Render only a subset of a video.

* If the video file already exists, should Remotion overwrite
* the output? Default: false
* the output? Default: true
*/

@@ -64,0 +64,0 @@ readonly setOverwriteOutput: (newOverwrite: boolean) => void;

2

dist/config/index.js

@@ -65,3 +65,3 @@ "use strict";

* If the video file already exists, should Remotion overwrite
* the output? Default: false
* the output? Default: true
*/

@@ -68,0 +68,0 @@ setOverwriteOutput: overwrite_1.setOverwriteOutput,

1

dist/config/input-props.d.ts

@@ -0,2 +1,3 @@

export declare const INPUT_PROPS_KEY = "remotion.inputProps";
export declare const getInputProps: () => any;
//# sourceMappingURL=input-props.d.ts.map

7

dist/config/input-props.js
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.getInputProps = void 0;
exports.getInputProps = exports.INPUT_PROPS_KEY = void 0;
exports.INPUT_PROPS_KEY = 'remotion.inputProps';
const getInputProps = () => {
if (process.env.NODE_ENV === 'production') {
const param = new URLSearchParams(window.location.search).get('props');
const param = localStorage.getItem(exports.INPUT_PROPS_KEY);
if (!param) {
return {};
}
const parsed = JSON.parse(decodeURIComponent(param));
const parsed = JSON.parse(param);
return parsed;

@@ -12,0 +13,0 @@ }

2

dist/config/overwrite.js
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.getShouldOverwrite = exports.setOverwriteOutput = void 0;
let shouldOverwrite = false;
let shouldOverwrite = true;
const setOverwriteOutput = (newOverwrite) => {

@@ -6,0 +6,0 @@ if (typeof newOverwrite !== 'boolean') {

2

dist/feature-flags.d.ts
export declare const FEATURE_FLAG_FIREFOX_SUPPORT = false;
export declare const FEATURE_FLAG_V2_BREAKING_CHANGES = true;
export declare const FEATURE_FLAG_RICH_PREVIEWS = false;
//# sourceMappingURL=feature-flags.d.ts.map

9

dist/feature-flags.js
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.FEATURE_FLAG_RICH_PREVIEWS = exports.FEATURE_FLAG_V2_BREAKING_CHANGES = exports.FEATURE_FLAG_FIREFOX_SUPPORT = void 0;
exports.FEATURE_FLAG_FIREFOX_SUPPORT = void 0;
// There is no Firefox support yet, the waitForFunction method

@@ -8,9 +8,2 @@ // does not yet work and downloading has a bug.

exports.FEATURE_FLAG_FIREFOX_SUPPORT = false;
// Disable this to enter V1 mode and disable breaking changes
// Needed if making future 1.x releases
// See here https://github.com/JonnyBurger/remotion/issues/185 what
// the breaking changes are
exports.FEATURE_FLAG_V2_BREAKING_CHANGES = true;
// Mount extra instances of the video to allow for richer video preview
exports.FEATURE_FLAG_RICH_PREVIEWS = false;
//# sourceMappingURL=feature-flags.js.map

2

dist/IFrame.d.ts
import React from 'react';
export declare const IFrame: React.ForwardRefExoticComponent<Pick<React.DetailedHTMLProps<React.IframeHTMLAttributes<HTMLIFrameElement>, HTMLIFrameElement>, "id" | "height" | "width" | "children" | "key" | "src" | "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" | "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" | "onEnded" | "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" | "name" | "allow" | "allowFullScreen" | "allowTransparency" | "frameBorder" | "loading" | "marginHeight" | "marginWidth" | "referrerPolicy" | "sandbox" | "scrolling" | "seamless" | "srcDoc"> & React.RefAttributes<HTMLIFrameElement>>;
export declare const IFrame: React.ForwardRefExoticComponent<Pick<React.DetailedHTMLProps<React.IframeHTMLAttributes<HTMLIFrameElement>, HTMLIFrameElement>, "style" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "slot" | "spellCheck" | "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" | "onEnded" | "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" | "height" | "width" | "key" | "allow" | "allowFullScreen" | "allowTransparency" | "frameBorder" | "loading" | "marginHeight" | "marginWidth" | "name" | "referrerPolicy" | "sandbox" | "scrolling" | "seamless" | "src" | "srcDoc"> & React.RefAttributes<HTMLIFrameElement>>;
//# sourceMappingURL=IFrame.d.ts.map

2

dist/Img.d.ts
import React from 'react';
export declare const Img: React.ForwardRefExoticComponent<Pick<React.DetailedHTMLProps<React.ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, "id" | "height" | "width" | "children" | "key" | "crossOrigin" | "src" | "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" | "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" | "onEnded" | "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" | "loading" | "referrerPolicy" | "alt" | "decoding" | "sizes" | "srcSet" | "useMap"> & React.RefAttributes<HTMLImageElement>>;
export declare const Img: React.ForwardRefExoticComponent<Pick<React.DetailedHTMLProps<React.ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, "style" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "slot" | "spellCheck" | "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" | "onEnded" | "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" | "height" | "width" | "key" | "loading" | "referrerPolicy" | "src" | "alt" | "crossOrigin" | "decoding" | "sizes" | "srcSet" | "useMap"> & React.RefAttributes<HTMLImageElement>>;
//# sourceMappingURL=Img.d.ts.map

28

dist/internals.d.ts

@@ -16,7 +16,7 @@ /// <reference types="react" />

getRoot: () => import("react").FC<{}> | null;
getBrowserExecutable: () => string | null;
getCompositionName: () => string;
getBrowserExecutable: () => import("./config/browser-executable").BrowserExecutable;
getCompositionName: () => import("./config/browser-executable").BrowserExecutable;
getIsEvaluation: () => boolean;
getPixelFormat: () => "yuv420p" | "yuva420p" | "yuv422p" | "yuv444p" | "yuv420p10le" | "yuv422p10le" | "yuv444p10le";
getConcurrency: () => number | null;
getConcurrency: () => import("./config/concurrency").Concurrency;
getRange: () => number | [number, number] | null;

@@ -28,27 +28,27 @@ getShouldOverwrite: () => boolean;

getShouldOutputImageSequence: () => boolean;
validateSelectedCrfAndCodecCombination: (crf: number, codec: "h264" | "h265" | "vp8" | "vp9") => void;
validateSelectedCrfAndCodecCombination: (crf: number, codec: "h264" | "h265" | "vp8" | "vp9" | "mp3" | "aac" | "wav") => void;
getFinalOutputCodec: ({ codec: inputCodec, fileExtension, emitWarning, }: {
codec: import("./config/codec").CodecOrUndefined;
fileExtension: string | null;
fileExtension: import("./config/browser-executable").BrowserExecutable;
emitWarning: boolean;
}) => "h264" | "h265" | "vp8" | "vp9";
DEFAULT_CODEC: "h264" | "h265" | "vp8" | "vp9";
}) => "h264" | "h265" | "vp8" | "vp9" | "mp3" | "aac" | "wav";
DEFAULT_CODEC: "h264" | "h265" | "vp8" | "vp9" | "mp3" | "aac" | "wav";
DEFAULT_PIXEL_FORMAT: "yuv420p" | "yuva420p" | "yuv422p" | "yuv444p" | "yuv420p10le" | "yuv422p10le" | "yuv444p10le";
FEATURE_FLAG_FIREFOX_SUPPORT: boolean;
DEFAULT_WEBPACK_CACHE_ENABLED: boolean;
FEATURE_FLAG_V2_BREAKING_CHANGES: boolean;
FEATURE_FLAG_RICH_PREVIEWS: boolean;
getBrowser: () => "chrome" | "firefox" | null;
DEFAULT_BROWSER: import("./config/browser").Browser;
getDefaultCrfForCodec: (codec: "h264" | "h265" | "vp8" | "vp9") => number;
getActualCrf: (codec: "h264" | "h265" | "vp8" | "vp9") => number;
getDefaultCrfForCodec: (codec: "h264" | "h265" | "vp8" | "vp9" | "mp3" | "aac" | "wav") => number;
getActualCrf: (codec: "h264" | "h265" | "vp8" | "vp9" | "mp3" | "aac" | "wav") => number;
setFrameRangeFromCli: (newFrameRange: string | number) => void;
getUserPreferredImageFormat: () => "png" | "jpeg" | undefined;
validateSelectedPixelFormatAndImageFormatCombination: (pixelFormat: "yuv420p" | "yuva420p" | "yuv422p" | "yuv444p" | "yuv420p10le" | "yuv422p10le" | "yuv444p10le", imageFormat: "png" | "jpeg") => void;
validateSelectedPixelFormatAndCodecCombination: (pixelFormat: "yuv420p" | "yuva420p" | "yuv422p" | "yuv444p" | "yuv420p10le" | "yuv422p10le" | "yuv444p10le", codec: "h264" | "h265" | "vp8" | "vp9") => void;
getUserPreferredImageFormat: () => "png" | "jpeg" | "none" | undefined;
validateSelectedPixelFormatAndImageFormatCombination: (pixelFormat: "yuv420p" | "yuva420p" | "yuv422p" | "yuv444p" | "yuv420p10le" | "yuv422p10le" | "yuv444p10le", imageFormat: "png" | "jpeg" | "none") => void;
validateSelectedPixelFormatAndCodecCombination: (pixelFormat: "yuv420p" | "yuva420p" | "yuv422p" | "yuv444p" | "yuv420p10le" | "yuv422p10le" | "yuv444p10le", codec: "h264" | "h265" | "vp8" | "vp9" | "mp3" | "aac" | "wav") => void;
validateFrameRange: (frameRange: number | [number, number] | null) => void;
getWebpackCaching: () => boolean;
truthy: typeof truthy;
isAudioCodec: (codec: import("./config/codec").CodecOrUndefined) => boolean;
INPUT_PROPS_KEY: string;
};
export type { TComposition, Timeline, TCompMetadata, TSequence, WebpackOverrideFn, TAsset, RenderAssetInfo, TimelineContextValue, };
//# sourceMappingURL=internals.d.ts.map

6

dist/internals.js

@@ -32,2 +32,3 @@ "use strict";

const image_sequence_1 = require("./config/image-sequence");
const input_props_1 = require("./config/input-props");
const override_webpack_1 = require("./config/override-webpack");

@@ -39,2 +40,3 @@ const overwrite_1 = require("./config/overwrite");

const feature_flags_1 = require("./feature-flags");
const is_audio_codec_1 = require("./is-audio-codec");
const perf = __importStar(require("./perf"));

@@ -74,4 +76,2 @@ const register_root_1 = require("./register-root");

DEFAULT_WEBPACK_CACHE_ENABLED: webpack_caching_1.DEFAULT_WEBPACK_CACHE_ENABLED,
FEATURE_FLAG_V2_BREAKING_CHANGES: feature_flags_1.FEATURE_FLAG_V2_BREAKING_CHANGES,
FEATURE_FLAG_RICH_PREVIEWS: feature_flags_1.FEATURE_FLAG_RICH_PREVIEWS,
getBrowser: browser_1.getBrowser,

@@ -88,3 +88,5 @@ DEFAULT_BROWSER: browser_1.DEFAULT_BROWSER,

truthy: truthy_1.truthy,
isAudioCodec: is_audio_codec_1.isAudioCodec,
INPUT_PROPS_KEY: input_props_1.INPUT_PROPS_KEY,
};
//# sourceMappingURL=internals.js.map

2

dist/register-root.d.ts

@@ -7,4 +7,4 @@ import React from 'react';

export declare const removeStaticComposition: (id: string) => void;
export declare const getCompositionName: () => string;
export declare const getCompositionName: () => string | null;
export declare const getIsEvaluation: () => boolean;
//# sourceMappingURL=register-root.d.ts.map

2

dist/register-root.js

@@ -34,3 +34,3 @@ "use strict";

}
throw new Error('No comp name specified in URL');
return null;
};

@@ -37,0 +37,0 @@ exports.getCompositionName = getCompositionName;

23

dist/RemotionRoot.js

@@ -7,2 +7,3 @@ "use strict";

const CompositionManager_1 = require("./CompositionManager");
const nonce_1 = require("./nonce");
const random_1 = require("./random");

@@ -21,2 +22,3 @@ const ready_manager_1 = require("./ready-manager");

const [playing, setPlaying] = react_1.useState(false);
const [fastRefreshes, setFastRefreshes] = react_1.useState(0);
react_1.useLayoutEffect(() => {

@@ -44,3 +46,3 @@ if (typeof window !== 'undefined') {

}
return [...comps, comp];
return [...comps, comp].slice().sort((a, b) => a.nonce - b.nonce);
});

@@ -101,3 +103,2 @@ }, []);

playing,
isThumbnail: false,
rootId: remotionRootId,

@@ -112,5 +113,21 @@ };

}, []);
return (jsx_runtime_1.jsx(timeline_position_state_1.TimelineContext.Provider, Object.assign({ value: timelineContextValue }, { children: jsx_runtime_1.jsx(timeline_position_state_1.SetTimelineContext.Provider, Object.assign({ value: setTimelineContextValue }, { children: jsx_runtime_1.jsx(CompositionManager_1.CompositionManager.Provider, Object.assign({ value: contextValue }, { children: children }), void 0) }), void 0) }), void 0));
const nonceContext = react_1.useMemo(() => {
let counter = 0;
return {
getNonce: () => counter++,
fastRefreshes,
};
}, [fastRefreshes]);
react_1.useEffect(() => {
if (module.hot) {
module.hot.addStatusHandler((status) => {
if (status === 'idle') {
setFastRefreshes((i) => i + 1);
}
});
}
}, []);
return (jsx_runtime_1.jsx(nonce_1.NonceContext.Provider, Object.assign({ value: nonceContext }, { children: jsx_runtime_1.jsx(timeline_position_state_1.TimelineContext.Provider, Object.assign({ value: timelineContextValue }, { children: jsx_runtime_1.jsx(timeline_position_state_1.SetTimelineContext.Provider, Object.assign({ value: setTimelineContextValue }, { children: jsx_runtime_1.jsx(CompositionManager_1.CompositionManager.Provider, Object.assign({ value: contextValue }, { children: children }), void 0) }), void 0) }), void 0) }), void 0));
};
exports.RemotionRoot = RemotionRoot;
//# sourceMappingURL=RemotionRoot.js.map

5

dist/sequencing/index.d.ts
import React from 'react';
declare type SequenceContextType = {
from: number;
cumulatedFrom: number;
relativeFrom: number;
parentFrom: number;
durationInFrames: number;

@@ -14,4 +16,5 @@ id: string;

layout?: 'absolute-fill' | 'none';
showInTimeline?: boolean;
}>;
export {};
//# sourceMappingURL=index.d.ts.map

61

dist/sequencing/index.js

@@ -7,22 +7,19 @@ "use strict";

const CompositionManager_1 = require("../CompositionManager");
const feature_flags_1 = require("../feature-flags");
const get_timeline_clip_name_1 = require("../get-timeline-clip-name");
const nonce_1 = require("../nonce");
const timeline_position_state_1 = require("../timeline-position-state");
const use_frame_1 = require("../use-frame");
const use_video_config_1 = require("../use-video-config");
const use_unsafe_video_config_1 = require("../use-unsafe-video-config");
exports.SequenceContext = react_1.createContext(null);
const Sequence = ({ from, durationInFrames, children, name, layout = 'absolute-fill' }) => {
var _a;
const Sequence = ({ from, durationInFrames, children, name, layout = 'absolute-fill', showInTimeline = true, }) => {
const [id] = react_1.useState(() => String(Math.random()));
const absoluteFrame = use_frame_1.useAbsoluteCurrentFrame();
const parentSequence = react_1.useContext(exports.SequenceContext);
const { isThumbnail, rootId } = react_1.useContext(timeline_position_state_1.TimelineContext);
const actualFrom = ((_a = parentSequence === null || parentSequence === void 0 ? void 0 : parentSequence.from) !== null && _a !== void 0 ? _a : 0) + from;
const { durationInFrames: compositionDuration } = use_video_config_1.useVideoConfig();
const actualDurationInFrames = Math.min(compositionDuration - from, parentSequence
? Math.min(parentSequence.durationInFrames + parentSequence.from - actualFrom, durationInFrames)
: durationInFrames);
const { registerSequence, unregisterSequence } = react_1.useContext(CompositionManager_1.CompositionManager);
const { rootId } = react_1.useContext(timeline_position_state_1.TimelineContext);
const cumulatedFrom = parentSequence
? parentSequence.cumulatedFrom + parentSequence.relativeFrom
: 0;
const actualFrom = cumulatedFrom + from;
const nonce = nonce_1.useNonce();
if (layout !== 'absolute-fill' && layout !== 'none') {
throw new TypeError(`The layout prop of <Composition /> expects either "absolute-fill" or "none", but you passed: ${layout}`);
throw new TypeError(`The layout prop of <Sequence /> expects either "absolute-fill" or "none", but you passed: ${layout}`);
}

@@ -38,9 +35,29 @@ if (typeof durationInFrames !== 'number') {

}
const absoluteFrame = use_frame_1.useAbsoluteCurrentFrame();
const unsafeVideoConfig = use_unsafe_video_config_1.useUnsafeVideoConfig();
const compositionDuration = unsafeVideoConfig
? unsafeVideoConfig.durationInFrames
: 0;
const actualDurationInFrames = Math.min(compositionDuration - from, parentSequence
? Math.min(parentSequence.durationInFrames +
(parentSequence.cumulatedFrom + parentSequence.relativeFrom) -
actualFrom, durationInFrames)
: durationInFrames);
const { registerSequence, unregisterSequence } = react_1.useContext(CompositionManager_1.CompositionManager);
const contextValue = react_1.useMemo(() => {
var _a;
return {
from: actualFrom,
cumulatedFrom,
relativeFrom: from,
durationInFrames: actualDurationInFrames,
parentFrom: (_a = parentSequence === null || parentSequence === void 0 ? void 0 : parentSequence.relativeFrom) !== null && _a !== void 0 ? _a : 0,
id,
};
}, [actualDurationInFrames, actualFrom, id]);
}, [
cumulatedFrom,
from,
actualDurationInFrames,
parentSequence === null || parentSequence === void 0 ? void 0 : parentSequence.relativeFrom,
id,
]);
const timelineClipName = react_1.useMemo(() => {

@@ -52,3 +69,3 @@ return name !== null && name !== void 0 ? name : get_timeline_clip_name_1.getTimelineClipName(children);

registerSequence({
from: actualFrom,
from,
duration: actualDurationInFrames,

@@ -59,4 +76,5 @@ id,

type: 'sequence',
isThumbnail,
rootId,
showInTimeline,
nonce,
});

@@ -75,11 +93,10 @@ return () => {

parentSequence === null || parentSequence === void 0 ? void 0 : parentSequence.id,
isThumbnail,
actualDurationInFrames,
rootId,
from,
showInTimeline,
nonce,
]);
const endThreshold = (() => {
if (feature_flags_1.FEATURE_FLAG_V2_BREAKING_CHANGES) {
return actualFrom + durationInFrames - 1;
}
return actualFrom + durationInFrames;
return actualFrom + durationInFrames - 1;
})();

@@ -86,0 +103,0 @@ const content = absoluteFrame < actualFrom

8

dist/spring.d.ts

@@ -1,7 +0,1 @@

declare type AnimationNode = {
lastTimestamp: number;
toValue: number;
current: number;
velocity: number;
};
export declare type SpringConfig = {

@@ -13,3 +7,2 @@ damping: number;

};
export declare function advance(animation: AnimationNode, now: number, config: SpringConfig): AnimationNode;
export declare function spring({ from, to, frame, fps, config, }: {

@@ -22,3 +15,2 @@ from?: number;

}): number;
export {};
//# sourceMappingURL=spring.d.ts.map

3

dist/spring.js
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.spring = exports.advance = void 0;
exports.spring = void 0;
const defaultSpringConfig = {

@@ -50,3 +50,2 @@ damping: 10,

}
exports.advance = advance;
function spring({ from = 0, to = 1, frame, fps, config = {}, }) {

@@ -53,0 +52,0 @@ let animation = {

32

dist/test/codec.test.js

@@ -6,4 +6,4 @@ "use strict";

test('Codec tests valid codec input', () => {
const values = ['h264', 'h265', 'vp8', 'vp9'];
values.forEach((entry) => expect(codec_1.getFinalOutputCodec({ codec: entry, emitWarning: false, fileExtension: '' })).toEqual(entry));
const validCodecInput = ['h264', 'h265', 'vp8', 'vp9'];
validCodecInput.forEach((entry) => expect(codec_1.getFinalOutputCodec({ codec: entry, emitWarning: false, fileExtension: '' })).toEqual(entry));
});

@@ -23,17 +23,21 @@ test('Codec tests undefined codec input with known extension', () => {

test('Codec tests undefined codec input with unknown extension', () => {
expect(codec_1.getFinalOutputCodec({
codec: undefined,
emitWarning: false,
fileExtension: '',
})).toEqual('h264');
expect(codec_1.getFinalOutputCodec({
codec: undefined,
emitWarning: false,
fileExtension: 'abc',
})).toEqual('h264');
const unknownExtensions = ['', 'abc'];
unknownExtensions.forEach((entry) => {
expect(codec_1.getFinalOutputCodec({
codec: undefined,
emitWarning: false,
fileExtension: entry,
})).toEqual('h264');
});
});
// setCodec
test('Codec tests setOutputFormat', () => {
const values = ['h264', 'h265', 'vp8', 'vp9', undefined];
values.forEach((entry) => {
const validCodecInputs = [
'h264',
'h265',
'vp8',
'vp9',
undefined,
];
validCodecInputs.forEach((entry) => {
codec_1.setCodec(entry);

@@ -40,0 +44,0 @@ expect(codec_1.getOutputCodecOrUndefined()).toEqual(entry);

48

dist/test/crf.test.js

@@ -5,5 +5,5 @@ "use strict";

const expect_to_throw_1 = require("./expect-to-throw");
test('crf tests getDefaultCrfForCodec', () => {
test('crf tests getDefaultCrfForCodec valid input', () => {
// input codec, output
const valuesA = [
const validCodecIOs = [
['h264', 18],

@@ -14,12 +14,14 @@ ['h265', 23],

];
valuesA.forEach((entry) => expect(crf_1.getDefaultCrfForCodec(entry[0])).toEqual(entry[1]));
validCodecIOs.forEach((entry) => expect(crf_1.getDefaultCrfForCodec(entry[0])).toEqual(entry[1]));
});
test('crf tests getDefaultCrfForCodec invalid input', () => {
// input codec
const valuesB = ['abc', '', 3, undefined];
valuesB.forEach((entry) => expect_to_throw_1.expectToThrow(
const invalidCodecs = ['abc', '', 3, undefined];
invalidCodecs.forEach((entry) => expect_to_throw_1.expectToThrow(
// @ts-expect-error
() => crf_1.getDefaultCrfForCodec(entry), new RegExp(`Got unexpected codec "${entry}"`)));
});
test('crf tests getValidCrfRanges', () => {
test('crf tests getValidCrfRanges valid input', () => {
// input crf, input codec, valid range
const valuesA = [
const validInputs = [
['h264', [0, 51]],

@@ -30,12 +32,14 @@ ['h265', [0, 51]],

];
valuesA.forEach((entry) => expect(crf_1.getValidCrfRanges(entry[0])).toEqual(entry[1]));
validInputs.forEach((entry) => expect(crf_1.getValidCrfRanges(entry[0])).toEqual(entry[1]));
});
test('crf tests getValidCrfRanges invalid input', () => {
// input codec
const valuesB = ['abc', '', 3, undefined];
valuesB.forEach((entry) => expect_to_throw_1.expectToThrow(
const invalidInputs = ['abc', '', 3, undefined];
invalidInputs.forEach((entry) => expect_to_throw_1.expectToThrow(
// @ts-expect-error
() => crf_1.getValidCrfRanges(entry), new RegExp(`Got unexpected codec "${entry}"`)));
});
test('validateSelectedCrfAndCodecCombination', () => {
test('validateSelectedCrfAndCodecCombination valid input', () => {
// input crf, input codec
const valuesA = [
const validInputs = [
[20, 'h264'],

@@ -54,5 +58,7 @@ [0, 'h264'],

];
valuesA.forEach((entry) => expect(() => crf_1.validateSelectedCrfAndCodecCombination(entry[0], entry[1])).not.toThrow());
validInputs.forEach((entry) => expect(() => crf_1.validateSelectedCrfAndCodecCombination(entry[0], entry[1])).not.toThrow());
});
test('validateSelectedCrfAndCodecCombination invalid input', () => {
// input crf, input codec, valid range
const valuesB = [
const invalidInputs = [
[80, 'h264', [0, 51]],

@@ -71,7 +77,7 @@ [-1, 'h264', [0, 51]],

];
valuesB.forEach((entry) => expect_to_throw_1.expectToThrow(() => crf_1.validateSelectedCrfAndCodecCombination(entry[0], entry[1]), new RegExp(`CRF must be between ${entry[2][0]} and ${entry[2][1]} for codec ${entry[1]}. Passed: ${entry[0]}`)));
invalidInputs.forEach((entry) => expect_to_throw_1.expectToThrow(() => crf_1.validateSelectedCrfAndCodecCombination(entry[0], entry[1]), new RegExp(`CRF must be between ${entry[2][0]} and ${entry[2][1]} for codec ${entry[1]}. Passed: ${entry[0]}`)));
});
test('get crf', () => {
test('get crf valid input', () => {
// input crf, input codec, output crf
const valuesA = [
const validInputs = [
[20, 'h264', 20],

@@ -86,8 +92,10 @@ [undefined, 'h264', 18],

];
valuesA.forEach((entry) => {
validInputs.forEach((entry) => {
crf_1.setCrf(entry[0]);
expect(crf_1.getActualCrf(entry[1])).toEqual(entry[2]);
});
});
test('get crf invalid input', () => {
// input crf, input codec, valid range
const valuesB = [
const invalidInputs = [
[80, 'h264', [0, 51]],

@@ -98,3 +106,3 @@ [80, 'h265', [0, 51]],

];
valuesB.forEach((entry) => {
invalidInputs.forEach((entry) => {
crf_1.setCrf(entry[0]);

@@ -101,0 +109,0 @@ expect_to_throw_1.expectToThrow(() => crf_1.getActualCrf(entry[1]), new RegExp(`CRF must be between ${entry[2][0]} and ${entry[2][1]} for codec ${entry[1]}. Passed: ${entry[0]}`));

143

dist/test/easing.test.js

@@ -5,11 +5,17 @@ "use strict";

const numbersToTest = [0, 0.4, 0.5, 0.7, 1];
test('Easing linear', () => {
const easingIn = easing_1.Easing.in(easing_1.Easing.linear);
numbersToTest.forEach((n) => expect(easingIn(n)).toBe(n));
const easingOut = easing_1.Easing.out(easing_1.Easing.linear);
numbersToTest.forEach((n) => expect(easingOut(n)).toBe(n));
const easingInOut = easing_1.Easing.inOut(easing_1.Easing.linear);
numbersToTest.forEach((n) => expect(easingInOut(n)).toBe(n));
describe('Easing linear', () => {
test('Easing In', () => {
const easingIn = easing_1.Easing.in(easing_1.Easing.linear);
numbersToTest.forEach((n) => expect(easingIn(n)).toBe(n));
});
test('Easing In Out', () => {
const easingOut = easing_1.Easing.out(easing_1.Easing.linear);
numbersToTest.forEach((n) => expect(easingOut(n)).toBe(n));
});
test('Easing Out', () => {
const easingInOut = easing_1.Easing.inOut(easing_1.Easing.linear);
numbersToTest.forEach((n) => expect(easingInOut(n)).toBe(n));
});
});
test('Easing Quadratic', () => {
describe('Easing Quadratic', () => {
const quad = (n) => n * n;

@@ -24,10 +30,16 @@ const out = (n) => 1 - quad(1 - n);

};
const easingIn = easing_1.Easing.in(easing_1.Easing.quad);
numbersToTest.forEach((n) => expect(easingIn(n)).toBe(quad(n)));
const easingOut = easing_1.Easing.out(easing_1.Easing.quad);
numbersToTest.forEach((n) => expect(easingOut(n)).toBe(out(n)));
const easingInOut = easing_1.Easing.inOut(easing_1.Easing.quad);
numbersToTest.forEach((n) => expect(easingInOut(n)).toBe(inOut(n)));
test('Easing In', () => {
const easingIn = easing_1.Easing.in(easing_1.Easing.quad);
numbersToTest.forEach((n) => expect(easingIn(n)).toBe(quad(n)));
});
test('Easing In Out', () => {
const easingOut = easing_1.Easing.out(easing_1.Easing.quad);
numbersToTest.forEach((n) => expect(easingOut(n)).toBe(out(n)));
});
test('Easing Out', () => {
const easingInOut = easing_1.Easing.inOut(easing_1.Easing.quad);
numbersToTest.forEach((n) => expect(easingInOut(n)).toBe(inOut(n)));
});
});
test('Easing Cubic', () => {
describe('Easing Cubic', () => {
const cubic = (n) => n * n * n;

@@ -42,9 +54,98 @@ const out = (n) => 1 - cubic(1 - n);

};
const easingIn = easing_1.Easing.in(easing_1.Easing.cubic);
numbersToTest.forEach((n) => expect(easingIn(n)).toBe(cubic(n)));
const easingOut = easing_1.Easing.out(easing_1.Easing.cubic);
numbersToTest.forEach((n) => expect(easingOut(n)).toBe(out(n)));
const easingInOut = easing_1.Easing.inOut(easing_1.Easing.cubic);
numbersToTest.forEach((n) => expect(easingInOut(n)).toBe(inOut(n)));
test('Easing In', () => {
const easingIn = easing_1.Easing.in(easing_1.Easing.cubic);
numbersToTest.forEach((n) => expect(easingIn(n)).toBe(cubic(n)));
});
test('Easing In Out', () => {
const easingOut = easing_1.Easing.out(easing_1.Easing.cubic);
numbersToTest.forEach((n) => expect(easingOut(n)).toBe(out(n)));
});
test('Easing Out', () => {
const easingInOut = easing_1.Easing.inOut(easing_1.Easing.cubic);
numbersToTest.forEach((n) => expect(easingInOut(n)).toBe(inOut(n)));
});
});
describe('Easing Circle', () => {
const circle = (n) => 1 - Math.sqrt(1 - n * n);
const out = (n) => 1 - circle(1 - n);
const inOut = (n) => {
if (n >= 0.5) {
return 1 - circle((1 - n) * 2) / 2;
}
else
return circle(n * 2) / 2;
};
test('Easing In', () => {
const easingIn = easing_1.Easing.in(easing_1.Easing.circle);
numbersToTest.forEach((n) => expect(easingIn(n)).toBe(circle(n)));
});
test('Easing In Out', () => {
const easingOut = easing_1.Easing.out(easing_1.Easing.circle);
numbersToTest.forEach((n) => expect(easingOut(n)).toBe(out(n)));
});
test('Easing Out', () => {
const easingInOut = easing_1.Easing.inOut(easing_1.Easing.circle);
numbersToTest.forEach((n) => expect(easingInOut(n)).toBe(inOut(n)));
});
});
describe('Easing Exp', () => {
const exp = (n) => Math.pow(2, 10 * (n - 1));
const out = (n) => 1 - exp(1 - n);
const inOut = (n) => {
if (n >= 0.5) {
return 1 - exp((1 - n) * 2) / 2;
}
else
return exp(n * 2) / 2;
};
test('Easing In', () => {
const easingIn = easing_1.Easing.in(easing_1.Easing.exp);
numbersToTest.forEach((n) => expect(easingIn(n)).toBe(exp(n)));
});
test('Easing In Out', () => {
const easingOut = easing_1.Easing.out(easing_1.Easing.exp);
numbersToTest.forEach((n) => expect(easingOut(n)).toBe(out(n)));
});
test('Easing Out', () => {
const easingInOut = easing_1.Easing.inOut(easing_1.Easing.exp);
numbersToTest.forEach((n) => expect(easingInOut(n)).toBe(inOut(n)));
});
});
describe('Easing Bounce', () => {
const bounce = (n) => {
if (n < 1 / 2.75) {
return 7.5625 * n * n;
}
if (n < 2 / 2.75) {
const t2_ = n - 1.5 / 2.75;
return 7.5625 * t2_ * t2_ + 0.75;
}
if (n < 2.5 / 2.75) {
const t2_ = n - 2.25 / 2.75;
return 7.5625 * t2_ * t2_ + 0.9375;
}
const t2 = n - 2.625 / 2.75;
return 7.5625 * t2 * t2 + 0.984375;
};
const out = (n) => 1 - bounce(1 - n);
const inOut = (n) => {
if (n >= 0.5) {
return 1 - bounce((1 - n) * 2) / 2;
}
else
return bounce(n * 2) / 2;
};
test('Easing In', () => {
const easingIn = easing_1.Easing.in(easing_1.Easing.bounce);
numbersToTest.forEach((n) => expect(easingIn(n)).toBe(bounce(n)));
});
test('Easing In Out', () => {
const easingOut = easing_1.Easing.out(easing_1.Easing.bounce);
numbersToTest.forEach((n) => expect(easingOut(n)).toBe(out(n)));
});
test('Easing Out', () => {
const easingInOut = easing_1.Easing.inOut(easing_1.Easing.bounce);
numbersToTest.forEach((n) => expect(easingInOut(n)).toBe(inOut(n)));
});
});
//# sourceMappingURL=easing.test.js.map

46

dist/test/interpolate.test.js

@@ -62,20 +62,25 @@ "use strict";

test('Extrapolation left test', () => {
expect(interpolate_1.interpolate(-3, [0, 1, 2], [0, 0.5, 1], {
extrapolateRight: 'extend',
})).toEqual(-1.5);
expect(interpolate_1.interpolate(-3, [0, 1, 2], [0, 0.5, 1])).toEqual(-1.5);
const testValues = ['extend', undefined];
testValues.forEach((entry) => {
expect(interpolate_1.interpolate(-3, [0, 1, 2], [0, 0.5, 1], {
extrapolateRight: entry,
})).toEqual(-1.5);
});
});
test('Extrapolation right test', () => {
expect(interpolate_1.interpolate(3, [0, 1, 2], [0, 0.5, 1], {
extrapolateRight: 'extend',
})).toEqual(1.5);
expect(interpolate_1.interpolate(3, [0, 1, 2], [0, 0.5, 1])).toEqual(1.5);
const testValues = ['extend', undefined];
testValues.forEach((entry) => {
expect(interpolate_1.interpolate(3, [0, 1, 2], [0, 0.5, 1], {
extrapolateRight: entry,
})).toEqual(1.5);
});
});
test('Extrapolation identity', () => {
expect(interpolate_1.interpolate(1000, [0, 1, 2], [0, 2, 4], {
extrapolateRight: 'identity',
})).toBe(1000);
expect(interpolate_1.interpolate(-1000, [0, 1, 2], [0, 2, 4], {
extrapolateLeft: 'identity',
})).toBe(-1000);
const testValues = [
[1000, { extrapolateRight: 'identity' }],
[-1000, { extrapolateLeft: 'identity' }],
];
testValues.forEach((entry) => {
expect(interpolate_1.interpolate(entry[0], [0, 1, 2], [0, 2, 4], entry[1])).toBe(entry[0]);
});
});

@@ -93,6 +98,11 @@ test('Clamp right test', () => {

test('Zig-zag test', () => {
expect(interpolate_1.interpolate(3.5, [1, 2, 3, 4, 5], [0, 1000, 0, -1000, 1000])).toBe(-500);
expect(interpolate_1.interpolate(4, [1, 2, 3, 4, 5], [0, 1000, 0, -1000, 1000])).toBe(-1000);
expect(interpolate_1.interpolate(6, [1, 2, 3, 4, 5], [0, 1000, 0, -1000, 1000])).toBe(3000);
expect(interpolate_1.interpolate(-0.1, [1, 2, 3, 4, 5], [0, 1000, 0, -1000, 1000])).toBe(-1100);
const testValues = [
[3.5, -500],
[4, -1000],
[6, 3000],
[-0.1, -1100],
];
testValues.forEach((entry) => {
expect(interpolate_1.interpolate(entry[0], [1, 2, 3, 4, 5], [0, 1000, 0, -1000, 1000])).toBe(entry[1]);
});
});

@@ -99,0 +109,0 @@ test('Handle bad types', () => {

5

dist/test/media-validation.test.js

@@ -40,2 +40,3 @@ "use strict";

id: 'markup',
nonce: 0,
component: react_2.default.lazy(() => Promise.resolve({

@@ -56,6 +57,6 @@ default: (() => null),

test('It should not allow an audio element to have a wrong type', () => {
expect_to_throw_1.expectToThrow(() => react_1.render(jsx_runtime_1.jsx(Wrapper, { children: jsx_runtime_1.jsx(audio_1.Audio, { src: "hi", volume: "wrong" }, void 0) }, void 0)), /You have passed a volume of type string to your <Audio \/> component. Volume must be a number or undefined./);
expect_to_throw_1.expectToThrow(() => react_1.render(jsx_runtime_1.jsx(Wrapper, { children: jsx_runtime_1.jsx(audio_1.Audio, { src: "hi", volume: "wrong" }, void 0) }, void 0)), /You have passed a volume of type string to your <Audio \/> component. Volume must be a number or a function/);
});
test('It should not allow an video element to have a wrong type', () => {
expect_to_throw_1.expectToThrow(() => react_1.render(jsx_runtime_1.jsx(Wrapper, { children: jsx_runtime_1.jsx(video_1.Video, { src: "hi", volume: "wrong" }, void 0) }, void 0)), /You have passed a volume of type string to your <Video \/> component. Volume must be a number or undefined./);
expect_to_throw_1.expectToThrow(() => react_1.render(jsx_runtime_1.jsx(Wrapper, { children: jsx_runtime_1.jsx(video_1.Video, { src: "hi", volume: "wrong" }, void 0) }, void 0)), /You have passed a volume of type string to your <Video \/> component. Volume must be a number or a function/);
});

@@ -62,0 +63,0 @@ test('It should allow a valid volume', () => {

62

dist/test/nested-sequences.test.js

@@ -20,8 +20,68 @@ "use strict";

const { queryByText } = react_1.render(jsx_runtime_1.jsx(timeline_position_state_1.TimelineContext.Provider, Object.assign({ value: {
rootId: 'hi',
frame: 40,
playing: false,
isThumbnail: false,
} }, { children: jsx_runtime_1.jsx(sequencing_1.Sequence, Object.assign({ from: 20, durationInFrames: 100 }, { children: jsx_runtime_1.jsx(Child, {}, void 0) }), void 0) }), void 0));
expect(queryByText(/^frame9$/i)).not.toBe(null);
});
test('Negative offset test', () => {
const NestedChild = () => {
const frame = use_frame_1.useCurrentFrame();
return jsx_runtime_1.jsx("div", { children: 'frame' + frame }, void 0);
};
const { queryByText } = react_1.render(jsx_runtime_1.jsx(timeline_position_state_1.TimelineContext.Provider, Object.assign({ value: {
frame: 40,
playing: false,
rootId: 'hi',
} }, { children: jsx_runtime_1.jsx(sequencing_1.Sequence, Object.assign({ from: -200, durationInFrames: 300 }, { children: jsx_runtime_1.jsx(sequencing_1.Sequence, Object.assign({ from: 10, durationInFrames: 300 }, { children: jsx_runtime_1.jsx(sequencing_1.Sequence, Object.assign({ from: 10, durationInFrames: 300 }, { children: jsx_runtime_1.jsx(NestedChild, {}, void 0) }), void 0) }), void 0) }), void 0) }), void 0));
const result = queryByText(/^frame220/i);
expect(result).not.toBe(null);
});
test('Nested negative offset test', () => {
const NestedChild = () => {
const frame = use_frame_1.useCurrentFrame();
return jsx_runtime_1.jsx("div", { children: 'frame' + frame }, void 0);
};
const startFrom = 40;
const endAt = 90;
const content = (jsx_runtime_1.jsx(sequencing_1.Sequence, Object.assign({ from: 0 - startFrom, durationInFrames: endAt }, { children: jsx_runtime_1.jsx(NestedChild, {}, void 0) }), void 0));
const getForFrame = (frame) => {
const { queryByText } = react_1.render(jsx_runtime_1.jsx(timeline_position_state_1.TimelineContext.Provider, Object.assign({ value: {
frame,
playing: false,
rootId: 'hi',
} }, { children: content }), void 0));
return queryByText;
};
const frame0 = getForFrame(0);
expect(frame0(/^frame40$/i)).not.toBe(null);
const frame39 = getForFrame(39);
expect(frame39(/^frame79$/i)).not.toBe(null);
const frame50 = getForFrame(50);
expect(frame50(/^frame90$/i)).toBe(null);
});
test('Negative offset edge case', () => {
const NestedChild = () => {
const frame = use_frame_1.useCurrentFrame();
return jsx_runtime_1.jsx("div", { children: 'frame' + frame }, void 0);
};
const startFrom = 40;
const endAt = 90;
const content = (jsx_runtime_1.jsx(sequencing_1.Sequence, Object.assign({ from: 40, durationInFrames: Infinity }, { children: jsx_runtime_1.jsx(sequencing_1.Sequence, Object.assign({ from: 0 - startFrom, durationInFrames: endAt }, { children: jsx_runtime_1.jsx(NestedChild, {}, void 0) }), void 0) }), void 0));
const getForFrame = (frame) => {
const { queryByText } = react_1.render(jsx_runtime_1.jsx(timeline_position_state_1.TimelineContext.Provider, Object.assign({ value: {
frame,
playing: false,
rootId: 'hi',
} }, { children: content }), void 0));
return queryByText;
};
expect(getForFrame(0)(/^frame/i)).toBe(null);
expect(getForFrame(10)(/^frame/i)).toBe(null);
expect(getForFrame(40)(/^frame40$/i)).not.toBe(null);
const atFrame80 = getForFrame(80)(/^frame80$/i);
expect(atFrame80).not.toBe(null);
const atFrame90 = getForFrame(90)(/^frame90$/i);
expect(atFrame90).toBe(null);
});
//# sourceMappingURL=nested-sequences.test.js.map

8

dist/test/pixel-format.test.js

@@ -7,3 +7,3 @@ "use strict";

// input format
const valuesA = [
const validPixelFormats = [
'yuv420p',

@@ -17,3 +17,3 @@ 'yuva420p',

];
valuesA.forEach((entry) => {
validPixelFormats.forEach((entry) => {
pixel_format_1.setPixelFormat(entry);

@@ -23,4 +23,4 @@ expect(pixel_format_1.getPixelFormat()).toEqual(entry);

// input format
const valuesB = ['abc', '', 3, undefined];
valuesB.forEach((entry) => expect_to_throw_1.expectToThrow(
const invalidPixelFormats = ['abc', '', 3, undefined];
invalidPixelFormats.forEach((entry) => expect_to_throw_1.expectToThrow(
// @ts-expect-error

@@ -27,0 +27,0 @@ () => pixel_format_1.setPixelFormat(entry), new RegExp(`Value ${entry} is not valid as a pixel format.`)));

45

dist/test/quality.test.js

@@ -5,24 +5,31 @@ "use strict";

const expect_to_throw_1 = require("./expect-to-throw");
test('set quality tests', () => {
// input quality
const valuesA = [50, undefined, 100, 1];
valuesA.forEach((entry) => {
quality_1.setQuality(entry);
expect(quality_1.getQuality()).toEqual(entry);
describe('Test valid setQuality inputs', () => {
test('Integers within accepted range', () => {
const validInputes = [1, 50, 100];
validInputes.forEach((entry) => {
quality_1.setQuality(entry);
expect(quality_1.getQuality()).toEqual(entry);
});
});
// input quality, output quality
const valuesB = [[0, undefined]];
valuesB.forEach((entry) => {
quality_1.setQuality(entry[0]);
expect(quality_1.getQuality()).toEqual(entry[1]);
test('Undefined input', () => {
quality_1.setQuality(undefined);
expect(quality_1.getQuality()).toEqual(undefined);
});
// input quality
const valuesC = ['abc', null];
valuesC.forEach((entry) => expect_to_throw_1.expectToThrow(
// @ts-expect-error
() => quality_1.setQuality(entry), new RegExp(`Quality option must be a number or undefined. Got ${typeof entry}`)));
// input quality
const valuesD = [-1, 101, 150];
valuesD.forEach((entry) => expect_to_throw_1.expectToThrow(() => quality_1.setQuality(entry), /Quality option must be between 1 and 100./));
test('0 input', () => {
quality_1.setQuality(0);
expect(quality_1.getQuality()).toEqual(undefined);
});
});
describe('Test invalid setQuality inputs ', () => {
test('invalid input type', () => {
const invalidInputQuality = ['abc', null];
invalidInputQuality.forEach((entry) => expect_to_throw_1.expectToThrow(
// @ts-expect-error
() => quality_1.setQuality(entry), new RegExp(`Quality option must be a number or undefined. Got ${typeof entry}`)));
});
test('out of range inputs', () => {
const outOfRangeInput = [-1, 101, 150];
outOfRangeInput.forEach((entry) => expect_to_throw_1.expectToThrow(() => quality_1.setQuality(entry), /Quality option must be between 1 and 100./));
});
});
//# sourceMappingURL=quality.test.js.map

8

dist/test/range.test.js

@@ -6,3 +6,3 @@ "use strict";

const expect_to_throw_1 = require("./expect-to-throw");
test('Frame range tests', () => {
test('Frame range should throw exception with invalid inputs', () => {
expect_to_throw_1.expectToThrow(() => frame_range_1.setFrameRange(-1), /non-negative/);

@@ -27,2 +27,4 @@ expect_to_throw_1.expectToThrow(() => frame_range_1.setFrameRange(1.111), /Frame must be an integer, but got a float \(1.111\)/);

() => frame_range_1.setFrameRange('10'), /Frame range must be a number or a tuple of numbers, but got object of type string/);
});
test('Frame range tests with valid inputs', () => {
frame_range_1.setFrameRange(null);

@@ -37,6 +39,8 @@ expect(internals_1.Internals.getRange()).toEqual(null);

});
test('Frame range CLI tests', () => {
test('Frame range CLI should throw exception with invalid inputs', () => {
expect_to_throw_1.expectToThrow(() => frame_range_1.setFrameRangeFromCli('1-2-3'), /--frames flag must be a number or 2 numbers separated by '-', instead got 3 numbers/);
expect_to_throw_1.expectToThrow(() => frame_range_1.setFrameRangeFromCli('2-1'), /The second number of the --frames flag number should be greater or equal than first number/);
expect_to_throw_1.expectToThrow(() => frame_range_1.setFrameRangeFromCli('one-two'), /--frames flag must be a single number, or 2 numbers separated by `-`/);
});
test('Frame range CLI tests with valid inputs', () => {
frame_range_1.setFrameRange(null);

@@ -43,0 +47,0 @@ frame_range_1.setFrameRangeFromCli(0);

15

dist/test/sequence-validation.test.js

@@ -7,2 +7,7 @@ "use strict";

const expect_to_throw_1 = require("./expect-to-throw");
test('It should throw if "from" props is not a number', () => {
expect_to_throw_1.expectToThrow(
// @ts-expect-error
() => react_1.render(jsx_runtime_1.jsx(sequencing_1.Sequence, { from: '0', durationInFrames: 30 }, void 0)), /You passed to the "from" props of your <Sequence> an argument of type string, but it must be a number./);
});
test('It should throw if Sequence has missing duration', () => {

@@ -13,2 +18,7 @@ expect_to_throw_1.expectToThrow(

});
test('It should throw if Sequence has negative duration', () => {
expect_to_throw_1.expectToThrow(
// @ts-expect-error
() => react_1.render(jsx_runtime_1.jsx(sequencing_1.Sequence, { from: 0, durationInFrames: -1 }, void 0)), /durationInFrames must be positive, but got -1/);
});
test('It should allow null as children', () => {

@@ -20,2 +30,7 @@ expect(() => react_1.render(jsx_runtime_1.jsx(sequencing_1.Sequence, Object.assign({ durationInFrames: 100, from: 0 }, { children: null }), void 0))).not.toThrow();

});
test('It should throw for invalid layout value', () => {
expect_to_throw_1.expectToThrow(() => react_1.render(
// @ts-expect-error
jsx_runtime_1.jsx(sequencing_1.Sequence, { from: 0, durationInFrames: 100, layout: 'invalid-value' }, void 0)), /The layout prop of <Sequence \/> expects either "absolute-fill" or "none", but you passed: invalid-value/);
});
//# sourceMappingURL=sequence-validation.test.js.map

1

dist/timeline-position-state.d.ts

@@ -5,3 +5,2 @@ /// <reference types="react" />

playing: boolean;
isThumbnail: boolean;
rootId: string;

@@ -8,0 +7,0 @@ };

1

dist/timeline-position-state.js

@@ -8,3 +8,2 @@ "use strict";

playing: false,
isThumbnail: true,
rootId: '',

@@ -11,0 +10,0 @@ });

4

dist/use-frame.js

@@ -15,3 +15,5 @@ "use strict";

const context = react_1.useContext(sequencing_1.SequenceContext);
const contextOffset = context ? context.from : 0;
const contextOffset = context
? context.cumulatedFrom + context.relativeFrom
: 0;
return frame - contextOffset;

@@ -18,0 +20,0 @@ };

6

dist/validate-media-props.js

@@ -5,4 +5,6 @@ "use strict";

const validateMediaProps = (props, component) => {
if (typeof props.volume !== 'number' && typeof props.volume !== 'undefined') {
throw new TypeError(`You have passed a volume of type ${typeof props.volume} to your <${component} /> component. Volume must be a number or undefined.`);
if (typeof props.volume !== 'number' &&
typeof props.volume !== 'function' &&
typeof props.volume !== 'undefined') {
throw new TypeError(`You have passed a volume of type ${typeof props.volume} to your <${component} /> component. Volume must be a number or a function with the signature '(frame: number) => number' undefined.`);
}

@@ -9,0 +11,0 @@ if (typeof props.volume === 'number' && props.volume < 0) {

7

dist/video/props.d.ts
/// <reference types="react" />
import { VolumeProp } from '../volume-prop';
export declare type RemotionMainVideoProps = {
startFrom?: number;
endAt?: number;
};
export declare type RemotionVideoProps = Omit<React.DetailedHTMLProps<React.VideoHTMLAttributes<HTMLVideoElement>, HTMLVideoElement>, 'autoplay' | 'controls'> & {
volume?: number;
volume?: VolumeProp;
};
//# sourceMappingURL=props.d.ts.map

4

dist/video/Video.d.ts
import React from 'react';
import { RemotionVideoProps } from './props';
export declare const Video: React.FC<RemotionVideoProps>;
import { RemotionMainVideoProps, RemotionVideoProps } from './props';
export declare const Video: React.FC<RemotionVideoProps & RemotionMainVideoProps>;
//# sourceMappingURL=Video.d.ts.map

11

dist/video/Video.js

@@ -5,5 +5,16 @@ "use strict";

const jsx_runtime_1 = require("react/jsx-runtime");
const sequencing_1 = require("../sequencing");
const validate_media_props_1 = require("../validate-media-props");
const validate_start_from_props_1 = require("../validate-start-from-props");
const VideoForDevelopment_1 = require("./VideoForDevelopment");
const VideoForRendering_1 = require("./VideoForRendering");
const Video = (props) => {
const { startFrom, endAt, ...otherProps } = props;
if (typeof startFrom !== 'undefined' || typeof endAt !== 'undefined') {
validate_start_from_props_1.validateStartFromProps(startFrom, endAt);
const startFromFrameNo = startFrom !== null && startFrom !== void 0 ? startFrom : 0;
const endAtFrameNo = endAt !== null && endAt !== void 0 ? endAt : Infinity;
return (jsx_runtime_1.jsx(sequencing_1.Sequence, Object.assign({ layout: "none", from: 0 - startFromFrameNo, showInTimeline: false, durationInFrames: endAtFrameNo }, { children: jsx_runtime_1.jsx(exports.Video, Object.assign({}, otherProps), void 0) }), void 0));
}
validate_media_props_1.validateMediaProps(props, 'Video');
if (process.env.NODE_ENV === 'development') {

@@ -10,0 +21,0 @@ return jsx_runtime_1.jsx(VideoForDevelopment_1.VideoForDevelopment, Object.assign({}, props), void 0);

74

dist/video/VideoForDevelopment.js

@@ -6,55 +6,29 @@ "use strict";

const react_1 = require("react");
const feature_flags_1 = require("../feature-flags");
const timeline_position_state_1 = require("../timeline-position-state");
const use_frame_1 = require("../use-frame");
const use_unsafe_video_config_1 = require("../use-unsafe-video-config");
const validate_media_props_1 = require("../validate-media-props");
const use_audio_frame_1 = require("../audio/use-audio-frame");
const use_media_in_timeline_1 = require("../use-media-in-timeline");
const use_media_playback_1 = require("../use-media-playback");
const use_media_tag_volume_1 = require("../use-media-tag-volume");
const use_sync_volume_with_media_tag_1 = require("../use-sync-volume-with-media-tag");
const VideoForDevelopment = (props) => {
const videoRef = react_1.useRef(null);
const currentFrame = use_frame_1.useCurrentFrame();
const absoluteFrame = use_frame_1.useAbsoluteCurrentFrame();
const videoConfig = use_unsafe_video_config_1.useUnsafeVideoConfig();
const [playing] = timeline_position_state_1.usePlayingState();
const volumePropFrame = use_audio_frame_1.useFrameForVolumeProp();
const { volume, ...nativeProps } = props;
validate_media_props_1.validateMediaProps(props, 'Video');
// TODO: Register as an asset
react_1.useEffect(() => {
var _a, _b, _c;
if (playing && !((_a = videoRef.current) === null || _a === void 0 ? void 0 : _a.ended)) {
(_b = videoRef.current) === null || _b === void 0 ? void 0 : _b.play();
}
else {
(_c = videoRef.current) === null || _c === void 0 ? void 0 : _c.pause();
}
}, [playing]);
react_1.useEffect(() => {
if (!videoRef.current) {
return;
}
videoRef.current.volume = volume !== null && volume !== void 0 ? volume : 1;
}, [volume]);
react_1.useEffect(() => {
if (!videoRef.current) {
throw new Error('No video ref found');
}
if (!videoConfig) {
throw new Error('No video config found. <Video> must be placed inside a composition.');
}
const currentTime = (() => {
if (feature_flags_1.FEATURE_FLAG_V2_BREAKING_CHANGES) {
// In Chrome, if 30fps, the first frame is still displayed at 0.033333
// even though after that it increases by 0.033333333 each.
// So frame = 0 in Remotion is like frame = 1 for the browser
return (currentFrame + 1) / videoConfig.fps;
}
return currentFrame / (1000 / videoConfig.fps);
})();
if (!playing || absoluteFrame === 0) {
videoRef.current.currentTime = currentTime;
}
if (videoRef.current.paused && !videoRef.current.ended && playing) {
videoRef.current.currentTime = currentTime;
videoRef.current.play();
}
}, [currentFrame, playing, videoConfig, absoluteFrame]);
const actualVolume = use_media_tag_volume_1.useMediaTagVolume(videoRef);
use_media_in_timeline_1.useMediaInTimeline({
mediaRef: videoRef,
volume,
mediaType: 'video',
src: nativeProps.src,
});
use_sync_volume_with_media_tag_1.useSyncVolumeWithMediaTag({
volumePropFrame,
actualVolume,
volume,
mediaRef: videoRef,
});
use_media_playback_1.useMediaPlayback({
mediaRef: videoRef,
src: nativeProps.src,
mediaType: 'video',
});
return jsx_runtime_1.jsx("video", Object.assign({ ref: videoRef }, nativeProps), void 0);

@@ -61,0 +35,0 @@ };

48

dist/video/VideoForRendering.js

@@ -6,5 +6,6 @@ "use strict";

const react_1 = require("react");
const use_audio_frame_1 = require("../audio/use-audio-frame");
const CompositionManager_1 = require("../CompositionManager");
const feature_flags_1 = require("../feature-flags");
const is_approximately_the_same_1 = require("../is-approximately-the-same");
const is_remote_asset_1 = require("../is-remote-asset");
const random_1 = require("../random");

@@ -15,5 +16,8 @@ const ready_manager_1 = require("../ready-manager");

const use_unsafe_video_config_1 = require("../use-unsafe-video-config");
const validate_media_props_1 = require("../validate-media-props");
const VideoForRendering = ({ onError, ...props }) => {
const volume_prop_1 = require("../volume-prop");
const get_current_time_1 = require("./get-current-time");
const VideoForRendering = ({ onError, volume: volumeProp, ...props }) => {
const absoluteFrame = use_frame_1.useAbsoluteCurrentFrame();
const frame = use_frame_1.useCurrentFrame();
const volumePropsFrame = use_audio_frame_1.useFrameForVolumeProp();
const videoConfig = use_unsafe_video_config_1.useUnsafeVideoConfig();

@@ -23,3 +27,2 @@ const videoRef = react_1.useRef(null);

const { registerAsset, unregisterAsset } = react_1.useContext(CompositionManager_1.CompositionManager);
validate_media_props_1.validateMediaProps(props, 'Video');
// Generate a string that's as unique as possible for this asset

@@ -29,8 +32,9 @@ // but at the same time the same on all threads

var _a;
return `audio-${random_1.random((_a = props.src) !== null && _a !== void 0 ? _a : '')}-${sequenceContext === null || sequenceContext === void 0 ? void 0 : sequenceContext.from}-${sequenceContext === null || sequenceContext === void 0 ? void 0 : sequenceContext.durationInFrames}-muted:${props.muted}`;
return `audio-${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}-muted:${props.muted}`;
}, [
props.src,
props.muted,
props.src,
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,
sequenceContext === null || sequenceContext === void 0 ? void 0 : sequenceContext.from,
]);

@@ -40,4 +44,7 @@ if (!videoConfig) {

}
const volume = volume_prop_1.evaluateVolume({
volume: volumeProp,
frame: volumePropsFrame,
});
react_1.useEffect(() => {
var _a;
if (!props.src) {

@@ -53,4 +60,6 @@ throw new Error('No src passed');

id,
sequenceFrame: frame,
volume: (_a = props.volume) !== null && _a !== void 0 ? _a : 1,
frame: absoluteFrame,
volume,
isRemote: is_remote_asset_1.isRemoteAsset(props.src),
mediaFrame: frame,
});

@@ -64,4 +73,5 @@ return () => unregisterAsset(id);

unregisterAsset,
volume,
frame,
props.volume,
absoluteFrame,
]);

@@ -73,9 +83,7 @@ react_1.useEffect(() => {

const currentTime = (() => {
if (feature_flags_1.FEATURE_FLAG_V2_BREAKING_CHANGES) {
// In Chrome, if 30fps, the first frame is still displayed at 0.033333
// even though after that it increases by 0.033333333 each.
// So frame = 0 in Remotion is like frame = 1 for the browser
return (frame + 1) / videoConfig.fps;
}
return frame / (1000 / videoConfig.fps);
return get_current_time_1.getCurrentTime({
fps: videoConfig.fps,
frame,
src: props.src,
});
})();

@@ -103,3 +111,3 @@ const handle = ready_manager_1.delayRender();

ready_manager_1.continueRender(handle);
}, 300);
}, 100);
}, { once: true });

@@ -113,3 +121,3 @@ videoRef.current.addEventListener('ended', () => {

}, { once: true });
}, [frame, videoConfig.fps]);
}, [volumePropsFrame, props.src, videoConfig.fps, frame]);
return jsx_runtime_1.jsx("video", Object.assign({ ref: videoRef }, props), void 0);

@@ -116,0 +124,0 @@ };

5

package.json
{
"name": "remotion",
"version": "1.6.0-alpha.9f690548",
"version": "1.6.0-alpha.ae9eb233",
"description": "Render videos in React",

@@ -34,2 +34,3 @@ "main": "dist/index.js",

"@types/node": "^14.14.14",
"@types/webpack-env": "^1.16.0",
"eslint": "^7.4.0",

@@ -39,3 +40,3 @@ "jest": "^26.6.3",

"ts-jest": "^26.4.4",
"webpack": "^5.21.2"
"webpack": "^5.27.2"
},

@@ -42,0 +43,0 @@ "publishConfig": {

dist/audio/Audio.d.ts.map

Sorry, the diff of this file is not supported yet

dist/audio/Audio.js.map

Sorry, the diff of this file is not supported yet

dist/audio/AudioForDevelopment.d.ts.map

Sorry, the diff of this file is not supported yet

dist/audio/AudioForDevelopment.js.map

Sorry, the diff of this file is not supported yet

dist/audio/AudioForRendering.d.ts.map

Sorry, the diff of this file is not supported yet

dist/audio/AudioForRendering.js.map

Sorry, the diff of this file is not supported yet

dist/audio/props.d.ts.map

Sorry, the diff of this file is not supported yet

dist/Composition.d.ts.map

Sorry, the diff of this file is not supported yet

dist/Composition.js.map

Sorry, the diff of this file is not supported yet

dist/CompositionManager.d.ts.map

Sorry, the diff of this file is not supported yet

dist/CompositionManager.js.map

Sorry, the diff of this file is not supported yet

dist/config/codec.d.ts.map

Sorry, the diff of this file is not supported yet

dist/config/codec.js.map

Sorry, the diff of this file is not supported yet

dist/config/crf.d.ts.map

Sorry, the diff of this file is not supported yet

dist/config/crf.js.map

Sorry, the diff of this file is not supported yet

dist/config/image-format.d.ts.map

Sorry, the diff of this file is not supported yet

dist/config/image-format.js.map

Sorry, the diff of this file is not supported yet

dist/config/input-props.d.ts.map

Sorry, the diff of this file is not supported yet

dist/config/input-props.js.map

Sorry, the diff of this file is not supported yet

dist/config/overwrite.js.map

Sorry, the diff of this file is not supported yet

dist/feature-flags.d.ts.map

Sorry, the diff of this file is not supported yet

dist/feature-flags.js.map

Sorry, the diff of this file is not supported yet

dist/internals.d.ts.map

Sorry, the diff of this file is not supported yet

dist/internals.js.map

Sorry, the diff of this file is not supported yet

dist/register-root.d.ts.map

Sorry, the diff of this file is not supported yet

dist/register-root.js.map

Sorry, the diff of this file is not supported yet

dist/RemotionRoot.d.ts.map

Sorry, the diff of this file is not supported yet

dist/RemotionRoot.js.map

Sorry, the diff of this file is not supported yet

dist/sequencing/index.d.ts.map

Sorry, the diff of this file is not supported yet

dist/sequencing/index.js.map

Sorry, the diff of this file is not supported yet

dist/spring.d.ts.map

Sorry, the diff of this file is not supported yet

dist/spring.js.map

Sorry, the diff of this file is not supported yet

dist/test/codec.test.js.map

Sorry, the diff of this file is not supported yet

dist/test/crf.test.js.map

Sorry, the diff of this file is not supported yet

dist/test/easing.test.js.map

Sorry, the diff of this file is not supported yet

dist/test/interpolate.test.js.map

Sorry, the diff of this file is not supported yet

dist/test/media-validation.test.js.map

Sorry, the diff of this file is not supported yet

dist/test/nested-sequences.test.js.map

Sorry, the diff of this file is not supported yet

dist/test/pixel-format.test.js.map

Sorry, the diff of this file is not supported yet

dist/test/quality.test.js.map

Sorry, the diff of this file is not supported yet

dist/test/range.test.js.map

Sorry, the diff of this file is not supported yet

dist/test/sequence-validation.test.js.map

Sorry, the diff of this file is not supported yet

dist/timeline-position-state.d.ts.map

Sorry, the diff of this file is not supported yet

dist/timeline-position-state.js.map

Sorry, the diff of this file is not supported yet

dist/use-frame.d.ts.map

Sorry, the diff of this file is not supported yet

dist/use-frame.js.map

Sorry, the diff of this file is not supported yet

dist/validate-media-props.d.ts.map

Sorry, the diff of this file is not supported yet

dist/validate-media-props.js.map

Sorry, the diff of this file is not supported yet

dist/video/props.d.ts.map

Sorry, the diff of this file is not supported yet

dist/video/Video.d.ts.map

Sorry, the diff of this file is not supported yet

dist/video/Video.js.map

Sorry, the diff of this file is not supported yet

dist/video/VideoForDevelopment.d.ts.map

Sorry, the diff of this file is not supported yet

dist/video/VideoForDevelopment.js.map

Sorry, the diff of this file is not supported yet

dist/video/VideoForRendering.d.ts.map

Sorry, the diff of this file is not supported yet

dist/video/VideoForRendering.js.map

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc