From cae8c3034fc01c26324a096894e6f2348749d366 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Simon=20D=C3=A9saulniers?= <sim.desaulniers@gmail.com>
Date: Thu, 18 Dec 2025 21:38:03 -0500
Subject: [PATCH] view_in_mpv: hide/restore video code properly

The javascript code had multiple bugs:

* The innerHTML property of the div element was not properly ingested by
  the engine. The recommended way to add HTML content is by using DOM
  objects in Javascript. This fixes the issue.
* The lambda supposed to delete the newly created div object has
  never worked as it didn't capture the appropriate value of the index
  due to how the lambda was declared. This is fixed by wrapping the
  lambda we want in another lambda that will store the appropriate value
  of the index.
---
 misc/userscripts/view_in_mpv | 86 ++++++++++++++++++++++--------------
 1 file changed, 54 insertions(+), 32 deletions(-)

diff --git a/misc/userscripts/view_in_mpv b/misc/userscripts/view_in_mpv
index 4f371c6b5..0684fb941 100755
--- a/misc/userscripts/view_in_mpv
+++ b/misc/userscripts/view_in_mpv
@@ -83,44 +83,66 @@ cat <<EOF
             // the object anyway.
             continue;
         }
-        var replacement = document.createElement("div");
-        replacement.innerHTML = "
-            <p style=\\"margin-bottom: 0.5em\\">
-            Opening page with:
-            <span style=\\"font-family: monospace;\\">${video_command[*]}</span>
-            </p>
-            <p>
-            In order to restore this particular video
-            <a style=\\"font-weight: bold;
-                        color: white;
-                        background: transparent;
-                        cursor: pointer;
-                     \\"
-               onClick=\\"restore_video(this, " + i + ");\\"
-              >click here</a>.
-            </p>
-        ";
-        replacement.style.position = "relative";
-        replacement.style.zIndex = "100003000000";
-        replacement.style.fontSize = "1rem";
-        replacement.style.textAlign = "center";
+
+        var replacement                 = document.createElement("div");
+        replacement.style.position      = "relative";
+        replacement.style.zIndex        = "100003000000";
+        replacement.style.fontSize      = "1rem";
+        replacement.style.textAlign     = "center";
         replacement.style.verticalAlign = "middle";
-        replacement.style.height = "100%";
-        replacement.style.background = "#101010";
-        replacement.style.color = "white";
-        replacement.style.border = "4px dashed #545454";
-        replacement.style.padding = "2em";
-        replacement.style.margin = "auto";
+        replacement.style.height        = "100%";
+        replacement.style.background    = "#101010";
+        replacement.style.color         = "white";
+        replacement.style.border        = "4px dashed #545454";
+        replacement.style.padding       = "2em";
+        replacement.style.margin        = "auto";
+
+        var p1                = document.createElement("p");
+        p1.style.marginBottom = "0.5em";
+
+        p1.appendChild(document.createTextNode("Opening page with: "));
+
+        var span              = document.createElement("span");
+        span.style.fontFamily = "monospace";
+        span.textContent      = "${video_command[*]}";
+        p1.appendChild(span);
+
+        replacement.appendChild(p1);
+
+        var p2 = document.createElement("p");
+
+        p2.appendChild(document.createTextNode("In order to restore this particular video "));
+
+        var a = document.createElement("a");
+        a.textContent = "click here";
+        a.style.fontWeight = "bold";
+        a.style.color = "white";
+        a.style.background = "transparent";
+        a.style.cursor = "pointer";
+        a.href = "#";
+
+        var restore_video = ((i) => {
+          return (() => {
+            var obj = App.all_replacements[i];
+            var video = App.backup_videos[i];
+            obj.parentNode.replaceChild(video, obj);
+        })})(i);
+
+        a.addEventListener("click", function (e) {
+          e.preventDefault();
+          restore_video();
+        });
+
+        p2.appendChild(a);
+        p2.appendChild(document.createTextNode("."));
+
+        replacement.appendChild(p2);
+
         App.all_replacements[i] = replacement;
         App.backup_videos[i] = video;
         video.parentNode.replaceChild(replacement, video);
     }
 
-    function restore_video(obj, index) {
-        obj = App.all_replacements[index];
-        video = App.backup_videos[index];
-        obj.parentNode.replaceChild(video, obj);
-    }
 
     /** force repainting the video, thanks to:
      * http://web.archive.org/web/20151029064649/https://martinwolf.org/2014/06/10/force-repaint-of-an-element-with-javascript/