Open RedGifs on phtn.app

Open RedGifs on phtn.app inside a iframe

// ==UserScript==
// @name            Open RedGifs on phtn.app
// @namespace       https://greasyfork.org/pt-BR/users/821661
// @match           https://phtn.app/*
// @grant           GM_addElement
// @grant           GM_addStyle
// @version         1.2
// @author          hdyzen
// @description     Open RedGifs on phtn.app inside a iframe
// @license         MIT
// ==/UserScript==
'use strict';

// Container with iframe
const container = GM_addElement(document.body, 'div', {
    'id': 'redgifs-container',
});

// Spinner
const loading = GM_addElement(container, 'div', {
    'class': 'spin',
});

// IFrame
const iframe = GM_addElement(container, 'iframe', {
    'data-redgifs': '',
});

// Sleep
const sleep = ms => new Promise(r => setTimeout(r, ms));

// Onclick: hide container
container.onclick = e => {
    iframe.style.opacity = '0';
    iframe.style.scale = '0';
    sleep(200).then(() => {
        iframe.src = '';
        iframe.style.opacity = '1';
        iframe.style.scale = '1';
    });
};

// Onclick: make container visible, set iframe src
document.addEventListener('click', e => {
    if (!e.target.closest('.p-4.dark\\:bg-zinc-950:has(a[href*="redgifs.com/watch/"])')) return;
    iframe.src = e.target.querySelector('a[href*="redgifs.com/watch/"]').href.replace('/watch/', '/ifr/');
});

// Styles
GM_addStyle(`
#redgifs-container {
    position: fixed;
    inset: 0;
    z-index: 999;
    display: none;
    justify-content: center;
    align-items: center;
    background-color: rgba(0, 0, 0, 0.15);
    transition: .2s ease;
    color-scheme: light;
    &:has([data-redgifs][src*="redgifs.com/ifr/"]) {
        display: flex;
    }
    & [data-redgifs] {
        height: 95%;
        width: 50%;
        border-radius: 10px;
        z-index: 0;
        transition: .3s ease;
    }
}
.spin {
    position: fixed;
    &::before {
        animation: 1.5s linear infinite spinner;
        animation-play-state: inherit;
        border: solid 1px #0000;
        border-bottom-color: #d9d9d9;
        border-radius: 50%;
        content: "";
        height: 40px;
        width: 40px;
        position: absolute;
        top: 10%;
        left: 10%;
        transform: translate3d(-50%, -50%, 0);
        will-change: transform;
    }
    &:has(+ iframe[style*="opacity: 0"]) {
        display: none;
    }
}
a.max-w-full[href*="redgifs.com/watch/"] {
    width: max-content;
    + a {
        width: max-content;
    }
}
@keyframes spinner {
    0% {
      transform: translate3d(-50%, -50%, 0) rotate(0deg);
    }
    100% {
      transform: translate3d(-50%, -50%, 0) rotate(360deg);
    }
}
`);