A little progressive enhancement as a treat

import { getCache, setCache } from './memoryCache';

const platforms = {
  'bandcamp.com': 'Bandcamp',
  'deezer.com': 'Deezer',
  'tidal.com': 'Tidal',
  'qobuz.com/us-en': 'Qobuz',
  'apple.com': 'Apple Music',
  'youtube.com': 'YouTube',
  'spotify.com': 'Spotify',
};

// Simple function that'll match the platform in the above object
// to the passed URL. If nothing that we want is found (there will be a lot)
// we add a 'Filter out' platform name. That'll get caught later for us.
function getPlatformName(url) {
  const match = Object.keys(platforms).find((key) => url.includes(key));
  return match ? platforms[match] : 'Filter out';
}

export async function getStreamingLinks(artist, album) {
  // First thing to do is to check our cache to keep things
  // speedy as hell
  const cacheKey = `streamingLinks${artist}${album}`;
  const cacheTimeout = 3600; // 3600 seconds -> 1 hour
  const cached = getCache(cacheKey);

  if (cached) {
    return cached;
  }

  // Music Brainz API configuration
  const userAgent = 'Andy Bell/1.0.0 ( [email protected] )';
  const baseUrl = 'https://musicbrainz.org/ws/2';

  try {
    // First job is to extract a release group, which we can then grab the actual
    // release data, which is where we get the links from
    const searchRes = await fetch(
      `${baseUrl}/release-group/?query=artist:"${artist}" AND releasegroup:"${album}"&fmt=json`,
      { headers: { 'User-Agent': userAgent } }
    );
    const searchData = await searchRes.json();

    if (!searchData['release-groups']?.length) {
      throw new Error('No release group found');
    }

    // Grab the highest scoring release group by sorting, then taking the first item
    const releaseGroup = searchData['release-groups'].sort((a, b) => b.score - a.score)[0];

    // Now we have a release group, we can get that sweet release data from the
    // `release` endpoint
    const releaseQuery = await fetch(
      `${baseUrl}/release?release-group=${releaseGroup.id}&inc=url-rels&fmt=json`,
      { headers: { 'User-Agent': userAgent } }
    );
    const releaseQueryData = await releaseQuery.json();

    // This gets used to merge relations that are nested, which is our next job
    let allRelations = [];

    // The release group might have its own relations, so grab them first
    if (releaseGroup.relations) {
      allRelations = [...releaseGroup.relations];
    }

    // Now, for each release in the query data, we need to find its relations
    // and mush it into our existing relation data
    releaseQueryData.releases.forEach((rel) => {
      if (rel.relations) {
        allRelations = [...allRelations, ...rel.relations];
      }
    });

    // Next, define some relation types that we're interested in, to help with filtering
    const streamingTypes = ['streaming music', 'purchase for download', 'free streaming'];

    // Now it's filter time. First check against our streaming types,
    // then map each item that's left against our platforms object,
    // then filter out any items that were labelled as 'Filter out'
    // because that means there was not a platform match
    const links = allRelations
      .filter((rel) => streamingTypes.includes(rel.type))
      .map((rel) => ({
        platform: getPlatformName(rel.url.resource),
        url: rel.url.resource,
      }))
      .filter((rel) => rel.platform !== 'Filter out');

    // Now we need to make sure we don't have duplicate links, so
    // we use a Map to help with that
    const uniqueLinksMap = new Map();
    links.forEach((link) => {
      if (!uniqueLinksMap.has(link.platform)) {
        uniqueLinksMap.set(link.platform, link);
      }
    });

    // Define a display order with the platform names defined at the top of this file
    const platformOrder = Object.values(platforms);

    // Lastly, convert the map back into an array, then sort by that platform order
    const sortedLinks = Array.from(uniqueLinksMap.values()).sort((a, b) => {
      return platformOrder.indexOf(a.platform) - platformOrder.indexOf(b.platform);
    });

    // Release those sweet links after sticking them in the cache
    setCache(cacheKey, sortedLinks, cacheTimeout);
    return sortedLinks;
  } catch (err) {
    console.error('API Error:', err);
    return [];
  }
}

const streamingTypes = ['streaming music', 'purchase for download', 'free streaming'];

import { getStreamingLinks } from '@repo/data/musicStreamingLinks';

export const prerender = false;

export async function GET(context) {
  const { request } = context;
  const url = new URL(request.url);

  const origin = request.headers.get('origin');
  const referer = request.headers.get('referer');

  // Check if the request comes from the same origin
  const isSameOrigin = origin === url.origin || (referer && referer.startsWith(url.origin));

  if (!isSameOrigin) {
    return new Response(JSON.stringify({ error: 'Forbidden' }), {
      status: 403,
      headers: { 'Content-Type': 'application/json' },
    });
  }

  // Grab the artist and album from params then pass through to the streaming links method
  const artist = url.searchParams.get('artist');
  const album = url.searchParams.get('album');

  const response = await getStreamingLinks(artist, album);

  return new Response(JSON.stringify(response), {
    headers: { 'Content-Type': 'application/json' },
  });
}

---
const { artist, album } = Astro.props;

const encodedArtist = encodeURIComponent(artist);
const encodedAlbum = encodeURIComponent(album);

const coreLinks = [
  { platform: 'Last.fm', url: `https://www.last.fm/music/${encodedArtist}/${encodedAlbum}` },
  {
    platform: 'Open Scrobbler',
    url: `https://openscrobbler.com/scrobble/album/view/${encodedArtist}/${encodedAlbum}`,
  },
];
---

<album-platform-links artist={encodedArtist} album={encodedAlbum}>
  <ul class="cluster" role="list" style="gap: 0 var(--space-s)">
    {
      coreLinks.map((link) => (
        <li>
          <a href={link.url}>{link.platform}</a>
        </li>
      ))
    }
  </ul>
</album-platform-links>

<script>
  class AlbumPlatformLinks extends HTMLElement {
    constructor() {
      super();
    }

    get artist() {
      return this.getAttribute('artist') || '';
    }

    get album() {
      return this.getAttribute('album') || '';
    }

    async connectedCallback() {
      // Grab the data from our API
      const query = await fetch(
        `/api/music-streaming-links/?artist=${this.artist}&album=${this.album}`
      );
      const data = await query.json();

      if (data.length) {
        const parentListElement = this.querySelector('ul');

        data.forEach((link) => {
          const listElement = document.createElement('li');
          const linkElement = document.createElement('a');

          linkElement.href = link.url;
          linkElement.innerText = link.platform;

          listElement.appendChild(linkElement);
          parentListElement.appendChild(listElement);
        });
      }
    }
  }

  customElements.define('album-platform-links', AlbumPlatformLinks);
</script>

---
import { getCollection } from 'astro:content';
import MusicCollectionLayout from '../../layouts/MusicCollectionLayout.astro';

const content = {
  meta: {
    title: 'Music Collection - All time top 10',
    summary: '',
  },
  socialImage: '',
  allowRobots: true,
};

let items = await getCollection('music-collection');

items = items
  .filter((x) => x.data.topTenOrder)
  .filter((x) => x.data.tags.includes('Top 10'))
  .sort((a, b) => {
    return a.data.topTenOrder - b.data.topTenOrder;
  });
---

<MusicCollectionLayout
  title={content.meta.title}
  summary={content.meta.summary}
  socialImage={content.socialImage}
  allowRobots={content.allowRobots}
  items={items}
/>