SUKEBEI PLUS

Add original video preview.

// ==UserScript==
// @name        SUKEBEI PLUS
// @namespace   Violentmonkey Scripts
// @match       *://sukebei.nyaa.si/*
// @grant       GM_addStyle
// @grant       GM_xmlhttpRequest
// @grant       GM_setValue
// @grant       GM_getValue
// @grant       GM_registerMenuCommand
// @version     1.3.1
// @author      Chaewon
// @description Add original video preview.
// @license     Unlicense
// @icon        https://sukebei.nyaa.si/static/favicon.png
// ==/UserScript==

(function () {
	"use strict";

	const stylesheet = `
	.overlay-video-container {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.9);
		display: flex;
		justify-content: center;
		align-items: center;
		z-index: 9999;
		overflow: hidden;
	}

	.video-container {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 100%;
		height: 100%;
		max-width: 90%;
		max-height: 90%;
		position: relative;
	}

	.overlay-video {
		width: 100%;
		height: auto;
		max-width: 100%;
		max-height: 100%;
		border: 1px solid #262626;
		background: #000;
	}

    .close-button {
        position: absolute;
        padding: 6px 14px;
        top: -40px;
        right: 0;
        background: none;
        color: white;
        cursor: pointer;
        border: 1px solid #333;
    }
        
    .close-button:hover {
        background: #333;
    }

    .settings-container {
        position: fixed;
        right: 1em;
        top: 2em;
        max-width: 400px;
        width: 100%;
        padding: 10px 20px;
        border: 1px solid #ddd;
        border-radius: 8px;
        background-color: #fff;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        z-index: 9999;
    }

    .settings-container .settings-item:not(:last-of-type) {
        margin-bottom: 20px;
    }

    .settings-container label {
        display: block;
        margin-bottom: 8px;
        font-weight: 600;
        color: #333;
    }

    .settings-container input[type="text"],
    .settings-container input[type="range"] {
        width: 100%;
        padding: 8px;
        border: 1px solid #ccc;
        border-radius: 4px;
        box-sizing: border-box;
    }

    .settings-container input[type="checkbox"] {
        margin-right: 10px;
    }

    .settings-container .button {
        display: inline-block;
        padding: 10px 15px;
        color: #fff;
        background-color: #007bff;
        border: none;
        border-radius: 4px;
        cursor: pointer;
        text-align: center;
        transition: background-color 0.3s ease;
    }

    .settings-container .button:hover {
        background-color: #0056b3;
    }

    .settings-container range-label {
        margin-bottom: 5px;
        color: #333;
    }
        
    .settings-container #quality {
        color: black;
    }
        
    .settings-container option, .settings-container input {
        color: black;
    }

    .settings-container #resetApiData {
        width: 100%;
        margin: 4px 0;
    }

    .toast {
        font-weight: bolder;
        position: fixed;
        top: 20px;
        left: 50%;
        transform: translateX(-50%);
        padding: 10px 20px;
        background-color: #913030;
        color: #fff;
        border-radius: 4px;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.5s, visibility 0.5s;
        z-index: 1000;
        border: 2px solid #FFF;
    }

    .toast.show {
        opacity: 1;
        visibility: visible;
    }`;

	GM_addStyle(stylesheet);

	const defaultConfig = {
		darkTheme: false,
		playerAutoplay: true,
		playerVolume: 0.1,
		playerLoop: true,
		playerClickAnywhereToClose: false,
		previewQuality: 2,
		lastUpdated: 0,
		devmode: false,
		data: {
			studios: {
				general: ["PFES", "AVOP"],
				sOne: ["SSIS", "SOE", "SNIS", "SSNI", "OFJE", "SONE", "ONSD"],
				faleno: ["FSDSS", "FCDSS", "FTBLD", "FTKD", "FTHTD", "MGOLD"],
			},
			prefixMap: {
				general: ["general"],
				nmixx: ["sOne"],
				plusOne: ["faleno"],
			},
			prefixMapData: {
				plusOne: "1",
			},
		},
		url: "https://api.jsonsilo.com/public/445432dd-f613-4528-a45d-71a1efacee95",
	};

	const userConfig = GM_getValue("config", defaultConfig);
	console.log("[US:DEBUG] : ", `CONFIG: `, userConfig);

	async function fetchDataFromAPI() {
		try {
			const response = await fetch(userConfig.url);
			if (!response.ok) {
				throw new Error(`HTTP error! status: ${response.status}`);
			}
			const data = await response.json();
			return data;
		} catch (error) {
			console.log("[US:DEBUG] : ", " Error fetching data:", error);
		}
	}

	async function main() {
		GM_registerMenuCommand("Config", openSettings);

		let studios, prefixMap, prefixMapData;
		const lastFetchTime = parseInt(userConfig.lastUpdated) || 0;
		const oneWeekInMilliseconds = 7 * 24 * 60 * 60 * 1000;
		const now = new Date().getTime();
		const isDataOld = now - lastFetchTime >= oneWeekInMilliseconds;

		if (userConfig.darkTheme && localStorage.getItem("theme") !== "dark") {
			localStorage.setItem("theme", "dark");
			location.reload();
		}

		if (isDataOld) {
			console.log(
				"[US:DEBUG] : ",
				`\n  -- TIMESTAMP:\t\t${new Date().getTime()} \n  -- LAST UPDATED:\t${lastFetchTime} \n  -- EXPIRED:\t\t${isDataOld} \n  -- Data is not available or old. Fetching new data.`
			);
			const response = await fetchDataFromAPI();

			if (response) {
				userConfig.lastUpdated = now;
				userConfig.data = response;
				studios = response.studios;
				prefixMap = response.prefixMap;
				prefixMapData = response.prefixMapData;
				GM_setValue("config", userConfig);
			} else {
				console.log("[US:DEBUG] : ", "No Response from API. Will try again later.");
				userConfig.lastUpdated = new Date().getTime() - 6 * 24 * 60 * 60 * 1000;
				studios = userConfig.data.studios;
				prefixMap = userConfig.data.prefixMap;
				prefixMapData = userConfig.data.prefixMapData;
				GM_setValue("config", userConfig);
			}
		} else {
			console.log(
				"[US:DEBUG] : ",
				`\n  -- TIMESTAMP:\t\t${new Date().getTime()} \n  -- LAST UPDATED:\t${lastFetchTime} \n  -- EXPIRED:\t\t${isDataOld} \n  -- Data is still fresh. Skipping API call.`
			);
			studios = userConfig.data.studios;
			prefixMap = userConfig.data.prefixMap;
			prefixMapData = userConfig.data.prefixMapData;
		}

		function mergeStudiosByPrefix(studios, prefixes) {
			const result = {};
			Object.keys(prefixes).forEach((prefix) => {
				result[prefix] = [];
				prefixes[prefix].forEach((key) => {
					if (studios[key]) {
						result[prefix] = [...result[prefix], ...studios[key]];
					}
				});
			});
			return result;
		}

		function valuesToRegex(object) {
			return Object.fromEntries(
				Object.entries(object).map(([object, values]) => [
					object,
					new RegExp(`\\b(?:${values.join("|")})(?:-)?\\d{3,5}(?:.)?\\b`, "i"),
				])
			);
		}

		const studioMergedForPrefix = mergeStudiosByPrefix(studios, prefixMap);
		const regexMap = valuesToRegex(studioMergedForPrefix);

		if (window.location.pathname.startsWith("/view/")) {
			console.log("[US:DEBUG] : ", "Torrent Detail Page");
			const titlePanel = document.getElementsByClassName("panel-title");

			if (
				titlePanel[0].parentElement.nextElementSibling.classList.contains("panel-body") &&
				titlePanel[0].parentElement.nextElementSibling.children[0].classList.contains("row")
			) {
				const code = detectCode(titlePanel[0].innerText, regexMap);
				if (code && code.match) {
					console.log("[US:DEBUG] : ", "Valid studios detected: ", code);
					let codeId = code.match.toLowerCase();
					const buttonDom = document.getElementsByClassName("panel-footer clearfix")[0];
					const newButton = document.createElement("a");
					newButton.setAttribute("href", "?preview=" + codeId);
					newButton.setAttribute("title", "Preview");
					newButton.innerHTML = `<i class="fa fa-video-camera"></i> Preview`;
					const buttonDivider = document.createTextNode(" ・");
					buttonDom.insertBefore(newButton, buttonDom.firstChild);
					buttonDom.insertBefore(buttonDivider, buttonDom.firstChild.nextSibling);
					newButton.addEventListener("click", function (event) {
						event.preventDefault();
						openPreview(codeId, code.cdn);
					});
				}
			} else {
				return;
			}
		} else {
			console.log("[US:DEBUG] : ", "Non Torrent Detail Page");
			const rows = document.querySelectorAll("tr");
			rows.forEach((row, index) => {
				if (!row || index === 0) return;

				const categoryCell = row.querySelector("td:nth-child(1) a")["title"];
				const titleCell = row.querySelector("td:nth-child(2)");
				const linkCell = row.querySelector("td:nth-child(3)");
				if (categoryCell === "Real Life - Videos" || categoryCell === "Art - Pictures") {
					const code = detectCode(titleCell.innerText, regexMap);
					if (code && code.match) {
						console.log("[US:DEBUG] : ", "Valid studios detected: ", code);
						let codeId = code.match.toLowerCase();
						const newButton = document.createElement("a");
						newButton.setAttribute("href", "?preview=" + codeId);
						newButton.setAttribute("title", "Preview");
						newButton.innerHTML = `<i class="fa fa-video-camera"></i>`;
						linkCell.appendChild(newButton);
						newButton.addEventListener("click", function (event) {
							event.preventDefault();
							openPreview(codeId, code.cdn);
						});
					} else {
						return;
					}
				}
			});
		}

		function detectCode(title, patterns) {
			for (const [key, pattern] of Object.entries(patterns)) {
				const match = title.match(pattern);
				if (match) {
					return {
						match: match[0],
						cdn: key,
					};
				}
			}
			return {match: null, cdn: null};
		}

		function openPreview(code, cdn) {
			code = cdn === "nmixx" ? code.replace(/-?(?<!^)(\d+)/, "00$1") : code;
			code = code.replace(/\s+/g, "").replace(/[^\w]/g, "");
			fetchData(code, cdn, (response) => {
				if (response.length <= 0) {
					showToast();
					return;
				}
				const video = document.createElement("video");
				video.src = qualitySelector(userConfig.previewQuality, qualitySorter(response));
				//DEV
				if (userConfig.devmode) {
					if (!prefixMapData[cdn]) prefixMapData[cdn] = "";
					const finalCode = prefixMapData[cdn] + code;
					console.log(`[US:DEBUG] : ${code}, ${finalCode}, ${cdn}, ${video.src}`);
					if (!video.src.includes(finalCode)) {
						alert(`DEVMODE: CODE PREFIX MISMATCH : ${code}, ${finalCode}, ${cdn}, ${video.src}`);
					}
				}
				//DEV END
				video.autoplay = userConfig.playerAutoplay;
				video.volume = userConfig.playerVolume;
				video.loop = userConfig.playerLoop;
				video.controls = true;
				video.classList.add("overlay-video");
				video.addEventListener("error", function (event) {
					console.error("Video failed to load:");
					videoContainer.innerHTML = `<p style="color: white; margin: 0; text-align: center;">Preview Not Available.<br>This window will auto close in 3 seconds</p>`;
					setTimeout(() => {
						videoContainerOverlay.remove();
					}, 3000);
				});

				const closeButton = document.createElement("button");
				closeButton.textContent = "Close";
				closeButton.classList.add("close-button");
				closeButton.addEventListener("click", () => {
					videoContainerOverlay.remove();
				});

				const videoContainerOverlay = document.createElement("div");
				const videoContainer = document.createElement("div");
				videoContainerOverlay.classList.add("overlay-video-container");
				videoContainerOverlay.classList.add(`${code}`);
				videoContainer.classList.add("video-container");
				videoContainer.appendChild(video);
				videoContainer.appendChild(closeButton);
				videoContainerOverlay.appendChild(videoContainer);
				document.body.appendChild(videoContainerOverlay);
				if (userConfig.playerClickAnywhereToClose) {
					videoContainerOverlay.addEventListener("click", (event) => {
						if (event.target !== video) {
							videoContainerOverlay.remove();
						}
					});
				}
			});
		}

		function fetchData(id, cdn, callback) {
			let dvdId = id;
			const prefix = prefixMapData[cdn];
			if (prefix) {
				dvdId = prefix + dvdId;
			}

			GM_xmlhttpRequest({
				method: "GET",
				url: "https://www.dmm.co.jp/service/digitalapi/-/html5_player/=/cid=" + dvdId.toLowerCase(),
				onload: function (response) {
					if (response.status === 200) {
						let scriptData, scriptObj;
						let scripts = response.responseXML.scripts;
						for (let i = 0; i < scripts.length; i++) {
							const script = scripts[i];
							if (script.textContent.includes("dmm")) {
								scriptData = script.textContent;
							}
						}
						const regex = /const args = ({.*?});/s;
						const match = scriptData.match(regex);

						if (match) {
							const jsonString = match[1];
							try {
								scriptObj = JSON.parse(jsonString.replace(/\\/g, ""));
							} catch (error) {
								console.error("Error parsing JSON:", error);
							}
							//callback(scriptObj.src);
							callback(scriptObj.bitrates);
						}
					} else {
						console.error("Request failed with status:", response.status);
					}
				},
			});
		}
		function qualitySorter(items) {
			const qualityTiers = {
				5: {min: 1440, max: 2160},
				4: {min: 1080, max: 1439},
				3: {min: 720, max: 1079},
				2: {min: 480, max: 719},
				1: {min: 0, max: 479},
			};

			const extractResolution = (bitrate) => {
				const match = bitrate.match(/\((\d+)p\)/);
				return match ? parseInt(match[1], 10) : null;
			};
			const getQualityTier = (resolution) => {
				for (const [tier, {min, max}] of Object.entries(qualityTiers)) {
					if (resolution >= min && resolution <= max) {
						return tier;
					}
				}
				return "Unknown";
			};

			const tierMap = new Map();

			items.forEach((item) => {
				const resolution = extractResolution(item.bitrate);
				if (resolution) {
					const qualityTier = getQualityTier(resolution);
					if (!tierMap.has(qualityTier)) {
						tierMap.set(qualityTier, {
							quality: qualityTier,
							bitrate: item.bitrate,
							src: item.src,
						});
					}
				}
			});

			return Array.from(tierMap.values());
		}

		function qualitySelector(desiredQuality, array) {
			const sortedArray = array.slice().sort((a, b) => b.quality - a.quality);

			for (const item of sortedArray) {
				if (item.quality <= desiredQuality) {
					return item.src;
				}
			}

			return null;
		}
		function showToast() {
			const toast = document.createElement("div");
			toast.className = "toast";
			toast.textContent = "No Preview Available!";
			document.body.appendChild(toast);

			setTimeout(() => {
				toast.classList.add("show");
			}, 0);

			setTimeout(() => {
				toast.classList.remove("show");
				setTimeout(() => {
					document.body.removeChild(toast);
				}, 500);
			}, 2000);
		}

		const footerLink = document.querySelector("footer p");
		const settingButton = document.createElement("a");
		const buttonDivider = document.createTextNode("・");
		settingButton.setAttribute("href", "?setting");
		settingButton.setAttribute("title", "Settings");
		settingButton.innerHTML = `<i class="fa fa-cogs"></i> Settings`;
		footerLink.insertBefore(settingButton, footerLink.firstChild);
		footerLink.insertBefore(buttonDivider, footerLink.firstChild.nextSibling);
		settingButton.addEventListener("click", function (event) {
			event.preventDefault();
			openSettings();
		});

		const menubar = document.querySelector(".navbar-right .dropdown-menu");
		const newLi = document.createElement("li");
		const newLink = document.createElement("a");
		newLink.setAttribute("href", "?setting");
		newLink.setAttribute("title", "Settings");
		newLink.innerHTML = `<i class="fa fa-cogs"></i> Settings`;
		newLi.appendChild(newLink);
		menubar.appendChild(newLi);
		newLink.addEventListener("click", function (event) {
			event.preventDefault();
			openSettings();
		});

		function openSettings() {
			const isExist = document.querySelector(".settings-container");
			if (isExist) return;

			const container = document.createElement("div");
			container.classList.add("settings-container");
			container.setAttribute("aria-label", "Settings");

			const parsePlayerAutoplay = userConfig.playerAutoplay ? "checked" : "";
			const parsePlayerLoop = userConfig.playerLoop ? "checked" : "";
			const parsePlayerClickAnywhereToClose = userConfig.playerClickAnywhereToClose ? "checked" : "";
			const parseDarkTheme = userConfig.darkTheme ? "checked" : "";
			const devmode = userConfig.devmode ? "checked" : "";

			container.innerHTML = `
                <div class="settings-item">
                    <!--
                        <label for="video-width">Video Player Width (px) <i>[Default: 320]</i></label>
                        <input type="text" id="video-width" name="video-width" placeholder="Enter width in px" value="${userConfig.playerWidth}">
                    </div>
                    -->
                    <div class="settings-item">
                        <label for="volume-slider" class="range-label">Volume:</label>
                        <input type="range" id="volume-slider" name="volume-slider" min="0" max="1" value="${userConfig.playerVolume}" step="0.01">
                    </div>
                    <div class="settings-item">
                    <label for="quality">Video Quality (if available):</label>
                    <select name="qualities" id="quality">
                        <option value="5">QHD (2K/1440p)</option>
                        <option value="4">FHD (1080p)</option>
                        <option value="3">HD (720p)</option>
                        <option value="2">Medium</option>
                        <option value="1">Low</option>
                    </select> 
                    </div>
                    <div class="settings-item">
                        <label>
                            <input type="checkbox" id="autoplay" name="autoplay" ${parsePlayerAutoplay}>
                            Video Autoplay
                        </label>
                    </div>
                    <div class="settings-item">
                        <label>
                            <input type="checkbox" id="loop" name="loop" ${parsePlayerLoop}>
                            Video Loop
                        </label>
                    </div>
                    <div class="settings-item">
                        <label>
                            <input type="checkbox" id="clickanywhere" name="clickanywhere" ${parsePlayerClickAnywhereToClose}>
                            Click Anywhere To Close Player
                        </label>
                    </div>
                    <div class="settings-item">
                        <label disabled>
                            <input type="checkbox" id="darktheme" name="darktheme" ${parseDarkTheme}>
                            Auto Dark Theme
                        </label>
                    </div>
                    <div class="settings-item">
                        <label disabled>
                            <input type="checkbox" id="devmode" name="devmode" ${devmode}>
                            Devmode
                        </label>
                    </div>
                    <div class="settings-item last">
                        <label for="apiUrl">API Url:</label>
                        <input type="text" id="apiUrl" name="apiUrl" value="${userConfig.url}"></input>
                        <button id="resetApiData" class="button" type="button">Force Refresh API Data</button>
                    </div>
                    <div class="settings-item">
                        <button id="saveButton" class="button" type="button">Save Settings</button>
                        <button id="closeButton" class="button" type="button">Close</button>
                    </div>`;

			document.body.appendChild(container);

			const preQuality = document.getElementById("quality");
			if (preQuality) {
				preQuality.value = userConfig.previewQuality || 2;
			}

			let saveButton = document.getElementById("saveButton");
			saveButton.addEventListener("click", saveConfigMenu);

			let apiButton = document.getElementById("resetApiData");
			apiButton.addEventListener("click", () => {
				userConfig.lastUpdated = 0;
				saveConfigMenu();
			});

			let closeButton = document.getElementById("closeButton");
			closeButton.addEventListener("click", () => {
				const toRemove = document.querySelector(".settings-container");
				if (toRemove) {
					toRemove.remove();
				} else {
					console.log("[US:DEBUG] : ", "Bruh.");
				}
			});

			function saveConfigMenu() {
				const preQuality = document.getElementById("quality");
				const newVolume = document.getElementById("volume-slider");
				const autoplay = document.getElementById("autoplay");
				const loop = document.getElementById("loop");
				const darktheme = document.getElementById("darktheme");
				const clickanywhere = document.getElementById("clickanywhere");
				const devmode = document.getElementById("devmode");
				const apiUrl = document.getElementById("apiUrl");
				let finalVolume;

				if (
					newVolume.value !== null &&
					!isNaN(newVolume.value) &&
					newVolume.value >= 0 &&
					newVolume.value <= 1
				) {
					finalVolume = parseFloat(newVolume.value);
				}

				userConfig.darkTheme = darktheme.checked;
				userConfig.playerAutoplay = autoplay.checked;
				userConfig.playerVolume = finalVolume;
				userConfig.playerLoop = loop.checked;
				userConfig.playerClickAnywhereToClose = clickanywhere.checked;
				userConfig.previewQuality = preQuality.value;
				userConfig.devmode = devmode.checked;
				userConfig.url = apiUrl.value;

				GM_setValue("config", userConfig);

				if (userConfig.darkTheme) {
					localStorage.setItem("theme", "dark");
				}

				location.reload();
			}
		}
	}

	main();
})();