@freqhole/playlistz 0.0.1

package/src/hooks/useDragAndDrop.ts

@@ -0,0 +1,400 @@
+
+import { createSignal, createEffect, onMount, onCleanup } from "solid-js";
+import type { Playlist } from "../types/playlist.js";
+import { log } from "../utils/log.js";
+import {
+  filterAudioFiles,
+  extractMetadata,
+} from "../services/fileProcessingService.js";
+import { parsePlaylistZip } from "../services/playlistDownloadService.js";
+import {
+  createPlaylist,
+  addSongToPlaylist,
+} from "../services/playlistDocService.js";
+
+export interface DragInfo {
+  type: "audio-files" | "non-audio-files" | "song-reorder" | "unknown";
+  itemCount: number;
+}
+
+export function useDragAndDrop() {
+  // drag state
+  const [isDragOver, setIsDragOver] = createSignal(false);
+  const [dragInfo, setDragInfo] = createSignal<DragInfo>({
+    type: "unknown",
+    itemCount: 0,
+  });
+  const [error, setError] = createSignal<string | null>(null);
+
+  // what's being dragged?
+  const analyzeDragData = (e: DragEvent): DragInfo => {
+    // check types array first since getData() is restricted during dragenter
+    const types = e.dataTransfer?.types;
+
+    // song reorder: SongRow sets text/plain data, so types will include "text/plain" but not "Files"
+    if (types && types.includes("text/plain") && !types.includes("Files")) {
+      return { type: "song-reorder", itemCount: 1 };
+    }
+
+    // file drops: will have "Files" in types array
+    if (types && types.includes("Files")) {
+      return { type: "audio-files", itemCount: 1 };
+    }
+
+    // fallback: try to read data directly (works during drop events)
+    const textData = e.dataTransfer?.getData("text/plain");
+    if (textData && !isNaN(parseInt(textData, 10))) {
+      return { type: "song-reorder", itemCount: 1 };
+    }
+
+    // legacy support for json data
+    const dragData = e.dataTransfer?.getData("application/json");
+    if (dragData) {
+      try {
+        const data = JSON.parse(dragData);
+        if (data.type === "song-reorder") {
+          return { type: "song-reorder", itemCount: 1 };
+        }
+      } catch {
+        // not json, continue with file analysis...
+      }
+    }
+
+    // check items array as additional fallback
+    const items = e.dataTransfer?.items;
+
+    if (items && items.length > 0) {
+      const hasFiles = Array.from(items).some((item) => item.kind === "file");
+      if (hasFiles) {
+        return { type: "audio-files", itemCount: items.length };
+      }
+    }
+
+    // fallback to checking files (available during drop event)
+    const files = e.dataTransfer?.files;
+    if (files && files.length > 0) {
+      const zipFiles = Array.from(files).filter(
+        (file) =>
+          file.type === "application/zip" ||
+          file.name.toLowerCase().endsWith(".zip")
+      );
+
+      if (zipFiles.length > 0) {
+        return { type: "audio-files", itemCount: zipFiles.length };
+      }
+
+      const audioFiles = filterAudioFiles(files);
+      if (audioFiles.length > 0) {
+        return { type: "audio-files", itemCount: audioFiles.length };
+      }
+
+      return { type: "non-audio-files", itemCount: files.length };
+    }
+
+    return { type: "unknown", itemCount: 0 };
+  };
+
+  const handleDragEnter = (e: DragEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+
+    const info = analyzeDragData(e);
+    setDragInfo(info);
+
+    // only show drag overlay for file drops, not song reordering
+    if (info.type !== "song-reorder") {
+      setIsDragOver(true);
+    }
+  };
+
+  const handleDragOver = (e: DragEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+
+    // update drag effect based on content
+    const info = dragInfo();
+    if (info.type === "audio-files" || info.type === "song-reorder") {
+      e.dataTransfer!.dropEffect = "copy";
+    } else {
+      e.dataTransfer!.dropEffect = "none";
+    }
+  };
+
+  const handleDragLeave = (e: DragEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+
+    // only handle drag leave for file drops, not song reordering
+    const info = dragInfo();
+    if (info.type === "song-reorder") {
+      return;
+    }
+
+    // only set drag over to false if leaving the main container
+    const rect = (e.currentTarget as HTMLElement).getBoundingClientRect();
+    const x = e.clientX;
+    const y = e.clientY;
+
+    if (x < rect.left || x > rect.right || y < rect.top || y > rect.bottom) {
+      setIsDragOver(false);
+      setDragInfo({ type: "unknown", itemCount: 0 });
+    }
+  };
+
+  const handleDrop = async (
+    e: DragEvent,
+    options: {
+      selectedPlaylist?: Playlist | null;
+      playlists: Playlist[];
+      onPlaylistCreated?: (playlist: Playlist) => void;
+      onPlaylistSelected?: (playlist: Playlist) => void;
+    }
+  ) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setIsDragOver(false);
+
+    const info = dragInfo();
+    setDragInfo({ type: "unknown", itemCount: 0 });
+
+    // only handle file drops here; ignore song reordering
+    if (info.type === "song-reorder") {
+      return;
+    }
+
+    const files = e.dataTransfer?.files;
+    if (!files) return;
+
+    try {
+      setError(null);
+
+      // check ZIP first
+      const zipFiles = Array.from(files).filter(
+        (file) =>
+          file.type === "application/zip" ||
+          file.name.toLowerCase().endsWith(".zip")
+      );
+
+      if (zipFiles.length > 0) {
+        await handleZipFiles(zipFiles, options);
+        return;
+      }
+
+      const audioFiles = filterAudioFiles(files);
+      if (audioFiles.length === 0) {
+        handleNonAudioFiles(info);
+        return;
+      }
+
+      await handleAudioFiles(audioFiles, options);
+    } catch (err) {
+      log.error("drag.drop", "error handling file drop:", err);
+      setError("Failed to process dropped files");
+      setTimeout(() => setError(null), 5000);
+      throw err;
+    }
+  };
+
+  // processFileImport: the core import logic, callable without a DragEvent.
+  // useful for tests and for wiring to file-input onChange handlers.
+  const processFileImport = async (
+    files: File[],
+    options: {
+      selectedPlaylist?: Playlist | null;
+      playlists: Playlist[];
+      onPlaylistCreated?: (playlist: Playlist) => void;
+      onPlaylistSelected?: (playlist: Playlist) => void;
+    }
+  ) => {
+    const zipFiles = files.filter(
+      (f) =>
+        f.type === "application/zip" || f.name.toLowerCase().endsWith(".zip")
+    );
+    if (zipFiles.length > 0) {
+      await handleZipFiles(zipFiles, options);
+      return;
+    }
+    const audioFiles = filterAudioFiles(files as unknown as FileList);
+    if (audioFiles.length > 0) {
+      await handleAudioFiles(audioFiles, options);
+    }
+  };
+
+  const handleZipFiles = async (
+    zipFiles: File[],
+    options: {
+      playlists: Playlist[];
+      onPlaylistCreated?: (playlist: Playlist) => void;
+      onPlaylistSelected?: (playlist: Playlist) => void;
+    }
+  ) => {
+    for (const zipFile of zipFiles) {
+      const { playlist: playlistData, songs: songsData } =
+        await parsePlaylistZip(zipFile);
+
+      log.debug("handleZipFiles", `parsed zip: title="${playlistData.title}" songs=${songsData.length} existing playlists=${options.playlists.length}`);
+
+      // check if a playlist with the same name and songs already exists
+      const existingPlaylist = options.playlists.find(
+        (p) =>
+          p.title === playlistData.title &&
+          p.songIds.length === songsData.length
+      );
+
+      if (existingPlaylist) {
+        log.debug("handleZipFiles", `dedup match: "${playlistData.title}" already exists`);
+        setError(`Playlist "${playlistData.title}" already exists`);
+        setTimeout(() => setError(null), 3000);
+        continue;
+      }
+
+      const newPlaylist = await createPlaylist({
+        title: playlistData.title,
+        description: playlistData.description,
+      });
+
+      log.debug("handleZipFiles", `created playlist ${newPlaylist.id}, adding ${songsData.length} songs`);
+
+      // and add the songz
+      for (const songData of songsData) {
+        log.debug("handleZipFiles", `adding song "${songData.title}" audioData=${songData.audioData?.byteLength ?? "none"}`);
+        const audioBlob = new Blob([songData.audioData!], {
+          type: songData.mimeType,
+        });
+        const audioFile = new File(
+          [audioBlob],
+          songData.originalFilename || `${songData.artist} - ${songData.title}`,
+          { type: songData.mimeType }
+        );
+
+        await addSongToPlaylist(newPlaylist.id, audioFile, {
+          title: songData.title,
+          artist: songData.artist,
+          album: songData.album,
+          duration: songData.duration,
+          imageData: songData.imageData,
+          imageType: songData.imageType,
+        });
+      }
+
+      // callback about playlist creation and selection
+      options.onPlaylistCreated?.(newPlaylist);
+      options.onPlaylistSelected?.(newPlaylist);
+    }
+  };
+
+  const handleAudioFiles = async (
+    audioFiles: File[],
+    options: {
+      selectedPlaylist?: Playlist | null;
+      onPlaylistCreated?: (playlist: Playlist) => void;
+      onPlaylistSelected?: (playlist: Playlist) => void;
+    }
+  ) => {
+    let targetPlaylist = options.selectedPlaylist;
+
+    // if no playlist is selected, create a new one
+    if (!targetPlaylist) {
+      targetPlaylist = await createPlaylist({
+        title: "new playlist",
+        description: `created from ${audioFiles.length} dropped file${
+          audioFiles.length > 1 ? "z" : ""
+        }`,
+      });
+      options.onPlaylistCreated?.(targetPlaylist);
+      options.onPlaylistSelected?.(targetPlaylist);
+    }
+
+    // and add the songz to the playlist
+    for (const songFile of audioFiles) {
+      const metadata = await extractMetadata(songFile);
+      await addSongToPlaylist(targetPlaylist.id, songFile, metadata);
+    }
+  };
+
+  // contextual error messagez
+  const handleNonAudioFiles = (info: DragInfo) => {
+    if (info.type === "non-audio-files") {
+      setError(
+        "only audio filez and ZIP playlist filez can be added. supported formatz: MP3, WAV, M4A, FLAC, OGG, ZIP"
+      );
+    } else {
+      setError(
+        "no audio filez or ZIP playlist filez found in the dropped itemz!"
+      );
+    }
+    setTimeout(() => setError(null), 3000);
+  };
+
+  // set 'em up the global drag and drop event listenerz
+  onMount(() => {
+    const preventDefaults = (e: DragEvent) => {
+      e.preventDefault();
+      e.stopPropagation();
+    };
+
+    // prevent default drag behaviors on document
+    document.addEventListener("dragenter", preventDefaults);
+    document.addEventListener("dragover", preventDefaults);
+    document.addEventListener("dragleave", preventDefaults);
+    document.addEventListener("drop", preventDefaults);
+
+    onCleanup(() => {
+      document.removeEventListener("dragenter", preventDefaults);
+      document.removeEventListener("dragover", preventDefaults);
+      document.removeEventListener("dragleave", preventDefaults);
+      document.removeEventListener("drop", preventDefaults);
+    });
+  });
+
+  // clear error after some time
+  createEffect(() => {
+    const errorMsg = error();
+    if (errorMsg) {
+      const timeoutId = setTimeout(() => {
+        setError(null);
+      }, 10_000);
+
+      onCleanup(() => clearTimeout(timeoutId));
+    }
+  });
+
+  // handle file drop wrapper (moved from components/index.tsx)
+  const handleFileDrop = async (
+    e: DragEvent,
+    options: {
+      selectedPlaylist?: Playlist | null;
+      playlists: Playlist[];
+      onPlaylistCreated?: (playlist: Playlist) => void;
+      onPlaylistSelected?: (playlist: Playlist) => void;
+    }
+  ) => {
+    try {
+      await handleDrop(e, options);
+    } catch (error) {
+      log.error("drag.drop", "error in handleFileDrop:", error);
+      // ensure drag overlay is cleared, even on error
+      setIsDragOver(false);
+    }
+  };
+
+  return {
+    isDragOver,
+    dragInfo,
+    error,
+
+    // setterz
+    setIsDragOver,
+
+    // actionz
+    handleDragEnter,
+    handleDragOver,
+    handleDragLeave,
+    handleDrop,
+    handleFileDrop,
+    processFileImport,
+
+    // utilz
+    analyzeDragData,
+  };
+}

