@remotion/studio 4.0.80

package/dist/codemods/update-default-props.js

@@ -0,0 +1,137 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.updateDefaultProps = void 0;
+const stringify_with_path_1 = require("./stringify-with-path");
+const findStarter = ({ input, compositionId, }) => {
+    const format1 = input.indexOf(`id="${compositionId}"`);
+    if (format1 > -1) {
+        return format1;
+    }
+    const format2 = input.indexOf(`id='${compositionId}'`);
+    if (format2 > -1) {
+        return format2;
+    }
+    const format3 = input.indexOf(`id={'${compositionId}'}`);
+    if (format3 > -1) {
+        return format3;
+    }
+    const format4 = input.indexOf(`id={"${compositionId}"}`);
+    if (format4 > -1) {
+        return format4;
+    }
+    const format5 = input.indexOf(`id={\`${compositionId}\``);
+    if (format5 > -1) {
+        return format5;
+    }
+    throw new Error(`Could not find composition ID ${compositionId} in file`);
+};
+const findEndPosition = (input, currentPosition) => {
+    const asConstVersion = input
+        .slice(currentPosition + 1)
+        .search(/as\sconst[ \t\n\r]+\}/);
+    if (asConstVersion !== -1) {
+        const nextEnd = input.indexOf('}', asConstVersion + currentPosition + 1);
+        return nextEnd - 1;
+    }
+    // When updating e.g. `defaultProps={{union: {type: 'car' as const, color: ''}}}`
+    const nextTriple = input.indexOf('}}}', currentPosition + 1);
+    if (nextTriple !== -1) {
+        return nextTriple + 1;
+    }
+    const nextLinux = input.indexOf('}}\n', currentPosition + 1);
+    const nextWindows = input.indexOf('}}\r', currentPosition + 1);
+    if (nextLinux !== -1) {
+        return nextLinux;
+    }
+    if (nextWindows !== -1) {
+        return nextWindows;
+    }
+    throw new Error('Could not find end of defaultProps');
+};
+const findEnder = (input, position, maxPosition, compositionId) => {
+    let currentPosition = position;
+    while (currentPosition < maxPosition) {
+        const next = findEndPosition(input, currentPosition);
+        currentPosition = next;
+        const nextChar = input[next + 1];
+        if (nextChar === ',') {
+            continue;
+        }
+        return [position, currentPosition + 1];
+    }
+    throw new Error(`No \`defaultProps\` prop found in the <Composition/> tag with the ID "${compositionId}".`);
+};
+const findTerminators = (input, position) => {
+    const nextComposition = input.indexOf('<Composition', position);
+    if (nextComposition > -1) {
+        return nextComposition;
+    }
+    const nextStill = input.indexOf('<Still', position);
+    if (nextStill > -1) {
+        return nextStill;
+    }
+    return Infinity;
+};
+const updateDefaultProps = async ({ input, compositionId, newDefaultProps, enumPaths, }) => {
+    const starter = findStarter({ input, compositionId });
+    const START_TOKEN = 'defaultProps={';
+    const start = input.indexOf(START_TOKEN, starter);
+    if (start === -1) {
+        throw new Error(`No \`defaultProps\` prop found in the <Composition/> tag with the ID "${compositionId}".`);
+    }
+    const maxEnd = findTerminators(input, starter);
+    const [startPos, endPos] = findEnder(input, start + START_TOKEN.length, maxEnd, compositionId);
+    // eslint-disable-next-line @typescript-eslint/consistent-type-imports
+    let prettier = null;
+    try {
+        prettier = await Promise.resolve().then(() => __importStar(require('prettier')));
+    }
+    catch (err) {
+        throw new Error('Prettier cannot be found in the current project.');
+    }
+    const { format, resolveConfig, resolveConfigFile } = prettier;
+    const newFile = input.substring(0, startPos) +
+        (0, stringify_with_path_1.stringifyDefaultProps)({ props: newDefaultProps, enumPaths }) +
+        input.substring(endPos);
+    const configFilePath = await resolveConfigFile();
+    if (!configFilePath) {
+        throw new Error('The Prettier config file was not found');
+    }
+    const prettierConfig = await resolveConfig(configFilePath);
+    if (!prettierConfig) {
+        throw new Error(`The Prettier config at ${configFilePath} could not be read`);
+    }
+    const prettified = format(newFile, {
+        ...prettierConfig,
+        rangeStart: startPos,
+        rangeEnd: endPos,
+        filepath: 'test.tsx',
+        plugins: [],
+        endOfLine: 'auto',
+    });
+    return prettified;
+};
+exports.updateDefaultProps = updateDefaultProps;

