From 777b0f700067d7ffde37fbe14ed320f2ef630330 Mon Sep 17 00:00:00 2001 From: Maze Winther Date: Wed, 25 Jun 2025 21:40:54 +0200 Subject: [PATCH] refactor: improved type-safety, removal of any from all instances --- apps/web/src/app/contributors/page.tsx | 2 +- .../web/src/components/editor/media-panel.tsx | 6 ++-- .../src/components/editor/preview-panel.tsx | 32 +++++++++++-------- .../components/editor/properties-panel.tsx | 9 +++--- apps/web/src/components/editor/timeline.tsx | 18 +++++++---- .../ui/image-timeline-treatment.tsx | 3 +- apps/web/src/stores/playback-store.ts | 2 +- apps/web/src/types/editor.ts | 1 + 8 files changed, 43 insertions(+), 30 deletions(-) create mode 100644 apps/web/src/types/editor.ts diff --git a/apps/web/src/app/contributors/page.tsx b/apps/web/src/app/contributors/page.tsx index f5fa075..38d6c0d 100644 --- a/apps/web/src/app/contributors/page.tsx +++ b/apps/web/src/app/contributors/page.tsx @@ -49,7 +49,7 @@ async function getContributors(): Promise { const contributors = await response.json(); const filteredContributors = contributors.filter( - (contributor: any) => contributor.type === "User" + (contributor: Contributor) => contributor.type === "User" ); return filteredContributors; diff --git a/apps/web/src/components/editor/media-panel.tsx b/apps/web/src/components/editor/media-panel.tsx index cdd67a8..dfe0836 100644 --- a/apps/web/src/components/editor/media-panel.tsx +++ b/apps/web/src/components/editor/media-panel.tsx @@ -3,7 +3,7 @@ import { Button } from "../ui/button"; import { AspectRatio } from "../ui/aspect-ratio"; import { DragOverlay } from "../ui/drag-overlay"; -import { useMediaStore } from "@/stores/media-store"; +import { useMediaStore, type MediaItem } from "@/stores/media-store"; import { processMediaFiles } from "@/lib/media-processing"; import { Plus, Image, Video, Music, Trash2, Upload } from "lucide-react"; import { useDragDrop } from "@/hooks/use-drag-drop"; @@ -68,7 +68,7 @@ export function MediaPanel() { return `${min}:${sec.toString().padStart(2, "0")}`; }; - const startDrag = (e: React.DragEvent, item: any) => { + const startDrag = (e: React.DragEvent, item: MediaItem) => { // When dragging a media item, set drag data for timeline to read e.dataTransfer.setData( "application/x-media-item", @@ -102,7 +102,7 @@ export function MediaPanel() { setFilteredMediaItems(filtered); }, [mediaItems, mediaFilter, searchQuery]); - const renderPreview = (item: any) => { + const renderPreview = (item: MediaItem) => { // Render a preview for each media type (image, video, audio, unknown) // Each preview is draggable to the timeline const baseDragProps = { diff --git a/apps/web/src/components/editor/preview-panel.tsx b/apps/web/src/components/editor/preview-panel.tsx index 33bfe68..3850fa7 100644 --- a/apps/web/src/components/editor/preview-panel.tsx +++ b/apps/web/src/components/editor/preview-panel.tsx @@ -1,7 +1,11 @@ "use client"; -import { useTimelineStore } from "@/stores/timeline-store"; -import { useMediaStore } from "@/stores/media-store"; +import { + useTimelineStore, + type TimelineClip, + type TimelineTrack, +} from "@/stores/timeline-store"; +import { useMediaStore, type MediaItem } from "@/stores/media-store"; import { usePlaybackStore } from "@/stores/playback-store"; import { VideoPlayer } from "@/components/ui/video-player"; import { Button } from "@/components/ui/button"; @@ -11,6 +15,12 @@ import { useState, useRef } from "react"; // Debug flag - set to false to hide active clips info const SHOW_DEBUG_INFO = process.env.NODE_ENV === "development"; +interface ActiveClip { + clip: TimelineClip; + track: TimelineTrack; + mediaItem: MediaItem | null; +} + export function PreviewPanel() { const { tracks } = useTimelineStore(); const { mediaItems } = useMediaStore(); @@ -21,12 +31,8 @@ export function PreviewPanel() { const previewRef = useRef(null); // Get active clips at current time - const getActiveClips = () => { - const activeClips: Array<{ - clip: any; - track: any; - mediaItem: any; - }> = []; + const getActiveClips = (): ActiveClip[] => { + const activeClips: ActiveClip[] = []; tracks.forEach((track) => { track.clips.forEach((clip) => { @@ -37,12 +43,10 @@ export function PreviewPanel() { if (currentTime >= clipStart && currentTime < clipEnd) { const mediaItem = clip.mediaId === "test" - ? { type: "test", name: clip.name, url: "", thumbnailUrl: "" } - : mediaItems.find((item) => item.id === clip.mediaId); + ? null // Test clips don't have a real media item + : mediaItems.find((item) => item.id === clip.mediaId) || null; - if (mediaItem || clip.mediaId === "test") { - activeClips.push({ clip, track, mediaItem }); - } + activeClips.push({ clip, track, mediaItem }); } }); }); @@ -54,7 +58,7 @@ export function PreviewPanel() { const aspectRatio = canvasSize.width / canvasSize.height; // Render a clip - const renderClip = (clipData: any, index: number) => { + const renderClip = (clipData: ActiveClip, index: number) => { const { clip, mediaItem } = clipData; // Test clips diff --git a/apps/web/src/components/editor/properties-panel.tsx b/apps/web/src/components/editor/properties-panel.tsx index c784dab..96ef66e 100644 --- a/apps/web/src/components/editor/properties-panel.tsx +++ b/apps/web/src/components/editor/properties-panel.tsx @@ -17,13 +17,12 @@ import { useMediaStore } from "@/stores/media-store"; import { ImageTimelineTreatment } from "@/components/ui/image-timeline-treatment"; import { useState } from "react"; import { SpeedControl } from "./speed-control"; +import type { BackgroundType } from "@/types/editor"; export function PropertiesPanel() { const { tracks } = useTimelineStore(); const { mediaItems } = useMediaStore(); - const [backgroundType, setBackgroundType] = useState< - "blur" | "mirror" | "color" - >("blur"); + const [backgroundType, setBackgroundType] = useState("blur"); const [backgroundColor, setBackgroundColor] = useState("#000000"); // Get the first video clip for preview (simplified) @@ -78,7 +77,9 @@ export function PropertiesPanel() {