update
This commit is contained in:
		
							parent
							
								
									326f1cceee
								
							
						
					
					
						commit
						4b54e359c1
					
				@ -43,6 +43,10 @@ html {
 | 
				
			|||||||
    scroll-behavior: smooth;
 | 
					    scroll-behavior: smooth;
 | 
				
			||||||
}
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					body.unlocalized {
 | 
				
			||||||
 | 
					    visibility: hidden;
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
body {
 | 
					body {
 | 
				
			||||||
    background-color: var(--primary);
 | 
					    background-color: var(--primary);
 | 
				
			||||||
    color: var(--text-primary);
 | 
					    color: var(--text-primary);
 | 
				
			||||||
 | 
				
			|||||||
@ -399,6 +399,20 @@ body.miniplayer-active #musicPlayerContainer {
 | 
				
			|||||||
    opacity: 0;
 | 
					    opacity: 0;
 | 
				
			||||||
    transition: opacity 0.2s ease;
 | 
					    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:hover .play-icon,
 | 
				
			||||||
.song-item.current-song .play-icon {
 | 
					.song-item.current-song .play-icon {
 | 
				
			||||||
    opacity: 1;
 | 
					    opacity: 1;
 | 
				
			||||||
 | 
				
			|||||||
@ -34,6 +34,7 @@ function localizeHtmlPage() {
 | 
				
			|||||||
 | 
					
 | 
				
			||||||
    document.documentElement.lang = chrome.i18n.getUILanguage().split('-')[0];
 | 
					    document.documentElement.lang = chrome.i18n.getUILanguage().split('-')[0];
 | 
				
			||||||
    document.title = document.title.replace(i18nRegex, replaceMsg);
 | 
					    document.title = document.title.replace(i18nRegex, replaceMsg);
 | 
				
			||||||
 | 
					    document.body.classList.remove('unlocalized');
 | 
				
			||||||
}
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
document.addEventListener('DOMContentLoaded', localizeHtmlPage);
 | 
					document.addEventListener('DOMContentLoaded', localizeHtmlPage);
 | 
				
			||||||
@ -509,6 +509,13 @@ export class MusicPlayer {
 | 
				
			|||||||
    playSong(cancion, index) {
 | 
					    playSong(cancion, index) {
 | 
				
			||||||
        if (!this.isReady || !this.audioPlayer || !cancion || !cancion.url) return;
 | 
					        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');
 | 
					        const miniplayer = document.getElementById('miniplayer');
 | 
				
			||||||
        if (miniplayer.style.display === 'none') {
 | 
					        if (miniplayer.style.display === 'none') {
 | 
				
			||||||
             gsap.fromTo(miniplayer, { y: '100%' }, { display: 'grid', y: '0%', duration: 0.5, ease: 'power3.out' });
 | 
					             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.currentSongArtistId = cancion.artistId;
 | 
				
			||||||
            this.markCurrentSong();
 | 
					            this.markCurrentSong();
 | 
				
			||||||
            this.markCurrentArtist(cancion.artistId);
 | 
					            this.markCurrentArtist(cancion.artistId);
 | 
				
			||||||
 | 
					            if (playIconElement) {
 | 
				
			||||||
 | 
					                playIconElement.className = 'fas fa-play play-icon';
 | 
				
			||||||
 | 
					            }
 | 
				
			||||||
        }).catch((error) => {
 | 
					        }).catch((error) => {
 | 
				
			||||||
            this.handleAudioError(_('playbackError'));
 | 
					            this.handleAudioError(_('playbackError'));
 | 
				
			||||||
 | 
					            if (playIconElement) {
 | 
				
			||||||
 | 
					                playIconElement.className = 'fas fa-play play-icon';
 | 
				
			||||||
 | 
					            }
 | 
				
			||||||
        });
 | 
					        });
 | 
				
			||||||
    }
 | 
					    }
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
				
			|||||||
@ -15,7 +15,7 @@
 | 
				
			|||||||
    <link rel="stylesheet" href="css/photos.css">
 | 
					    <link rel="stylesheet" href="css/photos.css">
 | 
				
			||||||
</head>
 | 
					</head>
 | 
				
			||||||
 | 
					
 | 
				
			||||||
<body>
 | 
					<body class="unlocalized">
 | 
				
			||||||
    <div id="particles-js"></div>
 | 
					    <div id="particles-js"></div>
 | 
				
			||||||
 | 
					
 | 
				
			||||||
    <header class="top-bar">
 | 
					    <header class="top-bar">
 | 
				
			||||||
@ -308,7 +308,7 @@
 | 
				
			|||||||
                            </div>
 | 
					                            </div>
 | 
				
			||||||
                            <div class="mb-3">
 | 
					                            <div class="mb-3">
 | 
				
			||||||
                                <label for="appLanguage" class="form-label">__MSG_settingsTmdbLangLabel__</label>
 | 
					                                <label for="appLanguage" class="form-label">__MSG_settingsTmdbLangLabel__</label>
 | 
				
			||||||
                                <select class="form-control" id="appLanguage">
 | 
					                                <select class="form-control filter-select" id="appLanguage">
 | 
				
			||||||
                                    <option value="es">__MSG_lang_es__</option>
 | 
					                                    <option value="es">__MSG_lang_es__</option>
 | 
				
			||||||
                                    <option value="en">__MSG_lang_en__</option>
 | 
					                                    <option value="en">__MSG_lang_en__</option>
 | 
				
			||||||
                                    <option value="fr">__MSG_lang_fr__</option>
 | 
					                                    <option value="fr">__MSG_lang_fr__</option>
 | 
				
			||||||
 | 
				
			|||||||
		Loading…
	
	
			
			x
			
			
		
	
		Reference in New Issue
	
	Block a user