support dragging progress bar on mobile
Hunter
Tuesday, October 28th, 2025 at 1:44 PM
248 if (!playerReady) return;
249
250 const rect = progressBar.getBoundingClientRect();
- const clickPosition = event.clientX - rect.left;
251 + // Support both mouse and touch events
252 + const clientX = event.touches ? event.touches[0].clientX : event.clientX;
253 + const clickPosition = clientX - rect.left;
254 const clickPercentage = Math.max(0, Math.min(1, clickPosition / rect.width));
255
256 progressBar.style.setProperty('--progress', `${clickPercentage * 100}%`);
321 playPauseBtn.addEventListener('click', togglePlayPause);
322 nextBtn.addEventListener('click', nextSong);
323 prevBtn.addEventListener('click', prevSong);
324 +
325 +// Mouse events for desktop
326 progressContainer.addEventListener('mousedown', onProgressMouseDown);
327 document.addEventListener('mousemove', onProgressMouseMove);
328 document.addEventListener('mouseup', onProgressMouseUp);
329
330 +// Touch events for mobile
331 +progressContainer.addEventListener('touchstart', onProgressMouseDown, { passive: false });
332 +document.addEventListener('touchmove', onProgressMouseMove, { passive: false });
333 +document.addEventListener('touchend', onProgressMouseUp);
334 +
335 // Keyboard controls
336 document.addEventListener('keydown', function(event) {
337 if (!playerReady) return;