trix-ui 0.2.3 → 0.2.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "trix-ui",
-  "version": "0.2.3",
+  "version": "0.2.4",
   "description": "Lite UI CLI, registry tooling, and templates.",
   "license": "MIT",
   "type": "module",

package/templates/composites/music-player-card.tsx

@@ -164,11 +164,12 @@ const MusicPlayerCardBase = React.forwardRef<HTMLDivElement, MusicPlayerCardProp
     const [trackIndex, setTrackIndex] = React.useState(
       clamp(initialTrackIndex, 0, Math.max((tracks?.length ?? 1) - 1, 0))
     );
-    const [uploadedFile, setUploadedFile] = React.useState<File | null>(null);
-    const [currentTimeSec, setCurrentTimeSec] = React.useState(0);
-    const [durationSec, setDurationSec] = React.useState(0);
-    const audioRef = React.useRef<HTMLAudioElement | null>(null);
-    const shuffleHistoryRef = React.useRef<number[]>([]);
+    const [uploadedFile, setUploadedFile] = React.useState<File | null>(null);
+    const [currentTimeSec, setCurrentTimeSec] = React.useState(0);
+    const [durationSec, setDurationSec] = React.useState(0);
+    const [playbackError, setPlaybackError] = React.useState<string | null>(null);
+    const audioRef = React.useRef<HTMLAudioElement | null>(null);
+    const shuffleHistoryRef = React.useRef<number[]>([]);
 
     const isShuffle = isShuffleOn ?? internalShuffle;
     const isRepeat = isRepeatOn ?? internalRepeat;
@@ -186,16 +187,24 @@ const MusicPlayerCardBase = React.forwardRef<HTMLDivElement, MusicPlayerCardProp
       ? playlist[clamp(trackIndex, 0, playlist.length - 1)]
       : fallbackTrack;
 
-    const propFileUrl = useObjectUrl(audioFile);
-    const uploadedFileUrl = useObjectUrl(uploadedFile ?? undefined);
-    const resolvedSrc = propFileUrl ?? uploadedFileUrl ?? activeTrack.src;
-    const isPlayable = Boolean(resolvedSrc);
-
-    const derivedProgress =
-      durationSec > 0 ? clamp((currentTimeSec / durationSec) * 100, 0, 100) : 0;
-    const pct = clamp(progress ?? derivedProgress, 0, 100);
-    const resolvedCurrentTime = currentTime ?? formatTime(currentTimeSec);
-    const resolvedTotalTime = totalTime ?? formatTime(durationSec);
+    const propFileUrl = useObjectUrl(audioFile);
+    const uploadedFileUrl = useObjectUrl(uploadedFile ?? undefined);
+    const resolvedSrc = propFileUrl ?? uploadedFileUrl ?? activeTrack.src;
+    const isPlayable = Boolean(resolvedSrc);
+    const hasExplicitSource =
+      Boolean(audioSrc) ||
+      Boolean(audioFile) ||
+      Boolean(uploadedFile) ||
+      Boolean(playlist.length && activeTrack.src);
+    const missingSourceMessage =
+      !resolvedSrc && hasExplicitSource ? "Audio file not found." : null;
+
+    const derivedProgress =
+      durationSec > 0 ? clamp((currentTimeSec / durationSec) * 100, 0, 100) : 0;
+    const pct = clamp(progress ?? derivedProgress, 0, 100);
+    const resolvedCurrentTime = currentTime ?? formatTime(currentTimeSec);
+    const resolvedTotalTime = totalTime ?? formatTime(durationSec);
+    const errorMessage = playbackError ?? missingSourceMessage;
 
     const requestPlay = React.useCallback(
       async (nextPlaying: boolean): Promise<void> => {
@@ -210,16 +219,21 @@ const MusicPlayerCardBase = React.forwardRef<HTMLDivElement, MusicPlayerCardProp
           } else {
             audio.pause();
           }
-        } catch {
-          if (isPlaying === undefined) {
-            setInternalPlaying(false);
-          }
-          onPlayStateChange?.(false);
-        }
-      },
-      [isPlaying, onPlayStateChange, resolvedSrc]
-    );
-
+        } catch {
+          if (isPlaying === undefined) {
+            setInternalPlaying(false);
+          }
+          setPlaybackError("Audio file is not playable.");
+          onPlayStateChange?.(false);
+        }
+      },
+      [isPlaying, onPlayStateChange, resolvedSrc]
+    );
+
+    React.useEffect(() => {
+      setPlaybackError(null);
+    }, [resolvedSrc]);
+
     React.useEffect(() => {
       const audio = audioRef.current;
       if (!audio) return;
@@ -420,19 +434,27 @@ const MusicPlayerCardBase = React.forwardRef<HTMLDivElement, MusicPlayerCardProp
         )}
         {...props}
       >
-        <audio
-          ref={audioRef}
-          preload="metadata"
-          onTimeUpdate={(event) => {
-            const audio = event.currentTarget;
-            setCurrentTimeSec(audio.currentTime);
-          }}
-          onLoadedMetadata={(event) => {
-            const audio = event.currentTarget;
-            setDurationSec(audio.duration || 0);
-          }}
-          onEnded={handleEnded}
-        />
+        <audio
+          ref={audioRef}
+          preload="metadata"
+          onTimeUpdate={(event) => {
+            const audio = event.currentTarget;
+            setCurrentTimeSec(audio.currentTime);
+          }}
+          onLoadedMetadata={(event) => {
+            const audio = event.currentTarget;
+            setDurationSec(audio.duration || 0);
+            setPlaybackError(null);
+          }}
+          onError={() => {
+            setPlaybackError("Audio file is not playable.");
+            if (isPlaying === undefined) {
+              setInternalPlaying(false);
+            }
+            onPlayStateChange?.(false);
+          }}
+          onEnded={handleEnded}
+        />
         {/* Album Art */}
         <div
           className={cn(
@@ -498,10 +520,13 @@ const MusicPlayerCardBase = React.forwardRef<HTMLDivElement, MusicPlayerCardProp
           />
         </div>
 
-        <div className="flex justify-between text-[10px] text-stone-400 font-mono mb-4">
-          <span>{resolvedCurrentTime}</span>
-          <span>{resolvedTotalTime}</span>
-        </div>
+        <div className="flex justify-between text-[10px] text-stone-400 font-mono mb-4">
+          <span>{resolvedCurrentTime}</span>
+          <span>{resolvedTotalTime}</span>
+        </div>
+        {errorMessage ? (
+          <p className="mb-3 text-xs text-rose-500">{errorMessage}</p>
+        ) : null}
 
         {/* Controls */}
         <div className={cn("flex justify-between items-center mt-auto px-2", controlsClassName)}>