Files
goon_plugin/src/viewer/viewer.js
T
2026-05-31 11:29:51 -07:00

62 lines
1.9 KiB
JavaScript

/**
* viewer.js — Goon Viewer page logic.
* Reads video URLs from chrome.storage and renders them in a 2x2 grid.
*/
const params = new URLSearchParams(location.search);
const id = params.get('id');
const panelsEl = document.getElementById('panels');
// Fetch stored video URLs and render panels
async function init() {
console.log('[goon-viewer] init called, id:', id, 'url:', location.href);
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, ')');
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;';
document.body.style.position = 'relative';
document.body.insertBefore(overlay, document.body.firstChild);
overlay.textContent = `Found ${videoUrls.length} video URL(s)`;
console.log('[goon-viewer]', overlay.textContent);
// Create exactly 4 panels
for (let i = 0; i < 4; i++) {
const panel = document.createElement('div');
panel.classList.add('panel');
if (i < videoUrls.length && videoUrls[i]) {
const video = document.createElement('video');
video.src = videoUrls[i];
video.autoplay = true;
video.muted = true;
video.playsInline = true;
console.log('[goon-viewer] panel', i + '/4:', videoUrls[i]);
panel.appendChild(video);
} else {
panel.classList.add('empty');
}
panelsEl.appendChild(panel);
}
}
// Clean up storage entry when the viewer is closed
window.addEventListener('unload', async () => {
if (id) {
await chrome.storage.local.remove([id]);
}
});
init();