Adds Telegram and VK (if you got token with video and offline permission on vkhost.github.io) previewing content, such as autoplay video and embed a video

script.js

// ==UserScript==
// @name         InoReader preview content
// @namespace    http://tampermonkey.net/
// @version      0.0.1
// @description  InoReader autoplay video, preview full article, VK video embed
// @author       Kenya-West
// @grant        GM_registerMenuCommand
// @match        https://*.inoreader.com/feed*
// @match        https://*.inoreader.com/article*
// @icon         https://inoreader.com/favicon.ico?v=8
// ==/UserScript==

(function () {
  "use strict";

  const vkAccessTokenCommand = registerPromptVkAccessToken();

  function registerPromptVkAccessToken() {
    return GM_registerMenuCommand("Set VK access token", () => {
      const vkAccessToken = prompt("Enter VK access token", localStorage.getItem("vkAccessToken") ?? "");
      localStorage.setItem("vkAccessToken", vkAccessToken);
    });
  }

  // Select the node that will be observed for mutations
  const targetNode = document.body;

  // Options for the observer (which mutations to observe)
  const config = { childList: true, subtree: true };

  const querySelectorPathVideoNative = ".article_full_contents .article_content video";
  const querySelectorPathVideoVk =
    '.article_full_contents .article_content a[href^="https://vk.com/video"]';

  // Callback function to execute when mutations are observed
  const callback = (mutationsList, observer) => {
    for (let mutation of mutationsList) {
      if (mutation.type === "childList") {
        mutation.addedNodes.forEach((node) => {
          if (node.nodeType === Node.ELEMENT_NODE) {
            // Auto play video native
            if (node.querySelector(querySelectorPathVideoNative)) {
              autoplayVideoNative();
            }
            // Embed and Aauto play video VK
            if (node.querySelector(querySelectorPathVideoVk)) {
              if (localStorage.getItem("vkAccessToken") !== null) {
                autoplayVideoVK();
              }
            }
          }
        });
      }
    }
  };

  function autoplayVideoNative() {
    const videos = document.querySelectorAll(querySelectorPathVideoNative);

    setTimeout(() => {
      videos.forEach((video) => {
        if (!video.hasAttribute("autoplay")) {
          video.setAttribute("autoplay", true);
        }
        if (!video.hasAttribute("loop")) {
          video.setAttribute("loop", true);
        }
        if (!video.hasAttribute("controls")) {
          video.setAttribute("controls", true);
        }
      });
    }, 200);
  }

  function autoplayVideoVK() {
    const videos = document.querySelectorAll(querySelectorPathVideoVk);
    let videoHash = "";

    setTimeout(() => {
      videos.forEach(
        /**
         *
         * @param video {HTMLElement}
         */
        (video) => {
          // get group id and video id from href like `https://vk.com/video-163058008_456251668` and get rid of `video` string
          let [groupId, videoId] = video.href.split("/").pop().split("_");
          groupId = groupId.replace("video", "");

          console.log("groupId", groupId);
          console.log("videoId", videoId);

          fetch(
            `https://qvlrvbwrcrlpwjwzsktw.functions.eu-central-1.nhost.run/v1/vk-api?video=${groupId}_${videoId}&vk_access_token=${localStorage.getItem("vkAccessToken")}`
          )
            .then((response) => {
              return response.json();
            })
            .then((data) => {
              console.log("data", data);

              try {
                videoHash = new URL(
                  data.response?.items[0]?.player
                ).searchParams.get("hash");
                console.log("videoHash", videoHash);

                const iframe = document.createElement("iframe");
                iframe.src = `https://vk.com/video_ext.php?oid=${groupId}&id=${videoId}&hash=${videoHash}`;
                iframe.width = "100%";
                iframe.height = "650";
                iframe.frameborder = "0";
                iframe.allow =
                  "autoplay; encrypted-media; fullscreen; picture-in-picture";
                iframe.allowfullscreen = true;
                video.parentNode.replaceChild(iframe, video);
              } catch (e) {
                console.error(e);
              }
            });
        }
      );
    }, 200);
  }

  // Create an observer instance linked to the callback function
  const tmObserverVideoAutoplay = new MutationObserver(callback);

  // Start observing the target node for configured mutations
  tmObserverVideoAutoplay.observe(targetNode, config);
})();