Created
March 10, 2024 15:27
-
-
Save Kenya-West/176e9acba360124f473cebed3b291268 to your computer and use it in GitHub Desktop.
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
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// ==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); | |
})(); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment