☰

Redgifs Embed Tweaks

tweaks redgifs embed/iframe video

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

  1. // ==UserScript==
  2. // @name        Redgifs Embed Tweaks
  3. // @namespace   https://greasyfork.org/pt-BR/users/821661
  4. // @match       https://www.redgifs.com/ifr/*
  5. // @grant       GM_registerMenuCommand
  6. // @grant       GM_addElement
  7. // @grant       GM_addStyle
  8. // @grant       GM_setValue
  9. // @grant       GM_getValue
  10. // @version     0.2.5
  11. // @author      hdyzen
  12. // @description tweaks redgifs embed/iframe video
  13. // @license     MIT
  14. // ==/UserScript==
  15.  
  16. (function () {
  17. 	'use strict';
  18. 	// Autoplay state
  19. 	const autoplay = GM_getValue('autoplay', true);
  20. 	// Open state
  21. 	const openLink = GM_getValue('openlink', false);
  22. 	// Autopause state
  23. 	const autoPause = GM_getValue('autoPause', true);
  24. 	// Muted state
  25. 	const muted = GM_getValue('muted', false);
  26. 	// Bloat state
  27. 	const bloat = GM_getValue('bloat', false);
  28. 	// Quality state
  29. 	const quality = GM_getValue('quality', true);
  30. 	// Middle click state
  31. 	const middleClick = GM_getValue('middleClick', true);
  32. 	let midClick = false;
  33. 	// Background color state
  34. 	let bgkColor = GM_getValue('bgkColor', false);
  35. 	let style = GM_addStyle(`body,.App{background:${bgkColor}}`);
  36. 	// Title
  37. 	const title = 'Click for toggle';
  38. 	// Toggle item and reload page
  39. 	function toggle(key, value) {
  40. 		GM_setValue(key, value);
  41. 		location.reload();
  42. 	}
  43. 	// Autoplay toggle
  44. 	function autoplayToggle() {
  45. 		toggle('autoplay', !autoplay);
  46. 	}
  47. 	// Open link when click on video
  48. 	function openLinkToggle() {
  49. 		toggle('openlink', !openLink);
  50. 	}
  51. 	// Pause when video less than 80% visible
  52. 	function pauseVideoToggle() {
  53. 		toggle('autoPause', !autoPause);
  54. 	}
  55. 	// Muted default
  56. 	function mutedToggle() {
  57. 		toggle('muted', !muted);
  58. 	}
  59. 	// Open link when click on video
  60. 	function bloatToggle() {
  61. 		toggle('bloat', !bloat);
  62. 	}
  63. 	// Quality default
  64. 	function qualityToggle() {
  65. 		toggle('quality', !quality);
  66. 	}
  67. 	// Middle click
  68. 	function midClickToggle() {
  69. 		toggle('middleClick', !middleClick);
  70. 	}
  71. 	function openPickColor() {
  72. 		document.querySelector('#pick-color').dispatchEvent(click);
  73. 	}
  74. 	// Prevent opening video link
  75. 	if (!openLink) {
  76. 		document.addEventListener('click', (e) => {
  77. 			if (!e.target.closest('.videoLink')) return;
  78. 			e.preventDefault();
  79. 		});
  80. 	}
  81. 	// Middle click open link
  82. 	if (!middleClick) {
  83. 		document.addEventListener('mousedown', (e) => {
  84. 			if (!e.target.closest('.videoLink')) return;
  85. 			midClick = true;
  86. 		});
  87. 		document.addEventListener('mouseup', (e) => {
  88. 			if (midClick) {
  89. 				const videoLink = e.target.parentElement;
  90. 				videoLink.href = videoLink.href.replace('/watch/', '/ifr/');
  91. 				midClick = false;
  92. 			}
  93. 		});
  94. 	}
  95. 	// Remove bloat
  96. 	if (bloat) GM_addStyle(`.userInfo,.logo,#shareButton{display:none!important}`);
  97. 	// Intersection observer video
  98. 	function observerVideo(target) {
  99. 		const observer = new IntersectionObserver(
  100. 			(entries) => {
  101. 				for (const entry of entries) {
  102. 					if (!entry.isIntersecting && !entry.target.paused) entry.target.pause();
  103. 				}
  104. 			},
  105. 			{
  106. 				threshold: 0.8,
  107. 			},
  108. 		);
  109. 		observer.observe(target);
  110. 	}
  111. 	// Menu commands
  112. 	(function menuCommands() {
  113. 		// Autoplay
  114. 		const commandAutoplay = GM_registerMenuCommand('Autoplay: ON', autoplayToggle, {
  115. 			title: title,
  116. 		});
  117. 		if (!autoplay) {
  118. 			GM_registerMenuCommand('Autoplay: OFF', autoplayToggle, {
  119. 				title: title,
  120. 				id: commandAutoplay,
  121. 			});
  122. 		}
  123. 		// Open link
  124. 		const commandLink = GM_registerMenuCommand('Open link when click: OFF', openLinkToggle, {
  125. 			title: title,
  126. 		});
  127. 		if (openLink) {
  128. 			GM_registerMenuCommand('Open link when click: ON', openLinkToggle, {
  129. 				title: title,
  130. 				id: commandLink,
  131. 			});
  132. 		}
  133. 		// Pause video
  134. 		const commandPause = GM_registerMenuCommand('Autopause: ON', pauseVideoToggle, {
  135. 			title: title,
  136. 		});
  137. 		if (!autoPause) {
  138. 			GM_registerMenuCommand('Autopause: OFF', pauseVideoToggle, {
  139. 				title: title,
  140. 				id: commandPause,
  141. 			});
  142. 		}
  143. 		// Muted
  144. 		const commandMuted = GM_registerMenuCommand('Muted: ON', mutedToggle, {
  145. 			title: title,
  146. 		});
  147. 		if (!muted) {
  148. 			GM_registerMenuCommand('Muted: OFF', mutedToggle, {
  149. 				title: title,
  150. 				id: commandMuted,
  151. 			});
  152. 		}
  153. 		// Bloat
  154. 		const commandBloat = GM_registerMenuCommand('Hide Bloat: OFF', bloatToggle, {
  155. 			title: title,
  156. 		});
  157. 		if (bloat) {
  158. 			GM_registerMenuCommand('Hide Bloat: ON', bloatToggle, {
  159. 				title: title,
  160. 				id: commandBloat,
  161. 			});
  162. 		}
  163. 		// Quality
  164. 		const commandQuality = GM_registerMenuCommand('Default Quality: HD', qualityToggle, {
  165. 			title: title,
  166. 		});
  167. 		if (!quality) {
  168. 			GM_registerMenuCommand('Default Quality: SD', qualityToggle, {
  169. 				title: title,
  170. 				id: commandQuality,
  171. 			});
  172. 		}
  173. 		// Middle click
  174. 		const commandMidClick = GM_registerMenuCommand('Middle click: open watch page', midClickToggle, {
  175. 			title: title,
  176. 		});
  177. 		if (!middleClick) {
  178. 			GM_registerMenuCommand('Middle click: open ifr page', midClickToggle, {
  179. 				title: title,
  180. 				id: commandMidClick,
  181. 			});
  182. 		}
  183. 		// Background color
  184. 		const commandBgkColor = GM_registerMenuCommand('Background color: Default', openPickColor, {
  185. 			title: title,
  186. 		});
  187. 		if (bgkColor !== false) {
  188. 			GM_registerMenuCommand(`Background color: ${bgkColor}`, openPickColor, {
  189. 				title: title,
  190. 				id: commandBgkColor,
  191. 			});
  192. 		}
  193. 	})();
  194. 	// Pick color background
  195. 	let pickColor = GM_addElement(document.body, 'input', {
  196. 		type: 'color',
  197. 		id: 'pick-color',
  198. 		style: 'position:absolute;top:0;left:0;visibility:hidden',
  199. 	});
  200. 	// Pick color background input event
  201. 	pickColor.oninput = (e) => {
  202. 		let color = e.target.value;
  203. 		GM_setValue('bgkColor', color);
  204. 		style = GM_addStyle(`body,.App{background:${color}}`);
  205. 	};
  206. 	// Return element
  207. 	function el(e) {
  208. 		return document.querySelector(e);
  209. 	}
  210. 	// Click event
  211. 	const click = new MouseEvent('click', {
  212. 		bubbles: true,
  213. 		cancelable: true,
  214. 	});
  215. 	// Mutation observer
  216. 	const observer = new MutationObserver((mutations) => {
  217. 		mutations.forEach((mutation) => {
  218. 			if (mutation.type === 'childList' && mutation.target.querySelector('video')) {
  219. 				const video = el('video');
  220. 				const qBtn = quality ? el('[d^="M1 12C1"]') : el('[d^="M1.16712"]');
  221. 				const muteButton = el('.soundOff');
  222. 				if (video && !autoplay) {
  223. 					video.removeAttribute('autoplay');
  224. 				}
  225. 				if (video && autoPause) {
  226. 					observerVideo(video);
  227. 				}
  228. 				if (video && !muted) {
  229. 					muteButton.dispatchEvent(click);
  230. 				}
  231. 				if (video && qBtn) {
  232. 					qBtn.closest('.button').dispatchEvent(click);
  233. 				}
  234. 				observer.disconnect();
  235. 			}
  236. 		});
  237. 	});
  238. 	// Installing observer
  239. 	observer.observe(document.body, {
  240. 		childList: true,
  241. 		subtree: true,
  242. 	});
  243. })();