Skip to content

Commit

Permalink
Merge pull request #89 from yanosea/88-spotify-status-is-not-displaye…
Browse files Browse the repository at this point in the history 
…d-after-screen-transition

🐞fix: fixed problem with spotify status not displaying after screen t…
  • Loading branch information
@yanosea
yanosea authored May 31, 2024
2 parents 5e2624d + f82608a commit cc0dae9
Showing 1 changed file with 41 additions and 35 deletions.
76 changes: 41 additions & 35 deletions front/src/components/SpotifyStatus.astro
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,25 +7,27 @@ import { Icon } from "astro-icon/components";
id="nowPlaying"
class="flex flex-col sm:flex-row w-full justify-center items-center space-x-0 sm:space-x-4 space-y-2 sm:space-y-0"
style="display: none"
transition:persist
>
<span class="flex flex-col justify-center items-center">
<span
class="flex flex-col justify-center items-center space-y-1 hover:text-blue transition-colors"
>
<p class="flex items-center transition-colors">
<Icon class="w-4 h-4" name="ri:spotify-fill" />
<span class="ml-2">now playing</span>
</p>
<a id="nowPlayingImgLink">
<a id="nowPlayingImgLink" transition:persist>
<span class="flex flex-col justify-center items-center">
<span
class="flex flex-col justify-center items-center space-y-1 hover:text-blue transition-colors"
>
<p class="flex items-center transition-colors">
<Icon class="w-4 h-4" name="ri:spotify-fill" />
<span class="ml-2">now playing</span>
</p>
<img
id="nowPlayingImgSrc"
src=""
alt="album cover"
class="object-scale-down h-24 w-24"
transition:persist
/>
</a>
</span>
</span>
</span>
</a>
<span class="flex flex-col justify-center space-y-1">
<a
href="https://open.spotify.com/user/314sfaf6ikzxgxpur7hwflapmc4m"
Expand All @@ -38,22 +40,23 @@ import { Icon } from "astro-icon/components";
<span class="ml-2 text-green">yanosea online!</span>
</p>
</a>
<a id="nowPlayingTrackLink" href="" target="_blank">
<a id="nowPlayingTrackLink" href="" target="_blank" transition:persist>
<p class="flex items-center transition-colors hover:text-blue">
<Icon class="w-4 h-4" name="ph:music-note-fill" />
<span id="nowPlayingTrackName" class="ml-2"></span>
<span id="nowPlayingTrackName" class="ml-2" transition:persist></span>
</p>
</a>
<a id="nowPlayingAlbumLink" href="" target="_blank">
<a id="nowPlayingAlbumLink" href="" target="_blank" transition:persist>
<p class="flex items-center transition-colors hover:text-blue">
<Icon class="w-4 h-4" name="ph:disc-fill" />
<span id="nowPlayingAlbumName" class="ml-2"></span>
<span id="nowPlayingAlbumName" class="ml-2" transition:persist></span>
</p>
</a>
<a id="nowPlayingArtistLink" href="" target="_blank">
<a id="nowPlayingArtistLink" href="" target="_blank" transition:persist>
<p class="flex items-center transition-colors hover:text-blue">
<Icon class="w-4 h-4" name="ph:microphone-stage-fill" />
<span id="nowPlayingArtistName" class="ml-2"></span>
<span id="nowPlayingArtistName" class="ml-2" transition:persist
></span>
</p>
</a>
</span>
Expand All @@ -63,25 +66,27 @@ import { Icon } from "astro-icon/components";
id="lastPlayed"
class="flex flex-col sm:flex-row w-full justify-center items-center space-x-0 sm:space-x-4 space-y-2 sm:space-y-0"
style="display: none"
transition:persist
>
<span class="flex flex-col justify-center items-center">
<span
class="flex flex-col justify-center items-center space-y-1 hover:text-blue transition-colors"
>
<p class="flex items-center transition-colors">
<Icon class="w-4 h-4" name="ri:spotify-fill" />
<span class="ml-2">last played</span>
</p>
<a id="lastPlayedImgLink">
<a id="lastPlayedImgLink" transition:persist>
<span class="flex flex-col justify-center items-center">
<span
class="flex flex-col justify-center items-center space-y-1 hover:text-blue transition-colors"
>
<p class="flex items-center transition-colors">
<Icon class="w-4 h-4" name="ri:spotify-fill" />
<span class="ml-2">last played</span>
</p>
<img
id="lastPlayedImgSrc"
src=""
alt="album cover"
class="object-scale-down h-24 w-24"
transition:persist
/>
</a>
</span>
</span>
</span>
</a>
<span class="flex flex-col justify-center space-y-1">
<a
href="https://open.spotify.com/user/314sfaf6ikzxgxpur7hwflapmc4m"
Expand All @@ -96,24 +101,25 @@ import { Icon } from "astro-icon/components";
</a>
<p class="flex items-center transition-colors">
<Icon class="w-4 h-4" name="ph:clock-fill" />
<span id="lastPlayedPlayedAt" class="ml-2"></span>
<span id="lastPlayedPlayedAt" class="ml-2" transition:persist></span>
</p>
<a id="lastPlayedTrackLink" href="" target="_blank">
<a id="lastPlayedTrackLink" href="" target="_blank" transition:persist>
<p class="flex items-center transition-colors hover:text-blue">
<Icon class="w-4 h-4" name="ph:music-note-fill" />
<span id="lastPlayedTrackName" class="ml-2"></span>
<span id="lastPlayedTrackName" class="ml-2" transition:persist></span>
</p>
</a>
<a id="lastPlayedAlbumLink" href="" target="_blank">
<a id="lastPlayedAlbumLink" href="" target="_blank" transition:persist>
<p class="flex items-center transition-colors hover:text-blue">
<Icon class="w-4 h-4" name="ph:disc-fill" />
<span id="lastPlayedAlbumName" class="ml-2"></span>
<span id="lastPlayedAlbumName" class="ml-2" transition:persist></span>
</p>
</a>
<a id="lastPlayedArtistLink" href="" target="_blank">
<a id="lastPlayedArtistLink" href="" target="_blank" transition:persist>
<p class="flex items-center transition-colors hover:text-blue">
<Icon class="w-4 h-4" name="ph:microphone-stage-fill" />
<span id="lastPlayedArtistName" class="ml-2"></span>
<span id="lastPlayedArtistName" class="ml-2" transition:persist
></span>
</p>
</a>
</span>
Expand Down

0 comments on commit cc0dae9

Please sign in to comment.