From 7a42e6ffceb0a6f0acc21ff8761c624dd2e584a7 Mon Sep 17 00:00:00 2001
From: schrumpel <Âgit@f0ck.it>
Date: Wed, 29 Nov 2023 04:46:21 +0100
Subject: [PATCH] QoL

---
 public/s/css/f0ck.css | 21 ++++++++++++++++++++
 public/s/js/f0ck.js   | 46 ++++++++++++++++++++++++++++++++++++++++++-
 views/index.html      |  3 ---
 views/item.html       |  6 ++++++
 views/user.html       |  4 ++--
 5 files changed, 74 insertions(+), 6 deletions(-)

diff --git a/public/s/css/f0ck.css b/public/s/css/f0ck.css
index f7d1831..ca6dee0 100644
--- a/public/s/css/f0ck.css
+++ b/public/s/css/f0ck.css
@@ -2911,4 +2911,25 @@ div.f0cks div.posts {
 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;
 }
\ No newline at end of file
diff --git a/public/s/js/f0ck.js b/public/s/js/f0ck.js
index 9350d25..94e3bd8 100644
--- a/public/s/js/f0ck.js
+++ b/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>
-})();
+})();
\ No newline at end of file
diff --git a/views/index.html b/views/index.html
index e6e0aef..e5471b0 100644
--- a/views/index.html
+++ b/views/index.html
@@ -1,7 +1,4 @@
 @include(snippets/header)
-<div class="links">
-  
-</div>
 <div class="pagewrapper">
   <div id="main">
     <div class="index-container">
diff --git a/views/item.html b/views/item.html
index e7a28d1..1253d7e 100644
--- a/views/item.html
+++ b/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">
diff --git a/views/user.html b/views/user.html
index ac10386..91b8f9e 100644
--- a/views/user.html
+++ b/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">