@remotion/cli 4.0.0-webhook.27 → 4.1.0-alpha2

package/package.json

@@ -1,75 +1,88 @@
 {
-	"name": "@remotion/cli",
-	"version": "4.0.0-webhook.27+eb81308ee",
-	"description": "CLI for Remotion",
-	"main": "dist/index.js",
-	"sideEffects": false,
-	"bin": {
-		"remotion": "remotion-cli.js"
-	},
-	"module": "true",
-	"scripts": {
-		"lint": "eslint src --ext ts,tsx",
-		"test": "vitest --run",
-		"build": "tsc -d",
-		"watch": "tsc -w"
-	},
-	"repository": {
-		"url": "https://github.com/remotion-dev/remotion"
-	},
-	"bugs": {
-		"url": "https://github.com/remotion-dev/remotion/issues"
-	},
-	"author": "Jonny Burger <jonny@remotion.dev>",
-	"license": "SEE LICENSE IN LICENSE.md",
-	"dependencies": {
-		"@remotion/bundler": "4.0.0-webhook.27+eb81308ee",
-		"@remotion/media-utils": "4.0.0-webhook.27+eb81308ee",
-		"@remotion/player": "4.0.0-webhook.27+eb81308ee",
-		"@remotion/renderer": "4.0.0-webhook.27+eb81308ee",
-		"better-opn": "2.1.1",
-		"dotenv": "9.0.2",
-		"memfs": "3.4.3",
-		"minimist": "1.2.6",
-		"remotion": "4.0.0-webhook.27+eb81308ee",
-		"semver": "7.3.5",
-		"source-map": "0.6.1"
-	},
-	"peerDependencies": {
-		"react": ">=16.8.0",
-		"react-dom": ">=16.8.0"
-	},
-	"devDependencies": {
-		"@jonny/eslint-config": "3.0.266",
-		"@types/minimist": "^1.2.2",
-		"@types/node": "^16.7.5",
-		"@types/react": "18.0.1",
-		"@types/react-dom": "18.0.0",
-		"@types/semver": "^7.3.4",
-		"@types/webpack-env": "^1.16.0",
-		"@typescript-eslint/eslint-plugin": "5.18.0",
-		"@typescript-eslint/parser": "5.18.0",
-		"eslint": "8.13.0",
-		"eslint-plugin-10x": "1.5.2",
-		"eslint-plugin-react": "7.29.4",
-		"eslint-plugin-react-hooks": "4.4.0",
-		"prettier": "^2.0.5",
-		"prettier-plugin-organize-imports": "^2.3.4",
-		"react": "^18.0.0",
-		"react-dom": "^18.0.0",
-		"typescript": "^4.7.0",
-		"vitest": "^0.18.0"
-	},
-	"keywords": [
-		"remotion",
-		"ffmpeg",
-		"video",
-		"react",
-		"puppeteer",
-		"player"
-	],
-	"publishConfig": {
-		"access": "public"
-	},
-	"gitHead": "eb81308ee07a402f4a8dd9ff24306bb07dd78175"
-}
+  "name": "@remotion/cli",
+  "version": "4.1.0-alpha2",
+  "description": "CLI for Remotion",
+  "main": "dist/index.js",
+  "sideEffects": false,
+  "bin": {
+    "remotion": "remotion-cli.js"
+  },
+  "repository": {
+    "url": "https://github.com/remotion-dev/remotion"
+  },
+  "bugs": {
+    "url": "https://github.com/remotion-dev/remotion/issues"
+  },
+  "exports": {
+    ".": "./dist/index.js",
+    "./config": "./dist/config/index.js",
+    "./package.json": "./package.json"
+  },
+  "typesVersions": {
+    ">=1.0": {
+      "config": [
+        "dist/config/index.d.ts"
+      ]
+    }
+  },
+  "author": "Jonny Burger <jonny@remotion.dev>",
+  "license": "SEE LICENSE IN LICENSE.md",
+  "dependencies": {
+    "dotenv": "9.0.2",
+    "memfs": "3.4.3",
+    "minimist": "1.2.6",
+    "open": "^8.4.2",
+    "prompts": "2.4.1",
+    "semver": "7.3.5",
+    "source-map": "0.6.1",
+    "@remotion/bundler": "4.1.0-alpha2",
+    "remotion": "4.1.0-alpha2",
+    "@remotion/player": "4.1.0-alpha2",
+    "@remotion/media-utils": "4.1.0-alpha2",
+    "@remotion/renderer": "4.1.0-alpha2"
+  },
+  "peerDependencies": {
+    "react": ">=16.8.0",
+    "react-dom": ">=16.8.0"
+  },
+  "devDependencies": {
+    "@jonny/eslint-config": "3.0.266",
+    "@types/minimist": "^1.2.2",
+    "@types/node": "18.14.6",
+    "@types/prompts": "^2.4.1",
+    "@types/react": "18.0.26",
+    "@types/prettier": "^2.7.2",
+    "@types/react-dom": "18.0.10",
+    "@types/semver": "^7.3.4",
+    "eslint": "8.42.0",
+    "eslint-plugin-10x": "1.5.2",
+    "eslint-plugin-react": "7.29.4",
+    "eslint-plugin-react-hooks": "4.4.0",
+    "prettier": "^2.7.1",
+    "prettier-plugin-organize-imports": "^2.3.4",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
+    "typescript": "4.9.5",
+    "vitest": "0.31.1",
+    "zod": "^3.21.4",
+    "@remotion/tailwind": "4.1.0-alpha2",
+    "@remotion/zod-types": "4.1.0-alpha2"
+  },
+  "keywords": [
+    "remotion",
+    "ffmpeg",
+    "video",
+    "react",
+    "player"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "formatting": "prettier src --check",
+    "lint": "eslint src --ext ts,tsx",
+    "test": "vitest --run",
+    "build": "tsc -d",
+    "watch": "tsc -w"
+  }
+}

