@remotion/studio 4.0.484 → 4.0.486

package/dist/components/Timeline/TimelineFontFamilyField.js

@@ -0,0 +1,545 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TimelineFontFamilyField = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const player_1 = require("@remotion/player");
+const react_1 = require("react");
+const react_dom_1 = __importDefault(require("react-dom"));
+const colors_1 = require("../../helpers/colors");
+const install_required_package_1 = require("../../helpers/install-required-package");
+const caret_1 = require("../../icons/caret");
+const Checkmark_1 = require("../../icons/Checkmark");
+const z_index_1 = require("../../state/z-index");
+const layout_1 = require("../layout");
+const is_menu_item_1 = require("../Menu/is-menu-item");
+const portals_1 = require("../Menu/portals");
+const styles_1 = require("../Menu/styles");
+const google_fonts_list_1 = require("./google-fonts-list");
+const ROW_HEIGHT = 30;
+const LIST_HEIGHT = 280;
+const OVERSCAN = 10;
+const POPOVER_WIDTH = 280;
+const CLEAR_HOVER = 'rgba(255, 255, 255, 0.06)';
+const INPUT_BORDER_COLOR_UNHOVERED = 'rgba(0, 0, 0, 0.6)';
+const INPUT_BORDER_COLOR_HOVERED = 'rgba(255, 255, 255, 0.05)';
+const googleFonts = google_fonts_list_1.GOOGLE_FONTS_LIST.map((font) => ({
+    id: `google-${font.importName}`,
+    fontFamily: font.fontFamily,
+    label: font.fontFamily,
+    source: 'Google Fonts',
+    value: font.fontFamily,
+    googleFontImportName: font.importName,
+    googleFontCssFamily: font.previewUrl,
+    googleFontWeights: font.weights,
+}));
+const loadedGoogleFontsForPreview = new Set();
+const loadingGoogleFontsForPreview = new Set();
+const loadedGoogleFontsForPickerPreview = new Set();
+const loadingGoogleFontsForPickerPreview = new Set();
+const systemFonts = [
+    'Arial',
+    'Helvetica',
+    'Inter',
+    'Georgia',
+    'Times New Roman',
+    'Courier New',
+    'Verdana',
+    'Tahoma',
+    'Trebuchet MS',
+    'sans-serif',
+    'serif',
+    'monospace',
+].map((fontFamily) => ({
+    id: `system-${fontFamily}`,
+    fontFamily,
+    label: fontFamily,
+    source: 'System',
+    value: fontFamily,
+}));
+const triggerStyle = {
+    marginLeft: 8,
+    padding: '3px 4px',
+    display: 'inline-flex',
+    alignItems: 'center',
+    backgroundColor: colors_1.INPUT_BACKGROUND,
+    borderWidth: 1,
+    borderStyle: 'solid',
+    maxWidth: 140,
+    color: 'white',
+    userSelect: 'none',
+    WebkitUserSelect: 'none',
+};
+const triggerLabel = {
+    fontSize: 11,
+    lineHeight: 1,
+    textAlign: 'left',
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+    whiteSpace: 'nowrap',
+};
+const popover = {
+    position: 'fixed',
+    width: POPOVER_WIDTH,
+    backgroundColor: colors_1.BACKGROUND,
+    color: 'white',
+    userSelect: 'none',
+    WebkitUserSelect: 'none',
+    border: '1px solid rgba(255, 255, 255, 0.08)',
+};
+const searchInput = {
+    boxSizing: 'border-box',
+    width: '100%',
+    backgroundColor: colors_1.INPUT_BACKGROUND,
+    border: '1px solid rgba(255, 255, 255, 0.12)',
+    color: 'white',
+    fontSize: 12,
+    outline: 'none',
+    padding: '6px 8px',
+};
+const listStyle = {
+    height: LIST_HEIGHT,
+    overflowY: 'auto',
+    overflowX: 'hidden',
+    position: 'relative',
+};
+const noResults = {
+    fontSize: 12,
+    color: colors_1.LIGHT_TEXT,
+    padding: 12,
+};
+const optionButton = {
+    height: ROW_HEIGHT,
+    width: '100%',
+    border: 'none',
+    background: 'transparent',
+    color: 'white',
+    display: 'flex',
+    alignItems: 'center',
+    padding: '0 8px',
+    fontSize: 12,
+    textAlign: 'left',
+    cursor: 'default',
+};
+const optionLabel = {
+    flex: 1,
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+    whiteSpace: 'nowrap',
+    fontSize: 12,
+};
+const optionSource = {
+    color: colors_1.LIGHT_TEXT,
+    fontSize: 10,
+    marginLeft: 8,
+};
+const errorText = {
+    padding: '6px 8px',
+    color: '#ff8a8a',
+    fontSize: 10,
+};
+const portalStyle = ({ size, }) => {
+    const margin = 10;
+    const spaceToBottom = size.windowSize.height - (size.top + size.height) - margin;
+    const spaceToTop = size.top - margin;
+    const openDown = spaceToBottom >= LIST_HEIGHT || spaceToBottom >= spaceToTop;
+    const left = Math.min(Math.max(0, size.left), Math.max(0, size.windowSize.width - POPOVER_WIDTH));
+    return {
+        ...popover,
+        boxShadow: openDown ? styles_1.SHADOW_TOWARDS_BOTTOM : styles_1.SHADOW_TOWARDS_TOP,
+        left,
+        ...(openDown
+            ? { top: size.top + size.height }
+            : { bottom: size.windowSize.height - size.top }),
+    };
+};
+const getCurrentValue = ({ effectiveValue, fallback, }) => {
+    return typeof effectiveValue === 'string' ? effectiveValue : fallback;
+};
+const scrollIndexIntoView = ({ index, list, }) => {
+    const top = index * ROW_HEIGHT;
+    const bottom = top + ROW_HEIGHT;
+    if (top < list.scrollTop) {
+        list.scrollTop = top;
+        return;
+    }
+    if (bottom > list.scrollTop + LIST_HEIGHT) {
+        list.scrollTop = bottom - LIST_HEIGHT;
+    }
+};
+const getGoogleFontSourceEdit = ({ fontFamily, importName, weights, }) => {
+    return {
+        fontFamily,
+        importName,
+        style: 'normal',
+        weights,
+        subsets: ['latin'],
+    };
+};
+const makeFontPreviewName = (fontFamily) => {
+    return `${fontFamily}Preview`;
+};
+const loadGoogleFontForPickerPreview = async ({ fontFamily, cssFamily, document, }) => {
+    if (loadedGoogleFontsForPickerPreview.has(fontFamily) ||
+        loadingGoogleFontsForPickerPreview.has(fontFamily)) {
+        return;
+    }
+    loadingGoogleFontsForPickerPreview.add(fontFamily);
+    try {
+        const response = await fetch(`https://fonts.googleapis.com/css?family=${cssFamily}:400&text=${encodeURIComponent(fontFamily)}`);
+        if (!response.ok) {
+            return;
+        }
+        const cssText = await response.text();
+        const match = cssText.match(/url\(([^)]+)\)/);
+        const url = match === null || match === void 0 ? void 0 : match[1];
+        if (!url) {
+            return;
+        }
+        const fontFace = new FontFace(makeFontPreviewName(fontFamily), `url(${url})`, { weight: '400' });
+        await fontFace.load();
+        document.fonts.add(fontFace);
+        loadedGoogleFontsForPickerPreview.add(fontFamily);
+    }
+    finally {
+        loadingGoogleFontsForPickerPreview.delete(fontFamily);
+    }
+};
+const getGoogleFontUrlsFromCss = (cssText) => {
+    return [...cssText.matchAll(/url\(([^)]+)\)/g)].map((match) => match[1]);
+};
+const loadGoogleFontWeight = async ({ cssFamily, fontFaceFamily, weight, document, text, }) => {
+    const response = await fetch(`https://fonts.googleapis.com/css?family=${cssFamily}:${weight}${text === null ? '' : `&text=${encodeURIComponent(text)}`}`);
+    if (!response.ok) {
+        return false;
+    }
+    const cssText = await response.text();
+    const urls = getGoogleFontUrlsFromCss(cssText);
+    if (urls.length === 0) {
+        return false;
+    }
+    await Promise.all(urls.map(async (url) => {
+        const fontFace = new FontFace(fontFaceFamily, `url(${url})`, { weight });
+        await fontFace.load();
+        document.fonts.add(fontFace);
+    }));
+    return true;
+};
+const commonPreviewFontWeights = ['400', '700', '800'];
+const getGoogleFontPreviewWeights = (weights) => {
+    const commonWeights = weights.filter((weight) => commonPreviewFontWeights.includes(weight));
+    return commonWeights.length ? commonWeights : weights.slice(0, 1);
+};
+const loadGoogleFontForPreview = async ({ fontFamily, cssFamily, weights, document, }) => {
+    if (loadedGoogleFontsForPreview.has(fontFamily) ||
+        loadingGoogleFontsForPreview.has(fontFamily)) {
+        return;
+    }
+    if (!google_fonts_list_1.GOOGLE_FONTS_LIST.some((font) => font.fontFamily === fontFamily)) {
+        return;
+    }
+    loadingGoogleFontsForPreview.add(fontFamily);
+    try {
+        const loadedWeights = await Promise.all(getGoogleFontPreviewWeights(weights).map((weight) => loadGoogleFontWeight({
+            cssFamily,
+            fontFaceFamily: fontFamily,
+            weight,
+            document,
+            text: null,
+        })));
+        if (loadedWeights.some(Boolean)) {
+            loadedGoogleFontsForPreview.add(fontFamily);
+        }
+    }
+    finally {
+        loadingGoogleFontsForPreview.delete(fontFamily);
+    }
+};
+const TimelineFontFamilyField = ({ field, propStatus, effectiveValue, onSave, onDragValueChange, onDragEnd, }) => {
+    const { fieldSchema } = field;
+    if (fieldSchema.type !== 'font-family') {
+        throw new Error('TimelineFontFamilyField rendered for non-font-family field');
+    }
+    const fallback = fieldSchema.default;
+    const current = getCurrentValue({ effectiveValue, fallback });
+    const defaultOption = (0, react_1.useMemo)(() => {
+        return {
+            id: 'default',
+            fontFamily: fallback !== null && fallback !== void 0 ? fallback : null,
+            label: fallback ? `Default (${fallback})` : 'Default',
+            source: 'Default',
+            value: fallback,
+        };
+    }, [fallback]);
+    const [opened, setOpened] = (0, react_1.useState)(false);
+    const [hovered, setHovered] = (0, react_1.useState)(false);
+    const [query, setQuery] = (0, react_1.useState)('');
+    const [highlightedIndex, setHighlightedIndex] = (0, react_1.useState)(0);
+    const [scrollTop, setScrollTop] = (0, react_1.useState)(0);
+    const [loadedPickerPreviewFonts, setLoadedPickerPreviewFonts] = (0, react_1.useState)(() => new Set(loadedGoogleFontsForPickerPreview));
+    const [saveError, setSaveError] = (0, react_1.useState)(null);
+    const buttonRef = (0, react_1.useRef)(null);
+    const inputRef = (0, react_1.useRef)(null);
+    const listRef = (0, react_1.useRef)(null);
+    const { tabIndex, currentZIndex } = (0, z_index_1.useZIndex)();
+    const size = player_1.PlayerInternals.useElementSize(buttonRef, {
+        triggerOnWindowResize: true,
+        shouldApplyCssTransforms: true,
+    });
+    const options = (0, react_1.useMemo)(() => {
+        const base = [defaultOption, ...systemFonts, ...googleFonts];
+        if (!current || base.some((option) => option.value === current)) {
+            return base;
+        }
+        return [
+            defaultOption,
+            {
+                id: `current-${current}`,
+                fontFamily: current,
+                label: current,
+                source: 'Current',
+                value: current,
+            },
+            ...systemFonts,
+            ...googleFonts,
+        ];
+    }, [current, defaultOption]);
+    const filteredOptions = (0, react_1.useMemo)(() => {
+        const needle = query.trim().toLowerCase();
+        if (!needle) {
+            return options;
+        }
+        return options.filter((option) => {
+            return option.label.toLowerCase().includes(needle);
+        });
+    }, [options, query]);
+    const selected = (0, react_1.useMemo)(() => {
+        var _a;
+        return (_a = options.find((option) => option.value === current)) !== null && _a !== void 0 ? _a : defaultOption;
+    }, [current, defaultOption, options]);
+    const visibleRange = (0, react_1.useMemo)(() => {
+        const visibleCount = Math.ceil(LIST_HEIGHT / ROW_HEIGHT);
+        const start = Math.max(0, Math.floor(scrollTop / ROW_HEIGHT) - OVERSCAN);
+        const end = Math.min(filteredOptions.length, start + visibleCount + OVERSCAN * 2);
+        return { start, end };
+    }, [filteredOptions.length, scrollTop]);
+    const hide = (0, react_1.useCallback)(() => {
+        setOpened(false);
+        setQuery('');
+    }, []);
+    const selectOption = (0, react_1.useCallback)((option) => {
+        setSaveError(null);
+        if (option.value === propStatus.codeValue) {
+            hide();
+            return;
+        }
+        onDragValueChange(option.value);
+        hide();
+        const save = async () => {
+            var _a, _b;
+            if (option.source !== 'Google Fonts' || !option.googleFontImportName) {
+                await onSave(option.value);
+                return;
+            }
+            await (0, install_required_package_1.installRequiredPackages)(['@remotion/google-fonts']);
+            const googleFont = getGoogleFontSourceEdit({
+                fontFamily: (_a = option.value) !== null && _a !== void 0 ? _a : option.label,
+                importName: option.googleFontImportName,
+                weights: (_b = option.googleFontWeights) !== null && _b !== void 0 ? _b : ['400'],
+            });
+            await onSave(option.value, {
+                sourceEdit: { type: 'google-font', font: googleFont },
+            });
+        };
+        save()
+            .catch((err) => {
+            onDragValueChange(propStatus.codeValue);
+            setSaveError(err instanceof Error ? err.message : String(err));
+        })
+            .finally(() => {
+            onDragEnd();
+        });
+    }, [propStatus.codeValue, onDragValueChange, hide, onSave, onDragEnd]);
+    const toggleOpened = (0, react_1.useCallback)(() => {
+        var _a;
+        if (opened) {
+            setOpened(false);
+            return;
+        }
+        (_a = size === null || size === void 0 ? void 0 : size.refresh) === null || _a === void 0 ? void 0 : _a.call(size);
+        setOpened(true);
+    }, [opened, size]);
+    (0, react_1.useEffect)(() => {
+        if (!opened) {
+            return;
+        }
+        const selectedIndex = filteredOptions.findIndex((option) => option.value === current);
+        const nextIndex = Math.max(0, selectedIndex);
+        setHighlightedIndex(nextIndex);
+        requestAnimationFrame(() => {
+            var _a;
+            (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+            const list = listRef.current;
+            if (!list) {
+                return;
+            }
+            list.scrollTop = Math.max(0, nextIndex * ROW_HEIGHT - LIST_HEIGHT / 2 + ROW_HEIGHT / 2);
+        });
+    }, [current, filteredOptions, opened]);
+    (0, react_1.useEffect)(() => {
+        setHighlightedIndex(0);
+        if (listRef.current) {
+            listRef.current.scrollTop = 0;
+        }
+    }, [query]);
+    (0, react_1.useEffect)(() => {
+        if (!current) {
+            return;
+        }
+        const googleFont = google_fonts_list_1.GOOGLE_FONTS_LIST.find((font) => font.fontFamily === current);
+        if (!googleFont) {
+            return;
+        }
+        loadGoogleFontForPreview({
+            fontFamily: current,
+            cssFamily: googleFont.previewUrl,
+            weights: googleFont.weights,
+            document,
+        }).catch(() => undefined);
+        loadGoogleFontForPickerPreview({
+            fontFamily: current,
+            cssFamily: googleFont.previewUrl,
+            document,
+        })
+            .then(() => {
+            setLoadedPickerPreviewFonts(new Set(loadedGoogleFontsForPickerPreview));
+        })
+            .catch(() => undefined);
+    }, [current]);
+    (0, react_1.useEffect)(() => {
+        if (!opened) {
+            return;
+        }
+        const visibleGoogleFonts = filteredOptions
+            .slice(visibleRange.start, visibleRange.end)
+            .filter((option) => option.source === 'Google Fonts' &&
+            option.fontFamily &&
+            option.googleFontCssFamily);
+        if (visibleGoogleFonts.length === 0) {
+            return;
+        }
+        Promise.all(visibleGoogleFonts.map((font) => loadGoogleFontForPickerPreview({
+            fontFamily: font.fontFamily,
+            cssFamily: font.googleFontCssFamily,
+            document,
+        })))
+            .then(() => {
+            setLoadedPickerPreviewFonts(new Set(loadedGoogleFontsForPickerPreview));
+        })
+            .catch(() => undefined);
+    }, [filteredOptions, opened, visibleRange.end, visibleRange.start]);
+    const onKeyDown = (0, react_1.useCallback)((event) => {
+        if (event.key === 'ArrowDown') {
+            event.preventDefault();
+            setHighlightedIndex((prev) => {
+                const next = Math.max(0, Math.min(filteredOptions.length - 1, prev + 1));
+                if (listRef.current) {
+                    scrollIndexIntoView({ index: next, list: listRef.current });
+                }
+                return next;
+            });
+        }
+        if (event.key === 'ArrowUp') {
+            event.preventDefault();
+            setHighlightedIndex((prev) => {
+                const next = Math.max(0, prev - 1);
+                if (listRef.current) {
+                    scrollIndexIntoView({ index: next, list: listRef.current });
+                }
+                return next;
+            });
+        }
+        if (event.key === 'Enter') {
+            event.preventDefault();
+            const option = filteredOptions[highlightedIndex];
+            if (option) {
+                selectOption(option);
+            }
+        }
+        if (event.key === 'Escape') {
+            event.preventDefault();
+            hide();
+        }
+    }, [filteredOptions, hide, highlightedIndex, selectOption]);
+    const renderedOptions = filteredOptions.slice(visibleRange.start, visibleRange.end);
+    const getOptionPreviewStyle = (0, react_1.useCallback)((option) => {
+        if (option.source !== 'Google Fonts' ||
+            !option.fontFamily ||
+            !loadedPickerPreviewFonts.has(option.fontFamily)) {
+            return {};
+        }
+        return { fontFamily: makeFontPreviewName(option.fontFamily) };
+    }, [loadedPickerPreviewFonts]);
+    const style = (0, react_1.useMemo)(() => {
+        return {
+            ...triggerStyle,
+            borderColor: opened
+                ? colors_1.SELECTED_BACKGROUND
+                : hovered
+                    ? INPUT_BORDER_COLOR_HOVERED
+                    : INPUT_BORDER_COLOR_UNHOVERED,
+        };
+    }, [hovered, opened]);
+    const selectedPreviewStyle = getOptionPreviewStyle(selected);
+    return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
+            jsx_runtime_1.jsxs("button", { ref: buttonRef, title: field.key, tabIndex: tabIndex, type: "button", style: style, className: is_menu_item_1.MENU_INITIATOR_CLASSNAME, onPointerDown: (event) => {
+                    event.stopPropagation();
+                    toggleOpened();
+                }, onClick: (event) => {
+                    event.stopPropagation();
+                    if (event.detail === 0) {
+                        toggleOpened();
+                    }
+                }, onMouseEnter: () => setHovered(true), onMouseLeave: () => setHovered(false), children: [
+                    jsx_runtime_1.jsx("div", { title: selected.label, style: { ...triggerLabel, ...selectedPreviewStyle }, children: selected.label }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.5 }), jsx_runtime_1.jsx(caret_1.CaretDown, { small: true })
+                ] }), saveError === null ? null : jsx_runtime_1.jsx("div", { style: errorText, children: saveError }), opened && size
+                ? react_dom_1.default.createPortal(jsx_runtime_1.jsx("div", { style: styles_1.fullScreenOverlay, onPointerDown: (event) => event.stopPropagation(), children: jsx_runtime_1.jsx("div", { style: styles_1.outerPortal, className: "css-reset", children: jsx_runtime_1.jsx(z_index_1.HigherZIndex, { onOutsideClick: hide, onEscape: hide, children: jsx_runtime_1.jsxs("div", { style: portalStyle({ size }), children: [
+                                    jsx_runtime_1.jsx("div", { style: { padding: 6 }, children: jsx_runtime_1.jsx("input", { ref: inputRef, value: query, onChange: (event) => setQuery(event.target.value), onKeyDown: onKeyDown, placeholder: "Search fonts", style: searchInput }) }), filteredOptions.length === 0 ? (jsx_runtime_1.jsx("div", { style: noResults, children: "No fonts found" })) : (jsx_runtime_1.jsxs("div", { ref: listRef, style: listStyle, onScroll: (event) => {
+                                            setScrollTop(event.currentTarget.scrollTop);
+                                        }, children: [
+                                            jsx_runtime_1.jsx("div", { style: { height: visibleRange.start * ROW_HEIGHT } }), renderedOptions.map((option, index) => {
+                                                const actualIndex = visibleRange.start + index;
+                                                const isSelected = option.value === current;
+                                                const isHighlighted = actualIndex === highlightedIndex;
+                                                return (jsx_runtime_1.jsxs("button", { type: "button", style: {
+                                                        ...optionButton,
+                                                        backgroundColor: isHighlighted
+                                                            ? CLEAR_HOVER
+                                                            : isSelected
+                                                                ? colors_1.SELECTED_BACKGROUND
+                                                                : 'transparent',
+                                                    }, onPointerEnter: () => setHighlightedIndex(actualIndex), onPointerDown: (event) => {
+                                                        event.preventDefault();
+                                                        event.stopPropagation();
+                                                        selectOption(option);
+                                                    }, children: [
+                                                        jsx_runtime_1.jsx("span", { style: { width: 18 }, children: isSelected ? jsx_runtime_1.jsx(Checkmark_1.Checkmark, { size: 11 }) : null }), jsx_runtime_1.jsx("span", { style: {
+                                                                ...optionLabel,
+                                                                ...getOptionPreviewStyle(option),
+                                                            }, children: option.label }), jsx_runtime_1.jsx("span", { style: optionSource, children: option.source })
+                                                    ] }, option.id));
+                                            }), jsx_runtime_1.jsx("div", { style: {
+                                                    height: (filteredOptions.length - visibleRange.end) *
+                                                        ROW_HEIGHT,
+                                                } })
+                                        ] })), jsx_runtime_1.jsx("div", { style: {
+                                            padding: '6px 8px',
+                                            color: colors_1.LIGHT_TEXT,
+                                            fontSize: 10,
+                                        }, children: "Google Fonts are loaded for Studio preview and saved to your composition when selected." })
+                                ] }) }) }) }), (0, portals_1.getPortal)(currentZIndex))
+                : null] }));
+};
+exports.TimelineFontFamilyField = TimelineFontFamilyField;

