☰

Embed logic for local Webms

Adds embed capability for webms in local listing (Browser can handle Webms better than Windows)

// ==UserScript==
// @name         Embed logic for local Webms
// @namespace    file:///
// @version      1.0
// @description  Adds embed capability for webms in local listing (Browser can handle Webms better than Windows)
// @author       DUVish
// @match        file:///*webms/
// @icon         https://www.google.com/s2/favicons?sz=64&domain=undefined.
// @grant        none
// ==/UserScript==

let topLevelTable = document.querySelector("table");

let currentEmbeddedRowIdx = null;

if (topLevelTable) {
  let topLevelHead = topLevelTable.querySelector("thead");
  let topLevelHeadRow = topLevelHead.querySelector("tr");
  let newTableHeadCell = document.createElement("th");
  newTableHeadCell.innerText = "Embed";
  topLevelHeadRow.appendChild(newTableHeadCell);

  let topLevelBody = topLevelTable.querySelector("tbody")
  let totalRows = topLevelBody.children.length;

  let videoViewNode = document.createElement("div");
  videoViewNode.style.width = "90vw";
  videoViewNode.style.height = "90vh";
  videoViewNode.style.display = "none";
  videoViewNode.style.top = "2.5vh";
  videoViewNode.style.left = "2.5vw";
  videoViewNode.style.position = "fixed";
  videoViewNode.classList.add("videoViewNode");
  document.querySelector("body").appendChild(videoViewNode);
  let videoTitleNode = document.createElement("div");
  videoTitleNode.style.width = "100%";
  videoTitleNode.style.textAlign = "center";
  videoTitleNode.innerText = `[${currentEmbeddedRowIdx}/${totalRows - 1}]`;
  videoTitleNode.classList.add("videoTitleNode");
  videoViewNode.appendChild(videoTitleNode);
  videoViewNode.addEventListener("keydown", (e) => {
    let key = e.key;
    if (key === "q") {
      Array.from(videoViewNode.children).forEach(child => child.tagName === "VIDEO" && child.remove());
      videoViewNode.style.display = "none";
      currentEmbeddedRowIdx = null;
    }

    if (key === "ArrowDown" || key === "ArrowUp") {
      if (typeof currentEmbeddedRowIdx === "number") {
        let changedFlag = false;
        if (key === "ArrowDown" && currentEmbeddedRowIdx < totalRows - 1) {
            currentEmbeddedRowIdx++;
            changedFlag = true;
        }
        if (key === "ArrowUp" && currentEmbeddedRowIdx > 0) {
            currentEmbeddedRowIdx--;
            changedFlag = true;
        }
        if (changedFlag) {
          let newVideoSrc = topLevelBody.children[currentEmbeddedRowIdx].querySelector("a").href;
          let currentVideoNode = document.querySelector(".videoNode");
          if (currentVideoNode) {
              currentVideoNode.src = newVideoSrc;
              updateTitle();
          }
        }
      }
    }
  });

  function updateTitle(idx) {
    let videoTitleNode = document.querySelector(".videoTitleNode");
    videoTitleNode.innerText = `[${currentEmbeddedRowIdx || idx}/${totalRows - 1}]`;
  }

  Array.from(topLevelBody.children).forEach((row, idx) => {
    let newCell = document.createElement("td");
    newCell.innerText = "Embed media";
    newCell.addEventListener("click", (e) => {
        let clickedCell = e.target;
        let fileName = clickedCell.parentNode.children[0].querySelector("a").href;
        let videoNode = document.createElement("video");
        videoNode.src = fileName;
        videoNode.controls = "true";
        videoNode.loop = "true";
        videoNode.autoplay = "true";
        videoNode.style.width = "95vw";
        videoNode.style.height = "95vh";
        videoNode.classList.add("videoNode");
        let videoViewNode = document.querySelector(".videoViewNode");
        console.log("in emebd click handler", videoViewNode, videoViewNode.style, videoViewNode.style.display);
        videoViewNode.style.display = "flex";
        videoViewNode.style.flexDirection = "column";
        videoViewNode.appendChild(videoNode);
        updateTitle(idx);
        currentEmbeddedRowIdx = idx;
    });
    row.appendChild(newCell);
  });
}