Updated to new xterm, added rickroll code

Author: gurgenbrx

config/commands.js

@@ -92,7 +92,14 @@ const commands = {
   },
 
   test: function() {
-    term.openURL("https://i.imgur.com/Q2Unw.gif");
+    // innerText HTMLElement pointer for the correct terminal line.
+    // We use this line to replace it with a video element.
+    term.stylePrint(`${colorText("nf134bf139b", "command")}`, false);
+    
+    // Mass print of background lines to correctly represent the height of the video
+    for(let i = 0; i < 41; i++) {
+      term.stylePrint(`${colorText("dn19BRXub191", "command")}`, false);
+    }
   },
 
   email: function() {
@@ -242,7 +249,14 @@ const commands = {
       term.stylePrint(`No such file: ${filename}`);
     }
     if (filename == "id_rsa") {
-      term.openURL("https://i.imgur.com/Q2Unw.gif");
+      // innerText HTMLElement pointer for the correct terminal line.
+      //  We use this line to replace it with a video element.
+      term.stylePrint(`${colorText("nf134bf139b", "command")}`, false);
+
+      // Mass print of background lines to correctly represent the height of the video
+      for(let i = 0; i < 41; i++) {
+        term.stylePrint(`${colorText("dn19BRXub191", "command")}`, false);
+      }
     }
   },
 

index.html

@@ -46,8 +46,9 @@
 
       <script src="js/aalib.js"></script>
       <script src="js/xterm.js"></script>
-      <script src="js/xterm-addon-fit.js"></script>
-      <script src="js/xterm-addon-web-links.js"></script>
+      <script src="js/addon-fit.js"></script>
+      <script src="js/addon-web-links.js"></script>
+      <script src="js/rickroll.js"></script>
       <script src="js/terminal.js"></script>
       <script src="js/terminal-ext.js"></script>
       <script src="js/ascii-art.js"></script>
@@ -81,6 +82,21 @@ <h2 style="display: none;">Seed stage venture capital firm investing in deep tec
         term.loadAddon(webLinksAddon);
         extend(term);
         runRootTerminal(term);
+
+        // MutationObserver listens to changes of .xterm-rows (term.onRender() doesn't work)
+        const targetNode = document.querySelector('.xterm-rows');
+        if (targetNode) {
+          const config = { childList: true, subtree: true, characterData: true };
+          const callback = function (mutationsList, observer) {
+            observer.disconnect();
+            RickRoll();
+            observer.observe(targetNode, config);
+          };
+          const observer = new MutationObserver(callback);
+          observer.observe(targetNode, config);
+        } else {
+          console.warn('No element with class "xterm-rows" found.');
+        }
       </script>
     </body>
   </html>

js/rickroll.js

@@ -0,0 +1,28 @@
+function RickRoll() {
+    const Prefiltered = document.querySelectorAll(`span.xterm-bold.xterm-fg-13`);
+    const RickRollPaste_EL = [];
+    for (let i = 0; i < Prefiltered.length; i++) {
+      if (Prefiltered[i].innerText == 'nf134bf139b') {
+        RickRollPaste_EL.push(Prefiltered[i]);
+      } else if (Prefiltered[i].innerText == 'dn19BRXub191') {
+        Prefiltered[i].style.color = 'transparent'
+      }
+    }
+    console.log(RickRollPaste_EL);
+    RickRollPaste_EL.forEach((rickroll) => {
+      if (!rickroll.querySelector('video')) {
+        var video = document.createElement('video');
+        video.src = './videos/rickroll.mp4';
+        video.autoplay = true;
+        video.loop = true;
+        rickroll.appendChild(video);
+        rickroll.style.height = '720px';
+        // rickroll.parentElement.style.position = 'absolute';
+        // rickroll.parentElement.style.height = '720px';
+        rickroll.style.color = 'transparent'
+        rickroll.style.display = 'flex';
+        rickroll.style.position = 'absolute'
+        video.style.position = 'absolute';
+      }
+    });
+  }

js/terminal-ext.js

@@ -76,12 +76,16 @@ extend = (term) => {
   };
 
   term.setCurrentLine = (newLine, preserveCursor = false) => {
+    // Something with the new xterm package is messing up the location of term.pos() right after the clearCurrentLine()
+    // Because of this, we need to collect the position beforehand.
+    const oldPos = term.pos()
     const length = term.currentLine.length;
     term.clearCurrentLine();
     term.currentLine = newLine;
     term.write(newLine);
     if (preserveCursor) {
-      term.write('\x1b[D'.repeat(length - term.pos()));
+      // New XTERM package cursor preservation fix
+      term.write('\x1b[D'.repeat(length - oldPos));
     }
   }