Redgifs Embed Tweaks

tweaks redgifs embed/iframe video

Verzia zo dňa 27.11.2023. Pozri najnovšiu verziu.

Na nainštalovanie skriptu si budete musieť nainštalovať rozšírenie, ako napríklad Tampermonkey, Greasemonkey alebo Violentmonkey.

Na inštaláciu tohto skriptu je potrebné nainštalovať rozšírenie, ako napríklad Tampermonkey.

Na nainštalovanie skriptu si budete musieť nainštalovať rozšírenie, ako napríklad Tampermonkey, % alebo Violentmonkey.

Na nainštalovanie skriptu si budete musieť nainštalovať rozšírenie, ako napríklad Tampermonkey alebo Userscripts.

Na inštaláciu tohto skriptu je potrebné nainštalovať rozšírenie, ako napríklad Tampermonkey.

Na inštaláciu tohto skriptu je potrebné nainštalovať rozšírenie správcu používateľských skriptov.

(Už mám správcu používateľských skriptov, nechajte ma ho nainštalovať!)

Na inštaláciu tohto štýlu je potrebné nainštalovať rozšírenie, ako napríklad Stylus.

Na inštaláciu tohto štýlu je potrebné nainštalovať rozšírenie, ako napríklad Stylus.

Na inštaláciu tohto štýlu je potrebné nainštalovať rozšírenie, ako napríklad Stylus.

Na inštaláciu tohto štýlu je potrebné nainštalovať rozšírenie správcu používateľských štýlov.

Na inštaláciu tohto štýlu je potrebné nainštalovať rozšírenie správcu používateľských štýlov.

Na inštaláciu tohto štýlu je potrebné nainštalovať rozšírenie správcu používateľských štýlov.

(Už mám správcu používateľských štýlov, nechajte ma ho nainštalovať!)

// ==UserScript==
// @name        Redgifs Embed Tweaks
// @namespace   https://greasyfork.org/pt-BR/users/821661
// @match       https://www.redgifs.com/ifr/*
// @grant       GM_registerMenuCommand
// @grant       GM_addElement
// @grant       GM_addStyle
// @grant       GM_setValue
// @grant       GM_getValue
// @version     0.2.5
// @author      hdyzen
// @description tweaks redgifs embed/iframe video
// @license     MIT
// ==/UserScript==

