This commit is contained in:
Ultradesu
Vendored
+5
File diff suppressed because one or more lines are too long
Vendored
+1
File diff suppressed because one or more lines are too long
Vendored
+3
File diff suppressed because one or more lines are too long
@@ -0,0 +1,14 @@
|
||||
# dash.js BSD License Agreement
|
||||
|
||||
The copyright in this software is being made available under the BSD License, included below. This software may be subject to other third party and contributor rights, including patent rights, and no such rights are granted under this license.
|
||||
|
||||
**Copyright (c) 2015, Dash Industry Forum.
|
||||
**All rights reserved.**
|
||||
|
||||
* Redistribution and use in source and binary forms, with or without modification, are permitted provided that the following conditions are met:
|
||||
* Redistributions of source code must retain the above copyright notice, this list of conditions and the following disclaimer.
|
||||
* Redistributions in binary form must reproduce the above copyright notice, this list of conditions and the following disclaimer in the documentation and/or other materials provided with the distribution.
|
||||
* Neither the name of the Dash Industry Forum nor the names of its contributors may be used to endorse or promote products derived from this software without specific prior written permission.
|
||||
|
||||
**THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS “AS IS” AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.**
|
||||
|
||||
+101
@@ -0,0 +1,101 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1">
|
||||
<title>Lan Play</title>
|
||||
<link rel="stylesheet" href="/bootstrap-icons.min.css">
|
||||
<link rel="stylesheet" href="/controlbar.css?v=14">
|
||||
<link rel="stylesheet" href="/styles.css?v=20">
|
||||
<script defer src="/dash.all.min.js"></script>
|
||||
<script defer src="/controlbar.min.js?v=16"></script>
|
||||
<script defer src="/js/api.js?v=20"></script>
|
||||
<script defer src="/js/location.js?v=14"></script>
|
||||
<script defer src="/js/preferences.js?v=15"></script>
|
||||
<script defer src="/js/player.js?v=17"></script>
|
||||
<script defer src="/js/library.js?v=20"></script>
|
||||
<script defer src="/alpine.min.js"></script>
|
||||
</head>
|
||||
<body x-data="library" x-init="restoreLocation()" :class="{ 'player-open': selected }" @keydown.escape.window="infoOpen ? closeInfo() : closePlayer()" x-cloak>
|
||||
<header>
|
||||
<div><h1>Lan Play</h1><div class="path" x-text="currentPath || '/' "></div></div>
|
||||
<div class="view-switch" role="group" aria-label="Library view">
|
||||
<button type="button" title="Grid view" @click="setViewMode('grid')" :class="{ active: viewMode === 'grid' }"><i class="bi bi-grid-fill"></i></button>
|
||||
<button type="button" title="Table view" @click="setViewMode('table')" :class="{ active: viewMode === 'table' }"><i class="bi bi-list-ul"></i></button>
|
||||
<button type="button" title="System information" @click="openInfo()"><i class="bi bi-info-circle"></i></button>
|
||||
</div>
|
||||
</header>
|
||||
<main>
|
||||
<p x-show="loading">Loading…</p>
|
||||
<p class="error" x-show="error" x-text="error"></p>
|
||||
<div class="entries" x-show="viewMode === 'grid'">
|
||||
<button type="button" class="directory" x-show="parentPath !== null" @click="browse(parentPath)"><span class="entry-preview">📁</span><span class="entry-name">..</span></button>
|
||||
<template x-for="entry in entries" :key="entry.path">
|
||||
<button type="button" @click="openEntry(entry)" :class="entry.kind"
|
||||
@mouseenter="startPreview(entry)" @mouseleave="stopPreview(entry)"
|
||||
@focus="startPreview(entry)" @blur="stopPreview(entry)">
|
||||
<span class="entry-preview" :class="{ 'entry-preview-media': entry.kind === 'media' }" :style="previewStyle(entry)">
|
||||
<i class="bi bi-arrow-repeat preview-spinner" x-show="entry.kind === 'media' && previewStates[entry.path] === 'loading'"></i>
|
||||
<span x-show="entry.kind === 'directory' || previewStates[entry.path] !== 'ready'" x-text="entry.kind === 'directory' ? '📁' : (previewStates[entry.path] === 'error' ? '!' : '')"></span>
|
||||
</span>
|
||||
<span class="entry-name"><span class="entry-name-track" x-text="entry.name"></span></span>
|
||||
</button>
|
||||
</template>
|
||||
</div>
|
||||
<div class="entry-table-wrap" x-show="viewMode === 'table'">
|
||||
<table class="entry-table">
|
||||
<thead><tr><th>Preview</th><th>Name</th><th>Type</th></tr></thead>
|
||||
<tbody>
|
||||
<tr x-show="parentPath !== null" @click="browse(parentPath)" tabindex="0" @keydown.enter="browse(parentPath)"><td class="table-preview">📁</td><td>..</td><td>Folder</td></tr>
|
||||
<template x-for="entry in entries" :key="entry.path">
|
||||
<tr @click="openEntry(entry)" tabindex="0" @keydown.enter="openEntry(entry)"
|
||||
@mouseenter="startPreview(entry)" @mouseleave="stopPreview(entry)"
|
||||
@focus="startPreview(entry)" @blur="stopPreview(entry)">
|
||||
<td><span class="table-preview" :class="{ 'entry-preview-media': entry.kind === 'media' }" :style="previewStyle(entry)">
|
||||
<i class="bi bi-arrow-repeat preview-spinner" x-show="entry.kind === 'media' && previewStates[entry.path] === 'loading'"></i>
|
||||
<span x-show="entry.kind === 'directory' || previewStates[entry.path] === 'error'" x-text="entry.kind === 'directory' ? '📁' : '!'"></span>
|
||||
</span></td>
|
||||
<td><span class="entry-name table-name"><span class="entry-name-track" x-text="entry.name"></span></span></td>
|
||||
<td x-text="entry.kind === 'directory' ? 'Folder' : 'Video'"></td>
|
||||
</tr>
|
||||
</template>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</main>
|
||||
<div class="info-backdrop" x-show="infoOpen" @click.self="closeInfo()" x-cloak>
|
||||
<section class="info-dialog" role="dialog" aria-modal="true" aria-labelledby="info-title">
|
||||
<button class="info-close" type="button" title="Close" aria-label="Close" @click="closeInfo()"><i class="bi bi-x-lg"></i></button>
|
||||
<h2 id="info-title">System information</h2>
|
||||
<div class="info-loading" x-show="infoLoading"><i class="bi bi-arrow-repeat preview-spinner"></i> Loading diagnostics…</div>
|
||||
<p class="error" x-show="infoError" x-text="infoError"></p>
|
||||
<dl class="info-grid" x-show="diagnostics && !infoLoading">
|
||||
<dt>Application</dt><dd x-text="`${diagnostics.application} ${diagnostics.version} (${diagnostics.build})`"></dd>
|
||||
<dt>Interface</dt><dd x-text="`UI ${diagnostics.interface}`"></dd>
|
||||
<dt>dash.js</dt><dd x-text="diagnostics.dashjs"></dd>
|
||||
<dt>Platform</dt><dd x-text="diagnostics.platform"></dd>
|
||||
<dt>Display</dt><dd x-text="diagnostics.display"></dd>
|
||||
<dt>FFmpeg</dt><dd><span x-text="diagnostics.ffmpeg.version"></span><small x-text="diagnostics.ffmpeg.path"></small></dd>
|
||||
<dt>FFprobe</dt><dd><span x-text="diagnostics.ffprobe.version"></span><small x-text="diagnostics.ffprobe.path"></small></dd>
|
||||
<dt>Media root</dt><dd x-text="diagnostics.media_root"></dd>
|
||||
<dt>Listen address</dt><dd x-text="diagnostics.bind"></dd>
|
||||
<dt>Browser APIs</dt><dd x-text="`MSE ${diagnostics.mediaSource ? 'yes' : 'no'} · Fullscreen ${diagnostics.fullscreen ? 'yes' : 'no'}`"></dd>
|
||||
<dt>Browser</dt><dd class="info-browser" x-text="diagnostics.browser"></dd>
|
||||
</dl>
|
||||
</section>
|
||||
</div>
|
||||
<section class="player" x-ref="playerShell" x-show="selected" x-cloak>
|
||||
<button class="player-close" type="button" aria-label="Close player" title="Close" @click="closePlayer()">
|
||||
<i class="bi bi-x-lg" aria-hidden="true"></i>
|
||||
</button>
|
||||
<div class="video-wrapper" x-ref="videoWrapper">
|
||||
<video x-ref="video" playsinline preload="metadata"></video>
|
||||
<div class="player-title" x-text="mediaTitle()"></div>
|
||||
<div class="player-status" :class="{ 'player-status-compact': playerLoadingCompact }" x-show="playerLoading" role="status">
|
||||
<i class="bi bi-arrow-repeat player-spinner" aria-hidden="true"></i>
|
||||
<span x-text="playerLoadingCompact ? 'Preparing stream at the new position…' : 'Preparing DASH stream…'"></span>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,31 @@
|
||||
(function () {
|
||||
async function request(url, options) {
|
||||
const response = await fetch(url, options);
|
||||
if (!response.ok) {
|
||||
let message = `HTTP ${response.status}`;
|
||||
try { message = (await response.json()).error || message; } catch (_) {}
|
||||
throw new Error(message);
|
||||
}
|
||||
return response;
|
||||
}
|
||||
|
||||
window.LanPlayApi = {
|
||||
async browse(path) {
|
||||
return (await request(`/api/browse?path=${encodeURIComponent(path)}`)).json();
|
||||
},
|
||||
|
||||
async info() {
|
||||
return (await request('/api/info')).json();
|
||||
},
|
||||
async startDash(path, startSeconds = 0) {
|
||||
const query = `path=${encodeURIComponent(path)}&start=${encodeURIComponent(startSeconds)}`;
|
||||
return (await request(`/api/dash?${query}`, { method: 'POST' })).json();
|
||||
},
|
||||
async stopDash(sessionId) {
|
||||
await request(`/api/dash/${sessionId}`, { method: 'DELETE' });
|
||||
},
|
||||
async subtitles(path) {
|
||||
return (await request(`/api/subtitles?path=${encodeURIComponent(path)}`)).json();
|
||||
}
|
||||
};
|
||||
})();
|
||||
@@ -0,0 +1,262 @@
|
||||
document.addEventListener('alpine:init', () => {
|
||||
Alpine.data('library', () => ({
|
||||
currentPath: '', parentPath: null, entries: [], selected: null,
|
||||
loading: false, playerLoading: false, playerLoadingCompact: false,
|
||||
error: '', playerController: null, viewMode: 'grid',
|
||||
infoOpen: false, infoLoading: false, infoError: '', diagnostics: null,
|
||||
previewFrames: {}, previewUrls: {}, previewStates: {}, previewTimers: {},
|
||||
previewActive: {}, previewImages: {}, previewGeneration: 0,
|
||||
|
||||
init() {
|
||||
try { this.viewMode = localStorage.getItem('lan-play:view') || 'grid'; } catch (_) {}
|
||||
this.locationHandler = () => { this.restoreLocation(); };
|
||||
this.resizeHandler = () => { this.scheduleMarqueeCheck(); };
|
||||
window.addEventListener('popstate', this.locationHandler);
|
||||
window.addEventListener('resize', this.resizeHandler);
|
||||
},
|
||||
|
||||
destroy() {
|
||||
this.stopAllPreviews();
|
||||
this.cancelPreviewLoads();
|
||||
window.removeEventListener('popstate', this.locationHandler);
|
||||
window.removeEventListener('resize', this.resizeHandler);
|
||||
if (this.marqueeFrame) window.cancelAnimationFrame(this.marqueeFrame);
|
||||
if (this.playerController) this.playerController.dispose();
|
||||
},
|
||||
|
||||
async restoreLocation() {
|
||||
const location = window.LanPlayLocation.read();
|
||||
if (this.playerController) await this.playerController.stop();
|
||||
this.selected = null;
|
||||
await this.browse(location.path, false);
|
||||
if (location.play) {
|
||||
await this.play({
|
||||
path: location.play,
|
||||
name: window.LanPlayLocation.fileName(location.play),
|
||||
kind: 'media'
|
||||
}, false);
|
||||
}
|
||||
},
|
||||
|
||||
async browse(path, updateLocation = true) {
|
||||
this.stopAllPreviews();
|
||||
this.cancelPreviewLoads();
|
||||
this.loading = true;
|
||||
this.error = '';
|
||||
try {
|
||||
const data = await window.LanPlayApi.browse(path);
|
||||
this.currentPath = data.path;
|
||||
this.parentPath = data.parent;
|
||||
this.entries = data.entries;
|
||||
if (updateLocation) window.LanPlayLocation.write(data.path, null, false);
|
||||
await this.$nextTick();
|
||||
this.preloadPreviews(data.entries);
|
||||
this.scheduleMarqueeCheck();
|
||||
} catch (error) { this.error = error.message; }
|
||||
finally { this.loading = false; }
|
||||
},
|
||||
|
||||
async play(entry, updateLocation = true) {
|
||||
this.stopAllPreviews();
|
||||
this.enterFullscreen();
|
||||
this.error = '';
|
||||
this.selected = entry;
|
||||
this.playerLoading = true;
|
||||
if (updateLocation) window.LanPlayLocation.write(this.currentPath, entry.path, false);
|
||||
await this.$nextTick();
|
||||
if (!this.playerController) {
|
||||
this.playerController = new window.LanPlayPlayer(
|
||||
this.$refs.video,
|
||||
this.$refs.videoWrapper,
|
||||
(message) => { this.error = message; },
|
||||
(loading, compact = false) => {
|
||||
this.playerLoading = loading;
|
||||
this.playerLoadingCompact = loading && compact;
|
||||
},
|
||||
() => { this.playNext(); }
|
||||
);
|
||||
}
|
||||
this.playerController.setNextAvailable(Boolean(this.nextEntry()));
|
||||
try { await this.playerController.play(entry); }
|
||||
catch (error) { this.error = error.message; }
|
||||
finally {
|
||||
this.playerLoading = false;
|
||||
this.playerLoadingCompact = false;
|
||||
}
|
||||
},
|
||||
|
||||
nextEntry() {
|
||||
if (!this.selected) return null;
|
||||
const media = this.entries.filter((entry) => entry.kind === 'media');
|
||||
const index = media.findIndex((entry) => entry.path === this.selected.path);
|
||||
return index >= 0 ? media[index + 1] || null : null;
|
||||
},
|
||||
|
||||
async playNext() {
|
||||
const next = this.nextEntry();
|
||||
if (next) await this.play(next);
|
||||
},
|
||||
|
||||
mediaTitle() {
|
||||
if (!this.selected || !this.selected.name) return '';
|
||||
return this.selected.name.replace(/\.[^.]+$/, '');
|
||||
},
|
||||
|
||||
setViewMode(mode) {
|
||||
this.viewMode = mode === 'table' ? 'table' : 'grid';
|
||||
try { localStorage.setItem('lan-play:view', this.viewMode); } catch (_) {}
|
||||
this.$nextTick(() => this.scheduleMarqueeCheck());
|
||||
},
|
||||
|
||||
scheduleMarqueeCheck() {
|
||||
if (this.marqueeFrame) window.cancelAnimationFrame(this.marqueeFrame);
|
||||
this.marqueeFrame = window.requestAnimationFrame(() => {
|
||||
this.marqueeFrame = null;
|
||||
document.querySelectorAll('.entry-name').forEach((container) => {
|
||||
if (container.clientWidth <= 0) return;
|
||||
const text = container.querySelector('.entry-name-track');
|
||||
container.classList.toggle('is-overflowing', Boolean(text) && text.scrollWidth > container.clientWidth + 1);
|
||||
});
|
||||
});
|
||||
},
|
||||
|
||||
openEntry(entry) {
|
||||
return entry.kind === 'directory' ? this.browse(entry.path) : this.play(entry);
|
||||
},
|
||||
|
||||
async openInfo() {
|
||||
this.infoOpen = true;
|
||||
this.infoLoading = true;
|
||||
this.infoError = '';
|
||||
try {
|
||||
const server = await window.LanPlayApi.info();
|
||||
let dashVersion = 'Unknown';
|
||||
try { dashVersion = dashjs.MediaPlayer().create().getVersion(); } catch (_) {}
|
||||
this.diagnostics = {
|
||||
...server,
|
||||
interface: '20',
|
||||
dashjs: dashVersion,
|
||||
browser: navigator.userAgent,
|
||||
display: `${window.screen.width}×${window.screen.height} @ ${window.devicePixelRatio || 1}x`,
|
||||
fullscreen: Boolean(document.documentElement.requestFullscreen || document.documentElement.webkitRequestFullscreen),
|
||||
mediaSource: 'MediaSource' in window
|
||||
};
|
||||
} catch (error) {
|
||||
this.infoError = error.message;
|
||||
} finally {
|
||||
this.infoLoading = false;
|
||||
}
|
||||
},
|
||||
|
||||
closeInfo() {
|
||||
this.infoOpen = false;
|
||||
},
|
||||
|
||||
previewStyle(entry) {
|
||||
if (this.previewStates[entry.path] !== 'ready') return '';
|
||||
const url = this.previewUrls[entry.path];
|
||||
if (!url) return '';
|
||||
const frame = this.previewFrames[entry.path] || 0;
|
||||
const column = frame % 5;
|
||||
const row = Math.floor(frame / 5);
|
||||
return `background-image:url("${url}");background-position:${column * 25}% ${row * 100}%`;
|
||||
},
|
||||
|
||||
startPreview(entry) {
|
||||
if (!entry || entry.kind !== 'media') return;
|
||||
this.previewActive[entry.path] = true;
|
||||
this.stopPreview(entry);
|
||||
this.previewActive[entry.path] = true;
|
||||
if (this.previewStates[entry.path] !== 'ready') return;
|
||||
this.previewFrames[entry.path] = 0;
|
||||
this.previewTimers[entry.path] = window.setInterval(() => {
|
||||
this.previewFrames[entry.path] = ((this.previewFrames[entry.path] || 0) + 1) % 10;
|
||||
}, 500);
|
||||
},
|
||||
|
||||
stopPreview(entry) {
|
||||
if (!entry) return;
|
||||
this.previewActive[entry.path] = false;
|
||||
const timer = this.previewTimers[entry.path];
|
||||
if (timer) window.clearInterval(timer);
|
||||
delete this.previewTimers[entry.path];
|
||||
this.previewFrames[entry.path] = 0;
|
||||
},
|
||||
|
||||
stopAllPreviews() {
|
||||
Object.values(this.previewTimers).forEach((timer) => window.clearInterval(timer));
|
||||
this.previewTimers = {};
|
||||
this.previewActive = {};
|
||||
},
|
||||
|
||||
preloadPreviews(entries) {
|
||||
const generation = this.previewGeneration;
|
||||
entries.filter((entry) => entry.kind === 'media').forEach((entry) => {
|
||||
const path = entry.path;
|
||||
const url = `/api/preview?path=${encodeURIComponent(path)}`;
|
||||
const image = new Image();
|
||||
this.previewUrls[path] = url;
|
||||
this.previewStates[path] = 'loading';
|
||||
this.previewImages[path] = image;
|
||||
image.onload = () => {
|
||||
if (generation !== this.previewGeneration) return;
|
||||
this.previewStates[path] = 'ready';
|
||||
delete this.previewImages[path];
|
||||
if (this.previewActive[path]) this.startPreview(entry);
|
||||
};
|
||||
image.onerror = () => {
|
||||
if (generation !== this.previewGeneration) return;
|
||||
this.previewStates[path] = 'error';
|
||||
delete this.previewImages[path];
|
||||
};
|
||||
image.src = url;
|
||||
});
|
||||
},
|
||||
|
||||
cancelPreviewLoads() {
|
||||
this.previewGeneration += 1;
|
||||
Object.values(this.previewImages).forEach((image) => {
|
||||
image.onload = null;
|
||||
image.onerror = null;
|
||||
image.src = '';
|
||||
});
|
||||
this.previewImages = {};
|
||||
this.previewFrames = {};
|
||||
this.previewUrls = {};
|
||||
this.previewStates = {};
|
||||
},
|
||||
|
||||
enterFullscreen() {
|
||||
if (document.fullscreenElement || document.webkitFullscreenElement) return;
|
||||
const root = document.documentElement;
|
||||
const request = root.requestFullscreen || root.webkitRequestFullscreen;
|
||||
if (request) {
|
||||
try {
|
||||
const result = request.call(root);
|
||||
if (result && result.catch) result.catch(() => {});
|
||||
} catch (_) {}
|
||||
}
|
||||
},
|
||||
|
||||
exitFullscreen() {
|
||||
if (!document.fullscreenElement && !document.webkitFullscreenElement) return;
|
||||
const exit = document.exitFullscreen || document.webkitExitFullscreen;
|
||||
if (exit) {
|
||||
try {
|
||||
const result = exit.call(document);
|
||||
if (result && result.catch) result.catch(() => {});
|
||||
} catch (_) {}
|
||||
}
|
||||
},
|
||||
|
||||
async closePlayer(updateLocation = true) {
|
||||
this.exitFullscreen();
|
||||
this.selected = null;
|
||||
this.playerLoading = false;
|
||||
this.playerLoadingCompact = false;
|
||||
if (updateLocation) window.LanPlayLocation.write(this.currentPath, null, false);
|
||||
await this.$nextTick();
|
||||
if (this.playerController) this.playerController.stop();
|
||||
}
|
||||
}));
|
||||
});
|
||||
@@ -0,0 +1,24 @@
|
||||
(function () {
|
||||
function read() {
|
||||
const params = new URLSearchParams(window.location.search);
|
||||
return {
|
||||
path: params.get('path') || '',
|
||||
play: params.get('play') || null
|
||||
};
|
||||
}
|
||||
|
||||
function write(path, play, replace) {
|
||||
const url = new URL(window.location.href);
|
||||
path ? url.searchParams.set('path', path) : url.searchParams.delete('path');
|
||||
play ? url.searchParams.set('play', play) : url.searchParams.delete('play');
|
||||
const next = `${url.pathname}${url.search}`;
|
||||
window.history[replace ? 'replaceState' : 'pushState']({}, '', next);
|
||||
}
|
||||
|
||||
function fileName(path) {
|
||||
const parts = path.split('/');
|
||||
return parts[parts.length - 1] || path;
|
||||
}
|
||||
|
||||
window.LanPlayLocation = { read, write, fileName };
|
||||
})();
|
||||
@@ -0,0 +1,265 @@
|
||||
(function () {
|
||||
class LanPlayPlayer {
|
||||
constructor(video, wrapper, onError, onLoading, onNext) {
|
||||
this.video = video;
|
||||
this.wrapper = wrapper;
|
||||
this.onError = onError;
|
||||
this.onLoading = onLoading;
|
||||
this.onNext = onNext;
|
||||
this.dashPlayer = null;
|
||||
this.controlBar = null;
|
||||
this.sessionId = null;
|
||||
this.mediaPath = null;
|
||||
this.dashPreferencesApplied = false;
|
||||
this.currentEntry = null;
|
||||
this.nextAvailable = false;
|
||||
this.restarting = false;
|
||||
this.operation = 0;
|
||||
this.freezeFrame = null;
|
||||
this.playingHandler = null;
|
||||
this.subtitleUrls = [];
|
||||
}
|
||||
|
||||
async play(entry, startSeconds = 0, preserveFrame = false) {
|
||||
const framePreserved = preserveFrame && this.captureFrame();
|
||||
this.onLoading(true, framePreserved);
|
||||
this.stop({ preserveFrame: framePreserved });
|
||||
const operation = ++this.operation;
|
||||
this.currentEntry = entry;
|
||||
this.mediaPath = entry.path;
|
||||
this.dashPreferencesApplied = false;
|
||||
const session = await window.LanPlayApi.startDash(entry.path, startSeconds);
|
||||
if (operation !== this.operation) {
|
||||
window.LanPlayApi.stopDash(session.session_id).catch(() => {});
|
||||
return;
|
||||
}
|
||||
this.sessionId = session.session_id;
|
||||
this.dashPlayer = dashjs.MediaPlayer().create();
|
||||
this.dashPlayer.updateSettings({
|
||||
streaming: {
|
||||
buffer: {
|
||||
bufferTimeDefault: 8,
|
||||
bufferTimeAtTopQuality: 8,
|
||||
bufferTimeAtTopQualityLongForm: 8
|
||||
}
|
||||
}
|
||||
});
|
||||
this.dashPlayer.initialize(this.video, null, true);
|
||||
await this.addExternalSubtitles(entry.path, session.start_seconds, operation);
|
||||
if (operation !== this.operation) return;
|
||||
this.controlBar = new DashControlBarModule.ControlBar(this.dashPlayer, this.video);
|
||||
this.controlBar.init(this.wrapper);
|
||||
this.controlBar.setVodDuration(session.duration_seconds, session.start_seconds);
|
||||
if (typeof this.controlBar.onSeekRequested === 'function') {
|
||||
this.controlBar.onSeekRequested((time) => this.seek(time));
|
||||
}
|
||||
if (typeof this.controlBar.onNextRequested === 'function') {
|
||||
this.controlBar.onNextRequested(() => this.onNext());
|
||||
}
|
||||
if (typeof this.controlBar.setNextAvailable === 'function') {
|
||||
this.controlBar.setNextAvailable(this.nextAvailable);
|
||||
}
|
||||
this.controlBar.onTrackSelected((type, track) => this.rememberTrack(type, track));
|
||||
this.controlBar.disable();
|
||||
const controlBar = this.controlBar;
|
||||
this.dashPlayer.on(dashjs.MediaPlayer.events.ERROR, (event) => {
|
||||
if (operation !== this.operation) return;
|
||||
const message = event && event.error && event.error.message;
|
||||
this.onError(message || 'DASH playback error');
|
||||
});
|
||||
this.dashPlayer.on(dashjs.MediaPlayer.events.STREAM_INITIALIZED, () => {
|
||||
if (operation !== this.operation || this.controlBar !== controlBar) return;
|
||||
this.applyDashPreferences();
|
||||
controlBar.enable();
|
||||
controlBar.refreshTracks();
|
||||
});
|
||||
this.playingHandler = () => {
|
||||
if (operation !== this.operation) return;
|
||||
this.playingHandler = null;
|
||||
this.clearFreezeFrame();
|
||||
this.onLoading(false, false);
|
||||
};
|
||||
this.video.addEventListener('playing', this.playingHandler, { once: true });
|
||||
this.dashPlayer.attachSource(session.manifest_url);
|
||||
if (!framePreserved) this.onLoading(false, false);
|
||||
}
|
||||
|
||||
async seek(time) {
|
||||
if (this.restarting || !this.currentEntry) return;
|
||||
this.restarting = true;
|
||||
const entry = this.currentEntry;
|
||||
try { await this.play(entry, time, true); }
|
||||
catch (error) {
|
||||
this.onError(error.message);
|
||||
this.clearFreezeFrame();
|
||||
this.onLoading(false, false);
|
||||
} finally { this.restarting = false; }
|
||||
}
|
||||
|
||||
setNextAvailable(available) {
|
||||
this.nextAvailable = Boolean(available);
|
||||
if (this.controlBar && typeof this.controlBar.setNextAvailable === 'function') {
|
||||
this.controlBar.setNextAvailable(this.nextAvailable);
|
||||
}
|
||||
}
|
||||
|
||||
applyDashPreferences() {
|
||||
if (this.dashPreferencesApplied || !this.mediaPath) return;
|
||||
['audio', 'video'].forEach((type) => {
|
||||
const tracks = this.dashPlayer.getTracksFor(type) || [];
|
||||
const preferred = window.LanPlayPreferences.find(this.mediaPath, type, tracks);
|
||||
if (preferred) this.dashPlayer.setCurrentTrack(preferred);
|
||||
});
|
||||
const textTracks = this.dashPlayer.getTracksFor('text') || [];
|
||||
const preferredText = window.LanPlayPreferences.find(this.mediaPath, 'subtitle', textTracks);
|
||||
if (preferredText === null) {
|
||||
this.dashPlayer.setTextTrack(-1);
|
||||
} else if (preferredText) {
|
||||
const index = textTracks.indexOf(preferredText);
|
||||
if (index >= 0) this.dashPlayer.setTextTrack(index);
|
||||
}
|
||||
this.dashPreferencesApplied = true;
|
||||
}
|
||||
|
||||
rememberTrack(type, track) {
|
||||
if (!this.mediaPath) return;
|
||||
if (type === 'nativeText') {
|
||||
const tracks = Array.from(this.video.textTracks || []);
|
||||
window.LanPlayPreferences.remember(this.mediaPath, 'subtitle', track, tracks.indexOf(track));
|
||||
return;
|
||||
}
|
||||
const preferenceType = type === 'text' ? 'subtitle' : type;
|
||||
const tracks = this.dashPlayer.getTracksFor(type) || [];
|
||||
window.LanPlayPreferences.remember(this.mediaPath, preferenceType, track, tracks.indexOf(track));
|
||||
}
|
||||
|
||||
async addExternalSubtitles(path, startSeconds = 0, operation = this.operation) {
|
||||
let subtitles = [];
|
||||
try { subtitles = await window.LanPlayApi.subtitles(path); } catch (_) { return; }
|
||||
if (operation !== this.operation) return;
|
||||
const loaded = await Promise.all(subtitles.filter((item) => item.supported).map(async (subtitle, ordinal) => {
|
||||
const query = new URLSearchParams({ path, start: String(startSeconds) });
|
||||
const url = subtitle.source === 'external'
|
||||
? `/api/subtitles/external/${encodeURIComponent(subtitle.id)}?${query}`
|
||||
: `/api/subtitles/${subtitle.index}?${query}`;
|
||||
try {
|
||||
const response = await fetch(url);
|
||||
if (!response.ok) return null;
|
||||
const contents = await response.text();
|
||||
const objectUrl = URL.createObjectURL(new Blob([contents], { type: 'text/vtt' }));
|
||||
return { subtitle, ordinal, objectUrl };
|
||||
} catch (_) {
|
||||
return null;
|
||||
}
|
||||
}));
|
||||
if (operation !== this.operation) {
|
||||
loaded.filter(Boolean).forEach((item) => URL.revokeObjectURL(item.objectUrl));
|
||||
return;
|
||||
}
|
||||
loaded.filter(Boolean).forEach(({ subtitle, ordinal, objectUrl }) => {
|
||||
const label = subtitle.title || subtitle.language || `Subtitle ${ordinal + 1}`;
|
||||
const idPart = subtitle.source === 'external' ? subtitle.id : subtitle.index;
|
||||
this.subtitleUrls.push(objectUrl);
|
||||
this.dashPlayer.addExternalSubtitle(new dashjs.ExternalSubtitle({
|
||||
id: `lan-play-${subtitle.source}-${idPart}`,
|
||||
url: objectUrl,
|
||||
language: label,
|
||||
mimeType: 'text/vtt',
|
||||
bandwidth: 256,
|
||||
periodId: '0'
|
||||
}));
|
||||
});
|
||||
}
|
||||
|
||||
captureFrame() {
|
||||
if (this.video.readyState < 2 || !this.video.videoWidth || !this.video.videoHeight) return false;
|
||||
try {
|
||||
this.clearFreezeFrame();
|
||||
const canvas = document.createElement('canvas');
|
||||
const width = Math.max(1, this.wrapper.clientWidth);
|
||||
const height = Math.max(1, this.wrapper.clientHeight);
|
||||
canvas.width = Math.min(width, 1920);
|
||||
canvas.height = Math.min(height, 1080);
|
||||
canvas.className = 'player-freeze-frame';
|
||||
const context = canvas.getContext('2d');
|
||||
context.fillStyle = '#000';
|
||||
context.fillRect(0, 0, canvas.width, canvas.height);
|
||||
const scale = Math.min(canvas.width / this.video.videoWidth, canvas.height / this.video.videoHeight);
|
||||
const drawWidth = this.video.videoWidth * scale;
|
||||
const drawHeight = this.video.videoHeight * scale;
|
||||
context.drawImage(
|
||||
this.video,
|
||||
(canvas.width - drawWidth) / 2,
|
||||
(canvas.height - drawHeight) / 2,
|
||||
drawWidth,
|
||||
drawHeight
|
||||
);
|
||||
this.wrapper.appendChild(canvas);
|
||||
this.freezeFrame = canvas;
|
||||
return true;
|
||||
} catch (_) {
|
||||
this.clearFreezeFrame();
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
clearFreezeFrame() {
|
||||
if (this.freezeFrame) this.freezeFrame.remove();
|
||||
this.freezeFrame = null;
|
||||
}
|
||||
|
||||
stop(options = {}) {
|
||||
this.operation += 1;
|
||||
if (this.playingHandler) {
|
||||
this.video.removeEventListener('playing', this.playingHandler);
|
||||
this.playingHandler = null;
|
||||
}
|
||||
if (!options.preserveFrame) this.clearFreezeFrame();
|
||||
this.revokeSubtitleUrls();
|
||||
if (this.controlBar) {
|
||||
this.controlBar.destroy();
|
||||
this.controlBar = null;
|
||||
}
|
||||
if (this.dashPlayer) {
|
||||
this.dashPlayer.destroy();
|
||||
this.dashPlayer = null;
|
||||
}
|
||||
this.video.pause();
|
||||
this.video.removeAttribute('src');
|
||||
while (this.video.firstChild) this.video.removeChild(this.video.firstChild);
|
||||
this.video.load();
|
||||
this.mediaPath = null;
|
||||
this.dashPreferencesApplied = false;
|
||||
this.currentEntry = null;
|
||||
if (this.sessionId) {
|
||||
const sessionId = this.sessionId;
|
||||
this.sessionId = null;
|
||||
window.LanPlayApi.stopDash(sessionId).catch(() => {});
|
||||
}
|
||||
}
|
||||
|
||||
dispose() {
|
||||
this.operation += 1;
|
||||
if (this.playingHandler) this.video.removeEventListener('playing', this.playingHandler);
|
||||
this.playingHandler = null;
|
||||
this.clearFreezeFrame();
|
||||
this.revokeSubtitleUrls();
|
||||
if (this.controlBar) this.controlBar.destroy();
|
||||
if (this.dashPlayer) this.dashPlayer.destroy();
|
||||
if (this.sessionId) {
|
||||
fetch(`/api/dash/${this.sessionId}`, { method: 'DELETE', keepalive: true }).catch(() => {});
|
||||
}
|
||||
this.controlBar = null;
|
||||
this.dashPlayer = null;
|
||||
this.sessionId = null;
|
||||
this.currentEntry = null;
|
||||
}
|
||||
|
||||
revokeSubtitleUrls() {
|
||||
this.subtitleUrls.forEach((url) => URL.revokeObjectURL(url));
|
||||
this.subtitleUrls = [];
|
||||
}
|
||||
}
|
||||
|
||||
window.LanPlayPlayer = LanPlayPlayer;
|
||||
})();
|
||||
@@ -0,0 +1,63 @@
|
||||
(function () {
|
||||
const prefix = 'lan-play:release:v1:';
|
||||
|
||||
function folder(path) {
|
||||
const index = path.lastIndexOf('/');
|
||||
return index < 0 ? '' : path.slice(0, index);
|
||||
}
|
||||
|
||||
function key(path) {
|
||||
return `${prefix}${folder(path)}`;
|
||||
}
|
||||
|
||||
function load(path) {
|
||||
try { return JSON.parse(localStorage.getItem(key(path))) || {}; }
|
||||
catch (_) { return {}; }
|
||||
}
|
||||
|
||||
function store(path, value) {
|
||||
try { localStorage.setItem(key(path), JSON.stringify(value)); } catch (_) {}
|
||||
}
|
||||
|
||||
function label(track) {
|
||||
const labels = track && track.labels || [];
|
||||
const selected = labels.find((item) => item.text) || labels[0];
|
||||
return selected && selected.text || track && track.label || '';
|
||||
}
|
||||
|
||||
function descriptor(track, ordinal) {
|
||||
if (!track) return { off: true };
|
||||
return {
|
||||
off: false,
|
||||
lang: track.lang || track.language || '',
|
||||
label: label(track),
|
||||
roles: (track.roles || []).map((role) => role.value || role).filter(Boolean).sort(),
|
||||
ordinal
|
||||
};
|
||||
}
|
||||
|
||||
function remember(path, type, track, ordinal) {
|
||||
const profile = load(path);
|
||||
profile[type] = descriptor(track, ordinal);
|
||||
store(path, profile);
|
||||
}
|
||||
|
||||
function find(path, type, tracks) {
|
||||
const wanted = load(path)[type];
|
||||
if (!wanted) return undefined;
|
||||
if (wanted.off) return null;
|
||||
const described = tracks.map((track, ordinal) => ({ track, ordinal, value: descriptor(track, ordinal) }));
|
||||
let matches = described.filter((item) => wanted.lang && item.value.lang === wanted.lang);
|
||||
if (wanted.label) {
|
||||
const labeled = matches.filter((item) => item.value.label === wanted.label);
|
||||
if (labeled.length) matches = labeled;
|
||||
}
|
||||
if (!matches.length && wanted.label) {
|
||||
matches = described.filter((item) => item.value.label === wanted.label);
|
||||
}
|
||||
if (!matches.length && !wanted.lang && !wanted.label) matches = described;
|
||||
return (matches.find((item) => item.ordinal === wanted.ordinal) || matches[0] || {}).track;
|
||||
}
|
||||
|
||||
window.LanPlayPreferences = { folder, load, remember, find };
|
||||
})();
|
||||
@@ -0,0 +1,36 @@
|
||||
const assert = require('node:assert/strict');
|
||||
const test = require('node:test');
|
||||
|
||||
const values = new Map();
|
||||
global.window = global;
|
||||
global.localStorage = {
|
||||
getItem: (key) => values.get(key) || null,
|
||||
setItem: (key, value) => values.set(key, value)
|
||||
};
|
||||
require('./preferences.js');
|
||||
|
||||
test('restores a matching track for the next file in the same folder', () => {
|
||||
const firstEpisode = 'Anime/Show/episode-01.mkv';
|
||||
const nextEpisode = 'Anime/Show/episode-02.mkv';
|
||||
const tracks = [{ lang: 'en' }, { lang: 'ja' }];
|
||||
LanPlayPreferences.remember(firstEpisode, 'audio', tracks[1], 1);
|
||||
assert.equal(LanPlayPreferences.find(nextEpisode, 'audio', tracks), tracks[1]);
|
||||
});
|
||||
|
||||
test('does not apply a profile from another folder', () => {
|
||||
const tracks = [{ lang: 'ja' }];
|
||||
assert.equal(LanPlayPreferences.find('Anime/Other/episode-01.mkv', 'audio', tracks), undefined);
|
||||
});
|
||||
|
||||
test('falls back to the player default when the saved track is unavailable', () => {
|
||||
const tracks = [{ lang: 'en' }];
|
||||
assert.equal(LanPlayPreferences.find('Anime/Show/episode-03.mkv', 'audio', tracks), undefined);
|
||||
});
|
||||
|
||||
test('remembers disabled subtitles for the release folder', () => {
|
||||
LanPlayPreferences.remember('Series/Season/episode-01.mkv', 'subtitle', null, -1);
|
||||
assert.equal(
|
||||
LanPlayPreferences.find('Series/Season/episode-02.mkv', 'subtitle', [{ language: 'en' }]),
|
||||
null
|
||||
);
|
||||
});
|
||||
@@ -0,0 +1,61 @@
|
||||
:root { color-scheme: dark; font-family: system-ui, sans-serif; background: #101216; color: #f4f4f4; }
|
||||
* { box-sizing: border-box; }
|
||||
body { margin: 0; }
|
||||
body.player-open { overflow: hidden; }
|
||||
[x-cloak] { display: none !important; }
|
||||
header { position: sticky; top: 0; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 2rem; background: #181b21; z-index: 1; }
|
||||
h1 { margin: 0 0 .35rem; }
|
||||
.path { color: #aab2c0; }
|
||||
.view-switch { display: flex; gap: .35rem; padding: .3rem; border-radius: .55rem; background: #101216; }
|
||||
.view-switch button { width: 2.7rem; height: 2.35rem; border: 0; border-radius: .4rem; background: transparent; color: #aab2c0; font-size: 1.15rem; cursor: pointer; }
|
||||
.view-switch button.active { background: #354156; color: #fff; }
|
||||
.view-switch button:hover, .view-switch button:focus { outline: none; background: #303746; color: #fff; }
|
||||
main { padding: 1.5rem 2rem; }
|
||||
.entries { display: grid; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); gap: .9rem; }
|
||||
.entries button { min-width: 0; min-height: 3.5rem; padding: .65rem; border: 2px solid transparent; border-radius: .6rem; background: #252a33; color: inherit; text-align: left; font-size: 1.05rem; cursor: pointer; }
|
||||
.entries button.media, .entries button.directory { display: grid; grid-template-rows: auto auto; gap: .65rem; }
|
||||
.entry-preview { display: grid; place-items: center; min-height: 2.2rem; border-radius: .4rem; font-size: 1.35rem; }
|
||||
.entry-preview-media { width: 100%; aspect-ratio: 16 / 9; min-height: 0; overflow: hidden; background-color: #171a20; background-repeat: no-repeat; background-size: 500% 200%; font-size: 2rem; transition: background-image .15s ease; }
|
||||
.preview-spinner { animation: player-spin 1s linear infinite; color: #aab2c0; }
|
||||
.entry-name { display: block; width: 100%; overflow: hidden; white-space: nowrap; }
|
||||
.entry-name-track { display: inline-block; min-width: max-content; }
|
||||
.entry-name.is-overflowing .entry-name-track { animation: entry-marquee 14s linear infinite; }
|
||||
@keyframes entry-marquee { from { transform: translateX(0); } to { transform: translateX(-100%); } }
|
||||
.entries button:focus { outline: none; border-color: #69a7ff; background: #303746; }
|
||||
.entry-table-wrap { overflow-x: auto; border: 1px solid #343a45; border-radius: .65rem; }
|
||||
.entry-table { width: 100%; border-collapse: collapse; table-layout: fixed; background: #20242c; }
|
||||
.entry-table th { padding: .65rem .8rem; color: #aab2c0; background: #181b21; text-align: left; font-size: .85rem; text-transform: uppercase; letter-spacing: .04em; }
|
||||
.entry-table th:first-child { width: 11rem; }
|
||||
.entry-table th:last-child { width: 7rem; }
|
||||
.entry-table td { height: 5.25rem; padding: .45rem .8rem; border-top: 1px solid #343a45; overflow: hidden; color: #dce1e8; }
|
||||
.entry-table tbody tr { cursor: pointer; }
|
||||
.entry-table tbody tr:hover, .entry-table tbody tr:focus { outline: none; background: #303746; }
|
||||
.table-preview { display: grid; place-items: center; width: 8rem; aspect-ratio: 16 / 9; overflow: hidden; border-radius: .35rem; background-color: #171a20; background-repeat: no-repeat; background-size: 500% 200%; font-size: 1.35rem; }
|
||||
.table-name { font-size: 1rem; }
|
||||
.info-backdrop { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 1.5rem; background: rgba(0,0,0,.72); }
|
||||
.info-dialog { position: relative; width: min(46rem, 100%); max-height: calc(100vh - 3rem); overflow: auto; padding: 1.4rem 1.5rem 1.5rem; border: 1px solid #465064; border-radius: .8rem; background: #1d222b; box-shadow: 0 1rem 4rem rgba(0,0,0,.55); }
|
||||
.info-dialog h2 { margin: 0 3rem 1.2rem 0; }
|
||||
.info-close { position: absolute; top: .9rem; right: .9rem; width: 2.5rem; height: 2.5rem; border: 0; border-radius: 50%; background: #303746; color: #fff; cursor: pointer; }
|
||||
.info-loading { display: flex; align-items: center; gap: .65rem; color: #aab2c0; }
|
||||
.info-grid { display: grid; grid-template-columns: 8rem minmax(0, 1fr); gap: .7rem 1rem; margin: 0; }
|
||||
.info-grid dt { color: #9ea8b8; }
|
||||
.info-grid dd { min-width: 0; margin: 0; overflow-wrap: anywhere; }
|
||||
.info-grid small { display: block; margin-top: .2rem; color: #7f8999; }
|
||||
.info-browser { font-size: .82rem; color: #b9c0cb; }
|
||||
@media (max-width: 38rem) { .info-grid { grid-template-columns: 1fr; gap: .2rem; } .info-grid dd { margin-bottom: .65rem; } }
|
||||
.error { color: #ff8989; }
|
||||
.player { position: fixed; inset: 0; z-index: 5; display: flex; flex-direction: column; background: #000; }
|
||||
.player-close { position: absolute; top: 1.25rem; right: 1.25rem; z-index: 40; width: 4rem; height: 4rem; display: grid; place-items: center; padding: 0; border: 2px solid rgba(255,255,255,.7); border-radius: 50%; background: rgba(0,0,0,.65); color: #fff; font-size: 1.8rem; cursor: pointer; opacity: 1; transition: opacity .2s ease, transform .2s ease; }
|
||||
.player-close.player-close-hidden { opacity: 0; pointer-events: none; }
|
||||
.player-close:hover, .player-close:focus { outline: none; border-color: #fff; background: rgba(30,35,45,.95); transform: scale(1.05); }
|
||||
.video-wrapper { position: relative; flex: 1; min-height: 0; overflow: hidden; }
|
||||
.video-wrapper video { display: block; width: 100%; height: 100%; object-fit: contain; }
|
||||
.player-title { position: absolute; inset: 0 0 auto; z-index: 18; min-height: 7rem; padding: 1.4rem 6.5rem 3rem 1.6rem; overflow: hidden; color: #fff; background: linear-gradient(to bottom, rgba(0,0,0,.78) 0%, rgba(0,0,0,.42) 42%, transparent 100%); font-size: clamp(1.05rem, 2vw, 1.55rem); font-weight: 600; line-height: 1.3; text-overflow: ellipsis; white-space: nowrap; text-shadow: 0 1px 3px #000; opacity: 1; transition: opacity .2s ease; pointer-events: none; }
|
||||
.player-title.player-title-hidden { opacity: 0; }
|
||||
.player-freeze-frame { position: absolute; inset: 0; z-index: 15; width: 100%; height: 100%; object-fit: contain; background: #000; }
|
||||
.video-wrapper .cb-controlbar { --cb-accent: #69a7ff; font-family: system-ui, sans-serif; }
|
||||
.player-status { position: absolute; inset: 0; z-index: 20; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem; color: #f4f4f4; background: #000; font-size: 1.1rem; }
|
||||
.player-status-compact { inset: 1rem auto auto 50%; transform: translateX(-50%); flex-direction: row; padding: .6rem .9rem; border-radius: .5rem; background: rgba(0,0,0,.72); font-size: .9rem; white-space: nowrap; pointer-events: none; }
|
||||
.player-status-compact .player-spinner { font-size: 1.15rem; }
|
||||
.player-spinner { font-size: 3rem; animation: player-spin 1s linear infinite; }
|
||||
@keyframes player-spin { to { transform: rotate(360deg); } }
|
||||
Vendored
+21
@@ -0,0 +1,21 @@
|
||||
The MIT License (MIT)
|
||||
|
||||
Copyright (c) 2019-2024 The Bootstrap Authors
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||
of this software and associated documentation files (the "Software"), to deal
|
||||
in the Software without restriction, including without limitation the rights
|
||||
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||
copies of the Software, and to permit persons to whom the Software is
|
||||
furnished to do so, subject to the following conditions:
|
||||
|
||||
The above copyright notice and this permission notice shall be included in
|
||||
all copies or substantial portions of the Software.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
|
||||
THE SOFTWARE.
|
||||
File diff suppressed because one or more lines are too long
Binary file not shown.
Vendored
+1317
File diff suppressed because it is too large
Load Diff
Vendored
+339
@@ -0,0 +1,339 @@
|
||||
/* ============================================================
|
||||
dash.js Controlbar – Standalone CSS
|
||||
============================================================
|
||||
Include this stylesheet alongside ControlBar.js.
|
||||
Requires Bootstrap Icons CSS for icon display.
|
||||
|
||||
Theming: override --cb-accent and --cb-danger on the
|
||||
.cb-controlbar selector (or any ancestor) to customise
|
||||
highlight and live-indicator colours.
|
||||
============================================================ */
|
||||
|
||||
/* ---- Default theme variables ---- */
|
||||
.cb-controlbar {
|
||||
--cb-accent: #5b8def;
|
||||
--cb-danger: #e74c3c;
|
||||
}
|
||||
|
||||
.cb-skip-btn {
|
||||
min-width: 2.5rem;
|
||||
font-size: 0.8rem;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
/* ---- Utility: hidden element (replaces Bootstrap d-none) ---- */
|
||||
.cb-hidden-element {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
/* ---- Control Bar container ---- */
|
||||
.cb-controlbar {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background: linear-gradient(transparent, rgba(0, 0, 0, 0.85));
|
||||
padding: 2rem 1rem 0.5rem 1rem;
|
||||
z-index: 10;
|
||||
transition: opacity 0.3s ease, visibility 0.3s ease;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.35rem;
|
||||
}
|
||||
|
||||
.cb-controlbar.cb-hidden {
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.cb-controlbar.cb-disabled {
|
||||
pointer-events: none;
|
||||
opacity: 0.3;
|
||||
}
|
||||
|
||||
/* ---- Seekbar ---- */
|
||||
.cb-seekbar-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.cb-seekbar {
|
||||
flex: 1;
|
||||
height: 4px;
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
border-radius: 2px;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
transition: height 0.1s;
|
||||
}
|
||||
|
||||
.cb-seekbar:hover {
|
||||
height: 6px;
|
||||
}
|
||||
|
||||
.cb-seekbar-buffer {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: 100%;
|
||||
background: rgba(255, 255, 255, 0.3);
|
||||
border-radius: 2px;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.cb-seekbar-played {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: 100%;
|
||||
background: var(--cb-accent);
|
||||
border-radius: 2px;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.cb-seekbar-played::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
right: -6px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
background: var(--cb-accent);
|
||||
border-radius: 50%;
|
||||
opacity: 0;
|
||||
transition: opacity 0.1s;
|
||||
}
|
||||
|
||||
.cb-seekbar:hover .cb-seekbar-played::after {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/* ---- Control buttons row ---- */
|
||||
.cb-controls-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.cb-btn {
|
||||
background: none;
|
||||
border: none;
|
||||
color: #fff;
|
||||
font-size: 1.1rem;
|
||||
cursor: pointer;
|
||||
padding: 0.25rem;
|
||||
opacity: 0.85;
|
||||
transition: opacity 0.15s;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.cb-btn:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.cb-time {
|
||||
font-size: 0.8rem;
|
||||
color: #fff;
|
||||
font-variant-numeric: tabular-nums;
|
||||
white-space: nowrap;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.cb-time-separator {
|
||||
opacity: 0.4;
|
||||
}
|
||||
|
||||
.cb-spacer {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
/* ---- Volume ---- */
|
||||
.cb-volume-group {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.25rem;
|
||||
}
|
||||
|
||||
.cb-volume-slider {
|
||||
width: 80px;
|
||||
height: 4px;
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
background: rgba(255, 255, 255, 0.3);
|
||||
border-radius: 2px;
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.cb-volume-slider::-webkit-slider-thumb {
|
||||
-webkit-appearance: none;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
background: #fff;
|
||||
border-radius: 50%;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.cb-volume-slider::-moz-range-thumb {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
background: #fff;
|
||||
border-radius: 50%;
|
||||
cursor: pointer;
|
||||
border: none;
|
||||
}
|
||||
|
||||
/* ---- Playback rate controls ---- */
|
||||
.cb-rate-group {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.15rem;
|
||||
margin: 0 0.25rem;
|
||||
}
|
||||
|
||||
.cb-rate-display {
|
||||
color: #e0e0e0;
|
||||
font-size: 0.75rem;
|
||||
min-width: 2.5rem;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.cb-rate-display:hover {
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.cb-btn-sm {
|
||||
font-size: 0.7rem;
|
||||
padding: 0.1rem 0.3rem;
|
||||
}
|
||||
|
||||
/* ---- Live indicator ---- */
|
||||
.cb-live-indicator {
|
||||
cursor: pointer;
|
||||
color: #8a8aa0;
|
||||
}
|
||||
|
||||
.cb-live-indicator.cb-at-live-edge {
|
||||
color: var(--cb-danger);
|
||||
}
|
||||
|
||||
.cb-live-indicator .bi-circle-fill {
|
||||
font-size: 0.5rem;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
/* ---- Thumbnail preview ---- */
|
||||
.cb-thumbnail-container {
|
||||
position: absolute;
|
||||
bottom: 100%;
|
||||
pointer-events: none;
|
||||
z-index: 20;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.cb-thumbnail-elem {
|
||||
border: 2px solid #fff;
|
||||
border-radius: 4px;
|
||||
overflow: hidden;
|
||||
transform-origin: center bottom;
|
||||
}
|
||||
|
||||
.cb-thumbnail-time {
|
||||
font-size: 0.7rem;
|
||||
color: #fff;
|
||||
background: rgba(0, 0, 0, 0.7);
|
||||
padding: 1px 6px;
|
||||
border-radius: 3px;
|
||||
margin-top: 4px;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
/* ---- Menu anchors and menus ---- */
|
||||
.cb-menu-anchor {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* Menus — always dark (overlays video) */
|
||||
.cb-menu {
|
||||
position: absolute;
|
||||
bottom: 100%;
|
||||
right: 0;
|
||||
background: rgba(20, 20, 40, 0.95);
|
||||
border: 1px solid #2d2d50;
|
||||
border-radius: 6px;
|
||||
min-width: 180px;
|
||||
max-height: min(400px, 60vh);
|
||||
overflow-y: auto;
|
||||
padding: 0.25rem 0;
|
||||
margin-bottom: 0.5rem;
|
||||
backdrop-filter: blur(10px);
|
||||
z-index: 30;
|
||||
}
|
||||
|
||||
/* Scrollbar styling for menus */
|
||||
.cb-menu::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
}
|
||||
|
||||
.cb-menu::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.cb-menu::-webkit-scrollbar-thumb {
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.cb-menu::-webkit-scrollbar-thumb:hover {
|
||||
background: rgba(255, 255, 255, 0.35);
|
||||
}
|
||||
|
||||
/* Firefox scrollbar */
|
||||
.cb-menu {
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: rgba(255, 255, 255, 0.2) transparent;
|
||||
}
|
||||
|
||||
.cb-menu-title {
|
||||
padding: 0.35rem 0.75rem;
|
||||
font-size: 0.7rem;
|
||||
font-weight: 600;
|
||||
color: rgba(255, 255, 255, 0.5);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.03em;
|
||||
}
|
||||
|
||||
.cb-menu-item {
|
||||
padding: 0.35rem 0.75rem;
|
||||
font-size: 0.8rem;
|
||||
cursor: pointer;
|
||||
color: #e0e0e0;
|
||||
transition: background 0.1s;
|
||||
}
|
||||
|
||||
.cb-menu-item:hover {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
.cb-menu-item-selected {
|
||||
color: var(--cb-accent);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.cb-menu-item-selected::before {
|
||||
content: '✓ ';
|
||||
}
|
||||
|
||||
/* ---- Fullscreen wrapper helper ---- */
|
||||
.cb-fullscreen {
|
||||
/* Applied to the wrapper element when entering fullscreen */
|
||||
}
|
||||
Reference in New Issue
Block a user