package/styles/styles.css

@@ -1,10 +1,12 @@
 html {
-	--blue: #4290f5;
+	--remotion-cli-internals-blue: #0b84f3;
 }
 
 body {
 	overscroll-behavior-y: none;
 	overscroll-behavior-x: none;
+	/* Override Chakra UI position: relative on body */
+	position: static !important;
 }
 
 .remotion-splitter {
@@ -15,7 +17,7 @@ body {
 
 .remotion-splitter:hover,
 .remotion-splitter-active {
-	background-color: var(--blue);
+	background-color: var(--remotion-cli-internals-blue);
 }
 
 input::-webkit-outer-spin-button,
@@ -25,9 +27,18 @@ input::-webkit-inner-spin-button {
 }
 
 input:focus,
+textarea:focus,
 button:focus,
 a:focus {
 	outline: none;
-	box-shadow: 0 0 1px 2px rgba(255, 255, 255, 0.35);
-	border-radius: 2px;
+	box-shadow: inset 1px 1px #555, inset -1px -1px #555, inset 1px -1px #555,
+		inset -1px 1px #555;
+	border-radius: 0 !important;
+}
+
+input[type='color'].__remotion_color_picker::-webkit-color-swatch-wrapper {
+	padding: 0;
+}
+input[type='color'].__remotion_color_picker::-webkit-color-swatch {
+	border: none;
 }

package/.prettierrc.js

@@ -1,14 +0,0 @@
-module.exports = {
-	singleQuote: true,
-	bracketSpacing: false,
-	useTabs: true,
-	overrides: [
-		{
-			files: ['*.yml'],
-			options: {
-				singleQuote: false,
-			},
-		},
-	],
-	plugins: [require.resolve('prettier-plugin-organize-imports')],
-};

package/dist/ansi/ansi-regex.d.ts

@@ -1,2 +0,0 @@
-export declare const ansiRegex: () => RegExp;
-export declare const stripAnsi: (str: string) => string;

package/dist/ansi/ansi-regex.js

@@ -1,18 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.stripAnsi = exports.ansiRegex = void 0;
-const ansiRegex = () => {
-    const pattern = [
-        '[\\u001B\\u009B][[\\]()#;?]*(?:(?:(?:(?:;[-a-zA-Z\\d\\/#&.:=?%@~_]+)*|[a-zA-Z\\d]+(?:;[-a-zA-Z\\d\\/#&.:=?%@~_]*)*)?\\u0007)',
-        '(?:(?:\\d{1,4}(?:;\\d{0,4})*)?[\\dA-PR-TZcf-nq-uy=><~]))',
-    ].join('|');
-    return new RegExp(pattern, 'g');
-};
-exports.ansiRegex = ansiRegex;
-const stripAnsi = (str) => {
-    if (typeof str !== 'string') {
-        throw new TypeError(`Expected a \`string\`, got \`${typeof str}\``);
-    }
-    return str.replace((0, exports.ansiRegex)(), '');
-};
-exports.stripAnsi = stripAnsi;

package/dist/check-version.d.ts

@@ -1 +0,0 @@
-export declare const checkNodeVersion: () => void;

package/dist/check-version.js

@@ -1,14 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.checkNodeVersion = void 0;
-const log_1 = require("./log");
-const semver = require('semver');
-const current = process.version;
-const supported = '>=12.10.0';
-const checkNodeVersion = () => {
-    if (!semver.satisfies(current, supported)) {
-        log_1.Log.warn(`Required node version ${supported} not satisfied with current version ${current}.`);
-        log_1.Log.warn(`Update your node version to ${supported}`);
-    }
-};
-exports.checkNodeVersion = checkNodeVersion;

package/dist/config/ffmpeg-executable.d.ts

@@ -1,5 +0,0 @@
-import type { FfmpegExecutable } from '@remotion/renderer';
-export declare const setFfmpegExecutable: (ffmpegPath: FfmpegExecutable) => void;
-export declare const getCustomFfmpegExecutable: () => FfmpegExecutable;
-export declare const setFfprobeExecutable: (ffprobePath: FfmpegExecutable) => void;
-export declare const getCustomFfprobeExecutable: () => FfmpegExecutable;

package/dist/config/ffmpeg-executable.js

@@ -1,21 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.getCustomFfprobeExecutable = exports.setFfprobeExecutable = exports.getCustomFfmpegExecutable = exports.setFfmpegExecutable = void 0;
-let currentFfmpegExecutablePath = null;
-let currentFfprobeExecutablePath = null;
-const setFfmpegExecutable = (ffmpegPath) => {
-    currentFfmpegExecutablePath = ffmpegPath;
-};
-exports.setFfmpegExecutable = setFfmpegExecutable;
-const getCustomFfmpegExecutable = () => {
-    return currentFfmpegExecutablePath;
-};
-exports.getCustomFfmpegExecutable = getCustomFfmpegExecutable;
-const setFfprobeExecutable = (ffprobePath) => {
-    currentFfprobeExecutablePath = ffprobePath;
-};
-exports.setFfprobeExecutable = setFfprobeExecutable;
-const getCustomFfprobeExecutable = () => {
-    return currentFfprobeExecutablePath;
-};
-exports.getCustomFfprobeExecutable = getCustomFfprobeExecutable;

package/dist/config/quality.d.ts

@@ -1,2 +0,0 @@
-export declare const setQuality: (q: number | undefined) => void;
-export declare const getQuality: () => number | undefined;

package/dist/config/quality.js

@@ -1,17 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.getQuality = exports.setQuality = void 0;
-const renderer_1 = require("@remotion/renderer");
-const defaultValue = undefined;
-let quality = defaultValue;
-const setQuality = (q) => {
-    renderer_1.RenderInternals.validateQuality(q);
-    if (q === 0 || q === undefined) {
-        quality = defaultValue;
-        return;
-    }
-    quality = q;
-};
-exports.setQuality = setQuality;
-const getQuality = () => quality;
-exports.getQuality = getQuality;

package/dist/editor/components/ClipboardIcon.d.ts

@@ -1,2 +0,0 @@
-import React from 'react';
-export declare const ClipboardIcon: React.FC;

package/dist/editor/components/ClipboardIcon.js

@@ -1,12 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ClipboardIcon = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const ClipboardIcon = () => {
-    return ((0, jsx_runtime_1.jsx)("svg", { "aria-hidden": "true", focusable: "false", "data-prefix": "far", "data-icon": "clipboard", className: "svg-inline--fa fa-clipboard fa-w-12", role: "img", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 384 512", style: {
-            height: 16,
-            verticalAlign: 'middle',
-            marginTop: -3,
-        }, children: (0, jsx_runtime_1.jsx)("path", { fill: "currentColor", d: "M336 64h-80c0-35.3-28.7-64-64-64s-64 28.7-64 64H48C21.5 64 0 85.5 0 112v352c0 26.5 21.5 48 48 48h288c26.5 0 48-21.5 48-48V112c0-26.5-21.5-48-48-48zM192 40c13.3 0 24 10.7 24 24s-10.7 24-24 24-24-10.7-24-24 10.7-24 24-24zm144 418c0 3.3-2.7 6-6 6H54c-3.3 0-6-2.7-6-6V118c0-3.3 2.7-6 6-6h42v36c0 6.6 5.4 12 12 12h168c6.6 0 12-5.4 12-12v-36h42c3.3 0 6 2.7 6 6z" }) }));
-};
-exports.ClipboardIcon = ClipboardIcon;

package/dist/editor/components/CollapsedCompositionSelector.d.ts

@@ -1,4 +0,0 @@
-import React from 'react';
-export declare const CollapsedCompositionSelector: React.FC<{
-    onExpand: () => void;
-}>;

package/dist/editor/components/CollapsedCompositionSelector.js

@@ -1,39 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.CollapsedCompositionSelector = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const colors_1 = require("../helpers/colors");
-const caret_1 = require("../icons/caret");
-const z_index_1 = require("../state/z-index");
-const CollapsedCompositionSelector = ({ onExpand }) => {
-    const [hovered, setHovered] = (0, react_1.useState)(false);
-    const { tabIndex } = (0, z_index_1.useZIndex)();
-    const onPointerEnter = (0, react_1.useCallback)(() => {
-        setHovered(true);
-    }, []);
-    const onPointerLeave = (0, react_1.useCallback)(() => {
-        setHovered(false);
-    }, []);
-    const style = (0, react_1.useMemo)(() => {
-        return {
-            border: 'none',
-            borderRight: '2px solid black',
-            cursor: 'pointer',
-            color: 'white',
-            display: 'flex',
-            justifyContent: 'center',
-            alignItems: 'center',
-            paddingLeft: 7,
-            paddingRight: 4,
-            backgroundColor: (0, colors_1.getBackgroundFromHoverState)({
-                hovered,
-                selected: false,
-            }),
-            appearance: 'none',
-            WebkitAppearance: 'none',
-        };
-    }, [hovered]);
-    return ((0, jsx_runtime_1.jsx)("button", { style: style, onPointerEnter: onPointerEnter, onPointerLeave: onPointerLeave, type: "button", role: "button", tabIndex: tabIndex, onClick: onExpand, children: (0, jsx_runtime_1.jsx)(caret_1.CaretRight, {}) }));
-};
-exports.CollapsedCompositionSelector = CollapsedCompositionSelector;

package/dist/editor/components/KeyboardShortcutsModal.d.ts

@@ -1,2 +0,0 @@
-import React from 'react';
-export declare const KeyboardShortcuts: React.FC;

package/dist/editor/components/KeyboardShortcutsModal.js

@@ -1,67 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.KeyboardShortcuts = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const use_keybinding_1 = require("../helpers/use-keybinding");
-const keys_1 = require("../icons/keys");
-const modals_1 = require("../state/modals");
-const layout_1 = require("./layout");
-const ModalContainer_1 = require("./ModalContainer");
-const ModalHeader_1 = require("./ModalHeader");
-const left = {
-    width: 100,
-    paddingTop: 8,
-    paddingBottom: 8,
-};
-const shortLeft = {
-    ...left,
-    width: 40,
-};
-const key = {
-    background: '#333',
-    padding: '3px 6px',
-    color: 'white',
-    borderRadius: 3,
-    border: '1px solid black',
-    borderBottomWidth: 3,
-    fontSize: 13,
-    fontFamily: 'monospace',
-};
-const right = {
-    fontSize: 14,
-    color: '#eee',
-};
-const container = {
-    paddingLeft: 20,
-    paddingRight: 40,
-    paddingTop: 10,
-    paddingBottom: 10,
-};
-const title = {
-    fontWeight: 'bold',
-    color: 'white',
-    fontSize: 14,
-    marginBottom: 10,
-};
-const keyboardShortcutsDisabled = {
-    padding: 12,
-    width: '100%',
-    fontSize: 14,
-    backgroundColor: 'rgba(255, 255, 255, 0.1)',
-};
-const ul = {
-    marginTop: 0,
-    marginBottom: 0,
-};
-const li = {
-    fontSize: 14,
-};
-const KeyboardShortcuts = () => {
-    const { setSelectedModal } = (0, react_1.useContext)(modals_1.ModalsContext);
-    const onQuit = (0, react_1.useCallback)(() => {
-        setSelectedModal(null);
-    }, [setSelectedModal]);
-    return ((0, jsx_runtime_1.jsxs)(ModalContainer_1.ModalContainer, { onEscape: onQuit, onOutsideClick: onQuit, children: [(0, jsx_runtime_1.jsx)(ModalHeader_1.NewCompHeader, { title: "Keyboard shortcuts" }), (0, use_keybinding_1.areKeyboardShortcutsDisabled)() ? ((0, jsx_runtime_1.jsxs)("div", { style: keyboardShortcutsDisabled, children: ["Keyboard shortcuts disabled either due to:", (0, jsx_runtime_1.jsxs)("ul", { style: ul, children: [(0, jsx_runtime_1.jsx)("li", { style: li, children: "a) --disable-keyboard-shortcuts being passed" }), (0, jsx_runtime_1.jsx)("li", { style: li, children: "b) Config.Preview.setKeyboardShortcutsEnabled(false) being set or" }), (0, jsx_runtime_1.jsx)("li", { style: li, children: " c) a Remotion version mismatch." })] })] })) : null, (0, jsx_runtime_1.jsxs)(layout_1.Row, { style: container, children: [(0, jsx_runtime_1.jsxs)(layout_1.Column, { children: [(0, jsx_runtime_1.jsx)("div", { style: title, children: "Playback" }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsxs)("div", { style: left, children: [(0, jsx_runtime_1.jsx)("kbd", { style: key, children: (0, jsx_runtime_1.jsx)(keys_1.ShiftIcon, {}) }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 0.3 }), (0, jsx_runtime_1.jsx)("kbd", { style: key, children: (0, jsx_runtime_1.jsx)(keys_1.ArrowLeft, {}) })] }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "1 second back" })] }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: left, children: (0, jsx_runtime_1.jsx)("kbd", { style: key, children: (0, jsx_runtime_1.jsx)(keys_1.ArrowLeft, {}) }) }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "Previous frame" })] }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: left, children: (0, jsx_runtime_1.jsx)("kbd", { style: key, children: "Space" }) }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "Play / Pause" })] }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: left, children: (0, jsx_runtime_1.jsx)("kbd", { style: key, children: (0, jsx_runtime_1.jsx)(keys_1.ArrowRight, {}) }) }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "Next frame" })] }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsxs)("div", { style: left, children: [(0, jsx_runtime_1.jsx)("kbd", { style: key, children: (0, jsx_runtime_1.jsx)(keys_1.ShiftIcon, {}) }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 0.3 }), (0, jsx_runtime_1.jsx)("kbd", { style: key, children: (0, jsx_runtime_1.jsx)(keys_1.ArrowRight, {}) })] }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "1 second forward" })] }), (0, jsx_runtime_1.jsx)("br", {}), (0, jsx_runtime_1.jsx)("br", {}), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: left, children: (0, jsx_runtime_1.jsx)("kbd", { style: key, children: "A" }) }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "Jump to beginning" })] }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: left, children: (0, jsx_runtime_1.jsx)("kbd", { style: key, children: "E" }) }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "Jump to end" })] }), (0, jsx_runtime_1.jsx)("br", {}), (0, jsx_runtime_1.jsx)("br", {}), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: left, children: (0, jsx_runtime_1.jsx)("kbd", { style: key, children: "J" }) }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "Reverse playback" })] }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: left, children: (0, jsx_runtime_1.jsx)("kbd", { style: key, children: "K" }) }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "Pause" })] }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: left, children: (0, jsx_runtime_1.jsx)("kbd", { style: key, children: "L" }) }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "Play / Speed up" })] }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: left, children: (0, jsx_runtime_1.jsx)("kbd", { style: key, children: "Enter" }) }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "Pause & return to playback start" })] })] }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 8 }), (0, jsx_runtime_1.jsxs)(layout_1.Column, { children: [(0, jsx_runtime_1.jsx)("div", { style: title, children: "Navigation" }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: shortLeft, children: (0, jsx_runtime_1.jsx)("kbd", { style: key, children: "N" }) }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "New composition" })] }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: shortLeft, children: (0, jsx_runtime_1.jsx)("kbd", { style: key, children: "T" }) }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "Toggle checkerboard transparency" })] }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: shortLeft, children: (0, jsx_runtime_1.jsx)("kbd", { style: key, children: "?" }) }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "Show keyboard shortcuts" })] }), (0, jsx_runtime_1.jsx)("br", {}), (0, jsx_runtime_1.jsx)("div", { style: title, children: "Playback range" }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: shortLeft, children: (0, jsx_runtime_1.jsx)("kbd", { style: key, children: "I" }) }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "Set In Point" })] }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: shortLeft, children: (0, jsx_runtime_1.jsx)("kbd", { style: key, children: "O" }) }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "Set Out Point" })] }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: shortLeft, children: (0, jsx_runtime_1.jsx)("kbd", { style: key, children: "X" }) }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "Clear In/Out Points" })] }), (0, jsx_runtime_1.jsx)("br", {}), (0, jsx_runtime_1.jsx)("div", { style: title, children: "Zoom" }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: shortLeft, children: (0, jsx_runtime_1.jsx)("kbd", { style: key, children: "+" }) }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "Zoom in" })] }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: shortLeft, children: (0, jsx_runtime_1.jsx)("kbd", { style: key, children: "-" }) }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "Zoom out" })] }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: shortLeft, children: (0, jsx_runtime_1.jsx)("kbd", { style: key, children: "0" }) }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "Reset zoom" })] })] })] })] }));
-};
-exports.KeyboardShortcuts = KeyboardShortcuts;

