f0ckv2/public/js/events.js

import rt from "./rt.js";
import lib from "./lib.js";

const events = {};
events.wheel = {
  page: async e => {
    if(rt.scroll)
      return;
    rt.scroll = true;
    const deltaY = e.target.id === "up" ? -1 : e.deltaY < 0 ? -1: 1; // -1 up, 1 down
    
    if((deltaY === -1 && rt.items.first === rt.items.newest) || (deltaY === 1 && rt.items.last === rt.items.oldest))
      return rt.scroll = false;
    rt.items.eps = 0;
    await lib.getItems({
      el: rt.ct.wrapper.pages[deltaY === -1 ? 0 : 2],
      opt: deltaY === -1 ? `id=${rt.items.first}&order=asc` : `id=${rt.items.last}&order=desc`
    });
    rt.ct.wrapper.pages[deltaY === -1 ? 0 : 2].scrollIntoView({ block: rt.vars.block, behavior: "smooth" });
    await new Promise(resolve => setTimeout(resolve, rt.vars.cd));
      
    rt.ct.wrapper.pages[1].innerHTML = rt.ct.wrapper.pages[deltaY === -1 ? 0 : 2].innerHTML;
    rt.ct.wrapper.pages[1].scrollIntoView({ block: rt.vars.block });
    
    rt.scroll = false;
  },
  item: async e => {
    if(rt.scroll)
      return;
    const deltaY = e.target.id === "left" ? -1 : e.deltaY < 0 ? -1: 1; // -1 left, 1 right
    if((deltaY === -1 && rt.items.act === rt.items.first) || (deltaY === 1 && rt.items.act === rt.items.last))
      return rt.scroll = false;
    window.location = `${window.location.pathname}#${rt.items.act - deltaY}`;
  }
};
events.resize = {
  page: async e => {
    e.preventDefault();
    clearTimeout(rt.tmp.resize);
    lib.calcItems();
    rt.tmp.resize = setTimeout(() => lib.getItems({
      el: rt.ct.wrapper.pages[1],
      opt: `id=${rt.items.first + 1}&order=desc`
    }), rt.vars.cd);
    
    lib.scrolltomiddle(rt.ct.wrapper.pages);
  },
  item: async e => {
    lib.scrolltomiddle(rt.ct.wrapper.items);
  }
};
events.volumechange = e => {
  localStorage.setItem("volume", e.target.volume);
};
events.hashchange = async e => {
  if(rt.scroll)
    return;
  rt.scroll = true;

  if(!rt.tmp.hash)
    return rt.tmp.hash = true;
  const itemid = parseInt((e.newURL?e.newURL:e.detail.newURL).split("#").slice(-1));
  if(!itemid || itemid <= 0) // failover oder so
    return lib.showLayer("page");

  const next = rt.items.act === null || rt.items.act === itemid ? 1 : rt.items.act > itemid ? 2 : 0;
  rt.ct.header.itempos.innerHTML = `item ${itemid}`;
  const item = await (await fetch(`${rt.api}/item/${itemid}`)).json();
  item.dest = item.dest.replace(/^\./, "");
  
  rt.ct.header.infos.source.href = item.src;
  rt.ct.header.infos.source.innerHTML = item.srchost;
  rt.ct.header.infos.channel.innerHTML = `${item.usernetwork} ${item.userchannel}`;
  rt.ct.header.infos.title.innerHTML = `${item.mime} (${item.size})`;
  rt.ct.header.infos.nick.innerHTML = item.username;

  lib.showLayer("item", next === 1);

  rt.ct.wrapper.pages[1].querySelectorAll("a > img").forEach(e => {
    e.style.boxShadow = null;
    e.style.borderRadius = null;
    e.style.transition = ".1s ease-out";
  });
  setTimeout(() => {
    rt.ct.wrapper.pages[1].querySelector(`a[href='#${itemid}'] > img`).style.boxShadow = "0px 0px 0px 2px #dac8d2";
    rt.ct.wrapper.pages[1].querySelector(`a[href='#${itemid}'] > img`).style.borderRadius = "5px";
    rt.ct.wrapper.pages[1].querySelector(`a[href='#${itemid}'] > img`).style.transition = ".1s ease-in";
  }, 50);

  let el;
  switch(item.mime) {
    case "audio/flac":
    case "audio/mpeg":
    case "audio/ogg":
    case "audio/x-flac": // audios
      el = document.createElement("audio");
      el.src = `${rt.url}${item.dest}`;
      el.type = item.mime;
      el.autoplay = true;
      el.controls = true;
      el.loop = true;
      el.volume = localStorage.getItem("volume") || 1;
      el.addEventListener("volumechange", events.volumechange);
    break;
    case "image/gif":
    case "image/jpeg":
    case "image/png": // images
      el = document.createElement("img");
      el.src = `${rt.url}${item.dest}`;
    break;
    case "video/mp4":
    case "video/quicktime":
    case "video/webm":
    case "video/ogv": // videos
      el = document.createElement("video");
      el.src = `${rt.url}${item.dest}`;
      el.type = item.mime;
      el.autoplay = true;
      el.controls = true;
      el.loop = true;
      el.volume = localStorage.getItem("volume") || 1;
      el.addEventListener("volumechange", events.volumechange);
    break;
    default:
      alert("lol hacker");
    break;
  }

  el.classList.add("item");

  rt.ct.wrapper.items[next].insertAdjacentElement("afterbegin", el);

  rt.ct.wrapper.items[next].scrollIntoView({ block: rt.vars.block, behavior: "smooth" });

  rt.items.prev = item.prev;
  rt.items.next = item.next;
  rt.items.act = item.id;

  await new Promise(resolve => setTimeout(resolve, rt.vars.cd));
  
  if(next !== 1) {
    document.querySelector("div#i_items").removeChild(rt.ct.wrapper.items[next === 0 ? 2 : 0]);
    const newdiv = document.createElement("div");
    newdiv.classList.add("i_item");
    document.querySelector("div#i_items").insertAdjacentElement((next === 0 ? "afterbegin" : "beforeend"), newdiv);
    
    rt.ct.wrapper.items = document.querySelectorAll("div.i_item");
  }
  
  lib.scrolltomiddle(rt.ct.wrapper.items);
  rt.ct.wrapper.items[0].innerHTML = "";
  rt.ct.wrapper.items[2].innerHTML = "";

  rt.scroll = false;
};

export default events;