@djangocfg/ui-tools 2.1.310 → 2.1.313

package/src/tools/AudioPlayer/AudioPlayer.story.tsx

@@ -1,134 +1,481 @@
+import { useEffect, useState } from 'react';
 import { defineStory, useBoolean, useSelect } from '@djangocfg/playground';
-import { HybridSimplePlayer, HybridCompactPlayer, HybridAudioProvider, HybridAudioPlayer, AudioReactiveCover } from './index';
+import { TooltipProvider } from '@djangocfg/ui-core/components';
+import { decodePeaks } from './audio/decodePeaks';
+import { PlayerProvider } from './context/PlayerProvider';
+import { Player } from './Player';
+import {
+  useActivePlayer,
+  useIsActivePlayer,
+  useLastActivePlayer,
+} from './hooks/useActivePlayer';
+import { usePlayerPreferences } from './hooks/usePlayerPreferences';
+import { Cover } from './parts/Cover/Cover';
+import { LoopButton } from './parts/Controls/LoopButton';
+import { PlayButton } from './parts/Controls/PlayButton';
+import { VolumeControl } from './parts/Controls/VolumeControl';
+import { Artist } from './parts/Meta/Artist';
+import { TimeDisplay } from './parts/Meta/TimeDisplay';
+import { Title } from './parts/Meta/Title';
+import { Waveform } from './parts/Waveform/Waveform';
+import type { WaveformMode } from './types';
 
 export default defineStory({
   title: 'Tools/Audio Player',
-  component: HybridSimplePlayer,
-  description: 'Audio player with waveform visualization and reactive effects.',
+  component: Player,
+  description:
+    'WebView-safe audio player. Static peaks waveform by default; clip-path playhead; one accent.',
 });
 
-// CORS-friendly audio samples from Wikimedia Commons (Access-Control-Allow-Origin: *)
-const AUDIO_SAMPLES = {
-  sample1: 'https://upload.wikimedia.org/wikipedia/commons/4/4e/BWV_543-fugue.ogg',
-  sample2: 'https://upload.wikimedia.org/wikipedia/commons/c/c4/Muriel-Nguyen-Xuan-Chopin-valse-opus64-1.ogg',
-  sample3: 'https://upload.wikimedia.org/wikipedia/commons/a/a9/Tromboon-sample.ogg',
-};
-
-export const Interactive = () => {
-  const [track] = useSelect('track', {
-    options: ['sample1', 'sample2', 'sample3'] as const,
-    defaultValue: 'sample1',
-    label: 'Track',
-    description: 'Select audio track',
-  });
-
-  const [showWaveform] = useBoolean('showWaveform', {
-    defaultValue: true,
-    label: 'Show Waveform',
-    description: 'Display audio waveform visualization',
-  });
+// Local samples copied from @sources/. Vite serves them same-origin so
+// crossOrigin="anonymous" + decodeAudioData work without CORS friction.
+const SAMPLES = {
+  short: '/audio/short.mp3',
+  voice: '/audio/voice.mp3',
+  long: '/audio/long.mp3',
+} as const;
 
-  const [showControls] = useBoolean('showControls', {
-    defaultValue: true,
-    label: 'Show Controls',
-    description: 'Display playback controls',
-  });
+const COVER = 'data:image/svg+xml;utf8,' + encodeURIComponent(`
+<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200" viewBox="0 0 200 200">
+  <rect width="200" height="200" fill="#0f172a"/>
+  <circle cx="100" cy="100" r="56" fill="none" stroke="#94a3b8" stroke-width="2"/>
+  <circle cx="100" cy="100" r="6" fill="#94a3b8"/>
+</svg>
+`);
 
-  const [coverVariant] = useSelect('coverVariant', {
-    options: ['spotlight', 'glow', 'orbs', 'mesh', 'none'] as const,
-    defaultValue: 'spotlight',
-    label: 'Cover Effect',
-    description: 'Reactive cover animation style',
-  });
+const Frame = ({ children, max = 'max-w-xl' }: { children: React.ReactNode; max?: string }) => (
+  <div className={`mx-auto w-full ${max} p-6`}>{children}</div>
+);
 
+function Section({ title, hint, children }: { title: string; hint?: string; children: React.ReactNode }) {
   return (
-    <div className="max-w-md space-y-6">
-      <HybridAudioProvider src={AUDIO_SAMPLES[track]}>
-        {coverVariant !== 'none' && (
-          <AudioReactiveCover variant={coverVariant}>
-            <img
-              src="https://images.unsplash.com/photo-1470225620780-dba8ba36b745?w=400"
-              alt="Album cover"
-              className="w-full h-full object-cover"
-            />
-          </AudioReactiveCover>
-        )}
-        <HybridAudioPlayer showWaveform={showWaveform} showControls={showControls} />
-      </HybridAudioProvider>
-    </div>
+    <section className="space-y-2">
+      <header>
+        <h3 className="text-sm font-medium text-foreground">{title}</h3>
+        {hint && <p className="text-xs text-muted-foreground">{hint}</p>}
+      </header>
+      {children}
+    </section>
   );
-};
+}
 
