@djangocfg/ui-nextjs 2.1.83 → 2.1.84

package/src/tools/AudioPlayer/hooks/useAudioHotkeys.ts

@@ -1,150 +0,0 @@
-'use client';
-
-/**
- * useAudioHotkeys - Keyboard shortcuts for audio playback control.
- *
- * Uses useHotkey from @djangocfg/ui-nextjs.
- */
-
-import { useHotkey, useDeviceDetect } from '@djangocfg/ui-nextjs';
-import { useAudioControls, useAudioState } from '../context';
-
-// =============================================================================
-// TYPES
-// =============================================================================
-
-export interface AudioHotkeyOptions {
-  /** Enable hotkeys (default: true) */
-  enabled?: boolean;
-  /** Skip duration in seconds (default: 10) */
-  skipDuration?: number;
-  /** Volume step (default: 0.1) */
-  volumeStep?: number;
-}
-
-// =============================================================================
-// HOOK
-// =============================================================================
-
-export function useAudioHotkeys(options: AudioHotkeyOptions = {}) {
-  const { enabled = true, skipDuration = 10, volumeStep = 0.1 } = options;
-
-  const { togglePlay, skip, setVolume, toggleMute, toggleLoop, isReady } = useAudioControls();
-  const { volume, duration, currentTime } = useAudioState();
-  const device = useDeviceDetect();
-
-  // Play/Pause - Space
-  useHotkey(
-    'space',
-    (e) => {
-      e.preventDefault();
-      togglePlay();
-    },
-    { enabled: enabled && isReady, description: 'Play/Pause' }
-  );
-
-  // Skip backward - ArrowLeft or J
-  useHotkey(
-    ['ArrowLeft', 'j'],
-    () => skip(-skipDuration),
-    { enabled: enabled && isReady, description: `Skip ${skipDuration}s backward` }
-  );
-
-  // Skip forward - ArrowRight or L
-  useHotkey(
-    ['ArrowRight', 'l'],
-    () => skip(skipDuration),
-    { enabled: enabled && isReady, description: `Skip ${skipDuration}s forward` }
-  );
-
-  // Volume up - ArrowUp
-  useHotkey(
-    'ArrowUp',
-    (e) => {
-      e.preventDefault();
-      setVolume(Math.min(1, volume + volumeStep));
-    },
-    { enabled: enabled && isReady, description: 'Volume up' }
-  );
-
-  // Volume down - ArrowDown
-  useHotkey(
-    'ArrowDown',
-    (e) => {
-      e.preventDefault();
-      setVolume(Math.max(0, volume - volumeStep));
-    },
-    { enabled: enabled && isReady, description: 'Volume down' }
-  );
-
-  // Mute/Unmute - M
-  useHotkey(
-    'm',
-    () => toggleMute(),
-    { enabled: enabled && isReady, description: 'Mute/Unmute' }
-  );
-
-  // Loop/Repeat - L key (conflicts with skip forward, using Shift+L)
-  useHotkey(
-    'shift+l',
-    () => toggleLoop(),
-    { enabled: enabled && isReady, description: 'Toggle loop' }
-  );
-
-  // Number keys 0-9 to seek to percentage
-  useHotkey(
-    ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9'],
-    (e) => {
-      if (!duration) return;
-      const percent = parseInt(e.key, 10) / 10;
-      const targetTime = duration * percent;
-      skip(targetTime - currentTime);
-    },
-    { enabled: enabled && isReady, description: 'Seek to percentage' }
-  );
-
-  return {
-    isMac: device.isMacOs,
-    isEnabled: enabled && isReady,
-  };
-}
-
-// =============================================================================
-// SHORTCUTS CONFIG (for display)
-// =============================================================================
-
-export interface ShortcutItem {
-  keys: string[];
-  label: string;
-}
-
-export interface ShortcutGroup {
-  title: string;
-  shortcuts: ShortcutItem[];
-}
-
-export const AUDIO_SHORTCUTS: ShortcutGroup[] = [
-  {
-    title: 'Playback',
-    shortcuts: [
-      { keys: ['Space'], label: 'Play/Pause' },
-      { keys: ['←'], label: 'Skip 10s back' },
-      { keys: ['→'], label: 'Skip 10s forward' },
-      { keys: ['⇧', 'L'], label: 'Toggle loop' },
-    ],
-  },
-  {
-    title: 'Volume',
-    shortcuts: [
-      { keys: ['↑'], label: 'Volume up' },
-      { keys: ['↓'], label: 'Volume down' },
-      { keys: ['M'], label: 'Mute/Unmute' },
-    ],
-  },
-  {
-    title: 'Seek',
-    shortcuts: [
-      { keys: ['0-9'], label: 'Jump to 0-90%' },
-    ],
-  },
-];