(function () {
	'use strict';
	// Autoplay state
	const autoplay = GM_getValue('autoplay', true);
	// Open state
	const openLink = GM_getValue('openlink', false);
	// Autopause state
	const autoPause = GM_getValue('autoPause', true);
	// Muted state
	const muted = GM_getValue('muted', false);
	// Bloat state
	const bloat = GM_getValue('bloat', false);
	// Quality state
	const quality = GM_getValue('quality', true);
	// Middle click state
	const middleClick = GM_getValue('middleClick', true);
	let midClick = false;
	// Background color state
	let bgkColor = GM_getValue('bgkColor', false);
	let style = GM_addStyle(`body,.App{background:${bgkColor}}`);
	// Title
	const title = 'Click for toggle';
	// Toggle item and reload page
	function toggle(key, value) {
		GM_setValue(key, value);
		location.reload();
	}
	// Autoplay toggle
	function autoplayToggle() {
		toggle('autoplay', !autoplay);
	}
	// Open link when click on video
	function openLinkToggle() {
		toggle('openlink', !openLink);
	}
	// Pause when video less than 80% visible
	function pauseVideoToggle() {
		toggle('autoPause', !autoPause);
	}
	// Muted default
	function mutedToggle() {
		toggle('muted', !muted);
	}
	// Open link when click on video
	function bloatToggle() {
		toggle('bloat', !bloat);
	}
	// Quality default
	function qualityToggle() {
		toggle('quality', !quality);
	}
	// Middle click
	function midClickToggle() {
		toggle('middleClick', !middleClick);
	}
	function openPickColor() {
		document.querySelector('#pick-color').dispatchEvent(click);
	}
	// Prevent opening video link
	if (!openLink) {
		document.addEventListener('click', (e) => {
			if (!e.target.closest('.videoLink')) return;
			e.preventDefault();
		});
	}
	// Middle click open link
	if (!middleClick) {
		document.addEventListener('mousedown', (e) => {
			if (!e.target.closest('.videoLink')) return;
			midClick = true;
		});
		document.addEventListener('mouseup', (e) => {
			if (midClick) {
				const videoLink = e.target.parentElement;
				videoLink.href = videoLink.href.replace('/watch/', '/ifr/');
				midClick = false;
			}
		});
	}
	// Remove bloat
	if (bloat) GM_addStyle(`.userInfo,.logo,#shareButton{display:none!important}`);
	// Intersection observer video
	function observerVideo(target) {
		const observer = new IntersectionObserver(
			(entries) => {
				for (const entry of entries) {
					if (!entry.isIntersecting && !entry.target.paused) entry.target.pause();
				}
			},
			{
				threshold: 0.8,
			},
		);
		observer.observe(target);
	}
	// Menu commands
	(function menuCommands() {
		// Autoplay
		const commandAutoplay = GM_registerMenuCommand('Autoplay: ON', autoplayToggle, {
			title: title,
		});
		if (!autoplay) {
			GM_registerMenuCommand('Autoplay: OFF', autoplayToggle, {
				title: title,
				id: commandAutoplay,
			});
		}
		// Open link
		const commandLink = GM_registerMenuCommand('Open link when click: OFF', openLinkToggle, {
			title: title,
		});
		if (openLink) {
			GM_registerMenuCommand('Open link when click: ON', openLinkToggle, {
				title: title,
				id: commandLink,
			});
		}
		// Pause video
		const commandPause = GM_registerMenuCommand('Autopause: ON', pauseVideoToggle, {
			title: title,
		});
		if (!autoPause) {
			GM_registerMenuCommand('Autopause: OFF', pauseVideoToggle, {
				title: title,
				id: commandPause,
			});
		}
		// Muted
		const commandMuted = GM_registerMenuCommand('Muted: ON', mutedToggle, {
			title: title,
		});
		if (!muted) {
			GM_registerMenuCommand('Muted: OFF', mutedToggle, {
				title: title,
				id: commandMuted,
			});
		}
		// Bloat
		const commandBloat = GM_registerMenuCommand('Hide Bloat: OFF', bloatToggle, {
			title: title,
		});
		if (bloat) {
			GM_registerMenuCommand('Hide Bloat: ON', bloatToggle, {
				title: title,
				id: commandBloat,
			});
		}
		// Quality
		const commandQuality = GM_registerMenuCommand('Default Quality: HD', qualityToggle, {
			title: title,
		});
		if (!quality) {
			GM_registerMenuCommand('Default Quality: SD', qualityToggle, {
				title: title,
				id: commandQuality,
			});
		}
		// Middle click
		const commandMidClick = GM_registerMenuCommand('Middle click: open watch page', midClickToggle, {
			title: title,
		});
		if (!middleClick) {
			GM_registerMenuCommand('Middle click: open ifr page', midClickToggle, {
				title: title,
				id: commandMidClick,
			});
		}
		// Background color
		const commandBgkColor = GM_registerMenuCommand('Background color: Default', openPickColor, {
			title: title,
		});
		if (bgkColor !== false) {
			GM_registerMenuCommand(`Background color: ${bgkColor}`, openPickColor, {
				title: title,
				id: commandBgkColor,
			});
		}
	})();
	// Pick color background
	let pickColor = GM_addElement(document.body, 'input', {
		type: 'color',
		id: 'pick-color',
		style: 'position:absolute;top:0;left:0;visibility:hidden',
	});
	// Pick color background input event
	pickColor.oninput = (e) => {
		let color = e.target.value;
		GM_setValue('bgkColor', color);
		style = GM_addStyle(`body,.App{background:${color}}`);
	};
	// Return element
	function el(e) {
		return document.querySelector(e);
	}
	// Click event
	const click = new MouseEvent('click', {
		bubbles: true,
		cancelable: true,
	});
	// Mutation observer
	const observer = new MutationObserver((mutations) => {
		mutations.forEach((mutation) => {
			if (mutation.type === 'childList' && mutation.target.querySelector('video')) {
				const video = el('video');
				const qBtn = quality ? el('[d^="M1 12C1"]') : el('[d^="M1.16712"]');
				const muteButton = el('.soundOff');
				if (video && !autoplay) {
					video.removeAttribute('autoplay');
				}
				if (video && autoPause) {
					observerVideo(video);
				}
				if (video && !muted) {
					muteButton.dispatchEvent(click);
				}
				if (video && qBtn) {
					qBtn.closest('.button').dispatchEvent(click);
				}
				observer.disconnect();
			}
		});
	});
	// Installing observer
	observer.observe(document.body, {
		childList: true,
		subtree: true,
	});
})();