diff --git a/media_server/static/js/app.js b/media_server/static/js/app.js
index f84d7c7..903e064 100644
--- a/media_server/static/js/app.js
+++ b/media_server/static/js/app.js
@@ -240,6 +240,72 @@
setTimeout(() => { isUserAdjustingVolume = false; }, 500);
});
+ // Mini Player: Intersection Observer to show/hide when main player scrolls out of view
+ const playerContainer = document.querySelector('.player-container');
+ const miniPlayer = document.getElementById('mini-player');
+
+ const observerOptions = {
+ root: null, // viewport
+ threshold: 0.1, // trigger when 10% visible
+ rootMargin: '0px'
+ };
+
+ const observerCallback = (entries) => {
+ entries.forEach(entry => {
+ if (entry.isIntersecting) {
+ // Main player is visible - hide mini player
+ miniPlayer.classList.add('hidden');
+ } else {
+ // Main player is scrolled out of view - show mini player
+ miniPlayer.classList.remove('hidden');
+ }
+ });
+ };
+
+ const observer = new IntersectionObserver(observerCallback, observerOptions);
+ observer.observe(playerContainer);
+
+ // Mini player progress bar click to seek
+ const miniProgressBar = document.getElementById('mini-progress-bar');
+ miniProgressBar.addEventListener('click', (e) => {
+ const rect = miniProgressBar.getBoundingClientRect();
+ const percent = (e.clientX - rect.left) / rect.width;
+ const position = percent * currentDuration;
+ seek(position);
+ });
+
+ // Mini player volume slider
+ const miniVolumeSlider = document.getElementById('mini-volume-slider');
+ miniVolumeSlider.addEventListener('input', (e) => {
+ isUserAdjustingVolume = true;
+ const volume = parseInt(e.target.value);
+ document.getElementById('mini-volume-display').textContent = `${volume}%`;
+ document.getElementById('volume-display').textContent = `${volume}%`;
+ document.getElementById('volume-slider').value = volume;
+
+ // Throttle volume updates while dragging
+ if (volumeUpdateTimer) {
+ clearTimeout(volumeUpdateTimer);
+ }
+ volumeUpdateTimer = setTimeout(() => {
+ setVolume(volume);
+ volumeUpdateTimer = null;
+ }, 50);
+ });
+
+ miniVolumeSlider.addEventListener('change', (e) => {
+ // Clear any pending throttled update
+ if (volumeUpdateTimer) {
+ clearTimeout(volumeUpdateTimer);
+ volumeUpdateTimer = null;
+ }
+
+ // Send final volume update immediately
+ const volume = parseInt(e.target.value);
+ setVolume(volume);
+ setTimeout(() => { isUserAdjustingVolume = false; }, 500);
+ });
+
// Progress bar click to seek
const progressBar = document.getElementById('progress-bar');
progressBar.addEventListener('click', (e) => {
@@ -417,6 +483,10 @@
document.getElementById('artist').textContent = status.artist || '';
document.getElementById('album').textContent = status.album || '';
+ // Update mini player info
+ document.getElementById('mini-track-title').textContent = status.title || t('player.no_media');
+ document.getElementById('mini-artist').textContent = status.artist || '';
+
// Update state
const previousState = currentState;
currentState = status.state;
@@ -424,12 +494,13 @@
// Update album art
const artImg = document.getElementById('album-art');
- if (status.album_art_url) {
- const token = localStorage.getItem('media_server_token');
- artImg.src = `/api/media/artwork?token=${encodeURIComponent(token)}&_=${Date.now()}`;
- } else {
- artImg.src = "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 300'%3E%3Crect fill='%23282828' width='300' height='300'/%3E%3Cpath fill='%236a6a6a' d='M150 80c-38.66 0-70 31.34-70 70s31.34 70 70 70 70-31.34 70-70-31.34-70-70-70zm0 20c27.614 0 50 22.386 50 50s-22.386 50-50 50-50-22.386-50-50 22.386-50 50-50zm0 30a20 20 0 100 40 20 20 0 000-40z'/%3E%3C/svg%3E";
- }
+ const miniArtImg = document.getElementById('mini-album-art');
+ const artworkUrl = status.album_art_url
+ ? `/api/media/artwork?token=${encodeURIComponent(localStorage.getItem('media_server_token'))}&_=${Date.now()}`
+ : "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 300'%3E%3Crect fill='%23282828' width='300' height='300'/%3E%3Cpath fill='%236a6a6a' d='M150 80c-38.66 0-70 31.34-70 70s31.34 70 70 70 70-31.34 70-70-31.34-70-70-70zm0 20c27.614 0 50 22.386 50 50s-22.386 50-50 50-50-22.386-50-50 22.386-50 50-50zm0 30a20 20 0 100 40 20 20 0 000-40z'/%3E%3C/svg%3E";
+
+ artImg.src = artworkUrl;
+ miniArtImg.src = artworkUrl;
// Update progress
if (status.duration && status.position !== null) {
@@ -447,6 +518,8 @@
if (!isUserAdjustingVolume) {
document.getElementById('volume-slider').value = status.volume;
document.getElementById('volume-display').textContent = `${status.volume}%`;
+ document.getElementById('mini-volume-slider').value = status.volume;
+ document.getElementById('mini-volume-display').textContent = `${status.volume}%`;
}
// Update mute state
@@ -460,6 +533,7 @@
document.getElementById('btn-play-pause').disabled = !hasMedia;
document.getElementById('btn-next').disabled = !hasMedia;
document.getElementById('btn-previous').disabled = !hasMedia;
+ document.getElementById('mini-btn-play-pause').disabled = !hasMedia;
// Start/stop position interpolation based on playback state
if (status.state === 'playing' && previousState !== 'playing') {
@@ -473,27 +547,32 @@
const stateText = document.getElementById('playback-state');
const stateIcon = document.getElementById('state-icon');
const playPauseIcon = document.getElementById('play-pause-icon');
+ const miniPlayPauseIcon = document.getElementById('mini-play-pause-icon');
switch(state) {
case 'playing':
stateText.textContent = t('state.playing');
stateIcon.innerHTML = '
';
playPauseIcon.innerHTML = '
';
+ miniPlayPauseIcon.innerHTML = '
';
break;
case 'paused':
stateText.textContent = t('state.paused');
stateIcon.innerHTML = '
';
playPauseIcon.innerHTML = '
';
+ miniPlayPauseIcon.innerHTML = '
';
break;
case 'stopped':
stateText.textContent = t('state.stopped');
stateIcon.innerHTML = '
';
playPauseIcon.innerHTML = '
';
+ miniPlayPauseIcon.innerHTML = '
';
break;
default:
stateText.textContent = t('state.idle');
stateIcon.innerHTML = '
';
playPauseIcon.innerHTML = '
';
+ miniPlayPauseIcon.innerHTML = '
';
}
}
@@ -503,6 +582,11 @@
document.getElementById('current-time').textContent = formatTime(position);
document.getElementById('total-time').textContent = formatTime(duration);
document.getElementById('progress-bar').dataset.duration = duration;
+
+ // Update mini player progress
+ document.getElementById('mini-progress-fill').style.width = `${percent}%`;
+ document.getElementById('mini-current-time').textContent = formatTime(position);
+ document.getElementById('mini-total-time').textContent = formatTime(duration);
}
function startPositionInterpolation() {
@@ -533,10 +617,16 @@
function updateMuteIcon(muted) {
const muteIcon = document.getElementById('mute-icon');
+ const miniMuteIcon = document.getElementById('mini-mute-icon');
+ const mutedPath = '
';
+ const unmutedPath = '
';
+
if (muted) {
- muteIcon.innerHTML = '
';
+ muteIcon.innerHTML = mutedPath;
+ miniMuteIcon.innerHTML = mutedPath;
} else {
- muteIcon.innerHTML = '
';
+ muteIcon.innerHTML = unmutedPath;
+ miniMuteIcon.innerHTML = unmutedPath;
}
}
+