package/src/tools/AudioPlayer/hooks/useAudioSource.ts

@@ -1,155 +0,0 @@
-'use client';
-
-/**
- * useAudioSource - Handles audio source loading with optional prefetch
- *
- * For streaming URLs, WaveSurfer needs the complete file to enable seeking.
- * This hook fetches the URL as blob when prefetch is enabled.
- */
-
-import { useState, useEffect, useRef } from 'react';
-import type { AudioSource } from '../types';
-import { audioDebug } from '../utils/debug';
-
-export interface UseAudioSourceResult {
-  /** The resolved URL (blob URL if prefetched, original URL otherwise) */
-  url: string | null;
-  /** Whether the source is currently being fetched */
-  isLoading: boolean;
-  /** Error message if fetch failed */
-  error: string | null;
-  /** Progress percentage (0-100) during fetch */
-  progress: number;
-}
-
-export function useAudioSource(source: AudioSource): UseAudioSourceResult {
-  const [url, setUrl] = useState<string | null>(null);
-  const [isLoading, setIsLoading] = useState(false);
-  const [error, setError] = useState<string | null>(null);
-  const [progress, setProgress] = useState(0);
-  const blobUrlRef = useRef<string | null>(null);
-
-  useEffect(() => {
-    // Cleanup previous blob URL
-    if (blobUrlRef.current) {
-      URL.revokeObjectURL(blobUrlRef.current);
-      blobUrlRef.current = null;
-    }
-
-    // Reset state
-    setError(null);
-    setProgress(0);
-
-    // No prefetch - use URL directly
-    if (!source.prefetch) {
-      audioDebug.debug('Using direct URL (prefetch disabled)', { uri: source.uri });
-      setUrl(source.uri);
-      setIsLoading(false);
-      return;
-    }
-
-    // Prefetch enabled - fetch as blob
-    const abortController = new AbortController();
-    setIsLoading(true);
-
-    const fetchAsBlob = async () => {
-      try {
-        audioDebug.info('Prefetching audio as blob', { uri: source.uri });
-
-        const response = await fetch(source.uri, {
-          signal: abortController.signal,
-          headers: {
-            // Request full file - some servers require Range header
-            'Range': 'bytes=0-',
-          },
-        });
-
-        // Accept 200 OK or 206 Partial Content (response.ok covers both)
-        if (!response.ok) {
-          throw new Error(`HTTP ${response.status}: ${response.statusText}`);
-        }
-
-        // Get content length for progress tracking
-        // For Range requests, use Content-Range header (format: "bytes 0-1234/5678")
-        let totalBytes = 0;
-        const contentRange = response.headers.get('Content-Range');
-        if (contentRange) {
-          const match = contentRange.match(/\/(\d+)$/);
-          if (match) {
-            totalBytes = parseInt(match[1], 10);
-          }
-        } else {
-          const contentLength = response.headers.get('Content-Length');
-          totalBytes = contentLength ? parseInt(contentLength, 10) : 0;
-        }
-
-        if (!response.body) {
-          // Fallback for browsers without ReadableStream
-          const blob = await response.blob();
-          const blobUrl = URL.createObjectURL(blob);
-          blobUrlRef.current = blobUrl;
-          setUrl(blobUrl);
-          setProgress(100);
-          audioDebug.success('Audio prefetched (no stream)', { size: blob.size });
-          return;
-        }
-
-        // Stream the response for progress tracking
-        const reader = response.body.getReader();
-        const chunks: ArrayBuffer[] = [];
-        let receivedBytes = 0;
-
-        while (true) {
-          const { done, value } = await reader.read();
-
-          if (done) break;
-
-          // Convert Uint8Array to ArrayBuffer for Blob compatibility
-          chunks.push(value.buffer.slice(value.byteOffset, value.byteOffset + value.byteLength));
-          receivedBytes += value.length;
-
-          if (totalBytes > 0) {
-            setProgress(Math.round((receivedBytes / totalBytes) * 100));
-          }
-        }
-
-        // Combine chunks into blob
-        const blob = new Blob(chunks, { type: 'audio/mpeg' });
-        const blobUrl = URL.createObjectURL(blob);
-        blobUrlRef.current = blobUrl;
-        setUrl(blobUrl);
-        setProgress(100);
-
-        audioDebug.success('Audio prefetched', {
-          size: blob.size,
-          sizeFormatted: `${(blob.size / 1024 / 1024).toFixed(2)} MB`,
-        });
-      } catch (err) {
-        if (err instanceof Error && err.name === 'AbortError') {
-          return; // Ignore abort errors
-        }
-
-        const errorMessage = err instanceof Error ? err.message : 'Failed to prefetch audio';
-        audioDebug.error('Failed to prefetch audio', { error: errorMessage, uri: source.uri });
-        setError(errorMessage);
-
-        // Fallback to direct URL (may have seek issues)
-        setUrl(source.uri);
-      } finally {
-        setIsLoading(false);
-      }
-    };
-
-    fetchAsBlob();
-
-    return () => {
-      abortController.abort();
-      if (blobUrlRef.current) {
-        URL.revokeObjectURL(blobUrlRef.current);
-        blobUrlRef.current = null;
-      }
-    };
-  }, [source.uri, source.prefetch]);
-
-  return { url, isLoading, error, progress };
-}

