458 lines
15 KiB
JavaScript
458 lines
15 KiB
JavaScript
const AUDIO_PLAYER_STATE_KEY = 'globalAudioPlayerState';
|
||
|
||
class SimpleAudioPlayer {
|
||
constructor({
|
||
audioSelector = '#globalAudio',
|
||
playBtnSelector = '.player-button',
|
||
timelineSelector = '.timeline',
|
||
infoSelector = '#timeInfo',
|
||
nowPlayingSelector = '#nowPlayingInfo',
|
||
containerSelector = '#audioPlayerContainer',
|
||
footerSelector = 'footer',
|
||
minimizeBtnSelector = '.minimize-button'
|
||
} = {}) {
|
||
// Elements
|
||
this.audio = document.querySelector(audioSelector);
|
||
this.playBtn = document.querySelector(playBtnSelector);
|
||
this.timeline = document.querySelector(timelineSelector);
|
||
this.timeInfo = document.querySelector(infoSelector);
|
||
this.nowInfo = document.querySelector(nowPlayingSelector);
|
||
this.container = document.querySelector(containerSelector);
|
||
this.footer = document.querySelector(footerSelector);
|
||
this.minBtn = document.querySelector(minimizeBtnSelector);
|
||
|
||
// State
|
||
this.isSeeking = false;
|
||
this.rafId = null;
|
||
this.abortCtrl = null;
|
||
this._hasMetadata = false;
|
||
this._posInterval = null;
|
||
this._posIntervalMs = 1000;
|
||
|
||
// Pre-compute icons once
|
||
const fill = getComputedStyle(document.documentElement)
|
||
.getPropertyValue('--dark-background').trim();
|
||
this.icons = {
|
||
play : this.svg(
|
||
'M10 18a8 8 0 100-16 8 8 0 000 16zM9.555 7.168A1 1 0 008 8v4a1 1 0 001.555.832l3-2a1 1 0 000-1.664l-3-2z',
|
||
fill
|
||
),
|
||
pause: this.svg(
|
||
'M18 10a8 8 0 11-16 0 8 8 0 0116 0zM7 8a1 1 0 012 0v4a1 1 0 11-2 0V8zm5-1a1 1 0 00-1 1v4a1 1 0 102 0V8a1 1 0 00-1-1z',
|
||
fill
|
||
),
|
||
sound: this.svg(
|
||
'M9.383 3.076A1 1 0 0110 4v12a1 1 0 01-1.707.707L4.586 13H2a1 1 0 01-1-1V8a1 1 0 011-1h2.586l3.707-3.707a1 1 0 011.09-.217zM14.657 2.929a1 1 0 011.414 0A9.972 9.972 0 0119 10a9.972 9.972 0 01-2.929 7.071 1 1 0 01-1.414-1.414A7.971 7.971 0 0017 10c0-2.21-.894-4.208-2.343-5.657a1 1 0 010-1.414zm-2.829 2.828a1 1 0 011.415 0A5.983 5.983 0 0115 10a5.984 5.984 0 01-1.757 4.243 1 1 0 01-1.415-1.415A3.984 3.984 0 0013 10a3.983 3.983 0 00-1.172-2.828 1 1 0 010-1.415z',
|
||
fill
|
||
)
|
||
};
|
||
|
||
// Seeked => refresh timeline if external seek (e.g. Android controls)
|
||
this.audio.addEventListener('seeked', () => this.updateTimeline());
|
||
|
||
// Bind UI events
|
||
this._bindEvents();
|
||
|
||
// Setup MediaSession handlers + heartbeat
|
||
this._initMediaSession();
|
||
|
||
// Restore previous playback state (if any) and persist on navigation
|
||
this._restoreState();
|
||
window.addEventListener('pagehide', () => this._saveState());
|
||
window.addEventListener('beforeunload', () => this._saveState());
|
||
}
|
||
|
||
/**
|
||
* Push the current position to MediaSession so lockscreen / BT UIs stay in sync.
|
||
* Keeps values strict but avoids over-clamping that can confuse some platforms.
|
||
*/
|
||
_pushPositionState(force = false) {
|
||
if (!navigator.mediaSession?.setPositionState) return;
|
||
if (!this._hasMetadata) return;
|
||
|
||
const duration = this.audio.duration;
|
||
const position = this.audio.currentTime;
|
||
if (!Number.isFinite(duration) || duration <= 0) return;
|
||
if (!Number.isFinite(position) || position < 0) return;
|
||
|
||
let playbackRate = Number.isFinite(this.audio.playbackRate) ? this.audio.playbackRate : 1;
|
||
if (!playbackRate) playbackRate = 1;
|
||
|
||
try {
|
||
if ('playbackState' in navigator.mediaSession) {
|
||
navigator.mediaSession.playbackState = this.audio.paused ? 'paused' : 'playing';
|
||
}
|
||
navigator.mediaSession.setPositionState({ duration, playbackRate, position });
|
||
} catch (err) {
|
||
if (force) console.warn('setPositionState failed:', err);
|
||
}
|
||
}
|
||
|
||
// Minimal SVG helper
|
||
svg(pathD, fill) {
|
||
return `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="${fill}">
|
||
<path fill-rule="evenodd" d="${pathD}" clip-rule="evenodd"/>
|
||
</svg>`;
|
||
}
|
||
|
||
_startPositionSync() {
|
||
if (this._posInterval) return;
|
||
this._posInterval = setInterval(() => {
|
||
if (!this.audio.paused) {
|
||
this._pushPositionState();
|
||
}
|
||
}, this._posIntervalMs);
|
||
}
|
||
|
||
_stopPositionSync() {
|
||
if (!this._posInterval) return;
|
||
clearInterval(this._posInterval);
|
||
this._posInterval = null;
|
||
}
|
||
|
||
_bindEvents() {
|
||
this.playBtn.addEventListener('click', () => this.togglePlay());
|
||
if (this.minBtn) {
|
||
this.minBtn.addEventListener('click', () => this.toggleCollapse());
|
||
}
|
||
|
||
this.audio.addEventListener('loadstart', () => {
|
||
this._hasMetadata = false;
|
||
this._stopPositionSync();
|
||
this.timeline.min = 0;
|
||
this.timeline.max = 0;
|
||
this.timeline.value = 0;
|
||
this.timeline.style.backgroundSize = '0% 100%';
|
||
this.timeInfo.textContent = '00:00 / --:--';
|
||
});
|
||
|
||
this.audio.addEventListener('loadedmetadata', () => {
|
||
this._hasMetadata = true;
|
||
this.timeline.min = 0;
|
||
this.timeline.max = this.audio.duration;
|
||
this.timeline.value = 0;
|
||
this.timeline.style.backgroundSize = '0% 100%';
|
||
this._pushPositionState(true);
|
||
});
|
||
|
||
this.audio.addEventListener('play', () => {
|
||
this._updatePlayState();
|
||
this._pushPositionState(true);
|
||
this._startPositionSync();
|
||
});
|
||
|
||
this.audio.addEventListener('playing', () => this._pushPositionState(true));
|
||
|
||
this.audio.addEventListener('pause', () => {
|
||
this._updatePlayState();
|
||
this._pushPositionState(true);
|
||
this._stopPositionSync();
|
||
});
|
||
|
||
this.audio.addEventListener('ratechange', () => this._pushPositionState(true));
|
||
this.audio.addEventListener('ended', () => {
|
||
this.playBtn.innerHTML = this.icons.play;
|
||
this._pushPositionState(true);
|
||
this._stopPositionSync();
|
||
if ('mediaSession' in navigator) navigator.mediaSession.playbackState = 'paused';
|
||
});
|
||
|
||
// Native timeupdate => update timeline
|
||
this.audio.addEventListener('timeupdate', () => this.updateTimeline());
|
||
|
||
// Keep position in sync when page visibility changes
|
||
document.addEventListener('visibilitychange', () => {
|
||
this._pushPositionState(true);
|
||
if (document.visibilityState === 'visible' && !this.audio.paused) {
|
||
this._startPositionSync();
|
||
}
|
||
});
|
||
|
||
window.addEventListener('pageshow', () => this._pushPositionState(true));
|
||
window.addEventListener('focus', () => this._pushPositionState(true));
|
||
|
||
// Unified seek input
|
||
this.timeline.addEventListener('input', () => {
|
||
this.isSeeking = true;
|
||
this.audio.currentTime = this.timeline.value;
|
||
|
||
this._pushPositionState(true); // immediate Android sync
|
||
this.updateTimeline();
|
||
this.isSeeking = false;
|
||
});
|
||
}
|
||
|
||
togglePlay() {
|
||
this.audio.paused ? this.audio.play() : this.audio.pause();
|
||
}
|
||
|
||
_updatePlayState() {
|
||
this.playBtn.innerHTML = this.audio.paused ? this.icons.play : this.icons.pause;
|
||
this._pushPositionState(true); // lock‑screen refresh on play/pause toggle
|
||
}
|
||
|
||
_formatTime(sec) {
|
||
const m = Math.floor(sec / 60), s = Math.floor(sec % 60);
|
||
return `${m < 10 ? '0' : ''}${m}:${s < 10 ? '0' : ''}${s}`;
|
||
}
|
||
|
||
updateTimeline() {
|
||
if (!this._hasMetadata || !this.audio.duration || this.isSeeking) return;
|
||
|
||
// 1) Move the thumb
|
||
this.timeline.value = this.audio.currentTime;
|
||
// 2) Resize fill
|
||
const pct = (this.audio.currentTime / this.audio.duration) * 100;
|
||
this.timeline.style.backgroundSize = `${pct}% 100%`;
|
||
// 3) Update text
|
||
this.timeInfo.textContent =
|
||
`${this._formatTime(this.audio.currentTime)} / ${this._formatTime(this.audio.duration)}`;
|
||
// 4) Push to Android widget
|
||
this._pushPositionState();
|
||
}
|
||
|
||
toggleCollapse() {
|
||
const collapsed = !this.container.classList.contains('collapsed');
|
||
this._setCollapsed(collapsed);
|
||
this._saveState();
|
||
}
|
||
|
||
_setCollapsed(collapsed) {
|
||
if (!this.container) return;
|
||
this.container.classList.toggle('collapsed', collapsed);
|
||
if (this.minBtn) {
|
||
this.minBtn.setAttribute('aria-expanded', (!collapsed).toString());
|
||
this.minBtn.setAttribute('aria-label', collapsed ? 'Player ausklappen' : 'Player einklappen');
|
||
}
|
||
}
|
||
|
||
_saveState() {
|
||
try {
|
||
if (!this.currentRelUrl) {
|
||
sessionStorage.removeItem(AUDIO_PLAYER_STATE_KEY);
|
||
return;
|
||
}
|
||
const state = {
|
||
relUrl: this.currentRelUrl,
|
||
currentTime: Number.isFinite(this.audio.currentTime) ? this.audio.currentTime : 0,
|
||
paused: this.audio.paused,
|
||
collapsed: this.container?.classList.contains('collapsed') || false
|
||
};
|
||
sessionStorage.setItem(AUDIO_PLAYER_STATE_KEY, JSON.stringify(state));
|
||
} catch {
|
||
// Best-effort persistence only.
|
||
}
|
||
}
|
||
|
||
_restoreState() {
|
||
let stateRaw;
|
||
try {
|
||
stateRaw = sessionStorage.getItem(AUDIO_PLAYER_STATE_KEY);
|
||
} catch {
|
||
return;
|
||
}
|
||
if (!stateRaw) return;
|
||
|
||
let state;
|
||
try {
|
||
state = JSON.parse(stateRaw);
|
||
} catch {
|
||
return;
|
||
}
|
||
if (!state || !state.relUrl) return;
|
||
|
||
this._setCollapsed(Boolean(state.collapsed));
|
||
const resumeTime = Number.isFinite(state.currentTime) ? state.currentTime : 0;
|
||
const autoplay = !state.paused;
|
||
this.loadTrack(state.relUrl, { autoplay, resumeTime });
|
||
}
|
||
|
||
async fileDownload() {
|
||
let relUrl = this.currentRelUrl || '';
|
||
const src = this.audio.currentSrc || this.audio.src;
|
||
|
||
if (!relUrl && src) {
|
||
try {
|
||
const urlObj = new URL(src, window.location.href);
|
||
if (urlObj.pathname.startsWith('/media/')) {
|
||
relUrl = urlObj.pathname.slice('/media/'.length);
|
||
}
|
||
} catch {
|
||
// ignore parsing errors
|
||
}
|
||
}
|
||
|
||
if (!relUrl) return;
|
||
|
||
const encodedSubpath = relUrl
|
||
.replace(/^\/+/, '')
|
||
.split('/')
|
||
.map(segment => encodeURIComponent(decodeURIComponent(segment)))
|
||
.join('/');
|
||
|
||
// Fetch the tokenized URL from your backend
|
||
let tokenizedUrl;
|
||
try {
|
||
const resp = await fetch(`/create_dltoken/${encodedSubpath}`);
|
||
if (!resp.ok) return;
|
||
tokenizedUrl = (await resp.text()).trim();
|
||
} catch {
|
||
return;
|
||
}
|
||
|
||
if (!tokenizedUrl) return;
|
||
|
||
// Build the URL with cache-buster
|
||
const downloadUrl = new URL(tokenizedUrl, window.location.href);
|
||
|
||
// Create a link and click it
|
||
const a = document.createElement('a');
|
||
a.href = downloadUrl.toString();
|
||
document.body.appendChild(a);
|
||
a.click();
|
||
document.body.removeChild(a);
|
||
}
|
||
|
||
async loadTrack(relUrl, reqId, options = {}) {
|
||
if (reqId && typeof reqId === 'object') {
|
||
options = reqId;
|
||
reqId = null;
|
||
}
|
||
const { autoplay = true, resumeTime = 0 } = options;
|
||
|
||
this.currentRelUrl = relUrl;
|
||
const requestId = reqId || (crypto.randomUUID ? crypto.randomUUID() : (Date.now().toString(36) + Math.random().toString(36).slice(2)));
|
||
const urlWithReq = `/media/${relUrl}${relUrl.includes('?') ? '&' : '?'}req=${encodeURIComponent(requestId)}`;
|
||
|
||
// Reset any residual state from the previous track before we fetch the new one
|
||
this._hasMetadata = false;
|
||
this.audio.pause();
|
||
this.audio.removeAttribute('src');
|
||
this.audio.load();
|
||
this.timeline.min = 0;
|
||
this.timeline.max = 0;
|
||
this.timeline.value = 0;
|
||
this.timeline.style.backgroundSize = '0% 100%';
|
||
this.timeInfo.textContent = '00:00 / --:--';
|
||
if ('mediaSession' in navigator) {
|
||
navigator.mediaSession.playbackState = 'paused';
|
||
}
|
||
|
||
this.container.style.display = 'block';
|
||
this.nowInfo.textContent = 'Loading…';
|
||
|
||
this.abortCtrl?.abort();
|
||
this.abortCtrl = new AbortController();
|
||
|
||
try {
|
||
const head = await fetch(urlWithReq, {
|
||
method: 'HEAD',
|
||
signal: this.abortCtrl.signal
|
||
});
|
||
if (!head.ok) throw new Error(`Status ${head.status}`);
|
||
|
||
this.audio.src = urlWithReq;
|
||
this.audio.load();
|
||
|
||
const wantsResume = Number.isFinite(resumeTime) && resumeTime > 0;
|
||
if (wantsResume) {
|
||
this.audio.addEventListener('loadedmetadata', () => {
|
||
const safeTime = Number.isFinite(this.audio.duration)
|
||
? Math.min(resumeTime, this.audio.duration)
|
||
: resumeTime;
|
||
this.audio.currentTime = safeTime;
|
||
this.updateTimeline();
|
||
|
||
if (autoplay) {
|
||
this.audio.play().catch(() => this._updatePlayState());
|
||
} else {
|
||
this._updatePlayState();
|
||
}
|
||
}, { once: true });
|
||
}
|
||
|
||
if (!wantsResume) {
|
||
if (autoplay) {
|
||
try {
|
||
await this.audio.play();
|
||
} catch {
|
||
this._updatePlayState();
|
||
}
|
||
} else {
|
||
this._updatePlayState();
|
||
}
|
||
}
|
||
|
||
// Full breadcrumb
|
||
const parts = relUrl.split('/');
|
||
const file = parts.pop();
|
||
const folderPath = parts.join(' › ').replace('Gottesdienste S','S'); // Special case
|
||
this.nowInfo.innerHTML =
|
||
`${folderPath}<br><strong>${file.replace(/\.[^/.]+$/, '')}</strong>`;
|
||
|
||
if ('mediaSession' in navigator) {
|
||
navigator.mediaSession.metadata = new MediaMetadata({
|
||
title : file.replace(/\.[^/.]+$/, ''),
|
||
artist: parts.pop(),
|
||
artwork: [{ src:'/icon/logo-192x192.png', sizes:'192x192', type:'image/png' }]
|
||
});
|
||
}
|
||
this._saveState();
|
||
} catch (err) {
|
||
if (err.name !== 'AbortError') {
|
||
this.nowInfo.textContent = 'Error loading track';
|
||
console.error(err);
|
||
}
|
||
}
|
||
}
|
||
|
||
_initMediaSession() {
|
||
if (!('mediaSession' in navigator)) return;
|
||
|
||
const wrap = fn => details => {
|
||
fn(details);
|
||
this.updateTimeline();
|
||
};
|
||
|
||
// Core controls
|
||
navigator.mediaSession.setActionHandler('play', wrap(() => this.audio.play()));
|
||
navigator.mediaSession.setActionHandler('pause', wrap(() => this.audio.pause()));
|
||
navigator.mediaSession.setActionHandler('seekbackward', wrap(({seekOffset=10}) => {
|
||
this.audio.currentTime = Math.max(0, this.audio.currentTime - seekOffset);
|
||
}));
|
||
navigator.mediaSession.setActionHandler('seekforward', wrap(({seekOffset=10}) => {
|
||
this.audio.currentTime = Math.min(this.audio.duration, this.audio.currentTime + seekOffset);
|
||
}));
|
||
navigator.mediaSession.setActionHandler('seekto', wrap(({seekTime, fastSeek}) => {
|
||
if (fastSeek && this.audio.fastSeek) this.audio.fastSeek(seekTime);
|
||
else this.audio.currentTime = seekTime;
|
||
}));
|
||
|
||
// Prev & Next
|
||
navigator.mediaSession.setActionHandler('previoustrack', wrap(() => {
|
||
if (typeof currentMusicIndex !== 'number' || !Array.isArray(currentMusicFiles)) return;
|
||
if (currentMusicIndex > 0) {
|
||
const prevFile = currentMusicFiles[currentMusicIndex - 1];
|
||
const prevLink = document.querySelector(`.play-file[data-url="${prevFile.path}"]`);
|
||
if (prevLink) {
|
||
prevLink.click();
|
||
}
|
||
}
|
||
}));
|
||
navigator.mediaSession.setActionHandler('nexttrack', wrap(() => {
|
||
if (typeof currentMusicIndex !== 'number' || !Array.isArray(currentMusicFiles)) return;
|
||
if (currentMusicIndex < currentMusicFiles.length - 1) {
|
||
const nextFile = currentMusicFiles[currentMusicIndex + 1];
|
||
const nextLink = document.querySelector(`.play-file[data-url="${nextFile.path}"]`);
|
||
if (nextLink) {
|
||
nextLink.click();
|
||
}
|
||
}
|
||
}));
|
||
|
||
}
|
||
}
|
||
|
||
// Initialize instance
|
||
const player = new SimpleAudioPlayer();
|