// ==UserScript==
// @name         视频倍速控制（右下角美化版）
// @namespace    http://tampermonkey.net/
// @version      2.0
// @description  右下角倍速控制面板（1x~3x）
// @match        *://*/*
// @grant        none
// @license      MIT
// @downloadURL https://update.greasyfork.icu/scripts/575653/%E8%A7%86%E9%A2%91%E5%80%8D%E9%80%9F%E6%8E%A7%E5%88%B6%EF%BC%88%E5%8F%B3%E4%B8%8B%E8%A7%92%E7%BE%8E%E5%8C%96%E7%89%88%EF%BC%89.user.js
// @updateURL https://update.greasyfork.icu/scripts/575653/%E8%A7%86%E9%A2%91%E5%80%8D%E9%80%9F%E6%8E%A7%E5%88%B6%EF%BC%88%E5%8F%B3%E4%B8%8B%E8%A7%92%E7%BE%8E%E5%8C%96%E7%89%88%EF%BC%89.meta.js
// ==/UserScript==
(function () {
    'use strict';

    let rate = Number(localStorage.getItem('video_rate')) || 1;

    function setAllVideoSpeed() {
        document.querySelectorAll('video').forEach(video => {
            video.playbackRate = rate;
        });
    }

    function bindVideo(video) {
        const apply = () => video.playbackRate = rate;

        video.addEventListener('play', apply);
        video.addEventListener('canplay', apply);
        video.addEventListener('loadedmetadata', apply);

        apply();
    }

    function observeVideos() {
        const observer = new MutationObserver(() => {
            document.querySelectorAll('video').forEach(bindVideo);
            setAllVideoSpeed();
        });

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

    function createUI() {
        const box = document.createElement('div');
        box.style.position = 'fixed';
        box.style.right = '20px';
        box.style.bottom = '100px';
        box.style.zIndex = 999999;

        // 面板样式
        box.style.background = 'rgba(20,20,20,0.85)';
        box.style.backdropFilter = 'blur(8px)';
        box.style.borderRadius = '12px';
        box.style.padding = '10px 12px';
        box.style.boxShadow = '0 4px 20px rgba(0,0,0,0.4)';
        box.style.display = 'flex';
        box.style.gap = '8px';
        box.style.alignItems = 'center';

        const speeds = [1, 1.5, 2, 3];

        speeds.forEach(s => {
            const btn = document.createElement('div');
            btn.innerText = s + 'x';

            btn.style.padding = '6px 10px';
            btn.style.borderRadius = '8px';
            btn.style.cursor = 'pointer';
            btn.style.fontSize = '13px';
            btn.style.color = '#ccc';
            btn.style.transition = 'all 0.2s ease';

            btn.onmouseenter = () => {
                btn.style.background = 'rgba(255,255,255,0.1)';
            };

            btn.onmouseleave = () => {
                highlight();
            };

            btn.onclick = () => {
                rate = s;
                localStorage.setItem('video_rate', rate);
                setAllVideoSpeed();
                highlight();
            };

            box.appendChild(btn);
        });

        function highlight() {
            box.childNodes.forEach(btn => {
                if (btn.innerText === rate + 'x') {
                    btn.style.background = '#e50914';
                    btn.style.color = '#fff';
                } else {
                    btn.style.background = 'transparent';
                    btn.style.color = '#ccc';
                }
            });
        }

        // 拖动功能（加点高级感）
        let isDragging = false;
        let offsetX, offsetY;

        box.onmousedown = (e) => {
            isDragging = true;
            offsetX = e.clientX - box.offsetLeft;
            offsetY = e.clientY - box.offsetTop;
        };

        document.onmousemove = (e) => {
            if (isDragging) {
                box.style.left = (e.clientX - offsetX) + 'px';
                box.style.top = (e.clientY - offsetY) + 'px';
                box.style.right = 'auto';
                box.style.bottom = 'auto';
            }
        };

        document.onmouseup = () => {
            isDragging = false;
        };

        document.body.appendChild(box);
        highlight();
    }

    function init() {
        observeVideos();
        createUI();
        setAllVideoSpeed();
    }

    init();

})();