f0ckv2/public/s/js/f0ck.js

238 lines
8.2 KiB
JavaScript
Raw Normal View History

2021-04-17 08:43:23 +00:00
(() => {
2021-12-23 06:18:33 +00:00
let video;
2021-04-17 08:43:23 +00:00
if(elem = document.querySelector("#my-video")) {
2021-12-23 06:18:33 +00:00
video = new v0ck(elem);
2021-04-22 02:12:40 +00:00
document.addEventListener("keydown", e => {
2021-05-25 12:44:35 +00:00
if(e.key === " " && e.target.tagName !== "INPUT") {
2021-04-22 02:12:40 +00:00
video[video.paused ? 'play' : 'pause']();
document.querySelector('.v0ck_overlay').classList[video.paused ? 'remove' : 'add']('v0ck_hidden');
}
});
2021-04-17 08:43:23 +00:00
}
let tt = false;
const stimeout = 500;
const changePage = (e, pbwork = true) => {
pbwork && document.querySelector("nav.navbar").classList.add("pbwork");
!tt && (tt = setTimeout(() => e.click(), stimeout));
};
// <keybindings>
const clickOnElementBinding = selector => () => (elem = document.querySelector(selector)) ? elem.click() : null;
const keybindings = {
"ArrowLeft": clickOnElementBinding("#next"),
2021-04-22 02:12:40 +00:00
"a": clickOnElementBinding("#next"),
2021-04-17 08:43:23 +00:00
"ArrowRight": clickOnElementBinding("#prev"),
2021-04-22 02:12:40 +00:00
"d": clickOnElementBinding("#prev"),
2021-12-29 15:27:02 +00:00
"r": clickOnElementBinding("#random"),
" ": clickOnElementBinding("#f0ck-image")
2021-04-17 08:43:23 +00:00
};
document.addEventListener("keydown", e => {
2021-05-25 12:44:35 +00:00
if(e.key in keybindings && e.target.tagName !== "INPUT") {
if(e.shiftKey || e.ctrlKey || e.metaKey || e.altKey)
return;
2021-04-17 08:43:23 +00:00
e.preventDefault();
keybindings[e.key]();
}
});
// </keybindings>
// <image-responsive>
2021-04-22 02:12:40 +00:00
const imgSize = e => new Promise((res, _) => {
const i = new Image();
i.addEventListener('load', function() {
res({ width: this.width, height: this.height });
2021-04-17 08:43:23 +00:00
});
2021-04-22 02:12:40 +00:00
i.src = e.src;
});
2021-04-17 08:43:23 +00:00
2021-04-22 02:12:40 +00:00
if(f0ckimage = document.querySelector("img#f0ck-image")) {
const f0ckimagescroll = document.querySelector("#image-scroll");
f0ckimage.addEventListener("click", async e => {
2021-04-17 08:43:23 +00:00
e.preventDefault();
2021-04-22 02:12:40 +00:00
const img = await imgSize(f0ckimage);
if(img.width > img.height)
return;
2021-04-17 08:43:23 +00:00
f0ckimagescroll.hasAttribute("style")
? f0ckimagescroll.removeAttribute("style")
: f0ckimagescroll.setAttribute("style", "overflow-y: scroll");
2021-04-22 02:12:40 +00:00
f0ckimage.hasAttribute("style")
? f0ckimage.removeAttribute("style")
2022-05-18 19:05:13 +00:00
: f0ckimage.setAttribute("style", "max-height: none; height: auto; width: 100%; position: absolute; left: 0; border: var(--img-border-width) solid var(--img-border-color); border-top: none; border-bottom: none;");
2021-04-17 08:43:23 +00:00
});
}
2021-04-22 02:12:40 +00:00
// </image-responsive>
2021-04-17 08:43:23 +00:00
// <scroller>
2021-12-18 18:51:26 +00:00
let tts = 0;
2021-12-26 16:26:30 +00:00
const scroll_treshold = 1;
2022-05-18 12:12:25 +00:00
if([...document.querySelectorAll("div.posts")].length === 1) {
2021-04-17 08:43:23 +00:00
document.addEventListener("wheel", e => {
2022-04-21 14:31:14 +00:00
if(Math.ceil(window.innerHeight + window.scrollY) >= document.body.offsetHeight && e.deltaY > 0) { // down
2021-12-18 18:51:26 +00:00
if(elem = document.querySelector(".pagination > .next:not(.disabled)")) {
2021-12-26 16:26:30 +00:00
if(tts < scroll_treshold) {
document.querySelector("div#footbar").style.boxShadow = "inset 0px 4px 0px var(--footbar-color)";
document.querySelector("div#footbar").style.color = "var(--footbar-color)";
2021-12-18 18:51:26 +00:00
tts++;
}
else
changePage(elem);
}
2021-04-17 08:43:23 +00:00
}
2021-12-18 18:51:26 +00:00
else if(window.scrollY <= 0 && e.deltaY < 0) { // up
if(elem = document.querySelector(".pagination > .prev:not(.disabled)")) {
2021-12-26 16:26:30 +00:00
if(tts < scroll_treshold) {
document.querySelector("nav.navbar").style.boxShadow = "0px 2px 0px var(--loading-indicator-color)";
2021-12-29 04:48:04 +00:00
document.querySelector("nav.navbar").style.transition = ".2s ease-in-out";
2021-12-18 18:51:26 +00:00
tts++;
}
else
changePage(elem);
}
}
else {
2021-12-26 16:26:30 +00:00
tts = 0;
document.querySelector("div#footbar").style.boxShadow = "unset";
document.querySelector("div#footbar").style.color = "transparent";
document.querySelector("nav.navbar").style.boxShadow = "unset";
2021-04-17 08:43:23 +00:00
}
});
}
2021-12-09 16:01:17 +00:00
const rmatch = /\/p\/(\d+?)/;
if(document.referrer.match(rmatch) && document.location.href.match(rmatch))
if(document.location.href.match(rmatch) < document.referrer.match(rmatch))
document.body.scrollTop = document.body.scrollHeight;
2021-04-17 08:43:23 +00:00
// </scroller>
2021-12-18 18:51:26 +00:00
2021-04-17 08:43:23 +00:00
// <swipe>
2021-12-18 18:51:26 +00:00
const swipeRT = {
xDown: null,
yDown: null,
xDiff: null,
yDiff: null,
timeDown: null,
startEl: null
};
const swipeOpt = {
treshold: 20, // 20px
timeout: 500 // 500ms
};
2021-04-17 08:43:23 +00:00
document.addEventListener('touchstart', e => {
2021-12-18 18:51:26 +00:00
swipeRT.startEl = e.target;
swipeRT.timeDown = Date.now();
swipeRT.xDown = e.touches[0].clientX;
swipeRT.yDown = e.touches[0].clientY;
swipeRT.xDiff = 0;
swipeRT.yDiff = 0;
2021-04-17 08:43:23 +00:00
}, false);
document.addEventListener('touchmove', e => {
2021-12-18 18:51:26 +00:00
if(!swipeRT.xDown || !swipeRT.yDown)
2021-04-17 08:43:23 +00:00
return;
2021-12-18 18:51:26 +00:00
swipeRT.xDiff = swipeRT.xDown - e.touches[0].clientX;
swipeRT.yDiff = swipeRT.yDown - e.touches[0].clientY;
}, false);
document.addEventListener('touchend', e => {
if(swipeRT.startEl !== e.target)
return;
const timeDiff = Date.now() - swipeRT.timeDown;
let elem;
if(Math.abs(swipeRT.xDiff) > Math.abs(swipeRT.yDiff)) {
if(Math.abs(swipeRT.xDiff) > swipeOpt.treshold && timeDiff < swipeOpt.timeout) {
if(swipeRT.xDiff > 0) // left
2021-04-17 08:43:23 +00:00
elem = document.querySelector(".pagination > .next:not(.disabled)");
2021-12-18 18:51:26 +00:00
else // right
2021-04-17 08:43:23 +00:00
elem = document.querySelector(".pagination > .prev:not(.disabled)");
}
}
2021-12-18 18:51:26 +00:00
else {
if(Math.abs(swipeRT.yDiff) > swipeOpt.treshold && timeDiff < swipeOpt.timeout) {
2022-05-18 12:07:07 +00:00
if(navbar = document.querySelector("nav.navbar") && document.querySelector("div.posts")) {
2021-12-18 18:51:26 +00:00
if(swipeRT.yDiff > 0 && (window.innerHeight + window.scrollY) >= document.body.offsetHeight) // up
elem = document.querySelector(".pagination > .next:not(.disabled)");
2022-05-18 12:07:07 +00:00
else if(swipeRT.yDiff <= 0 && window.scrollY <= 0 && document.querySelector("div.posts")) // down
2021-12-18 18:51:26 +00:00
elem = document.querySelector(".pagination > .prev:not(.disabled)");
}
}
}
swipeRT.xDown = null;
swipeRT.yDown = null;
swipeRT.timeDown = null;
2021-04-17 08:43:23 +00:00
if(elem)
changePage(elem);
}, false);
// </swipe>
2021-05-19 12:18:22 +00:00
2021-12-23 06:18:33 +00:00
// <visualizer>
2021-05-19 12:18:22 +00:00
if(audioElement = document.querySelector("audio")) {
const canvas = document.createElement("canvas");
const ctx = canvas.getContext("2d");
canvas.width = 1920;
canvas.height = 1080;
setTimeout(() => {
document.querySelector(".v0ck").insertAdjacentElement("afterbegin", canvas);
}, 400);
const audioCtx = new AudioContext();
const analyser = audioCtx.createAnalyser();
analyser.fftSize = 2048;
const source = audioCtx.createMediaElementSource(audioElement);
source.connect(analyser);
source.connect(audioCtx.destination);
let data = new Uint8Array(analyser.frequencyBinCount);
requestAnimationFrame(loopingFunction);
function loopingFunction() {
requestAnimationFrame(loopingFunction);
analyser.getByteFrequencyData(data);
draw(data);
}
function draw(data) {
data = [ ...data ];
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.fillStyle = getComputedStyle(document.body).getPropertyValue("--accent");
data.forEach((value, i) => {
const percent = value / 256;
const height = (canvas.height * percent / 2) - 40;
const offset = canvas.height - height - 1;
const barWidth = canvas.width / analyser.frequencyBinCount;
ctx.fillRect(i * barWidth, offset, barWidth, height);
});
}
audioElement.onplay = () => {
audioCtx.resume();
};
}
2021-12-23 06:18:33 +00:00
// </visualizer>
// <mediakeys>
if(elem = document.querySelector("#my-video") && "mediaSession" in navigator) {
const playpauseEvent = () => {
video[video.paused ? 'play' : 'pause']();
document.querySelector('.v0ck_overlay').classList[video.paused ? 'remove' : 'add']('v0ck_hidden');
};
navigator.mediaSession.setActionHandler('play', playpauseEvent);
navigator.mediaSession.setActionHandler('pause', playpauseEvent);
navigator.mediaSession.setActionHandler('stop', playpauseEvent);
navigator.mediaSession.setActionHandler('previoustrack', () => {
if(link = document.querySelector(".pagination > .prev:not(.disabled)"))
changePage(link);
});
navigator.mediaSession.setActionHandler('nexttrack', () => {
if(link = document.querySelector(".pagination > .next:not(.disabled)"))
changePage(link);
});
}
// </mediakeys>
2021-04-17 08:43:23 +00:00
})();