Preview a track as its whole album, starting on that track

Feed stories like "x bought a track" now show the album the track
belongs to, with the purchased track loaded. Standalone singles still
show on their own.

Author: IanHoar

src/bclient.ts

@@ -62,6 +62,7 @@ export interface TralbumDetailsResponse {
   price: number;
   is_purchasable: boolean;
   bandcamp_url?: string;
+  album_id?: number | null;
   tracks?: TralbumTrack[];
 }
 

src/components/player/loader.ts

@@ -232,12 +232,7 @@ export async function loadAlbumIntoDrawer(
   fetchCaching = enableFetchCaching;
 
   try {
-    const tralbumDetails = await getTralbumDetails(
-      albumId,
-      convertToApiType(albumType),
-      null,
-      createFetchFunction(enableFetchCaching)
-    );
+    const { tralbumDetails, startTrackId } = await fetchTralbumForDrawer(albumId, albumType, enableFetchCaching);
 
     if (requestedAlbumId !== albumId) {
       log.debug(`Album ${albumId} arrived after the drawer moved on`);
@@ -273,8 +268,8 @@ export async function loadAlbumIntoDrawer(
     }
 
     attachTrackListHandlers();
-    loadTrack(0);
-    void loadTrackState(albumId);
+    loadTrack(startTrackIndex(tralbumDetails, startTrackId));
+    void loadTrackState(String(tralbumDetails.id));
 
     log.info(`Album loaded: ${tralbumDetails.title} by ${tralbumDetails.tralbum_artist}`);
   } catch (error) {
@@ -283,6 +278,32 @@ export async function loadAlbumIntoDrawer(
   }
 }
 
+// A track that belongs to an album is shown as its whole album, starting on that track.
+async function fetchTralbumForDrawer(
+  id: string,
+  type: string,
+  enableFetchCaching: boolean
+): Promise<{ tralbumDetails: TralbumDetailsResponse; startTrackId?: number }> {
+  const fetchFn = createFetchFunction(enableFetchCaching);
+  const details = await getTralbumDetails(id, convertToApiType(type), null, fetchFn);
+  if (details.type !== 't' || !details.album_id) return { tralbumDetails: details };
+
+  try {
+    const album = await getTralbumDetails(details.album_id, 'a', null, fetchFn);
+    return { tralbumDetails: album, startTrackId: details.id };
+  } catch (error) {
+    log.warn(`Failed to load album ${details.album_id} for track ${id}, showing the track alone: ${error}`);
+    return { tralbumDetails: details };
+  }
+}
+
+function startTrackIndex(tralbumDetails: TralbumDetailsResponse, trackId?: number): number {
+  if (!trackId) return 0;
+
+  const index = tralbumDetails.tracks?.findIndex(track => track.track_id === trackId) ?? -1;
+  return Math.max(index, 0);
+}
+
 export function getLoadedAlbumId(): string | null {
   return requestedAlbumId;
 }

test/playerLoader.test.ts

@@ -30,6 +30,34 @@ vi.mock('../src/bclient', () => {
   return {
     getTralbumDetails: vi.fn(async (albumId: string | number) => {
       const id = Number(albumId);
+
+      // Track 7772 is the second track of album 777; track 8000 is a standalone single
+      if (id === 7772 || id === 8000) {
+        return {
+          id,
+          type: 't',
+          album_id: id === 7772 ? 777 : null,
+          title: `Track ${id}`,
+          tralbum_artist: 'Test Artist',
+          is_purchasable: true,
+          price: 1.0,
+          currency: 'USD',
+          tracks: [playableTrack(id)]
+        };
+      }
+
+      if (id === 777) {
+        return {
+          id,
+          type: 'a',
+          title: 'Test Album 777',
+          tralbum_artist: 'Test Artist',
+          is_purchasable: true,
+          price: 10.0,
+          currency: 'USD',
+          tracks: [playableTrack(7771), playableTrack(7772), playableTrack(7773)]
+        };
+      }
       // Album 456 has a playable first track and nothing playable after it
       const tracks =
         id === 456
@@ -375,6 +403,29 @@ describe('PlayerLoader - Main Player Logic', () => {
     });
   });
 
+  describe('Previewing a track', () => {
+    it('should show the whole album and start on that track', async () => {
+      await player.loadAlbumIntoDrawer('7772', 'track', false);
+
+      expect(player.getCurrentAlbumData()?.id).toBe(777);
+      expect(player.getCurrentTrackIndex()).toBe(1);
+      expect((document.querySelector('audio') as HTMLAudioElement).src).toContain('track7772.mp3');
+    });
+
+    it('should still toggle the drawer for the track that was previewed', async () => {
+      await player.loadAlbumIntoDrawer('7772', 'track', false);
+
+      expect(player.getLoadedAlbumId()).toBe('7772');
+    });
+
+    it('should show a single on its own', async () => {
+      await player.loadAlbumIntoDrawer('8000', 'track', false);
+
+      expect(player.getCurrentAlbumData()?.id).toBe(8000);
+      expect(player.getCurrentTrackIndex()).toBe(0);
+    });
+  });
+
   describe('Persistent audio element with state management', () => {
     it('should create persistent audio element only once', async () => {
       discography.updateDiscographyOrder();