120 lines
4.8 KiB
Markdown
120 lines
4.8 KiB
Markdown
---
|
|
date: '2023-09-06'
|
|
title: 'Now page: grouping episodes of the same tv show'
|
|
description: "I made a minor update to how I'm normalizing TV data for display on my now page."
|
|
tags:
|
|
- javascript
|
|
- Eleventy
|
|
- development
|
|
---
|
|
|
|
I made a minor update to how I'm normalizing TV data for display on my now page.<!-- excerpt -->
|
|
|
|
By _minor_ I mean one of those things that may well break inexplicably depending on where the data lands. Instead of returning a normalized array based directly off the data returned by [Trakt](https://trakt.tv)'s API I'm instead collecting episodes in an array, checking as I iterate through the response to see if an episode of the same show exists and replacing that object with a mutated object designed to display the range of episodes watched for the show.
|
|
|
|
<img
|
|
srcset="
|
|
https://coryd.dev/.netlify/images/?url=https://coryd.dev/media/blog/grouped-tv.jpg&fit=cover&w=200&h=75&fm=webp&q=40 200w,
|
|
https://coryd.dev/.netlify/images/?url=https://coryd.dev/media/blog/grouped-tv.jpg&fit=cover&w=400&h=150&fm=webp&q=40 400w,
|
|
https://coryd.dev/.netlify/images/?url=https://coryd.dev/media/blog/grouped-tv.jpg&fit=cover&w=800&h=300&fm=webp&q=40 800w,
|
|
https://coryd.dev/.netlify/images/?url=https://coryd.dev/media/blog/grouped-tv.jpg&fit=cover&w=1600&h=600&fm=webp&q=40 1600w
|
|
"
|
|
sizes="(max-width: 450px) 200px,
|
|
(max-width: 850px) 400px,
|
|
(max-width: 1000px) 800px,
|
|
1600px"
|
|
src="https://coryd.dev/.netlify/images/?url=https://coryd.dev/media/blog/grouped-tv.jpg&fit=cover&w=1600&h=600&fm=webp&q=40"
|
|
alt="Grouped TV episodes"
|
|
class="image-banner"
|
|
width="768"
|
|
height="286"
|
|
/>
|
|
|
|
{% raw %}
|
|
|
|
```javascript
|
|
const EleventyFetch = require('@11ty/eleventy-fetch')
|
|
|
|
module.exports = async function () {
|
|
const TV_KEY = process.env.API_KEY_TRAKT
|
|
const url = 'https://api.trakt.tv/users/cdransf/history/shows'
|
|
const res = EleventyFetch(url, {
|
|
duration: '1h',
|
|
type: 'json',
|
|
fetchOptions: {
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
'trakt-api-version': 2,
|
|
'trakt-api-key': TV_KEY,
|
|
},
|
|
},
|
|
}).catch()
|
|
const data = await res
|
|
const episodes = []
|
|
data.reverse().forEach((episode) => {
|
|
const episodeNumber = episode['episode']['number']
|
|
const seasonNumber = episode['episode']['season']
|
|
|
|
if (episodes.find((e) => e.name === episode?.['show']?.['title'])) {
|
|
// cache the matched episode reference
|
|
const matchedEpisode = episodes.find((e) => e.name === episode?.['show']?.['title'])
|
|
|
|
// remove the matched episode from the array
|
|
episodes.splice(
|
|
episodes.findIndex((e) => e.name === episode['show']['title']),
|
|
1
|
|
)
|
|
|
|
// populate the subtext to show the appropriate range if it spans multiple seasons
|
|
// this yields a string in the format of S1E1 - S2E2 or S1E1 - E2
|
|
const subtext =
|
|
matchedEpisode['season'] === episode['episode']['season']
|
|
? `S${matchedEpisode['startingSeason'] || matchedEpisode['season']}E${
|
|
matchedEpisode['startingEpisode'] || matchedEpisode['episode']
|
|
} - E${episode['episode']['number']}`
|
|
: `S${matchedEpisode['startingSeason'] || matchedEpisode['season']}E${
|
|
matchedEpisode['startingEpisode'] || matchedEpisode['episode']
|
|
} - S${episode['episode']['season']}E${episode['episode']['number']}`
|
|
|
|
// push the new episode to the array
|
|
episodes.push({
|
|
name: matchedEpisode['name'],
|
|
title: matchedEpisode['title'],
|
|
url: `https://trakt.tv/shows/${episode['show']['ids']['slug']}`,
|
|
subtext,
|
|
image:
|
|
`https://cdn.coryd.dev/tv/${matchedEpisode['name']
|
|
.replace(':', '')
|
|
.replace(/\s+/g, '-')
|
|
.toLowerCase()}.jpg` || 'https://cdn.coryd.dev/tv/missing-tv.jpg',
|
|
startingEpisode: matchedEpisode['episode'],
|
|
startingSeason: matchedEpisode['season'],
|
|
episode: episodeNumber,
|
|
season: seasonNumber,
|
|
type: 'tv-range',
|
|
})
|
|
} else {
|
|
// if an episode with the same show name doesn't exist, push it to the array
|
|
episodes.push({
|
|
name: episode['show']['title'],
|
|
title: episode['episode']['title'],
|
|
url: `https://trakt.tv/shows/${episode['show']['ids']['slug']}/seasons/${episode['episode']['season']}/episodes/${episode['episode']['number']}`,
|
|
subtext: `${episode['show']['title']} • S${episode['episode']['season']}E${episode['episode']['number']}`,
|
|
image:
|
|
`https://cdn.coryd.dev/tv/${episode['show']['title']
|
|
.replace(':', '')
|
|
.replace(/\s+/g, '-')
|
|
.toLowerCase()}.jpg` || 'https://cdn.coryd.dev/tv/missing-tv.jpg',
|
|
episode: episodeNumber,
|
|
season: seasonNumber,
|
|
type: 'tv',
|
|
})
|
|
}
|
|
})
|
|
|
|
// return a reverse sorted array of episodes to match the watch order
|
|
return episodes.reverse()
|
|
}
|
|
```
|
|
|
|
{% endraw %}
|