☰

Youtube button to delete a video from a playlist

Добавляет кнопку для удаления видео из плейлиста на ютубе

// ==UserScript==
// @name      Youtube button to delete a video from a playlist
// @name:en   Youtube button to delete a video from a playlist
// @namespace    http://tampermonkey.net/
// @version      1.533
// @description:en  Adds a button to directly remove videos from the playlist on YouTube
// @description  Добавляет кнопку для удаления видео из плейлиста на ютубе
// @author       You
// @match        https://www.youtube.com/*
// @grant        none
// @license      MIT
// ==/UserScript==

(function() {
    'use strict';

    console.log('Script started');

    const style = document.createElement('style');
    style.textContent = `
        .remove-button {
            display: flex;
            align-items: center;
            border: none;
            background: transparent;
            color: #909090;
            cursor: pointer;
            margin-top: 5px;
            padding: 0;
            transition: color 0.3s, filter 0.3s, transform 0.3s;
            font-size: 20px; /* Установите размер текста для иконки */
        }

        .remove-button:hover {
            color: #b0b0b0; /* Светлее цвет для эффекта наводки */
            filter: brightness(1.3); /* Сделать кнопку немного светлее */
        }

        .remove-button:active {
            transform: scale(0.82); /* Уменьшение кнопки при нажатии */
        }
    `;
    document.head.append(style);

    function addRemoveButton(video) {
        console.log('Adding remove button');
        if (!video.querySelector('.remove-button')) {
            const button = document.createElement('button');
            button.classList.add('remove-button');

            const trashIcon = document.createElement('span');
            trashIcon.textContent = '🗑️'; // Unicode character for trash can

            button.appendChild(trashIcon);

            button.addEventListener('click', async () => {
                const menuButton = video.querySelector('#button');
                menuButton.click();

                await new Promise(resolve => setTimeout(resolve, 20)); // wait 500ms

                const removeButton = document.querySelector('#items > ytd-menu-service-item-renderer:nth-child(3) > tp-yt-paper-item');
                let removed = false;

                if (removeButton) {
                    removeButton.click();
                    removed = true;
                }

                if (!removed) {
                    alert('It was not possible to delete the video. Please try again.');
                }
            });

            video.querySelector('#meta').appendChild(button);
        }
    }

    function addRemoveButtons() {
        console.log('Adding remove buttons to all videos');
        const videoContainers = document.querySelectorAll('ytd-playlist-video-renderer');
        console.log('Found', videoContainers.length, 'videos');
        videoContainers.forEach(addRemoveButton);
    }

    function init() {
        console.log('Initializing script');
        addRemoveButtons();

        const observer = new MutationObserver(mutations => {
            mutations.forEach(mutation => {
                mutation.addedNodes.forEach(node => {
                    if (node.nodeType === 1 && node.matches('ytd-playlist-video-renderer')) {
                        addRemoveButton(node);
                    }
                });
            });
        });

        observer.observe(document.body, { childList: true, subtree: true });

        window.addEventListener('yt-navigate-finish', addRemoveButtons);
    }

    init();
})();