Wykop - filmy inline zamiast overlaya

// ==UserScript==
// @name         Wykop - filmy inline zamiast overlaya
// @namespace    https://wykop.pl/
// @version      1.4
// @description  Odtwarza embedy wewnątrz posta (na pełną szerokość) zamiast w overlayu, z przyciskiem zamykania
// @match        https://wykop.pl/*
// @run-at       document-idle
// @grant        GM_addStyle
// ==/UserScript==

(function () {
    'use strict';

    GM_addStyle(`
        section.embed-preview { display: none !important; }
        .wk-hidden-multimedia { display: none !important; }
        .media:has(.wk-inline-embed) {
            width: 100% !important;
            max-width: none !important;
            overflow: visible !important;
        }
        .wk-inline-embed {
            display: block;
            margin: 8px 0;
            max-width: none;
        }
        .wk-inline-bar {
            display: flex;
            justify-content: flex-end;
            margin-bottom: 4px;
        }
        .wk-inline-close {
            cursor: pointer;
            font-size: 12px;
            line-height: 1;
            padding: 4px 10px;
            border-radius: 4px;
            border: 1px solid rgba(128, 128, 128, 0.5);
            background: rgba(128, 128, 128, 0.15);
            color: inherit;
        }
        .wk-inline-close:hover {
            background: rgba(220, 50, 50, 0.85);
            color: #fff;
            border-color: transparent;
        }
        .wk-inline-video {
            position: relative;
            background: #000;
            width: 100%;
        }
        .wk-inline-video iframe {
            position: absolute;
            top: 0; left: 0;
            width: 100%;
            height: 100%;
            border: 0;
        }
    `);

    // Szerokość użytkowa posta (blok treści minus paddingi)
    function getPostWidth(wrapper) {
        const item = wrapper.closest('section.item');
        if (item) {
            const el = item.querySelector(':scope > .content') || item;
            const cs = getComputedStyle(el);
            const w = el.getBoundingClientRect().width
                - (parseFloat(cs.paddingLeft) || 0)
                - (parseFloat(cs.paddingRight) || 0);
            if (w > 200) return w;
        }
        const host = wrapper.parentElement;
        const hw = host ? host.getBoundingClientRect().width : 0;
        return hw > 200 ? hw : 480;
    }

    function sizeWrapper(wrapper) {
        const w = Math.floor(getPostWidth(wrapper));
        wrapper.style.setProperty('width', w + 'px', 'important');
        const video = wrapper.querySelector('.wk-inline-video');
        if (video) video.style.setProperty('height', Math.round(w * 9 / 16) + 'px', 'important');
    }

    window.addEventListener('resize', () => {
        document.querySelectorAll('.wk-inline-embed').forEach(sizeWrapper);
    });

    function closeInline(wrapper, multimedia) {
        const frame = wrapper.querySelector('iframe');
        if (frame) frame.src = 'about:blank'; // zatrzymaj odtwarzanie
        wrapper.remove();
        if (multimedia) multimedia.classList.remove('wk-hidden-multimedia');
    }

    let lastEmbed = null;
    let lastTimer = null;

    document.addEventListener('click', (e) => {
        const embed = e.target.closest('.multimedia .embed');
        if (!embed) return;
        lastEmbed = embed;
        clearTimeout(lastTimer);
        lastTimer = setTimeout(() => { lastEmbed = null; }, 3000);
    }, true);

    function handleOverlay(overlay) {
        const iframe = overlay.querySelector('iframe');
        if (!iframe || !lastEmbed) return;

        const src = iframe.getAttribute('src');
        const multimedia = lastEmbed.closest('.multimedia');
        lastEmbed = null;
        clearTimeout(lastTimer);
        if (!multimedia || !multimedia.parentElement) return;

        const closeBtn = overlay.querySelector('header button');
        if (closeBtn) closeBtn.click();

        const prev = multimedia.parentElement.querySelector('.wk-inline-embed');
        if (prev) prev.remove();

        const wrapper = document.createElement('div');
        wrapper.className = 'wk-inline-embed';
        wrapper.addEventListener('click', (ev) => ev.stopPropagation());

        const bar = document.createElement('div');
        bar.className = 'wk-inline-bar';
        const btn = document.createElement('button');
        btn.type = 'button';
        btn.className = 'wk-inline-close';
        btn.textContent = '✕ Zamknij film';
        btn.addEventListener('click', (ev) => {
            ev.preventDefault();
            ev.stopPropagation();
            closeInline(wrapper, multimedia);
        });
        bar.appendChild(btn);

        const video = document.createElement('div');
        video.className = 'wk-inline-video';
        const newFrame = document.createElement('iframe');
        newFrame.src = src;
        newFrame.allowFullscreen = true;
        newFrame.setAttribute('allow', 'autoplay; encrypted-media; fullscreen');
        newFrame.setAttribute('scrolling', 'no');
        video.appendChild(newFrame);

        wrapper.appendChild(bar);
        wrapper.appendChild(video);

        multimedia.classList.add('wk-hidden-multimedia');
        multimedia.insertAdjacentElement('afterend', wrapper);
        sizeWrapper(wrapper);
    }

    new MutationObserver((mutations) => {
        for (const m of mutations) {
            for (const node of m.addedNodes) {
                if (node.nodeType !== 1) continue;
                const overlay = node.matches?.('section.embed-preview')
                    ? node
                    : node.querySelector?.('section.embed-preview');
                if (overlay) handleOverlay(overlay);
            }
        }
    }).observe(document.body, { childList: true, subtree: true });
})();