QoL

public/s/css/f0ck.css

@@ -2912,3 +2912,24 @@ div.favs div.posts {
   padding: 5px;
   background: var(--dropdown-bg);
 }
+
+#bg {
+  position: fixed;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  width: 100%;
+  height: 100%;
+  -webkit-filter: blur(100px);
+  filter: blur(100px);
+  transform: translate3d(0, 0, 0);
+  z-index: 0;
+  transition: 2s ease;
+}
+
+button#togglebg {
+  border: 0;
+  background: transparent;
+  cursor: pointer;
+}

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;

views/index.html

@@ -1,7 +1,4 @@
 @include(snippets/header)
-<div class="links">
-  
-</div>
 <div class="pagewrapper">
   <div id="main">
     <div class="index-container">

views/item.html

@@ -1,4 +1,5 @@
 @include(snippets/header)
+<canvas class="hidden-xs" id="bg"></canvas>
 <div class="wrapper">
   <div id="main">
     <div class="container">
@@ -11,10 +12,15 @@
         </div>
         @if(session)
         <div class="gapRight">
+          <button id="togglebg">&#128161;</button>
           <svg class="iconset" id="a_favo"><use href="/s/img/iconset.svg#heart_{{ Object.values(item.favorites).filter(u => u.user == session.user)[0] ? 'solid' : 'regular' }}"></use></svg>
           <svg class="iconset" id="a_tfull"><use href="/s/img/iconset.svg#window-{{ fullscreen == 1 ? 'minimize' : 'maximize' }}"></use></svg>
           <svg class="iconset" id="a_delete"><use href="/s/img/iconset.svg#cross"></use></svg> 
         </div>
+        @else
+        <div class="gapRight">
+          <button id="togglebg">&#128161;</button>
+        </div>
         @endif
       </div>
       <div class="content">

views/user.html

@@ -18,7 +18,7 @@
   <div class="user_content_wrapper">
     <div class="f0cks">
       <div class="f0cks-header">
-        f0ck{{ count.f0cks == 1 ? '' : 's' }}: {{ count.f0cks }} <a href="{{ f0cks.link.main }}">view</a>
+        f0ck{{ count.f0cks == 1 ? '' : 's' }}: {{ count.f0cks }} <a href="{{ f0cks.link.main }}">view all</a>
       </div>
       @if('items' in f0cks)
       <div class="posts">
@@ -32,7 +32,7 @@
     </div>
     <div class="favs">
       <div class="favs-header">
-        fav{{ count.favs == 1 ? '' : 's' }}: {{ count.favs }} <a href="{{ favs.link.main }}">view</a>
+        fav{{ count.favs == 1 ? '' : 's' }}: {{ count.favs }} <a href="{{ favs.link.main }}">view all</a>
       </div>
         @if('items' in favs)
       <div class="posts">