From a7b9dfc0be913127e7848fbfe6de7f48ea8fa6e0 Mon Sep 17 00:00:00 2001
From: Elshad Toklayev <fatehmemmedli5@gmail.com>
Date: Sun, 31 May 2026 21:04:08 +0300
Subject: [PATCH] fix(player): use the real preview length, not the full track
 duration

The <audio> element plays a ~30s iTunes preview, but the player used the full
Spotify track duration (durationMs) for the seek bar, progress, and the
recorded play length. That left most of the seek bar dead, capped the progress
bar near ~17%, and inflated recorded listening minutes roughly 6x.

- Measure the preview length from the audio element's loadedmetadata event and
  store it as previewDurationMs in the player store.
- Drive the seek bar max, progress, time labels, position clamping, and onEnded
  from that effective duration, falling back to the track duration until
  metadata loads.
- Record durationPlayedMs as min(previewDurationMs, trackDurationMs) with a 30s
  fallback, so listening-minute analytics reflect previews, not full tracks.
---
 .../web/src/components/player/AudioPlayer.tsx | 19 +++++++++++++-----
 .../components/player/PlayHistoryReporter.tsx | 11 +++++++++-
 .../web/src/components/player/player-store.ts | 20 ++++++++++++++-----
 3 files changed, 39 insertions(+), 11 deletions(-)

