refactor: improved type-safety, removal of any from all instances

8 files changed, 43 insertions, 30 deletions

diff --git a/apps/web/src/app/contributors/page.tsx b/apps/web/src/app/contributors/page.tsx
index f5fa0755..38d6c0d8 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<Contributor[]> {
     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 cdd67a86..dfe08365 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 33bfe688..3850fa7e 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<HTMLDivElement>(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 c784dab8..96ef66e5 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<BackgroundType>("blur");
   const [backgroundColor, setBackgroundColor] = useState("#000000");
 
   // Get the first video clip for preview (simplified)
@@ -78,7 +77,9 @@ export function PropertiesPanel() {
                   <Label htmlFor="bg-type">Background Type</Label>
                   <Select
                     value={backgroundType}
-                    onValueChange={(value: any) => setBackgroundType(value)}
+                    onValueChange={(value: BackgroundType) =>
+                      setBackgroundType(value)
+                    }
                   >
                     <SelectTrigger>
                       <SelectValue placeholder="Select background type" />
diff --git a/apps/web/src/components/editor/timeline.tsx b/apps/web/src/components/editor/timeline.tsx
index 210a943d..de2740a6 100644
--- a/apps/web/src/components/editor/timeline.tsx
+++ b/apps/web/src/components/editor/timeline.tsx
@@ -22,7 +22,11 @@ import {
   TooltipTrigger,

   TooltipProvider,

 } from "../ui/tooltip";

-import { useTimelineStore, type TimelineTrack } from "@/stores/timeline-store";

+import {

+  useTimelineStore,

+  type TimelineTrack,

+  type TimelineClip,

+} from "@/stores/timeline-store";

 import { useMediaStore } from "@/stores/media-store";

 import { usePlaybackStore } from "@/stores/playback-store";

 import { useDragClip } from "@/hooks/use-drag-clip";

@@ -1253,7 +1257,7 @@ function TimelineTrackContent({
 

   const [justFinishedDrag, setJustFinishedDrag] = useState(false);

 

-  const handleClipMouseDown = (e: React.MouseEvent, clip: any) => {

+  const handleClipMouseDown = (e: React.MouseEvent, clip: TimelineClip) => {

     // Handle selection first

     if (!justFinishedDrag) {

       const isSelected = selectedClips.some(

@@ -1374,7 +1378,7 @@ function TimelineTrackContent({
             (t: TimelineTrack) => t.id === fromTrackId

           );

           const movingClip = sourceTrack?.clips.find(

-            (c: any) => c.id === clipId

+            (c: TimelineClip) => c.id === clipId

           );

 

           if (movingClip) {

@@ -1499,7 +1503,9 @@ function TimelineTrackContent({
         const sourceTrack = tracks.find(

           (t: TimelineTrack) => t.id === fromTrackId

         );

-        const movingClip = sourceTrack?.clips.find((c: any) => c.id === clipId);

+        const movingClip = sourceTrack?.clips.find(

+          (c: TimelineClip) => c.id === clipId

+        );

 

         if (!movingClip) {

           toast.error("Clip not found");

@@ -1629,7 +1635,7 @@ function TimelineTrackContent({
     }

   };

 

-  const renderClipContent = (clip: any) => {

+  const renderClipContent = (clip: TimelineClip) => {

     const mediaItem = mediaItems.find((item) => item.id === clip.mediaId);

 

     if (!mediaItem) {

@@ -1689,7 +1695,7 @@ function TimelineTrackContent({
     );

   };

 

-  const handleSplitClip = (clip: any) => {

+  const handleSplitClip = (clip: TimelineClip) => {

     // Use current playback time as split point

     const splitTime = currentTime;

     // Only split if splitTime is within the clip's effective range

diff --git a/apps/web/src/components/ui/image-timeline-treatment.tsx b/apps/web/src/components/ui/image-timeline-treatment.tsx
index 600dd243..31847df5 100644
--- a/apps/web/src/components/ui/image-timeline-treatment.tsx
+++ b/apps/web/src/components/ui/image-timeline-treatment.tsx
@@ -2,13 +2,14 @@
 

 import { useState } from "react";

 import { cn } from "@/lib/utils";

+import type { BackgroundType } from "@/types/editor";

 

 interface ImageTimelineTreatmentProps {

   src: string;

   alt: string;

   targetAspectRatio?: number; // Default to 16:9 for video

   className?: string;

-  backgroundType?: "blur" | "mirror" | "color";

+  backgroundType?: BackgroundType;

   backgroundColor?: string;

 }

 

diff --git a/apps/web/src/stores/playback-store.ts b/apps/web/src/stores/playback-store.ts
index 0cc01cc1..543865f9 100644
--- a/apps/web/src/stores/playback-store.ts
+++ b/apps/web/src/stores/playback-store.ts
@@ -8,7 +8,7 @@ interface PlaybackStore extends PlaybackState, PlaybackControls {
 
 let playbackTimer: number | null = null;
 
-const startTimer = (store: any) => {
+const startTimer = (store: () => PlaybackStore) => {
   if (playbackTimer) cancelAnimationFrame(playbackTimer);
 
   // Use requestAnimationFrame for smoother updates
diff --git a/apps/web/src/types/editor.ts b/apps/web/src/types/editor.ts
new file mode 100644
index 00000000..bf1dae2f
--- /dev/null
+++ b/apps/web/src/types/editor.ts
@@ -0,0 +1 @@
+export type BackgroundType = "blur" | "mirror" | "color";