102 lines
1.9 KiB
Svelte
102 lines
1.9 KiB
Svelte
<!-- Planned to make it a vinyl but got lazy and made it a CD-->
|
|
<script>
|
|
import { onMount } from 'svelte';
|
|
import { track, loading, error, fetchTrack } from '../stores/trackStore.js';
|
|
|
|
onMount(() => {
|
|
if ($track) {
|
|
console.log('Loaded cached song');
|
|
} else {
|
|
fetchTrack();
|
|
}
|
|
|
|
const interval = setInterval(() => {
|
|
if (!$track) {
|
|
fetchTrack();
|
|
}
|
|
}, 2000);
|
|
|
|
return () => clearInterval(interval);
|
|
});
|
|
</script>
|
|
|
|
{#if $loading}
|
|
<p>Loading latest track...</p>
|
|
{:else if $error}
|
|
<p style="color:red">Error: {$error}</p>
|
|
{:else if $track}
|
|
<div class="track-container">
|
|
<a href={$track.url} target="_blank" rel="noopener noreferrer" class="track-link">
|
|
<div class="vinyl">
|
|
<img src={$track.image} alt="Album cover" />
|
|
</div>
|
|
<div class="track-info">
|
|
<div class="track-name">{$track.name}</div>
|
|
<div class="track-artist">{$track.artist} — {$track.album}</div>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
{:else}
|
|
<p>No track info available.</p>
|
|
{/if}
|
|
|
|
<style>
|
|
.track-container {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
margin: 20px 0;
|
|
}
|
|
|
|
.track-link {
|
|
text-decoration: none;
|
|
color: inherit;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 10px;
|
|
}
|
|
|
|
@keyframes spin {
|
|
from { transform: rotate(0deg); }
|
|
to { transform: rotate(360deg); }
|
|
}
|
|
|
|
.vinyl {
|
|
width: 64px;
|
|
height: 64px;
|
|
border-radius: 50%;
|
|
overflow: hidden;
|
|
border: 2px solid black;
|
|
box-shadow: 0 0 5px rgba(0,0,0,0.5);
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
position: relative;
|
|
animation: spin 5s linear infinite;
|
|
}
|
|
|
|
.vinyl::after {
|
|
content: '';
|
|
position: absolute;
|
|
width: 12px;
|
|
height: 12px;
|
|
background: black;
|
|
border-radius: 50%;
|
|
z-index: 2;
|
|
}
|
|
|
|
|
|
.track-info {
|
|
text-align: center;
|
|
}
|
|
|
|
.track-name {
|
|
font-weight: bold;
|
|
}
|
|
|
|
.track-artist {
|
|
font-size: 0.9rem;
|
|
color: gray;
|
|
}
|
|
</style>
|