|
| 1 | +import { getConfig, isConfigured, videoPlaybackUrl, viewUrl } from "../lib/immich.js"; |
| 2 | + |
| 3 | +// Higher cap than the popup's inline 150MB — this window has its own memory |
| 4 | +// budget and the user explicitly asked for the bigger view. Above this we |
| 5 | +// punt to Immich's own viewer rather than freezing the tab. |
| 6 | +const PLAYER_MAX_BYTES = 500 * 1024 * 1024; |
| 7 | + |
| 8 | +const $ = (id) => document.getElementById(id); |
| 9 | + |
| 10 | +function showStatus(text, action) { |
| 11 | + const el = $("status"); |
| 12 | + el.replaceChildren(); |
| 13 | + const t = document.createElement("div"); |
| 14 | + t.textContent = text; |
| 15 | + el.appendChild(t); |
| 16 | + if (action) { |
| 17 | + const a = document.createElement("a"); |
| 18 | + a.href = "#"; |
| 19 | + a.textContent = action.label; |
| 20 | + a.addEventListener("click", (e) => { e.preventDefault(); action.onClick(); }); |
| 21 | + el.appendChild(a); |
| 22 | + } |
| 23 | + el.hidden = false; |
| 24 | + $("video").hidden = true; |
| 25 | +} |
| 26 | + |
| 27 | +async function init() { |
| 28 | + const params = new URLSearchParams(location.search); |
| 29 | + const id = params.get("id"); |
| 30 | + if (!id) return showStatus("No asset id provided."); |
| 31 | + |
| 32 | + const cfg = await getConfig(); |
| 33 | + if (!isConfigured(cfg)) { |
| 34 | + return showStatus("Immich is not configured.", { |
| 35 | + label: "Open settings", |
| 36 | + onClick: () => chrome.runtime.openOptionsPage(), |
| 37 | + }); |
| 38 | + } |
| 39 | + |
| 40 | + if (cfg.theme === "dark" || cfg.theme === "light") { |
| 41 | + document.documentElement.setAttribute("data-theme", cfg.theme); |
| 42 | + } |
| 43 | + |
| 44 | + // Best-effort: set the window title to the asset's filename. |
| 45 | + try { |
| 46 | + const meta = await fetch(`${cfg.serverUrl}/api/assets/${id}`, { |
| 47 | + headers: { "x-api-key": cfg.apiKey }, |
| 48 | + }).then((r) => (r.ok ? r.json() : null)); |
| 49 | + if (meta?.originalFileName) document.title = meta.originalFileName; |
| 50 | + } catch {} |
| 51 | + |
| 52 | + let blobUrl; |
| 53 | + try { |
| 54 | + const res = await fetch(videoPlaybackUrl(cfg.serverUrl, id), { |
| 55 | + headers: { "x-api-key": cfg.apiKey }, |
| 56 | + }); |
| 57 | + if (!res.ok) throw new Error(`HTTP ${res.status}`); |
| 58 | + |
| 59 | + const len = parseInt(res.headers.get("Content-Length") || "0", 10); |
| 60 | + if (len && len > PLAYER_MAX_BYTES) { |
| 61 | + return showStatus("Video is too large for inline preview.", { |
| 62 | + label: "Open in Immich", |
| 63 | + onClick: () => (location.href = viewUrl(cfg.serverUrl, id)), |
| 64 | + }); |
| 65 | + } |
| 66 | + |
| 67 | + const blob = await res.blob(); |
| 68 | + if (blob.size > PLAYER_MAX_BYTES) { |
| 69 | + return showStatus("Video is too large for inline preview.", { |
| 70 | + label: "Open in Immich", |
| 71 | + onClick: () => (location.href = viewUrl(cfg.serverUrl, id)), |
| 72 | + }); |
| 73 | + } |
| 74 | + blobUrl = URL.createObjectURL(blob); |
| 75 | + } catch (e) { |
| 76 | + return showStatus(`Couldn't load video: ${e.message || e}`, { |
| 77 | + label: "Open in Immich", |
| 78 | + onClick: () => (location.href = viewUrl(cfg.serverUrl, id)), |
| 79 | + }); |
| 80 | + } |
| 81 | + |
| 82 | + const video = $("video"); |
| 83 | + video.src = blobUrl; |
| 84 | + |
| 85 | + window.addEventListener("beforeunload", () => { |
| 86 | + try { URL.revokeObjectURL(blobUrl); } catch {} |
| 87 | + }); |
| 88 | +} |
| 89 | + |
| 90 | +init().catch((e) => showStatus(`Player error: ${e.message || e}`)); |
0 commit comments