feat: compress and use new update video

src/css/injected.scss

@@ -3862,6 +3862,9 @@ div.day-empty {
   aspect-ratio: 16 / 9;
   border-radius: 16px;
   box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.3);
+  object-fit: cover;
+  display: block;
+  background: #000;
 }
 .whatsnewTextContainer {
   display: flex;

src/declarations.d.ts

@@ -1,4 +1,5 @@
 declare module "*.mp4";
+declare module "*.webm";
 declare module "*.woff";
 declare module "*.scss";
 declare module "*.png";

src/seqta/utils/Openers/OpenWhatsNewPopup.ts

@@ -4,6 +4,7 @@ import { openPopup } from "./PopupManager";
 import { attachPopupMediaFullscreen } from "./attachPopupMediaFullscreen";
 import { createPopupSocialFooter } from "./createPopupSocialFooter";
 import { renderWhatsNewChangelogHtml } from "./whatsNewChangelog";
+import updateVideo from "@/resources/update-video.webm";
 
 export function OpenWhatsNewPopup(onDismissed?: () => void) {
   const header = stringToHTML(
@@ -17,13 +18,18 @@ export function OpenWhatsNewPopup(onDismissed?: () => void) {
   const imageContainer = document.createElement("div");
   imageContainer.classList.add("whatsnewImgContainer");
 
-  const heroImage = document.createElement("img");
-  heroImage.src =
-    "https://raw.githubusercontent.com/BetterSEQTA/BetterSEQTA-Plus/main/src/resources/updateimage1.webp";
-  heroImage.alt = "BetterSEQTA+ update preview";
-  heroImage.classList.add("whatsnewImg");
-  imageContainer.appendChild(heroImage);
-  attachPopupMediaFullscreen(heroImage);
+  const heroVideo = document.createElement("video");
+  heroVideo.src = updateVideo;
+  heroVideo.classList.add("whatsnewImg");
+  heroVideo.autoplay = true;
+  heroVideo.muted = true;
+  heroVideo.loop = true;
+  heroVideo.playsInline = true;
+  heroVideo.setAttribute("playsinline", "");
+  heroVideo.setAttribute("aria-label", "BetterSEQTA+ update preview");
+  imageContainer.appendChild(heroVideo);
+  attachPopupMediaFullscreen(heroVideo);
+  void heroVideo.play().catch(() => {});
 
   const text = stringToHTML(/* html */ `
     <div class="whatsnewTextContainer" style="height: 50%;overflow-y: auto;">

src/seqta/utils/Openers/allowedPopupImageUrl.ts

@@ -1,6 +1,6 @@
 /**
- * Minimal allowlist for remote popup/API image (and media) URLs.
- * Only https: URLs are accepted; everything else is rejected.
+ * Allowlist for popup/API media URLs.
+ * Accepts https: and same-extension chrome-extension:/moz-extension: URLs.
  */
 export function allowedPopupImageUrl(url: string | null | undefined): string | null {
   if (!url) return null;
@@ -8,8 +8,20 @@ export function allowedPopupImageUrl(url: string | null | undefined): string | n
   if (!trimmed) return null;
   try {
     const parsed = new URL(trimmed);
-    if (parsed.protocol !== "https:") return null;
-    return parsed.href;
+    if (parsed.protocol === "https:") return parsed.href;
+
+    if (
+      parsed.protocol === "chrome-extension:" ||
+      parsed.protocol === "moz-extension:"
+    ) {
+      const extId =
+        typeof chrome !== "undefined" && chrome.runtime?.id
+          ? chrome.runtime.id
+          : undefined;
+      if (extId && parsed.hostname === extId) return parsed.href;
+    }
+
+    return null;
   } catch {
     return null;
   }