fix: genre display

2024-06-04 20:53:10 -07:00 · 2024-06-04 20:53:10 -07:00 · fa56ed4768
commit fa56ed4768
parent 053829b1f7
6 changed files with 27 additions and 30 deletions
--- a/package-lock.json
+++ b/package-lock.json
@ -1,12 +1,12 @@
 {
  "name": "coryd.dev",
-  "version": "18.11.12",
+  "version": "18.11.13",
  "lockfileVersion": 3,
  "requires": true,
  "packages": {
    "": {
      "name": "coryd.dev",
-      "version": "18.11.12",
+      "version": "18.11.13",
      "license": "MIT",
      "dependencies": {
        "@cdransf/api-text": "^1.4.0",
@ -3366,9 +3366,9 @@
      "license": "MIT"
    },
    "node_modules/tslib": {
-      "version": "2.6.2",
-      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.2.tgz",
-      "integrity": "sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q==",
+      "version": "2.6.3",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.3.tgz",
+      "integrity": "sha512-xNvxJEOUiWPGhUuUdQgAJPKOOJfGnIyKySOc09XkKsgdUV/3E2zvwZYdejjmRgPCgcym1juLH3226yA7sEFJKQ==",
      "dev": true,
      "license": "0BSD"
    },
--- a/package.json
+++ b/package.json
@ -1,6 +1,6 @@
 {
  "name": "coryd.dev",
-  "version": "18.11.12",
+  "version": "18.11.13",
  "description": "The source for my personal site. Built using 11ty.",
  "type": "module",
  "scripts": {
--- a/src/_data/music.js
+++ b/src/_data/music.js
@ -42,16 +42,15 @@ const fetchGenreMapping = async () => {
    console.error('Error fetching genres:', error)
    return {}
  }
-
  return data.reduce((acc, genre) => {
    acc[genre.id] = genre.name
    return acc
  }, {})
 }

-const aggregateData = (data, groupByField, groupByType) => {
+const aggregateData = async (data, groupByField, groupByType) => {
  const aggregation = {}
-  const genreMapping = fetchGenreMapping()
+  const genreMapping = await fetchGenreMapping()

  data.forEach(item => {
    const key = item[groupByField]
@ -65,7 +64,7 @@ const aggregateData = (data, groupByField, groupByType) => {
          image: item['albums']?.['image'] || '',
          timestamp: item['listened_at'],
          type: groupByType,
-          genre: genreMapping[item['artists']['genre']] || ''
+          genre: genreMapping[item['artists']['genres']] || ''
        }
      } else {
        aggregation[key] = {
@ -75,13 +74,10 @@ const aggregateData = (data, groupByField, groupByType) => {
          url: `/music/artists/${sanitizeMediaString(item['artist_name'])}-${sanitizeMediaString(parseCountryField(item['artists']['country']))}`,
          image: item[groupByType]?.image || '',
          type: groupByType,
-          genre: genreMapping[item['artists']['genre']] || ''
+          genre: genreMapping[item['artists']['genres']] || ''
        }
      }
-      if (
-        groupByType === 'track' ||
-        groupByType === 'albums'
-      ) aggregation[key]['artist'] = item['artist_name']
+      if (groupByType === 'track' || groupByType === 'albums') aggregation[key]['artist'] = item['artist_name']
    }
    aggregation[key].plays++
  })
@ -95,12 +91,13 @@ const aggregateData = (data, groupByField, groupByType) => {
  return aggregatedData.filter(item => item.plays > 0)
 }

-const aggregateGenres = (data) => {
+const aggregateGenres = async (data) => {
  const genreAggregation = {}
-  const genreMapping = fetchGenreMapping()
+  const genreMapping = await fetchGenreMapping()

  data.forEach(item => {
-    const genre = genreMapping[item['artists']['genre']] || ''
+    const genre = genreMapping[item['artists']['genres']] || ''
+
    if (!genreAggregation[genre]) genreAggregation[genre] = { genre, plays: 0 }
    genreAggregation[genre]['plays']++
  })
@ -128,10 +125,10 @@ export default async function() {
  for (const [period, startPeriod] of Object.entries(periods)) {
    const periodData = await fetchDataForPeriod(startPeriod, selectFields, 'listens')
    results[period] = {
-      artists: aggregateData(periodData, 'artist_name', 'artists'),
-      albums: aggregateData(periodData, 'album_name', 'albums'),
-      tracks: aggregateData(periodData, 'track_name', 'track'),
-      genres: aggregateGenres(periodData),
+      artists: await aggregateData(periodData, 'artist_name', 'artists'),
+      albums: await aggregateData(periodData, 'album_name', 'albums'),
+      tracks: await aggregateData(periodData, 'track_name', 'track'),
+      genres: await aggregateGenres(periodData),
      totalTracks: periodData?.length?.toLocaleString('en-US')
    }
  }
@ -139,11 +136,11 @@ export default async function() {
  const recentData = await fetchDataForPeriod(DateTime.now().minus({ days: 7 }), selectFields, 'listens')

  results['recent'] = {
-    artists: aggregateData(recentData, 'artist_name', 'artists'),
-    albums: aggregateData(recentData, 'album_name', 'albums'),
-    tracks: aggregateData(recentData, 'track_name', 'track'),
-    tracksChronological: aggregateData(recentData, 'track_name', 'track').sort((a, b) => b.timestamp - a.timestamp),
-    genres: aggregateGenres(recentData),
+    artists: await aggregateData(recentData, 'artist_name', 'artists'),
+    albums: await aggregateData(recentData, 'album_name', 'albums'),
+    tracks: await aggregateData(recentData, 'track_name', 'track'),
+    tracksChronological: (await aggregateData(recentData, 'track_name', 'track')).sort((a, b) => b.timestamp - a.timestamp),
+    genres: await aggregateGenres(recentData),
    totalTracks: recentData?.length?.toLocaleString('en-US')
  }
  results['nowPlaying'] = results['recent']['tracksChronological'][0]
--- a/src/pages/main/music/tracks/3-months.html
+++ b/src/pages/main/music/tracks/3-months.html
@ -11,7 +11,7 @@ schema: music
 <a class="back-link-header link-icon flex-centered" href="/music" title="Go back to the music index page">{% tablericon "arrow-left" "Go back" %} Go back</a>
 {% if pagination.pageNumber == 0 %}
 <h2 class="page-header">{{ title }}</h2>
-<p>I've listened to <strong class="highlight-text">{{ music.threeMonth.totalTracks }} tracks</strong> over the last 3 months and most of what I've listened to has been <strong class="highlight-text">{{ music.threeMonth.genres | listToString: "genre", 5 }}</strong>.</p>
+<p>I've listened to <strong class="highlight-text">{{ music.threeMonth.totalTracks }} tracks</strong> over the last 3 months and most of what I've listened to has been {{ music.threeMonth.genres | sortByPlaysDescending: "plays" | genreStrings: "genre" | mediaLinks: "genre", 5 }}.</p>
 <p><strong class="highlight-text">See my</strong> <a href="/music/artists/three-months/">artists</a> or <a href="/music/albums/three-months/">albums</a> for this period.</p>
 <hr class="large-spacing" />
 {% endif %}
--- a/src/pages/main/music/tracks/this-month.html
+++ b/src/pages/main/music/tracks/this-month.html
@ -11,7 +11,7 @@ schema: music
 <a class="back-link-header link-icon flex-centered" href="/music" title="Go back to the music index page">{% tablericon "arrow-left" "Go back" %} Go back</a>
 {% if pagination.pageNumber == 0 %}
 <h2 class="page-header">{{ title }}</h2>
-<p>I've listened to <strong class="highlight-text">{{ music.month.totalTracks }} tracks</strong> this month and most of what I've listened to has been <strong class="highlight-text">{{ music.month.genres | listToString: "genre", 5 }}</strong>.</p>
+<p>I've listened to <strong class="highlight-text">{{ music.month.totalTracks }} tracks</strong> this month and most of what I've listened to has been {{ music.month.genres | sortByPlaysDescending: "plays" | genreStrings: "genre" | mediaLinks: "genre", 5 }}.</p>
 <p><strong class="highlight-text">See my</strong> <a href="/music/artists/this-month/">artists</a> or <a href="/music/albums/this-month/">albums</a> for this period.</p>
 <hr class="large-spacing" />
 {% endif %}
--- a/src/pages/main/music/tracks/this-week.html
+++ b/src/pages/main/music/tracks/this-week.html
@ -11,7 +11,7 @@ schema: music
 <a class="back-link-header link-icon flex-centered" href="/music" title="Go back to the music index page">{% tablericon "arrow-left" "Go back" %} Go back</a>
 {% if pagination.pageNumber == 0 %}
 <h2 class="page-header">{{ title }}</h2>
-<p>I've listened to <strong class="highlight-text">{{ music.week.totalTracks }} tracks</strong> this week and most of what I've listened to has been <strong class="highlight-text">{{ music.week.genres | listToString: "genre", 5 }}</strong>.</p>
+<p>I've listened to <strong class="highlight-text">{{ music.week.totalTracks }} tracks</strong> this week and most of what I've listened to has been {{ music.week.genres | sortByPlaysDescending: "plays" | genreStrings: "genre" | mediaLinks: "genre", 5 }}.</p>
 <p><strong class="highlight-text">See my</strong> <a href="/music/artists/this-week/">artists</a> or <a href="/music/albums/this-week/">albums</a> for this period.</p>
 <hr class="large-spacing" />
 {% endif %}