Merge pull request #275 from naomiaro/fix/eliminate-any-types

Eliminate all any types across packages

Author: naomiaro

packages/browser/src/AnnotationIntegrationContext.tsx

@@ -1,5 +1,54 @@
 import { createContext, useContext } from 'react';
-import type { AnnotationData } from '@waveform-playlist/core';
+import type {
+  AnnotationData,
+  AnnotationAction,
+  AnnotationActionOptions,
+  RenderAnnotationItemProps,
+} from '@waveform-playlist/core';
+
+/**
+ * Props the browser package passes to the AnnotationText component.
+ * Mirrors what PlaylistAnnotationList and MediaElementAnnotationList actually use.
+ */
+export interface AnnotationTextIntegrationProps {
+  annotations: AnnotationData[];
+  activeAnnotationId?: string;
+  shouldScrollToActive?: boolean;
+  scrollActivePosition?: ScrollLogicalPosition;
+  scrollActiveContainer?: 'nearest' | 'all';
+  editable?: boolean;
+  controls?: AnnotationAction[];
+  annotationListConfig?: AnnotationActionOptions;
+  height?: number;
+  onAnnotationUpdate?: (updatedAnnotations: AnnotationData[]) => void;
+  renderAnnotationItem?: (props: RenderAnnotationItemProps) => React.ReactNode;
+}
+
+/**
+ * Props the browser package passes to the AnnotationBox component.
+ * Mirrors what PlaylistVisualization and MediaElementPlaylist actually use.
+ */
+export interface AnnotationBoxIntegrationProps {
+  annotationId: string;
+  annotationIndex: number;
+  startPosition: number;
+  endPosition: number;
+  label?: string;
+  color?: string;
+  isActive?: boolean;
+  onClick?: () => void;
+  editable?: boolean;
+}
+
+/**
+ * Props the browser package passes to the AnnotationBoxesWrapper component.
+ * Mirrors what PlaylistVisualization and MediaElementPlaylist actually use.
+ */
+export interface AnnotationBoxesWrapperIntegrationProps {
+  children?: React.ReactNode;
+  height?: number;
+  width?: number;
+}
 
 /**
  * Interface for annotation integration provided by @waveform-playlist/annotations.
@@ -12,13 +61,10 @@ export interface AnnotationIntegration {
   parseAeneas: (data: unknown) => AnnotationData;
   serializeAeneas: (annotation: AnnotationData) => unknown;
 
-  // Visualization components (typed loosely since browser controls invocation)
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  AnnotationText: React.ComponentType<any>;
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  AnnotationBox: React.ComponentType<any>;
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  AnnotationBoxesWrapper: React.ComponentType<any>;
+  // Visualization components (typed with the props the browser package actually passes)
+  AnnotationText: React.ComponentType<AnnotationTextIntegrationProps>;
+  AnnotationBox: React.ComponentType<AnnotationBoxIntegrationProps>;
+  AnnotationBoxesWrapper: React.ComponentType<AnnotationBoxesWrapperIntegrationProps>;
 
   // Control components
   ContinuousPlayCheckbox: React.ComponentType<{ checked: boolean; onChange: (checked: boolean) => void; className?: string }>;

packages/browser/src/MediaElementPlaylistContext.tsx

@@ -20,6 +20,7 @@ import {
 } from '@waveform-playlist/ui-components';
 import type { AnnotationData } from '@waveform-playlist/core';
 import { extractPeaksFromWaveformData } from './waveformDataLoader';
+import type WaveformData from 'waveform-data';
 import type { PeakData } from '@waveform-playlist/webaudio-peaks';
 import type { ClipPeaks, TrackClipPeaks } from './WaveformPlaylistContext';
 
@@ -108,7 +109,7 @@ export interface MediaElementPlaylistProviderProps {
   controls?: { show: boolean; width: number };
   /** Annotations */
   annotationList?: {
-    annotations?: any[];
+    annotations?: AnnotationData[];
     isContinuousPlay?: boolean;
   };
   /** Width of waveform bars */
