@freqhole/playlistz 0.0.1

package/src/services/offlineService.ts

@@ -0,0 +1,382 @@
+import { createSignal } from "solid-js";
+import type { Playlist } from "../types/playlist.js";
+
+// Offline state signals
+const [isOnline, setIsOnline] = createSignal(navigator.onLine);
+const [serviceWorkerReady, setServiceWorkerReady] = createSignal(false);
+const [persistentStorageGranted, setPersistentStorageGranted] =
+  createSignal(false);
+
+// Export signals for components to use
+export { isOnline, serviceWorkerReady, persistentStorageGranted };
+
+const CACHE_NAME = "playlistz-cache-v1";
+
+/**
+ * Request persistent storage
+ */
+async function requestPersistentStorage(): Promise<boolean> {
+  try {
+    if ("storage" in navigator && "persist" in navigator.storage) {
+      const granted = await navigator.storage.persist();
+
+      if (granted) {
+        setPersistentStorageGranted(true);
+      } else {
+        setPersistentStorageGranted(false);
+      }
+
+      return granted;
+    } else {
+      return false;
+    }
+  } catch (error) {
+    console.error("Error requesting persistent storage:", error);
+    return false;
+  }
+}
+
+/**
+ * Generate and register PWA manifest - simplified approach
+ */
+function generatePWAManifest(
+  playlistTitle?: string,
+  playlistImagePath?: string
+): void {
+  const appName = playlistTitle || "playlistz";
+
+  // use playlist cover image if available, otherwise fallback to svg
+  let iconSrc;
+  let iconType;
+  if (playlistImagePath) {
+    iconSrc = playlistImagePath;
+    // determine type from file extension
+    if (playlistImagePath.endsWith(".png")) {
+      iconType = "image/png";
+    } else if (playlistImagePath.endsWith(".webp")) {
+      iconType = "image/webp";
+    } else {
+      iconType = "image/jpeg"; // default to jpeg
+    }
+  } else {
+    iconSrc = `data:image/svg+xml,${encodeURIComponent('<svg xmlns="http://www.w3.org/2000/svg" width="192" height="192" viewBox="0 0 192 192"><rect width="192" height="192" fill="#000000"/><text x="96" y="125" text-anchor="middle" font-size="100" font-family="Arial,sans-serif" font-weight="bold" fill="magenta">z</text></svg>')}`;
+    iconType = "image/svg+xml";
+  }
+
+  // Create a super simple manifest object
+  const manifest = {
+    name: appName,
+    short_name: appName.length > 12 ? appName.substring(0, 12) : appName,
+    description: "Offline music playlist manager",
+    start_url: "./",
+    display: "standalone",
+    background_color: "#000000",
+    theme_color: "#000000",
+    icons: [
+      {
+        src: iconSrc,
+        sizes: "192x192",
+        type: iconType,
+      },
+    ],
+  };
+
+  // Clear any existing manifest and apple-touch-icons for iOS refresh
+  const existingLink = document.querySelector('link[rel="manifest"]');
+  if (existingLink) {
+    existingLink.remove();
+  }
+
+  // Force iOS to refresh by removing all apple-touch-icons
+  const existingAppleIcons = document.querySelectorAll(
+    'link[rel="apple-touch-icon"]'
+  );
+  existingAppleIcons.forEach((icon) => icon.remove());
+
+  // Create new manifest with cache busting
+  const manifestJSON = JSON.stringify(manifest);
+  const manifestBlob = new Blob([manifestJSON], {
+    type: "application/manifest+json",
+  });
+  const manifestURL = URL.createObjectURL(manifestBlob);
+
+  const link = document.createElement("link");
+  link.rel = "manifest";
+  // note: blob urls must not carry query strings - browsers treat the whole
+  // string as the lookup key and fail with ERR_FILE_NOT_FOUND
+  link.href = manifestURL;
+  document.head.appendChild(link);
+
+  // Add iOS meta tags
+  const metaTags = [
+    { name: "apple-mobile-web-app-capable", content: "yes" },
+    {
+      name: "apple-mobile-web-app-status-bar-style",
+      content: "black-translucent",
+    },
+    { name: "apple-mobile-web-app-title", content: appName },
+    { name: "theme-color", content: "#000000" },
+  ];
+
+  metaTags.forEach(({ name, content }) => {
+    let meta = document.querySelector(`meta[name="${name}"]`);
+    if (!meta) {
+      meta = document.createElement("meta");
+      meta.setAttribute("name", name);
+      document.head.appendChild(meta);
+    }
+    meta.setAttribute("content", content);
+  });
+
+  // Add fresh apple-touch-icons for iOS (multiple sizes with cache busting)
+  const iconSizes = [
+    "57x57",
+    "60x60",
+    "72x72",
+    "76x76",
+    "114x114",
+    "120x120",
+    "144x144",
+    "152x152",
+    "180x180",
+  ];
+  // use playlist image for apple touch icons if available
+  const appleIconSrc =
+    playlistImagePath ||
+    `data:image/svg+xml,${encodeURIComponent('<svg xmlns="http://www.w3.org/2000/svg" width="180" height="180" viewBox="0 0 180 180"><rect width="180" height="180" fill="#000000"/><text x="90" y="117" text-anchor="middle" font-size="94" font-family="Arial,sans-serif" font-weight="bold" fill="magenta">z</text></svg>')}`;
+
+  iconSizes.forEach((size) => {
+    const iconLink = document.createElement("link");
+    iconLink.rel = "apple-touch-icon";
+    iconLink.sizes = size;
+    iconLink.href = `${appleIconSrc}#${Date.now()}`;
+    document.head.appendChild(iconLink);
+  });
+
+  // Default apple-touch-icon
+  const defaultIcon = document.createElement("link");
+  defaultIcon.rel = "apple-touch-icon";
+  defaultIcon.href = `${appleIconSrc}#${Date.now()}`;
+  document.head.appendChild(defaultIcon);
+}
+
+/**
+ * helper function to generate playlist image path for pwa manifest
+ */
+function getPlaylistImagePath(playlist: Playlist): string | undefined {
+  if (!playlist.imageData || !playlist.imageType) {
+    return undefined;
+  }
+
+  // determine file extension from mime type
+  let extension = ".jpg"; // default
+  if (playlist.imageType === "image/png") {
+    extension = ".png";
+  } else if (playlist.imageType === "image/webp") {
+    extension = ".webp";
+  } else if (playlist.imageType === "image/gif") {
+    extension = ".gif";
+  }
+
+  return `/data/playlist-cover${extension}`;
+}
+
+/**
+ * Update PWA manifest with new playlist title
+ */
+export function updatePWAManifest(
+  playlistTitle: string,
+  playlist?: Playlist
+): void {
+  console.log("[trace] updatePWAManifest", playlistTitle);
+  const imagePath = playlist ? getPlaylistImagePath(playlist) : undefined;
+  generatePWAManifest(playlistTitle, imagePath);
+}
+
+/**
+ * Register service worker
+ */
+async function registerServiceWorker(): Promise<boolean> {
+  try {
+    if (!("serviceWorker" in navigator)) {
+      return false;
+    }
+
+    const swPath = "/sw.js";
+    const registration = await navigator.serviceWorker.register(swPath);
+    await navigator.serviceWorker.ready;
+
+    setServiceWorkerReady(true);
+
+    // Listen for service worker messages
+    navigator.serviceWorker.addEventListener("message", (event) => {
+      const { type } = event.data;
+      if (type === "SW_READY") {
+        cacheCurrentPage();
+      }
+    });
+
+    // Check if SW is already controlling and cache page if so
+    if (navigator.serviceWorker.controller) {
+      cacheCurrentPage();
+    } else {
+      const newWorker =
+        registration.active || registration.installing || registration.waiting;
+      if (newWorker) {
+        newWorker.postMessage({ type: "CLAIM_CLIENTS" });
+      }
+    }
+
+    return true;
+  } catch (error) {
+    console.warn("service worker registration failed:", error);
+    return false;
+  }
+}
+
+/**
+ * Cache the current page for offline access
+ */
+async function cacheCurrentPage(): Promise<void> {
+  try {
+    const cache = await caches.open(CACHE_NAME);
+    const currentUrl = window.location.href;
+
+    const cached = await cache.match(currentUrl);
+    if (!cached) {
+      await cache.add(currentUrl);
+    }
+  } catch (error) {
+    console.warn("⚠️ Failed to auto-cache page:", error);
+  }
+}
+
+/**
+ * Cache an audio file for offline access
+ */
+export async function cacheAudioFile(
+  url: string,
+  title: string
+): Promise<void> {
+  try {
+    if (!("caches" in window)) {
+      throw new Error("Cache API not supported");
+    }
+
+    if (window.location.protocol === "file:") {
+      return;
+    }
+
+    if (navigator.serviceWorker && navigator.serviceWorker.controller) {
+      navigator.serviceWorker.controller.postMessage({
+        type: "CACHE_URL",
+        data: { url },
+      });
+      return;
+    }
+
+    const cache = await caches.open(CACHE_NAME);
+    await cache.add(url);
+  } catch (error) {
+    console.error(`Failed to cache audio file ${title}:`, error);
+    throw error;
+  }
+}
+
+/**
+ * Initialize offline support
+ */
+export async function initializeOfflineSupport(
+  playlistTitle?: string,
+  playlist?: Playlist
+): Promise<void> {
+  const updateOnlineStatus = () => {
+    setIsOnline(navigator.onLine);
+  };
+
+  window.addEventListener("online", updateOnlineStatus);
+  window.addEventListener("offline", updateOnlineStatus);
+
+  const imagePath = playlist ? getPlaylistImagePath(playlist) : undefined;
+  generatePWAManifest(playlistTitle, imagePath);
+  await requestPersistentStorage();
+  await registerServiceWorker();
+}
+
+/**
+ * Get storage usage information
+ */
+export async function getStorageInfo(): Promise<{
+  quota?: number;
+  usage?: number;
+  usagePercentage?: number;
+  persistent?: boolean;
+  error?: string;
+  quotaFormatted?: string;
+  usageFormatted?: string;
+  usagePercent?: number;
+}> {
+  try {
+    const info: {
+      quota?: number;
+      usage?: number;
+      usagePercentage?: number;
+      persistent?: boolean;
+      error?: string;
+      quotaFormatted?: string;
+      usageFormatted?: string;
+      usagePercent?: number;
+    } = {};
+
+    if ("storage" in navigator && navigator.storage) {
+      if ("estimate" in navigator.storage) {
+        const estimate = await navigator.storage.estimate();
+        info.quota = estimate.quota;
+        info.usage = estimate.usage;
+
+        if (estimate.quota) {
+          info.quotaFormatted =
+            Math.round(estimate.quota / 1024 / 1024) + " MB";
+        }
+
+        if (estimate.usage) {
+          info.usageFormatted =
+            Math.round(estimate.usage / 1024 / 1024) + " MB";
+        }
+
+        if (estimate.quota && estimate.usage) {
+          info.usagePercent = Math.round(
+            (estimate.usage / estimate.quota) * 100
+          );
+        }
+      }
+
+      if ("persisted" in navigator.storage) {
+        info.persistent = await navigator.storage.persisted();
+      }
+    }
+
+    return info;
+  } catch (error) {
+    console.error("Error getting storage info:", error);
+    return { error: error instanceof Error ? error.message : String(error) };
+  }
+}
+
+/**
+ * Check if a URL is cached
+ */
+export async function isUrlCached(url: string): Promise<boolean> {
+  try {
+    if (!("caches" in window)) {
+      return false;
+    }
+
+    const cache = await caches.open(CACHE_NAME);
+    const response = await cache.match(url);
+    return !!response;
+  } catch (error) {
+    console.error("Error checking cache:", error);
+    return false;
+  }
+}