package/dist/editor/components/RichTimelineToggle.d.ts

@@ -1,2 +0,0 @@
-import React from 'react';
-export declare const RichTimelineToggle: React.FC;

package/dist/editor/components/RichTimelineToggle.js

@@ -1,29 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.RichTimelineToggle = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const is_current_selected_still_1 = require("../helpers/is-current-selected-still");
-const timeline_1 = require("../icons/timeline");
-const rich_timeline_1 = require("../state/rich-timeline");
-const ControlButton_1 = require("./ControlButton");
-const tooltip = 'Enable rich timeline. Go to remotion.dev/docs/timeline for more information.';
-const RichTimelineToggle = () => {
-    const { richTimeline, setRichTimeline } = (0, react_1.useContext)(rich_timeline_1.RichTimelineContext);
-    const isStill = (0, is_current_selected_still_1.useIsStill)();
-    const onClick = (0, react_1.useCallback)(() => {
-        setRichTimeline((c) => {
-            (0, rich_timeline_1.persistRichTimelineOption)(!c);
-            return !c;
-        });
-    }, [setRichTimeline]);
-    if (isStill) {
-        return null;
-    }
-    return ((0, jsx_runtime_1.jsx)(ControlButton_1.ControlButton, { title: tooltip, "aria-label": tooltip, onClick: onClick, children: (0, jsx_runtime_1.jsx)(timeline_1.TimelineIcon, { style: {
-                width: 16,
-                height: 16,
-                color: richTimeline ? 'var(--blue)' : 'white',
-            } }) }));
-};
-exports.RichTimelineToggle = RichTimelineToggle;

