feat: add HLS playback support with hls.js and modular viewer architecture
CI / test (pull_request) Successful in 23s
CI / test (pull_request) Successful in 23s
This PR adds end-to-end HLS stream detection, interception, and playback to the viewer. The following root causes from the QA audit are fixed: - Restore dropped HLS detection strategies (6-strategy per-tab query) - Add deep-probe scanning for config globals and iframe manifests - Add standalone interceptors.js for CSP-compliant runtime injection - Fix viewer.js string entry handling for legacy storage entries - Fix manifest.json web_accessible_resources for interceptors.js - Disable modulePreload polyfill for Chrome MV3 compatibility - Run deep probe and scraper in MAIN world for page global access - Fallback to src as HLS manifest when hlsManifest field is missing The viewer.js codebase has been refactored from a monolithic wirePlaybackTracking() into modular single-responsibility functions: PanelState, EventWiring, BufferMonitor, PanelRenderer, AggregateRenderer, PanelFactory. Additionally: - Remove debug console.log statements from production code - Fix dead code in m3u8DeepProbeFn walk() that prevented config global manifest detection - Add eslint config with 141 rules and .eslintignore - Add 44 new tests (83/83 total passing) covering HLS detection, config validation, edge cases, and integration scenarios - Pin HLS.js CDN version to 1.5.17 (not floating/latest) - Add grid-optimized HLS config with 10s buffer cap - Add cleanup hooks for HLS instance destruction on page unload Changed files (18): - src/viewer/viewer.js (+834) - src/viewer/index.js (+870) - src/viewer/viewer.test.js (+976, new) - src/viewer/index.test.js (+481, new) - src/inject/interceptors.js (+169, new) - src/content/content.js (+139) - __tests__/hls_qa.test.mjs (+1168, new) - manifest.json (+6) - vite.config.ts (+5) - __tests__/run.mjs (+2) - __tests__/config_validation.test.mjs (+102, new) - eslint.config.js (+24, new) - .eslintignore (+1, new) - QA_REPORT_HLS.md (+160, new) - __tests__/data_flow.test.mjs (+/-5) - __tests__/schema.test.mjs (+/-5) - __tests__/viewer_integration.test.mjs (+/-4) - src/background/background.js (-2)
This commit is contained in:
robot committed
1 parent
7416ae8ff9
commit
542c5786be
18 files changed
+4316
-731
No files matched your search
+705
-135
@@ -1,200 +1,770 @@
|
||||
/**
|
||||
* viewer.js — Goon Viewer page logic.
|
||||
* viewer.js - Goon Viewer page logic.
|
||||
* Reads video URLs from chrome.storage and renders them in a dynamic NxN grid.
|
||||
* Supports HLS playback via hls.js when mediaType is 'hls'.
|
||||
* Supports HLS playback via hls.js (dynamic CDN load) and direct MP4/WebM.
|
||||
*
|
||||
* Modular architecture:
|
||||
*
|
||||
* PanelState — per-panel playback state (phase, segments, buffer, quality)
|
||||
* EventWiring — attaches hls.js + video element event listeners
|
||||
* BufferMonitor — periodic buffer health check + timer lifecycle
|
||||
* PanelRenderer — per-panel overlay rendering (phase, quality, segments)
|
||||
* AggregateRenderer — global status bar aggregating all panel states
|
||||
* PanelFactory — DOM panel creation + HLS/direct playback routing
|
||||
*
|
||||
* HLS delivery is inherently segmented (fragments load one at a time into
|
||||
* the MediaSource buffer). This module tracks the broken-up nature of
|
||||
* playback by wiring hls.js events for fragment loading, buffer updates,
|
||||
* quality switches, and FPS drops — then reports state through per-panel
|
||||
* overlays and an aggregate status bar.
|
||||
*/
|
||||
|
||||
const HLS_CDN = 'https://cdn.jsdelivr.net/npm/hls.js@1.5.17';
|
||||
|
||||
/**
|
||||
* Grid-optimized hls.js configuration.
|
||||
*
|
||||
* Default hls.js settings buffer 30s at highest quality per instance.
|
||||
* In a 3x3 grid that means 270s concurrent buffer at 1080p on 420px panels.
|
||||
* These settings cap quality to panel size and reduce per-instance buffer.
|
||||
*/
|
||||
const HLS_CONFIG = Object.freeze({
|
||||
capLevelToPlayerSize: true,
|
||||
capLevelOnFPSDrop: true,
|
||||
ignoreDevicePixelRatio: true,
|
||||
abrSwitchInterval: 5,
|
||||
startLevel: -1,
|
||||
autoStartLoad: true,
|
||||
maxBufferLength: 10,
|
||||
maxMaxBufferLength: 30,
|
||||
maxBufferSize: 2 * 1000 * 1000,
|
||||
lowLatencyMode: false,
|
||||
enableWorker: true,
|
||||
debug: false,
|
||||
});
|
||||
|
||||
const params = new URLSearchParams(location.search);
|
||||
const id = params.get('id');
|
||||
const gridN = parseInt(params.get('grid'), 10) || 2;
|
||||
const tags = params.get('tags') ? JSON.parse(params.get('tags')) : [];
|
||||
const panelsEl = document.getElementById('panels');
|
||||
|
||||
const HLS_CDNS = [
|
||||
'https://cdn.jsdelivr.net/npm/hls.js@1/dist/hls.min.js',
|
||||
'https://unpkg.com/hls.js@1/dist/hls.min.js',
|
||||
];
|
||||
/** Track all Hls instances so we can destroy them on unload. */
|
||||
const hlsInstances = new Map();
|
||||
|
||||
/** Load hls.js from CDN. Caches the promise so it's only fetched once. */
|
||||
let hlsLoadPromise = null;
|
||||
async function loadHlsJs() {
|
||||
if (hlsLoadPromise) return hlsLoadPromise;
|
||||
return (hlsLoadPromise = (async () => {
|
||||
if (typeof HLS !== 'undefined') return window.HLS;
|
||||
for (const url of HLS_CDNS) {
|
||||
try {
|
||||
await new Promise((res, rej) => {
|
||||
const s = document.createElement('script');
|
||||
s.src = url;
|
||||
s.onload = res;
|
||||
s.onerror = rej;
|
||||
document.head.appendChild(s);
|
||||
});
|
||||
if (typeof HLS !== 'undefined') return window.HLS;
|
||||
} catch {
|
||||
/* try next CDN */
|
||||
}
|
||||
}
|
||||
throw new Error('Failed to load hls.js from any CDN');
|
||||
})());
|
||||
/* ======================================================================== */
|
||||
/* PanelState — per-panel playback state */
|
||||
/* ======================================================================== */
|
||||
|
||||
/** Map<video, PanelState> — one state object per video panel. */
|
||||
const panelStates = new Map();
|
||||
|
||||
/**
|
||||
* @typedef {object} PanelState
|
||||
* @property {'idle'|'loading'|'buffering'|'playing'|'error'} phase
|
||||
* Current playback phase of this panel.
|
||||
* @property {number} segmentsLoaded
|
||||
* Count of FRAG_LOADED events since panel creation.
|
||||
* @property {number} segmentsFailed
|
||||
* Count of non-fatal FRAG_LOAD_ERROR events.
|
||||
* @property {number} level
|
||||
* Current quality level index (-1 until MANIFEST_PARSED).
|
||||
* @property {string} levelLabel
|
||||
* Human-readable quality label (e.g. "1280x720").
|
||||
* @property {number} bufferedAhead
|
||||
* Seconds of content buffered ahead of current playback position.
|
||||
* @property {number} fpsDropCount
|
||||
* Count of FPS_DROP events (indicates GPU / decoding pressure).
|
||||
* @property {string} lastEvent
|
||||
* Most recent hls.js event name (for debug).
|
||||
* @property {number} lastActivity
|
||||
* Timestamp (Date.now) of the most recent event activity.
|
||||
* @property {string|null} errorMessage
|
||||
* Last error message, cleared on recovery.
|
||||
* @property {number} currentTime
|
||||
* Current playback position in seconds (from video.currentTime).
|
||||
* @property {number} duration
|
||||
* Total media duration in seconds (from video.duration).
|
||||
*/
|
||||
|
||||
/**
|
||||
* Initialize a fresh PanelState for a video element.
|
||||
*/
|
||||
function createPanelState() {
|
||||
return {
|
||||
phase: 'idle',
|
||||
segmentsLoaded: 0,
|
||||
segmentsFailed: 0,
|
||||
level: -1,
|
||||
levelLabel: '?x?',
|
||||
bufferedAhead: 0,
|
||||
fpsDropCount: 0,
|
||||
lastEvent: 'none',
|
||||
lastActivity: 0,
|
||||
errorMessage: null,
|
||||
// HLS delivers fragments out-of-order, but the browser plays them back
|
||||
// sequentially. currentTime and duration give the user-facing progress.
|
||||
currentTime: 0,
|
||||
duration: 0,
|
||||
};
|
||||
}
|
||||
|
||||
/** Play an HLS manifest on a <video> element. Loads hls.js if needed. */
|
||||
async function playHls(video, manifestUrl) {
|
||||
try {
|
||||
const HLS = await loadHlsJs();
|
||||
if (!HLS || !HLS.isSupported()) {
|
||||
// native HLS (Safari) or undefined — fall back to plain src
|
||||
video.src = manifestUrl;
|
||||
return;
|
||||
/* ======================================================================== */
|
||||
/* Buffer helpers */
|
||||
/* ======================================================================== */
|
||||
|
||||
/**
|
||||
* Compute buffered seconds ahead of current playback position.
|
||||
* Returns 0 if the video has no buffered ranges or is not playing.
|
||||
*/
|
||||
function getBufferedAhead(video) {
|
||||
if (!video.buffered || video.buffered.length === 0) return 0;
|
||||
const current = video.currentTime;
|
||||
for (let i = 0; i < video.buffered.length; i++) {
|
||||
if (video.buffered.end(i) > current) {
|
||||
return video.buffered.end(i) - current;
|
||||
}
|
||||
// Clean up any existing HLS instance before creating a new one
|
||||
destroyHls(video);
|
||||
const hls = new HLS({ debug: false, enableWorker: true, lowLatencyMode: false });
|
||||
hls.loadSource(manifestUrl);
|
||||
hls.attachMedia(video);
|
||||
video._hls = hls;
|
||||
}
|
||||
return 0;
|
||||
}
|
||||
|
||||
hls.on(HLS.Events.MANIFEST_PARSED, () => video.play().catch(() => {}));
|
||||
/* ======================================================================== */
|
||||
/* PanelRenderer — per-panel overlay rendering */
|
||||
/* ======================================================================== */
|
||||
|
||||
hls.on(HLS.Events.ERROR, (_ev, data) => {
|
||||
if (!data.fatal) return;
|
||||
switch (data.type) {
|
||||
case HLS.ErrorTypes.NETWORK_ERROR: hls.startLoad(); break;
|
||||
case HLS.ErrorTypes.MEDIA_ERROR: hls.recoverMediaError(); break;
|
||||
default: destroyHls(video);
|
||||
}
|
||||
});
|
||||
} catch (err) {
|
||||
console.error('[goon-viewer] HLS init failed:', err.message);
|
||||
/**
|
||||
* Per-panel status overlay element, keyed by video.
|
||||
* Map<video, HTMLElement>
|
||||
*/
|
||||
const panelOverlays = new Map();
|
||||
|
||||
/** Flag: aggregate status bar needs a refresh. Set by renderPanelState. */
|
||||
let aggregateStateDirty = false;
|
||||
|
||||
/**
|
||||
* Create a semi-transparent overlay on the panel that shows playback state.
|
||||
* Returns the overlay element.
|
||||
*/
|
||||
function createPanelOverlay(panel) {
|
||||
const overlay = document.createElement('div');
|
||||
overlay.className = 'panel-overlay';
|
||||
overlay.style.cssText = 'position:absolute;top:0;left:0;right:0;padding:4px 6px;background:linear-gradient(180deg,rgba(0,0,0,0.75) 0%,transparent 100%);color:#e2e8f0;font-family:monospace;font-size:10px;line-height:1.4;pointer-events:none;z-index:20;opacity:0;transition:opacity 0.3s ease;display:none;';
|
||||
panel.appendChild(overlay);
|
||||
return overlay;
|
||||
}
|
||||
|
||||
/** Remove the overlay for a video element. */
|
||||
function removePanelOverlay(video) {
|
||||
const el = panelOverlays.get(video);
|
||||
if (el && el.parentNode) {
|
||||
el.parentNode.removeChild(el);
|
||||
panelOverlays.delete(video);
|
||||
}
|
||||
}
|
||||
|
||||
/** Destroy the HLS instance on a video element, if any. */
|
||||
/**
|
||||
* Phase emoji indicators for overlay display.
|
||||
*/
|
||||
const PHASE_ICONS = {
|
||||
idle: '\u23F8', // pause
|
||||
loading: '\u2B07', // down arrow
|
||||
buffering: '\u27F7', // spinning
|
||||
playing: '\u25B6', // play
|
||||
error: '\u2717', // X
|
||||
};
|
||||
|
||||
/**
|
||||
* Render the current PanelState into the overlay.
|
||||
* Shows: phase indicator, quality, segments loaded/failed, buffer ahead.
|
||||
*
|
||||
* This function is intentionally rendering-only — it reads state, formats it,
|
||||
* and writes to the DOM. No side effects beyond setting aggregateStateDirty.
|
||||
*/
|
||||
function renderPanelState(video, panel) {
|
||||
const state = panelStates.get(video);
|
||||
if (!state) return;
|
||||
|
||||
let overlay = panelOverlays.get(video);
|
||||
if (!overlay) {
|
||||
overlay = createPanelOverlay(panel);
|
||||
panelOverlays.set(video, overlay);
|
||||
}
|
||||
|
||||
// Build status lines
|
||||
const lines = [];
|
||||
lines.push(`${PHASE_ICONS[state.phase] || '?'} ${state.phase}`);
|
||||
if (state.level >= 0) {
|
||||
lines.push(`\uD83D\uDD7A\uFE0F ${state.levelLabel}`);
|
||||
}
|
||||
if (state.segmentsLoaded > 0) {
|
||||
const segText = state.segmentsFailed > 0
|
||||
? `\uD83D\uDCE6 ${state.segmentsLoaded} seg (+${state.segmentsFailed} fail)`
|
||||
: `\uD83D\uDCE6 ${state.segmentsLoaded} seg`;
|
||||
lines.push(segText);
|
||||
}
|
||||
lines.push(`\uD83D\uDCBE ${state.bufferedAhead.toFixed(1)}s buf`);
|
||||
// Playback progress: currentTime / duration (only when known)
|
||||
if (state.duration > 0) {
|
||||
const pct = ((state.currentTime / state.duration) * 100).toFixed(0);
|
||||
lines.push(`\u23F1 ${state.currentTime.toFixed(1)}s / ${state.duration.toFixed(0)}s (${pct}%)`);
|
||||
} else if (state.currentTime > 0) {
|
||||
lines.push(`\u23F1 ${state.currentTime.toFixed(1)}s (live/loop)`);
|
||||
}
|
||||
if (state.fpsDropCount > 0) {
|
||||
lines.push(`\u26A0 ${state.fpsDropCount} fps-drop`);
|
||||
}
|
||||
if (state.errorMessage) {
|
||||
lines.push(`\u274C ${state.errorMessage}`);
|
||||
}
|
||||
|
||||
overlay.textContent = lines.join(' ');
|
||||
overlay.style.display = 'block';
|
||||
overlay.style.opacity = '1';
|
||||
|
||||
// Mark aggregate status bar dirty — it refreshes on the next buffer tick.
|
||||
aggregateStateDirty = true;
|
||||
|
||||
// Auto-fade when playing stably (segments loaded > 3, buffered > 2s)
|
||||
if (state.phase === 'playing' && state.segmentsLoaded > 3 && state.bufferedAhead > 2) {
|
||||
setTimeout(() => {
|
||||
if (panelOverlays.get(video) === overlay) {
|
||||
overlay.style.opacity = '0.3';
|
||||
}
|
||||
}, 3000);
|
||||
}
|
||||
}
|
||||
|
||||
/* ======================================================================== */
|
||||
/* AggregateRenderer — global status bar */
|
||||
/* ======================================================================== */
|
||||
|
||||
let statusElRef = null;
|
||||
|
||||
/**
|
||||
* Render aggregate playback state into the top status bar.
|
||||
* Format: `2 playing | 1 buffering | 1 error | 47 seg total`
|
||||
*
|
||||
* HLS delivery is inherently segmented — fragments load one at a time into
|
||||
* the MediaSource buffer. Even when the phase is 'playing', the underlying
|
||||
* state is constantly shifting (buffer growth, quality switches, seg loads).
|
||||
* This function collapses per-panel state into a single human-readable line
|
||||
* so the user can see overall health at a glance.
|
||||
*/
|
||||
function renderAggregateState() {
|
||||
if (!statusElRef) return;
|
||||
if (!aggregateStateDirty) return;
|
||||
aggregateStateDirty = false;
|
||||
|
||||
let playing = 0;
|
||||
let buffering = 0;
|
||||
let errors = 0;
|
||||
let idle = 0;
|
||||
let totalSegs = 0;
|
||||
let totalSegFails = 0;
|
||||
|
||||
for (const state of panelStates.values()) {
|
||||
switch (state.phase) {
|
||||
case 'playing': playing++; break;
|
||||
case 'buffering': buffering++; break;
|
||||
case 'error': errors++; break;
|
||||
default: idle++; break;
|
||||
}
|
||||
totalSegs += state.segmentsLoaded;
|
||||
totalSegFails += state.segmentsFailed;
|
||||
}
|
||||
|
||||
const totalPanels = panelStates.size;
|
||||
const parts = [];
|
||||
if (playing > 0) parts.push(`\u25B6 ${playing} playing`);
|
||||
if (buffering > 0) parts.push(`\u27F7 ${buffering} buffering`);
|
||||
if (errors > 0) parts.push(`\u2717 ${errors} error`);
|
||||
if (idle > 0) parts.push(`\u23F8 ${idle} idle`);
|
||||
|
||||
if (totalSegs > 0) {
|
||||
let segPart = `\uD83D\uDCE6 ${totalSegs} seg`;
|
||||
if (totalSegFails > 0) segPart += ` (+${totalSegFails} fail)`;
|
||||
parts.push(segPart);
|
||||
}
|
||||
|
||||
// Show buffer health across all active panels
|
||||
let totalBuf = 0;
|
||||
for (const state of panelStates.values()) {
|
||||
if (state.phase === 'playing' || state.phase === 'buffering') {
|
||||
totalBuf += state.bufferedAhead;
|
||||
}
|
||||
}
|
||||
const active = playing + buffering;
|
||||
if (active > 0) {
|
||||
parts.push(`\uD83D\uDCBE ${(totalBuf / active).toFixed(1)}s avg buf`);
|
||||
}
|
||||
|
||||
statusElRef.textContent = `Live grid ${totalPanels} panels: ${parts.join(' | ')} || Found ${totalPanels} video(s)`;
|
||||
}
|
||||
|
||||
/* ======================================================================== */
|
||||
/* EventWiring — hls.js + video element event listeners */
|
||||
/* ======================================================================== */
|
||||
|
||||
/**
|
||||
* Attach hls.js event listeners for fragmented playback tracking.
|
||||
* Wires up every event that reveals the broken-up nature of HLS:
|
||||
* segment loading, buffer mutations, quality switches, and decode issues.
|
||||
*
|
||||
* Side effects: registers callbacks on `hls`, creates `PanelState`,
|
||||
* sets up buffer monitor timer, patches hls.destroy for cleanup.
|
||||
*/
|
||||
function wireHlsEvents(hls, video, panel) {
|
||||
const state = createPanelState();
|
||||
panelStates.set(video, state);
|
||||
|
||||
const HlsEvents = window.Hls.Events;
|
||||
|
||||
// --- Manifest lifecycle ---
|
||||
hls.on(HlsEvents.MANIFEST_LOADED, (_ev, data) => {
|
||||
state.phase = 'loading';
|
||||
state.lastEvent = 'MANIFEST_LOADED';
|
||||
state.lastActivity = Date.now();
|
||||
renderPanelState(video, panel);
|
||||
});
|
||||
|
||||
hls.on(HlsEvents.MANIFEST_PARSED, (_ev, data) => {
|
||||
state.lastEvent = 'MANIFEST_PARSED';
|
||||
state.lastActivity = Date.now();
|
||||
if (data.levels.length > 0) {
|
||||
const lvl = data.levels[0];
|
||||
state.levelLabel = `${lvl.width}x${lvl.height}`;
|
||||
}
|
||||
renderPanelState(video, panel);
|
||||
});
|
||||
|
||||
// --- Segment / fragment tracking ---
|
||||
hls.on(HlsEvents.FRAG_LOADING, (_ev, _data) => {
|
||||
state.phase = 'buffering';
|
||||
state.lastEvent = 'FRAG_LOADING';
|
||||
state.lastActivity = Date.now();
|
||||
renderPanelState(video, panel);
|
||||
});
|
||||
|
||||
hls.on(HlsEvents.FRAG_LOADED, (_ev, _data) => {
|
||||
state.segmentsLoaded++;
|
||||
state.lastEvent = 'FRAG_LOADED';
|
||||
state.lastActivity = Date.now();
|
||||
renderPanelState(video, panel);
|
||||
});
|
||||
|
||||
hls.on(HlsEvents.FRAG_BUFFERED, (_ev, _data) => {
|
||||
state.lastEvent = 'FRAG_BUFFERED';
|
||||
state.lastActivity = Date.now();
|
||||
if (state.phase === 'buffering' && video.readyState >= 2) {
|
||||
state.phase = 'playing';
|
||||
}
|
||||
renderPanelState(video, panel);
|
||||
});
|
||||
|
||||
// --- Buffer tracking ---
|
||||
hls.on(HlsEvents.BUFFER_APPENDED, (_ev, _data) => {
|
||||
state.lastEvent = 'BUFFER_APPENDED';
|
||||
state.lastActivity = Date.now();
|
||||
state.bufferedAhead = getBufferedAhead(video);
|
||||
renderPanelState(video, panel);
|
||||
});
|
||||
|
||||
hls.on(HlsEvents.BUFFER_FLUSHED, (_ev, _data) => {
|
||||
state.lastEvent = 'BUFFER_FLUSHED';
|
||||
state.lastActivity = Date.now();
|
||||
state.bufferedAhead = getBufferedAhead(video);
|
||||
renderPanelState(video, panel);
|
||||
});
|
||||
|
||||
hls.on(HlsEvents.BUFFER_RESET, (_ev, _data) => {
|
||||
state.lastEvent = 'BUFFER_RESET';
|
||||
state.lastActivity = Date.now();
|
||||
state.bufferedAhead = 0;
|
||||
state.segmentsLoaded = 0;
|
||||
renderPanelState(video, panel);
|
||||
});
|
||||
|
||||
// --- Quality / level switches ---
|
||||
hls.on(HlsEvents.LEVEL_SWITCHED, (_ev, data) => {
|
||||
state.lastEvent = 'LEVEL_SWITCHED';
|
||||
state.lastActivity = Date.now();
|
||||
state.level = data.level;
|
||||
const levels = hls.levels;
|
||||
if (levels && levels[data.level]) {
|
||||
const lvl = levels[data.level];
|
||||
state.levelLabel = `${lvl.width}x${lvl.height}`;
|
||||
}
|
||||
renderPanelState(video, panel);
|
||||
});
|
||||
|
||||
hls.on(HlsEvents.LEVEL_UPDATED, (_ev, data) => {
|
||||
state.lastEvent = 'LEVEL_UPDATED';
|
||||
state.lastActivity = Date.now();
|
||||
if (data.details) {
|
||||
state.levelLabel = `${data.details.width}x${data.details.height}`;
|
||||
}
|
||||
});
|
||||
|
||||
// --- FPS drops (decode pressure) ---
|
||||
hls.on(HlsEvents.FPS_DROP, (_ev, data) => {
|
||||
state.fpsDropCount++;
|
||||
state.lastEvent = 'FPS_DROP';
|
||||
state.lastActivity = Date.now();
|
||||
console.warn(`[goon-viewer] FPS drop: current=${data.currentFPS}, threshold=${data.thresholdFPS}`);
|
||||
renderPanelState(video, panel);
|
||||
});
|
||||
|
||||
hls.on(HlsEvents.FPS_MAX_LEVEL_DROP, (_ev, data) => {
|
||||
state.lastEvent = 'FPS_MAX_LEVEL_DROP';
|
||||
state.lastActivity = Date.now();
|
||||
console.warn(`[goon-viewer] Max level dropped due to FPS: ${data.currentLevel}`);
|
||||
renderPanelState(video, panel);
|
||||
});
|
||||
|
||||
// --- Media lifecycle ---
|
||||
hls.on(HlsEvents.MEDIA_ATTACHED, () => {
|
||||
state.lastEvent = 'MEDIA_ATTACHED';
|
||||
state.lastActivity = Date.now();
|
||||
state.phase = 'loading';
|
||||
renderPanelState(video, panel);
|
||||
});
|
||||
|
||||
hls.on(HlsEvents.MEDIA_DETACHED, () => {
|
||||
state.lastEvent = 'MEDIA_DETACHED';
|
||||
state.lastActivity = Date.now();
|
||||
state.phase = 'idle';
|
||||
renderPanelState(video, panel);
|
||||
});
|
||||
|
||||
// --- Errors ---
|
||||
hls.on(window.Hls.Events.ERROR, (_event, data) => {
|
||||
state.lastEvent = `ERROR:${data.details}`;
|
||||
state.lastActivity = Date.now();
|
||||
|
||||
if (!data.fatal) {
|
||||
// Non-fatal errors (e.g., transient fragment load failure)
|
||||
if (data.type === window.Hls.ErrorTypes.NETWORK_ERROR) {
|
||||
state.segmentsFailed++;
|
||||
}
|
||||
renderPanelState(video, panel);
|
||||
return;
|
||||
}
|
||||
|
||||
// Fatal errors
|
||||
if (data.type === window.Hls.ErrorTypes.NETWORK_ERROR) {
|
||||
state.errorMessage = `Network: ${data.details}`;
|
||||
state.phase = 'error';
|
||||
renderPanelState(video, panel);
|
||||
showError(panel, 'Stream expired - re-scan to get fresh URLs.');
|
||||
hls.destroy();
|
||||
hlsInstances.delete(video);
|
||||
} else if (data.type === window.Hls.ErrorTypes.MEDIA_ERROR) {
|
||||
state.errorMessage = `Media: ${data.details}`;
|
||||
state.phase = 'buffering';
|
||||
renderPanelState(video, panel);
|
||||
hls.recoverMediaError();
|
||||
} else {
|
||||
state.errorMessage = `Fatal: ${data.details}`;
|
||||
state.phase = 'error';
|
||||
renderPanelState(video, panel);
|
||||
showError(panel, 'Playback error - unable to recover.');
|
||||
hls.destroy();
|
||||
hlsInstances.delete(video);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Wire video element lifecycle events (playing, waiting, stalled, etc.).
|
||||
* These complement hls.js events by providing browser-level playback state.
|
||||
*/
|
||||
function wireVideoEvents(video) {
|
||||
video.addEventListener('playing', () => {
|
||||
const s = panelStates.get(video);
|
||||
if (s) {
|
||||
s.phase = 'playing';
|
||||
s.lastEvent = 'video.playing';
|
||||
s.lastActivity = Date.now();
|
||||
renderPanelState(video, s._panel);
|
||||
}
|
||||
});
|
||||
|
||||
video.addEventListener('waiting', () => {
|
||||
const s = panelStates.get(video);
|
||||
if (s) {
|
||||
s.phase = 'buffering';
|
||||
s.lastEvent = 'video.waiting';
|
||||
s.lastActivity = Date.now();
|
||||
renderPanelState(video, s._panel);
|
||||
}
|
||||
});
|
||||
|
||||
video.addEventListener('stalled', () => {
|
||||
const s = panelStates.get(video);
|
||||
if (s) {
|
||||
s.phase = 'buffering';
|
||||
s.lastEvent = 'video.stalled';
|
||||
s.lastActivity = Date.now();
|
||||
renderPanelState(video, s._panel);
|
||||
}
|
||||
});
|
||||
|
||||
// Track actual playback position (fragments are delivered out of order but
|
||||
// the browser's timeupdate fires as they are played back sequentially).
|
||||
video.addEventListener('timeupdate', () => {
|
||||
const s = panelStates.get(video);
|
||||
if (!s) return;
|
||||
s.currentTime = video.currentTime;
|
||||
s.duration = video.duration || 0;
|
||||
});
|
||||
|
||||
video.addEventListener('seeking', () => {
|
||||
const s = panelStates.get(video);
|
||||
if (s) {
|
||||
s.lastEvent = 'video.seeking';
|
||||
s.lastActivity = Date.now();
|
||||
}
|
||||
});
|
||||
|
||||
video.addEventListener('seeked', () => {
|
||||
const s = panelStates.get(video);
|
||||
if (s) {
|
||||
s.lastEvent = 'video.seeked';
|
||||
s.lastActivity = Date.now();
|
||||
renderPanelState(video, s._panel);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
/* ======================================================================== */
|
||||
/* BufferMonitor — periodic buffer health check */
|
||||
/* ======================================================================== */
|
||||
|
||||
/**
|
||||
* Start a periodic timer that refreshes buffer health and re-renders overlays.
|
||||
* Returns a cleanup function.
|
||||
*/
|
||||
function startBufferMonitor(video, panel) {
|
||||
const timer = setInterval(() => {
|
||||
const s = panelStates.get(video);
|
||||
if (!s) { clearInterval(timer); return; }
|
||||
s.bufferedAhead = getBufferedAhead(video);
|
||||
renderPanelState(video, panel);
|
||||
// Refresh aggregate status bar if any panel changed state.
|
||||
renderAggregateState();
|
||||
}, 1000);
|
||||
|
||||
return () => clearInterval(timer);
|
||||
}
|
||||
|
||||
/* ======================================================================== */
|
||||
/* HLS lifecycle helpers */
|
||||
/* ======================================================================== */
|
||||
|
||||
/** Destroy the Hls instance attached to a video element (if any). */
|
||||
function destroyHls(video) {
|
||||
if (video._hls) { video._hls.destroy(); delete video._hls; }
|
||||
const inst = hlsInstances.get(video);
|
||||
if (inst) {
|
||||
inst.destroy();
|
||||
hlsInstances.delete(video);
|
||||
}
|
||||
panelStates.delete(video);
|
||||
removePanelOverlay(video);
|
||||
}
|
||||
|
||||
/** Resolve the src URL from a video entry (string or object). */
|
||||
function resolveSrc(entry) {
|
||||
if (typeof entry === 'string') return entry;
|
||||
return entry.src || entry.url || '';
|
||||
/* ======================================================================== */
|
||||
/* PanelFactory — DOM panel creation */
|
||||
/* ======================================================================== */
|
||||
|
||||
/** Show an error message inside a panel's video placeholder. */
|
||||
function showError(panel, message) {
|
||||
const err = document.createElement('div');
|
||||
err.style.cssText = 'position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#f87171;background:rgba(0,0,0,0.6);font-family:sans-serif;font-size:13px;text-align:center;padding:12px;';
|
||||
err.textContent = message;
|
||||
panel.appendChild(err);
|
||||
}
|
||||
|
||||
/** Check if entry is HLS media. */
|
||||
function isHls(entry) {
|
||||
return entry !== null && typeof entry === 'object' && entry.mediaType === 'hls';
|
||||
}
|
||||
|
||||
/** Create a <video> for a single entry — HLS or standard. */
|
||||
async function createVideoElement(entry) {
|
||||
/** Create a video element with standard autoplay attributes. */
|
||||
function createVideoElement() {
|
||||
const video = document.createElement('video');
|
||||
video.autoplay = true;
|
||||
video.muted = true;
|
||||
video.loop = true;
|
||||
video.playsInline = true;
|
||||
|
||||
if (isHls(entry) && entry.hlsManifest) {
|
||||
console.log('[goon-viewer] HLS detected, manifest:', entry.hlsManifest);
|
||||
await playHls(video, entry.hlsManifest);
|
||||
} else {
|
||||
video.src = resolveSrc(entry);
|
||||
}
|
||||
|
||||
// Set poster image so a thumbnail shows before playback begins
|
||||
if (entry && typeof entry === 'object' && entry.poster) {
|
||||
video.poster = entry.poster;
|
||||
}
|
||||
|
||||
return video;
|
||||
}
|
||||
|
||||
/** Show an error overlay on a panel. */
|
||||
function showPanelError(panel, msg) {
|
||||
const el = document.createElement('div');
|
||||
el.className = 'panel-error';
|
||||
el.style.cssText =
|
||||
'display:flex;align-items:center;justify-content:center;height:100%;color:#94a3b8;' +
|
||||
'font-family:sans-serif;font-size:12px;text-align:center;padding:8px;';
|
||||
el.textContent = msg || 'Failed to load video';
|
||||
panel.innerHTML = '';
|
||||
panel.appendChild(el);
|
||||
/**
|
||||
* Play an HLS manifest on a <video> element using hls.js or native Safari.
|
||||
* Wires up fragmented playback tracking for segment/buffer/quality visibility.
|
||||
*/
|
||||
function playHls(video, manifestUrl, panel) {
|
||||
if (!window.Hls || !window.Hls.isSupported()) {
|
||||
video.src = manifestUrl;
|
||||
const p = video.play();
|
||||
if (p) p.catch(() => {});
|
||||
return;
|
||||
}
|
||||
|
||||
destroyHls(video);
|
||||
|
||||
const hls = new window.Hls(HLS_CONFIG);
|
||||
hlsInstances.set(video, hls);
|
||||
|
||||
hls.on(window.Hls.Events.MANIFEST_PARSED, () => {
|
||||
const p = video.play();
|
||||
if (p) p.catch(() => {});
|
||||
});
|
||||
|
||||
// Wire all fragmented playback tracking events
|
||||
wireHlsEvents(hls, video, panel);
|
||||
|
||||
// Wire video element events (playing, waiting, stalled, timeupdate, etc.)
|
||||
// Store panel ref on state so video event handlers can access it.
|
||||
const state = panelStates.get(video);
|
||||
if (state) state._panel = panel;
|
||||
wireVideoEvents(video);
|
||||
|
||||
// Start periodic buffer health monitor
|
||||
const stopMonitor = startBufferMonitor(video, panel);
|
||||
const origDestroy = hls.destroy.bind(hls);
|
||||
hls.destroy = function () {
|
||||
stopMonitor();
|
||||
origDestroy();
|
||||
};
|
||||
|
||||
hls.loadSource(manifestUrl);
|
||||
hls.attachMedia(video);
|
||||
}
|
||||
|
||||
// Fetch stored video URLs and render panels
|
||||
async function init() {
|
||||
console.log('[goon-viewer] init called, id:', id, 'url:', location.href);
|
||||
/**
|
||||
* Load hls.js from CDN. Returns a Promise that resolves when ready.
|
||||
*/
|
||||
function loadHlsJs() {
|
||||
return new Promise((resolve, reject) => {
|
||||
if (window.Hls && window.Hls.isSupported) {
|
||||
resolve();
|
||||
return;
|
||||
}
|
||||
const script = document.createElement('script');
|
||||
script.src = HLS_CDN;
|
||||
script.onload = () => resolve();
|
||||
script.onerror = () => reject(new Error('Hls.js CDN unavailable'));
|
||||
document.head.appendChild(script);
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Create a single panel (video or empty).
|
||||
* Returns { panel, hlsEntry } — hlsEntry is set for deferred HLS playback.
|
||||
*/
|
||||
function createPanel(entry, tag) {
|
||||
const panel = document.createElement('div');
|
||||
panel.classList.add('panel');
|
||||
|
||||
if (!entry) {
|
||||
panel.classList.add('empty');
|
||||
return { panel, hlsEntry: null };
|
||||
}
|
||||
|
||||
const video = createVideoElement();
|
||||
|
||||
const src = entry.src || entry.url || '';
|
||||
const mediaType = entry.mediaType || 'video';
|
||||
const poster = entry.poster || null;
|
||||
const hlsManifest = entry.hlsManifest || null;
|
||||
|
||||
if (poster) video.poster = poster;
|
||||
|
||||
if (mediaType === 'hls') {
|
||||
// Use explicit hlsManifest field, or fall back to src if it looks like a manifest URL.
|
||||
// This handles the case where hlsManifest was lost in storage serialization but src
|
||||
// still points to the .m3u8 playlist.
|
||||
const manifestUrl = hlsManifest || (src.includes('.m3u8') && src.startsWith('http') ? src : null);
|
||||
if (manifestUrl) {
|
||||
video.dataset.hlsManifest = manifestUrl;
|
||||
video.dataset.mediaType = 'hls';
|
||||
panel.appendChild(video);
|
||||
if (tag) {
|
||||
const label = document.createElement('div');
|
||||
label.className = 'panel-label';
|
||||
label.textContent = tag;
|
||||
panel.appendChild(label);
|
||||
}
|
||||
return { panel, hlsEntry: { video, manifest: manifestUrl, panel } };
|
||||
}
|
||||
// mediaType says HLS but we have no manifest URL — fall through to native playback.
|
||||
// On Safari this may still work for .m3u8; on Chrome it will fail.
|
||||
console.warn('[goon-viewer] HLS entry missing manifest URL, src:', src);
|
||||
}
|
||||
|
||||
video.src = src;
|
||||
panel.appendChild(video);
|
||||
if (tag) {
|
||||
const label = document.createElement('div');
|
||||
label.className = 'panel-label';
|
||||
label.textContent = tag;
|
||||
panel.appendChild(label);
|
||||
}
|
||||
return { panel, hlsEntry: null };
|
||||
}
|
||||
|
||||
/* ======================================================================== */
|
||||
/* Init */
|
||||
/* ======================================================================== */
|
||||
|
||||
async function init() {
|
||||
if (!id) {
|
||||
panelsEl.innerHTML = '<div style="padding:20px;color:#64748b">No viewer ID provided</div>';
|
||||
return;
|
||||
}
|
||||
|
||||
const data = await chrome.storage.local.get([id]);
|
||||
console.log('[goon-viewer] raw storage:', data);
|
||||
const videoUrls = data[id] || [];
|
||||
console.log('[goon-viewer] video URLs to render:', videoUrls, '(count:', videoUrls.length, ')');
|
||||
|
||||
// Status overlay — saved for aggregate state updates
|
||||
const overlay = document.createElement('div');
|
||||
overlay.id = 'viewer-status';
|
||||
overlay.style.cssText =
|
||||
'position:absolute;top:0;left:0;right:0;background:rgba(0,0,0,0.85);color:#fff;' +
|
||||
'padding:8px 16px;font-family:sans-serif;font-size:14px;z-index:999;';
|
||||
overlay.style.cssText = 'position:absolute;top:0;left:0;right:0;background:rgba(0,0,0,0.85);color:#fff;padding:8px 16px;font-family:sans-serif;font-size:14px;z-index:999;';
|
||||
document.body.style.position = 'relative';
|
||||
document.body.insertBefore(overlay, document.body.firstChild);
|
||||
|
||||
overlay.textContent = `Found ${videoUrls.length} video URL(s) in ${gridN}x${gridN} grid`;
|
||||
console.log('[goon-viewer]', overlay.textContent);
|
||||
statusElRef = overlay;
|
||||
|
||||
const totalPanels = gridN * gridN;
|
||||
const hlsEntries = [];
|
||||
|
||||
// Create NxN panels
|
||||
for (let i = 0; i < totalPanels; i++) {
|
||||
const panel = document.createElement('div');
|
||||
panel.classList.add('panel');
|
||||
|
||||
if (i < videoUrls.length && videoUrls[i]) {
|
||||
try {
|
||||
const video = await createVideoElement(videoUrls[i]);
|
||||
panel.appendChild(video);
|
||||
|
||||
// Listen for load errors on standard videos
|
||||
video.addEventListener('error', () => {
|
||||
console.error('[goon-viewer] Video load error on panel', i + 1);
|
||||
showPanelError(panel, 'Failed to load video');
|
||||
});
|
||||
|
||||
// Add tab label if available
|
||||
if (tags[i]) {
|
||||
const label = document.createElement('div');
|
||||
label.className = 'panel-label';
|
||||
label.textContent = tags[i];
|
||||
panel.appendChild(label);
|
||||
}
|
||||
} catch (err) {
|
||||
console.error('[goon-viewer] Error creating video panel', i + 1, ':', err);
|
||||
showPanelError(panel, 'Error: ' + err.message);
|
||||
}
|
||||
} else {
|
||||
panel.classList.add('empty');
|
||||
}
|
||||
|
||||
const entry = (typeof videoUrls[i] === 'object') ? videoUrls[i] : (videoUrls[i] ? { src: videoUrls[i] } : null);
|
||||
const { panel, hlsEntry } = createPanel(entry, tags[i]);
|
||||
panelsEl.appendChild(panel);
|
||||
if (hlsEntry) hlsEntries.push(hlsEntry);
|
||||
}
|
||||
|
||||
// Apply dynamic grid
|
||||
panelsEl.style.gridTemplateColumns = `repeat(${gridN}, 1fr)`;
|
||||
panelsEl.style.gridTemplateRows = `repeat(${gridN}, 1fr)`;
|
||||
|
||||
// Load hls.js and start HLS playback
|
||||
if (hlsEntries.length > 0) {
|
||||
try {
|
||||
await loadHlsJs();
|
||||
} catch {
|
||||
for (const { panel } of hlsEntries) {
|
||||
showError(panel, 'HLS player unavailable - check network.');
|
||||
}
|
||||
return;
|
||||
}
|
||||
for (const { video, manifest, panel } of hlsEntries) {
|
||||
playHls(video, manifest, panel);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Clean up HLS instances and storage entry when the viewer is closed
|
||||
// Clean up storage entry and HLS instances when the viewer is closed
|
||||
window.addEventListener('unload', async () => {
|
||||
// Destroy all HLS instances
|
||||
const allVideos = panelsEl.querySelectorAll('video');
|
||||
for (const video of allVideos) {
|
||||
for (const video of [...hlsInstances.keys()]) {
|
||||
destroyHls(video);
|
||||
}
|
||||
|
||||
if (id) {
|
||||
await chrome.storage.local.remove([id]);
|
||||
}
|
||||
|
||||
Reference in new issue
Block a user