Merge pull request #16 from NuclearPlayer/feat/artist-page

Artist page

Author: nukeop

package.json

@@ -3,7 +3,7 @@
   "version": "0.0.8",
   "private": true,
   "type": "module",
-  "packageManager": "pnpm@10.14.0",
+  "packageManager": "pnpm@10.16.1",
   "scripts": {
     "dev": "turbo dev --filter=@nuclearplayer/player --filter=@nuclearplayer/ui",
     "build": "turbo build",

packages/model/src/index.ts

@@ -26,18 +26,29 @@ export type ArtworkSet = {
 
 export type ArtistRef = {
   name: string;
+  disambiguation?: string;
+  artwork?: ArtworkSet;
   source: ProviderRef;
 };
 
 export type AlbumRef = {
   title: string;
   artists?: ArtistRef[];
+  artwork?: ArtworkSet;
   source: ProviderRef;
 };
 
 export type TrackRef = {
   title: string;
   artists: ArtistRef[];
+  artwork?: ArtworkSet;
+  source: ProviderRef;
+};
+
+export type PlaylistRef = {
+  id: string;
+  name: string;
+  artwork?: ArtworkSet;
   source: ProviderRef;
 };
 
@@ -95,6 +106,8 @@ export type Album = {
 export type Artist = {
   name: string;
   disambiguation?: string;
+  bio?: string;
+  onTour?: boolean;
   artwork?: ArtworkSet;
   tags?: string[];
   source: ProviderRef;

packages/player/src/__snapshots__/App.test.tsx.snap

@@ -6,7 +6,7 @@ exports[`App > should render snapshot 1`] = `
     class="grid h-screen w-screen grid-rows-[auto_1fr_auto] overflow-hidden"
   >
     <header
-      class="bg-background border-border flex h-12 items-center border-b-2 px-4"
+      class="bg-background-secondary border-border flex h-12 items-center border-b-2 px-4"
     >
       <svg
         class="inline-flex h-6 w-6"
@@ -36,7 +36,7 @@ exports[`App > should render snapshot 1`] = `
       </svg>
       <div>
         <input
-          class="bg-background border-border ml-4 w-80 rounded border-2 px-3 py-1 outline-none"
+          class="bg-background border-border ml-4 w-80 rounded-md border-2 px-3 py-1 outline-none"
           data-testid="search-box"
           placeholder="Search"
           value=""
@@ -116,7 +116,7 @@ exports[`App > should render snapshot 1`] = `
           class="mb-4 flex flex-row items-center justify-end"
         >
           <button
-            class="inline-flex cursor-pointer items-center rounded transition-all disabled:cursor-not-allowed disabled:opacity-50 text-foreground bg-primary border-border shadow-shadow hover:translate-x-shadow-x hover:translate-y-shadow-y border-2 hover:shadow-none size-10 justify-center top-2 px-2 right-1"
+            class="inline-flex cursor-pointer items-center rounded-md transition-all disabled:cursor-not-allowed disabled:opacity-50 text-foreground bg-primary border-border shadow-shadow hover:translate-x-shadow-x hover:translate-y-shadow-y border-2 hover:shadow-none size-10 justify-center top-2 px-2 right-1"
             data-headlessui-state=""
             data-testid="sidebar-toggle-left"
             type="submit"
@@ -161,7 +161,7 @@ exports[`App > should render snapshot 1`] = `
               class="mb-4 flex w-full flex-col text-sm"
             >
               <button
-                class="cursor-pointer rounded transition-all disabled:cursor-not-allowed disabled:opacity-50 text-foreground bg-transparent h-9 px-3 inline-flex flex-row items-center justify-between"
+                class="cursor-pointer rounded-md transition-all disabled:cursor-not-allowed disabled:opacity-50 text-foreground bg-transparent h-9 px-3 inline-flex flex-row items-center justify-between"
                 data-headlessui-state=""
                 type="submit"
               >
@@ -220,7 +220,7 @@ exports[`App > should render snapshot 1`] = `
               class="mb-4 flex w-full flex-col text-sm"
             >
               <button
-                class="cursor-pointer rounded transition-all disabled:cursor-not-allowed disabled:opacity-50 text-foreground bg-transparent h-9 px-3 inline-flex flex-row items-center justify-between"
+                class="cursor-pointer rounded-md transition-all disabled:cursor-not-allowed disabled:opacity-50 text-foreground bg-transparent h-9 px-3 inline-flex flex-row items-center justify-between"
                 data-headlessui-state=""
                 type="submit"
               >
@@ -279,7 +279,7 @@ exports[`App > should render snapshot 1`] = `
               class="mb-4 flex w-full flex-col text-sm"
             >
               <button
-                class="cursor-pointer rounded transition-all disabled:cursor-not-allowed disabled:opacity-50 text-foreground bg-transparent h-9 px-3 inline-flex flex-row items-center justify-between"
+                class="cursor-pointer rounded-md transition-all disabled:cursor-not-allowed disabled:opacity-50 text-foreground bg-transparent h-9 px-3 inline-flex flex-row items-center justify-between"
                 data-headlessui-state=""
                 type="submit"
               >
@@ -359,7 +359,7 @@ exports[`App > should render snapshot 1`] = `
             transition="[object Object]"
           >
             <div
-              class="relative flex h-full w-full flex-col items-start justify-start px-6 pt-6"
+              class="bg-background relative flex h-full w-full flex-col items-start justify-start px-6 pt-6"
             >
               <h1
                 class="mb-6 flex w-full flex-0 flex-row text-center text-3xl font-bold"
@@ -384,7 +384,7 @@ exports[`App > should render snapshot 1`] = `
           class="mb-4 flex flex-row items-center justify-start"
         >
           <button
-            class="inline-flex cursor-pointer items-center rounded transition-all disabled:cursor-not-allowed disabled:opacity-50 text-foreground bg-primary border-border shadow-shadow hover:translate-x-shadow-x hover:translate-y-shadow-y border-2 hover:shadow-none size-10 justify-center top-2 px-2 left-1"
+            class="inline-flex cursor-pointer items-center rounded-md transition-all disabled:cursor-not-allowed disabled:opacity-50 text-foreground bg-primary border-border shadow-shadow hover:translate-x-shadow-x hover:translate-y-shadow-y border-2 hover:shadow-none size-10 justify-center top-2 px-2 left-1"
             data-headlessui-state=""
             data-testid="sidebar-toggle-right"
             type="submit"
@@ -428,7 +428,7 @@ exports[`App > should render snapshot 1`] = `
       </div>
     </div>
     <footer
-      class="bg-background border-border flex h-16 items-center border-t-2 px-4"
+      class="bg-background-secondary border-border flex h-16 items-center border-t-2 px-4"
     >
       <div
         class="grid w-full grid-cols-[minmax(0,1fr)_auto_minmax(0,1fr)] items-center gap-4"
@@ -440,11 +440,11 @@ exports[`App > should render snapshot 1`] = `
             class="flex min-w-0 items-center gap-3"
           >
             <div
-              class="border-border bg-background-secondary size-12 shrink-0 overflow-hidden rounded border-2"
+              class="border-border bg-background-secondary size-12 shrink-0 overflow-hidden rounded-md border-2"
             >
               <img
                 alt=""
-                class="size-full object-cover"
+                class="size-full object-cover select-none"
                 src="https://picsum.photos/64"
               />
             </div>
@@ -471,7 +471,7 @@ exports[`App > should render snapshot 1`] = `
             class="flex items-center justify-center gap-2"
           >
             <button
-              class="inline-flex cursor-pointer items-center rounded transition-all disabled:cursor-not-allowed disabled:opacity-50 text-foreground bg-transparent size-10 justify-center"
+              class="inline-flex cursor-pointer items-center rounded-md transition-all disabled:cursor-not-allowed disabled:opacity-50 text-foreground bg-transparent size-10 justify-center"
               data-headlessui-state=""
               type="submit"
             >
@@ -506,7 +506,7 @@ exports[`App > should render snapshot 1`] = `
               </svg>
             </button>
             <button
-              class="inline-flex cursor-pointer items-center rounded transition-all disabled:cursor-not-allowed disabled:opacity-50 text-foreground bg-transparent size-10 justify-center"
+              class="inline-flex cursor-pointer items-center rounded-md transition-all disabled:cursor-not-allowed disabled:opacity-50 text-foreground bg-transparent size-10 justify-center"
               data-headlessui-state=""
               type="submit"
             >
@@ -532,7 +532,7 @@ exports[`App > should render snapshot 1`] = `
               </svg>
             </button>
             <button
-              class="inline-flex cursor-pointer items-center rounded transition-all disabled:cursor-not-allowed disabled:opacity-50 text-foreground bg-primary border-border shadow-shadow hover:translate-x-shadow-x hover:translate-y-shadow-y border-2 hover:shadow-none size-10 justify-center"
+              class="inline-flex cursor-pointer items-center rounded-md transition-all disabled:cursor-not-allowed disabled:opacity-50 text-foreground bg-primary border-border shadow-shadow hover:translate-x-shadow-x hover:translate-y-shadow-y border-2 hover:shadow-none size-10 justify-center"
               data-headlessui-state=""
               type="submit"
             >
@@ -555,7 +555,7 @@ exports[`App > should render snapshot 1`] = `
               </svg>
             </button>
             <button
-              class="inline-flex cursor-pointer items-center rounded transition-all disabled:cursor-not-allowed disabled:opacity-50 text-foreground bg-transparent size-10 justify-center"
+              class="inline-flex cursor-pointer items-center rounded-md transition-all disabled:cursor-not-allowed disabled:opacity-50 text-foreground bg-transparent size-10 justify-center"
               data-headlessui-state=""
               type="submit"
             >
@@ -581,7 +581,7 @@ exports[`App > should render snapshot 1`] = `
               </svg>
             </button>
             <button
-              class="inline-flex cursor-pointer items-center rounded transition-all disabled:cursor-not-allowed disabled:opacity-50 text-foreground bg-transparent size-10 justify-center"
+              class="inline-flex cursor-pointer items-center rounded-md transition-all disabled:cursor-not-allowed disabled:opacity-50 text-foreground bg-transparent size-10 justify-center"
               data-headlessui-state=""
               type="submit"
             >
@@ -621,7 +621,7 @@ exports[`App > should render snapshot 1`] = `
             class="flex items-center gap-2"
           >
             <button
-              class="inline-flex cursor-pointer items-center rounded transition-all disabled:cursor-not-allowed disabled:opacity-50 text-foreground bg-transparent size-10 justify-center"
+              class="inline-flex cursor-pointer items-center rounded-md transition-all disabled:cursor-not-allowed disabled:opacity-50 text-foreground bg-transparent size-10 justify-center"
               data-headlessui-state=""
               type="submit"
             >
@@ -662,7 +662,7 @@ exports[`App > should render snapshot 1`] = `
                     class="pointer-events-none absolute inset-x-0 top-1/2 -translate-y-1/2"
                   >
                     <div
-                      class="border-border bg-background-input relative h-3 w-full rounded border-2"
+                      class="border-border bg-background-input relative h-3 w-full rounded-md border-2"
                     >
                       <div
                         class="bg-primary absolute top-0 left-0 h-full rounded-l"

packages/player/src/routeTree.gen.ts

@@ -15,6 +15,7 @@ import { Route as SearchRouteImport } from './routes/search'
 import { Route as PluginsRouteImport } from './routes/plugins'
 import { Route as DashboardRouteImport } from './routes/dashboard'
 import { Route as IndexRouteImport } from './routes/index'
+import { Route as ArtistProviderIdArtistIdRouteImport } from './routes/artist/$providerId/$artistId'
 
 const ThemesRoute = ThemesRouteImport.update({
   id: '/themes',
@@ -46,6 +47,12 @@ const IndexRoute = IndexRouteImport.update({
   path: '/',
   getParentRoute: () => rootRouteImport,
 } as any)
+const ArtistProviderIdArtistIdRoute =
+  ArtistProviderIdArtistIdRouteImport.update({
+    id: '/artist/$providerId/$artistId',
+    path: '/artist/$providerId/$artistId',
+    getParentRoute: () => rootRouteImport,
+  } as any)
 
 export interface FileRoutesByFullPath {
   '/': typeof IndexRoute
@@ -54,6 +61,7 @@ export interface FileRoutesByFullPath {
   '/search': typeof SearchRoute
   '/settings': typeof SettingsRoute
   '/themes': typeof ThemesRoute
+  '/artist/$providerId/$artistId': typeof ArtistProviderIdArtistIdRoute
 }
 export interface FileRoutesByTo {
   '/': typeof IndexRoute
@@ -62,6 +70,7 @@ export interface FileRoutesByTo {
   '/search': typeof SearchRoute
   '/settings': typeof SettingsRoute
   '/themes': typeof ThemesRoute
+  '/artist/$providerId/$artistId': typeof ArtistProviderIdArtistIdRoute
 }
 export interface FileRoutesById {
   __root__: typeof rootRouteImport
@@ -71,6 +80,7 @@ export interface FileRoutesById {
   '/search': typeof SearchRoute
   '/settings': typeof SettingsRoute
   '/themes': typeof ThemesRoute
+  '/artist/$providerId/$artistId': typeof ArtistProviderIdArtistIdRoute
 }
 export interface FileRouteTypes {
   fileRoutesByFullPath: FileRoutesByFullPath
@@ -81,8 +91,16 @@ export interface FileRouteTypes {
     | '/search'
     | '/settings'
     | '/themes'
+    | '/artist/$providerId/$artistId'
   fileRoutesByTo: FileRoutesByTo
-  to: '/' | '/dashboard' | '/plugins' | '/search' | '/settings' | '/themes'
+  to:
+    | '/'
+    | '/dashboard'
+    | '/plugins'
+    | '/search'
+    | '/settings'
+    | '/themes'
+    | '/artist/$providerId/$artistId'
   id:
     | '__root__'
     | '/'
@@ -91,6 +109,7 @@ export interface FileRouteTypes {
     | '/search'
     | '/settings'
     | '/themes'
+    | '/artist/$providerId/$artistId'
   fileRoutesById: FileRoutesById
 }
 export interface RootRouteChildren {
@@ -100,6 +119,7 @@ export interface RootRouteChildren {
   SearchRoute: typeof SearchRoute
   SettingsRoute: typeof SettingsRoute
   ThemesRoute: typeof ThemesRoute
+  ArtistProviderIdArtistIdRoute: typeof ArtistProviderIdArtistIdRoute
 }
 
 declare module '@tanstack/react-router' {
@@ -146,6 +166,13 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof IndexRouteImport
       parentRoute: typeof rootRouteImport
     }
+    '/artist/$providerId/$artistId': {
+      id: '/artist/$providerId/$artistId'
+      path: '/artist/$providerId/$artistId'
+      fullPath: '/artist/$providerId/$artistId'
+      preLoaderRoute: typeof ArtistProviderIdArtistIdRouteImport
+      parentRoute: typeof rootRouteImport
+    }
   }
 }
 
@@ -156,6 +183,7 @@ const rootRouteChildren: RootRouteChildren = {
   SearchRoute: SearchRoute,
   SettingsRoute: SettingsRoute,
   ThemesRoute: ThemesRoute,
+  ArtistProviderIdArtistIdRoute: ArtistProviderIdArtistIdRoute,
 }
 export const routeTree = rootRouteImport
   ._addFileChildren(rootRouteChildren)

packages/player/src/routes/__root.tsx

@@ -55,7 +55,7 @@ const SearchBox = () => {
           }
         }}
         placeholder="Search"
-        className="bg-background border-border ml-4 w-80 rounded border-2 px-3 py-1 outline-none"
+        className="bg-background border-border ml-4 w-80 rounded-md border-2 px-3 py-1 outline-none"
       />
     </div>
   );

packages/player/src/routes/artist/$providerId/$artistId.tsx

@@ -0,0 +1,18 @@
+import { createFileRoute } from '@tanstack/react-router';
+import z from 'zod';
+
+import { Artist } from '../../../views/Artist/Artist';
+
+export const Route = createFileRoute('/artist/$providerId/$artistId')({
+  params: {
+    parse: (params) => ({
+      providerId: z.string().parse(params.providerId),
+      artistId: z.string().parse(params.artistId),
+    }),
+    stringify: ({ providerId, artistId }) => ({
+      providerId: `${providerId}`,
+      artistId: `${artistId}`,
+    }),
+  },
+  component: Artist,
+});

packages/player/src/services/advancedThemeDirService.ts

@@ -3,7 +3,7 @@ import {
   BaseDirectory,
   readDir,
   readTextFile,
-  watch,
+  watchImmediate,
 } from '@tauri-apps/plugin-fs';
 
 import { parseAdvancedTheme } from '@nuclearplayer/themes';
@@ -81,7 +81,7 @@ export const startAdvancedThemeWatcher = async (): Promise<void> => {
     return;
   }
   try {
-    unwatch = await watch(
+    unwatch = await watchImmediate(
       dir,
       async (event) => {
         await refreshAdvancedThemeList();
@@ -98,7 +98,7 @@ export const startAdvancedThemeWatcher = async (): Promise<void> => {
           return;
         }
 
-        if (!event.paths.some((p) => p === currentPath)) {
+        if (!event.paths.some((p) => p.endsWith(currentPath))) {
           return;
         }