f0ckv2/public/js/events.js

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

const events = {};
events.wheel = async e => {
  if(rt.tmp.events.page) { // Pageevents
    if(rt.tmp.scroll)
      return;
    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.tmp.scroll = false;
    rt.tmp.scroll = true;
    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));

    document.querySelector("div#p_items").removeChild(rt.ct.wrapper.pages[deltaY === -1 ? 2 : 0]);
    const newdiv = document.createElement("div");
    newdiv.classList.add("p_item");
    document.querySelector("div#p_items").insertAdjacentElement((deltaY === -1 ? "afterbegin" : "beforeend"), newdiv);
    rt.ct.wrapper.pages = document.querySelectorAll("div.p_item");
    lib.calcItems();

    lib.scrolltomiddle(rt.ct.wrapper.pages);
    rt.ct.wrapper.pages[0].innerHTML = "";
    rt.ct.wrapper.pages[2].innerHTML = "";

  }
  if(rt.tmp.events.item) { // Itemevents
    if(rt.tmp.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.oldest) || (deltaY === 1 && rt.items.act === rt.items.newest))
      return;
    window.location = `${window.location.pathname}#${deltaY === -1 ? rt.items.next : rt.items.prev}`;
  }
  rt.tmp.scroll = false;
};
events.resize = 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);

  if(rt.tmp.events.item) {
    lib.scrolltomiddle(rt.ct.wrapper.items);
  }
};
events.volumechange = e => {
  localStorage.setItem("volume", e.target.volume);
};
events.hashchange = async e => {
  if(rt.tmp.scroll || !rt.tmp.hash)
    return rt.tmp.hash = true;
  rt.tmp.scroll = true;
  console.log("hashchange lol");

  if(rt.tmp.layer !== "item")
    rt.ct.wrapper.items[1].innerHTML = "";
  
  const itemid = parseInt((e.newURL?e.newURL:e.detail.newURL).split("#").slice(-1));
  if(!itemid || itemid <= 0) // failover oder so
    return lib.closeItemview();
  
  const next = rt.items.act === null || rt.items.act === itemid ? 1 : rt.items.act > itemid ? 2 : 0;
  lib.showLayer("item", next === 1);
  
  rt.ct.header.itempos.innerHTML = `${itemid}`;
  const item = await lib.getItem(itemid);
  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;

  // <test>
  if(itemid > rt.items.first || itemid < rt.items.last) { // Scroll to next Page
    rt.items.eps = 0;
    await lib.getItems({
      el: rt.ct.wrapper.pages[1],
      opt: next === 0 ? `id=${itemid-1}&order=asc` : `id=${itemid+1}&order=desc`
    });

    /*rt.tmp.scroll = false;
    events.wheel.page({
      target: {
        id: next === 0 ? "up" : "down"
      }
    });
    rt.tmp.scroll = true;*/
  }
  // </test>

  rt.ct.wrapper.pages[1].querySelectorAll("a > img").forEach(f => {
    f.style.boxShadow = null;
    f.style.borderRadius = null;
    f.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", ev => events.volumechange(ev));
    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", ev => events.volumechange(ev));
    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.tmp.scroll = false;
};

export default events;