diff --git a/apps/web/src/components/player/AudioPlayer.tsx b/apps/web/src/components/player/AudioPlayer.tsx
index b921f56..04805f4 100644
--- a/apps/web/src/components/player/AudioPlayer.tsx
+++ b/apps/web/src/components/player/AudioPlayer.tsx
@@ -18,11 +18,13 @@ export function AudioPlayer({ className }: AudioPlayerProps) {
   const track = usePlayerStore((state) => state.track);
   const status = usePlayerStore((state) => state.status);
   const positionMs = usePlayerStore((state) => state.positionMs);
+  const previewDurationMs = usePlayerStore((state) => state.previewDurationMs);
   const volume = usePlayerStore((state) => state.volume);
   const isMuted = usePlayerStore((state) => state.isMuted);
   const toggle = usePlayerStore((state) => state.toggle);
   const seek = usePlayerStore((state) => state.seek);
   const tick = usePlayerStore((state) => state.tick);
+  const setPreviewDuration = usePlayerStore((state) => state.setPreviewDuration);
   const pause = usePlayerStore((state) => state.pause);
   const play = usePlayerStore((state) => state.play);
   const setVolume = usePlayerStore((state) => state.setVolume);
@@ -59,7 +61,10 @@ export function AudioPlayer({ className }: AudioPlayerProps) {
 
   const isUnavailable = status === 'unavailable' || track.previewUrl === null;
   const isPlaying = status === 'playing';
-  const progress = track.durationMs > 0 ? positionMs / track.durationMs : 0;
+  // The <audio> element plays the 30s preview, not the full track, so drive the
+  // seek bar and progress from the measured preview length when available.
+  const effectiveDurationMs = previewDurationMs ?? track.durationMs;
+  const progress = effectiveDurationMs > 0 ? positionMs / effectiveDurationMs : 0;
 
   return (
     <div
@@ -79,11 +84,15 @@ export function AudioPlayer({ className }: AudioPlayerProps) {
           src={track.previewUrl}
           preload="metadata"
           onLoadedMetadata={() => {
+            const seconds = audioRef.current?.duration ?? 0;
+            if (Number.isFinite(seconds) && seconds > 0) {
+              setPreviewDuration(Math.round(seconds * 1000));
+            }
             if (status === 'loading') play();
           }}
           onEnded={() => {
             pause();
-            seek(track.durationMs);
+            seek(effectiveDurationMs);
           }}
           onTimeUpdate={() => {
             if (audioRef.current === null) return;
@@ -156,7 +165,7 @@ export function AudioPlayer({ className }: AudioPlayerProps) {
             <input
               type="range"
               min={0}
-              max={track.durationMs}
+              max={effectiveDurationMs}
               step={100}
               value={positionMs}
               disabled={isUnavailable}
@@ -165,12 +174,12 @@ export function AudioPlayer({ className }: AudioPlayerProps) {
               }
               className="w-full cursor-pointer accent-section-accent focus-visible:outline-none"
               aria-label="Seek position"
-              aria-valuetext={`${formatPosition(positionMs)} of ${formatPosition(track.durationMs)}`}
+              aria-valuetext={`${formatPosition(positionMs)} of ${formatPosition(effectiveDurationMs)}`}
             />
           </label>
           <div className="flex justify-between font-mono text-[11px] text-fg-faint tabular-nums">
             <span>{formatPosition(positionMs)}</span>
-            <span>{formatPosition(track.durationMs)}</span>
+            <span>{formatPosition(effectiveDurationMs)}</span>
           </div>
         </div>
 
diff --git a/apps/web/src/components/player/PlayHistoryReporter.tsx b/apps/web/src/components/player/PlayHistoryReporter.tsx
index 363bc57..36732f2 100644
--- a/apps/web/src/components/player/PlayHistoryReporter.tsx
+++ b/apps/web/src/components/player/PlayHistoryReporter.tsx
@@ -4,6 +4,15 @@ import { useEffect, useRef } from 'react';
 import { recordPlay } from '@/lib/history/api';
 import { usePlayerStore } from './player-store';
 
+// Previews are 30-second clips. If the real preview length has not been measured
+// yet, cap the recorded play at this fallback so analytics are not inflated by
+// the full track duration.
+const PREVIEW_FALLBACK_MS = 30_000;
+
+function reportedDurationMs(trackDurationMs: number, previewDurationMs: number | null): number {
+  return Math.min(previewDurationMs ?? PREVIEW_FALLBACK_MS, trackDurationMs);
+}
+
 export function PlayHistoryReporter() {
   const reportedRef = useRef<{ trackId: number; key: string } | null>(null);
 
@@ -34,7 +43,7 @@ export function PlayHistoryReporter() {
         {
           trackId: state.track.trackId,
           source: 'preview',
-          durationPlayedMs: state.track.durationMs,
+          durationPlayedMs: reportedDurationMs(state.track.durationMs, state.previewDurationMs),
         },
         { idempotencyKey: key },
       ).catch(() => {
diff --git a/apps/web/src/components/player/player-store.ts b/apps/web/src/components/player/player-store.ts
index 961e02a..cdbe551 100644
--- a/apps/web/src/components/player/player-store.ts
+++ b/apps/web/src/components/player/player-store.ts
@@ -15,6 +15,9 @@ export interface PlayerState {
   track: PlayerTrack | null;
   status: PlayerStatus;
   positionMs: number;
+  // The real length of the loaded preview (~30s), measured from audio metadata.
+  // Falls back to the full track duration until metadata loads.
+  previewDurationMs: number | null;
   volume: number;
   isMuted: boolean;
   load(track: PlayerTrack): void;
@@ -23,6 +26,7 @@ export interface PlayerState {
   toggle(): void;
   seek(positionMs: number): void;
   tick(positionMs: number): void;
+  setPreviewDuration(durationMs: number | null): void;
   setVolume(volume: number): void;
   setMuted(isMuted: boolean): void;
   reset(): void;
@@ -50,6 +54,7 @@ export const usePlayerStore = create<PlayerState>((set, get) => ({
   track: null,
   status: 'idle',
   positionMs: 0,
+  previewDurationMs: null,
   volume: INITIAL_VOLUME,
   isMuted: false,
   load(track) {
@@ -57,6 +62,7 @@ export const usePlayerStore = create<PlayerState>((set, get) => ({
       track,
       status: track.previewUrl === null ? 'unavailable' : 'loading',
       positionMs: 0,
+      previewDurationMs: null,
     });
   },
   play() {
@@ -84,18 +90,22 @@ export const usePlayerStore = create<PlayerState>((set, get) => ({
     }
   },
   seek(positionMs) {
-    const { track } = get();
+    const { track, previewDurationMs } = get();
     if (track === null) {
       return;
     }
-    set({ positionMs: clampPosition(positionMs, track.durationMs) });
+    set({ positionMs: clampPosition(positionMs, previewDurationMs ?? track.durationMs) });
   },
   tick(positionMs) {
-    const { track, status } = get();
+    const { track, status, previewDurationMs } = get();
     if (track === null || status !== 'playing') {
       return;
     }
-    set({ positionMs: clampPosition(positionMs, track.durationMs) });
+    set({ positionMs: clampPosition(positionMs, previewDurationMs ?? track.durationMs) });
+  },
+  setPreviewDuration(durationMs) {
+    const valid = durationMs !== null && Number.isFinite(durationMs) && durationMs > 0;
+    set({ previewDurationMs: valid ? durationMs : null });
   },
   setVolume(volume) {
     set({ volume: clampVolume(volume), isMuted: false });
@@ -104,6 +114,6 @@ export const usePlayerStore = create<PlayerState>((set, get) => ({
     set({ isMuted });
   },
   reset() {
-    set({ track: null, status: 'idle', positionMs: 0 });
+    set({ track: null, status: 'idle', positionMs: 0, previewDurationMs: null });
   },
 }));