package/src/tools/AudioPlayer/hooks/useSharedWebAudio.ts

@@ -1,109 +0,0 @@
-'use client';
-
-/**
- * useSharedWebAudio - Manages a shared Web Audio context and source node.
- *
- * This prevents the "InvalidStateError" from creating multiple MediaElementSourceNodes
- * for the same audio element. All analyzers share the same source.
- */
-
-import { useRef, useEffect, useCallback } from 'react';
-import type { SharedWebAudioContext } from '../types';
-
-export function useSharedWebAudio(audioElement: HTMLMediaElement | null): SharedWebAudioContext {
-  const audioContextRef = useRef<AudioContext | null>(null);
-  const sourceRef = useRef<MediaElementAudioSourceNode | null>(null);
-  const connectedElementRef = useRef<HTMLMediaElement | null>(null);
-  const analyserNodesRef = useRef<Set<AnalyserNode>>(new Set());
-
-  // Initialize Web Audio on first play
-  useEffect(() => {
-    if (!audioElement) return;
-
-    // Already connected to this element
-    if (connectedElementRef.current === audioElement && audioContextRef.current) {
-      return;
-    }
-
-    const initAudio = () => {
-      try {
-        if (!audioContextRef.current) {
-          const AudioContextClass = window.AudioContext ||
-            (window as unknown as { webkitAudioContext: typeof AudioContext }).webkitAudioContext;
-          audioContextRef.current = new AudioContextClass();
-        }
-
-        const audioContext = audioContextRef.current;
-
-        // Only create source node once per audio element
-        if (connectedElementRef.current !== audioElement) {
-          if (sourceRef.current) {
-            try { sourceRef.current.disconnect(); } catch { /* ignore */ }
-          }
-
-          sourceRef.current = audioContext.createMediaElementSource(audioElement);
-          // Single audio output path: source -> destination
-          // Analysers connect to source in parallel for frequency reading only (no output)
-          sourceRef.current.connect(audioContext.destination);
-          connectedElementRef.current = audioElement;
-        }
-      } catch (error) {
-        console.warn('[SharedWebAudio] Could not initialize:', error);
-      }
-    };
-
-    const handlePlay = () => {
-      initAudio();
-      if (audioContextRef.current?.state === 'suspended') {
-        audioContextRef.current.resume();
-      }
-    };
-
-    audioElement.addEventListener('play', handlePlay);
-    if (!audioElement.paused) {
-      handlePlay();
-    }
-
-    return () => {
-      audioElement.removeEventListener('play', handlePlay);
-    };
-  }, [audioElement]);
-
-  // Create an analyser connected to the shared source
-  const createAnalyser = useCallback((options?: { fftSize?: number; smoothing?: number }): AnalyserNode | null => {
-    if (!audioContextRef.current || !sourceRef.current) return null;
-
-    try {
-      const analyser = audioContextRef.current.createAnalyser();
-      analyser.fftSize = options?.fftSize ?? 256;
-      analyser.smoothingTimeConstant = options?.smoothing ?? 0.85;
-
-      // Connect analyser as passive listener (for frequency analysis only)
-      // Audio path: source -> destination (already connected in initAudio)
-      // Analysis path: source -> analyser (no output connection needed)
-      // NOTE: Do NOT connect analyser to destination - it causes double audio routing and crackling!
-      sourceRef.current.connect(analyser);
-
-      analyserNodesRef.current.add(analyser);
-      return analyser;
-    } catch (error) {
-      console.warn('[SharedWebAudio] Could not create analyser:', error);
-      return null;
-    }
-  }, []);
-
-  // Disconnect an analyser
-  const disconnectAnalyser = useCallback((analyser: AnalyserNode) => {
-    try {
-      analyser.disconnect();
-      analyserNodesRef.current.delete(analyser);
-    } catch { /* ignore */ }
-  }, []);
-
-  return {
-    audioContext: audioContextRef.current,
-    sourceNode: sourceRef.current,
-    createAnalyser,
-    disconnectAnalyser,
-  };
-}