package/dist/editor/components/Thumbnail.d.ts

@@ -1,8 +0,0 @@
-import React from 'react';
-import type { TComposition } from 'remotion';
-export declare const Thumbnail: React.FC<{
-    composition: TComposition<unknown>;
-    targetHeight: number;
-    targetWidth: number;
-    frameToDisplay: number;
-}>;

package/dist/editor/components/Thumbnail.js

@@ -1,76 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Thumbnail = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const remotion_1 = require("remotion");
-const checkerboard_background_1 = require("../helpers/checkerboard-background");
-const checkerboard_1 = require("../state/checkerboard");
-const Thumbnail = ({ composition, targetHeight, targetWidth, frameToDisplay }) => {
-    const { height, width } = composition;
-    const heightRatio = targetHeight / height;
-    const widthRatio = targetWidth / width;
-    const ratio = Math.min(heightRatio, widthRatio);
-    const scale = ratio;
-    const actualWidth = width * scale;
-    const actualHeight = height * scale;
-    const correction = 0 - (1 - scale) / 2;
-    const xCorrection = correction * width;
-    const yCorrection = correction * height;
-    const [thumbnailId] = (0, react_1.useState)(() => String((0, remotion_1.random)(null)));
-    const { checkerboard } = (0, react_1.useContext)(checkerboard_1.CheckerboardContext);
-    const container = (0, react_1.useMemo)(() => {
-        return {
-            width: targetWidth,
-            height: targetHeight,
-            backgroundColor: 'rgba(0, 0, 0, 0.4)',
-            display: 'flex',
-            justifyContent: 'center',
-            alignItems: 'center',
-        };
-    }, [targetHeight, targetWidth]);
-    const outer = (0, react_1.useMemo)(() => {
-        return {
-            width: actualWidth,
-            height: actualHeight,
-            backgroundColor: (0, checkerboard_background_1.checkerboardBackgroundColor)(checkerboard),
-            backgroundImage: (0, checkerboard_background_1.checkerboardBackgroundImage)(checkerboard),
-            backgroundPosition: (0, checkerboard_background_1.getCheckerboardBackgroundPos)(25),
-            backgroundSize: (0, checkerboard_background_1.getCheckerboardBackgroundPos)(25),
-        };
-    }, [actualHeight, actualWidth, checkerboard]);
-    const inner = (0, react_1.useMemo)(() => {
-        return {
-            width,
-            height,
-            transform: `scale(${scale}) `,
-            overflow: 'hidden',
-            marginLeft: xCorrection,
-            marginTop: yCorrection,
-            display: 'flex',
-            color: 'black',
-        };
-    }, [height, scale, width, xCorrection, yCorrection]);
-    const timelineState = (0, react_1.useMemo)(() => {
-        return {
-            playing: false,
-            frame: frameToDisplay,
-            rootId: thumbnailId,
-            imperativePlaying: {
-                current: false,
-            },
-            playbackRate: 1,
-            setPlaybackRate: () => {
-                throw new Error('thumbnail');
-            },
-            audioAndVideoTags: { current: [] },
-        };
-    }, [frameToDisplay, thumbnailId]);
-    const props = (0, react_1.useMemo)(() => {
-        var _a;
-        return (_a = composition.defaultProps) !== null && _a !== void 0 ? _a : {};
-    }, [composition.defaultProps]);
-    const ThumbnailComponent = composition.component;
-    return ((0, jsx_runtime_1.jsx)("div", { style: container, children: (0, jsx_runtime_1.jsx)(react_1.Suspense, { fallback: null, children: (0, jsx_runtime_1.jsx)("div", { style: outer, children: (0, jsx_runtime_1.jsx)("div", { style: inner, children: (0, jsx_runtime_1.jsx)(remotion_1.Internals.Timeline.TimelineContext.Provider, { value: timelineState, children: (0, jsx_runtime_1.jsx)(ThumbnailComponent, { ...props }) }) }) }) }) }));
-};
-exports.Thumbnail = Thumbnail;

