vndangkhoa/kv-music
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

slider

Browse source
This commit is contained in:
Eduard Prigoana 2025-10-23 00:45:14 +03:00
parent 8f2fefbb84
commit 0f4e37ff4f
1 changed files with 83 additions and 35 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

118
js/app.js
View file

@ -1036,50 +1036,98 @@ document.addEventListener('DOMContentLoaded', async () => {
playPauseBtn.innerHTML = SVG_PLAY; playPauseBtn.innerHTML = SVG_PLAY;
}); });
let isSeeking = false; let isSeeking = false;
let wasPlaying = false; let wasPlaying = false;
let isAdjustingVolume = false;
const seek = (bar, fill, event, setter) => { const seek = (bar, fill, event, setter) => {
const rect = bar.getBoundingClientRect(); const rect = bar.getBoundingClientRect();
const position = Math.max(0, Math.min(1, (event.clientX - rect.left) / rect.width)); const position = Math.max(0, Math.min(1, (event.clientX - rect.left) / rect.width));
setter(position); setter(position);
}; };
progressBar.addEventListener('mousedown', () => { progressBar.addEventListener('mousedown', (e) => {
isSeeking = true; isSeeking = true;
wasPlaying = !audioPlayer.paused; wasPlaying = !audioPlayer.paused;
if (wasPlaying) audioPlayer.pause(); if (wasPlaying) audioPlayer.pause();
});
seek(progressBar, progressFill, e, position => {
document.addEventListener('mouseup', (e) => { if (!isNaN(audioPlayer.duration)) {
if (isSeeking) { audioPlayer.currentTime = position * audioPlayer.duration;
seek(progressBar, progressFill, e, position => { progressFill.style.width = `${position * 100}%`;
if (!isNaN(audioPlayer.duration)) {
audioPlayer.currentTime = position * audioPlayer.duration;
player.updateMediaSessionPositionState();
if (wasPlaying) audioPlayer.play();
}
});
isSeeking = false;
} }
}); });
});
progressBar.addEventListener('click', e => { document.addEventListener('mousemove', (e) => {
if (!isSeeking) { if (isSeeking) {
seek(progressBar, progressFill, e, position => { seek(progressBar, progressFill, e, position => {
if (!isNaN(audioPlayer.duration)) { if (!isNaN(audioPlayer.duration)) {
audioPlayer.currentTime = position * audioPlayer.duration; audioPlayer.currentTime = position * audioPlayer.duration;
player.updateMediaSessionPositionState(); progressFill.style.width = `${position * 100}%`;
} }
}); });
} }
});
if (isAdjustingVolume) {
volumeBar.addEventListener('click', e => {
seek(volumeBar, volumeFill, e, position => { seek(volumeBar, volumeFill, e, position => {
audioPlayer.volume = position; audioPlayer.volume = position;
volumeFill.style.width = `${position * 100}%`;
volumeBar.style.setProperty('--volume-level', `${position * 100}%`);
localStorage.setItem('volume', position);
}); });
}
});
document.addEventListener('mouseup', (e) => {
if (isSeeking) {
seek(progressBar, progressFill, e, position => {
if (!isNaN(audioPlayer.duration)) {
audioPlayer.currentTime = position * audioPlayer.duration;
player.updateMediaSessionPositionState();
if (wasPlaying) audioPlayer.play();
}
});
isSeeking = false;
}
if (isAdjustingVolume) {
isAdjustingVolume = false;
}
});
progressBar.addEventListener('click', e => {
if (!isSeeking) {
seek(progressBar, progressFill, e, position => {
if (!isNaN(audioPlayer.duration)) {
audioPlayer.currentTime = position * audioPlayer.duration;
player.updateMediaSessionPositionState();
}
});
}
});
volumeBar.addEventListener('mousedown', (e) => {
isAdjustingVolume = true;
seek(volumeBar, volumeFill, e, position => {
audioPlayer.volume = position;
volumeFill.style.width = `${position * 100}%`;
volumeBar.style.setProperty('--volume-level', `${position * 100}%`);
localStorage.setItem('volume', position);
}); });
});
volumeBar.addEventListener('click', e => {
if (!isAdjustingVolume) {
seek(volumeBar, volumeFill, e, position => {
audioPlayer.volume = position;
volumeFill.style.width = `${position * 100}%`;
volumeBar.style.setProperty('--volume-level', `${position * 100}%`);
localStorage.setItem('volume', position);
});
}
});
const updateVolumeUI = () => { const updateVolumeUI = () => {
const { volume, muted } = audioPlayer; const { volume, muted } = audioPlayer;