☰

Firefox 播放器

采用非侵入式UI注入，精准保留原始布局。

// ==UserScript==
// @name         Firefox 播放器
// @namespace    http://tampermonkey.net/
// @version      1.21
// @description  采用非侵入式UI注入，精准保留原始布局。
// @author       Xion.Ai
// @match        *://*/*
// @grant        none
// @run-at       document-start
// ==/UserScript==

(function() {
    'use strict';

    const hideNativeControlsStyle = document.createElement('style');
    hideNativeControlsStyle.id = '__mp_hide_native_controls';
    hideNativeControlsStyle.textContent = `
        video[controls]:not([data-__mp_attached]),
        audio[controls]:not([data-__mp_attached]) {
            background-color: #000; /* Prevent white flash before player loads */
            visibility: hidden !important;
        }
    `;
    (document.head || document.documentElement).appendChild(hideNativeControlsStyle);

    // Re-add the centering logic for local file playback.
    if (window.location.protocol === 'file:') {
        document.addEventListener('DOMContentLoaded', () => {
            if (document.body && document.body.childElementCount === 1 && document.body.firstElementChild && (document.body.firstElementChild.tagName === 'VIDEO' || document.body.firstElementChild.tagName === 'AUDIO')) {
                const styleId = '__mp_center_style';
                if (document.getElementById(styleId)) return;
                const centerCss = `
                    html, body {
                        height: 100%;
                        margin: 0;
                    }
                    body {
                        display: grid;
                        place-items: center;
                        background-color: #000;
                    }
                `;
                const styleNode = document.createElement('style');
                styleNode.id = styleId;
                styleNode.textContent = centerCss;
                document.head.appendChild(styleNode);
            }
        });
    }

    const css = `
/* Wrapper for audio elements - from v1.1 */
.__mp_wrapper {
    position: relative;
    display: inline-block;
    vertical-align: bottom;
}
.__mp_wrapper > audio {
    display: block;
    width: 100%;
}
.__mp_wrapper.__mp_audio_wrapper {
    height: 44px;
    background-color: transparent;
}

/* Base UI for both video and audio */
.__mp_ui {
  position: absolute;
  height: 44px;
  display: flex !important;
  visibility: visible !important;
  align-items: center;
  gap: 8px;
  pointer-events: auto;
  opacity: 0;
  transition: opacity 160ms ease, transform 160ms ease;
  transform: translateY(6px);
  z-index: 2147483647;
}

.__mp_ui.__show {
  opacity: 1 !important;
  transform: translateY(0);
}

/* Common button/progress/time styles */
.__mp_btn {
  width: 36px; height: 36px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.08); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,0.06); color: rgba(255,255,255,0.95);
  cursor: pointer; user-select: none; box-shadow: 0 2px 8px rgba(0,0,0,0.25); flex-shrink: 0;
}

.__mp_btn:hover { transform: scale(1.06); transition: transform 120ms; }

.__mp_progress_container {
  position: relative;
  flex: 1 1 auto;
  margin: 0 8px;
  height: 20px;
  display: flex;
  align-items: center;
  cursor: pointer;
}

.__mp_progress {
  position: relative;
  -webkit-appearance: none; appearance: none; height: 4px; border-radius: 999px;
  background: linear-gradient(to right, #fff var(--play-percent, 0%), #aaa var(--play-percent, 0%), #aaa var(--buffer-percent, 0%), rgba(255,255,255,0.18) var(--buffer-percent, 0%));
  outline: none;
  width: 100%;
  margin: 0;
}

.__mp_progress::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 10px; height: 10px; border-radius: 50%;
  background: transparent; border: none; box-shadow: none;
  cursor: pointer; transition: background .15s ease;
}

.__mp_progress:hover::-webkit-slider-thumb {
  background-color: rgba(255, 255, 255, 0.6) !important;
  background-image: none !important;
  box-shadow: 0 1px 4px rgba(0,0,0,0.4);
}

.__mp_progress::-moz-range-thumb {
  width: 10px; height: 10px; border-radius: 50%;
  background: transparent; border: none; box-shadow: none;
  cursor: pointer; transition: background .15s ease;
}

.__mp_progress:hover::-moz-range-thumb {
  background-color: rgba(255, 255, 255, 0.6) !important;
  background-image: none !important;
  box-shadow: 0 1px 4px rgba(0,0,0,0.4);
}

.__mp_time {
  color: rgba(255,255,255,0.95);
  font-size: 12px;
  font-family: monospace;
  user-select: none;
  flex-shrink: 0;
}

video, audio { -webkit-user-select: none; -moz-user-select: none; user-select: none; }
`;
    const styleNode = document.createElement('style');
    styleNode.textContent = css;
    document.head.appendChild(styleNode);

    const clamp = (v, a, b) => Math.min(b, Math.max(a, v));

    const formatTime = (seconds) => {
        if (isNaN(seconds) || seconds < 0) return '00:00';
        const date = new Date(seconds * 1000);
        const hh = date.getUTCHours();
        const mm = date.getUTCMinutes();
        const ss = date.getUTCSeconds().toString().padStart(2, '0');
        if (hh) {
            return `${hh}:${mm.toString().padStart(2, '0')}:${ss}`;
        }
        return `${mm}:${ss}`;
    };

    function attachUIToMedia(media) {
        if (!media || media.dataset.__mp_attached) return;
        media.dataset.__mp_attached = '1';

        const isAudio = media.tagName === 'AUDIO';

        const ui = document.createElement('div');
        ui.className = '__mp_ui';
        ui.innerHTML = `
            <div class="__mp_btn __mp_play" title="Play/Pause"><svg width="14" height="14" viewBox="0 0 24 24"><path d="M8 5v14l11-7L8 5z" fill="currentColor"/></svg></div>
            <div class="__mp_progress_container">
                <input class="__mp_progress" type="range" min="0" max="100" value="0" step="0.01">
            </div>
            <div class="__mp_time">00:00 / 00:00</div>
            <div class="__mp_btn __mp_mute" title="Mute/Unmute (Scroll to adjust volume)"><svg class="mp_icon_vol_svg" width="14" height="14" viewBox="0 0 24 24"><path d="M3 9v6h4l5 5V4L7 9H3zm13.5 3c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02zM14 3.23v2.06c2.89.86 5 3.54 5 6.71s-2.11 5.85-5 6.71v2.06c4.01-.91 7-4.49 7-8.77s-2.99-7.86-7-8.77z" fill="currentColor"/></svg></div>
        `;

        let wrapper, originalMargin, resizeObserver;
        let updateUIPosition;


        if (isAudio) {
            // --- AUDIO PATH (v1.1 wrapper logic) ---
            const originalStyle = window.getComputedStyle(media);
            originalMargin = originalStyle.margin;

            wrapper = document.createElement('div');
            wrapper.className = '__mp_wrapper __mp_audio_wrapper';

            wrapper.style.display = originalStyle.display === 'inline' ? 'inline-block' : originalStyle.display;
            if (media.offsetWidth > 0) {
                wrapper.style.width = media.offsetWidth + 'px';
            } else {
                wrapper.style.width = '300px';
            }
            wrapper.style.margin = originalMargin;
            media.style.margin = '0';

            media.parentElement.insertBefore(wrapper, media);
            wrapper.appendChild(media);
            wrapper.appendChild(ui);
            ui.classList.add('__show');
        } else {
            // --- VIDEO PATH (v1.01 absolute positioning logic) ---
            document.body.appendChild(ui);

            updateUIPosition = () => {
                const videoRect = media.getBoundingClientRect();
                ui.style.left = `${videoRect.left + window.scrollX + 8}px`;
                ui.style.top = `${videoRect.top + window.scrollY + videoRect.height - 44 - 8}px`;
                ui.style.width = `${videoRect.width - 16}px`;
            };

            updateUIPosition();
            resizeObserver = new ResizeObserver(updateUIPosition);
            resizeObserver.observe(media);
            window.addEventListener('scroll', updateUIPosition, { passive: true, capture: true });
            window.addEventListener('resize', updateUIPosition, { passive: true });

            let hideTimeout;
            const showUI = () => { clearTimeout(hideTimeout); ui.classList.add('__show'); };
            const hideUI = () => { hideTimeout = setTimeout(() => ui.classList.remove('__show'), 1000); };

            media.addEventListener('mouseenter', showUI);
            ui.addEventListener('mouseenter', showUI);
            media.addEventListener('mouseleave', hideUI);
            ui.addEventListener('mouseleave', hideUI);
            media.addEventListener('mousemove', showUI);
            media.addEventListener('play', () => { showUI(); hideUI(); });
            media.addEventListener('pause', showUI);
        }

        media.controls = false;

        const playBtn = ui.querySelector('.__mp_play');
        const progress = ui.querySelector('.__mp_progress');
        const progressContainer = ui.querySelector('.__mp_progress_container');
        const timeDisplay = ui.querySelector('.__mp_time');

        progressContainer.addEventListener('click', e => {
            const rect = progressContainer.getBoundingClientRect();
            const clickX = e.clientX - rect.left;
            const percentage = clamp(clickX / progressContainer.offsetWidth, 0, 1);
            if (!isNaN(media.duration)) media.currentTime = media.duration * percentage;
        });

        const muteBtn = ui.querySelector('.__mp_mute');
        const volumeIcon = ui.querySelector('.mp_icon_vol_svg');

        const updatePlayIcon = () => {
            const isPaused = media.paused || media.ended;
            playBtn.querySelector('svg path').setAttribute('d', isPaused ? 'M8 5v14l11-7L8 5z' : 'M6 5h4v14H6zM14 5h4v14h-4z');
        };

        const togglePlay = (e) => {
            if (ui.contains(e.target) && e.target !== playBtn && !playBtn.contains(e.target)) return;
            media.paused || media.ended ? media.play() : media.pause();
        };

        (isAudio ? wrapper : media).addEventListener('click', togglePlay);
        playBtn.addEventListener('click', (e) => { e.stopPropagation(); togglePlay(e); });

        if (!isAudio) {
            media.addEventListener('dblclick', e => {
                if (ui.contains(e.target)) return;
                if (!document.fullscreenElement) media.requestFullscreen().catch(err => console.error(`[MP] Fullscreen Error: ${err.message}`));
                else document.exitFullscreen();
            });
        }

        const updateVolumeUI = () => {
            const vol = media.volume, muted = media.muted;
            if (muted || vol === 0) volumeIcon.innerHTML = `<path d="M16.5 12c0-1.77-.77-3.37-2-4.47V16.47c1.23-1.1 2-2.7 2-4.47zM5 9v6h4l5 4V5L9 9H5z" fill="currentColor"/>`;
            else if (vol < 0.5) volumeIcon.innerHTML = `<path d="M5 9v6h4l5 4V5L9 9H5z" fill="currentColor"/>`;
            else volumeIcon.innerHTML = `<path d="M3 9v6h4l5 5V4L7 9H3zm13.5 3c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02zM14 3.23v2.06c2.89.86 5 3.54 5 6.71s-2.11 5.85-5 6.71v2.06c4.01-.91 7-4.49 7-8.77s-2.99-7.86-7-8.77z" fill="currentColor"/>`;
        };

        muteBtn.addEventListener('click', e => { e.stopPropagation(); media.muted = !media.muted; });
        muteBtn.addEventListener('wheel', e => {
            e.preventDefault(); e.stopPropagation();
            const delta = Math.sign(e.deltaY);
            media.volume = clamp(media.volume - delta * 0.05, 0, 1);
            if (media.volume > 0) media.muted = false;
        }, { passive: false });

        let rafId;
        const tickProgress = () => {
            if (!media.isConnected) { cancelAnimationFrame(rafId); return; }
            if (!isNaN(media.duration)) {
                const val = (media.currentTime / media.duration) * 100;
                progress.value = clamp(val, 0, 100).toString();
                progress.style.setProperty('--play-percent', `${progress.value}%`);
                timeDisplay.textContent = `${formatTime(media.currentTime)} / ${formatTime(media.duration)}`;
            }
            rafId = requestAnimationFrame(tickProgress);
        };

        const updateBufferProgress = () => {
            if (!media.buffered || media.buffered.length === 0 || isNaN(media.duration)) return;
            const bufferEnd = media.buffered.end(media.buffered.length - 1);
            const bufferPercent = (bufferEnd / media.duration) * 100;
            progress.style.setProperty('--buffer-percent', `${clamp(bufferPercent, 0, 100)}%`);
        };

        media.addEventListener('play', updatePlayIcon);
        media.addEventListener('pause', updatePlayIcon);
        media.addEventListener('ended', updatePlayIcon);
        media.addEventListener('volumechange', updateVolumeUI);
        media.addEventListener('progress', updateBufferProgress);

        const onMetadataLoaded = () => {
            updateVolumeUI();
            updateBufferProgress();
            if (!isNaN(media.duration)) timeDisplay.textContent = `${formatTime(media.currentTime)} / ${formatTime(media.duration)}`;
            if (!rafId) rafId = requestAnimationFrame(tickProgress);
        };

        media.addEventListener('loadedmetadata', onMetadataLoaded);
        if (media.readyState >= 1) onMetadataLoaded();

        progress.addEventListener('input', e => { if (!isNaN(media.duration)) media.currentTime = clamp(media.duration * (parseFloat(e.target.value) / 100), 0, media.duration); });

        const cleanup = () => {
            if (rafId) cancelAnimationFrame(rafId);
            if (resizeObserver) resizeObserver.disconnect();
            
            if (isAudio) {
                if (wrapper && wrapper.parentElement) {
                    wrapper.parentElement.insertBefore(media, wrapper);
                    wrapper.remove();
                }
                media.style.margin = originalMargin;
            } else {
                window.removeEventListener('scroll', updateUIPosition, true);
                window.removeEventListener('resize', updateUIPosition);
                if (ui.parentElement) ui.remove();
            }
            
            media.controls = true;
            delete media.dataset.__mp_attached;
            if (attachedMedia.has(media)) attachedMedia.delete(media);
        };

        const intersectionObserver = new IntersectionObserver((entries) => {
            const entry = entries[0];
            ui.style.visibility = entry.isIntersecting ? 'visible' : 'hidden';
        });
        intersectionObserver.observe(media);

        const disconnectObserver = new MutationObserver(() => {
            if (!media.isConnected) {
                cleanup();
                disconnectObserver.disconnect();
                intersectionObserver.disconnect();
            }
        });
        if (media.parentElement) {
            disconnectObserver.observe(media.parentElement, { childList: true, subtree: true });
        }

        updatePlayIcon();
        updateVolumeUI();

        return () => {
            cleanup();
            disconnectObserver.disconnect();
            intersectionObserver.disconnect();
        };
    }

    const attachedMedia = new WeakMap();

    function processMedia(media) {
        if (media.hasAttribute('controls')) {
            if (!attachedMedia.has(media)) {
                try {
                    const cleanup = attachUIToMedia(media);
                    if (cleanup) attachedMedia.set(media, cleanup);
                } catch (e) {
                    console.error('[MP] Error attaching to media:', e);
                }
            }
        } else {
            if (attachedMedia.has(media)) {
                const cleanup = attachedMedia.get(media);
                if (cleanup) cleanup();
                attachedMedia.delete(media);
            }
        }
    }

    function scanAndProcess() {
        document.querySelectorAll('video[controls]:not([data-__mp_attached]), audio[controls]:not([data-__mp_attached])').forEach(processMedia);
    }

    // Initial scan
    scanAndProcess();

    // Global observer for discovering new media
    const globalObserver = new MutationObserver((mutations) => {
        mutations.forEach(mutation => {
            if (mutation.addedNodes) {
                mutation.addedNodes.forEach(node => {
                    if (node.nodeType === 1) {
                        if (node.matches('video[controls], audio[controls]')) {
                            processMedia(node);
                        }
                        node.querySelectorAll('video[controls], audio[controls]').forEach(processMedia);
                    }
                });
            }
        });
    });
    globalObserver.observe(document.documentElement, {
        childList: true,
        subtree: true,
    });

})();