remotion
Version:
Make videos programmatically
686 lines (670 loc) • 20.5 kB
JavaScript
// src/interpolate.ts
function interpolateFunction(input, inputRange, outputRange, options) {
const { extrapolateLeft, extrapolateRight, easing } = options;
let result = input;
const [inputMin, inputMax] = inputRange;
const [outputMin, outputMax] = outputRange;
if (result < inputMin) {
if (extrapolateLeft === "identity") {
return result;
}
if (extrapolateLeft === "clamp") {
result = inputMin;
} else if (extrapolateLeft === "wrap") {
const range = inputMax - inputMin;
result = ((result - inputMin) % range + range) % range + inputMin;
} else if (extrapolateLeft === "extend") {}
}
if (result > inputMax) {
if (extrapolateRight === "identity") {
return result;
}
if (extrapolateRight === "clamp") {
result = inputMax;
} else if (extrapolateRight === "wrap") {
const range = inputMax - inputMin;
result = ((result - inputMin) % range + range) % range + inputMin;
} else if (extrapolateRight === "extend") {}
}
if (outputMin === outputMax) {
return outputMin;
}
result = (result - inputMin) / (inputMax - inputMin);
result = easing(result);
result = result * (outputMax - outputMin) + outputMin;
return result;
}
function findRange(input, inputRange) {
let i;
for (i = 1;i < inputRange.length - 1; ++i) {
if (inputRange[i] >= input) {
break;
}
}
return i - 1;
}
function checkValidInputRange(arr) {
for (let i = 1;i < arr.length; ++i) {
if (!(arr[i] > arr[i - 1])) {
throw new Error(`inputRange must be strictly monotonically increasing but got [${arr.join(",")}]`);
}
}
}
function checkInfiniteRange(name, arr) {
if (arr.length < 2) {
throw new Error(name + " must have at least 2 elements");
}
for (const element of arr) {
if (typeof element !== "number") {
throw new Error(`${name} must contain only numbers`);
}
if (!Number.isFinite(element)) {
throw new Error(`${name} must contain only finite numbers, but got [${arr.join(",")}]`);
}
}
}
function interpolate(input, inputRange, outputRange, options) {
if (typeof input === "undefined") {
throw new Error("input can not be undefined");
}
if (typeof inputRange === "undefined") {
throw new Error("inputRange can not be undefined");
}
if (typeof outputRange === "undefined") {
throw new Error("outputRange can not be undefined");
}
if (inputRange.length !== outputRange.length) {
throw new Error("inputRange (" + inputRange.length + ") and outputRange (" + outputRange.length + ") must have the same length");
}
checkInfiniteRange("inputRange", inputRange);
checkInfiniteRange("outputRange", outputRange);
checkValidInputRange(inputRange);
const easing = options?.easing ?? ((num) => num);
let extrapolateLeft = "extend";
if (options?.extrapolateLeft !== undefined) {
extrapolateLeft = options.extrapolateLeft;
}
let extrapolateRight = "extend";
if (options?.extrapolateRight !== undefined) {
extrapolateRight = options.extrapolateRight;
}
if (typeof input !== "number") {
throw new TypeError("Cannot interpolate an input which is not a number");
}
const range = findRange(input, inputRange);
return interpolateFunction(input, [inputRange[range], inputRange[range + 1]], [outputRange[range], outputRange[range + 1]], {
easing,
extrapolateLeft,
extrapolateRight
});
}
// src/random.ts
function mulberry32(a) {
let t = a + 1831565813;
t = Math.imul(t ^ t >>> 15, t | 1);
t ^= t + Math.imul(t ^ t >>> 7, t | 61);
return ((t ^ t >>> 14) >>> 0) / 4294967296;
}
function hashCode(str) {
let i = 0;
let chr = 0;
let hash = 0;
for (i = 0;i < str.length; i++) {
chr = str.charCodeAt(i);
hash = (hash << 5) - hash + chr;
hash |= 0;
}
return hash;
}
var random = (seed, dummy) => {
if (dummy !== undefined) {
throw new TypeError("random() takes only one argument");
}
if (seed === null) {
return Math.random();
}
if (typeof seed === "string") {
return mulberry32(hashCode(seed));
}
if (typeof seed === "number") {
return mulberry32(seed * 10000000000);
}
throw new Error("random() argument must be a number or a string");
};
// src/truthy.ts
function truthy(value) {
return Boolean(value);
}
// src/delay-render.ts
if (typeof window !== "undefined") {
window.remotion_renderReady = false;
}
if (typeof window !== "undefined") {
window.remotion_delayRenderTimeouts = {};
}
var DELAY_RENDER_CALLSTACK_TOKEN = "The delayRender was called:";
var DELAY_RENDER_RETRIES_LEFT = "Retries left: ";
var DELAY_RENDER_RETRY_TOKEN = "- Rendering the frame will be retried.";
var DELAY_RENDER_CLEAR_TOKEN = "handle was cleared after";
// src/input-props-serialization.ts
var DATE_TOKEN = "remotion-date:";
var FILE_TOKEN = "remotion-file:";
var serializeJSONWithSpecialTypes = ({
data,
indent,
staticBase
}) => {
let customDateUsed = false;
let customFileUsed = false;
let mapUsed = false;
let setUsed = false;
try {
const serializedString = JSON.stringify(data, function(key, value) {
const item = this[key];
if (item instanceof Date) {
customDateUsed = true;
return `${DATE_TOKEN}${item.toISOString()}`;
}
if (item instanceof Map) {
mapUsed = true;
return value;
}
if (item instanceof Set) {
setUsed = true;
return value;
}
if (typeof item === "string" && staticBase !== null && item.startsWith(staticBase)) {
customFileUsed = true;
return `${FILE_TOKEN}${item.replace(staticBase + "/", "")}`;
}
return value;
}, indent);
return { serializedString, customDateUsed, customFileUsed, mapUsed, setUsed };
} catch (err) {
throw new Error("Could not serialize the passed input props to JSON: " + err.message);
}
};
var deserializeJSONWithSpecialTypes = (data) => {
return JSON.parse(data, (_, value) => {
if (typeof value === "string" && value.startsWith(DATE_TOKEN)) {
return new Date(value.replace(DATE_TOKEN, ""));
}
if (typeof value === "string" && value.startsWith(FILE_TOKEN)) {
return `${window.remotion_staticBase}/${value.replace(FILE_TOKEN, "")}`;
}
return value;
});
};
// src/interpolate-colors.ts
var NUMBER = "[-+]?\\d*\\.?\\d+";
var PERCENTAGE = NUMBER + "%";
function call(...args) {
return "\\(\\s*(" + args.join(")\\s*,\\s*(") + ")\\s*\\)";
}
function getMatchers() {
const cachedMatchers = {
rgb: undefined,
rgba: undefined,
hsl: undefined,
hsla: undefined,
hex3: undefined,
hex4: undefined,
hex5: undefined,
hex6: undefined,
hex8: undefined
};
if (cachedMatchers.rgb === undefined) {
cachedMatchers.rgb = new RegExp("rgb" + call(NUMBER, NUMBER, NUMBER));
cachedMatchers.rgba = new RegExp("rgba" + call(NUMBER, NUMBER, NUMBER, NUMBER));
cachedMatchers.hsl = new RegExp("hsl" + call(NUMBER, PERCENTAGE, PERCENTAGE));
cachedMatchers.hsla = new RegExp("hsla" + call(NUMBER, PERCENTAGE, PERCENTAGE, NUMBER));
cachedMatchers.hex3 = /^#([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})$/;
cachedMatchers.hex4 = /^#([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})$/;
cachedMatchers.hex6 = /^#([0-9a-fA-F]{6})$/;
cachedMatchers.hex8 = /^#([0-9a-fA-F]{8})$/;
}
return cachedMatchers;
}
function hue2rgb(p, q, t) {
if (t < 0) {
t += 1;
}
if (t > 1) {
t -= 1;
}
if (t < 1 / 6) {
return p + (q - p) * 6 * t;
}
if (t < 1 / 2) {
return q;
}
if (t < 2 / 3) {
return p + (q - p) * (2 / 3 - t) * 6;
}
return p;
}
function hslToRgb(h, s, l) {
const q = l < 0.5 ? l * (1 + s) : l + s - l * s;
const p = 2 * l - q;
const r = hue2rgb(p, q, h + 1 / 3);
const g = hue2rgb(p, q, h);
const b = hue2rgb(p, q, h - 1 / 3);
return Math.round(r * 255) << 24 | Math.round(g * 255) << 16 | Math.round(b * 255) << 8;
}
function parse255(str) {
const int = Number.parseInt(str, 10);
if (int < 0) {
return 0;
}
if (int > 255) {
return 255;
}
return int;
}
function parse360(str) {
const int = Number.parseFloat(str);
return (int % 360 + 360) % 360 / 360;
}
function parse1(str) {
const num = Number.parseFloat(str);
if (num < 0) {
return 0;
}
if (num > 1) {
return 255;
}
return Math.round(num * 255);
}
function parsePercentage(str) {
const int = Number.parseFloat(str);
if (int < 0) {
return 0;
}
if (int > 100) {
return 1;
}
return int / 100;
}
var colorNames = {
transparent: 0,
aliceblue: 4042850303,
antiquewhite: 4209760255,
aqua: 16777215,
aquamarine: 2147472639,
azure: 4043309055,
beige: 4126530815,
bisque: 4293182719,
black: 255,
blanchedalmond: 4293643775,
blue: 65535,
blueviolet: 2318131967,
brown: 2771004159,
burlywood: 3736635391,
burntsienna: 3934150143,
cadetblue: 1604231423,
chartreuse: 2147418367,
chocolate: 3530104575,
coral: 4286533887,
cornflowerblue: 1687547391,
cornsilk: 4294499583,
crimson: 3692313855,
cyan: 16777215,
darkblue: 35839,
darkcyan: 9145343,
darkgoldenrod: 3095792639,
darkgray: 2846468607,
darkgreen: 6553855,
darkgrey: 2846468607,
darkkhaki: 3182914559,
darkmagenta: 2332068863,
darkolivegreen: 1433087999,
darkorange: 4287365375,
darkorchid: 2570243327,
darkred: 2332033279,
darksalmon: 3918953215,
darkseagreen: 2411499519,
darkslateblue: 1211993087,
darkslategray: 793726975,
darkslategrey: 793726975,
darkturquoise: 13554175,
darkviolet: 2483082239,
deeppink: 4279538687,
deepskyblue: 12582911,
dimgray: 1768516095,
dimgrey: 1768516095,
dodgerblue: 512819199,
firebrick: 2988581631,
floralwhite: 4294635775,
forestgreen: 579543807,
fuchsia: 4278255615,
gainsboro: 3705462015,
ghostwhite: 4177068031,
gold: 4292280575,
goldenrod: 3668254975,
gray: 2155905279,
green: 8388863,
greenyellow: 2919182335,
grey: 2155905279,
honeydew: 4043305215,
hotpink: 4285117695,
indianred: 3445382399,
indigo: 1258324735,
ivory: 4294963455,
khaki: 4041641215,
lavender: 3873897215,
lavenderblush: 4293981695,
lawngreen: 2096890111,
lemonchiffon: 4294626815,
lightblue: 2916673279,
lightcoral: 4034953471,
lightcyan: 3774873599,
lightgoldenrodyellow: 4210742015,
lightgray: 3553874943,
lightgreen: 2431553791,
lightgrey: 3553874943,
lightpink: 4290167295,
lightsalmon: 4288707327,
lightseagreen: 548580095,
lightskyblue: 2278488831,
lightslategray: 2005441023,
lightslategrey: 2005441023,
lightsteelblue: 2965692159,
lightyellow: 4294959359,
lime: 16711935,
limegreen: 852308735,
linen: 4210091775,
magenta: 4278255615,
maroon: 2147483903,
mediumaquamarine: 1724754687,
mediumblue: 52735,
mediumorchid: 3126187007,
mediumpurple: 2473647103,
mediumseagreen: 1018393087,
mediumslateblue: 2070474495,
mediumspringgreen: 16423679,
mediumturquoise: 1221709055,
mediumvioletred: 3340076543,
midnightblue: 421097727,
mintcream: 4127193855,
mistyrose: 4293190143,
moccasin: 4293178879,
navajowhite: 4292783615,
navy: 33023,
oldlace: 4260751103,
olive: 2155872511,
olivedrab: 1804477439,
orange: 4289003775,
orangered: 4282712319,
orchid: 3664828159,
palegoldenrod: 4008225535,
palegreen: 2566625535,
paleturquoise: 2951671551,
palevioletred: 3681588223,
papayawhip: 4293907967,
peachpuff: 4292524543,
peru: 3448061951,
pink: 4290825215,
plum: 3718307327,
powderblue: 2967529215,
purple: 2147516671,
rebeccapurple: 1714657791,
red: 4278190335,
rosybrown: 3163525119,
royalblue: 1097458175,
saddlebrown: 2336560127,
salmon: 4202722047,
sandybrown: 4104413439,
seagreen: 780883967,
seashell: 4294307583,
sienna: 2689740287,
silver: 3233857791,
skyblue: 2278484991,
slateblue: 1784335871,
slategray: 1887473919,
slategrey: 1887473919,
snow: 4294638335,
springgreen: 16744447,
steelblue: 1182971135,
tan: 3535047935,
teal: 8421631,
thistle: 3636451583,
tomato: 4284696575,
turquoise: 1088475391,
violet: 4001558271,
wheat: 4125012991,
white: 4294967295,
whitesmoke: 4126537215,
yellow: 4294902015,
yellowgreen: 2597139199
};
function normalizeColor(color) {
const matchers = getMatchers();
let match;
if (matchers.hex6) {
if (match = matchers.hex6.exec(color)) {
return Number.parseInt(match[1] + "ff", 16) >>> 0;
}
}
if (colorNames[color] !== undefined) {
return colorNames[color];
}
if (matchers.rgb) {
if (match = matchers.rgb.exec(color)) {
return (parse255(match[1]) << 24 | parse255(match[2]) << 16 | parse255(match[3]) << 8 | 255) >>> 0;
}
}
if (matchers.rgba) {
if (match = matchers.rgba.exec(color)) {
return (parse255(match[1]) << 24 | parse255(match[2]) << 16 | parse255(match[3]) << 8 | parse1(match[4])) >>> 0;
}
}
if (matchers.hex3) {
if (match = matchers.hex3.exec(color)) {
return Number.parseInt(match[1] + match[1] + match[2] + match[2] + match[3] + match[3] + "ff", 16) >>> 0;
}
}
if (matchers.hex8) {
if (match = matchers.hex8.exec(color)) {
return Number.parseInt(match[1], 16) >>> 0;
}
}
if (matchers.hex4) {
if (match = matchers.hex4.exec(color)) {
return Number.parseInt(match[1] + match[1] + match[2] + match[2] + match[3] + match[3] + match[4] + match[4], 16) >>> 0;
}
}
if (matchers.hsl) {
if (match = matchers.hsl.exec(color)) {
return (hslToRgb(parse360(match[1]), parsePercentage(match[2]), parsePercentage(match[3])) | 255) >>> 0;
}
}
if (matchers.hsla) {
if (match = matchers.hsla.exec(color)) {
return (hslToRgb(parse360(match[1]), parsePercentage(match[2]), parsePercentage(match[3])) | parse1(match[4])) >>> 0;
}
}
throw new Error(`invalid color string ${color} provided`);
}
function processColor(color) {
const normalizedColor = normalizeColor(color);
return (normalizedColor << 24 | normalizedColor >>> 8) >>> 0;
}
// src/v5-flag.ts
var ENABLE_V5_BREAKING_CHANGES = false;
// src/validate-frame.ts
var validateFrame = ({
allowFloats,
durationInFrames,
frame
}) => {
if (typeof frame === "undefined") {
throw new TypeError(`Argument missing for parameter "frame"`);
}
if (typeof frame !== "number") {
throw new TypeError(`Argument passed for "frame" is not a number: ${frame}`);
}
if (!Number.isFinite(frame)) {
throw new RangeError(`Frame ${frame} is not finite`);
}
if (frame % 1 !== 0 && !allowFloats) {
throw new RangeError(`Argument for frame must be an integer, but got ${frame}`);
}
if (frame < 0 && frame < -durationInFrames) {
throw new RangeError(`Cannot use frame ${frame}: Duration of composition is ${durationInFrames}, therefore the lowest frame that can be rendered is ${-durationInFrames}`);
}
if (frame > durationInFrames - 1) {
throw new RangeError(`Cannot use frame ${frame}: Duration of composition is ${durationInFrames}, therefore the highest frame that can be rendered is ${durationInFrames - 1}`);
}
};
// src/codec.ts
var validCodecs = [
"h264",
"h265",
"vp8",
"vp9",
"mp3",
"aac",
"wav",
"prores",
"h264-mkv",
"h264-ts",
"gif"
];
// src/validation/validate-default-codec.ts
function validateCodec(defaultCodec, location, name) {
if (typeof defaultCodec === "undefined") {
return;
}
if (typeof defaultCodec !== "string") {
throw new TypeError(`The "${name}" prop ${location} must be a string, but you passed a value of type ${typeof defaultCodec}.`);
}
if (!validCodecs.includes(defaultCodec)) {
throw new Error(`The "${name}" prop ${location} must be one of ${validCodecs.join(", ")}, but you passed ${defaultCodec}.`);
}
}
// src/validation/validate-default-props.ts
var validateDefaultAndInputProps = (defaultProps, name, compositionId) => {
if (!defaultProps) {
return;
}
if (typeof defaultProps !== "object") {
throw new Error(`"${name}" must be an object, but you passed a value of type ${typeof defaultProps}`);
}
if (Array.isArray(defaultProps)) {
throw new Error(`"${name}" must be an object, an array was passed ${compositionId ? `for composition "${compositionId}"` : ""}`);
}
};
// src/validation/validate-dimensions.ts
function validateDimension(amount, nameOfProp, location) {
if (typeof amount !== "number") {
throw new Error(`The "${nameOfProp}" prop ${location} must be a number, but you passed a value of type ${typeof amount}`);
}
if (isNaN(amount)) {
throw new TypeError(`The "${nameOfProp}" prop ${location} must not be NaN, but is NaN.`);
}
if (!Number.isFinite(amount)) {
throw new TypeError(`The "${nameOfProp}" prop ${location} must be finite, but is ${amount}.`);
}
if (amount % 1 !== 0) {
throw new TypeError(`The "${nameOfProp}" prop ${location} must be an integer, but is ${amount}.`);
}
if (amount <= 0) {
throw new TypeError(`The "${nameOfProp}" prop ${location} must be positive, but got ${amount}.`);
}
}
// src/validation/validate-duration-in-frames.ts
function validateDurationInFrames(durationInFrames, options) {
const { allowFloats, component } = options;
if (typeof durationInFrames === "undefined") {
throw new Error(`The "durationInFrames" prop ${component} is missing.`);
}
if (typeof durationInFrames !== "number") {
throw new Error(`The "durationInFrames" prop ${component} must be a number, but you passed a value of type ${typeof durationInFrames}`);
}
if (durationInFrames <= 0) {
throw new TypeError(`The "durationInFrames" prop ${component} must be positive, but got ${durationInFrames}.`);
}
if (!allowFloats && durationInFrames % 1 !== 0) {
throw new TypeError(`The "durationInFrames" prop ${component} must be an integer, but got ${durationInFrames}.`);
}
if (!Number.isFinite(durationInFrames)) {
throw new TypeError(`The "durationInFrames" prop ${component} must be finite, but got ${durationInFrames}.`);
}
}
// src/validation/validate-fps.ts
function validateFps(fps, location, isGif) {
if (typeof fps !== "number") {
throw new Error(`"fps" must be a number, but you passed a value of type ${typeof fps} ${location}`);
}
if (!Number.isFinite(fps)) {
throw new Error(`"fps" must be a finite, but you passed ${fps} ${location}`);
}
if (isNaN(fps)) {
throw new Error(`"fps" must not be NaN, but got ${fps} ${location}`);
}
if (fps <= 0) {
throw new TypeError(`"fps" must be positive, but got ${fps} ${location}`);
}
if (isGif && fps > 50) {
throw new TypeError(`The FPS for a GIF cannot be higher than 50. Use the --every-nth-frame option to lower the FPS: https://remotion.dev/docs/render-as-gif`);
}
}
// src/video/get-current-time.ts
var getExpectedMediaFrameUncorrected = ({
frame,
playbackRate,
startFrom
}) => {
return interpolate(frame, [-1, startFrom, startFrom + 1], [-1, startFrom, startFrom + playbackRate]);
};
// src/absolute-src.ts
var getAbsoluteSrc = (relativeSrc) => {
if (typeof window === "undefined") {
return relativeSrc;
}
if (relativeSrc.startsWith("http://") || relativeSrc.startsWith("https://") || relativeSrc.startsWith("file://") || relativeSrc.startsWith("blob:") || relativeSrc.startsWith("data:")) {
return relativeSrc;
}
return new URL(relativeSrc, window.origin).href;
};
// src/video/offthread-video-source.ts
var getOffthreadVideoSource = ({
src,
transparent,
currentTime,
toneMapped
}) => {
return `http://localhost:${window.remotion_proxyPort}/proxy?src=${encodeURIComponent(getAbsoluteSrc(src))}&time=${encodeURIComponent(Math.max(0, currentTime))}&transparent=${String(transparent)}&toneMapped=${String(toneMapped)}`;
};
// src/no-react.ts
var NoReactInternals = {
processColor,
truthy,
validateFps,
validateDimension,
validateDurationInFrames,
validateDefaultAndInputProps,
validateFrame,
serializeJSONWithSpecialTypes,
bundleName: "bundle.js",
bundleMapName: "bundle.js.map",
deserializeJSONWithSpecialTypes,
DELAY_RENDER_CALLSTACK_TOKEN,
DELAY_RENDER_RETRY_TOKEN,
DELAY_RENDER_CLEAR_TOKEN,
DELAY_RENDER_ATTEMPT_TOKEN: DELAY_RENDER_RETRIES_LEFT,
getOffthreadVideoSource,
getExpectedMediaFrameUncorrected,
ENABLE_V5_BREAKING_CHANGES,
MIN_NODE_VERSION: ENABLE_V5_BREAKING_CHANGES ? 18 : 16,
MIN_BUN_VERSION: ENABLE_V5_BREAKING_CHANGES ? "1.1.3" : "1.0.3",
colorNames,
DATE_TOKEN,
FILE_TOKEN,
validateCodec
};
export {
random,
interpolate,
NoReactInternals
};