package/src/services/p2pService.test.ts

@@ -0,0 +1,305 @@
+import { describe, it, expect, beforeEach, afterEach, vi } from "vitest";
+import type { P2PIdentity } from "@freqhole/api-client/storage";
+
+// --- mocks (hoisted before module imports) ---
+
+const {
+  mockResolveIdentity,
+  mockPersistIdentity,
+  mockAcquireLeadership,
+  mockCreateWithAlpns,
+} = vi.hoisted(() => ({
+  mockResolveIdentity: vi.fn(),
+  mockPersistIdentity: vi.fn(),
+  mockAcquireLeadership: vi.fn(),
+  mockCreateWithAlpns: vi.fn(),
+}));
+
+vi.mock("@freqhole/api-client/storage", () => ({
+  resolveIdentity: mockResolveIdentity,
+  persistIdentity: mockPersistIdentity,
+  acquireNodeLeadership: mockAcquireLeadership,
+}));
+
+vi.mock("@freqhole/midden", () => ({
+  MiddenNode: {
+    create_with_alpns: mockCreateWithAlpns,
+  },
+}));
+
+// automerge types are type-only imports in the service; no runtime mock needed.
+// playlistz constants are plain strings - no mock needed either.
+
+import {
+  startP2P,
+  stopP2P,
+  getNode,
+  getIdentity,
+  isLeader,
+  onLeadershipChange,
+  onIdentityChange,
+  getAdapterOptions,
+  _resetForTests,
+} from "./p2pService.js";
+
+// --- test helpers ---
+
+const fakeIdentity = (overrides: Partial<P2PIdentity> = {}): P2PIdentity => ({
+  id: "p2p_identity",
+  secret_key: new Uint8Array(32).fill(7),
+  node_id: "fake-node-id",
+  created_at: 1000,
+  ...overrides,
+});
+
+const fakeMockNode = {
+  node_id: vi.fn().mockReturnValue("real-node-id"),
+  open_bi: vi.fn(),
+  accept: vi.fn().mockResolvedValue(null),
+};
+
+/** simulate the leadership callback being called (i.e. this tab won the lock). */
+async function triggerLeader(): Promise<void> {
+  const call = mockAcquireLeadership.mock.calls[0];
+  if (!call) throw new Error("acquireNodeLeadership was not called");
+  await call[0].onAcquired();
+}
+
+// --- setup / teardown ---
+
+beforeEach(() => {
+  _resetForTests();
+  vi.clearAllMocks();
+
+  // default: acquireLeadership never calls onAcquired (another tab holds the lock)
+  mockAcquireLeadership.mockReturnValue(() => {});
+
+  // default: persistIdentity succeeds silently
+  mockPersistIdentity.mockResolvedValue(undefined);
+});
+
+afterEach(() => {
+  stopP2P();
+});
+
+// --- identity fallback chain ---
+
+describe("identity fallback chain", () => {
+  it("generates a new identity when none exists anywhere", async () => {
+    mockResolveIdentity.mockResolvedValue(null);
+
+    await startP2P();
+
+    const identity = getIdentity();
+    expect(identity).not.toBeNull();
+    expect(identity!.id).toBe("p2p_identity");
+    expect(identity!.secret_key).toBeInstanceOf(Uint8Array);
+    expect(identity!.secret_key.length).toBe(32);
+    // node_id is empty until midden boots
+    expect(identity!.node_id).toBe("");
+    expect(identity!.created_at).toBeGreaterThan(0);
+    // new identity should be persisted
+    expect(mockPersistIdentity).toHaveBeenCalledOnce();
+  });
+
+  it("uses existing identity from resolveIdentity when one exists", async () => {
+    const existing = fakeIdentity({ node_id: "stored-node-id" });
+    mockResolveIdentity.mockResolvedValue(existing);
+
+    await startP2P();
+
+    const identity = getIdentity();
+    expect(identity).toEqual(existing);
+    // should not generate or persist a new identity
+    expect(mockPersistIdentity).not.toHaveBeenCalled();
+  });
+
+  it("notifies identity listeners after resolution", async () => {
+    const existing = fakeIdentity();
+    mockResolveIdentity.mockResolvedValue(existing);
+
+    const listener = vi.fn();
+    onIdentityChange(listener);
+
+    await startP2P();
+
+    expect(listener).toHaveBeenCalledWith(existing);
+  });
+
+  it("is idempotent: calling startP2P twice has no effect the second time", async () => {
+    mockResolveIdentity.mockResolvedValue(fakeIdentity());
+
+    await startP2P();
+    await startP2P();
+
+    // resolveIdentity called exactly once
+    expect(mockResolveIdentity).toHaveBeenCalledOnce();
+  });
+
+  it("handles identity resolution failure gracefully", async () => {
+    mockResolveIdentity.mockRejectedValue(new Error("idb exploded"));
+
+    // should not throw
+    await expect(startP2P()).resolves.toBeUndefined();
+    expect(getIdentity()).toBeNull();
+  });
+});
+
+// --- leadership gating ---
+
+describe("leadership gating", () => {
+  it("does not boot midden when this tab is not the leader", async () => {
+    mockResolveIdentity.mockResolvedValue(fakeIdentity());
+    // acquireLeadership never calls onAcquired (someone else holds the lock)
+    mockAcquireLeadership.mockReturnValue(() => {});
+
+    await startP2P();
+
+    expect(getNode()).toBeNull();
+    expect(isLeader()).toBe(false);
+  });
+
+  it("boots midden and exposes the node when this tab wins the lock", async () => {
+    mockResolveIdentity.mockResolvedValue(fakeIdentity({ node_id: "" }));
+    mockCreateWithAlpns.mockResolvedValue(fakeMockNode);
+
+    await startP2P();
+    await triggerLeader();
+
+    expect(isLeader()).toBe(true);
+    expect(getNode()).toBe(fakeMockNode);
+  });
+
+  it("updates node_id in the stored identity after midden boots", async () => {
+    mockResolveIdentity.mockResolvedValue(fakeIdentity({ node_id: "old-id" }));
+    mockCreateWithAlpns.mockResolvedValue(fakeMockNode);
+
+    await startP2P();
+    await triggerLeader();
+
+    // real node_id from midden should be persisted
+    const updatedIdentity = getIdentity();
+    expect(updatedIdentity!.node_id).toBe("real-node-id");
+    expect(mockPersistIdentity).toHaveBeenCalledWith(
+      expect.objectContaining({ node_id: "real-node-id" }),
+      expect.anything()
+    );
+  });
+
+  it("notifies leadership listeners when acquiring leadership", async () => {
+    mockResolveIdentity.mockResolvedValue(fakeIdentity());
+    mockCreateWithAlpns.mockResolvedValue(fakeMockNode);
+
+    const listener = vi.fn();
+    onLeadershipChange(listener);
+    // called immediately with current state (false)
+    expect(listener).toHaveBeenCalledWith(false);
+    listener.mockClear();
+
+    await startP2P();
+    await triggerLeader();
+
+    expect(listener).toHaveBeenCalledWith(true);
+  });
+
+  it("releases leadership and clears node on stopP2P", async () => {
+    mockResolveIdentity.mockResolvedValue(fakeIdentity());
+    mockCreateWithAlpns.mockResolvedValue(fakeMockNode);
+
+    await startP2P();
+    await triggerLeader();
+    expect(isLeader()).toBe(true);
+
+    stopP2P();
+
+    expect(isLeader()).toBe(false);
+    expect(getNode()).toBeNull();
+  });
+});
+
+// --- graceful degradation when wasm is unavailable ---
+
+describe("graceful degradation when wasm import fails", () => {
+  it("does not throw when midden import fails", async () => {
+    mockResolveIdentity.mockResolvedValue(fakeIdentity());
+    mockCreateWithAlpns.mockRejectedValue(new Error("wasm not available"));
+
+    await startP2P();
+    await triggerLeader();
+
+    // identity is still set; node is null (midden boot failed)
+    expect(getIdentity()).not.toBeNull();
+    expect(getNode()).toBeNull();
+    // still became leader (lock acquired) even though midden failed
+    expect(isLeader()).toBe(true);
+  });
+
+  it("does not throw when midden module is missing entirely", async () => {
+    mockResolveIdentity.mockResolvedValue(fakeIdentity());
+    // simulate dynamic import("@freqhole/midden") rejecting with module-not-found
+    mockCreateWithAlpns.mockImplementation(() => {
+      throw new TypeError("cannot find module 'midden'");
+    });
+
+    await startP2P();
+    await triggerLeader();
+
+    expect(getNode()).toBeNull();
+    expect(getIdentity()).not.toBeNull();
+  });
+});
+
+// --- adapter options ---
+
+describe("getAdapterOptions", () => {
+  it("getNode rejects when node is not available", async () => {
+    mockResolveIdentity.mockResolvedValue(fakeIdentity());
+
+    await startP2P();
+    const opts = getAdapterOptions();
+
+    await expect(opts.getNode()).rejects.toThrow(
+      "p2p: midden node is not available"
+    );
+  });
+
+  it("getIdentity returns the current identity", async () => {
+    const id = fakeIdentity();
+    mockResolveIdentity.mockResolvedValue(id);
+
+    await startP2P();
+    const opts = getAdapterOptions();
+
+    await expect(opts.getIdentity()).resolves.toEqual(id);
+  });
+
+  it("getNode resolves the midden node after boot", async () => {
+    mockResolveIdentity.mockResolvedValue(fakeIdentity());
+    mockCreateWithAlpns.mockResolvedValue(fakeMockNode);
+
+    await startP2P();
+    await triggerLeader();
+
+    const opts = getAdapterOptions();
+    await expect(opts.getNode()).resolves.toBe(fakeMockNode);
+  });
+
+  it("onIdentityChange subscribes to identity updates", async () => {
+    const id = fakeIdentity();
+    mockResolveIdentity.mockResolvedValue(id);
+
+    const opts = getAdapterOptions();
+    const listener = vi.fn();
+    const unsub = opts.onIdentityChange!(listener);
+
+    await startP2P();
+
+    expect(listener).toHaveBeenCalledWith(id);
+    unsub();
+  });
+
+  it("syncAlpn is the automerge ALPN", () => {
+    const opts = getAdapterOptions();
+    expect(opts.syncAlpn).toBe("iroh/automerge-repo/1");
+  });
+});