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 @@
//