feat: now playing display
This commit is contained in:
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
|
# system files
|
||||||
.DS_Store
|
.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>
|
</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">
|
<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 }}
|
{{ content }}
|
||||||
|
{% capture js %}
|
||||||
|
{% render "../assets/scripts/script.js" %}
|
||||||
|
{% endcapture %}
|
||||||
|
<script>
|
||||||
|
{{ js }}
|
||||||
|
</script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
|
@ -15,5 +15,12 @@
|
||||||
<span class="pt-1 md:pt-0 mr-1">{{ status.emoji }}</span>
|
<span class="pt-1 md:pt-0 mr-1">{{ status.emoji }}</span>
|
||||||
<span>{{ status.content }}</span>
|
<span>{{ status.content }}</span>
|
||||||
</p>
|
</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>
|
||||||
</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)
|
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) {
|
@media (prefers-color-scheme: dark) {
|
||||||
body {
|
body {
|
||||||
--pagefind-ui-primary: theme(colors.purple.400);
|
--pagefind-ui-primary: theme(colors.purple.400);
|
||||||
|
@ -209,4 +214,8 @@ code[class*=language-], pre[class*=language-] {
|
||||||
color: theme(colors.gray.900);
|
color: theme(colors.gray.900);
|
||||||
background: theme(colors.purple.400);
|
background: theme(colors.purple.400);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.text--blur {
|
||||||
|
text-shadow: 0 0 5px rgba(255,255,255,0.5);
|
||||||
|
}
|
||||||
}
|
}
|
Reference in a new issue