package/dist/command.d.ts

@@ -0,0 +1,2 @@
+import type { LogLevel } from '@remotion/renderer';
+export declare const studioCommand: (remotionRoot: string, args: string[], logLevel: LogLevel) => Promise<void>;

package/dist/command.js

@@ -0,0 +1,157 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.studioCommand = void 0;
+const node_crypto_1 = __importDefault(require("node:crypto"));
+const node_fs_1 = require("node:fs");
+const node_path_1 = __importDefault(require("node:path"));
+const better_opn_1 = require("../../cli/src/better-opn");
+const chalk_1 = require("../../cli/src/chalk");
+const config_1 = require("../../cli/src/config");
+const convert_entry_point_to_serve_url_1 = require("../../cli/src/convert-entry-point-to-serve-url");
+const entry_point_1 = require("../../cli/src/entry-point");
+const get_env_1 = require("../../cli/src/get-env");
+const get_input_props_1 = require("../../cli/src/get-input-props");
+const get_network_address_1 = require("../../cli/src/get-network-address");
+const log_1 = require("../../cli/src/log");
+const parse_command_line_1 = require("../../cli/src/parse-command-line");
+const get_absolute_public_dir_1 = require("../../cli/src/preview-server/get-absolute-public-dir");
+const live_events_1 = require("../../cli/src/preview-server/live-events");
+const public_folder_1 = require("../../cli/src/preview-server/public-folder");
+const start_server_1 = require("../../cli/src/preview-server/start-server");
+const server_ready_comment_1 = require("../../cli/src/server-ready-comment");
+const watch_root_file_1 = require("./watch-root-file");
+const noop = () => undefined;
+const getShouldOpenBrowser = () => {
+    var _a;
+    // Minimist quirk: Adding `--no-open` flag will result in {['no-open']: false, open: true}
+    // @ts-expect-error
+    if (parse_command_line_1.parsedCli.open === false) {
+        return {
+            shouldOpenBrowser: false,
+            reasonForBrowserDecision: '--no-open specified',
+        };
+    }
+    if (((_a = process.env.BROWSER) !== null && _a !== void 0 ? _a : '').toLowerCase() === 'none') {
+        return {
+            shouldOpenBrowser: false,
+            reasonForBrowserDecision: 'env BROWSER=none was set',
+        };
+    }
+    if (config_1.ConfigInternals.getShouldOpenBrowser() === false) {
+        return { shouldOpenBrowser: false, reasonForBrowserDecision: 'Config file' };
+    }
+    return { shouldOpenBrowser: true, reasonForBrowserDecision: 'default' };
+};
+const getPort = () => {
+    if (parse_command_line_1.parsedCli.port) {
+        return parse_command_line_1.parsedCli.port;
+    }
+    const serverPort = config_1.ConfigInternals.getStudioPort();
+    if (serverPort) {
+        return serverPort;
+    }
+    return null;
+};
+const studioCommand = async (remotionRoot, args, logLevel) => {
+    const { file, reason } = (0, entry_point_1.findEntryPoint)(args, remotionRoot, logLevel);
+    log_1.Log.verbose({ indent: false, logLevel }, 'Entry point:', file, 'reason:', reason);
+    if (!file) {
+        log_1.Log.error('No Remotion entrypoint was found. Specify an additional argument manually:');
+        log_1.Log.error('  npx remotion studio src/index.ts');
+        log_1.Log.error('See https://www.remotion.dev/docs/register-root for more information.');
+        process.exit(1);
+    }
+    const desiredPort = getPort();
+    const fullEntryPath = (0, convert_entry_point_to_serve_url_1.convertEntryPointToServeUrl)(file);
+    let inputProps = (0, get_input_props_1.getInputProps)((newProps) => {
+        (0, live_events_1.waitForLiveEventsListener)().then((listener) => {
+            inputProps = newProps;
+            listener.sendEventToClient({
+                type: 'new-input-props',
+                newProps,
+            });
+        });
+    }, logLevel);
+    let envVariables = (0, get_env_1.getEnvironmentVariables)((newEnvVariables) => {
+        (0, live_events_1.waitForLiveEventsListener)().then((listener) => {
+            envVariables = newEnvVariables;
+            listener.sendEventToClient({
+                type: 'new-env-variables',
+                newEnvVariables,
+            });
+        });
+    }, logLevel);
+    const publicDir = (0, get_absolute_public_dir_1.getAbsolutePublicDir)({
+        userPassedPublicDir: config_1.ConfigInternals.getPublicDir(),
+        remotionRoot,
+    });
+    const hash = node_crypto_1.default.randomBytes(6).toString('hex');
+    const outputHashPrefix = '/outputs-';
+    const outputHash = `${outputHashPrefix}${hash}`;
+    const staticHashPrefix = '/static-';
+    const staticHash = `${staticHashPrefix}${hash}`;
+    (0, public_folder_1.initPublicFolderWatch)({
+        publicDir,
+        remotionRoot,
+        onUpdate: () => {
+            (0, live_events_1.waitForLiveEventsListener)().then((listener) => {
+                const files = (0, public_folder_1.getFiles)();
+                listener.sendEventToClient({
+                    type: 'new-public-folder',
+                    files,
+                    folderExists: files.length > 0
+                        ? publicDir
+                        : (0, node_fs_1.existsSync)(publicDir)
+                            ? publicDir
+                            : null,
+                });
+            });
+        },
+        staticHash,
+    });
+    (0, watch_root_file_1.watchRootFile)(remotionRoot);
+    const { port, liveEventsServer } = await (0, start_server_1.startServer)({
+        entry: node_path_1.default.resolve(__dirname, 'previewEntry.js'),
+        userDefinedComponent: fullEntryPath,
+        getCurrentInputProps: () => inputProps,
+        getEnvVariables: () => envVariables,
+        port: desiredPort,
+        maxTimelineTracks: config_1.ConfigInternals.getMaxTimelineTracks(),
+        remotionRoot,
+        keyboardShortcutsEnabled: config_1.ConfigInternals.getKeyboardShortcutsEnabled(),
+        publicDir,
+        webpackOverride: config_1.ConfigInternals.getWebpackOverrideFn(),
+        poll: config_1.ConfigInternals.getWebpackPolling(),
+        userPassedPublicDir: config_1.ConfigInternals.getPublicDir(),
+        staticHash,
+        staticHashPrefix,
+        outputHash,
+        outputHashPrefix,
+        logLevel,
+    });
+    (0, live_events_1.setLiveEventsListener)(liveEventsServer);
+    const networkAddress = (0, get_network_address_1.getNetworkAddress)();
+    if (networkAddress) {
+        (0, server_ready_comment_1.setServerReadyComment)(`Local: ${chalk_1.chalk.underline(`http://localhost:${port}`)}, Network: ${chalk_1.chalk.underline(`http://${networkAddress}:${port}`)}`);
+    }
+    else {
+        (0, server_ready_comment_1.setServerReadyComment)(`http://localhost:${port}`);
+    }
+    (0, server_ready_comment_1.printServerReadyComment)('Server ready');
+    const { reasonForBrowserDecision, shouldOpenBrowser } = getShouldOpenBrowser();
+    if (shouldOpenBrowser) {
+        await (0, better_opn_1.openBrowser)({
+            url: `http://localhost:${port}`,
+            browserArgs: parse_command_line_1.parsedCli['browser-args'],
+            browserFlag: parse_command_line_1.parsedCli.browser,
+        });
+    }
+    else {
+        log_1.Log.verbose({ indent: false, logLevel }, `Not opening browser, reason: ${reasonForBrowserDecision}`);
+    }
+    await new Promise(noop);
+};
+exports.studioCommand = studioCommand;

package/dist/components/AssetSelector.d.ts

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

package/dist/components/AssetSelector.js

@@ -0,0 +1,102 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AssetSelector = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = __importStar(require("react"));
+const remotion_1 = require("remotion");
+const colors_1 = require("../helpers/colors");
+const create_folder_tree_1 = require("../helpers/create-folder-tree");
+const event_source_1 = require("../helpers/event-source");
+const persist_open_folders_1 = require("../helpers/persist-open-folders");
+const folders_1 = require("../state/folders");
+const z_index_1 = require("../state/z-index");
+const AssetSelectorItem_1 = require("./AssetSelectorItem");
+const styles_1 = require("./Menu/styles");
+const container = {
+    display: 'flex',
+    flexDirection: 'column',
+    flex: 1,
+    overflow: 'hidden',
+    backgroundColor: colors_1.BACKGROUND,
+};
+// Some redundancy with packages/cli/src/editor/components/RenderModal/SchemaEditor/SchemaErrorMessages.tsx
+const emptyState = {
+    display: 'flex',
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    textAlign: 'center',
+    padding: '0 12px',
+};
+const label = {
+    color: colors_1.LIGHT_TEXT,
+    lineHeight: 1.5,
+    fontSize: 14,
+};
+const list = {
+    height: '100%',
+    overflowY: 'auto',
+};
+const AssetSelector = () => {
+    const { tabIndex } = (0, z_index_1.useZIndex)();
+    const { assetFoldersExpanded, setAssetFoldersExpanded } = (0, react_1.useContext)(folders_1.FolderContext);
+    const [{ publicFolderExists, staticFiles }, setState] = react_1.default.useState(() => {
+        return {
+            staticFiles: (0, remotion_1.getStaticFiles)(),
+            publicFolderExists: window.remotion_publicFolderExists,
+        };
+    });
+    const assetTree = (0, react_1.useMemo)(() => {
+        return (0, create_folder_tree_1.buildAssetFolderStructure)(staticFiles, null, assetFoldersExpanded);
+    }, [assetFoldersExpanded, staticFiles]);
+    (0, react_1.useEffect)(() => {
+        const onUpdate = () => {
+            setState({
+                staticFiles: (0, remotion_1.getStaticFiles)(),
+                publicFolderExists: window.remotion_publicFolderExists,
+            });
+        };
+        const unsub = (0, event_source_1.subscribeToEvent)('new-public-folder', onUpdate);
+        return () => {
+            unsub();
+        };
+    }, []);
+    const toggleFolder = (0, react_1.useCallback)((folderName, parentName) => {
+        setAssetFoldersExpanded((p) => {
+            var _a;
+            const key = [parentName, folderName].filter(Boolean).join('/');
+            const prev = (_a = p[key]) !== null && _a !== void 0 ? _a : false;
+            const foldersExpandedState = {
+                ...p,
+                [key]: !prev,
+            };
+            (0, persist_open_folders_1.persistExpandedFolders)('assets', foldersExpandedState);
+            return foldersExpandedState;
+        });
+    }, [setAssetFoldersExpanded]);
+    return ((0, jsx_runtime_1.jsx)("div", { style: container, children: staticFiles.length === 0 ? (publicFolderExists ? ((0, jsx_runtime_1.jsx)("div", { style: emptyState, children: (0, jsx_runtime_1.jsxs)("div", { style: label, children: ["To add assets, place a file in the", ' ', (0, jsx_runtime_1.jsx)("code", { style: styles_1.inlineCodeSnippet, children: "public" }), " folder of your project."] }) })) : ((0, jsx_runtime_1.jsx)("div", { style: emptyState, children: (0, jsx_runtime_1.jsxs)("div", { style: label, children: ["To add assets, create a folder called", ' ', (0, jsx_runtime_1.jsx)("code", { style: styles_1.inlineCodeSnippet, children: "public" }), " in the root of your project and place a file in it."] }) }))) : ((0, jsx_runtime_1.jsx)("div", { className: "__remotion-vertical-scrollbar", style: list, children: (0, jsx_runtime_1.jsx)(AssetSelectorItem_1.AssetFolderTree, { item: assetTree, level: 0, parentFolder: null, name: null, tabIndex: tabIndex, toggleFolder: toggleFolder }) })) }));
+};
+exports.AssetSelector = AssetSelector;

package/dist/components/AssetSelectorItem.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import type { AssetStructure } from '../helpers/create-folder-tree';
+export declare const AssetFolderTree: React.FC<{
+    item: AssetStructure;
+    name: string | null;
+    parentFolder: string | null;
+    level: number;
+    tabIndex: number;
+    toggleFolder: (folderName: string, parentName: string | null) => void;
+}>;

package/dist/components/AssetSelectorItem.js

@@ -0,0 +1,194 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AssetFolderTree = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = __importStar(require("react"));
+const remotion_1 = require("remotion");
+const no_react_1 = require("remotion/no-react");
+const colors_1 = require("../helpers/colors");
+const copy_text_1 = require("../helpers/copy-text");
+const clipboard_1 = require("../icons/clipboard");
+const file_1 = require("../icons/file");
+const folder_1 = require("../icons/folder");
+const InlineAction_1 = require("./InlineAction");
+const layout_1 = require("./layout");
+const NotificationCenter_1 = require("./Notifications/NotificationCenter");
+const actions_1 = require("./RenderQueue/actions");
+const ASSET_ITEM_HEIGHT = 32;
+const iconStyle = {
+    width: 18,
+    height: 18,
+    flexShrink: 0,
+};
+const itemStyle = {
+    paddingRight: 10,
+    paddingTop: 6,
+    paddingBottom: 6,
+    fontSize: 13,
+    display: 'flex',
+    textDecoration: 'none',
+    cursor: 'default',
+    alignItems: 'center',
+    marginBottom: 1,
+    appearance: 'none',
+    border: 'none',
+    width: '100%',
+    textAlign: 'left',
+    backgroundColor: colors_1.BACKGROUND,
+    height: ASSET_ITEM_HEIGHT,
+    userSelect: 'none',
+};
+const labelStyle = {
+    textAlign: 'left',
+    textDecoration: 'none',
+    fontSize: 13,
+    flex: '1 1 0%',
+    whiteSpace: 'nowrap',
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+};
+const revealIconStyle = {
+    height: 12,
+    color: 'currentColor',
+};
+const AssetFolderItem = ({ tabIndex, item, level, parentFolder, toggleFolder }) => {
+    const [hovered, setHovered] = (0, react_1.useState)(false);
+    const onPointerEnter = (0, react_1.useCallback)(() => {
+        setHovered(true);
+    }, []);
+    const onPointerLeave = (0, react_1.useCallback)(() => {
+        setHovered(false);
+    }, []);
+    const folderStyle = (0, react_1.useMemo)(() => {
+        return {
+            ...itemStyle,
+            paddingLeft: 4 + level * 8,
+            backgroundColor: hovered ? colors_1.CLEAR_HOVER : 'transparent',
+        };
+    }, [hovered, level]);
+    const label = (0, react_1.useMemo)(() => {
+        return {
+            ...labelStyle,
+            color: hovered ? 'white' : colors_1.LIGHT_TEXT,
+        };
+    }, [hovered]);
+    const onClick = (0, react_1.useCallback)(() => {
+        toggleFolder(item.name, parentFolder);
+    }, [item.name, parentFolder, toggleFolder]);
+    const Icon = item.expanded ? folder_1.ExpandedFolderIcon : folder_1.CollapsedFolderIcon;
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { style: folderStyle, onPointerEnter: onPointerEnter, onPointerLeave: onPointerLeave, tabIndex: tabIndex, title: item.name, onClick: onClick, children: (0, jsx_runtime_1.jsxs)(layout_1.Row, { children: [(0, jsx_runtime_1.jsx)(Icon, { style: iconStyle, color: hovered ? 'white' : colors_1.LIGHT_TEXT }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 1 }), (0, jsx_runtime_1.jsx)("div", { style: label, children: item.name })] }) }), item.expanded ? ((0, jsx_runtime_1.jsx)(exports.AssetFolderTree, { item: item.items, name: item.name, level: level, parentFolder: parentFolder, tabIndex: tabIndex, toggleFolder: toggleFolder }, item.name)) : null] }));
+};
+const AssetFolderTree = ({ item, level, name, parentFolder, toggleFolder, tabIndex }) => {
+    const combinedParents = (0, react_1.useMemo)(() => {
+        return [parentFolder, name].filter(no_react_1.NoReactInternals.truthy).join('/');
+    }, [name, parentFolder]);
+    return ((0, jsx_runtime_1.jsxs)("div", { children: [item.folders.map((folder) => {
+                return ((0, jsx_runtime_1.jsx)(AssetFolderItem, { item: folder, tabIndex: tabIndex, level: level + 1, parentFolder: combinedParents, toggleFolder: toggleFolder }, folder.name));
+            }), item.files.map((file) => {
+                return ((0, jsx_runtime_1.jsx)(AssetSelectorItem, { item: file, tabIndex: tabIndex, level: level, parentFolder: combinedParents }, file.src));
+            })] }));
+};
+exports.AssetFolderTree = AssetFolderTree;
+const AssetSelectorItem = ({ item, tabIndex, level, parentFolder }) => {
+    const [hovered, setHovered] = (0, react_1.useState)(false);
+    const onPointerEnter = (0, react_1.useCallback)(() => {
+        setHovered(true);
+    }, []);
+    const { canvasContent, setCanvasContent } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
+    const selected = (0, react_1.useMemo)(() => {
+        if (canvasContent && canvasContent.type === 'asset') {
+            const nameWOParent = canvasContent.asset.split('/').pop();
+            return nameWOParent === item.name;
+        }
+        return false;
+    }, [canvasContent, item.name]);
+    const onPointerLeave = (0, react_1.useCallback)(() => {
+        setHovered(false);
+    }, []);
+    const onClick = (0, react_1.useCallback)(() => {
+        const relativePath = parentFolder
+            ? parentFolder + '/' + item.name
+            : item.name;
+        setCanvasContent({ type: 'asset', asset: relativePath });
+        window.history.pushState({}, 'Studio', `/assets/${relativePath}`);
+    }, [item.name, parentFolder, setCanvasContent]);
+    const style = (0, react_1.useMemo)(() => {
+        return {
+            ...itemStyle,
+            color: hovered || selected ? 'white' : colors_1.LIGHT_TEXT,
+            backgroundColor: hovered
+                ? selected
+                    ? colors_1.SELECTED_BACKGROUND
+                    : colors_1.CLEAR_HOVER
+                : selected
+                    ? colors_1.SELECTED_BACKGROUND
+                    : 'transparent',
+            paddingLeft: 12 + level * 8,
+        };
+    }, [hovered, level, selected]);
+    const label = (0, react_1.useMemo)(() => {
+        return {
+            ...labelStyle,
+            color: hovered || selected ? 'white' : colors_1.LIGHT_TEXT,
+        };
+    }, [hovered, selected]);
+    const renderFileExplorerAction = (0, react_1.useCallback)((color) => {
+        return (0, jsx_runtime_1.jsx)(folder_1.ExpandedFolderIcon, { style: revealIconStyle, color: color });
+    }, []);
+    const renderCopyAction = (0, react_1.useCallback)((color) => {
+        return (0, jsx_runtime_1.jsx)(clipboard_1.ClipboardIcon, { style: revealIconStyle, color: color });
+    }, []);
+    const revealInExplorer = react_1.default.useCallback((e) => {
+        e.stopPropagation();
+        (0, actions_1.openInFileExplorer)({
+            directory: window.remotion_publicFolderExists +
+                '/' +
+                parentFolder +
+                '/' +
+                item.name,
+        }).catch((err) => {
+            (0, NotificationCenter_1.sendErrorNotification)(`Could not open file: ${err.message}`);
+        });
+    }, [item.name, parentFolder]);
+    const copyToClipboard = (0, react_1.useCallback)((e) => {
+        e.stopPropagation();
+        const content = `staticFile("${[parentFolder, item.name].join('/')}")`;
+        (0, copy_text_1.copyText)(content)
+            .then(() => {
+            var _a;
+            (_a = NotificationCenter_1.notificationCenter.current) === null || _a === void 0 ? void 0 : _a.addNotification({
+                content: `Copied '${content}' to clipboard`,
+                created: Date.now(),
+                duration: 1000,
+                id: String(Math.random()),
+            });
+        })
+            .catch((err) => {
+            (0, NotificationCenter_1.sendErrorNotification)(`Could not copy: ${err.message}`);
+        });
+    }, [item.name, parentFolder]);
+    return ((0, jsx_runtime_1.jsx)(layout_1.Row, { align: "center", children: (0, jsx_runtime_1.jsxs)("div", { style: style, onPointerEnter: onPointerEnter, onPointerLeave: onPointerLeave, onClick: onClick, tabIndex: tabIndex, title: item.name, children: [(0, jsx_runtime_1.jsx)(file_1.FileIcon, { style: iconStyle, color: colors_1.LIGHT_TEXT }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 1 }), (0, jsx_runtime_1.jsx)("div", { style: label, children: item.name }), hovered ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 0.5 }), (0, jsx_runtime_1.jsx)(InlineAction_1.InlineAction, { title: "Copy staticFile() name", renderAction: renderCopyAction, onClick: copyToClipboard }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 0.5 }), (0, jsx_runtime_1.jsx)(InlineAction_1.InlineAction, { title: "Open in Explorer", renderAction: renderFileExplorerAction, onClick: revealInExplorer })] })) : null] }) }));
+};

package/dist/components/AudioWaveform.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+export declare const AudioWaveform: React.FC<{
+    src: string;
+    visualizationWidth: number;
+    startFrom: number;
+    durationInFrames: number;
+    setMaxMediaDuration: React.Dispatch<React.SetStateAction<number>>;
+    volume: string | number;
+    doesVolumeChange: boolean;
+    playbackRate: number;
+}>;