diff --git a/css/base.css b/css/base.css
index 035acfe..c47a966 100644
--- a/css/base.css
+++ b/css/base.css
@@ -43,6 +43,10 @@ html {
scroll-behavior: smooth;
}
+body.unlocalized {
+ visibility: hidden;
+}
+
body {
background-color: var(--primary);
color: var(--text-primary);
diff --git a/css/music-player.css b/css/music-player.css
index 76dee16..714102a 100644
--- a/css/music-player.css
+++ b/css/music-player.css
@@ -399,6 +399,20 @@ body.miniplayer-active #musicPlayerContainer {
opacity: 0;
transition: opacity 0.2s ease;
}
+
+@keyframes spin-song {
+ 0% { transform: rotate(0deg); }
+ 100% { transform: rotate(360deg); }
+}
+
+.song-item .loading-spinner {
+ width: 16px;
+ height: 16px;
+ border: 2px solid var(--text-secondary);
+ border-top-color: var(--accent);
+ border-radius: 50%;
+ animation: spin-song 0.8s linear infinite;
+}
.song-item:hover .play-icon,
.song-item.current-song .play-icon {
opacity: 1;
diff --git a/js/i18n.js b/js/i18n.js
index 0a0cd0b..218172c 100644
--- a/js/i18n.js
+++ b/js/i18n.js
@@ -34,6 +34,7 @@ function localizeHtmlPage() {
document.documentElement.lang = chrome.i18n.getUILanguage().split('-')[0];
document.title = document.title.replace(i18nRegex, replaceMsg);
+ document.body.classList.remove('unlocalized');
}
document.addEventListener('DOMContentLoaded', localizeHtmlPage);
\ No newline at end of file
diff --git a/js/musicPlayer.js b/js/musicPlayer.js
index ad428f4..1ce8232 100644
--- a/js/musicPlayer.js
+++ b/js/musicPlayer.js
@@ -509,6 +509,13 @@ export class MusicPlayer {
playSong(cancion, index) {
if (!this.isReady || !this.audioPlayer || !cancion || !cancion.url) return;
+ const songItemElement = document.querySelector(`.song-item[data-index='${index}']`);
+ const playIconElement = songItemElement ? songItemElement.querySelector('.play-icon') : null;
+
+ if (playIconElement) {
+ playIconElement.className = 'loading-spinner';
+ }
+
const miniplayer = document.getElementById('miniplayer');
if (miniplayer.style.display === 'none') {
gsap.fromTo(miniplayer, { y: '100%' }, { display: 'grid', y: '0%', duration: 0.5, ease: 'power3.out' });
@@ -539,8 +546,14 @@ export class MusicPlayer {
this.currentSongArtistId = cancion.artistId;
this.markCurrentSong();
this.markCurrentArtist(cancion.artistId);
+ if (playIconElement) {
+ playIconElement.className = 'fas fa-play play-icon';
+ }
}).catch((error) => {
this.handleAudioError(_('playbackError'));
+ if (playIconElement) {
+ playIconElement.className = 'fas fa-play play-icon';
+ }
});
}
diff --git a/plex.html b/plex.html
index 7f86f27..eb82da2 100644
--- a/plex.html
+++ b/plex.html
@@ -15,7 +15,7 @@
-
+