feat: now playing display
This commit is contained in:
Cory Dransfeldt
parent
8e93412d7a
commit
f6b007356b
6 changed files with 105 additions and 0 deletions
3
.gitignore
vendored
3
.gitignore
vendored
|
|
@ -9,3 +9,6 @@ node_modules
|
|||
|
||||
# system files
|
||||
.DS_Store
|
||||
|
||||
# netlify
|
||||
.netlify
|
||||
|
|
|
|||
40
netlify/edge-functions/now-playing.js
Normal file
40
netlify/edge-functions/now-playing.js
Normal file
|
|
@ -0,0 +1,40 @@
|
|||
const emojiMap = (genre, artist) => {
|
||||
if (artist === 'David Bowie') return '👨🎤'
|
||||
if (genre.includes('metal')) return '🤘'
|
||||
if (genre.includes('emo')) return '😢'
|
||||
if (genre.includes('alternative')) return '🎸'
|
||||
if (genre.includes('grind') || genre.includes('powerviolence')) return '🫨'
|
||||
if (genre.includes('country') || genre.includes('americana') || genre.includes('bluegrass'))
|
||||
return '🪕'
|
||||
if (genre.includes('post-punk')) return '😔'
|
||||
if (genre.includes('punk') || genre.includes('hardcore')) return '✊'
|
||||
if (genre.includes('hip hop')) return '🎤'
|
||||
if (genre.includes('dance') || genre.includes('electronic')) return '💻'
|
||||
return '🎧'
|
||||
}
|
||||
|
||||
export default async () => {
|
||||
// eslint-disable-next-line no-undef
|
||||
const MUSIC_KEY = Netlify.env.get('API_KEY_LASTFM')
|
||||
const trackUrl = `https://ws.audioscrobbler.com/2.0/?method=user.getrecenttracks&user=cdrn_&api_key=${MUSIC_KEY}&limit=1&format=json`
|
||||
const trackRes = await fetch(trackUrl, {
|
||||
type: 'json',
|
||||
}).catch()
|
||||
const trackData = await trackRes.json()
|
||||
const track = trackData['recenttracks']['track'][0]
|
||||
const genreUrl = `https://musicbrainz.org/ws/2/artist/${track['artist']['mbid']}?inc=aliases+genres&fmt=json`
|
||||
const genreRes = await fetch(genreUrl, {
|
||||
type: 'json',
|
||||
}).catch()
|
||||
const genreData = await genreRes.json()
|
||||
const genre = genreData.genres.sort((a, b) => b.count - a.count)[0]['name']
|
||||
|
||||
return Response.json({
|
||||
artist: track['artist']['#text'],
|
||||
title: track['name'],
|
||||
genre,
|
||||
emoji: emojiMap(genre, track['artist']['#text']),
|
||||
})
|
||||
}
|
||||
|
||||
export const config = { path: '/api/now-playing' }
|
||||
|
|
@ -69,5 +69,11 @@
|
|||
</head>
|
||||
<body class="dark:text-white bg-white dark:bg-gray-900 font-sans text-gray-800 scrollbar-thin scrollbar-thumb-purple-500 scrollbar-track-purple-100">
|
||||
{{ content }}
|
||||
{% capture js %}
|
||||
{% render "../assets/scripts/script.js" %}
|
||||
{% endcapture %}
|
||||
<script>
|
||||
{{ js }}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -15,5 +15,12 @@
|
|||
<span class="pt-1 md:pt-0 mr-1">{{ status.emoji }}</span>
|
||||
<span>{{ status.content }}</span>
|
||||
</p>
|
||||
<p id="now-playing" class="mb-0 flex flex-row items-start md:items-center">
|
||||
<span id="now-playing-loading" class="text--blur">Loading...</span>
|
||||
<span id="now-playing-display">
|
||||
<span id="now-playing-emoji" class="pt-1 md:pt-0 mr-1"></span>
|
||||
<span id="now-playing-content"></span>
|
||||
</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
40
src/assets/scripts/script.js
Normal file
40
src/assets/scripts/script.js
Normal file
|
|
@ -0,0 +1,40 @@
|
|||
;(async function () {
|
||||
const nowPlaying = document.getElementById('now-playing')
|
||||
if (nowPlaying) {
|
||||
const emoji = document.getElementById('now-playing-emoji')
|
||||
const content = document.getElementById('now-playing-content')
|
||||
const loading = document.getElementById('now-playing-loading')
|
||||
|
||||
try {
|
||||
const cache = JSON.parse(localStorage.getItem('now-playing'))
|
||||
if (cache) {
|
||||
loading.style.display = 'none'
|
||||
emoji.innerText = cache.emoji
|
||||
content.innerText = `${cache.title} by ${cache.artist}`
|
||||
emoji.classList.remove('hidden')
|
||||
content.classList.remove('hidden')
|
||||
}
|
||||
} catch (e) {
|
||||
/* quiet catch */
|
||||
}
|
||||
|
||||
const res = await fetch('/api/now-playing', {
|
||||
type: 'json',
|
||||
}).catch()
|
||||
const data = await res.json()
|
||||
|
||||
try {
|
||||
localStorage.setItem('now-playing', JSON.stringify(data))
|
||||
} catch (e) {
|
||||
/* quiet catch */
|
||||
}
|
||||
|
||||
if (!JSON.parse(localStorage.getItem('now-playing')) && !data) nowPlaying.remove()
|
||||
|
||||
loading.style.display = 'none'
|
||||
emoji.innerText = data.emoji
|
||||
content.innerText = `${data.title} by ${data.artist}`
|
||||
emoji.classList.remove('hidden')
|
||||
content.classList.remove('hidden')
|
||||
}
|
||||
})()
|
||||
|
|
@ -174,6 +174,11 @@ code[class*=language-], pre[class*=language-] {
|
|||
color: theme(colors.pink.500)
|
||||
}
|
||||
|
||||
.text--blur {
|
||||
color: transparent;
|
||||
text-shadow: 0 0 5px rgba(0,0,0,0.5);
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
body {
|
||||
--pagefind-ui-primary: theme(colors.purple.400);
|
||||
|
|
@ -209,4 +214,8 @@ code[class*=language-], pre[class*=language-] {
|
|||
color: theme(colors.gray.900);
|
||||
background: theme(colors.purple.400);
|
||||
}
|
||||
|
||||
.text--blur {
|
||||
text-shadow: 0 0 5px rgba(255,255,255,0.5);
|
||||
}
|
||||
}
|
||||
Reference in a new issue