f0ckv2/public/s/js/f0ck.js

(() => {
  let video;
  if(elem = document.querySelector("#my-video")) {
    video = new v0ck(elem);
    document.addEventListener("keydown", e => {
      if(e.key === " " && e.target.tagName !== "INPUT") {
        video[video.paused ? 'play' : 'pause']();
        document.querySelector('.v0ck_overlay').classList[video.paused ? 'remove' : 'add']('v0ck_hidden');
      }
    });
  }

  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"),
    "a": clickOnElementBinding("#next"),
    "ArrowRight": clickOnElementBinding("#prev"),
    "d": clickOnElementBinding("#prev"),
    "r": clickOnElementBinding("#random"),
    " ": clickOnElementBinding("#f0ck-image")
  };
  document.addEventListener("keydown", e => {
    if(e.key in keybindings && e.target.tagName !== "INPUT") {
      e.preventDefault();
      keybindings[e.key]();
    }
  });
  // </keybindings>

  // <image-responsive>
  const imgSize = e => new Promise((res, _) => {
    const i = new Image();
    i.addEventListener('load', function() {
      res({ width: this.width, height: this.height });
    });
    i.src = e.src;
  });

  if(f0ckimage = document.querySelector("img#f0ck-image")) {
    const f0ckimagescroll = document.querySelector("#image-scroll");
    f0ckimage.addEventListener("click", async e => {
      e.preventDefault();
      const img = await imgSize(f0ckimage);
      if(img.width > img.height)
        return;
      f0ckimagescroll.hasAttribute("style")
        ? f0ckimagescroll.removeAttribute("style")
        : f0ckimagescroll.setAttribute("style", "overflow-y: scroll");
      f0ckimage.hasAttribute("style")
        ? f0ckimage.removeAttribute("style")
        : f0ckimage.setAttribute("style", "max-height: none; height: auto; width: 100%; position: absolute; left: 0;");
    });
  }
  // </image-responsive>

  // <scroller>
  let tts = 0;
  const scroll_treshold = 1;
  if(document.querySelector("div#posts")) {
    document.addEventListener("wheel", e => {
      if((window.innerHeight + window.scrollY) >= document.body.offsetHeight && e.deltaY > 0) { // down
        if(elem = document.querySelector(".pagination > .next:not(.disabled)")) {
          if(tts < scroll_treshold) {
            document.querySelector("div#footbar").style.boxShadow = "inset 0px 4px 0px var(--accent)";
            document.querySelector("div#footbar").style.color = "var(--accent)";
            tts++;
          }
          else
            changePage(elem);
        }
      }
      else if(window.scrollY <= 0 && e.deltaY < 0) { // up
        if(elem = document.querySelector(".pagination > .prev:not(.disabled)")) {
          if(tts < scroll_treshold) {
            document.querySelector("nav.navbar").style.boxShadow = "0px 2px 0px var(--accent)";
            document.querySelector("nav.navbar").style.transition = ".2s ease-in-out";
            tts++;
          }
          else
            changePage(elem);
        }
      }
      else {
        tts = 0;
        document.querySelector("div#footbar").style.boxShadow = "unset";
        document.querySelector("div#footbar").style.color = "transparent";
        document.querySelector("nav.navbar").style.boxShadow = "unset";
      }
    });
  }

  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;
  // </scroller>
 
  // <swipe>
  const swipeRT = {
    xDown: null,
    yDown: null,
    xDiff: null,
    yDiff: null,
    timeDown: null,
    startEl: null
  };
  const swipeOpt = {
    treshold: 20, // 20px
    timeout: 500  // 500ms
  };

  document.addEventListener('touchstart', e => {
    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;
  }, false);

  document.addEventListener('touchmove', e => {
    if(!swipeRT.xDown || !swipeRT.yDown)
      return;
    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
          elem = document.querySelector(".pagination > .next:not(.disabled)");
        else // right
          elem = document.querySelector(".pagination > .prev:not(.disabled)");
      }
    }
    else {
      if(Math.abs(swipeRT.yDiff) > swipeOpt.treshold && timeDiff < swipeOpt.timeout) {
        if(navbar = document.querySelector("nav.navbar") && document.querySelector("div#posts")) {
          if(swipeRT.yDiff > 0 && (window.innerHeight + window.scrollY) >= document.body.offsetHeight) // up
            elem = document.querySelector(".pagination > .next:not(.disabled)");
          else if(swipeRT.yDiff <= 0 && window.scrollY <= 0 && document.querySelector("div#posts")) // down
            elem = document.querySelector(".pagination > .prev:not(.disabled)");
        }
      }
    }

    swipeRT.xDown = null;
    swipeRT.yDown = null;
    swipeRT.timeDown = null;

    if(elem)
      changePage(elem);
  }, false);
  // </swipe>

  // <visualizer>
  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();
    };
  }
  // </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>
})();