RomanNum3ral
/
OpenCut
mirror of https://github.com/OpenCut-app/OpenCut.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

fix all linter errors

This commit is contained in:
Maze Winther 2026-01-23 22:49:00 +01:00
parent cd0a8d020e
commit b5f305e4e7
20 changed files with 1942 additions and 1898 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3428
.cursor/rules/codebase-index.mdc
View File

File diff suppressed because it is too large Load Diff

6
apps/web/src/app/projects/page-legacy.tsx
View File

@ -102,7 +102,7 @@ export default function ProjectsPage() {
setSelectedProjects(newSelected);
};
const handleSelectAll = ({ checked }: { checked: boolean }) => {
const _handleSelectAll = ({ checked }: { checked: boolean }) => {
if (checked) {
setSelectedProjects(
new Set(projectsToDisplay.map((project) => project.id)),
@ -141,11 +141,11 @@ export default function ProjectsPage() {
sortOption,
});
const isAllSelected =
const _isAllSelected =
projectsToDisplay.length > 0 &&
selectedProjects.size === projectsToDisplay.length;
const hasSomeSelected =
const _hasSomeSelected =
selectedProjects.size > 0 &&
selectedProjects.size < projectsToDisplay.length;

15
apps/web/src/components/editor/draggable-item.tsx
View File

@ -129,12 +129,14 @@ export function DraggableItem({
{shouldShowLabel && (
<span
className="text-muted-foreground w-full truncate text-left text-[0.7rem]"
aria-label={name}
title={name}
>
{name.length > 8
? `${name.slice(0, 16)}...${name.slice(-3)}`
: name}
<span className="sr-only">{name}</span>
<span aria-hidden="true">
{name.length > 8
? `${name.slice(0, 16)}...${name.slice(-3)}`
: name}
</span>
</span>
)}
</div>
@ -147,7 +149,8 @@ export function DraggableItem({
isHighlighted && highlightClassName,
)}
>
<div
<button
type="button"
className={cn(
"flex h-8 w-full cursor-default items-center gap-3 px-1",
isDraggable && "[&::-webkit-drag-ghost]:opacity-0",
@ -161,7 +164,7 @@ export function DraggableItem({
{preview}
</div>
<span className="w-full flex-1 truncate text-sm">{name}</span>
</div>
</button>
</div>
)}

42
apps/web/src/components/editor/timeline/bookmarks.tsx
View File

@ -26,28 +26,30 @@ export function TimelineBookmarksRow({
const activeScene = editor.scenes.getActiveScene();
return (
<div
className="relative h-4 flex-1 overflow-hidden"
onWheel={handleWheel}
onClick={handleTimelineContentClick}
onMouseDown={handleRulerTrackingMouseDown}
>
<div className="relative h-4 flex-1 overflow-hidden">
<ScrollArea className="scrollbar-hidden w-full" ref={bookmarksScrollRef}>
<div
className="relative h-4 cursor-default select-none"
<button
className="relative h-4 w-full cursor-default select-none border-0 bg-transparent p-0"
style={{
width: `${dynamicTimelineWidth}px`,
}}
onMouseDown={handleRulerMouseDown}
aria-label="Timeline ruler"
type="button"
onWheel={handleWheel}
onClick={handleTimelineContentClick}
onMouseDown={(event) => {
handleRulerMouseDown(event);
handleRulerTrackingMouseDown(event);
}}
>
{activeScene.bookmarks.map((time: number, index: number) => (
{activeScene.bookmarks.map((time: number) => (
<TimelineBookmark
key={`bookmark-row-${index}`}
key={`bookmark-row-${time}`}
time={time}
zoomLevel={zoomLevel}
/>
))}
</div>
</button>
</ScrollArea>
</div>
);
@ -65,23 +67,29 @@ export function TimelineBookmark({
const handleBookmarkClick = ({
event,
}: {
event: React.MouseEvent<HTMLDivElement>;
event: React.MouseEvent<HTMLButtonElement>;
}) => {
event.stopPropagation();
editor.playback.seek({ time });
};
return (
<div
className="absolute top-0 h-10 w-0.5 cursor-pointer"
<button
className="absolute top-0 h-10 w-0.5 cursor-pointer border-0 bg-transparent p-0"
style={{
left: `${time * TIMELINE_CONSTANTS.PIXELS_PER_SECOND * zoomLevel}px`,
}}
aria-label={`Seek to bookmark at ${time}s`}
type="button"
onClick={(event) => handleBookmarkClick({ event })}
>
<div className="text-primary absolute top-[-1px] left-[-5px]">
<Bookmark className="fill-primary size-3" />
<Bookmark
aria-hidden="true"
className="fill-primary size-3"
focusable="false"
/>
</div>
</div>
</button>
);
}

8
apps/web/src/components/editor/timeline/timeline-ruler.tsx
View File

@ -47,13 +47,21 @@ export function TimelineRuler({
return (
<div
role="slider"
tabIndex={0}
aria-label="Timeline ruler"
aria-valuemin={0}
aria-valuemax={effectiveDuration}
aria-valuenow={0}
className="relative h-4 flex-1 overflow-hidden"
onWheel={handleWheel}
onClick={handleTimelineContentClick}
onMouseDown={handleRulerTrackingMouseDown}
onKeyDown={() => {}}
>
<ScrollArea className="scrollbar-hidden w-full" ref={rulerScrollRef}>
<div
role="none"
ref={rulerRef}
className="relative h-4 cursor-default select-none"
style={{

4
apps/web/src/components/footer.tsx
View File

@ -7,12 +7,12 @@ import { capitalizeFirstLetter } from "@/utils/strings";
type Category = "resources" | "company";
interface Link {
interface FooterLink {
label: string;
href: string;
}
type CategoryLinks = Record<Category, Link[]>;
type CategoryLinks = Record<Category, FooterLink[]>;
const links: CategoryLinks = {
resources: [

2
apps/web/src/components/providers/editor-provider.tsx
View File

@ -56,7 +56,7 @@ export function EditorProvider({ projectId, children }: EditorProviderProps) {
name: "Untitled Project",
});
router.replace(`/editor/${newProjectId}`);
} catch (createErr) {
} catch (_createErr) {
setError("Failed to create project");
setIsLoading(false);
}

2
apps/web/src/components/storage-provider.tsx
View File

@ -73,7 +73,7 @@ export function StorageProvider({ children }: StorageProviderProps) {
};
initializeStorage();
}, []);
}, [editor.project.loadAllProjects]);
return (
<StorageContext.Provider value={status}>{children}</StorageContext.Provider>

1
apps/web/src/core/managers/timeline-manager.ts
View File

@ -1,7 +1,6 @@
import type { EditorCore } from "@/core";
import type {
TrackType,
CreateTimelineElement,
TimelineTrack,
TextElement,
TimelineElement,

2
apps/web/src/hooks/actions/use-editor-actions.ts
View File

@ -224,7 +224,7 @@ export function useEditorActions() {
elements: selectedElements,
});
const items = results.map(({ track, element }) => {
const { id, ...elementWithoutId } = element;
const { ...elementWithoutId } = element;
return {
trackId: track.id,
trackType: track.type,

54
apps/web/src/hooks/timeline/element/use-element-resize.ts
View File

@ -1,4 +1,4 @@
import { useState, useEffect, useRef } from "react";
import { useState, useEffect, useRef, useCallback } from "react";
import type { TimelineElement, TimelineTrack } from "@/types/timeline";
import { snapTimeToFrame } from "@/lib/time";
import { EditorCore } from "@/core";
@ -48,26 +48,6 @@ export function useTimelineElementResize({
const currentStartTimeRef = useRef(element.startTime);
const currentDurationRef = useRef(element.duration);
useEffect(() => {
if (!resizing) return;
const handleDocumentMouseMove = ({ clientX }: MouseEvent) => {
updateTrimFromMouseMove({ clientX });
};
const handleDocumentMouseUp = () => {
handleResizeEnd();
};
document.addEventListener("mousemove", handleDocumentMouseMove);
document.addEventListener("mouseup", handleDocumentMouseUp);
return () => {
document.removeEventListener("mousemove", handleDocumentMouseMove);
document.removeEventListener("mouseup", handleDocumentMouseUp);
};
}, [resizing]);
const handleResizeStart = ({
e,
elementId,
@ -101,15 +81,15 @@ export function useTimelineElementResize({
onResizeStateChange?.({ isResizing: true });
};
const canExtendElementDuration = () => {
const canExtendElementDuration = useCallback(() => {
if (element.type === "text" || element.type === "image") {
return true;
}
return false;
};
}, [element.type]);
const updateTrimFromMouseMove = ({ clientX }: { clientX: number }) => {
const updateTrimFromMouseMove = useCallback(({ clientX }: { clientX: number }) => {
if (!resizing) return;
const deltaX = clientX - resizing.startX;
@ -277,9 +257,9 @@ export function useTimelineElementResize({
currentDurationRef.current = newDuration;
}
}
};
}, [resizing, zoomLevel, activeProject.settings.fps, snappingEnabled, editor, findSnapPoints, snapToNearestPoint, element.id, onSnapPointChange, canExtendElementDuration]);
const handleResizeEnd = () => {
const handleResizeEnd = useCallback(() => {
if (!resizing) return;
const finalTrimStart = currentTrimStartRef.current;
@ -317,7 +297,27 @@ export function useTimelineElementResize({
setResizing(null);
onResizeStateChange?.({ isResizing: false });
onSnapPointChange?.(null);
};
}, [resizing, editor.timeline, element.id, track.id, onResizeStateChange, onSnapPointChange]);
useEffect(() => {
if (!resizing) return;
const handleDocumentMouseMove = ({ clientX }: MouseEvent) => {
updateTrimFromMouseMove({ clientX });
};
const handleDocumentMouseUp = () => {
handleResizeEnd();
};
document.addEventListener("mousemove", handleDocumentMouseMove);
document.addEventListener("mouseup", handleDocumentMouseUp);
return () => {
document.removeEventListener("mousemove", handleDocumentMouseMove);
document.removeEventListener("mouseup", handleDocumentMouseUp);
};
}, [resizing, handleResizeEnd, updateTrimFromMouseMove]);
return {
resizing,

11
apps/web/src/hooks/timeline/use-timeline-drag-drop.ts
View File

@ -16,13 +16,11 @@ import type { MediaDragData, StickerDragData } from "@/types/drag";
interface UseTimelineDragDropProps {
containerRef: RefObject<HTMLDivElement | null>;
zoomLevel: number;
isSnappingEnabled?: boolean;
}
export function useTimelineDragDrop({
containerRef,
zoomLevel,
isSnappingEnabled = true,
}: UseTimelineDragDropProps) {
const editor = useEditor();
const [isDragOver, setIsDragOver] = useState(false);
@ -488,11 +486,12 @@ export function useTimelineDragDrop({
}
},
[
dropTarget,
executeTextDrop,
executeStickerDrop,
executeMediaDrop,
dropTarget,
executeTextDrop,
executeStickerDrop,
executeMediaDrop,
executeFileDrop,
containerRef,
],
);

150
apps/web/src/hooks/timeline/use-timeline-playhead.ts
View File

@ -21,15 +21,18 @@ export function useTimelinePlayhead({
}: UseTimelinePlayheadProps) {
const editor = useEditor();
const activeProject = editor.project.getActive();
const seek = (time: number) => editor.playback.seek({ time });
const currentTime = editor.playback.getCurrentTime();
const duration = editor.timeline.getTotalDuration();
const isPlaying = editor.playback.getIsPlaying();
const seek = useCallback(
({ time }: { time: number }) => editor.playback.seek({ time }),
[editor.playback],
);
// Playhead scrubbing state
const [isScrubbing, setIsScrubbing] = useState(false);
const [scrubTime, setScrubTime] = useState<number | null>(null);
// Ruler drag detection state
const [isDraggingRuler, setIsDraggingRuler] = useState(false);
const [hasDraggedRuler, setHasDraggedRuler] = useState(false);
const lastMouseXRef = useRef<number>(0);
@ -37,67 +40,78 @@ export function useTimelinePlayhead({
const playheadPosition =
isScrubbing && scrubTime !== null ? scrubTime : currentTime;
const handlePlayheadMouseDown = useCallback(
(event: React.MouseEvent) => {
event.preventDefault();
event.stopPropagation(); // prevent ruler drag from triggering
setIsScrubbing(true);
handleScrub(event);
const handleScrub = useCallback(
({ event }: { event: MouseEvent | React.MouseEvent }) => {
const ruler = rulerRef.current;
if (!ruler) return;
const rulerRect = ruler.getBoundingClientRect();
const relativeMouseX = event.clientX - rulerRect.left;
const timelineContentWidth =
duration * TIMELINE_CONSTANTS.PIXELS_PER_SECOND * zoomLevel;
const clampedMouseX = Math.max(
0,
Math.min(timelineContentWidth, relativeMouseX),
);
const rawTime = Math.max(
0,
Math.min(
duration,
clampedMouseX /
(TIMELINE_CONSTANTS.PIXELS_PER_SECOND * zoomLevel),
),
);
const framesPerSecond = activeProject.settings.fps;
const time = getSnappedSeekTime({
rawTime,
duration,
fps: framesPerSecond,
});
setScrubTime(time);
seek({ time });
lastMouseXRef.current = event.clientX;
},
[duration, zoomLevel],
[duration, zoomLevel, seek, rulerRef, activeProject.settings.fps],
);
const handlePlayheadMouseDown = useCallback(
({ event }: { event: React.MouseEvent }) => {
event.preventDefault();
event.stopPropagation();
setIsScrubbing(true);
handleScrub({ event });
},
[handleScrub],
);
const handleRulerMouseDown = useCallback(
(event: React.MouseEvent) => {
// only handle left mouse button
({ event }: { event: React.MouseEvent }) => {
if (event.button !== 0) return;
// don't interfere if clicking on the playhead itself
if (playheadRef?.current?.contains(event.target as Node)) return;
event.preventDefault();
setIsDraggingRuler(true);
setHasDraggedRuler(false);
// start scrubbing immediately
setIsScrubbing(true);
handleScrub(event);
handleScrub({ event });
},
[duration, zoomLevel],
[handleScrub, playheadRef],
);
const handleScrub = useCallback(
(event: MouseEvent | React.MouseEvent) => {
const ruler = rulerRef.current;
if (!ruler) return;
const rect = ruler.getBoundingClientRect();
const rawX = event.clientX - rect.left;
const handlePlayheadMouseDownEvent = useCallback(
(event: React.MouseEvent) => handlePlayheadMouseDown({ event }),
[handlePlayheadMouseDown],
);
// get the timeline content width based on duration and zoom
const timelineContentWidth =
duration * TIMELINE_CONSTANTS.PIXELS_PER_SECOND * zoomLevel;
// constrain x to be within the timeline content bounds
const x = Math.max(0, Math.min(timelineContentWidth, rawX));
const rawTime = Math.max(
0,
Math.min(
duration,
x / (TIMELINE_CONSTANTS.PIXELS_PER_SECOND * zoomLevel),
),
);
// use frame snapping for playhead scrubbing
const fps = activeProject.settings.fps;
const time = getSnappedSeekTime({ rawTime, duration, fps });
setScrubTime(time);
seek(time); // update video preview in real time
// store mouse position for auto-scrolling
lastMouseXRef.current = event.clientX;
},
[duration, zoomLevel, seek, rulerRef, activeProject.settings.fps],
const handleRulerMouseDownEvent = useCallback(
(event: React.MouseEvent) => handleRulerMouseDown({ event }),
[handleRulerMouseDown],
);
useEdgeAutoScroll({
@ -111,30 +125,30 @@ export function useTimelinePlayhead({
useEffect(() => {
if (!isScrubbing) return;
const onMouseMove = (event: MouseEvent) => {
handleScrub(event);
// mark that we've dragged if ruler drag is active
const handleMouseMove = ({ event }: { event: MouseEvent }) => {
handleScrub({ event });
if (isDraggingRuler) {
setHasDraggedRuler(true);
}
};
const onMouseUp = (event: MouseEvent) => {
const handleMouseUp = ({ event }: { event: MouseEvent }) => {
setIsScrubbing(false);
if (scrubTime !== null) seek(scrubTime); // finalize seek
if (scrubTime !== null) seek({ time: scrubTime });
setScrubTime(null);
// handle ruler click vs drag
if (isDraggingRuler) {
setIsDraggingRuler(false);
// if we didn't drag, treat it as a click-to-seek
if (!hasDraggedRuler) {
handleScrub(event);
handleScrub({ event });
}
setHasDraggedRuler(false);
}
};
const onMouseMove = (event: MouseEvent) => handleMouseMove({ event });
const onMouseUp = (event: MouseEvent) => handleMouseUp({ event });
window.addEventListener("mousemove", onMouseMove);
window.addEventListener("mouseup", onMouseUp);
@ -149,49 +163,45 @@ export function useTimelinePlayhead({
handleScrub,
isDraggingRuler,
hasDraggedRuler,
// edge auto scroll hook is independent
]);
useEffect(() => {
// only auto-scroll during playback, not during manual interactions
if (!editor.playback.getIsPlaying() || isScrubbing) return;
if (!isPlaying || isScrubbing) return;
const rulerViewport = rulerScrollRef.current;
const tracksViewport = tracksScrollRef.current;
if (!rulerViewport || !tracksViewport) return;
const playheadPx =
const playheadPixels =
playheadPosition * TIMELINE_CONSTANTS.PIXELS_PER_SECOND * zoomLevel;
const viewportWidth = rulerViewport.clientWidth;
const scrollMin = 0;
const scrollMax = rulerViewport.scrollWidth - viewportWidth;
const scrollMinimum = 0;
const scrollMaximum = rulerViewport.scrollWidth - viewportWidth;
// only auto-scroll if playhead is completely out of view (no buffer)
const needsScroll =
playheadPx < rulerViewport.scrollLeft ||
playheadPx > rulerViewport.scrollLeft + viewportWidth;
playheadPixels < rulerViewport.scrollLeft ||
playheadPixels > rulerViewport.scrollLeft + viewportWidth;
if (needsScroll) {
// center the playhead in the viewport
const desiredScroll = Math.max(
scrollMin,
Math.min(scrollMax, playheadPx - viewportWidth / 2),
scrollMinimum,
Math.min(scrollMaximum, playheadPixels - viewportWidth / 2),
);
rulerViewport.scrollLeft = tracksViewport.scrollLeft = desiredScroll;
}
}, [
playheadPosition,
duration,
zoomLevel,
rulerScrollRef,
tracksScrollRef,
isScrubbing,
isPlaying,
]);
return {
playheadPosition,
handlePlayheadMouseDown,
handleRulerMouseDown,
handlePlayheadMouseDown: handlePlayheadMouseDownEvent,
handleRulerMouseDown: handleRulerMouseDownEvent,
isDraggingRuler,
};
}

39
apps/web/src/hooks/use-keybindings.ts
View File

@ -3,7 +3,7 @@ import { invokeAction } from "@/lib/actions";
import { useKeybindingsStore } from "@/stores/keybindings-store";
/**
* A composable that hooks to the caller component's
* a composable that hooks to the caller component's
* lifecycle and hooks to the keyboard events to fire
* the appropriate actions based on keybindings
*/
@ -13,7 +13,7 @@ export function useKeybindingsListener() {
useEffect(() => {
const handleKeyDown = (ev: KeyboardEvent) => {
// Do not check keybinds if the mode is disabled
// do not check keybinds if the mode is disabled
if (!keybindingsEnabled) return;
// ignore key events if user is changing keybindings
if (isRecording) return;
@ -35,20 +35,22 @@ export function useKeybindingsListener() {
ev.preventDefault();
// Handle actions with default arguments
let actionArgs: any;
if (boundAction === "seek-forward") {
actionArgs = { seconds: 1 };
} else if (boundAction === "seek-backward") {
actionArgs = { seconds: 1 };
} else if (boundAction === "jump-forward") {
actionArgs = { seconds: 5 };
} else if (boundAction === "jump-backward") {
actionArgs = { seconds: 5 };
}
invokeAction(boundAction, actionArgs, "keypress");
switch (boundAction) {
case "seek-forward":
invokeAction("seek-forward", { seconds: 1 }, "keypress");
break;
case "seek-backward":
invokeAction("seek-backward", { seconds: 1 }, "keypress");
break;
case "jump-forward":
invokeAction("jump-forward", { seconds: 5 }, "keypress");
break;
case "jump-backward":
invokeAction("jump-backward", { seconds: 5 }, "keypress");
break;
default:
invokeAction(boundAction, undefined, "keypress");
}
};
document.addEventListener("keydown", handleKeyDown);
@ -60,7 +62,7 @@ export function useKeybindingsListener() {
}
/**
* This composable allows for the UI component to be disabled if the component in question is mounted
* this composable allows for the UI component to be disabled if the component in question is mounted
*/
export function useKeybindingDisabler() {
const { disableKeybindings, enableKeybindings } = useKeybindingsStore();
@ -70,6 +72,3 @@ export function useKeybindingDisabler() {
enableKeybindings,
};
}
// Export the bindings for backward compatibility
export const bindings = {};

28
apps/web/src/lib/actions/registry.ts
View File

@ -6,19 +6,21 @@ import type {
TActionArgsMap,
TArgOfAction,
TInvocationTrigger,
TBoundActionList,
} from "./types";
const boundActions: TBoundActionList = {};
type ActionHandler = (arg: unknown, trigger?: TInvocationTrigger) => void;
const boundActions: Partial<Record<TAction, ActionHandler[]>> = {};
export function bindAction<A extends TAction>(
action: A,
handler: TActionFunc<A>,
) {
if (boundActions[action]) {
boundActions[action]?.push(handler);
const handlers = boundActions[action];
const typedHandler = handler as ActionHandler;
if (handlers) {
handlers.push(typedHandler);
} else {
boundActions[action] = [handler] as any;
boundActions[action] = [typedHandler];
}
}
@ -26,9 +28,11 @@ export function unbindAction<A extends TAction>(
action: A,
handler: TActionFunc<A>,
) {
boundActions[action] = boundActions[action]?.filter(
(x) => x !== handler,
) as any;
const handlers = boundActions[action];
if (!handlers) return;
const typedHandler = handler as ActionHandler;
boundActions[action] = handlers.filter((h) => h !== typedHandler);
if (boundActions[action]?.length === 0) {
delete boundActions[action];
@ -41,7 +45,11 @@ type InvokeActionFunc = {
args?: undefined,
trigger?: TInvocationTrigger,
): void;
<A extends TActionWithArgs>(action: A, args: TActionArgsMap[A]): void;
<A extends TActionWithArgs>(
action: A,
args: TActionArgsMap[A],
trigger?: TInvocationTrigger,
): void;
};
export const invokeAction: InvokeActionFunc = <A extends TAction>(
@ -49,5 +57,5 @@ export const invokeAction: InvokeActionFunc = <A extends TAction>(
args?: TArgOfAction<A>,
trigger?: TInvocationTrigger,
) => {
boundActions[action]?.forEach((handler) => (handler as any)(args, trigger));
boundActions[action]?.forEach((handler) => handler(args, trigger));
};

26
apps/web/src/lib/time.ts
View File

@ -57,7 +57,7 @@ export function parseTimeCode({
const parts = cleanTimeCode.split(":");
if (parts.length !== 2) return null;
const [minutes, seconds] = parts.map((part) => parseInt(part, 10));
if (isNaN(minutes) || isNaN(seconds)) return null;
if (Number.isNaN(minutes) || Number.isNaN(seconds)) return null;
if (minutes < 0 || seconds < 0 || seconds >= 60) return null;
return minutes * 60 + seconds;
}
@ -68,7 +68,12 @@ export function parseTimeCode({
const [hours, minutes, seconds] = parts.map((part) =>
parseInt(part, 10),
);
if (isNaN(hours) || isNaN(minutes) || isNaN(seconds)) return null;
if (
Number.isNaN(hours) ||
Number.isNaN(minutes) ||
Number.isNaN(seconds)
)
return null;
if (
hours < 0 ||
minutes < 0 ||
@ -87,10 +92,10 @@ export function parseTimeCode({
parseInt(part, 10),
);
if (
isNaN(hours) ||
isNaN(minutes) ||
isNaN(seconds) ||
isNaN(centiseconds)
Number.isNaN(hours) ||
Number.isNaN(minutes) ||
Number.isNaN(seconds) ||
Number.isNaN(centiseconds)
)
return null;
if (
@ -112,7 +117,12 @@ export function parseTimeCode({
const [hours, minutes, seconds, frames] = parts.map((part) =>
parseInt(part, 10),
);
if (isNaN(hours) || isNaN(minutes) || isNaN(seconds) || isNaN(frames))
if (
Number.isNaN(hours) ||
Number.isNaN(minutes) ||
Number.isNaN(seconds) ||
Number.isNaN(frames)
)
return null;
if (
hours < 0 ||
@ -141,7 +151,7 @@ export function guessTimeCodeFormat({
const numbers = timeCode.split(":");
if (!numbers.every((n) => !isNaN(Number(n)))) return null;
if (!numbers.every((n) => !Number.isNaN(Number(n)))) return null;
if (numbers.length === 2) return "MM:SS";
if (numbers.length === 3) return "HH:MM:SS";

9
apps/web/src/services/renderer/nodes/image-node.ts
View File

@ -16,13 +16,14 @@ export class ImageNode extends BaseNode<ImageNodeParams> {
}
private async load() {
this.image = new Image();
const image = new Image();
this.image = image;
const url = URL.createObjectURL(this.params.file);
await new Promise<void>((resolve, reject) => {
this.image!.onload = () => resolve();
this.image!.onerror = () => reject(new Error("Image load failed"));
this.image!.src = url;
image.onload = () => resolve();
image.onerror = () => reject(new Error("Image load failed"));
image.src = url;
});
URL.revokeObjectURL(url);

9
apps/web/src/services/renderer/nodes/sticker-node.ts
View File

@ -25,17 +25,18 @@ export class StickerNode extends BaseNode<StickerNodeParams> {
}
private async load() {
this.image = new Image();
const image = new Image();
this.image = image;
const color = this.params.color
? `&color=${encodeURIComponent(this.params.color)}`
: "";
const url = `https://api.iconify.design/${this.params.iconName}.svg?width=200&height=200${color}`;
await new Promise<void>((resolve, reject) => {
this.image!.onload = () => resolve();
this.image!.onerror = () =>
image.onload = () => resolve();
image.onerror = () =>
reject(new Error(`Failed to load sticker: ${this.params.iconName}`));
this.image!.src = url;
image.src = url;
});
}

2
apps/web/src/services/renderer/scene-exporter.ts
View File

@ -81,7 +81,7 @@ export class SceneExporter extends EventEmitter<SceneExporterEvents> {
target: new BufferTarget(),
});
const videoSource = new CanvasSource(this.renderer.canvas as any, {
const videoSource = new CanvasSource(this.renderer.canvas, {
codec: this.format === "webm" ? "vp9" : "avc",
bitrate: qualityMap[this.quality],
});

2
apps/web/src/stores/keybindings-store.ts
View File

@ -93,7 +93,7 @@ export const useKeybindingsStore = create<KeybindingsState>()(
importKeybindings: (config: KeybindingConfig) => {
// Validate all keys and actions
for (const [key, action] of Object.entries(config)) {
for (const [key] of Object.entries(config)) {
// Validate the key format
if (typeof key !== "string" || key.length === 0) {
throw new Error(`Invalid key format: ${key}`);