package/dist/editor/helpers/use-compact-ui.d.ts

@@ -1 +0,0 @@
-export declare function useCompactUI(): boolean;

package/dist/editor/icons/film.d.ts

@@ -1,3 +0,0 @@
-import type { SVGProps } from 'react';
-import React from 'react';
-export declare const FilmIcon: React.FC<SVGProps<SVGSVGElement>>;

package/dist/editor/icons/film.js

@@ -1,8 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.FilmIcon = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const FilmIcon = (props) => {
-    return ((0, jsx_runtime_1.jsx)("svg", { viewBox: "0 0 512 512", ...props, children: (0, jsx_runtime_1.jsx)("path", { fill: "currentColor", d: "M488 64h-8v20c0 6.6-5.4 12-12 12h-40c-6.6 0-12-5.4-12-12V64H96v20c0 6.6-5.4 12-12 12H44c-6.6 0-12-5.4-12-12V64h-8C10.7 64 0 74.7 0 88v336c0 13.3 10.7 24 24 24h8v-20c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v20h320v-20c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v20h8c13.3 0 24-10.7 24-24V88c0-13.3-10.7-24-24-24zM96 372c0 6.6-5.4 12-12 12H44c-6.6 0-12-5.4-12-12v-40c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40zm0-96c0 6.6-5.4 12-12 12H44c-6.6 0-12-5.4-12-12v-40c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40zm0-96c0 6.6-5.4 12-12 12H44c-6.6 0-12-5.4-12-12v-40c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40zm280 208c0 6.6-5.4 12-12 12H148c-6.6 0-12-5.4-12-12V124c0-6.6 5.4-12 12-12h216c6.6 0 12 5.4 12 12v264zm104-16c0 6.6-5.4 12-12 12h-40c-6.6 0-12-5.4-12-12v-40c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40zm0-96c0 6.6-5.4 12-12 12h-40c-6.6 0-12-5.4-12-12v-40c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40zm0-96c0 6.6-5.4 12-12 12h-40c-6.6 0-12-5.4-12-12v-40c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40z" }) }));
-};
-exports.FilmIcon = FilmIcon;

