W2G Playlist Toggle

Adds a little text button to the bottom of the left sidebar, allowing you to collapse the playlist for a larger video window.

Dovrai installare un'estensione come Tampermonkey, Greasemonkey o Violentmonkey per installare questo script.

You will need to install an extension such as Tampermonkey to install this script.

Dovrai installare un'estensione come Tampermonkey o Violentmonkey per installare questo script.

Dovrai installare un'estensione come Tampermonkey o Userscripts per installare questo script.

Dovrai installare un'estensione come ad esempio Tampermonkey per installare questo script.

Dovrai installare un gestore di script utente per installare questo script.

(Ho già un gestore di script utente, lasciamelo installare!)

Dovrai installare un'estensione come ad esempio Stylus per installare questo stile.

Dovrai installare un'estensione come ad esempio Stylus per installare questo stile.

Dovrai installare un'estensione come ad esempio Stylus per installare questo stile.

Dovrai installare un'estensione per la gestione degli stili utente per installare questo stile.

Dovrai installare un'estensione per la gestione degli stili utente per installare questo stile.

Dovrai installare un'estensione per la gestione degli stili utente per installare questo stile.

(Ho già un gestore di stile utente, lasciamelo installare!)

// ==UserScript==
// @name         W2G Playlist Toggle
// @namespace    http://tampermonkey.net/
// @version      1.3
// @description  Adds a little text button to the bottom of the left sidebar, allowing you to collapse the playlist for a larger video window.
// @author       ClarkyAU
// @match        https://*.w2g.tv/*
// @grant        none
// @license MIT
// @noframes

// ==/UserScript==

(function() {
    'use strict';

    if (window.self !== window.top) return;

    // Configuration
    const SELECTORS = {
        sidebar: '.relative.flex.flex-col.items-center.justify-between.h-full',
        playlist: '.w2g-content-right.w2g-bind-layout',
        iconGroup: 'div, nav'
    };

    const styles = `
        #w2g-custom-toggle {
            cursor: pointer;
            height: 40px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-top: 15px;
            padding: 0 8px;
            border-radius: 6px;
            transition: all 0.2s;
            white-space: nowrap;
            color: #aaa;
            font-family: ui-sans-serif, system-ui, sans-serif;
            font-size: 10px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.05em;
        }
        #w2g-custom-toggle:hover {
            background: rgba(255, 255, 255, 0.1);
            color: #fff;
        }
    `;

    const injectStyles = () => {
        const styleSheet = document.createElement("style");
        styleSheet.innerText = styles;
        document.head.appendChild(styleSheet);
    };

    const handleToggle = (e) => {
        const playlist = document.querySelector(SELECTORS.playlist);
        if (!playlist) return;

        const isHidden = playlist.style.display === 'none';
        playlist.style.display = isHidden ? 'flex' : 'none';
        e.target.innerText = isHidden ? 'Hide Playlist' : 'Show Playlist';

        // Let the player adjust to the new width
        window.dispatchEvent(new Event('resize'));
    };

    const init = () => {
        if (document.getElementById('w2g-custom-toggle')) return;

        const sidebar = document.querySelector(SELECTORS.sidebar);
        const targetGroup = sidebar?.querySelector(SELECTORS.iconGroup);

        if (targetGroup) {
            const btn = document.createElement('div');
            btn.id = 'w2g-custom-toggle';
            btn.innerText = 'Hide Playlist';
            btn.onclick = handleToggle;
            targetGroup.appendChild(btn);
            observer.disconnect();
        }
    };

    // Execution
    injectStyles();
    const observer = new MutationObserver(init);
    observer.observe(document.body, { childList: true, subtree: true });
    init();
})();