// ==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.9
// @author hdyzen
// @description tweaks redgifs embed/iframe video
// @license MIT
// ==/UserScript==
'use strict';
const menu = GM_getValue('menu', {
autoplay: { state: true, label: 'Autoplay' },
openlink: { state: false, label: 'Open link when click' },
autoPause: { state: true, label: 'Autopause' },
muted: { state: false, label: 'Muted' },
bloat: { state: true, label: 'Remove bloat' },
quality: { state: true, label: 'Default HD' },
midClick: { state: false, label: 'Middle click open ifr link' },
bgkColorBtn: { state: false, label: 'Background color button' },
directLinkBtn: { state: false, label: 'Direct link button' },
refreshPageBtn: { state: false, label: 'Refresh page button' },
});
let color = GM_getValue('bgkColor', '#0b0b28');
let style = GM_addStyle(`body, .App.nonav{ background: ${color}; }`);
function commandMenu() {
Object.keys(menu).forEach(id => {
const { state, label } = menu[id];
GM_registerMenuCommand(`${label}: ${state ? 'ON' : 'OFF'}`, () => toggleState(state, label, id), { id: id });
});
}
commandMenu();
function toggleState(state, label, id) {
// console.log(`Oi, meu nome é ${label}, eu sou definido como ${state}, e meu id é ${id}`);
menu[id].state = !state;
GM_setValue('menu', menu);
location.reload();
}
const videoActions = {
handleVideoDetection(video) {
video.setAttribute('exist', '');
const { autoplay, openlink, autoPause, muted, bloat, quality, midClick, bgkColorBtn, directLinkBtn, refreshPageBtn } = menu;
const click = new MouseEvent('click', { bubbles: true, cancelable: true });
const buttons = document.querySelector('.buttons');
if (!autoplay.state) this.notPlay(video);
if (!openlink.state) this.notOpenLink(video);
if (autoPause.state) this.autoPause(video);
if (!muted.state) this.mute(click);
if (bloat.state) this.removeBloat();
if (!quality.state) this.setHD(click);
if (midClick.state) this.ifrLink(video);
if (bgkColorBtn.state) this.bgkColor(buttons);
if (directLinkBtn.state) this.directLink(video);
if (refreshPageBtn.state) this.refreshBtn(buttons);
},
notPlay(video) {
video.removeAttribute('autoplay');
video.pause();
},
notOpenLink(video) {
video.parentNode.addEventListener('click', e => e.preventDefault());
},
autoPause(video) {
const observer = new IntersectionObserver(entries => entries.forEach(entry => (!entry.isIntersecting && !entry.target.paused ? entry.target.pause() : null)), { threshold: 0.75 });
observer.observe(video);
},
mute(click) {
document.querySelector('.soundOff').dispatchEvent(click);
},
removeBloat() {
GM_addStyle(`.userInfo, .logo, #shareButton{ display:none!important }`);
},
setHD(click) {
document.querySelector('.gifQuality:has([d^="M1.16712"])').dispatchEvent(click);
},
ifrLink(video) {
const videoLink = video.parentNode;
videoLink.href = videoLink.href.replace('/watch/', '/ifr/');
},
bgkColor(buttonsNode) {
let pickColor = GM_addElement(buttonsNode, 'label', { id: 'pick-color', class: 'button', title: 'Change background color', style: 'display: block;' });
pickColor.innerHTML = `<span class="color-icon"><svg width="26" height="26" viewBox="0 0 24 24" fill="none" style="width: unset;margin: auto;" 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">`;
pickColor.oninput = e => {
let color = e.target.value;
GM_setValue('bgkColor', color);
style = GM_addStyle(`body, .App.nonav{ background: ${color} }`);
};
},
directLink(video) {
let toLink = GM_addElement(document.body, 'a', { class: 'toLink', style: 'position: absolute;right: 1rem;bottom: 1rem;cursor:pointer;s', href: video.src, target: '_blank', rel: 'noreferrer noopener', title: 'Redirect to mp4 link' });
toLink.innerHTML = `<svg width="28px" height="28px" viewBox="0 0 24 24" fill="none" style="filter: drop-shadow(1px 0 5px black);" xmlns="http://www.w3.org/2000/svg"><path d="M14.1625 18.4876L13.4417 19.2084C11.053 21.5971 7.18019 21.5971 4.79151 19.2084C2.40283 16.8198 2.40283 12.9469 4.79151 10.5583L5.51236 9.8374" stroke="#fff" stroke-width="2" stroke-linecap="round"/><path d="M9.8374 14.1625L14.1625 9.8374" stroke="#fff" stroke-width="2" stroke-linecap="round"/><path d="M9.8374 5.51236L10.5583 4.79151C12.9469 2.40283 16.8198 2.40283 19.2084 4.79151M18.4876 14.1625L19.2084 13.4417C20.4324 12.2177 21.0292 10.604 20.9988 9" stroke="#fff" stroke-width="2" stroke-linecap="round"/></svg>`;
},
refreshBtn(buttonsNode) {
let toRefresh = GM_addElement(buttonsNode, 'div', { class: 'toRefresh', title: 'Refresh' });
toRefresh.innerHTML = `<svg width="28px" height="28px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M4.06189 13C4.02104 12.6724 4 12.3387 4 12C4 7.58172 7.58172 4 12 4C14.5006 4 16.7332 5.14727 18.2002 6.94416M19.9381 11C19.979 11.3276 20 11.6613 20 12C20 16.4183 16.4183 20 12 20C9.61061 20 7.46589 18.9525 6 17.2916M9 17H6V17.2916M18.2002 4V6.94416M18.2002 6.94416V6.99993L15.2002 7M6 20V17.2916" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><script xmlns=""/></svg>`;
toRefresh.onclick = () => location.reload();
},
};
const observer = new MutationObserver(mutations => {
mutations.forEach(mutation => {
const video = mutation.target.querySelector('a.videoLink video[src]:not([exist])');
if (video) videoActions.handleVideoDetection(video);
});
});
observer.observe(document.body, {
childList: true,
subtree: true,
});
GM_addStyle(`.button > svg { margin: auto !important; & + span { line-height: 1 !important; margin-top: 5px !important; } }`);
