1001 lines
39 KiB
JavaScript
1001 lines
39 KiB
JavaScript
/* ObsiGate — Global "Now Playing" media controller (roadmap #110).
|
||
*
|
||
* Owns a SINGLE <audio>/<video> element for the whole application and teleports
|
||
* it between two surfaces:
|
||
* - inline: inside the media's own tab/pane view (native controls);
|
||
* - dock: a body-level floating surface (audio pill / video mini-window)
|
||
* that keeps the media playing while the user navigates.
|
||
*
|
||
* Playback is therefore never interrupted by tab/pane re-renders. The module
|
||
* also wires the Media Session API (lock screen / hardware keys / OS overlay),
|
||
* native Picture-in-Picture for video, folder prev/next, and resumable state
|
||
* across reloads.
|
||
*
|
||
* The module is deliberately self-contained: it imports only i18n + low-level
|
||
* utils and reaches the tab system through the `window.*` globals exposed by
|
||
* ui.js / pane-manager.js (no import cycle).
|
||
*/
|
||
import { t } from './i18n.js';
|
||
import { safeCreateIcons } from './utils.js';
|
||
|
||
const LS_KEY = 'obsigate-now-playing';
|
||
const LS_PREFS = 'obsigate-player-prefs';
|
||
const LS_POS = 'obsigate-player-pos';
|
||
|
||
const AUDIO_EXTS = new Set(['.mp3', '.m4a', '.aac', '.wav', '.ogg', '.oga', '.opus', '.flac']);
|
||
const VIDEO_EXTS = new Set(['.mp4', '.webm', '.mov', '.m4v']);
|
||
|
||
/** Format a duration in seconds as ``m:ss`` (or ``h:mm:ss``). */
|
||
export function formatMediaDuration(seconds) {
|
||
if (!Number.isFinite(seconds) || seconds < 0) return '';
|
||
const total = Math.floor(seconds);
|
||
const h = Math.floor(total / 3600);
|
||
const m = Math.floor((total % 3600) / 60);
|
||
const s = total % 60;
|
||
const pad = (n) => String(n).padStart(2, '0');
|
||
return h > 0 ? `${h}:${pad(m)}:${pad(s)}` : `${m}:${pad(s)}`;
|
||
}
|
||
|
||
/** Build the byte-range streaming URL used by the shared media element. */
|
||
export function buildMediaUrl(vault, path) {
|
||
return `/api/media/${encodeURIComponent(vault)}?path=${encodeURIComponent(path)}`;
|
||
}
|
||
|
||
function extOf(p) {
|
||
const lower = (p || '').toLowerCase();
|
||
const dot = lower.lastIndexOf('.');
|
||
return dot === -1 ? '' : lower.slice(dot);
|
||
}
|
||
|
||
/** True when *p* is a supported audio path. */
|
||
export function isAudioPath(p) {
|
||
return AUDIO_EXTS.has(extOf(p));
|
||
}
|
||
|
||
/** True when *p* is a supported video path. */
|
||
export function isVideoPath(p) {
|
||
return VIDEO_EXTS.has(extOf(p));
|
||
}
|
||
|
||
function downloadUrl(vault, path) {
|
||
return `/api/file/${encodeURIComponent(vault)}/download?path=${encodeURIComponent(path)}`;
|
||
}
|
||
|
||
// ── Tiny DOM helpers (no dependency on viewer.js, which imports this module) ──
|
||
function npEl(tag, attrs, children) {
|
||
const e = document.createElement(tag);
|
||
if (attrs) {
|
||
Object.entries(attrs).forEach(([k, v]) => {
|
||
if (v === false || v == null) return;
|
||
if (k === 'class') e.className = v;
|
||
else e.setAttribute(k, v);
|
||
});
|
||
}
|
||
if (children) children.forEach((c) => { if (c) e.appendChild(c); });
|
||
return e;
|
||
}
|
||
|
||
function npIcon(name, size) {
|
||
const i = document.createElement('i');
|
||
i.setAttribute('data-lucide', name);
|
||
i.style.width = size + 'px';
|
||
i.style.height = size + 'px';
|
||
i.classList.add('icon');
|
||
return i;
|
||
}
|
||
|
||
function setIcon(btn, name) {
|
||
if (!btn) return;
|
||
const i = btn.querySelector('i');
|
||
if (i) i.setAttribute('data-lucide', name);
|
||
}
|
||
|
||
function notify(message, type = 'info') {
|
||
if (typeof window._obsigateShowToast === 'function') window._obsigateShowToast(message, type);
|
||
}
|
||
|
||
function isMobile() {
|
||
try { return window.matchMedia('(max-width: 768px)').matches; } catch (_) { return false; }
|
||
}
|
||
|
||
// ── Persistent prefs (volume / rate) ──────────────────────────────────────────
|
||
function readPrefs() {
|
||
try { return JSON.parse(localStorage.getItem(LS_PREFS) || '{}') || {}; } catch (_) { return {}; }
|
||
}
|
||
function writePrefs(patch) {
|
||
try { localStorage.setItem(LS_PREFS, JSON.stringify({ ...readPrefs(), ...patch })); } catch (_) { /* quota */ }
|
||
}
|
||
function readPosition() {
|
||
try { return JSON.parse(localStorage.getItem(LS_POS) || 'null'); } catch (_) { return null; }
|
||
}
|
||
function writePosition(pos) {
|
||
try { localStorage.setItem(LS_POS, JSON.stringify(pos)); } catch (_) { /* quota */ }
|
||
}
|
||
|
||
// ── Controller state ──────────────────────────────────────────────────────────
|
||
const S = {
|
||
active: false,
|
||
vault: null,
|
||
path: null,
|
||
title: '',
|
||
kind: null, // 'audio' | 'video'
|
||
streamUrl: '',
|
||
mime: '',
|
||
sizeBytes: 0,
|
||
media: null,
|
||
inline: false,
|
||
expanded: false,
|
||
siblings: [],
|
||
index: -1,
|
||
host: null,
|
||
dock: null,
|
||
dockKind: null,
|
||
expandedEl: null,
|
||
mediaSlotInline: null,
|
||
_saveTimer: null,
|
||
_drag: null,
|
||
};
|
||
|
||
// ── Media element lifecycle ───────────────────────────────────────────────────
|
||
function applyPrefsToMedia(media) {
|
||
const p = readPrefs();
|
||
if (typeof p.volume === 'number') media.volume = Math.min(1, Math.max(0, p.volume));
|
||
if (typeof p.muted === 'boolean') media.muted = p.muted;
|
||
if (typeof p.rate === 'number') media.playbackRate = p.rate;
|
||
}
|
||
|
||
function ensureMedia(kind) {
|
||
if (S.media && S.media.dataset.npKind === kind) return S.media;
|
||
if (S.media) destroyMedia();
|
||
const media = document.createElement(kind);
|
||
media.className = `np-media np-media--${kind}`;
|
||
media.dataset.npKind = kind;
|
||
media.setAttribute('controls', '');
|
||
media.setAttribute('preload', 'metadata');
|
||
media.setAttribute('playsinline', '');
|
||
media.setAttribute('aria-label', t('player.now_playing'));
|
||
attachMediaListeners(media);
|
||
applyPrefsToMedia(media);
|
||
S.media = media;
|
||
return media;
|
||
}
|
||
|
||
function destroyMedia() {
|
||
const m = S.media;
|
||
if (!m) return;
|
||
try { m.pause(); } catch (_) { /* detached */ }
|
||
m.removeAttribute('src');
|
||
try { m.load(); } catch (_) { /* ignore */ }
|
||
m.remove();
|
||
S.media = null;
|
||
}
|
||
|
||
function attachMediaListeners(media) {
|
||
media.addEventListener('loadedmetadata', () => {
|
||
if (Number.isFinite(media.duration)) updateAll();
|
||
});
|
||
media.addEventListener('timeupdate', () => {
|
||
updateProgress();
|
||
schedulePersist();
|
||
});
|
||
media.addEventListener('play', () => {
|
||
setIcon(S.dock && S.dock.querySelector('[data-np="play"]'), 'pause');
|
||
syncSessionPlayback();
|
||
persist();
|
||
});
|
||
media.addEventListener('pause', () => {
|
||
setIcon(S.dock && S.dock.querySelector('[data-np="play"]'), 'play');
|
||
syncSessionPlayback();
|
||
persist();
|
||
});
|
||
media.addEventListener('ended', () => {
|
||
if (!goSibling(1, { fromEnded: true })) { persist(); }
|
||
});
|
||
media.addEventListener('volumechange', () => {
|
||
writePrefs({ volume: media.volume, muted: media.muted });
|
||
updateVolumeInputs();
|
||
});
|
||
media.addEventListener('ratechange', () => {
|
||
writePrefs({ rate: media.playbackRate });
|
||
updateRateInputs();
|
||
});
|
||
media.addEventListener('error', () => onMediaError());
|
||
media.addEventListener('enterpictureinpicture', () => updatePipButton(true));
|
||
media.addEventListener('leavepictureinpicture', () => updatePipButton(false));
|
||
}
|
||
|
||
function onMediaError() {
|
||
if (!S.active) return;
|
||
const data = { vault: S.vault, path: S.path, title: S.title, stream_url: S.streamUrl, size_bytes: S.sizeBytes };
|
||
const message = t('viewer.media_unsupported');
|
||
if (S.inline && S.mediaSlotInline && S.mediaSlotInline.isConnected) {
|
||
const area = S.mediaSlotInline.closest('.audio-viewer-container, .video-viewer-container')?.parentElement;
|
||
renderFallback(area || S.mediaSlotInline.parentElement, data, message);
|
||
S.inline = false;
|
||
}
|
||
// Keep the dock but show a compact error state.
|
||
S.active = false;
|
||
clearPersisted();
|
||
if (S.dock) renderDockError(message);
|
||
}
|
||
|
||
/** Standalone fallback (unsupported codec / too large) used inline + in the dock. */
|
||
export function renderFallback(container, data, message) {
|
||
if (!container) return;
|
||
const sizeStr = formatBytes(data.size_bytes);
|
||
container.innerHTML = '';
|
||
const box = npEl('div', { class: 'unsupported-file' }, [
|
||
npIcon('file', 48),
|
||
npEl('div', { class: 'filename' }, [document.createTextNode((data.path || '').split('/').pop())]),
|
||
npEl('div', {}, [document.createTextNode(message)]),
|
||
sizeStr ? npEl('div', { style: 'font-size:0.85rem;margin-top:4px' }, [document.createTextNode(`${t('viewer.metadata_size')} : ${sizeStr}`)]) : null,
|
||
]);
|
||
const dl = npEl('button', { class: 'btn-action', type: 'button' }, [npIcon('download', 14), document.createTextNode(' ' + t('viewer.download'))]);
|
||
dl.addEventListener('click', () => window.open(downloadUrl(data.vault, data.path), '_blank'));
|
||
const open = npEl('button', { class: 'btn-action', type: 'button' }, [npIcon('external-link', 14), document.createTextNode(' ' + t('viewer.image_open_original'))]);
|
||
open.addEventListener('click', () => window.open(data.stream_url || buildMediaUrl(data.vault, data.path), '_blank'));
|
||
box.appendChild(npEl('div', { class: 'media-fallback-actions' }, [dl, open]));
|
||
container.appendChild(box);
|
||
safeCreateIcons();
|
||
}
|
||
|
||
function formatBytes(n) {
|
||
if (!n && n !== 0) return '';
|
||
if (n < 1024) return `${n} o`;
|
||
if (n < 1048576) return `${(n / 1024).toFixed(1)} Ko`;
|
||
return `${(n / 1048576).toFixed(1)} Mo`;
|
||
}
|
||
|
||
// ── Loading a media into the shared element ───────────────────────────────────
|
||
function load(data, { autoplay = true } = {}) {
|
||
const kind = data.is_audio ? 'audio' : 'video';
|
||
const sameKey = S.media && S.media.dataset.npKey === `${data.vault}::${data.path}`;
|
||
S.vault = data.vault;
|
||
S.path = data.path;
|
||
S.title = data.title || (data.path || '').split('/').pop();
|
||
S.kind = kind;
|
||
S.streamUrl = data.stream_url || buildMediaUrl(data.vault, data.path);
|
||
S.mime = data.media_mime || '';
|
||
S.sizeBytes = data.size_bytes || 0;
|
||
|
||
const media = ensureMedia(kind);
|
||
if (!sameKey) {
|
||
media.dataset.npKey = `${data.vault}::${data.path}`;
|
||
media.src = S.streamUrl;
|
||
}
|
||
S.active = true;
|
||
loadSiblings();
|
||
updateSessionMetadata();
|
||
if (autoplay && media.paused) {
|
||
const p = media.play();
|
||
if (p && p.catch) p.catch(() => { /* autoplay blocked — user presses play */ });
|
||
}
|
||
updateAll();
|
||
persist();
|
||
return media;
|
||
}
|
||
|
||
// ── Inline surface (the media's own tab/pane) ────────────────────────────────
|
||
function buildInline(data) {
|
||
const kind = S.kind;
|
||
const badge = npEl('span', { class: 'media-duration-badge' }, [document.createTextNode('--:--')]);
|
||
const vaultLabel = npEl('span', { class: 'media-meta' }, [document.createTextNode(`${data.vault} · ${formatBytes(S.sizeBytes)}`)]);
|
||
const toolbar = buildToolbar(data, [vaultLabel, badge]);
|
||
|
||
const container = npEl('div', { class: kind === 'audio' ? 'audio-viewer-container' : 'video-viewer-container' });
|
||
container.appendChild(toolbar);
|
||
let stage;
|
||
if (kind === 'audio') {
|
||
stage = npEl('div', { class: 'audio-stage' });
|
||
stage.appendChild(npEl('div', { class: 'audio-artwork' }, [npIcon('audio-lines', 64)]));
|
||
} else {
|
||
stage = npEl('div', { class: 'video-stage' });
|
||
}
|
||
const slot = npEl('div', { class: 'np-inline-slot' });
|
||
stage.appendChild(slot);
|
||
container.appendChild(stage);
|
||
return { container, slot, badge };
|
||
}
|
||
|
||
function buildToolbar(data, extra) {
|
||
const toolbar = npEl('div', { class: 'media-toolbar' });
|
||
toolbar.appendChild(npEl('span', { class: 'media-title', title: data.path }, [document.createTextNode(S.title)]));
|
||
toolbar.appendChild(npEl('div', { class: 'media-toolbar-spacer' }));
|
||
(extra || []).forEach((b) => toolbar.appendChild(b));
|
||
const open = npEl('button', { class: 'btn-action', type: 'button', title: t('viewer.image_open_original'), 'aria-label': t('viewer.image_open_original') }, [npIcon('external-link', 14)]);
|
||
open.addEventListener('click', () => window.open(S.streamUrl, '_blank'));
|
||
const dl = npEl('button', { class: 'btn-action', type: 'button', title: t('viewer.download'), 'aria-label': t('viewer.download') }, [npIcon('download', 14)]);
|
||
dl.addEventListener('click', () => window.open(downloadUrl(S.vault, S.path), '_blank'));
|
||
toolbar.appendChild(open);
|
||
toolbar.appendChild(dl);
|
||
return toolbar;
|
||
}
|
||
|
||
function attachInline(area, data) {
|
||
if (!area) return;
|
||
load(data, { autoplay: true });
|
||
const media = S.media;
|
||
const { container, slot, badge } = buildInline(data);
|
||
// Move the shared element into the (fresh) inline slot — no restart.
|
||
media.setAttribute('controls', '');
|
||
slot.appendChild(media);
|
||
area.innerHTML = '';
|
||
area.appendChild(container);
|
||
S.inline = true;
|
||
S.mediaSlotInline = slot;
|
||
hideDock();
|
||
if (Number.isFinite(media.duration)) badge.textContent = formatMediaDuration(media.duration);
|
||
media.addEventListener('loadedmetadata', function onMeta() {
|
||
if (badge && badge.isConnected) badge.textContent = formatMediaDuration(media.duration);
|
||
media.removeEventListener('loadedmetadata', onMeta);
|
||
});
|
||
updateAll();
|
||
safeCreateIcons();
|
||
}
|
||
|
||
/** If the shared media element lives inside *area*, move it out to the dock. */
|
||
function handleRender(area, data) {
|
||
if (!S.active || !S.media) return;
|
||
if (data && S.vault === data.vault && S.path === data.path) return; // own view attaches inline
|
||
if (S.inline && area && area.contains(S.media)) { showDock(); return; }
|
||
if (!S.media.isConnected) { showDock(); }
|
||
}
|
||
|
||
// ── Dock surface ──────────────────────────────────────────────────────────────
|
||
function ensureHost() {
|
||
if (S.host) return S.host;
|
||
const host = npEl('div', { id: 'now-playing-host', class: 'np-host' });
|
||
host.hidden = true;
|
||
document.body.appendChild(host);
|
||
S.host = host;
|
||
return host;
|
||
}
|
||
|
||
function stopEvent(e) { e.stopPropagation(); }
|
||
|
||
function ctrlButton(name, iconName, label, handler) {
|
||
const b = npEl('button', { class: 'np-ctrl', type: 'button', 'data-np': name, title: label, 'aria-label': label }, [npIcon(iconName, 16)]);
|
||
b.addEventListener('click', (e) => { stopEvent(e); handler(); });
|
||
return b;
|
||
}
|
||
|
||
function buildAudioDock() {
|
||
const dock = npEl('div', { class: 'np-dock np-dock--audio', role: 'region', 'aria-label': t('player.now_playing') });
|
||
const art = npEl('button', { class: 'np-dock-art', type: 'button', title: t('player.expand'), 'aria-label': t('player.expand') }, [npIcon('audio-lines', 22)]);
|
||
art.addEventListener('click', (e) => { stopEvent(e); toggleExpanded(); });
|
||
dock.appendChild(art);
|
||
|
||
const info = npEl('div', { class: 'np-dock-info', title: t('player.expand'), role: 'button', tabindex: '0' });
|
||
info.appendChild(npEl('span', { class: 'np-dock-title' }));
|
||
info.appendChild(npEl('span', { class: 'np-dock-sub' }));
|
||
info.addEventListener('click', (e) => { stopEvent(e); toggleExpanded(); });
|
||
info.addEventListener('keydown', (e) => {
|
||
if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); toggleExpanded(); }
|
||
});
|
||
dock.appendChild(info);
|
||
|
||
const controls = npEl('div', { class: 'np-dock-controls' });
|
||
controls.appendChild(ctrlButton('prev', 'skip-back', t('player.previous'), () => goSibling(-1)));
|
||
controls.appendChild(ctrlButton('play', 'play', t('player.play'), togglePlay));
|
||
controls.appendChild(ctrlButton('next', 'skip-forward', t('player.next'), () => goSibling(1)));
|
||
dock.appendChild(controls);
|
||
|
||
const progress = npEl('div', { class: 'np-dock-progress' });
|
||
const cur = npEl('span', { class: 'np-time np-time-cur' }, [document.createTextNode('0:00')]);
|
||
const seek = npEl('input', { class: 'np-seek', type: 'range', min: '0', max: '1000', value: '0', 'aria-label': t('player.seek'), 'data-np': 'seek' });
|
||
bindSeek(seek);
|
||
const dur = npEl('span', { class: 'np-time np-time-dur' }, [document.createTextNode('0:00')]);
|
||
progress.appendChild(cur);
|
||
progress.appendChild(seek);
|
||
progress.appendChild(dur);
|
||
dock.appendChild(progress);
|
||
|
||
const actions = npEl('div', { class: 'np-dock-actions' });
|
||
const volWrap = npEl('div', { class: 'np-volume' });
|
||
volWrap.appendChild(npIcon('volume-2', 16));
|
||
const vol = npEl('input', { class: 'np-volume-range', type: 'range', min: '0', max: '1', step: '0.05', value: '1', 'aria-label': t('player.volume'), 'data-np': 'volume' });
|
||
vol.addEventListener('input', (e) => { stopEvent(e); if (S.media) { S.media.volume = Number(vol.value); S.media.muted = false; } });
|
||
volWrap.appendChild(vol);
|
||
actions.appendChild(volWrap);
|
||
actions.appendChild(ctrlButton('reopen', 'maximize-2', t('player.reopen_tab'), focus));
|
||
actions.appendChild(ctrlButton('expand', 'chevron-up', t('player.expand'), toggleExpanded));
|
||
actions.appendChild(ctrlButton('close', 'x', t('player.close'), () => stop()));
|
||
dock.appendChild(actions);
|
||
return dock;
|
||
}
|
||
|
||
function buildVideoDock() {
|
||
const dock = npEl('div', { class: 'np-dock np-dock--video', role: 'region', 'aria-label': t('player.now_playing') });
|
||
const frame = npEl('div', { class: 'np-dock-video-frame' });
|
||
const slot = npEl('div', { class: 'np-dock-video-slot', 'data-np': 'slot' });
|
||
const bar = npEl('div', { class: 'np-dock-video-bar' });
|
||
|
||
const grip = npEl('span', { class: 'np-video-grip', title: t('player.move') }, [npIcon('grip-horizontal', 14)]);
|
||
bar.appendChild(grip);
|
||
bar.appendChild(ctrlButton('play', 'play', t('player.play'), togglePlay));
|
||
|
||
const seek = npEl('input', { class: 'np-seek', type: 'range', min: '0', max: '1000', value: '0', 'aria-label': t('player.seek'), 'data-np': 'seek' });
|
||
bindSeek(seek);
|
||
bar.appendChild(seek);
|
||
|
||
const time = npEl('span', { class: 'np-time np-time-cur' }, [document.createTextNode('0:00')]);
|
||
bar.appendChild(time);
|
||
bar.appendChild(ctrlButton('pip', 'picture-in-picture-2', t('player.pip'), togglePip));
|
||
bar.appendChild(ctrlButton('expand', 'maximize-2', t('player.reopen_tab'), focus));
|
||
bar.appendChild(ctrlButton('close', 'x', t('player.close'), () => stop()));
|
||
|
||
frame.appendChild(slot);
|
||
frame.appendChild(bar);
|
||
dock.appendChild(frame);
|
||
const resize = npEl('div', { class: 'np-video-resize', title: t('player.resize'), 'aria-hidden': 'true' });
|
||
dock.appendChild(resize);
|
||
bindVideoDrag(dock);
|
||
bindVideoResize(dock, resize);
|
||
return dock;
|
||
}
|
||
|
||
function buildDock() {
|
||
ensureHost();
|
||
const kind = S.kind;
|
||
if (S.dock && S.dockKind === kind) return S.dock;
|
||
if (S.dock) S.dock.remove();
|
||
S.dock = kind === 'audio' ? buildAudioDock() : buildVideoDock();
|
||
S.dockKind = kind;
|
||
S.host.appendChild(S.dock);
|
||
applyVideoGeometry();
|
||
bindDelegatedControls();
|
||
return S.dock;
|
||
}
|
||
|
||
function bindDelegatedControls() {
|
||
if (!S.dock || S.dock._npBound) return;
|
||
S.dock._npBound = true;
|
||
}
|
||
|
||
function showDock() {
|
||
if (!S.active || !S.media) return;
|
||
const dock = buildDock();
|
||
const slot = dock.querySelector('[data-np="slot"]');
|
||
if (S.kind === 'video' && slot) {
|
||
S.media.setAttribute('controls', '');
|
||
slot.appendChild(S.media);
|
||
} else {
|
||
// Audio: element stays hidden (wrapper), custom pill drives it.
|
||
dock.appendChild(S.media);
|
||
}
|
||
S.inline = false;
|
||
S.mediaSlotInline = null;
|
||
updateAll();
|
||
if (S.host) S.host.hidden = false;
|
||
dock.hidden = false;
|
||
document.body.classList.add('np-active');
|
||
safeCreateIcons();
|
||
}
|
||
|
||
function hideDock() {
|
||
if (S.dock) S.dock.hidden = true;
|
||
if (S.host) S.host.hidden = true;
|
||
document.body.classList.remove('np-active');
|
||
if (S.expanded) closeExpanded();
|
||
}
|
||
|
||
function renderDockError(message) {
|
||
if (!S.dock) return;
|
||
const dock = S.dock;
|
||
dock.classList.add('np-dock--error');
|
||
const slot = dock.querySelector('[data-np="slot"]');
|
||
if (slot) {
|
||
slot.innerHTML = '';
|
||
slot.appendChild(npEl('div', { class: 'np-dock-error-msg' }, [document.createTextNode(message)]));
|
||
}
|
||
}
|
||
|
||
// ── Progress / seek ───────────────────────────────────────────────────────────
|
||
function bindSeek(input) {
|
||
let scrubbing = false;
|
||
input.addEventListener('pointerdown', () => { scrubbing = true; });
|
||
input.addEventListener('pointerup', () => { scrubbing = false; });
|
||
input.addEventListener('input', (e) => {
|
||
stopEvent(e);
|
||
if (!S.media) return;
|
||
const d = S.media.duration;
|
||
if (Number.isFinite(d) && d > 0) {
|
||
S.media.currentTime = (Number(input.value) / 1000) * d;
|
||
updateProgress();
|
||
}
|
||
});
|
||
input.addEventListener('change', () => { scrubbing = false; });
|
||
void scrubbing;
|
||
}
|
||
|
||
function updateProgress() {
|
||
const media = S.media;
|
||
if (!media) return;
|
||
const d = Number.isFinite(media.duration) ? media.duration : 0;
|
||
const cur = media.currentTime || 0;
|
||
const pct = d > 0 ? Math.round((cur / d) * 1000) : 0;
|
||
const curText = formatMediaDuration(cur) || '0:00';
|
||
const durText = formatMediaDuration(d) || '0:00';
|
||
document.querySelectorAll('.np-seek').forEach((el) => {
|
||
if (el === document.activeElement) return;
|
||
el.value = String(pct);
|
||
});
|
||
document.querySelectorAll('.np-time-cur').forEach((el) => { el.textContent = curText; });
|
||
document.querySelectorAll('.np-time-dur').forEach((el) => { el.textContent = durText; });
|
||
}
|
||
|
||
function updateVolumeInputs() {
|
||
if (!S.media) return;
|
||
document.querySelectorAll('.np-volume-range').forEach((el) => { el.value = String(S.media.muted ? 0 : S.media.volume); });
|
||
}
|
||
|
||
function updateRateInputs() {
|
||
if (!S.media) return;
|
||
document.querySelectorAll('.np-rate').forEach((el) => { el.value = String(S.media.playbackRate); });
|
||
}
|
||
|
||
function selfDurationLabel() {
|
||
return S.media && Number.isFinite(S.media.duration) ? formatMediaDuration(S.media.duration) : '';
|
||
}
|
||
|
||
function updateAll() {
|
||
const dock = S.dock;
|
||
if (dock) {
|
||
const title = dock.querySelector('.np-dock-title');
|
||
if (title) title.textContent = S.title;
|
||
const sub = dock.querySelector('.np-dock-sub');
|
||
if (sub) sub.textContent = S.kind === 'audio' ? `${S.vault}` : `${S.vault} · ${selfDurationLabel()}`.trim();
|
||
setIcon(dock.querySelector('[data-np="play"]'), S.media && !S.media.paused ? 'pause' : 'play');
|
||
const prev = dock.querySelector('[data-np="prev"]');
|
||
const next = dock.querySelector('[data-np="next"]');
|
||
const multi = S.siblings.length > 1;
|
||
if (prev) prev.disabled = !multi;
|
||
if (next) next.disabled = !multi;
|
||
const pip = dock.querySelector('[data-np="pip"]');
|
||
if (pip) pip.hidden = !supportsPip();
|
||
}
|
||
updateProgress();
|
||
updateVolumeInputs();
|
||
updateRateInputs();
|
||
updatePipButton(!!(document.pictureInPictureElement));
|
||
updateExpanded();
|
||
}
|
||
|
||
function togglePlay() {
|
||
if (!S.media) return;
|
||
if (S.media.paused) {
|
||
const p = S.media.play();
|
||
if (p && p.catch) p.catch(() => { /* blocked */ });
|
||
} else {
|
||
S.media.pause();
|
||
}
|
||
}
|
||
|
||
// ── Prev / next within the media folder ───────────────────────────────────────
|
||
async function loadSiblings() {
|
||
try {
|
||
const dir = S.path.includes('/') ? S.path.slice(0, S.path.lastIndexOf('/')) : '';
|
||
const res = await fetch(`/api/browse/${encodeURIComponent(S.vault)}?path=${encodeURIComponent(dir)}`, { credentials: 'include' });
|
||
if (!res.ok) return;
|
||
const data = await res.json();
|
||
const want = S.kind;
|
||
S.siblings = (data.items || [])
|
||
.filter((it) => it.type === 'file')
|
||
.filter((it) => (want === 'audio' ? isAudioPath(it.path) : isVideoPath(it.path)));
|
||
S.index = S.siblings.findIndex((it) => it.path === S.path);
|
||
updateAll();
|
||
} catch (_) { /* best effort */ }
|
||
}
|
||
|
||
function goSibling(delta) {
|
||
if (S.siblings.length < 2 || S.index < 0) return false;
|
||
const next = (S.index + delta + S.siblings.length) % S.siblings.length;
|
||
openInApp(S.vault, S.siblings[next].path);
|
||
return true;
|
||
}
|
||
|
||
function openInApp(vault, path) {
|
||
const tm = (window.getActiveTabManager && window.getActiveTabManager()) || window.TabManager;
|
||
if (tm && typeof tm.open === 'function') {
|
||
Promise.resolve(tm.open(vault, path)).catch(() => { /* ignore */ });
|
||
return true;
|
||
}
|
||
if (window.Viewer && typeof window.Viewer.openFile === 'function') {
|
||
window.Viewer.openFile(vault, path);
|
||
return true;
|
||
}
|
||
return false;
|
||
}
|
||
|
||
// ── Public actions ────────────────────────────────────────────────────────────
|
||
export function focusNowPlaying() {
|
||
if (!S.active) return;
|
||
openInApp(S.vault, S.path);
|
||
}
|
||
const focus = focusNowPlaying;
|
||
|
||
/** Notify (once) that the media's tab was closed while playback continues. */
|
||
function notifyTabClosed(vault, path) {
|
||
if (S.active && S.vault === vault && S.path === path) notify(t('player.continues'), 'info');
|
||
}
|
||
|
||
export function stopNowPlaying() {
|
||
if (S.media) { try { S.media.pause(); } catch (_) { /* detached */ } }
|
||
S.active = false;
|
||
S.inline = false;
|
||
S.mediaSlotInline = null;
|
||
hideDock();
|
||
clearPersisted();
|
||
destroyMedia();
|
||
S.vault = S.path = null;
|
||
S.title = '';
|
||
S.kind = null;
|
||
S.siblings = [];
|
||
S.index = -1;
|
||
clearSession();
|
||
}
|
||
const stop = stopNowPlaying;
|
||
|
||
function toggleExpanded() {
|
||
if (S.expanded) closeExpanded();
|
||
else openExpanded();
|
||
}
|
||
|
||
function buildExpanded() {
|
||
const root = npEl('div', { class: 'np-expanded', role: 'dialog', 'aria-label': t('player.now_playing') });
|
||
const backdrop = npEl('div', { class: 'np-expanded-backdrop' });
|
||
backdrop.addEventListener('click', closeExpanded);
|
||
const card = npEl('div', { class: 'np-exp-card' });
|
||
card.appendChild(npEl('div', { class: 'np-exp-art' }, [npIcon('audio-lines', 56)]));
|
||
card.appendChild(npEl('div', { class: 'np-exp-title' }));
|
||
card.appendChild(npEl('div', { class: 'np-exp-sub' }));
|
||
|
||
const seek = npEl('input', { class: 'np-seek np-exp-seek', type: 'range', min: '0', max: '1000', value: '0', 'aria-label': t('player.seek') });
|
||
bindSeek(seek);
|
||
card.appendChild(seek);
|
||
const times = npEl('div', { class: 'np-exp-times' }, [
|
||
npEl('span', { class: 'np-time-cur' }, [document.createTextNode('0:00')]),
|
||
npEl('span', { class: 'np-time-dur' }, [document.createTextNode('0:00')]),
|
||
]);
|
||
card.appendChild(times);
|
||
|
||
const controls = npEl('div', { class: 'np-exp-controls' });
|
||
controls.appendChild(ctrlButton('prev', 'skip-back', t('player.previous'), () => goSibling(-1)));
|
||
const play = ctrlButton('play', 'play', t('player.play'), togglePlay);
|
||
play.classList.add('np-exp-play');
|
||
controls.appendChild(play);
|
||
controls.appendChild(ctrlButton('next', 'skip-forward', t('player.next'), () => goSibling(1)));
|
||
card.appendChild(controls);
|
||
|
||
const extra = npEl('div', { class: 'np-exp-extra' });
|
||
const vol = npEl('input', { class: 'np-volume-range', type: 'range', min: '0', max: '1', step: '0.05', value: '1', 'aria-label': t('player.volume') });
|
||
vol.addEventListener('input', () => { if (S.media) { S.media.volume = Number(vol.value); S.media.muted = false; } });
|
||
const rate = npEl('select', { class: 'np-rate', 'aria-label': t('player.speed') });
|
||
['0.5', '0.75', '1', '1.25', '1.5', '2'].forEach((v) => rate.appendChild(npEl('option', { value: v }, [document.createTextNode(v + '×')])));
|
||
rate.addEventListener('change', () => { if (S.media) S.media.playbackRate = Number(rate.value); });
|
||
extra.appendChild(npEl('span', { class: 'np-vol-icon' }, [npIcon('volume-2', 16)]));
|
||
extra.appendChild(vol);
|
||
extra.appendChild(rate);
|
||
extra.appendChild(ctrlButton('open', 'external-link', t('viewer.image_open_original'), () => window.open(S.streamUrl, '_blank')));
|
||
extra.appendChild(ctrlButton('download', 'download', t('viewer.download'), () => window.open(downloadUrl(S.vault, S.path), '_blank')));
|
||
extra.appendChild(ctrlButton('close', 'x', t('player.close'), () => stop()));
|
||
card.appendChild(extra);
|
||
|
||
root.appendChild(backdrop);
|
||
root.appendChild(card);
|
||
return root;
|
||
}
|
||
|
||
function openExpanded() {
|
||
ensureHost();
|
||
if (!S.expandedEl) {
|
||
S.expandedEl = buildExpanded();
|
||
S.host.appendChild(S.expandedEl);
|
||
}
|
||
S.expandedEl.hidden = false;
|
||
S.expanded = true;
|
||
updateExpanded();
|
||
safeCreateIcons();
|
||
}
|
||
|
||
function closeExpanded() {
|
||
if (S.expandedEl) S.expandedEl.hidden = true;
|
||
S.expanded = false;
|
||
}
|
||
|
||
function updateExpanded() {
|
||
const root = S.expandedEl;
|
||
if (!root || root.hidden) return;
|
||
const title = root.querySelector('.np-exp-title');
|
||
if (title) title.textContent = S.title;
|
||
const sub = root.querySelector('.np-exp-sub');
|
||
if (sub) sub.textContent = S.vault || '';
|
||
const play = root.querySelector('.np-exp-play');
|
||
setIcon(play, S.media && !S.media.paused ? 'pause' : 'play');
|
||
const multi = S.siblings.length > 1;
|
||
const prev = root.querySelector('[data-np="prev"]');
|
||
const next = root.querySelector('[data-np="next"]');
|
||
if (prev) prev.disabled = !multi;
|
||
if (next) next.disabled = !multi;
|
||
}
|
||
|
||
// ── Picture-in-Picture ────────────────────────────────────────────────────────
|
||
function supportsPip() {
|
||
return !!(document.pictureInPictureEnabled) && !!S.media && S.media.tagName === 'VIDEO';
|
||
}
|
||
|
||
function togglePip() {
|
||
if (!supportsPip()) return;
|
||
if (document.pictureInPictureElement) {
|
||
document.exitPictureInPicture().catch(() => { /* ignore */ });
|
||
} else {
|
||
S.media.requestPictureInPicture().catch(() => { /* ignore */ });
|
||
}
|
||
}
|
||
|
||
function updatePipButton(active) {
|
||
const btn = S.dock && S.dock.querySelector('[data-np="pip"]');
|
||
if (btn) btn.classList.toggle('active', !!active);
|
||
}
|
||
|
||
// ── Media Session API (OS / lock screen / hardware keys) ──────────────────────
|
||
function updateSessionMetadata() {
|
||
if (!('mediaSession' in navigator) || typeof MediaMetadata === 'undefined') return;
|
||
try {
|
||
navigator.mediaSession.metadata = new MediaMetadata({
|
||
title: S.title || '',
|
||
artist: S.vault || '',
|
||
album: 'ObsiGate',
|
||
artwork: [
|
||
{ src: '/static/icon-192.png', sizes: '192x192', type: 'image/png' },
|
||
{ src: '/static/icon-512.png', sizes: '512x512', type: 'image/png' },
|
||
],
|
||
});
|
||
navigator.mediaSession.setActionHandler('play', () => togglePlay());
|
||
navigator.mediaSession.setActionHandler('pause', () => togglePlay());
|
||
navigator.mediaSession.setActionHandler('stop', () => stop());
|
||
navigator.mediaSession.setActionHandler('seekbackward', (d) => seekBy(-(d?.seekOffset || 10)));
|
||
navigator.mediaSession.setActionHandler('seekforward', (d) => seekBy(d?.seekOffset || 10));
|
||
navigator.mediaSession.setActionHandler('seekto', (d) => { if (S.media && d && typeof d.seekTime === 'number') S.media.currentTime = d.seekTime; });
|
||
navigator.mediaSession.setActionHandler('previoustrack', S.siblings.length > 1 ? () => goSibling(-1) : null);
|
||
navigator.mediaSession.setActionHandler('nexttrack', S.siblings.length > 1 ? () => goSibling(1) : null);
|
||
} catch (_) { /* unsupported action */ }
|
||
}
|
||
|
||
function syncSessionPlayback() {
|
||
if (!('mediaSession' in navigator)) return;
|
||
try {
|
||
navigator.mediaSession.playbackState = S.media && !S.media.paused ? 'playing' : 'paused';
|
||
if (S.media && 'setPositionState' in navigator.mediaSession && Number.isFinite(S.media.duration) && S.media.duration > 0) {
|
||
navigator.mediaSession.setPositionState({
|
||
duration: S.media.duration,
|
||
playbackRate: S.media.playbackRate || 1,
|
||
position: Math.min(S.media.currentTime || 0, S.media.duration),
|
||
});
|
||
}
|
||
} catch (_) { /* ignore */ }
|
||
}
|
||
|
||
function seekBy(delta) {
|
||
if (!S.media) return;
|
||
const d = S.media.duration;
|
||
const target = (S.media.currentTime || 0) + delta;
|
||
S.media.currentTime = Number.isFinite(d) ? Math.max(0, Math.min(d, target)) : Math.max(0, target);
|
||
}
|
||
|
||
function clearSession() {
|
||
if (!('mediaSession' in navigator)) return;
|
||
try {
|
||
navigator.mediaSession.metadata = null;
|
||
navigator.mediaSession.playbackState = 'none';
|
||
} catch (_) { /* ignore */ }
|
||
}
|
||
|
||
// ── Persistence (resume across reloads) ───────────────────────────────────────
|
||
function persist() {
|
||
if (!S.active || !S.media) return;
|
||
try {
|
||
localStorage.setItem(LS_KEY, JSON.stringify({
|
||
vault: S.vault, path: S.path, title: S.title, kind: S.kind,
|
||
streamUrl: S.streamUrl, mime: S.mime, sizeBytes: S.sizeBytes,
|
||
time: S.media.currentTime || 0, paused: !!S.media.paused,
|
||
}));
|
||
} catch (_) { /* quota / private mode */ }
|
||
}
|
||
|
||
function schedulePersist() {
|
||
if (S._saveTimer) return;
|
||
S._saveTimer = setTimeout(() => { S._saveTimer = null; persist(); }, 2000);
|
||
}
|
||
|
||
function clearPersisted() {
|
||
try { localStorage.removeItem(LS_KEY); } catch (_) { /* ignore */ }
|
||
}
|
||
|
||
function restore() {
|
||
let saved = null;
|
||
try { saved = JSON.parse(localStorage.getItem(LS_KEY) || 'null'); } catch (_) { saved = null; }
|
||
if (!saved || !saved.path) return;
|
||
S.vault = saved.vault; S.path = saved.path; S.title = saved.title || saved.path.split('/').pop();
|
||
S.kind = saved.kind || (isVideoPath(saved.path) ? 'video' : 'audio');
|
||
S.streamUrl = saved.streamUrl || buildMediaUrl(saved.vault, saved.path);
|
||
S.mime = saved.mime || ''; S.sizeBytes = saved.sizeBytes || 0;
|
||
const media = ensureMedia(S.kind);
|
||
media.dataset.npKey = `${S.vault}::${S.path}`;
|
||
media.src = S.streamUrl;
|
||
const time = Number(saved.time) || 0;
|
||
if (time > 1) {
|
||
media.addEventListener('loadedmetadata', function once() {
|
||
try { media.currentTime = time; } catch (_) { /* ignore */ }
|
||
media.removeEventListener('loadedmetadata', once);
|
||
});
|
||
}
|
||
S.active = true;
|
||
loadSiblings();
|
||
updateSessionMetadata();
|
||
showDock();
|
||
notify(t('player.resume'), 'info');
|
||
}
|
||
|
||
// ── Video dock drag & resize (free positioning anywhere in the viewport) ──────
|
||
const VIDEO_MIN = { w: 240, h: 150 };
|
||
const VIDEO_DEFAULT = { w: 360, h: 220 };
|
||
|
||
function clampToViewport(left, top, w, h) {
|
||
const margin = 8;
|
||
const maxLeft = Math.max(margin, window.innerWidth - w - margin);
|
||
const maxTop = Math.max(margin, window.innerHeight - h - margin);
|
||
return {
|
||
left: Math.min(Math.max(margin, left), maxLeft),
|
||
top: Math.min(Math.max(margin, top), maxTop),
|
||
};
|
||
}
|
||
|
||
function applyVideoGeometry() {
|
||
if (!S.dock || S.dockKind !== 'video') return;
|
||
if (isMobile()) {
|
||
S.dock.style.removeProperty('left');
|
||
S.dock.style.removeProperty('top');
|
||
S.dock.style.removeProperty('width');
|
||
S.dock.style.removeProperty('height');
|
||
return;
|
||
}
|
||
const pos = readPosition() || {};
|
||
const w = pos.w || VIDEO_DEFAULT.w;
|
||
const h = pos.h || VIDEO_DEFAULT.h;
|
||
S.dock.style.width = w + 'px';
|
||
S.dock.style.height = h + 'px';
|
||
const margin = 16;
|
||
const left = typeof pos.left === 'number' ? pos.left : window.innerWidth - w - margin;
|
||
const top = typeof pos.top === 'number' ? pos.top : window.innerHeight - h - 24;
|
||
const c = clampToViewport(left, top, w, h);
|
||
S.dock.style.left = c.left + 'px';
|
||
S.dock.style.top = c.top + 'px';
|
||
}
|
||
|
||
// Drag from anywhere on the mini-window (buttons, sliders and the resize handle
|
||
// excluded). A small movement threshold keeps clicks on the native video
|
||
// controls working; no pointer capture is used so those controls keep working.
|
||
function bindVideoDrag(dock) {
|
||
dock.addEventListener('pointerdown', (e) => {
|
||
if (isMobile() || e.button !== 0) return;
|
||
if (e.target.closest('button, input, select, textarea, a, .np-video-resize')) return;
|
||
const rect = dock.getBoundingClientRect();
|
||
S._drag = {
|
||
dx: e.clientX - rect.left,
|
||
dy: e.clientY - rect.top,
|
||
startX: e.clientX,
|
||
startY: e.clientY,
|
||
moved: false,
|
||
};
|
||
document.addEventListener('pointermove', onDragMove);
|
||
document.addEventListener('pointerup', onDragEnd);
|
||
});
|
||
}
|
||
|
||
function onDragMove(e) {
|
||
if (!S._drag || S._drag.resize || !S.dock) return;
|
||
if (!S._drag.moved) {
|
||
if (Math.abs(e.clientX - S._drag.startX) < 4 && Math.abs(e.clientY - S._drag.startY) < 4) return;
|
||
S._drag.moved = true;
|
||
S.dock.classList.add('np-dragging');
|
||
}
|
||
const w = S.dock.offsetWidth, h = S.dock.offsetHeight;
|
||
const c = clampToViewport(e.clientX - S._drag.dx, e.clientY - S._drag.dy, w, h);
|
||
S.dock.style.left = c.left + 'px';
|
||
S.dock.style.top = c.top + 'px';
|
||
}
|
||
|
||
function onDragEnd() {
|
||
document.removeEventListener('pointermove', onDragMove);
|
||
document.removeEventListener('pointerup', onDragEnd);
|
||
if (!S.dock) { S._drag = null; return; }
|
||
S.dock.classList.remove('np-dragging');
|
||
if (S._drag && S._drag.moved) {
|
||
const r = S.dock.getBoundingClientRect();
|
||
const pos = readPosition() || {};
|
||
writePosition({
|
||
...pos,
|
||
left: Math.round(r.left),
|
||
top: Math.round(r.top),
|
||
w: Math.round(r.width),
|
||
h: Math.round(r.height),
|
||
});
|
||
}
|
||
S._drag = null;
|
||
}
|
||
|
||
function bindVideoResize(dock, handle) {
|
||
if (!handle) return;
|
||
handle.addEventListener('pointerdown', (e) => {
|
||
if (isMobile()) return;
|
||
e.preventDefault();
|
||
e.stopPropagation();
|
||
const rect = dock.getBoundingClientRect();
|
||
S._drag = { resize: true, startX: e.clientX, startY: e.clientY, w: rect.width, h: rect.height };
|
||
handle.setPointerCapture?.(e.pointerId);
|
||
document.addEventListener('pointermove', onResizeMove);
|
||
document.addEventListener('pointerup', onResizeEnd);
|
||
});
|
||
}
|
||
|
||
function onResizeMove(e) {
|
||
if (!S._drag || !S._drag.resize || !S.dock) return;
|
||
const w = Math.max(VIDEO_MIN.w, S._drag.w + (e.clientX - S._drag.startX));
|
||
const h = Math.max(VIDEO_MIN.h, S._drag.h + (e.clientY - S._drag.startY));
|
||
S.dock.style.width = w + 'px';
|
||
S.dock.style.height = h + 'px';
|
||
}
|
||
|
||
function onResizeEnd() {
|
||
document.removeEventListener('pointermove', onResizeMove);
|
||
document.removeEventListener('pointerup', onResizeEnd);
|
||
if (S.dock) {
|
||
const r = S.dock.getBoundingClientRect();
|
||
const c = clampToViewport(r.left, r.top, r.width, r.height);
|
||
writePosition({ left: Math.round(c.left), top: Math.round(c.top), w: Math.round(r.width), h: Math.round(r.height) });
|
||
applyVideoGeometry();
|
||
}
|
||
S._drag = null;
|
||
}
|
||
|
||
// ── Keyboard ──────────────────────────────────────────────────────────────────
|
||
function onKeydown(e) {
|
||
if (!S.active) return;
|
||
const host = S.host;
|
||
if (!host || (!host.contains(document.activeElement) && !S.expanded)) return;
|
||
if (e.key === 'Escape') {
|
||
if (S.expanded) { closeExpanded(); }
|
||
e.preventDefault();
|
||
} else if (e.key === ' ' || e.key === 'k') {
|
||
e.preventDefault();
|
||
togglePlay();
|
||
}
|
||
}
|
||
|
||
// ── Init ──────────────────────────────────────────────────────────────────────
|
||
export function initNowPlaying() {
|
||
window.NowPlaying = NowPlaying;
|
||
ensureHost();
|
||
if (!S._keyBound) {
|
||
document.addEventListener('keydown', onKeydown);
|
||
window.addEventListener('resize', () => applyVideoGeometry());
|
||
S._keyBound = true;
|
||
}
|
||
restore();
|
||
}
|
||
|
||
export const NowPlaying = {
|
||
isActive: () => S.active,
|
||
matches: (vault, path) => S.active && S.vault === vault && S.path === path,
|
||
current: () => (S.active ? { vault: S.vault, path: S.path, kind: S.kind, paused: S.media ? S.media.paused : true } : null),
|
||
attachInline,
|
||
handleRender,
|
||
showDock,
|
||
focus: focusNowPlaying,
|
||
stop: stopNowPlaying,
|
||
notifyTabClosed,
|
||
};
|
||
|
||
export default initNowPlaying;
|