Add .gitignore to exclude all node packages and lock files

This commit is contained in:
Adolfo Reyna
2026-02-23 21:56:04 -05:00
parent faae96c9ed
commit dcc5c6c044
9747 changed files with 1555105 additions and 2 deletions
@@ -0,0 +1,2 @@
export declare const canvasRef: import("react").RefObject<HTMLDivElement | null>;
export declare const drawRef: import("react").RefObject<HTMLDivElement | null>;
@@ -0,0 +1,6 @@
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.drawRef = exports.canvasRef = void 0;
const react_1 = require("react");
exports.canvasRef = (0, react_1.createRef)();
exports.drawRef = (0, react_1.createRef)();
@@ -0,0 +1,8 @@
type State = {
checkerboard: boolean;
setCheckerboard: (cb: (prevState: boolean) => boolean) => void;
};
export declare const persistCheckerboardOption: (option: boolean) => void;
export declare const loadCheckerboardOption: () => boolean;
export declare const CheckerboardContext: import("react").Context<State>;
export {};
@@ -0,0 +1,17 @@
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.CheckerboardContext = exports.loadCheckerboardOption = exports.persistCheckerboardOption = void 0;
const react_1 = require("react");
const persistCheckerboardOption = (option) => {
localStorage.setItem('option', String(option));
};
exports.persistCheckerboardOption = persistCheckerboardOption;
const loadCheckerboardOption = () => {
const item = localStorage.getItem('option');
return item !== 'false';
};
exports.loadCheckerboardOption = loadCheckerboardOption;
exports.CheckerboardContext = (0, react_1.createContext)({
checkerboard: (0, exports.loadCheckerboardOption)(),
setCheckerboard: () => undefined,
});
@@ -0,0 +1,24 @@
export type Guide = {
orientation: 'horizontal' | 'vertical';
position: number;
show: boolean;
id: string;
compositionId: string;
};
export type GuideState = {
editorShowGuides: boolean;
setEditorShowGuides: (cb: (prevState: boolean) => boolean) => void;
guidesList: Guide[];
setGuidesList: (cb: (prevState: Guide[]) => Guide[]) => void;
selectedGuideId: string | null;
setSelectedGuideId: (cb: (prevState: string | null) => string | null) => void;
setHoveredGuideId: (cb: (prevState: string | null) => string | null) => void;
hoveredGuideId: string | null;
shouldCreateGuideRef: React.MutableRefObject<boolean>;
shouldDeleteGuideRef: React.MutableRefObject<boolean>;
};
export declare const persistEditorShowGuidesOption: (option: boolean) => void;
export declare const loadEditorShowGuidesOption: () => boolean;
export declare const persistGuidesList: (guides: Guide[]) => void;
export declare const loadGuidesList: () => Guide[];
export declare const EditorShowGuidesContext: import("react").Context<GuideState>;
@@ -0,0 +1,34 @@
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.EditorShowGuidesContext = exports.loadGuidesList = exports.persistGuidesList = exports.loadEditorShowGuidesOption = exports.persistEditorShowGuidesOption = void 0;
const react_1 = require("react");
const persistEditorShowGuidesOption = (option) => {
localStorage.setItem('remotion.editorShowGuides', String(option));
};
exports.persistEditorShowGuidesOption = persistEditorShowGuidesOption;
const loadEditorShowGuidesOption = () => {
const item = localStorage.getItem('remotion.editorShowGuides');
return item === 'true';
};
exports.loadEditorShowGuidesOption = loadEditorShowGuidesOption;
const persistGuidesList = (guides) => {
localStorage.setItem('remotion.guidesList', JSON.stringify(guides));
};
exports.persistGuidesList = persistGuidesList;
const loadGuidesList = () => {
const item = localStorage.getItem('remotion.guidesList');
return item ? JSON.parse(item) : [];
};
exports.loadGuidesList = loadGuidesList;
exports.EditorShowGuidesContext = (0, react_1.createContext)({
editorShowGuides: false,
setEditorShowGuides: () => undefined,
guidesList: [],
setGuidesList: () => undefined,
selectedGuideId: null,
setSelectedGuideId: () => undefined,
shouldCreateGuideRef: { current: false },
shouldDeleteGuideRef: { current: false },
hoveredGuideId: null,
setHoveredGuideId: () => undefined,
});
@@ -0,0 +1,13 @@
type State = {
editorShowRulers: boolean;
setEditorShowRulers: (cb: (prevState: boolean) => boolean) => void;
};
export declare const persistEditorShowRulersOption: (option: boolean) => void;
export declare const loadEditorShowRulersOption: () => boolean;
export declare const EditorShowRulersContext: import("react").Context<State>;
export declare const RULER_WIDTH = 20;
export declare const MINIMUM_VISIBLE_CANVAS_SIZE = 50;
export declare const PREDEFINED_RULER_SCALE_GAPS: number[];
export declare const MAXIMUM_PREDEFINED_RULER_SCALE_GAP = 5000;
export declare const MINIMUM_RULER_MARKING_GAP_PX = 50;
export {};
@@ -0,0 +1,24 @@
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.MINIMUM_RULER_MARKING_GAP_PX = exports.MAXIMUM_PREDEFINED_RULER_SCALE_GAP = exports.PREDEFINED_RULER_SCALE_GAPS = exports.MINIMUM_VISIBLE_CANVAS_SIZE = exports.RULER_WIDTH = exports.EditorShowRulersContext = exports.loadEditorShowRulersOption = exports.persistEditorShowRulersOption = void 0;
const react_1 = require("react");
const persistEditorShowRulersOption = (option) => {
localStorage.setItem('remotion.editorShowRulers', String(option));
};
exports.persistEditorShowRulersOption = persistEditorShowRulersOption;
const loadEditorShowRulersOption = () => {
const item = localStorage.getItem('remotion.editorShowRulers');
return item === 'true';
};
exports.loadEditorShowRulersOption = loadEditorShowRulersOption;
exports.EditorShowRulersContext = (0, react_1.createContext)({
editorShowRulers: (0, exports.loadEditorShowRulersOption)(),
setEditorShowRulers: () => undefined,
});
exports.RULER_WIDTH = 20;
exports.MINIMUM_VISIBLE_CANVAS_SIZE = 50;
exports.PREDEFINED_RULER_SCALE_GAPS = [
1, 2, 5, 10, 20, 50, 100, 250, 500, 1000, 2000, 5000,
];
exports.MAXIMUM_PREDEFINED_RULER_SCALE_GAP = 5000;
exports.MINIMUM_RULER_MARKING_GAP_PX = 50;
@@ -0,0 +1,8 @@
type State = {
editorZoomGestures: boolean;
setEditorZoomGestures: (cb: (prevState: boolean) => boolean) => void;
};
export declare const persistEditorZoomGesturesOption: (option: boolean) => void;
export declare const loadEditorZoomGesturesOption: () => boolean;
export declare const EditorZoomGesturesContext: import("react").Context<State>;
export {};
@@ -0,0 +1,17 @@
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.EditorZoomGesturesContext = exports.loadEditorZoomGesturesOption = exports.persistEditorZoomGesturesOption = void 0;
const react_1 = require("react");
const persistEditorZoomGesturesOption = (option) => {
localStorage.setItem('remotion.editorZoomGestures', String(option));
};
exports.persistEditorZoomGesturesOption = persistEditorZoomGesturesOption;
const loadEditorZoomGesturesOption = () => {
const item = localStorage.getItem('remotion.editorZoomGestures');
return item !== 'false';
};
exports.loadEditorZoomGesturesOption = loadEditorZoomGesturesOption;
exports.EditorZoomGesturesContext = (0, react_1.createContext)({
editorZoomGestures: (0, exports.loadEditorZoomGesturesOption)(),
setEditorZoomGestures: () => undefined,
});
@@ -0,0 +1,13 @@
import React from 'react';
import type { ExpandedFoldersState } from '../helpers/persist-open-folders';
type TFolderContext = {
compositionFoldersExpanded: ExpandedFoldersState;
setCompositionFoldersExpanded: React.Dispatch<React.SetStateAction<ExpandedFoldersState>>;
assetFoldersExpanded: ExpandedFoldersState;
setAssetFoldersExpanded: React.Dispatch<React.SetStateAction<ExpandedFoldersState>>;
};
export declare const FolderContext: React.Context<TFolderContext>;
export declare const FolderContextProvider: React.FC<{
readonly children: React.ReactNode;
}>;
export {};
@@ -0,0 +1,30 @@
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.FolderContextProvider = exports.FolderContext = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("react");
const persist_open_folders_1 = require("../helpers/persist-open-folders");
exports.FolderContext = (0, react_1.createContext)({
compositionFoldersExpanded: {},
setCompositionFoldersExpanded: () => {
throw new Error('default state');
},
assetFoldersExpanded: {},
setAssetFoldersExpanded: () => {
throw new Error('default state');
},
});
const FolderContextProvider = ({ children }) => {
const [compositionFoldersExpanded, setCompositionFoldersExpanded] = (0, react_1.useState)(() => (0, persist_open_folders_1.loadExpandedFolders)('compositions'));
const [assetFoldersExpanded, setAssetFoldersExpanded] = (0, react_1.useState)(() => (0, persist_open_folders_1.loadExpandedFolders)('assets'));
const value = (0, react_1.useMemo)(() => {
return {
compositionFoldersExpanded,
setCompositionFoldersExpanded,
assetFoldersExpanded,
setAssetFoldersExpanded,
};
}, [assetFoldersExpanded, compositionFoldersExpanded]);
return ((0, jsx_runtime_1.jsx)(exports.FolderContext.Provider, { value: value, children: children }));
};
exports.FolderContextProvider = FolderContextProvider;
@@ -0,0 +1,11 @@
import React from 'react';
type HighestZIndexContainer = {
highestIndex: number;
registerZIndex: (index: number) => void;
unregisterZIndex: (index: number) => void;
};
export declare const HighestZIndexContext: React.Context<HighestZIndexContainer>;
export declare const HighestZIndexProvider: React.FC<{
readonly children: React.ReactNode;
}>;
export {};
@@ -0,0 +1,35 @@
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.HighestZIndexProvider = exports.HighestZIndexContext = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("react");
exports.HighestZIndexContext = (0, react_1.createContext)({
highestIndex: 0,
registerZIndex: () => undefined,
unregisterZIndex: () => undefined,
});
const HighestZIndexProvider = ({ children }) => {
const [zIndexes, setZIndexes] = (0, react_1.useState)([]);
const registerZIndex = (0, react_1.useCallback)((newIndex) => {
setZIndexes((prev) => [...prev, newIndex]);
}, []);
const unregisterZIndex = (0, react_1.useCallback)((newIndex) => {
setZIndexes((prev) => {
const index = prev.indexOf(newIndex);
if (index === -1) {
throw new Error('did not find z-index ' + newIndex);
}
return prev.filter((_n, i) => i !== index);
});
}, []);
const highestIndex = Math.max(...zIndexes);
const value = (0, react_1.useMemo)(() => {
return {
highestIndex,
registerZIndex,
unregisterZIndex,
};
}, [registerZIndex, unregisterZIndex, highestIndex]);
return ((0, jsx_runtime_1.jsx)(exports.HighestZIndexContext.Provider, { value: value, children: children }));
};
exports.HighestZIndexProvider = HighestZIndexProvider;
@@ -0,0 +1,13 @@
import type React from 'react';
export type InOutValue = {
inFrame: number | null;
outFrame: number | null;
};
export type TimelineInOutContextValue = Record<string, InOutValue>;
export type SetTimelineInOutContextValue = {
setInAndOutFrames: (u: React.SetStateAction<TimelineInOutContextValue>) => void;
};
export declare const TimelineInOutContext: React.Context<TimelineInOutContextValue>;
export declare const SetTimelineInOutContext: React.Context<SetTimelineInOutContextValue>;
export declare const useTimelineInOutFramePosition: () => InOutValue;
export declare const useTimelineSetInOutFramePosition: () => SetTimelineInOutContextValue;
@@ -0,0 +1,44 @@
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.useTimelineSetInOutFramePosition = exports.useTimelineInOutFramePosition = exports.SetTimelineInOutContext = exports.TimelineInOutContext = void 0;
const react_1 = require("react");
const remotion_1 = require("remotion");
exports.TimelineInOutContext = (0, react_1.createContext)({});
exports.SetTimelineInOutContext = (0, react_1.createContext)({
setInAndOutFrames: () => {
throw new Error('default');
},
});
const useTimelineInOutFramePosition = () => {
const videoConfig = remotion_1.Internals.useUnsafeVideoConfig();
const state = (0, react_1.useContext)(exports.TimelineInOutContext);
const id = videoConfig === null || videoConfig === void 0 ? void 0 : videoConfig.id;
const durationInFrames = videoConfig === null || videoConfig === void 0 ? void 0 : videoConfig.durationInFrames;
return (0, react_1.useMemo)(() => {
var _a, _b, _c, _d;
if (!id || !durationInFrames) {
return { inFrame: null, outFrame: null };
}
const maxFrame = durationInFrames - 1;
const actualInFrame = (_b = (_a = state[id]) === null || _a === void 0 ? void 0 : _a.inFrame) !== null && _b !== void 0 ? _b : null;
const actualOutFrame = (_d = (_c = state[id]) === null || _c === void 0 ? void 0 : _c.outFrame) !== null && _d !== void 0 ? _d : null;
return {
inFrame: actualInFrame === null
? null
: actualInFrame >= maxFrame
? null
: actualInFrame,
outFrame: actualOutFrame === null
? null
: actualOutFrame >= maxFrame
? null
: actualOutFrame,
};
}, [durationInFrames, id, state]);
};
exports.useTimelineInOutFramePosition = useTimelineInOutFramePosition;
const useTimelineSetInOutFramePosition = () => {
const { setInAndOutFrames } = (0, react_1.useContext)(exports.SetTimelineInOutContext);
return { setInAndOutFrames };
};
exports.useTimelineSetInOutFramePosition = useTimelineSetInOutFramePosition;
@@ -0,0 +1,2 @@
export declare const getClickLock: () => boolean;
export declare const setClickLock: (lock: boolean) => void;
@@ -0,0 +1,10 @@
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.setClickLock = exports.getClickLock = void 0;
let clickLock = false;
const getClickLock = () => clickLock;
exports.getClickLock = getClickLock;
const setClickLock = (lock) => {
clickLock = lock;
};
exports.setClickLock = setClickLock;
@@ -0,0 +1,20 @@
import React from 'react';
export type KeyEventType = 'keydown' | 'keyup' | 'keypress';
type KeyListenerCallback = (e: KeyboardEvent) => void;
export type RegisteredKeybinding = {
registeredFromPane: string;
id: string;
key: string;
event: KeyEventType;
callback: KeyListenerCallback;
};
type KeybindingContextType = {
registerKeybinding: (binding: RegisteredKeybinding) => void;
unregisterKeybinding: (binding: RegisteredKeybinding) => void;
unregisterPane: (paneId: string) => void;
};
export declare const KeybindingContext: React.Context<KeybindingContextType>;
export declare const KeybindingContextProvider: React.FC<{
readonly children: React.ReactNode;
}>;
export {};
@@ -0,0 +1,43 @@
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.KeybindingContextProvider = exports.KeybindingContext = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("react");
exports.KeybindingContext = (0, react_1.createContext)({
registerKeybinding: () => {
throw new Error('Has no keybinding context');
},
unregisterKeybinding: () => undefined,
unregisterPane: () => undefined,
});
const KeybindingContextProvider = ({ children }) => {
const registered = (0, react_1.useRef)([]);
const registerKeybinding = (0, react_1.useCallback)((binding) => {
registered.current = [...registered.current, binding];
window.addEventListener(binding.event, binding.callback);
}, []);
const unregisterKeybinding = (0, react_1.useCallback)((binding) => {
registered.current = registered.current.filter((r) => {
if (r.id === binding.id) {
window.removeEventListener(binding.event, binding.callback);
return false;
}
return true;
});
}, []);
const unregisterPane = (0, react_1.useCallback)((paneId) => {
const matchedKeybindings = registered.current.filter((r) => r.registeredFromPane === paneId);
for (const matched of matchedKeybindings) {
unregisterKeybinding(matched);
}
}, [unregisterKeybinding]);
const value = (0, react_1.useMemo)(() => {
return {
registerKeybinding,
unregisterKeybinding,
unregisterPane,
};
}, [registerKeybinding, unregisterKeybinding, unregisterPane]);
return ((0, jsx_runtime_1.jsx)(exports.KeybindingContext.Provider, { value: value, children: children }));
};
exports.KeybindingContextProvider = KeybindingContextProvider;
@@ -0,0 +1,2 @@
export declare const persistLoopOption: (option: boolean) => void;
export declare const loadLoopOption: () => boolean;
@@ -0,0 +1,13 @@
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.loadLoopOption = exports.persistLoopOption = void 0;
const key = 'remotion.loop';
const persistLoopOption = (option) => {
localStorage.setItem(key, String(option));
};
exports.persistLoopOption = persistLoopOption;
const loadLoopOption = () => {
const item = localStorage.getItem(key);
return item !== 'false';
};
exports.loadLoopOption = loadLoopOption;
@@ -0,0 +1,3 @@
import type { TimelineInOutContextValue } from './in-out';
export declare const persistMarks: (marks: TimelineInOutContextValue) => void;
export declare const loadMarks: () => TimelineInOutContextValue;
@@ -0,0 +1,16 @@
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.loadMarks = exports.persistMarks = void 0;
const localStorageKey = () => `remotion.editor.marksv2`;
const persistMarks = (marks) => {
localStorage.setItem(localStorageKey(), JSON.stringify(marks));
};
exports.persistMarks = persistMarks;
const loadMarks = () => {
const item = localStorage.getItem(localStorageKey());
if (item === null) {
return {};
}
return JSON.parse(item);
};
exports.loadMarks = loadMarks;
@@ -0,0 +1,116 @@
import type { AudioCodec, ChromeMode, Codec, ColorSpace, LogLevel, OpenGlRenderer, PixelFormat, StillImageFormat, VideoImageFormat, X264Preset } from '@remotion/renderer';
import type { HardwareAccelerationOption } from '@remotion/renderer/client';
import type { PackageManager, RenderDefaults } from '@remotion/studio-shared';
import type { RenderStillOnWebImageFormat, WebRendererAudioCodec, WebRendererContainer, WebRendererHardwareAcceleration, WebRendererQuality, WebRendererVideoCodec } from '@remotion/web-renderer';
import type React from 'react';
import type { _InternalTypes } from 'remotion';
import type { CompType } from '../components/NewComposition/DuplicateComposition';
import type { QuickSwitcherMode } from '../components/QuickSwitcher/NoResults';
import type { RenderType } from '../components/RenderModal/RenderModalAdvanced';
import type { Bug, UpdateInfo } from '../components/UpdateCheck';
export type WebRenderModalState = {
type: 'web-render';
initialFrame: number;
compositionId: string;
defaultProps: Record<string, unknown>;
inFrameMark: number | null;
outFrameMark: number | null;
initialLogLevel: LogLevel;
initialStillImageFormat: RenderStillOnWebImageFormat;
initialScale: number;
initialDelayRenderTimeout: number;
initialDefaultOutName: string | null;
initialContainer: WebRendererContainer | null;
initialVideoCodec: WebRendererVideoCodec | null;
initialAudioCodec: WebRendererAudioCodec | null;
initialAudioBitrate: WebRendererQuality | null;
initialVideoBitrate: WebRendererQuality | null;
initialHardwareAcceleration: WebRendererHardwareAcceleration | null;
initialKeyframeIntervalInSeconds: number | null;
initialTransparent: boolean | null;
initialMuted: boolean | null;
initialLicenseKey: string | null;
initialMediaCacheSizeInBytes: number | null;
};
export type RenderModalState = {
type: 'server-render';
compositionId: string;
initialFrame: number;
initialStillImageFormat: StillImageFormat;
initialVideoImageFormat: VideoImageFormat | null;
initialJpegQuality: number;
initialScale: number;
initialLogLevel: LogLevel;
initialConcurrency: number;
initialMuted: boolean;
initialEnforceAudioTrack: boolean;
initialProResProfile: _InternalTypes['ProResProfile'] | null;
initialx264Preset: X264Preset;
initialPixelFormat: PixelFormat | null;
initialVideoBitrate: string | null;
initialAudioBitrate: string | null;
initialEveryNthFrame: number;
initialNumberOfGifLoops: number | null;
initialDelayRenderTimeout: number;
initialEnvVariables: Record<string, string>;
initialDisableWebSecurity: boolean;
initialOpenGlRenderer: OpenGlRenderer | null;
initialIgnoreCertificateErrors: boolean;
initialHeadless: boolean;
initialDarkMode: boolean;
initialMediaCacheSizeInBytes: number | null;
initialOffthreadVideoCacheSizeInBytes: number | null;
initialOffthreadVideoThreads: number | null;
initialColorSpace: ColorSpace;
initialMultiProcessOnLinux: boolean;
initialUserAgent: string | null;
initialEncodingMaxRate: string | null;
initialEncodingBufferSize: string | null;
initialForSeamlessAacConcatenation: boolean;
initialHardwareAcceleration: HardwareAccelerationOption;
initialBeep: boolean;
initialRepro: boolean;
initialChromeMode: ChromeMode;
minConcurrency: number;
maxConcurrency: number;
defaultProps: Record<string, unknown>;
inFrameMark: number | null;
outFrameMark: number | null;
defaultConfigurationVideoCodec: Codec;
defaultConfigurationAudioCodec: AudioCodec | null;
renderTypeOfLastRender: RenderType | null;
defaulMetadata: Record<string, string> | null;
renderDefaults: RenderDefaults;
};
export type ModalState = {
type: 'duplicate-comp';
compositionId: string;
compositionType: CompType;
} | {
type: 'delete-comp';
compositionId: string;
} | {
type: 'rename-comp';
compositionId: string;
} | {
type: 'input-props-override';
} | RenderModalState | WebRenderModalState | {
type: 'render-progress';
jobId: string;
} | {
type: 'update';
info: UpdateInfo;
knownBugs: Bug[];
} | {
type: 'install-packages';
packageManager: PackageManager;
} | {
type: 'quick-switcher';
mode: QuickSwitcherMode;
invocationTimestamp: number;
};
export type ModalContextType = {
selectedModal: ModalState | null;
setSelectedModal: React.Dispatch<React.SetStateAction<ModalState | null>>;
};
export declare const ModalsContext: React.Context<ModalContextType>;
@@ -0,0 +1,8 @@
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.ModalsContext = void 0;
const react_1 = require("react");
exports.ModalsContext = (0, react_1.createContext)({
selectedModal: null,
setSelectedModal: () => undefined,
});
@@ -0,0 +1,2 @@
export declare const persistMuteOption: (option: boolean) => void;
export declare const loadMuteOption: () => boolean;
@@ -0,0 +1,13 @@
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.loadMuteOption = exports.persistMuteOption = void 0;
const key = 'remotion.mute';
const persistMuteOption = (option) => {
localStorage.setItem(key, String(option));
};
exports.persistMuteOption = persistMuteOption;
const loadMuteOption = () => {
const item = localStorage.getItem(key);
return item === 'true';
};
exports.loadMuteOption = loadMuteOption;
@@ -0,0 +1,2 @@
export declare const persistPlaybackRate: (option: number) => void;
export declare const loadPlaybackRate: () => number;
@@ -0,0 +1,19 @@
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.loadPlaybackRate = exports.persistPlaybackRate = void 0;
const key = 'remotion.playbackrate';
const persistPlaybackRate = (option) => {
localStorage.setItem(key, String(option));
};
exports.persistPlaybackRate = persistPlaybackRate;
const loadPlaybackRate = () => {
if (typeof window !== 'undefined') {
return 1;
}
const item = localStorage.getItem(key);
if (item === null) {
return 1;
}
return Number(item);
};
exports.loadPlaybackRate = loadPlaybackRate;
@@ -0,0 +1,4 @@
import React from 'react';
export declare const PreviewSizeProvider: React.FC<{
readonly children: React.ReactNode;
}>;
@@ -0,0 +1,59 @@
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.PreviewSizeProvider = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("react");
const remotion_1 = require("remotion");
const editor_zoom_gestures_1 = require("./editor-zoom-gestures");
const key = 'remotion.previewSize';
const persistPreviewSizeOption = (option) => {
localStorage.setItem(key, JSON.stringify(option));
};
const loadPreviewSizeOption = () => {
const item = localStorage.getItem(key);
if (item === null) {
return {
size: 'auto',
translation: {
x: 0,
y: 0,
},
};
}
return JSON.parse(item);
};
const PreviewSizeProvider = ({ children }) => {
const [size, setSizeState] = (0, react_1.useState)(() => loadPreviewSizeOption());
const [translation, setTranslation] = (0, react_1.useState)(() => {
return {
x: 0,
y: 0,
};
});
const { editorZoomGestures } = (0, react_1.useContext)(editor_zoom_gestures_1.EditorZoomGesturesContext);
const setSize = (0, react_1.useCallback)((newValue) => {
setSizeState((prevState) => {
const newVal = newValue(prevState);
persistPreviewSizeOption(newVal);
return newVal;
});
}, []);
const previewSizeCtx = (0, react_1.useMemo)(() => {
return {
size: editorZoomGestures
? size
: {
size: size.size,
translation: {
x: 0,
y: 0,
},
},
setSize,
translation,
setTranslation,
};
}, [editorZoomGestures, size, setSize, translation]);
return ((0, jsx_runtime_1.jsx)(remotion_1.Internals.PreviewSizeContext.Provider, { value: previewSizeCtx, children: children }));
};
exports.PreviewSizeProvider = PreviewSizeProvider;
@@ -0,0 +1 @@
export declare const renderFrame: (frame: number, fps: number) => string;
@@ -0,0 +1,20 @@
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.renderFrame = void 0;
const renderFrame = (frame, fps) => {
const hours = Math.floor(frame / fps / 3600);
const remainingMinutes = frame - hours * fps * 3600;
const minutes = Math.floor(remainingMinutes / 60 / fps);
const remainingSec = frame - hours * fps * 3600 - minutes * fps * 60;
const seconds = Math.floor(remainingSec / fps);
const frameAfterSec = Math.round(frame % fps);
const hoursStr = String(hours);
const minutesStr = String(minutes).padStart(2, '0');
const secondsStr = String(seconds).padStart(2, '0');
const frameStr = String(frameAfterSec).padStart(2, '0');
if (hours > 0) {
return `${hoursStr}:${minutesStr}:${secondsStr}.${frameStr}`;
}
return `${minutesStr}:${secondsStr}.${frameStr}`;
};
exports.renderFrame = renderFrame;
@@ -0,0 +1,16 @@
import React from 'react';
export type SidebarCollapsedState = 'collapsed' | 'expanded' | 'responsive';
type RightSidebarCollapsedState = Exclude<SidebarCollapsedState, 'responsive'>;
type Context = {
sidebarCollapsedStateLeft: SidebarCollapsedState;
setSidebarCollapsedState: (options: {
left: null | React.SetStateAction<SidebarCollapsedState>;
right: null | React.SetStateAction<RightSidebarCollapsedState>;
}) => void;
sidebarCollapsedStateRight: RightSidebarCollapsedState;
};
export declare const SidebarContext: React.Context<Context>;
export declare const SidebarContextProvider: React.FC<{
readonly children: React.ReactNode;
}>;
export {};
@@ -0,0 +1,77 @@
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.SidebarContextProvider = exports.SidebarContext = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("react");
const mobile_layout_1 = require("../helpers/mobile-layout");
const storageKey = (sidebar) => {
if (sidebar === 'right') {
return 'remotion.sidebarRightCollapsing';
}
return 'remotion.sidebarCollapsing';
};
const getSavedCollapsedStateLeft = (isMobileLayout = false) => {
const state = window.localStorage.getItem(storageKey('left'));
if (isMobileLayout) {
return 'collapsed';
}
if (state === 'collapsed') {
return 'collapsed';
}
if (state === 'expanded') {
return 'expanded';
}
return 'responsive';
};
const getSavedCollapsedStateRight = (isMobileLayout = false) => {
const state = window.localStorage.getItem(storageKey('right'));
if (isMobileLayout) {
return 'collapsed';
}
if (state === 'expanded') {
return 'expanded';
}
return 'collapsed';
};
const saveCollapsedState = (type, sidebar) => {
window.localStorage.setItem(storageKey(sidebar), type);
};
exports.SidebarContext = (0, react_1.createContext)({
sidebarCollapsedStateLeft: 'collapsed',
setSidebarCollapsedState: () => {
throw new Error('sidebar collapsed state');
},
sidebarCollapsedStateRight: 'collapsed',
});
const SidebarContextProvider = ({ children }) => {
const isMobileLayout = (0, mobile_layout_1.useMobileLayout)();
const [sidebarCollapsedState, setSidebarCollapsedState] = (0, react_1.useState)(() => ({
left: getSavedCollapsedStateLeft(isMobileLayout),
right: getSavedCollapsedStateRight(isMobileLayout),
}));
const value = (0, react_1.useMemo)(() => {
return {
sidebarCollapsedStateLeft: sidebarCollapsedState.left,
sidebarCollapsedStateRight: sidebarCollapsedState.right,
setSidebarCollapsedState: (options) => {
const { left, right } = options;
setSidebarCollapsedState((f) => {
const copied = { ...f };
if (left) {
const updatedLeft = typeof left === 'function' ? left(f.left) : left;
saveCollapsedState(updatedLeft, 'left');
copied.left = updatedLeft;
}
if (right) {
const updatedRight = typeof right === 'function' ? right(f.right) : right;
saveCollapsedState(updatedRight, 'right');
copied.right = updatedRight;
}
return copied;
});
},
};
}, [sidebarCollapsedState]);
return ((0, jsx_runtime_1.jsx)(exports.SidebarContext.Provider, { value: value, children: children }));
};
exports.SidebarContextProvider = SidebarContextProvider;
@@ -0,0 +1,6 @@
type TimelineRef = {
collapseAll: () => void;
expandAll: () => void;
};
export declare const timelineRef: import("react").RefObject<TimelineRef | null>;
export {};
@@ -0,0 +1,5 @@
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.timelineRef = void 0;
const react_1 = require("react");
exports.timelineRef = (0, react_1.createRef)();
@@ -0,0 +1,10 @@
import React from 'react';
export declare const TIMELINE_MIN_ZOOM = 1;
export declare const TIMELINE_MAX_ZOOM = 5;
export declare const TimelineZoomCtx: React.Context<{
zoom: Record<string, number>;
setZoom: (compositionId: string, prev: (prevZoom: number) => number) => void;
}>;
export declare const TimelineZoomContext: React.FC<{
readonly children: React.ReactNode;
}>;
@@ -0,0 +1,40 @@
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.TimelineZoomContext = exports.TimelineZoomCtx = exports.TIMELINE_MAX_ZOOM = exports.TIMELINE_MIN_ZOOM = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("react");
const imperative_state_1 = require("../components/Timeline/imperative-state");
const timeline_scroll_logic_1 = require("../components/Timeline/timeline-scroll-logic");
const ZoomPersistor_1 = require("../components/ZoomPersistor");
exports.TIMELINE_MIN_ZOOM = 1;
exports.TIMELINE_MAX_ZOOM = 5;
exports.TimelineZoomCtx = (0, react_1.createContext)({
zoom: {},
setZoom: () => {
throw new Error('has no context');
},
});
const TimelineZoomContext = ({ children }) => {
const [zoom, setZoom] = (0, react_1.useState)(() => (0, ZoomPersistor_1.getZoomFromLocalStorage)());
const value = (0, react_1.useMemo)(() => {
return {
zoom,
setZoom: (compositionId, callback) => {
setZoom((prevZoomMap) => {
var _a, _b;
const newZoomWithFloatingPointErrors = Math.min(exports.TIMELINE_MAX_ZOOM, Math.max(exports.TIMELINE_MIN_ZOOM, callback((_a = prevZoomMap[compositionId]) !== null && _a !== void 0 ? _a : exports.TIMELINE_MIN_ZOOM)));
const newZoom = Math.round(newZoomWithFloatingPointErrors * 10) / 10;
(0, timeline_scroll_logic_1.zoomAndPreserveCursor)({
oldZoom: (_b = prevZoomMap[compositionId]) !== null && _b !== void 0 ? _b : exports.TIMELINE_MIN_ZOOM,
newZoom,
currentDurationInFrames: (0, imperative_state_1.getCurrentDuration)(),
currentFrame: (0, imperative_state_1.getCurrentFrame)(),
});
return { ...prevZoomMap, [compositionId]: newZoom };
});
},
};
}, [zoom]);
return ((0, jsx_runtime_1.jsx)(exports.TimelineZoomCtx.Provider, { value: value, children: children }));
};
exports.TimelineZoomContext = TimelineZoomContext;
@@ -0,0 +1 @@
export declare const useTimelineFlex: (id: string) => [number | null, (value: number) => void];
@@ -0,0 +1,18 @@
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.useTimelineFlex = void 0;
const localStorageKey = (id) => `remotion.editor.timelineFlex.${id}`;
const persistTimelineFlex = (value, id) => {
localStorage.setItem(localStorageKey(id), String(value));
};
const loadTimelineFlex = (id) => {
const item = localStorage.getItem(localStorageKey(id));
return item ? parseFloat(item) : null;
};
const useTimelineFlex = (id) => {
return [
loadTimelineFlex(id),
(value) => persistTimelineFlex(value, id),
];
};
exports.useTimelineFlex = useTimelineFlex;
@@ -0,0 +1,13 @@
import React from 'react';
export declare const HigherZIndex: React.FC<{
readonly onEscape: () => void;
readonly onOutsideClick: (target: Node) => void;
readonly children: React.ReactNode;
readonly disabled?: boolean;
}>;
export declare const useZIndex: () => {
currentZIndex: number;
highestZIndex: number;
isHighestContext: boolean;
tabIndex: number;
};
@@ -0,0 +1,103 @@
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.useZIndex = exports.HigherZIndex = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("react");
const use_keybinding_1 = require("../helpers/use-keybinding");
const highest_z_index_1 = require("./highest-z-index");
const input_dragger_click_lock_1 = require("./input-dragger-click-lock");
const ZIndexContext = (0, react_1.createContext)({
currentIndex: 0,
});
const margin = {
margin: 'auto',
};
const EscapeHook = ({ onEscape }) => {
const keybindings = (0, use_keybinding_1.useKeybinding)();
(0, react_1.useEffect)(() => {
const escape = keybindings.registerKeybinding({
event: 'keydown',
key: 'Escape',
callback: onEscape,
commandCtrlKey: false,
preventDefault: true,
// To dismiss the Quick Switcher menu if input is focused
triggerIfInputFieldFocused: true,
keepRegisteredWhenNotHighestContext: false,
});
return () => {
escape.unregister();
};
}, [keybindings, onEscape]);
return null;
};
const HigherZIndex = ({ children, onEscape, onOutsideClick, disabled }) => {
const context = (0, react_1.useContext)(ZIndexContext);
const highestContext = (0, react_1.useContext)(highest_z_index_1.HighestZIndexContext);
const containerRef = (0, react_1.useRef)(null);
const currentIndex = disabled
? context.currentIndex
: context.currentIndex + 1;
(0, react_1.useEffect)(() => {
if (disabled) {
return;
}
highestContext.registerZIndex(currentIndex);
return () => highestContext.unregisterZIndex(currentIndex);
}, [currentIndex, highestContext, disabled]);
(0, react_1.useEffect)(() => {
if (disabled) {
return;
}
let onUp = null;
const listener = (downEvent) => {
var _a;
const outsideClick = !((_a = containerRef.current) === null || _a === void 0 ? void 0 : _a.contains(downEvent.target));
if (!outsideClick) {
return;
}
onUp = (upEvent) => {
if (highestContext.highestIndex === currentIndex &&
!(0, input_dragger_click_lock_1.getClickLock)() &&
// Don't trigger if that click removed that node
document.contains(upEvent.target)) {
upEvent.stopPropagation();
onOutsideClick(upEvent.target);
}
};
window.addEventListener('pointerup', onUp, { once: true });
};
// If a menu is opened, then this component will also still receive the pointerdown event.
// However we may not interpret it as a outside click, so we need to wait for the next tick
requestAnimationFrame(() => {
window.addEventListener('pointerdown', listener);
});
return () => {
if (onUp) {
// @ts-expect-error
window.removeEventListener('pointerup', onUp, { once: true });
}
onUp = null;
return window.removeEventListener('pointerdown', listener);
};
}, [currentIndex, disabled, highestContext.highestIndex, onOutsideClick]);
const value = (0, react_1.useMemo)(() => {
return {
currentIndex,
};
}, [currentIndex]);
return ((0, jsx_runtime_1.jsxs)(ZIndexContext.Provider, { value: value, children: [disabled ? null : (0, jsx_runtime_1.jsx)(EscapeHook, { onEscape: onEscape }), (0, jsx_runtime_1.jsx)("div", { ref: containerRef, style: margin, children: children })] }));
};
exports.HigherZIndex = HigherZIndex;
const useZIndex = () => {
const context = (0, react_1.useContext)(ZIndexContext);
const highestContext = (0, react_1.useContext)(highest_z_index_1.HighestZIndexContext);
const isHighestContext = highestContext.highestIndex === context.currentIndex;
return (0, react_1.useMemo)(() => ({
currentZIndex: context.currentIndex,
highestZIndex: highestContext.highestIndex,
isHighestContext,
tabIndex: isHighestContext ? 0 : -1,
}), [context.currentIndex, highestContext.highestIndex, isHighestContext]);
};
exports.useZIndex = useZIndex;