-export const Simple = () => (
-  <div className="max-w-2xl">
-    <HybridSimplePlayer
-      src={AUDIO_SAMPLES.sample1}
-      title="Sample Track 1"
-    />
-  </div>
+export const Default = () => (
+  <Frame>
+    <Player src={SAMPLES.short} title="Stereo demo" artist="wavesurfer samples" />
+  </Frame>
 );
 
-export const WithWaveform = () => (
-  <div className="max-w-2xl">
-    <HybridAudioProvider src={AUDIO_SAMPLES.sample2}>
-      <HybridAudioPlayer showWaveform showControls />
-    </HybridAudioProvider>
-  </div>
+export const WithCover = () => (
+  <Frame>
+    <Player src={SAMPLES.short} title="With cover" artist="wavesurfer samples" cover={COVER} />
+  </Frame>
 );
 
-export const WithReactiveCover = () => (
-  <div className="max-w-md">
-    <HybridAudioProvider src={AUDIO_SAMPLES.sample3}>
-      <div className="space-y-4">
-        <AudioReactiveCover variant="glow">
-          <img
-            src="https://images.unsplash.com/photo-1470225620780-dba8ba36b745?w=400"
-            alt="Album cover"
-            className="w-full h-full object-cover"
-          />
-        </AudioReactiveCover>
-        <HybridAudioPlayer showControls />
-      </div>
-    </HybridAudioProvider>
-  </div>
+export const Compact = () => (
+  <Frame max="max-w-md">
+    <Player src={SAMPLES.short} title="Compact" variant="compact" />
+  </Frame>
 );
 
-export const Multiple = () => (
-  <div className="max-w-2xl space-y-4">
-    <HybridSimplePlayer src={AUDIO_SAMPLES.sample1} title="Track 1" />
-    <HybridSimplePlayer src={AUDIO_SAMPLES.sample2} title="Track 2" />
-    <HybridSimplePlayer src={AUDIO_SAMPLES.sample3} title="Track 3" />
-  </div>
+export const Bars = () => (
+  <Frame>
+    <Player
+      src={SAMPLES.short}
+      title="Bars decoration"
+      artist="No audio coupling"
+      waveform={{ mode: 'bars', height: 28 }}
+    />
+  </Frame>
 );
 
-export const Compact = () => (
-  <div className="max-w-sm space-y-2">
-    <p className="text-sm text-muted-foreground mb-3">
-      Single-row player — ideal for lists, sidebars, and tight spaces.
+export const Live = () => (
+  <Frame>
+    <Player
+      src={SAMPLES.voice}
+      title="Live analyser"
+      artist="Reads from AnalyserNode at 30 Hz"
+      waveform={{ mode: 'live', height: 48 }}
+    />
+  </Frame>
+);
+
+export const NoWaveform = () => (
+  <Frame>
+    <Player src={SAMPLES.short} title="Minimal" artist="No waveform" waveform={{ mode: 'none' }} />
+  </Frame>
+);
+
+export const CustomLayout = () => (
+  <Frame max="max-w-2xl">
+    <p className="mb-4 text-xs text-muted-foreground">
+      Slot composition: drop <code className="rounded bg-muted px-1">PlayerProvider</code> and
+      arrange the parts you want yourself. Big cover left (spans two rows), meta + timer right,
+      waveform + controls full-width below.
     </p>
-    <HybridCompactPlayer src={AUDIO_SAMPLES.sample1} title="Rain & Thunder" />
-    <HybridCompactPlayer src={AUDIO_SAMPLES.sample2} title="Ambient Loop" />
-    <HybridCompactPlayer src={AUDIO_SAMPLES.sample3} title="City Noise" />
-  </div>
+    <CustomLayoutDemo />
+  </Frame>
 );
 
-export const CompactNoTimer = () => (
-  <div className="max-w-xs">
-    <HybridCompactPlayer
-      src={AUDIO_SAMPLES.sample1}
-      title="Without timer"
-      showTimer={false}
+export const ReactiveCover = () => (
+  <Frame>
+    <Player
+      src={SAMPLES.voice}
+      title="Subtle reactive cover"
+      artist="Tiny scale on the cover"
+      cover={COVER}
+      reactiveCover="subtle"
+      waveform={{ mode: 'live' }}
     />
-  </div>
+  </Frame>
 );
 
-export const CompactSmall = () => (
-  <div className="max-w-sm space-y-2">
-    <p className="text-sm text-muted-foreground mb-3">
-      Small button size — for inline use in lists and cards.
-    </p>
-    <HybridCompactPlayer src={AUDIO_SAMPLES.sample1} title="Track 1" buttonSize="sm" />
-    <HybridCompactPlayer src={AUDIO_SAMPLES.sample2} title="Track 2" buttonSize="sm" waveformMode="static" />
-    <HybridCompactPlayer src={AUDIO_SAMPLES.sample3} title="Track 3" buttonSize="sm" showTimer={false} />
-  </div>
+export const ErrorState = () => (
+  <Frame>
+    <Player
+      src="/audio/this-does-not-exist.mp3"
+      title="Broken source"
+      artist="Demonstrates error state"
+    />
+  </Frame>
 );
+
+export const Exclusive = () => {
+  const active = useActivePlayer();
+  return (
+    <Frame max="max-w-2xl">
+      <p className="mb-4 text-xs text-muted-foreground">
+        Three players, <code className="rounded bg-muted px-1">exclusive</code> on (default).
+        Press play on one — the others pause automatically (same tab + cross-tab via{' '}
+        <code className="rounded bg-muted px-1">BroadcastChannel</code>).
+        <br />
+        Active id: <code className="rounded bg-muted px-1">{active ?? '∅'}</code>
+      </p>
+      <div className="space-y-3">
+        <Player src={SAMPLES.short} title="Track A · stereo" artist="wavesurfer" />
+        <Player src={SAMPLES.voice} title="Track B · librivox" artist="voice" />
+        <Player src={SAMPLES.long} title="Track C · phonograph" artist="deepnote" />
+      </div>
+    </Frame>
+  );
+};
+
+// One-stop demo of every prop / mode / hook. Long but scrollable; each section
+// is independent so you can grab a single example as a reference.
+export const Showcase = () => {
+  return (
+    <div className="mx-auto w-full max-w-3xl space-y-8 p-6">
+      <Section title="1 · Default" hint="Static peaks waveform, container query auto-switches to compact below 480 px / on phones.">
+        <Player src={SAMPLES.short} title="Stereo demo" artist="wavesurfer" />
+      </Section>
+
+      <Section title="2 · With cover" hint="Cover uses <img loading='lazy' decoding='async'>; placeholder otherwise.">
+        <Player src={SAMPLES.short} title="With cover" artist="wavesurfer" cover={COVER} />
+      </Section>
+
+      <Section title="3 · Compact (forced)" hint="Single-row layout. Always picked when variant='compact'.">
+        <Player src={SAMPLES.short} title="Compact" variant="compact" />
+      </Section>
+
+      <Section title="4 · Skip controls" hint="onPrev / onNext render the SkipBack / SkipForward buttons (and wire MediaSession).">
+        <Player
+          src={SAMPLES.short}
+          title="With prev / next"
+          artist="onPrev / onNext"
+          cover={COVER}
+          onPrev={() => console.log('prev')}
+          onNext={() => console.log('next')}
+        />
+      </Section>
+
+      <Section title="5 · Live analyser" hint="mode='live' — AnalyserNode @ 30 Hz pushed into LevelsStore; canvas paints from rAF.">
+        <Player
+          src={SAMPLES.voice}
+          title="Live waveform"
+          artist="AnalyserNode at 30 Hz"
+          waveform={{ mode: 'live', height: 48 }}
+        />
+      </Section>
+
+      <Section title="6 · Bars (decoration)" hint="mode='bars' — CSS-only equalizer animation, no audio coupling.">
+        <Player
+          src={SAMPLES.short}
+          title="Bars"
+          artist="No audio coupling"
+          waveform={{ mode: 'bars', height: 28 }}
+        />
+      </Section>
+
+      <Section title="7a · Progress bar (no animation)" hint="mode='progress' — thin scrubber, no waveform/animation. Same click + drag + hover-tip + playhead pipeline.">
+        <Player
+          src={SAMPLES.short}
+          title="Plain progress"
+          artist="No waveform animation"
+          waveform={{ mode: 'progress', height: 4 }}
+        />
+      </Section>
+
+      <Section title="7b · No waveform" hint="mode='none' — bare meta + controls. Use when even the scrubber gets in the way.">
+        <Player src={SAMPLES.short} title="Minimal" waveform={{ mode: 'none' }} />
+      </Section>
+
+      <Section title="8 · Subtle reactive cover" hint="reactiveCover='subtle' — compositor-only scale tied to a low-pass envelope.">
+        <Player
+          src={SAMPLES.voice}
+          title="Reactive cover"
+          artist="scale(1.00 — 1.03)"
+          cover={COVER}
+          reactiveCover="subtle"
+          waveform={{ mode: 'live' }}
+        />
+      </Section>
+
+      <Section title="9 · Pre-computed peaks" hint="peaks prop seeds the cache — skips the OfflineAudioContext decode entirely.">
+        <PrecomputedPeaksDemo />
+      </Section>
+
+      <Section title="10 · seekStartsPlayback={false}" hint="Click on the waveform seeks but does not start playback. Useful in embeds.">
+        <Player
+          src={SAMPLES.short}
+          title="Click only seeks"
+          artist="No autoplay on click"
+          seekStartsPlayback={false}
+        />
+      </Section>
+
+      <Section title="11 · Persistent volume sync" hint="Two uncontrolled players read / write the same persisted prefs (also synced across tabs).">
+        <PreferencesSyncDemo />
+      </Section>
+
+      <Section title="12 · Active-player coordination" hint="exclusive (default) pauses sibling players. Active id + 'last active' badges from useActivePlayer / useLastActivePlayer.">
+        <ActivePlayerDemo />
+      </Section>
+
+      <Section title="13 · Custom toolbar via useIsActivePlayer" hint="Uses Player's id+`useIsActivePlayer` to outline the playing card.">
+        <ActiveOutlineDemo />
+      </Section>
+
+      <Section title="14 · Custom layout (slot composition)" hint="Drop <PlayerProvider> + import the parts you want. Build any grid.">
+        <CustomLayoutDemo />
+      </Section>
+
+      <Section title="15 · Error state" hint="Bad src triggers MediaError → ErrorState with retry.">
+        <Player src="/audio/this-does-not-exist.mp3" title="Broken source" artist="See error pane" />
+      </Section>
+    </div>
+  );
+};
+
+function PrecomputedPeaksDemo() {
+  const [peaks, setPeaks] = useState<Float32Array | null>(null);
+  useEffect(() => {
+    let alive = true;
+    decodePeaks(SAMPLES.short).then((p) => alive && setPeaks(p)).catch(() => undefined);
+    return () => {
+      alive = false;
+    };
+  }, []);
+  if (!peaks) {
+    return (
+      <div className="rounded-md border border-border/60 bg-muted/30 px-3 py-4 text-xs text-muted-foreground">
+        Decoding peaks once (so the player below mounts with them already in hand)…
+      </div>
+    );
+  }
+  return (
+    <Player
+      src={SAMPLES.short}
+      title="Pre-computed peaks"
+      artist={`Float32Array · ${peaks.length} buckets`}
+      peaks={peaks}
+    />
+  );
+}
+
+function PreferencesSyncDemo() {
+  const prefs = usePlayerPreferences();
+  return (
+    <div className="space-y-3">
+      <div className="rounded-md border border-border/60 bg-muted/30 px-3 py-2 text-xs">
+        Stored prefs:{' '}
+        <code className="text-foreground">
+          volume {Math.round(prefs.volume * 100)}% · {prefs.muted ? 'muted' : 'unmuted'}
+        </code>
+      </div>
+      <Player src={SAMPLES.short} title="Player A" artist="uncontrolled volume" />
+      <Player src={SAMPLES.voice} title="Player B" artist="uncontrolled volume" />
+    </div>
+  );
+}
+
+function ActivePlayerDemo() {
+  const active = useActivePlayer();
+  const last = useLastActivePlayer();
+  return (
+    <div className="space-y-3">
+      <div className="grid grid-cols-2 gap-2 text-xs">
+        <div className="rounded border border-border/60 bg-card px-2 py-1.5">
+          Active: <code className="text-foreground">{active ?? '∅'}</code>
+        </div>
+        <div className="rounded border border-border/60 bg-card px-2 py-1.5">
+          Last: <code className="text-foreground">{last ?? '∅'}</code>
+        </div>
+      </div>
+      <Player src={SAMPLES.short} title="Track A" artist="exclusive default" />
+      <Player src={SAMPLES.voice} title="Track B" artist="exclusive default" />
+      <Player src={SAMPLES.long} title="Track C" artist="exclusive default" />
+    </div>
+  );
+}
+
+function ActiveOutlineCard({
+  id,
+  src,
+  title,
+}: {
+  id: string;
+  src: string;
+  title: string;
+}) {
+  const isActive = useIsActivePlayer(id);
+  return (
+    <div
+      className={`rounded-lg p-px transition-colors ${
+        isActive ? 'bg-primary/60' : 'bg-transparent'
+      }`}
+    >
+      <Player src={src} title={title} artist={isActive ? 'now playing' : 'idle'} ariaLabel={id} />
+    </div>
+  );
+}
+
+function ActiveOutlineDemo() {
+  // We pass a stable `ariaLabel` as the id we read back from the bus.
+  // useActivePlayer returns React's useId-generated value, so a real consumer
+  // would key off that instead — this is just to demonstrate the pattern.
+  return (
+    <div className="space-y-3">
+      <p className="text-xs text-muted-foreground">
+        The currently playing card gets a primary ring. Implementation reads
+        <code className="rounded bg-muted px-1">useIsActivePlayer(id)</code>.
+      </p>
+      <ActiveOutlineCard id="card-a" src={SAMPLES.short} title="Card A" />
+      <ActiveOutlineCard id="card-b" src={SAMPLES.voice} title="Card B" />
+    </div>
+  );
+}
+
+function CustomLayoutDemo() {
+  return (
+    <TooltipProvider delayDuration={400}>
+    <PlayerProvider src={SAMPLES.long} title="Custom layout demo" artist="phonograph" cover={COVER}>
+      <div className="grid grid-cols-[96px_1fr_auto] gap-4 rounded-lg border border-border/60 bg-card p-4">
+        {/* Left: large cover spanning two rows */}
+        <div className="row-span-2">
+          <Cover size={96} alt="Custom layout cover" />
+        </div>
+
+        {/* Top right: meta + timer */}
+        <div className="min-w-0">
+          <Title />
+          <Artist />
+        </div>
+        <TimeDisplay />
+
+        {/* Bottom: full-width waveform + controls */}
+        <div className="col-span-2 space-y-3">
+          <Waveform height={48} />
+          <div className="flex items-center justify-between gap-2">
+            <PlayButton />
+            <div className="flex items-center gap-1">
+              <VolumeControl />
+              <LoopButton />
+            </div>
+          </div>
+        </div>
+      </div>
+    </PlayerProvider>
+    </TooltipProvider>
+  );
+}
+
+export const Interactive = () => {
+  const [sampleKey] = useSelect('sample', {
+    options: ['short', 'voice', 'long'] as const,
+    defaultValue: 'short',
+    label: 'Sample',
+  });
+  const [mode] = useSelect('waveformMode', {
+    options: ['peaks', 'live', 'bars', 'progress', 'none'] as const,
+    defaultValue: 'peaks',
+    label: 'Waveform mode',
+  });
+  const [variant] = useSelect('variant', {
+    options: ['auto', 'default', 'compact'] as const,
+    defaultValue: 'default',
+    label: 'Variant',
+  });
+  const [withCover] = useBoolean('withCover', { defaultValue: true, label: 'Show cover' });
+  const [reactive] = useBoolean('reactive', {
+    defaultValue: false,
+    label: 'Reactive cover (subtle)',
+  });
+
+  const [userSrc, setUserSrc] = useState<string | null>(null);
+  const [userName, setUserName] = useState<string>('');
+
+  useEffect(() => {
+    return () => {
+      if (userSrc?.startsWith('blob:')) URL.revokeObjectURL(userSrc);
+    };
+  }, [userSrc]);
+
+  const src = userSrc ?? SAMPLES[sampleKey];
+
+  return (
+    <Frame>
+      <div className="mb-4 flex flex-wrap items-center gap-3">
+        <label className="inline-flex cursor-pointer items-center gap-2 rounded-md border border-border/60 bg-card px-3 py-1.5 text-xs hover:bg-accent">
+          <span>Drop / pick a file</span>
+          <input
+            type="file"
+            accept="audio/*"
+            className="hidden"
+            onChange={(e) => {
+              const file = e.target.files?.[0];
+              if (!file) return;
+              if (userSrc?.startsWith('blob:')) URL.revokeObjectURL(userSrc);
+              setUserSrc(URL.createObjectURL(file));
+              setUserName(file.name);
+            }}
+          />
+        </label>
+        {userSrc && (
+          <button
+            type="button"
+            onClick={() => {
+              if (userSrc.startsWith('blob:')) URL.revokeObjectURL(userSrc);
+              setUserSrc(null);
+              setUserName('');
+            }}
+            className="rounded-md border border-border/60 px-2 py-1 text-xs text-muted-foreground hover:bg-accent"
+          >
+            Reset to sample
+          </button>
+        )}
+        <span className="text-xs text-muted-foreground">
+          {userSrc ? userName : `sample: ${sampleKey}`}
+        </span>
+      </div>
+      <Player
+        key={src}
+        src={src}
+        title={userSrc ? userName : 'Local sample'}
+        artist={userSrc ? 'Your file (blob URL)' : 'wavesurfer / phonograph'}
+        cover={withCover ? COVER : undefined}
+        variant={variant}
+        waveform={{ mode: mode as WaveformMode }}
+        reactiveCover={reactive ? 'subtle' : false}
+      />
+    </Frame>
+  );
+};

package/src/tools/AudioPlayer/Player.tsx

@@ -0,0 +1,80 @@
+'use client';
+
+import { forwardRef } from 'react';
+import { PlayerProvider } from './context/PlayerProvider';
+import { PlayerShell } from './PlayerShell';
+import './styles/webview-safe.css';
+import type { PlayerHandle, PlayerProps } from './types';
+
+export const Player = forwardRef<PlayerHandle, PlayerProps>(function Player(props, ref) {
+  const {
+    src,
+    peaks,
+    title,
+    artist,
+    album,
+    cover,
+    autoplay,
+    loop,
+    initialVolume,
+    muted,
+    preload,
+    exclusive,
+    onPrev,
+    onNext,
+    onPlay,
+    onPause,
+    onEnded,
+    onError,
+    onTimeUpdate,
+    variant,
+    waveform,
+    reactiveCover,
+    className,
+    ariaLabel,
+    enableKeyboardShortcuts,
+    seekStartsPlayback,
+  } = props;
+
+  // onTimeUpdate is intentionally not wired in the provider — we expose it via
+  // ref or future hook. Keep the prop accepted so callers can adopt later.
+  void onTimeUpdate;
+
+  return (
+    <PlayerProvider
+      src={src}
+      peaks={peaks}
+      title={title}
+      artist={artist}
+      album={album}
+      cover={cover}
+      autoplay={autoplay}
+      loop={loop}
+      initialVolume={initialVolume}
+      muted={muted}
+      preload={preload}
+      exclusive={exclusive}
+      onPrev={onPrev}
+      onNext={onNext}
+      onPlay={onPlay}
+      onPause={onPause}
+      onEnded={onEnded}
+      onError={onError}
+    >
+      <PlayerShell
+        className={className}
+        variant={variant}
+        waveform={waveform}
+        reactiveCover={reactiveCover}
+        onPrev={onPrev}
+        onNext={onNext}
+        enableKeyboardShortcuts={enableKeyboardShortcuts}
+        ariaLabel={ariaLabel}
+        seekStartsPlayback={seekStartsPlayback}
+        handleRef={ref}
+      />
+    </PlayerProvider>
+  );
+});
+
+Player.displayName = 'AudioPlayer';