package/dist/components/Timeline/TimelineImageInfo.js

@@ -4,12 +4,13 @@ exports.TimelineImageInfo = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const timeline_utils_1 = require("@remotion/timeline-utils");
 const react_1 = require("react");
+const colors_1 = require("../../helpers/colors");
 const timeline_layout_1 = require("../../helpers/timeline-layout");
 const HEIGHT = (0, timeline_layout_1.getTimelineLayerHeight)('image') - 2;
 const containerStyle = {
     height: HEIGHT,
     width: '100%',
-    backgroundColor: 'rgba(0, 0, 0, 0.3)',
+    backgroundColor: colors_1.BLACK_ALPHA_30,
     display: 'flex',
     borderTopLeftRadius: 2,
     borderBottomLeftRadius: 2,

package/dist/components/Timeline/TimelineInOutPointer.js

@@ -4,12 +4,13 @@ exports.TimelineInOutPointer = exports.outMarkerAreaRef = exports.inMarkerAreaRe
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const remotion_1 = require("remotion");
+const colors_1 = require("../../helpers/colors");
 const get_left_of_timeline_slider_1 = require("../../helpers/get-left-of-timeline-slider");
 const in_out_1 = require("../../state/in-out");
 const TimelineWidthProvider_1 = require("./TimelineWidthProvider");
 const areaHighlight = {
     position: 'absolute',
-    backgroundColor: 'rgba(0, 0, 0, 0.5)',
+    backgroundColor: colors_1.BLACK_ALPHA_50,
     height: '100%',
     bottom: 0,
     top: 0,

package/dist/components/Timeline/TimelineInOutPointerHandle.js

@@ -6,12 +6,13 @@ const react_1 = require("react");
 const remotion_1 = require("remotion");
 const colors_1 = require("../../helpers/colors");
 const get_left_of_timeline_slider_1 = require("../../helpers/get-left-of-timeline-slider");
+const TimelineSelection_1 = require("./TimelineSelection");
 const TimelineWidthProvider_1 = require("./TimelineWidthProvider");
 const line = {
     height: '100%',
     width: 1,
     position: 'absolute',
-    backgroundColor: 'rgba(255, 255, 255, 0.1)',
+    backgroundColor: colors_1.WHITE_ALPHA_10,
     cursor: 'ew-resize',
     paddingLeft: 1,
     paddingRight: 1,
@@ -23,14 +24,12 @@ const InnerTimelineInOutPointerHandle = ({ atFrame, dragging, onPointerDown, tim
     const style = (0, react_1.useMemo)(() => {
         return {
             ...line,
-            backgroundColor: dragging
-                ? colors_1.LIGHT_TRANSPARENT
-                : 'rgba(255, 255, 255, 0.1)',
+            backgroundColor: dragging ? colors_1.WHITE_ALPHA_70 : colors_1.WHITE_ALPHA_10,
             transform: `translateX(${(0, get_left_of_timeline_slider_1.getXPositionOfItemInTimelineImperatively)(atFrame, videoConfig.durationInFrames, timelineWidth)}px)`,
             top: 0,
         };
     }, [atFrame, dragging, timelineWidth, videoConfig.durationInFrames]);
-    return (jsx_runtime_1.jsx("div", { ref: type === 'in' ? exports.inPointerHandle : exports.outPointerHandle, style: style, onPointerDown: onPointerDown }));
+    return (jsx_runtime_1.jsx("div", { ref: type === 'in' ? exports.inPointerHandle : exports.outPointerHandle, style: style, onPointerDown: onPointerDown, [TimelineSelection_1.TIMELINE_SCRUBBER_ATTR]: true }));
 };
 const TimelineInOutPointerHandle = ({ dragging, onPointerDown, type, atFrame, }) => {
     const timelineWidth = (0, react_1.useContext)(TimelineWidthProvider_1.TimelineWidthContext);

package/dist/components/Timeline/TimelineKeyframeControls.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import type { CanUpdateSequencePropStatus, DragOverrideValue, SequencePropsSubscriptionKey, InteractivitySchema } from 'remotion';
+import type { CanUpdateSequencePropStatus, DragOverrideValue, InteractivitySchema, SequencePropsSubscriptionKey } from 'remotion';
 import type { SequenceNodePathInfo } from '../../helpers/get-timeline-sequence-sort-key';
 import { type TimelineSelection } from './TimelineSelection';
 export declare const getSelectedKeyframeControlNodePathInfos: ({ clickedNodePathInfo, selectedItems, }: {

package/dist/components/Timeline/TimelineKeyframeControls.js

@@ -29,7 +29,7 @@ const navButtonStyle = {
     alignItems: 'center',
     background: 'none',
     border: 'none',
-    color: 'white',
+    color: colors_1.WHITE,
     cursor: 'pointer',
     display: 'flex',
     flexShrink: 0,
@@ -113,6 +113,7 @@ const resolveKeyframeControlTarget = ({ nodePathInfo, tracks, propStatuses, getD
         getDragOverrides,
         getEffectDragOverrides,
         propStatuses,
+        includeTextContent: false,
     });
     const fieldNode = findFieldNode(tree, (0, timeline_node_path_key_1.timelineNodePathInfoToKey)(nodePathInfo));
     if (fieldNode === null || fieldNode.field === null) {
@@ -468,7 +469,7 @@ const TimelineKeyframeControls = ({ fieldKey, propStatus, nodePath, fileName, ke
     }), [canToggleKeyframe, clientId]);
     const diamondColor = hasKeyframeAtCurrentFrame ? colors_1.BLUE : colors_1.LIGHT_TEXT;
     return (jsx_runtime_1.jsxs("div", { style: controlsContainerStyle, children: [
-            jsx_runtime_1.jsx("button", { type: "button", style: previousStyle, disabled: previousDisabled, onPointerDown: previousDisabled ? undefined : onPrevious, "aria-label": "Go to previous keyframe", title: "Previous keyframe", children: jsx_runtime_1.jsx("svg", { width: "14", height: "14", viewBox: "0 0 10 10", style: svgStyle, children: jsx_runtime_1.jsx("path", { d: "M7 1.5L3 5L7 8.5Z", fill: "#ccc" }) }) }), jsx_runtime_1.jsx("button", { type: "button", style: diamondStyle, disabled: !canToggleKeyframe || !clientId, onPointerDown: canToggleKeyframe && clientId ? onToggleKeyframe : undefined, "aria-label": hasKeyframeAtCurrentFrame ? 'Remove keyframe' : 'Add keyframe', title: hasKeyframeAtCurrentFrame ? 'Remove keyframe' : 'Add keyframe', children: jsx_runtime_1.jsx(TimelineKeyframeDiamondIcon_1.TimelineKeyframeDiamondIcon, { color: diamondColor, size: 12 }) }), jsx_runtime_1.jsx("button", { type: "button", style: nextStyle, disabled: nextDisabled, onPointerDown: nextDisabled ? undefined : onNext, "aria-label": "Go to next keyframe", title: "Next keyframe", children: jsx_runtime_1.jsx("svg", { width: "14", height: "14", viewBox: "0 0 10 10", style: svgStyle, children: jsx_runtime_1.jsx("path", { d: "M3 1.5L7 5L3 8.5Z", fill: "#ccc" }) }) })
+            jsx_runtime_1.jsx("button", { type: "button", style: previousStyle, disabled: previousDisabled, onPointerDown: previousDisabled ? undefined : onPrevious, "aria-label": "Go to previous keyframe", title: "Previous keyframe", children: jsx_runtime_1.jsx("svg", { width: "14", height: "14", viewBox: "0 0 10 10", style: svgStyle, children: jsx_runtime_1.jsx("path", { d: "M7 1.5L3 5L7 8.5Z", fill: colors_1.LIGHT_GRAY }) }) }), jsx_runtime_1.jsx("button", { type: "button", style: diamondStyle, disabled: !canToggleKeyframe || !clientId, onPointerDown: canToggleKeyframe && clientId ? onToggleKeyframe : undefined, "aria-label": hasKeyframeAtCurrentFrame ? 'Remove keyframe' : 'Add keyframe', title: hasKeyframeAtCurrentFrame ? 'Remove keyframe' : 'Add keyframe', children: jsx_runtime_1.jsx(TimelineKeyframeDiamondIcon_1.TimelineKeyframeDiamondIcon, { color: diamondColor, size: 12 }) }), jsx_runtime_1.jsx("button", { type: "button", style: nextStyle, disabled: nextDisabled, onPointerDown: nextDisabled ? undefined : onNext, "aria-label": "Go to next keyframe", title: "Next keyframe", children: jsx_runtime_1.jsx("svg", { width: "14", height: "14", viewBox: "0 0 10 10", style: svgStyle, children: jsx_runtime_1.jsx("path", { d: "M3 1.5L7 5L3 8.5Z", fill: colors_1.LIGHT_GRAY }) }) })
         ] }));
 };
 exports.TimelineKeyframeControls = TimelineKeyframeControls;

package/dist/components/Timeline/TimelineKeyframeDiamondIcon.js

@@ -8,7 +8,7 @@ const svgStyle = {
     overflow: 'visible',
 };
 const TimelineKeyframeDiamondIcon = ({ color, selected = false, size }) => {
-    return (jsx_runtime_1.jsxs("svg", { width: size, height: size, viewBox: "0 0 12 12", style: svgStyle, "aria-hidden": "true", focusable: "false", children: [selected ? (jsx_runtime_1.jsx("polygon", { points: "6 0.75 11.25 6 6 11.25 0.75 6", fill: "none", stroke: colors_1.BLUE, strokeWidth: "1.5", strokeLinejoin: "round" })) : null, jsx_runtime_1.jsx("polygon", { points: "6 1.5 10.5 6 6 10.5 1.5 6", fill: color, stroke: "rgba(0, 0, 0, 0.4)", strokeWidth: "1", strokeLinejoin: "round" })
+    return (jsx_runtime_1.jsxs("svg", { width: size, height: size, viewBox: "0 0 12 12", style: svgStyle, "aria-hidden": "true", focusable: "false", children: [selected ? (jsx_runtime_1.jsx("polygon", { points: "6 0.75 11.25 6 6 11.25 0.75 6", fill: "none", stroke: colors_1.BLUE, strokeWidth: "1.5", strokeLinejoin: "round" })) : null, jsx_runtime_1.jsx("polygon", { points: "6 1.5 10.5 6 6 10.5 1.5 6", fill: color, stroke: colors_1.BLACK_ALPHA_40, strokeWidth: "1", strokeLinejoin: "round" })
         ] }));
 };
 exports.TimelineKeyframeDiamondIcon = TimelineKeyframeDiamondIcon;

package/dist/components/Timeline/TimelineKeyframeEasingLine.js

@@ -58,7 +58,7 @@ const easingLineButton = {
     transform: 'translateY(-50%)',
 };
 const easingLine = {
-    backgroundColor: 'rgba(255, 255, 255, 0.1)',
+    backgroundColor: colors_1.WHITE_ALPHA_10,
     borderRadius: lineHeight / 2,
     height: lineHeight,
     left: 0,