// ==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.6
// @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 bgk = GM_getValue('bgk', true);
let bgkColor = GM_getValue('bgkColor', '#0b0b28');
let style = GM_addStyle(`body,.App{background:${bgkColor}}.hidden{visibility:hidden;}`);
// Title
const title = 'Click for toggle';
// Click event
const click = new MouseEvent('click', {
bubbles: true,
cancelable: true,
});
// 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);
}
// Open pick color for background
function bgkColorToggle() {
// document.querySelector('#pick-color').click();
toggle('bgk', !bgk);
}
// 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);
}
// Return element
function el(e) {
return document.querySelector(e);
}
// 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 commandBgk = GM_registerMenuCommand('Change background color: ON', bgkColorToggle, {
title: title,
});
if (!bgk) {
GM_registerMenuCommand(`Change background color: OFF`, bgkColorToggle, {
title: title,
id: commandBgk,
});
}
})();
// 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}`);
// Mutation observer
const observer = new MutationObserver((mutations) => {
mutations.forEach((mutation) => {
if (mutation.type === 'childList' && mutation.target.querySelector('a.videoLink video:not([exist])')) {
el('video').setAttribute('exist', '');
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) {
muteButton.dispatchEvent(click);
}
if (video && qBtn) {
qBtn.closest('.button').dispatchEvent(click);
}
if (video && bgk) {
// Pick color background
let pickColor = GM_addElement(video.closest('.embeddedPlayer').querySelector('.buttons'), 'label', {
id: 'pick-color',
});
pickColor.innerHTML = `<span class="color-icon button"><svg width="28" height="28 viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M8.20348 2.00378C9.46407 2.00378 10.5067 3.10742 10.6786 4.54241L19.1622 13.0259L11.384 20.8041C10.2124 21.9757 8.31291 21.9757 7.14134 20.8041L2.8987 16.5615C1.72713 15.3899 1.72713 13.4904 2.8987 12.3188L5.70348 9.51404V4.96099C5.70348 3.32777 6.82277 2.00378 8.20348 2.00378ZM8.70348 4.96099V6.51404L7.70348 7.51404V4.96099C7.70348 4.63435 7.92734 4.36955 8.20348 4.36955C8.47963 4.36955 8.70348 4.63435 8.70348 4.96099ZM8.70348 10.8754V9.34247L4.31291 13.733C3.92239 14.1236 3.92239 14.7567 4.31291 15.1473L8.55555 19.3899C8.94608 19.7804 9.57924 19.7804 9.96977 19.3899L16.3337 13.0259L10.7035 7.39569V10.8754C10.7035 10.9184 10.7027 10.9612 10.7012 11.0038H8.69168C8.69941 10.9625 8.70348 10.9195 8.70348 10.8754Z" fill="currentColor"/><path d="M16.8586 16.8749C15.687 18.0465 15.687 19.946 16.8586 21.1175C18.0302 22.2891 19.9297 22.2891 21.1013 21.1175C22.2728 19.946 22.2728 18.0465 21.1013 16.8749L18.9799 14.7536L16.8586 16.8749Z" fill="currentColor"/></svg></span><input type="color" style="display:none">`;
// Pick color background input event
pickColor.oninput = (e) => {
let color = e.target.value;
GM_setValue('bgkColor', color);
style = GM_addStyle(`body,.App{background:${color}}`);
};
}
observer.disconnect();
}
});
});
// Installing observer
observer.observe(document.body, {
childList: true,
subtree: true,
});
})();
