Add .gitignore to exclude all node packages and lock files
This commit is contained in:
Generated
Vendored
+2
@@ -0,0 +1,2 @@
|
||||
export declare const canvasRef: import("react").RefObject<HTMLDivElement | null>;
|
||||
export declare const drawRef: import("react").RefObject<HTMLDivElement | null>;
|
||||
Generated
Vendored
+6
@@ -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)();
|
||||
Generated
Vendored
+8
@@ -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 {};
|
||||
Generated
Vendored
+17
@@ -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,
|
||||
});
|
||||
Generated
Vendored
+24
@@ -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>;
|
||||
Generated
Vendored
+34
@@ -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,
|
||||
});
|
||||
Generated
Vendored
+13
@@ -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 {};
|
||||
Generated
Vendored
+24
@@ -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;
|
||||
Generated
Vendored
+8
@@ -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 {};
|
||||
Generated
Vendored
+17
@@ -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,
|
||||
});
|
||||
Generated
Vendored
+13
@@ -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 {};
|
||||
+30
@@ -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;
|
||||
Generated
Vendored
+11
@@ -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 {};
|
||||
Generated
Vendored
+35
@@ -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;
|
||||
Generated
Vendored
+13
@@ -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;
|
||||
+44
@@ -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;
|
||||
Generated
Vendored
+2
@@ -0,0 +1,2 @@
|
||||
export declare const getClickLock: () => boolean;
|
||||
export declare const setClickLock: (lock: boolean) => void;
|
||||
Generated
Vendored
+10
@@ -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;
|
||||
Generated
Vendored
+20
@@ -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 {};
|
||||
Generated
Vendored
+43
@@ -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;
|
||||
+2
@@ -0,0 +1,2 @@
|
||||
export declare const persistLoopOption: (option: boolean) => void;
|
||||
export declare const loadLoopOption: () => boolean;
|
||||
+13
@@ -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;
|
||||
+3
@@ -0,0 +1,3 @@
|
||||
import type { TimelineInOutContextValue } from './in-out';
|
||||
export declare const persistMarks: (marks: TimelineInOutContextValue) => void;
|
||||
export declare const loadMarks: () => TimelineInOutContextValue;
|
||||
+16
@@ -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;
|
||||
Generated
Vendored
+116
@@ -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>;
|
||||
+8
@@ -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,
|
||||
});
|
||||
+2
@@ -0,0 +1,2 @@
|
||||
export declare const persistMuteOption: (option: boolean) => void;
|
||||
export declare const loadMuteOption: () => boolean;
|
||||
+13
@@ -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;
|
||||
Generated
Vendored
+2
@@ -0,0 +1,2 @@
|
||||
export declare const persistPlaybackRate: (option: number) => void;
|
||||
export declare const loadPlaybackRate: () => number;
|
||||
Generated
Vendored
+19
@@ -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;
|
||||
Generated
Vendored
+4
@@ -0,0 +1,4 @@
|
||||
import React from 'react';
|
||||
export declare const PreviewSizeProvider: React.FC<{
|
||||
readonly children: React.ReactNode;
|
||||
}>;
|
||||
Generated
Vendored
+59
@@ -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;
|
||||
Generated
Vendored
+1
@@ -0,0 +1 @@
|
||||
export declare const renderFrame: (frame: number, fps: number) => string;
|
||||
Generated
Vendored
+20
@@ -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;
|
||||
Generated
Vendored
+16
@@ -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 {};
|
||||
+77
@@ -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;
|
||||
Generated
Vendored
+6
@@ -0,0 +1,6 @@
|
||||
type TimelineRef = {
|
||||
collapseAll: () => void;
|
||||
expandAll: () => void;
|
||||
};
|
||||
export declare const timelineRef: import("react").RefObject<TimelineRef | null>;
|
||||
export {};
|
||||
Generated
Vendored
+5
@@ -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)();
|
||||
Generated
Vendored
+10
@@ -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;
|
||||
}>;
|
||||
Generated
Vendored
+40
@@ -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;
|
||||
Generated
Vendored
+1
@@ -0,0 +1 @@
|
||||
export declare const useTimelineFlex: (id: string) => [number | null, (value: number) => void];
|
||||
Generated
Vendored
+18
@@ -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;
|
||||
Generated
Vendored
+13
@@ -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;
|
||||
};
|
||||
+103
@@ -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;
|
||||
Reference in New Issue
Block a user