package/dist/editor/icons/timeline.d.ts

@@ -1,3 +0,0 @@
-import type { SVGProps } from 'react';
-import React from 'react';
-export declare const TimelineIcon: React.FC<SVGProps<SVGSVGElement>>;

package/dist/editor/icons/timeline.js

@@ -1,9 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.TimelineIcon = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const TimelineIcon = (props) => {
-    var _a;
-    return ((0, jsx_runtime_1.jsx)("svg", { "aria-hidden": "true", focusable: "false", "data-prefix": "fas", "data-icon": "stream", className: "svg-inline--fa fa-stream fa-w-16", role: "img", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 512 512", ...props, children: (0, jsx_runtime_1.jsx)("path", { fill: (_a = props.style) === null || _a === void 0 ? void 0 : _a.color, d: "M16 128h416c8.84 0 16-7.16 16-16V48c0-8.84-7.16-16-16-16H16C7.16 32 0 39.16 0 48v64c0 8.84 7.16 16 16 16zm480 80H80c-8.84 0-16 7.16-16 16v64c0 8.84 7.16 16 16 16h416c8.84 0 16-7.16 16-16v-64c0-8.84-7.16-16-16-16zm-64 176H16c-8.84 0-16 7.16-16 16v64c0 8.84 7.16 16 16 16h416c8.84 0 16-7.16 16-16v-64c0-8.84-7.16-16-16-16z" }) }));
-};
-exports.TimelineIcon = TimelineIcon;

package/dist/editor/state/rich-timeline.d.ts

@@ -1,9 +0,0 @@
-/// <reference types="react" />
-declare type State = {
-    richTimeline: boolean;
-    setRichTimeline: (cb: (prevState: boolean) => boolean) => void;
-};
-export declare const persistRichTimelineOption: (option: boolean) => void;
-export declare const loadRichTimelineOption: () => boolean;
-export declare const RichTimelineContext: import("react").Context<State>;
-export {};