Add previous/next album controls to the drawer when browsing the feed

The feed now acts as the drawer's album source, so the player can step
through its stories. When stepping past the last loaded story, the page
is scrolled to the bottom so the feed pages in more, and the drawer waits
for them before moving on. The selected story is scrolled into view.

Only the story list is walked: the new-releases carousel above it repeats
stories in hidden slides.

Also ignore album loads that resolve after the drawer moved on, and toggle
the preview button against the album the drawer is actually showing.

Author: IanHoar

css/style.css

@@ -1931,6 +1931,54 @@ body.bes-drawer-expanded #pgBd {
   flex: 0 0 auto;
 }
 
+/* Previous/next album controls, shown when browsing a feed */
+.bes-album-toolbar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  margin-bottom: 12px;
+  padding: 0 16px 0 20px;
+}
+
+.bes-album-toolbar .bes-album-buy {
+  margin-bottom: 0;
+  padding: 0;
+}
+
+.bes-album-nav {
+  display: flex;
+  gap: 4px;
+}
+
+.bes-album-nav button {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  padding: 4px 8px;
+  font-size: 13px;
+  font-weight: 500;
+  color: var(--bes-text-strong);
+  background: none;
+  border: 1px solid transparent;
+  border-radius: 4px;
+  cursor: pointer;
+}
+
+.bes-album-nav button:hover:not(:disabled) {
+  background: var(--bes-surface-1);
+  color: var(--bes-text-max);
+}
+
+.bes-album-nav button:disabled {
+  opacity: 0.3;
+  cursor: default;
+}
+
+.bes-album-nav.bes-loading {
+  cursor: progress;
+}
+
 /* Play status icons in track list */
 .bes-player-drawer .play_status {
   background: var(--bes-surface-0);

src/components/player/albumNav.ts

@@ -0,0 +1,39 @@
+import { element } from '../dom';
+
+export interface AlbumNavState {
+  hasPrevious: boolean;
+  hasNext: boolean;
+  loading: boolean;
+}
+
+const chevron = (points: string): string =>
+  `<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="${points}"></polyline></svg>`;
+
+export function buildAlbumNav(onPrevious: () => void, onNext: () => void): HTMLElement {
+  const previous = element('button', {
+    className: 'bes-album-nav-prev',
+    html: `${chevron('15 18 9 12 15 6')}<span>Previous album</span>`,
+    attributes: { type: 'button', title: 'Previous album in feed' }
+  });
+  const next = element('button', {
+    className: 'bes-album-nav-next',
+    html: `<span>Next album</span>${chevron('9 18 15 12 9 6')}`,
+    attributes: { type: 'button', title: 'Next album in feed' }
+  });
+
+  previous.addEventListener('click', onPrevious);
+  next.addEventListener('click', onNext);
+
+  return element('div', { className: 'bes-album-nav', children: [previous, next] });
+}
+
+export function updateAlbumNav(nav: HTMLElement | null, { hasPrevious, hasNext, loading }: AlbumNavState): void {
+  if (!nav) return;
+
+  const previous = nav.querySelector<HTMLButtonElement>('.bes-album-nav-prev');
+  const next = nav.querySelector<HTMLButtonElement>('.bes-album-nav-next');
+
+  if (previous) previous.disabled = loading || !hasPrevious;
+  if (next) next.disabled = loading || !hasNext;
+  nav.classList.toggle('bes-loading', loading);
+}

src/components/player/index.ts

@@ -1,2 +1,2 @@
 export { createPlayerDrawer } from './drawer';
-export { loadAlbumIntoDrawer, loadNextAlbum, loadPreviousAlbum } from './loader';
+export { loadAlbumIntoDrawer, loadNextAlbum, loadPreviousAlbum, getLoadedAlbumId } from './loader';

src/components/player/loader.ts

@@ -7,17 +7,22 @@ import { buildDrawerPlayer, buildTrackTable, buildAlbumBuyButton } from './build
 import { PlayerCommands, registerPlayerShortcuts } from '../../keyboardShortcuts';
 import { drawOverlay, generateAudioFeatures } from '../../audioFeatures';
 import { volumeIcon, mutedVolumeIcon } from './icons';
-import { replaceChildren } from '../dom';
+import { element, replaceChildren } from '../dom';
 import { inDrawer, allInDrawer, setText, setStyle } from './query';
 import { streamUrlOf, findPlayableTrackAfter, findPlayableTrackBefore } from './trackSelection';
 import { applyTrackState, markRowPlayed } from './trackState';
+import { buildAlbumNav, updateAlbumNav } from './albumNav';
 import {
   selectAlbum,
   hasNextAlbum,
   hasPreviousAlbum,
   nextAlbum,
   previousAlbum,
-  albumArtUrlFor
+  albumArtUrlFor,
+  canLoadMoreAlbums,
+  loadMoreAlbums,
+  revealAlbum,
+  showAlbumControls
 } from '../../discography';
 
 const log = new Logger();
@@ -31,6 +36,9 @@ let drawerPlayerCreated = false;
 let previousVolume = 1.0;
 let configPort: chrome.runtime.Port | null = null;
 let waveformEnabled = true;
+let requestedAlbumId: string | null = null;
+let fetchCaching = false;
+let albumNavLoading = false;
 
 const ALBUM_LOAD_SETTLE_MS = 300;
 
@@ -220,6 +228,8 @@ export async function loadAlbumIntoDrawer(
   port?: chrome.runtime.Port
 ): Promise<void> {
   log.info(`Loading album ${albumId} (${albumType}) into drawer`);
+  requestedAlbumId = albumId;
+  fetchCaching = enableFetchCaching;
 
   try {
     const tralbumDetails = await getTralbumDetails(
@@ -229,6 +239,11 @@ export async function loadAlbumIntoDrawer(
       createFetchFunction(enableFetchCaching)
     );
 
+    if (requestedAlbumId !== albumId) {
+      log.debug(`Album ${albumId} arrived after the drawer moved on`);
+      return;
+    }
+
     currentAlbumData = tralbumDetails;
     selectAlbum(albumId);
 
@@ -243,14 +258,14 @@ export async function loadAlbumIntoDrawer(
     if (drawerPlayerCreated) {
       replaceChildren(
         elements.tracklistContainer,
-        buildAlbumBuyButton(tralbumDetails),
+        albumToolbar(buildAlbumBuyButton(tralbumDetails)),
         buildTrackTable(tralbumDetails)
       );
     } else {
       const parts = buildDrawerPlayer(tralbumDetails);
 
       mountDrawerPlayer(elements, parts);
-      replaceChildren(elements.tracklistContainer, parts.albumBuyButton, parts.tracklistElement);
+      replaceChildren(elements.tracklistContainer, albumToolbar(parts.albumBuyButton), parts.tracklistElement);
       drawerPlayerCreated = true;
 
       startPlayerOnce();
@@ -268,6 +283,52 @@ export async function loadAlbumIntoDrawer(
   }
 }
 
+export function getLoadedAlbumId(): string | null {
+  return requestedAlbumId;
+}
+
+function hasLaterAlbum(): boolean {
+  return hasNextAlbum() || canLoadMoreAlbums();
+}
+
+function albumToolbar(buyButton: HTMLElement | null): HTMLElement | null {
+  if (!showAlbumControls()) return buyButton;
+
+  const nav = buildAlbumNav(
+    () => void skipAlbum(loadPreviousAlbum),
+    () => void skipAlbum(loadNextAlbum)
+  );
+  updateAlbumNav(nav, { hasPrevious: hasPreviousAlbum(), hasNext: hasLaterAlbum(), loading: albumNavLoading });
+
+  return element('div', { className: 'bes-album-toolbar', children: [nav, buyButton] });
+}
+
+function refreshAlbumNav(): void {
+  updateAlbumNav(inDrawer('.bes-album-nav'), {
+    hasPrevious: hasPreviousAlbum(),
+    hasNext: hasLaterAlbum(),
+    loading: albumNavLoading
+  });
+}
+
+async function skipAlbum(load: () => Promise<boolean>): Promise<void> {
+  if (albumNavLoading) return;
+
+  const keepPlaying = Boolean(audioElement && !audioElement.paused);
+  albumNavLoading = true;
+  refreshAlbumNav();
+
+  try {
+    if ((await load()) && keepPlaying) resumePlayback();
+  } catch (error) {
+    log.error(`Failed to skip album: ${error}`);
+  } finally {
+    albumNavLoading = false;
+    refreshAlbumNav();
+    if (currentAlbumData?.tracks) updatePrevNextButtons(currentTrackIndex, currentAlbumData.tracks.length);
+  }
+}
+
 function currentTrack(): TralbumTrack | undefined {
   return currentAlbumData?.tracks?.[currentTrackIndex];
 }
@@ -334,7 +395,7 @@ function updatePrevNextButtons(index: number, totalTracks: number): void {
   const nextButton = inDrawer('.bes-transport-next');
 
   const hasEarlierTrackOrAlbum = index > 0 || hasPreviousAlbum();
-  const hasLaterTrackOrAlbum = index < totalTracks - 1 || hasNextAlbum();
+  const hasLaterTrackOrAlbum = index < totalTracks - 1 || hasLaterAlbum();
 
   prevButton?.classList.toggle('bes-hidden', !hasEarlierTrackOrAlbum);
   nextButton?.classList.toggle('bes-hidden', !hasLaterTrackOrAlbum);
@@ -366,7 +427,7 @@ interface TrackStep {
 const forward: TrackStep = {
   name: 'next',
   nextWithinAlbum: findPlayableTrackAfter,
-  hasAdjacentAlbum: hasNextAlbum,
+  hasAdjacentAlbum: hasLaterAlbum,
   loadAdjacentAlbum: loadNextAlbum,
   entryTrack: tracks => findPlayableTrackAfter(tracks, -1)
 };
@@ -395,7 +456,7 @@ async function step(direction: TrackStep, keepPlaying: boolean): Promise<void> {
   }
 
   log.info(`No playable track ${direction.name}: loading ${direction.name} album in discography`);
-  await direction.loadAdjacentAlbum();
+  if (!(await direction.loadAdjacentAlbum())) return;
 
   setTimeout(() => {
     const entry = direction.entryTrack(currentAlbumData?.tracks);
@@ -600,25 +661,32 @@ function adjustVolumeBy(delta: number): void {
   updateMuteButton(audioElement.volume === 0);
 }
 
-export async function loadNextAlbum(enableFetchCaching: boolean = false): Promise<boolean> {
+export async function loadNextAlbum(enableFetchCaching: boolean = fetchCaching): Promise<boolean> {
+  if (!hasNextAlbum() && canLoadMoreAlbums()) {
+    log.info('Reached the end of the loaded albums, loading more');
+    await loadMoreAlbums();
+  }
+
   const item = nextAlbum();
   if (!item) {
     log.info('No next album available');
     return false;
   }
 
   await loadAlbumIntoDrawer(item.id, item.type, enableFetchCaching);
+  revealAlbum(item);
   return true;
 }
 
-export async function loadPreviousAlbum(enableFetchCaching: boolean = false): Promise<boolean> {
+export async function loadPreviousAlbum(enableFetchCaching: boolean = fetchCaching): Promise<boolean> {
   const item = previousAlbum();
   if (!item) {
     log.info('No previous album available');
     return false;
   }
 
   await loadAlbumIntoDrawer(item.id, item.type, enableFetchCaching);
+  revealAlbum(item);
   return true;
 }
 

src/discography.ts

@@ -8,8 +8,19 @@ export interface DiscographyItem {
   element: Element;
 }
 
+export interface AlbumSource {
+  extract: () => DiscographyItem[];
+  // Pulls more items into the page (e.g. the next page of a feed); resolves true if any arrived.
+  loadMore?: () => Promise<boolean>;
+  reveal?: (item: DiscographyItem) => void;
+  showAlbumControls?: boolean;
+}
+
 let order: DiscographyItem[] = [];
 let selectedIndex = -1;
+let source: AlbumSource = { extract: extractDiscographyOrder };
+let pendingLoadMore: Promise<boolean> | null = null;
+let sourceExhausted = false;
 
 export function extractDiscographyOrder(): DiscographyItem[] {
   const items: DiscographyItem[] = [];
@@ -33,8 +44,55 @@ export function extractDiscographyOrder(): DiscographyItem[] {
   return items;
 }
 
+export function setAlbumSource(next: AlbumSource): void {
+  source = next;
+  sourceExhausted = false;
+  updateDiscographyOrder();
+}
+
 export function updateDiscographyOrder(): void {
-  order = extractDiscographyOrder();
+  const selectedId = order[selectedIndex]?.id;
+  const previousLength = order.length;
+
+  order = source.extract();
+  if (selectedId) selectedIndex = findAlbumIndexById(selectedId);
+  if (order.length > previousLength) sourceExhausted = false;
+}
+
+export function canLoadMoreAlbums(): boolean {
+  return selectedIndex !== -1 && Boolean(source.loadMore) && !sourceExhausted;
+}
+
+export function loadMoreAlbums(): Promise<boolean> {
+  if (!source.loadMore || sourceExhausted) return Promise.resolve(false);
+
+  pendingLoadMore ??= source
+    .loadMore()
+    .catch(error => {
+      log.warn(`Failed to load more albums: ${error}`);
+      return false;
+    })
+    .then(loaded => {
+      const previousLength = order.length;
+      updateDiscographyOrder();
+
+      const grew = order.length > previousLength;
+      if (!loaded && !grew) sourceExhausted = true;
+      return loaded || grew;
+    })
+    .finally(() => {
+      pendingLoadMore = null;
+    });
+
+  return pendingLoadMore;
+}
+
+export function showAlbumControls(): boolean {
+  return Boolean(source.showAlbumControls) && selectedIndex !== -1 && order.length > 1;
+}
+
+export function revealAlbum(item: DiscographyItem): void {
+  source.reveal?.(item);
 }
 
 export function findAlbumIndexById(albumId: string): number {

src/label_view.ts

@@ -1,5 +1,5 @@
 import Logger from './logger';
-import { createPlayerDrawer, loadAlbumIntoDrawer } from './components/player';
+import { createPlayerDrawer, loadAlbumIntoDrawer, getLoadedAlbumId } from './components/player';
 import { updateDiscographyOrder } from './discography';
 import { setFindMusicLinks, FindMusicLink } from './components/player/findMusicLinks';
 import { extractBandId } from './utilities';
@@ -72,7 +72,7 @@ export function fillFrame(
   const player = drawer();
   const { isOpen, isMinimized } = player.getState();
 
-  if (isOpen && previewState.previewId === target.id) {
+  if (isOpen && getLoadedAlbumId() === target.id) {
     if (isMinimized) player.maximizeDrawer();
     else player.minimizeDrawer();
     return;