trix-ui 0.2.3 → 0.2.6

package/package.json

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

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

@@ -27,11 +27,14 @@ export type MusicPlayerCardProps = {
   /** Optional playlist */
   tracks?: MusicTrack[];
 
-  /** Optional File object for local playback */
-  audioFile?: File;
-
-  /** Initial index when using tracks (default 0) */
-  initialTrackIndex?: number;
+  /** Optional File object for local playback */
+  audioFile?: File;
+
+  /** Optional list of local files for playlist playback */
+  audioFiles?: File[];
+
+  /** Initial index when using tracks (default 0) */
+  initialTrackIndex?: number;
 
   /** Auto play on load (default false) */
   autoPlay?: boolean;
@@ -52,9 +55,10 @@ export type MusicPlayerCardProps = {
 
   onShuffleChange?: (enabled: boolean) => void;
   onRepeatChange?: (enabled: boolean) => void;
-  onPlayStateChange?: (playing: boolean) => void;
-  onTrackChange?: (track: MusicTrack, index: number) => void;
-  onFileSelect?: (file: File) => void;
+  onPlayStateChange?: (playing: boolean) => void;
+  onTrackChange?: (track: MusicTrack, index: number) => void;
+  onFileSelect?: (file: File) => void;
+  onFilesSelect?: (files: File[]) => void;
 
   /** Toggle states */
   isPlaying?: boolean;
@@ -79,32 +83,38 @@ export type MusicPlayerCardProps = {
 
 const clamp = (n: number, min: number, max: number) => Math.max(min, Math.min(max, n));
 
-function formatTime(value: number): string {
-  if (!Number.isFinite(value) || value <= 0) return "0:00";
-  const minutes = Math.floor(value / 60);
-  const seconds = Math.floor(value % 60);
-  return `${minutes}:${seconds.toString().padStart(2, "0")}`;
-}
-
-function useObjectUrl(file?: File): string | null {
-  const [url, setUrl] = React.useState<string | null>(null);
-
-  React.useEffect(() => {
-    if (!file) {
-      setUrl(null);
-      return undefined;
-    }
-
-    const nextUrl = URL.createObjectURL(file);
-    setUrl(nextUrl);
-
-    return () => {
-      URL.revokeObjectURL(nextUrl);
-    };
-  }, [file]);
-
-  return url;
-}
+function formatTime(value: number): string {
+  if (!Number.isFinite(value) || value <= 0) return "0:00";
+  const minutes = Math.floor(value / 60);
+  const seconds = Math.floor(value % 60);
+  return `${minutes}:${seconds.toString().padStart(2, "0")}`;
+}
+
+function useObjectUrls(files: File[]): string[] {
+  const [urls, setUrls] = React.useState<string[]>([]);
+
+  React.useEffect(() => {
+    if (!files.length) {
+      setUrls([]);
+      return undefined;
+    }
+
+    const nextUrls = files.map((file) => URL.createObjectURL(file));
+    setUrls(nextUrls);
+
+    return () => {
+      nextUrls.forEach((url) => URL.revokeObjectURL(url));
+    };
+  }, [files]);
+
+  return urls;
+}
+
+function getFileTitle(file: File): string {
+  const name = file.name?.trim() || "Untitled";
+  const trimmed = name.replace(/\.[^/.]+$/, "");
+  return trimmed || name;
+}
 
 const MusicPlayerCardBase = React.forwardRef<HTMLDivElement, MusicPlayerCardProps>(
   (
@@ -113,12 +123,13 @@ const MusicPlayerCardBase = React.forwardRef<HTMLDivElement, MusicPlayerCardProp
       title,
       subtitle = "Unknown Artist",
 
-      audioSrc,
-      tracks,
-      audioFile,
-      initialTrackIndex = 0,
-      autoPlay = false,
-      showFileInput = false,
+      audioSrc,
+      tracks,
+      audioFile,
+      audioFiles,
+      initialTrackIndex = 0,
+      autoPlay = false,
+      showFileInput = false,
 
       progress,
       currentTime,
@@ -131,10 +142,11 @@ const MusicPlayerCardBase = React.forwardRef<HTMLDivElement, MusicPlayerCardProp
       onRepeat,
 
       onShuffleChange,
-      onRepeatChange,
-      onPlayStateChange,
-      onTrackChange,
-      onFileSelect,
+      onRepeatChange,
+      onPlayStateChange,
+      onTrackChange,
+      onFileSelect,
+      onFilesSelect,
 
       isPlaying,
       isShuffleOn,
@@ -159,43 +171,70 @@ const MusicPlayerCardBase = React.forwardRef<HTMLDivElement, MusicPlayerCardProp
     ref
   ) => {
     const [internalPlaying, setInternalPlaying] = React.useState(false);
-    const [internalShuffle, setInternalShuffle] = React.useState(false);
-    const [internalRepeat, setInternalRepeat] = React.useState(false);
-    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 isShuffle = isShuffleOn ?? internalShuffle;
-    const isRepeat = isRepeatOn ?? internalRepeat;
-    const playing = isPlaying ?? internalPlaying;
-
-    const playlist = tracks?.length ? tracks : [];
-    const fallbackTrack: MusicTrack = {
-      src: audioSrc ?? "",
-      title,
-      subtitle,
-      imageSrc,
-    };
-
-    const activeTrack = playlist.length
-      ? 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 [internalShuffle, setInternalShuffle] = React.useState(false);
+    const [internalRepeat, setInternalRepeat] = React.useState(false);
+    const [trackIndex, setTrackIndex] = React.useState(
+      clamp(initialTrackIndex, 0, Math.max((tracks?.length ?? 1) - 1, 0))
+    );
+    const [uploadedFiles, setUploadedFiles] = React.useState<File[]>([]);
+    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;
+    const playing = isPlaying ?? internalPlaying;
+
+    const fileList = React.useMemo<File[]>(() => {
+      if (audioFiles?.length) return audioFiles;
+      if (uploadedFiles.length) return uploadedFiles;
+      if (audioFile) return [audioFile];
+      return [];
+    }, [audioFile, audioFiles, uploadedFiles]);
+
+    const fileUrls = useObjectUrls(fileList);
+    const fileTracks = React.useMemo<MusicTrack[]>(() => {
+      if (!fileList.length) return [];
+      return fileList.map((file, index) => ({
+        src: fileUrls[index] ?? "",
+        title: getFileTitle(file),
+        subtitle: "Local file",
+        imageSrc,
+      }));
+    }, [fileList, fileUrls, imageSrc]);
+
+    const playlist = fileTracks.length ? fileTracks : tracks?.length ? tracks : [];
+    const fallbackTrack: MusicTrack = {
+      src: audioSrc ?? "",
+      title,
+      subtitle,
+      imageSrc,
+    };
+
+    const activeTrack = playlist.length
+      ? playlist[clamp(trackIndex, 0, playlist.length - 1)]
+      : fallbackTrack;
+
+    const resolvedSrc = activeTrack.src;
+    const isPlayable = Boolean(resolvedSrc);
+    const hasExplicitSource =
+      Boolean(audioSrc) ||
+      Boolean(audioFile) ||
+      Boolean(fileList.length) ||
+      Boolean(playlist.length && activeTrack.src);
+    const missingSourceMessage =
+      !resolvedSrc && hasExplicitSource && fileList.length === 0
+        ? "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 +249,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;
@@ -398,16 +442,19 @@ const MusicPlayerCardBase = React.forwardRef<HTMLDivElement, MusicPlayerCardProp
       onPlayStateChange?.(false);
     };
 
-    const handleFileChange = (event: React.ChangeEvent<HTMLInputElement>): void => {
-      const file = event.target.files?.[0];
-      if (!file) return;
-      setUploadedFile(file);
-      onFileSelect?.(file);
-      if (isPlaying === undefined) {
-        setInternalPlaying(true);
-      }
-      onPlayStateChange?.(true);
-    };
+    const handleFileChange = (event: React.ChangeEvent<HTMLInputElement>): void => {
+      const files = Array.from(event.target.files ?? []);
+      if (!files.length) return;
+      setUploadedFiles(files);
+      setTrackIndex(0);
+      onFileSelect?.(files[0]);
+      onFilesSelect?.(files);
+      if (isPlaying === undefined) {
+        setInternalPlaying(true);
+      }
+      onPlayStateChange?.(true);
+      event.currentTarget.value = "";
+    };
 
     return (
       <div
@@ -420,19 +467,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(
@@ -457,12 +512,13 @@ const MusicPlayerCardBase = React.forwardRef<HTMLDivElement, MusicPlayerCardProp
         {showFileInput ? (
           <label className="mb-4 inline-flex cursor-pointer items-center gap-2 text-[10px] font-semibold uppercase tracking-[0.2em] text-stone-400">
             <span>Load audio</span>
-            <input
-              type="file"
-              accept="audio/*"
-              className="sr-only"
-              onChange={handleFileChange}
-            />
+            <input
+              type="file"
+              accept="audio/*"
+              multiple
+              className="sr-only"
+              onChange={handleFileChange}
+            />
           </label>
         ) : null}
 
@@ -498,10 +554,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)}>