package/src/hooks/useImageModal.test.ts

@@ -0,0 +1,174 @@
+import { describe, it, expect, vi, beforeEach } from "vitest";
+import type { Playlist, Song } from "../types/playlist.js";
+
+// mock getImageUrlForContext so tests don't need real blob URLs
+vi.mock("../services/imageService.js", () => ({
+  getImageUrlForContext: vi.fn((item: Playlist | Song) => {
+    if ("imageFilePath" in item && item.imageFilePath) return item.imageFilePath;
+    if ("imageData" in item && item.imageData) return "blob:mock-url";
+    if ("thumbnailData" in item && item.thumbnailData) return "blob:mock-thumb";
+    return null;
+  }),
+}));
+
+import { useImageModal } from "./useImageModal.js";
+
+const makePlaylist = (overrides: Partial<Playlist> = {}): Playlist => ({
+  id: "pl-1",
+  title: "test playlist",
+  songIds: [],
+  createdAt: 0,
+  updatedAt: 0,
+  ...overrides,
+});
+
+const makeSong = (overrides: Partial<Song> = {}): Song => ({
+  id: "song-1",
+  title: "test song",
+  artist: "artist",
+  album: "album",
+  duration: 180,
+  position: 0,
+  mimeType: "audio/mpeg",
+  originalFilename: "test.mp3",
+  playlistId: "pl-1",
+  createdAt: 0,
+  updatedAt: 0,
+  ...overrides,
+});
+
+describe("useImageModal", () => {
+  let modal: ReturnType<typeof useImageModal>;
+
+  beforeEach(() => {
+    modal = useImageModal();
+  });
+
+  describe("generateImageList / openImageModal (standalone mode - imageFilePath only)", () => {
+    it("includes playlist cover when only imageFilePath is set (no buffer data)", () => {
+      const playlist = makePlaylist({ imageFilePath: "data/playlist-cover.jpg", imageType: "image/jpeg" });
+      modal.openImageModal(playlist, []);
+      expect(modal.showImageModal()).toBe(true);
+      expect(modal.getImageCount()).toBe(1);
+      expect(modal.getCurrentImageMetadata()?.type).toBe("playlist");
+      expect(modal.getCurrentImageUrl()).toBe("data/playlist-cover.jpg");
+    });
+
+    it("includes playlist cover when imageFilePath present but imageType absent", () => {
+      const playlist = makePlaylist({ imageFilePath: "data/playlist-cover.jpg" });
+      modal.openImageModal(playlist, []);
+      expect(modal.showImageModal()).toBe(true);
+      expect(modal.getImageCount()).toBe(1);
+    });
+
+    it("includes song images when only imageFilePath is set (no buffer data)", () => {
+      const playlist = makePlaylist();
+      const song = makeSong({ imageFilePath: "data/01-track-cover.jpg", imageType: "image/jpeg" });
+      modal.openImageModal(playlist, [song]);
+      expect(modal.getImageCount()).toBe(1);
+      expect(modal.getCurrentImageMetadata()?.type).toBe("song");
+      expect(modal.getCurrentImageUrl()).toBe("data/01-track-cover.jpg");
+    });
+
+    it("includes songs with imageFilePath but no imageType", () => {
+      const playlist = makePlaylist();
+      const song = makeSong({ imageFilePath: "data/cover.png" });
+      modal.openImageModal(playlist, [song]);
+      expect(modal.getImageCount()).toBe(1);
+    });
+
+    it("collects all songs with imageFilePath into the carousel", () => {
+      const playlist = makePlaylist({ imageFilePath: "data/playlist-cover.jpg" });
+      const songs = [
+        makeSong({ id: "s1", imageFilePath: "data/s1-cover.jpg" }),
+        makeSong({ id: "s2", imageFilePath: "data/s2-cover.jpg" }),
+        makeSong({ id: "s3" }), // no image - should be excluded
+      ];
+      modal.openImageModal(playlist, songs);
+      // playlist cover + 2 songs with images
+      expect(modal.getImageCount()).toBe(3);
+    });
+  });
+
+  describe("generateImageList / openImageModal (in-memory buffer mode)", () => {
+    it("includes playlist cover when imageData buffer is present", () => {
+      const playlist = makePlaylist({
+        imageType: "image/jpeg",
+        imageData: new ArrayBuffer(8),
+      });
+      modal.openImageModal(playlist, []);
+      expect(modal.getImageCount()).toBe(1);
+      expect(modal.getCurrentImageMetadata()?.type).toBe("playlist");
+    });
+
+    it("includes song when imageData buffer is present", () => {
+      const playlist = makePlaylist();
+      const song = makeSong({ imageType: "image/jpeg", imageData: new ArrayBuffer(8) });
+      modal.openImageModal(playlist, [song]);
+      expect(modal.getImageCount()).toBe(1);
+      expect(modal.getCurrentImageMetadata()?.type).toBe("song");
+    });
+
+    it("excludes song with no image data and no imageFilePath", () => {
+      const playlist = makePlaylist();
+      const song = makeSong(); // no image fields
+      modal.openImageModal(playlist, [song]);
+      expect(modal.showImageModal()).toBe(false);
+      expect(modal.getImageCount()).toBe(0);
+    });
+  });
+
+  describe("openImageModal does not open when no images exist", () => {
+    it("does not open when playlist has no image and songs have no images", () => {
+      const playlist = makePlaylist();
+      modal.openImageModal(playlist, [makeSong()]);
+      expect(modal.showImageModal()).toBe(false);
+    });
+
+    it("does not open with null playlist and no songs", () => {
+      modal.openImageModal(null, []);
+      expect(modal.showImageModal()).toBe(false);
+    });
+  });
+
+  describe("navigation", () => {
+    beforeEach(() => {
+      const playlist = makePlaylist({ imageFilePath: "data/playlist-cover.jpg" });
+      const songs = [
+        makeSong({ id: "s1", imageFilePath: "data/s1-cover.jpg" }),
+        makeSong({ id: "s2", imageFilePath: "data/s2-cover.jpg" }),
+      ];
+      modal.openImageModal(playlist, songs);
+    });
+
+    it("starts at requested index", () => {
+      const playlist = makePlaylist({ imageFilePath: "data/playlist-cover.jpg" });
+      modal.openImageModal(playlist, []);
+      expect(modal.getCurrentImageMetadata()?.type).toBe("playlist");
+    });
+
+    it("handleNextImage advances index", () => {
+      expect(modal.getCurrentImageMetadata()?.id).toBe("pl-1");
+      modal.handleNextImage();
+      expect(modal.getCurrentImageMetadata()?.id).toBe("s1");
+    });
+
+    it("handleNextImage wraps around to first", () => {
+      modal.handleNextImage();
+      modal.handleNextImage();
+      modal.handleNextImage(); // wraps
+      expect(modal.getCurrentImageMetadata()?.id).toBe("pl-1");
+    });
+
+    it("handlePrevImage wraps to last image", () => {
+      modal.handlePrevImage();
+      expect(modal.getCurrentImageMetadata()?.id).toBe("s2");
+    });
+
+    it("closeImageModal clears state", () => {
+      modal.closeImageModal();
+      expect(modal.showImageModal()).toBe(false);
+      expect(modal.getImageCount()).toBe(0);
+    });
+  });
+});