trix-ui 0.2.4 → 0.2.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "trix-ui",
-  "version": "0.2.4",
+  "version": "0.2.7",
   "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,45 +171,63 @@ 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 [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 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 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(uploadedFile) ||
+      Boolean(fileList.length) ||
       Boolean(playlist.length && activeTrack.src);
     const missingSourceMessage =
-      !resolvedSrc && hasExplicitSource ? "Audio file not found." : null;
+      !resolvedSrc && hasExplicitSource && fileList.length === 0
+        ? "Audio file not found."
+        : null;
 
     const derivedProgress =
       durationSec > 0 ? clamp((currentTimeSec / durationSec) * 100, 0, 100) : 0;
@@ -412,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
@@ -479,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}