QoL

public/s/js/f0ck.js

@@ -1,3 +1,11 @@
+
+window.requestAnimFrame = (function(){
+  return window.requestAnimationFrame
+          || window.webkitRequestAnimationFrame
+          || window.mozRequestAnimationFrame
+          || function(callback) { window.setTimeout(callback, 1000 / 60);};
+})();
+
 (() => {
   let video;
   if(elem = document.querySelector("#my-video")) {
@@ -8,6 +16,42 @@
         document.querySelector('.v0ck_overlay').classList[video.paused ? 'remove' : 'add']('v0ck_hidden');
       }
     });
+
+    document.getElementById('togglebg').addEventListener('click', function (e) {
+      e.preventDefault();
+      background = !background;
+      localStorage.setItem('background', background.toString());
+      var canvas = document.getElementById('bg');
+      if (background) {
+          canvas.classList.add('fader-in');
+          canvas.classList.remove('fader-out');
+      } else {
+          canvas.classList.add('fader-out');
+          canvas.classList.remove('fader-in');
+      }
+      animationLoop();
+    });
+
+  if(elem !== null) {
+    if(localStorage.getItem('background') == undefined) {
+      localStorage.setItem('background', 'true');
+    }
+    
+    var background = localStorage.getItem('background') === 'true';
+    var canvas = document.getElementById('bg');
+    var context = canvas.getContext('2d');
+    var cw = canvas.width = canvas.clientWidth | 0;
+    var ch = canvas.height = canvas.clientHeight | 0;
+
+    function animationLoop() {
+      if(video.paused || video.ended || !background)
+          return;
+      context.drawImage(video, 0, 0, cw, ch);
+      window.requestAnimFrame(animationLoop);
+  }
+
+    elem.addEventListener('play', animationLoop);
+  }
   }
 
   let tt = false;
@@ -263,4 +307,4 @@
   // <scroller>
 
   // </scroller>
-})();
+})();