Improve video embed overlay and proxy behavior

public/js/embedResize.js

@@ -1,25 +1,41 @@
-(function() {
+(function () {
-  var embedElement = document.querySelector('.embed-wrapper, .tweet-embed, .embed-video');
+  var embedElement = document.querySelector(
+    ".embed-wrapper, .tweet-embed, .embed-video",
+  );
   if (!embedElement) return;
 
+  // Video play state for overlay (hidden while playing, visible on hover/pause)
+  var video = embedElement.querySelector("video");
+  if (video) {
+    video.onplay = function () {
+      embedElement.classList.add("video-playing");
+    };
+    video.onpause = video.onended = function () {
+      embedElement.classList.remove("video-playing");
+    };
+  }
+
   var lastHeight = 0;
 
   function sendHeight() {
     var currentHeight = embedElement.offsetHeight;
     if (currentHeight !== lastHeight && currentHeight > 0) {
       lastHeight = currentHeight;
-      window.parent.postMessage(['resizeIframe', { h: currentHeight, url: location.href }], '*');
+      window.parent.postMessage(
+        ["resizeIframe", { h: currentHeight, url: location.href }],
+        "*",
+      );
     }
   }
 
   // Respond to height requests from parent via MessageChannel
-  window.addEventListener('message', function(event) {
+  window.addEventListener("message", function (event) {
     if (event.source === window.parent && event.ports && event.ports[0]) {
       event.ports[0].postMessage(embedElement.offsetHeight);
     }
   });
 
-  window.addEventListener('load', sendHeight);
+  window.addEventListener("load", sendHeight);
   new ResizeObserver(sendHeight).observe(embedElement);
 
   // Expose for embedTweet.js

public/js/widgets.js

@@ -8,10 +8,7 @@
   if (window.__nitterWidgets) return;
   window.__nitterWidgets = true;
 
-  var scripts = document.querySelectorAll('script[src*="widgets.js"]');
+  var NITTER = new URL(document.currentScript.src).origin;
-  var NITTER = scripts.length
-    ? new URL(scripts[scripts.length - 1].src).origin
-    : location.origin;
 
   var TWEET_RE = /(?:twitter\.com|x\.com)\/([^\/]+)\/status\/(\d+)/i;
   var SELECTOR = "blockquote.twitter-tweet, blockquote.twitter-video";
@@ -21,11 +18,15 @@
   var isReady = false;
 
   function safeCall(fn, arg) {
-    try { fn(arg); } catch (e) {}
+    try {
+      fn(arg);
+    } catch (e) { }
   }
 
   function fireEvent(name, data) {
-    (eventCallbacks[name] || []).forEach(function (cb) { safeCall(cb, data); });
+    (eventCallbacks[name] || []).forEach(function (cb) {
+      safeCall(cb, data);
+    });
   }
 
   function parseTweetUrl(url) {
@@ -44,8 +45,12 @@
       var path = tweet.user ? "/" + tweet.user : "/i";
       url = NITTER + path + "/status/" + tweet.id + "/embed";
       if (opts.theme) {
-        var theme = opts.theme === "dark" ? "nitter" :
+        var theme =
-                    opts.theme === "light" ? "twitter" : opts.theme;
+          opts.theme === "dark"
+            ? "nitter"
+            : opts.theme === "light"
+              ? "twitter"
+              : opts.theme;
         url += "?theme=" + encodeURIComponent(theme);
       }
     }
@@ -60,11 +65,18 @@
     if (opts.videoOnly) iframe.setAttribute("allowfullscreen", "true");
 
     var width = opts.width || 550;
-    var margin = opts.align === "center" ? "10px auto" :
+    var margin =
-                 opts.align === "right" ? "10px 0 10px auto" : "10px 0";
+      opts.align === "center"
+        ? "10px auto"
+        : opts.align === "right"
+          ? "10px 0 10px auto"
+          : "10px 0";
     iframe.style.cssText =
-      "width:100%;max-width:" + width + "px;height:250px;" +
+      "width:100%;max-width:" +
-      "border:none;display:block;margin:" + margin;
+      width +
+      "px;height:300px;" +
+      "border:none;display:block;margin:" +
+      margin;
 
     iframe.addEventListener("load", function () {
       fireEvent("rendered", { target: iframe });
@@ -89,7 +101,7 @@
       width: d.mediaMaxWidth || d.width,
       align: d.align,
       theme: d.theme,
-      videoOnly: d.mediaMaxWidth !== undefined
+      videoOnly: d.mediaMaxWidth !== undefined,
     });
 
     bq.style.display = "none";
@@ -98,7 +110,9 @@
   }
 
   function processEmbeds(root) {
-    var bqs = (root || document).querySelectorAll(SELECTOR + ":not([data-nitter-processed])");
+    var bqs = (root || document).querySelectorAll(
+      SELECTOR + ":not([data-nitter-processed])",
+    );
     for (var i = 0; i < bqs.length; i++) processBlockquote(bqs[i]);
   }
 
@@ -147,7 +161,7 @@
       createTweet: embedTweet,
       createTweetEmbed: embedTweet,
       createVideo: embedTweet,
-      loaded: true
+      loaded: true,
     },
     events: {
       bind: function (name, cb) {
@@ -158,33 +172,44 @@
       unbind: function (name, cb) {
         if (!eventCallbacks[name]) return;
         eventCallbacks[name] = cb
-          ? eventCallbacks[name].filter(function (f) { return f !== cb; })
+          ? eventCallbacks[name].filter(function (f) {
+            return f !== cb;
+          })
           : [];
-      }
+      },
     },
     ready: function (cb) {
       if (typeof cb !== "function") return;
       if (isReady) cb(window.twttr);
       else readyCallbacks.push(cb);
     },
-    _e: []
+    _e: [],
   };
 
   // Process callbacks queued before load (twttr._e pattern)
   if (prevTwttr && prevTwttr._e) {
-    prevTwttr._e.forEach(function (cb) { safeCall(cb); });
+    prevTwttr._e.forEach(function (cb) {
+      safeCall(cb);
+    });
   }
 
   // Remove any Twitter scripts that snuck through
-  document.querySelectorAll('script[src*="platform.twitter.com"], script[src*="platform.x.com"]')
+  document
-    .forEach(function (s) { s.remove(); });
+    .querySelectorAll(
+      'script[src*="platform.twitter.com"], script[src*="platform.x.com"]',
+    )
+    .forEach(function (s) {
+      s.remove();
+    });
 
   function init() {
     window.addEventListener("message", handleResize);
     processEmbeds();
     observeDOM();
     isReady = true;
-    readyCallbacks.forEach(function (cb) { safeCall(cb, window.twttr); });
+    readyCallbacks.forEach(function (cb) {
+      safeCall(cb, window.twttr);
+    });
     readyCallbacks = [];
   }
 

src/sass/tweet/embed.scss

@@ -88,6 +88,7 @@ html:has(body > .embed-video) {
 // Video-only embed
 .embed-video {
   position: relative;
+  min-height: 300px;
   background-color: black;
   border: 1px solid var(--border_grey);
 
@@ -106,7 +107,7 @@ html:has(body > .embed-video) {
     width: 100%;
   }
 
-  .gallery-video > .attachment {
+  .gallery-video>.attachment {
     max-height: 560px;
     width: 100%;
   }
@@ -135,7 +136,9 @@ html:has(body > .embed-video) {
     text-decoration: none;
     border-radius: 9999px;
     border: 1px solid transparent;
-    transition: background 0.15s, opacity 0.15s;
+    transition:
+      background 0.15s,
+      opacity 0.15s;
     z-index: 10;
 
     &:hover {
@@ -143,8 +146,14 @@ html:has(body > .embed-video) {
     }
   }
 
-  &:has(video:playing) .video-overlay-link {
+  // Hide button while playing, show on hover or when paused
+  &.video-playing .video-overlay-link {
     opacity: 0;
     pointer-events: none;
   }
+
+  &.video-playing:hover .video-overlay-link {
+    opacity: 1;
+    pointer-events: auto;
+  }
 }

src/views/embed.nim

@@ -14,7 +14,7 @@ proc renderVideoEmbed*(tweet: Tweet; cfg: Config; req: Request): string =
     video = tweet.getVideos()[0]
     thumb = video.thumb
     vidUrl = getVideoEmbed(cfg, tweet.id)
-    prefs = Prefs(hlsPlayback: true, mp4Playback: true)
+    prefs = Prefs(hlsPlayback: true, mp4Playback: true, proxyVideos: true)
     tweetUrl = getLink(tweet)
 
   let node = buildHtml(html(lang="en")):

src/views/general.nim

@@ -50,7 +50,7 @@ proc renderHead*(prefs: Prefs; cfg: Config; req: Request; titleText=""; desc="";
   let opensearchUrl = getUrlPrefix(cfg) & "/opensearch"
 
   buildHtml(head):
-    link(rel="stylesheet", type="text/css", href="/css/style.css?v=101")
+    link(rel="stylesheet", type="text/css", href="/css/style.css?v=106")
     link(rel="stylesheet", type="text/css", href="/css/fontello.css?v=7")
 
     if theme.len > 0: