Merge pull request #42 from NuclearPlayer/feat/playlist-providers

Playlist providers

Author: nukeop

packages/i18n/src/locales/en_US.json

@@ -66,7 +66,7 @@
     "play": "Play",
     "addToQueue": "Add to queue",
     "saveLocally": "Save locally",
-    "readOnlyBadge": "External playlist",
+    "readOnlyBadge": "{{source}}",
     "readOnlyTooltip": "This playlist is from {{source}} and is read-only. Save a local copy to edit it.",
     "trackCount": "{{count}} track",
     "trackCount_other": "{{count}} tracks",
@@ -79,7 +79,12 @@
     "exportSuccess": "Playlist exported",
     "exportError": "Failed to export playlist",
     "importSuccess": "Playlist imported",
-    "importError": "Failed to import playlist"
+    "importError": "Failed to import playlist",
+    "importUrl": "Import from URL",
+    "importUrlTitle": "Import playlist from URL",
+    "importUrlPlaceholder": "Paste a playlist URL...",
+    "importUrlNoProvider": "No plugin can handle this URL. Install a plugin that supports this service.",
+    "importUrlImporting": "Importing..."
   },
   "search": {
     "title": "Search",

packages/player/src/integration-tests/StreamResolution.test-wrapper.tsx

@@ -41,6 +41,31 @@ export const StreamResolutionWrapper = {
     await waitFor(() => {
       expect(useSoundStore.getState().src).not.toBeNull();
     });
+
+    const audio = document.querySelector('audio');
+    if (audio) {
+      audio.dispatchEvent(new Event('canplay'));
+    }
+
+    await waitFor(() => {
+      const item = useQueueStore.getState().getCurrentItem();
+      expect(item?.status).toBe('success');
+    });
+  },
+
+  simulateCanPlay() {
+    const audio = document.querySelector('audio');
+    if (audio) {
+      audio.dispatchEvent(new Event('canplay'));
+    }
+  },
+
+  async waitForSuccess() {
+    this.simulateCanPlay();
+    await waitFor(() => {
+      const item = useQueueStore.getState().getCurrentItem();
+      expect(item?.status).toBe('success');
+    });
   },
 
   async waitForError() {

packages/player/src/integration-tests/playlist-export-import.test.tsx

@@ -65,8 +65,7 @@ describe('Playlist export → import round trip', () => {
     (fs.readTextFile as Mock).mockResolvedValueOnce(capturedFileContent);
 
     await PlaylistsWrapper.mount();
-    await PlaylistsWrapper.importButton.click();
-    await PlaylistsWrapper.importJsonOption.click();
+    await PlaylistsWrapper.import.fromJson.click();
 
     await vi.waitFor(() => {
       expect(PlaylistsWrapper.cards).toHaveLength(1);

packages/player/src/integration-tests/stream-resolution.test.tsx

@@ -107,6 +107,12 @@ describe('Stream Resolution Integration', () => {
 
       resolveStream!(createMockStream('yt-1'));
 
+      await waitFor(() => {
+        expect(useSoundStore.getState().src).not.toBeNull();
+      });
+
+      StreamResolutionWrapper.simulateCanPlay();
+
       await waitFor(() => {
         const item = StreamResolutionWrapper.getCurrentQueueItem();
         expect(item?.status).toBe('success');

packages/player/src/routeTree.gen.ts

@@ -17,6 +17,7 @@ import { Route as PlaylistsPlaylistIdRouteImport } from './routes/playlists/$pla
 import { Route as FavoritesTracksRouteImport } from './routes/favorites/tracks'
 import { Route as FavoritesArtistsRouteImport } from './routes/favorites/artists'
 import { Route as FavoritesAlbumsRouteImport } from './routes/favorites/albums'
+import { Route as PlaylistsImportProviderIdRouteImport } from './routes/playlists/import.$providerId'
 import { Route as ArtistProviderIdArtistIdRouteImport } from './routes/artist/$providerId/$artistId'
 import { Route as AlbumProviderIdAlbumIdRouteImport } from './routes/album/$providerId/$albumId'
 
@@ -60,6 +61,12 @@ const FavoritesAlbumsRoute = FavoritesAlbumsRouteImport.update({
   path: '/favorites/albums',
   getParentRoute: () => rootRouteImport,
 } as any)
+const PlaylistsImportProviderIdRoute =
+  PlaylistsImportProviderIdRouteImport.update({
+    id: '/playlists/import/$providerId',
+    path: '/playlists/import/$providerId',
+    getParentRoute: () => rootRouteImport,
+  } as any)
 const ArtistProviderIdArtistIdRoute =
   ArtistProviderIdArtistIdRouteImport.update({
     id: '/artist/$providerId/$artistId',
@@ -83,6 +90,7 @@ export interface FileRoutesByFullPath {
   '/playlists': typeof PlaylistsIndexRoute
   '/album/$providerId/$albumId': typeof AlbumProviderIdAlbumIdRoute
   '/artist/$providerId/$artistId': typeof ArtistProviderIdArtistIdRoute
+  '/playlists/import/$providerId': typeof PlaylistsImportProviderIdRoute
 }
 export interface FileRoutesByTo {
   '/': typeof IndexRoute
@@ -95,6 +103,7 @@ export interface FileRoutesByTo {
   '/playlists': typeof PlaylistsIndexRoute
   '/album/$providerId/$albumId': typeof AlbumProviderIdAlbumIdRoute
   '/artist/$providerId/$artistId': typeof ArtistProviderIdArtistIdRoute
+  '/playlists/import/$providerId': typeof PlaylistsImportProviderIdRoute
 }
 export interface FileRoutesById {
   __root__: typeof rootRouteImport
@@ -108,6 +117,7 @@ export interface FileRoutesById {
   '/playlists/': typeof PlaylistsIndexRoute
   '/album/$providerId/$albumId': typeof AlbumProviderIdAlbumIdRoute
   '/artist/$providerId/$artistId': typeof ArtistProviderIdArtistIdRoute
+  '/playlists/import/$providerId': typeof PlaylistsImportProviderIdRoute
 }
 export interface FileRouteTypes {
   fileRoutesByFullPath: FileRoutesByFullPath
@@ -122,6 +132,7 @@ export interface FileRouteTypes {
     | '/playlists'
     | '/album/$providerId/$albumId'
     | '/artist/$providerId/$artistId'
+    | '/playlists/import/$providerId'
   fileRoutesByTo: FileRoutesByTo
   to:
     | '/'
@@ -134,6 +145,7 @@ export interface FileRouteTypes {
     | '/playlists'
     | '/album/$providerId/$albumId'
     | '/artist/$providerId/$artistId'
+    | '/playlists/import/$providerId'
   id:
     | '__root__'
     | '/'
@@ -146,6 +158,7 @@ export interface FileRouteTypes {
     | '/playlists/'
     | '/album/$providerId/$albumId'
     | '/artist/$providerId/$artistId'
+    | '/playlists/import/$providerId'
   fileRoutesById: FileRoutesById
 }
 export interface RootRouteChildren {
@@ -159,6 +172,7 @@ export interface RootRouteChildren {
   PlaylistsIndexRoute: typeof PlaylistsIndexRoute
   AlbumProviderIdAlbumIdRoute: typeof AlbumProviderIdAlbumIdRoute
   ArtistProviderIdArtistIdRoute: typeof ArtistProviderIdArtistIdRoute
+  PlaylistsImportProviderIdRoute: typeof PlaylistsImportProviderIdRoute
 }
 
 declare module '@tanstack/react-router' {
@@ -219,6 +233,13 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof FavoritesAlbumsRouteImport
       parentRoute: typeof rootRouteImport
     }
+    '/playlists/import/$providerId': {
+      id: '/playlists/import/$providerId'
+      path: '/playlists/import/$providerId'
+      fullPath: '/playlists/import/$providerId'
+      preLoaderRoute: typeof PlaylistsImportProviderIdRouteImport
+      parentRoute: typeof rootRouteImport
+    }
     '/artist/$providerId/$artistId': {
       id: '/artist/$providerId/$artistId'
       path: '/artist/$providerId/$artistId'
@@ -247,6 +268,7 @@ const rootRouteChildren: RootRouteChildren = {
   PlaylistsIndexRoute: PlaylistsIndexRoute,
   AlbumProviderIdAlbumIdRoute: AlbumProviderIdAlbumIdRoute,
   ArtistProviderIdArtistIdRoute: ArtistProviderIdArtistIdRoute,
+  PlaylistsImportProviderIdRoute: PlaylistsImportProviderIdRoute,
 }
 export const routeTree = rootRouteImport
   ._addFileChildren(rootRouteChildren)

packages/player/src/routes/playlists/import.$providerId.tsx

@@ -0,0 +1,11 @@
+import { createFileRoute } from '@tanstack/react-router';
+import { z } from 'zod';
+
+import { PlaylistImport } from '../../views/PlaylistImport/PlaylistImport';
+
+export const Route = createFileRoute('/playlists/import/$providerId')({
+  component: PlaylistImport,
+  validateSearch: z.object({
+    url: z.string(),
+  }),
+});

packages/player/src/test/builders/PlaylistBuilder.ts

@@ -83,6 +83,13 @@ export class PlaylistBuilder {
     return this;
   }
 
+  withArtwork(url: string): this {
+    this.playlist.artwork = {
+      items: [{ url }],
+    };
+    return this;
+  }
+
   build(): Playlist {
     return cloneDeep(this.playlist);
   }

packages/player/src/test/builders/PlaylistProviderBuilder.ts

@@ -0,0 +1,59 @@
+import type { Playlist } from '@nuclearplayer/model';
+import type { PlaylistProvider } from '@nuclearplayer/plugin-sdk';
+
+export class PlaylistProviderBuilder {
+  private provider: PlaylistProvider;
+
+  constructor() {
+    this.provider = {
+      id: 'test-playlist-provider',
+      kind: 'playlists',
+      name: 'Test Playlist Provider',
+      matchesUrl: () => false,
+      fetchPlaylistByUrl: async () => ({
+        id: 'fetched-playlist',
+        name: 'Fetched Playlist',
+        createdAtIso: new Date().toISOString(),
+        lastModifiedIso: new Date().toISOString(),
+        isReadOnly: false,
+        items: [],
+      }),
+    };
+  }
+
+  withId(id: string): this {
+    this.provider.id = id;
+    return this;
+  }
+
+  withName(name: string): this {
+    this.provider.name = name;
+    return this;
+  }
+
+  withMatchesUrl(matchesUrl: PlaylistProvider['matchesUrl']): this {
+    this.provider.matchesUrl = matchesUrl;
+    return this;
+  }
+
+  withFetchPlaylistByUrl(
+    fetchPlaylistByUrl: PlaylistProvider['fetchPlaylistByUrl'],
+  ): this {
+    this.provider.fetchPlaylistByUrl = fetchPlaylistByUrl;
+    return this;
+  }
+
+  thatMatchesUrl(urlPattern: string): this {
+    this.provider.matchesUrl = (url: string) => url.includes(urlPattern);
+    return this;
+  }
+
+  thatReturnsPlaylist(playlist: Playlist): this {
+    this.provider.fetchPlaylistByUrl = async () => playlist;
+    return this;
+  }
+
+  build(): PlaylistProvider {
+    return this.provider;
+  }
+}

packages/player/src/views/PlaylistDetail/PlaylistDetail.test-wrapper.tsx

@@ -49,6 +49,9 @@ export const PlaylistDetailWrapper = {
   get emptyState() {
     return screen.queryByTestId('empty-state');
   },
+  get artwork() {
+    return screen.queryByTestId('playlist-artwork');
+  },
 
   actionsButton: {
     get element() {

packages/player/src/views/PlaylistDetail/PlaylistDetail.test.tsx

@@ -1,6 +1,7 @@
 import * as dialog from '@tauri-apps/plugin-dialog';
 import * as fs from '@tauri-apps/plugin-fs';
 import { screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 import { type Mock } from 'vitest';
 
 import { PlayerBarWrapper } from '../../integration-tests/PlayerBar.test-wrapper';
@@ -70,7 +71,7 @@ describe('PlaylistDetail view', () => {
         .withId('external-playlist')
         .withName('External Playlist')
         .readOnly()
-        .withOrigin({ provider: 'spotify', id: 'ext-1' })
+        .withOrigin({ provider: 'example-music', id: 'ext-1' })
         .withTrackNames(['Track A']),
     );
 
@@ -79,6 +80,27 @@ describe('PlaylistDetail view', () => {
     expect(PlaylistDetailWrapper.readOnlyBadge).toBeInTheDocument();
   });
 
+  it('shows tooltip on read-only badge hover', async () => {
+    PlaylistDetailWrapper.seedPlaylist(
+      new PlaylistBuilder()
+        .withId('external-playlist')
+        .withName('External Playlist')
+        .readOnly()
+        .withOrigin({ provider: 'example-music', id: 'ext-1' })
+        .withTrackNames(['Track A']),
+    );
+
+    await PlaylistDetailWrapper.mount('external-playlist');
+
+    await userEvent.hover(screen.getByTestId('read-only-badge'));
+
+    await vi.waitFor(() => {
+      expect(screen.getByRole('tooltip')).toHaveTextContent(
+        'This playlist is from example-music and is read-only. Save a local copy to edit it.',
+      );
+    });
+  });
+
   it('deletes playlist and navigates back to playlists list', async () => {
     await PlaylistDetailWrapper.mount('test-playlist');
 
@@ -139,7 +161,7 @@ describe('PlaylistDetail view', () => {
         .withId('readonly-playlist')
         .withName('Read-Only Playlist')
         .readOnly()
-        .withOrigin({ provider: 'spotify', id: 'ext-1' })
+        .withOrigin({ provider: 'example-music', id: 'ext-1' })
         .withTrackNames(['Track A', 'Track B']),
     );
 
@@ -162,7 +184,7 @@ describe('PlaylistDetail view', () => {
         .withId('readonly-playlist')
         .withName('Read-Only')
         .readOnly()
-        .withOrigin({ provider: 'spotify', id: 'ext-1' })
+        .withOrigin({ provider: 'example-music', id: 'ext-1' })
         .withTrackNames(['Track A', 'Track B']),
     );
 
@@ -192,6 +214,22 @@ describe('PlaylistDetail view', () => {
     expect(queueItems[2]?.title).toBe('So What');
   });
 
+  it('displays playlist artwork when available', async () => {
+    PlaylistDetailWrapper.seedPlaylist(
+      new PlaylistBuilder()
+        .withId('art-playlist')
+        .withName('Playlist With Art')
+        .withArtwork('https://example.com/cover.jpg')
+        .withTrackNames(['Track A']),
+    );
+
+    await PlaylistDetailWrapper.mount('art-playlist');
+
+    const artwork = screen.getByTestId('playlist-artwork');
+    expect(artwork).toBeInTheDocument();
+    expect(artwork).toHaveAttribute('src', 'https://example.com/cover.jpg');
+  });
+
   describe('JSON export', () => {
     it('exports playlist as JSON file via save dialog', async () => {
       const expectedPath = '/downloads/Test Playlist.json';