@@ -172,7 +173,7 @@ export const MediaElementPlaylistProvider: React.FC<
   const annotations = useMemo(() => {
     if (!annotationList?.annotations) return [];
     if (process.env.NODE_ENV !== 'production' && annotationList.annotations.length > 0) {
-      const first = annotationList.annotations[0] as Record<string, unknown>;
+      const first = annotationList.annotations[0] as unknown as Record<string, unknown>;
       if (typeof first.start !== 'number' || typeof first.end !== 'number') {
         console.error(
           '[waveform-playlist] Annotations must have numeric start/end values. ' +
@@ -182,7 +183,7 @@ export const MediaElementPlaylistProvider: React.FC<
         return [];
       }
     }
-    return annotationList.annotations as AnnotationData[];
+    return annotationList.annotations;
   }, [annotationList?.annotations]);
 
   // Ref for animation loop (avoids restarting loop on annotation change)
@@ -283,7 +284,7 @@ export const MediaElementPlaylistProvider: React.FC<
   // Generate peaks from waveform data
   useEffect(() => {
     const extractedPeaks = extractPeaksFromWaveformData(
-      track.waveformData as any,
+      track.waveformData as WaveformData,
       samplesPerPixel,
       0, // channel index
       0, // offset

packages/browser/src/WaveformPlaylistContext.tsx

@@ -1,12 +1,13 @@
 import React, { createContext, useContext, useState, useEffect, useRef, useCallback, useMemo, type ReactNode } from 'react';
 import { ThemeProvider } from 'styled-components';
 import { TonePlayout, type EffectsFunction, type TrackEffectsFunction } from '@waveform-playlist/playout';
-import { type Track, type ClipTrack, type Fade } from '@waveform-playlist/core';
+import { type Track, type ClipTrack, type Fade, type AnnotationAction } from '@waveform-playlist/core';
 import { type TimeFormat, type WaveformPlaylistTheme, defaultTheme } from '@waveform-playlist/ui-components';
 import { getContext } from 'tone';
 import { generatePeaks } from './peaksUtil';
 
 import { extractPeaksFromWaveformData } from './waveformDataLoader';
+import type WaveformData from 'waveform-data';
 import type { PeakData } from '@waveform-playlist/webaudio-peaks';
 import type { AnnotationData } from '@waveform-playlist/core';
 import { useTimeFormat, useZoomControls, useMasterVolume } from './hooks';
@@ -73,7 +74,7 @@ export interface WaveformPlaylistContextValue {
   setSelection: (start: number, end: number) => void;
 
   // Time format
-  timeFormat: string;
+  timeFormat: TimeFormat;
   setTimeFormat: (format: TimeFormat) => void;
   formatTime: (seconds: number) => string;
 
@@ -201,7 +202,7 @@ export interface PlaylistDataContextValue {
   controls: { show: boolean; width: number };
   playoutRef: React.RefObject<TonePlayout | null>;
   samplesPerPixel: number;
-  timeFormat: string;
+  timeFormat: TimeFormat;
   masterVolume: number;
   canZoomIn: boolean;
   canZoomOut: boolean;
@@ -238,11 +239,11 @@ export interface WaveformPlaylistProviderProps {
     width: number;
   };
   annotationList?: {
-    annotations?: any[];
+    annotations?: AnnotationData[];
     editable?: boolean;
     isContinuousPlay?: boolean;
     linkEndpoints?: boolean;
-    controls?: any[];
+    controls?: AnnotationAction[];
   };
   effects?: EffectsFunction;
   onReady?: () => void;
@@ -286,7 +287,7 @@ export const WaveformPlaylistProvider: React.FC<WaveformPlaylistProviderProps> =
   const annotations = useMemo(() => {
     if (!annotationList?.annotations) return [];
     if (process.env.NODE_ENV !== 'production' && annotationList.annotations.length > 0) {
-      const first = annotationList.annotations[0] as Record<string, unknown>;
+      const first = annotationList.annotations[0] as unknown as Record<string, unknown>;
       if (typeof first.start !== 'number' || typeof first.end !== 'number') {
         console.error(
           '[waveform-playlist] Annotations must have numeric start/end values. ' +
@@ -296,7 +297,7 @@ export const WaveformPlaylistProvider: React.FC<WaveformPlaylistProviderProps> =
         return [];
       }
     }
-    return annotationList.annotations as AnnotationData[];
+    return annotationList.annotations;
   }, [annotationList?.annotations]);
 
   // Ref for animation loop (avoids restarting loop on annotation change)
@@ -620,7 +621,7 @@ export const WaveformPlaylistProvider: React.FC<WaveformPlaylistProviderProps> =
           // Use waveform-data.js to resample and slice as needed
           // Pass sample values directly for accuracy
           const extractedPeaks = extractPeaksFromWaveformData(
-            clip.waveformData as any, // Cast to WaveformData type
+            clip.waveformData as WaveformData,
             samplesPerPixel,
             0, // channel index
             clip.offsetSamples,

packages/browser/src/components/ContextualControls.tsx

@@ -6,7 +6,6 @@ import {
   AutomaticScrollCheckbox as BaseAutomaticScrollCheckbox,
   SelectionTimeInputs as BaseSelectionTimeInputs,
   formatTime,
-  type TimeFormat,
 } from '@waveform-playlist/ui-components';
 import styled from 'styled-components';
 import { usePlaybackAnimation, usePlaylistState, usePlaylistControls, usePlaylistData } from '../WaveformPlaylistContext';
@@ -36,8 +35,8 @@ export const TimeFormatSelect: React.FC<{ className?: string }> = ({ className }
 
   return (
     <BaseTimeFormatSelect
-      value={timeFormat as any}
-      onChange={setTimeFormat as any}
+      value={timeFormat}
+      onChange={setTimeFormat}
       className={className}
     />
   );
@@ -60,8 +59,7 @@ export const AudioPosition: React.FC<{ className?: string }> = ({ className }) =
   const timeRef = useRef<HTMLSpanElement>(null);
   const animationFrameRef = useRef<number | null>(null);
   const { isPlaying, currentTimeRef, playbackStartTimeRef, audioStartPositionRef } = usePlaybackAnimation();
-  const { timeFormat } = usePlaylistData();
-  const format = timeFormat as TimeFormat;
+  const { timeFormat: format } = usePlaylistData();
 
   useEffect(() => {
     const updateTime = () => {