youtube-screenshot.user.js

// ==UserScript==
// @name         YouTube Screenshot
// @namespace    https://loongphy.com
// @version      0.1.1
// @description  为 YouTube 播放器注入截图按钮，支持截图并显示在浮动面板中。
// @author       Loongphy
// @license      PolyForm-Noncommercial-1.0.0; https://polyformproject.org/licenses/noncommercial/1.0.0/
// @match        https://*.youtube.com/*
// @icon         https://www.google.com/s2/favicons?sz=64&domain=youtube.com
// @run-at       document-idle
// @grant        GM_addStyle
// ==/UserScript==

(function () {
    'use strict';

    const BUTTON_ID = 'tm-ytp-screenshot-button';
    const GALLERY_ID = 'tm-ytp-screenshot-gallery';
    const RETRY_LIMIT = 10;
    const RETRY_DELAY = 500;

    GM_addStyle(`
      #${GALLERY_ID} {
        position: fixed;
        top: 16px;
        right: 16px;
        display: flex;
        flex-direction: column;
        gap: 12px;
        max-height: calc(100vh - 32px);
        overflow-y: auto;
        z-index: 2147483647;
        pointer-events: none;
      }
  
      #${GALLERY_ID}::-webkit-scrollbar {
        width: 8px;
      }
  
      #${GALLERY_ID}::-webkit-scrollbar-thumb {
        background: rgba(255, 255, 255, 0.25);
        border-radius: 4px;
      }
  
      #${GALLERY_ID} .tm-ytp-screenshot-item {
        pointer-events: auto;
        background: rgba(15, 15, 15, 0.85);
        border-radius: 10px;
        padding: 8px;
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35);
        display: flex;
        flex-direction: column;
        gap: 6px;
        border: 1px solid rgba(255, 255, 255, 0.1);
        position: relative;
      }
  
      #${GALLERY_ID} .tm-ytp-screenshot-item a {
        display: block;
        text-decoration: none;
        color: inherit;
      }
  
      #${GALLERY_ID} .tm-ytp-screenshot-item img {
        display: block;
        width: 220px;
        max-width: 220px;
        height: auto;
        border-radius: 6px;
      }
  
      #${GALLERY_ID} .tm-ytp-screenshot-toolbar {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        color: rgba(255, 255, 255, 0.7);
        font-size: 12px;
        word-break: break-all;
      }
  
      #${GALLERY_ID} .tm-ytp-screenshot-actions {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        display: flex;
        gap: 18px;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.2s ease;
        z-index: 2;
      }
  
      #${GALLERY_ID} .tm-ytp-screenshot-item:hover .tm-ytp-screenshot-actions {
        opacity: 1;
        pointer-events: auto;
      }
  
      #${GALLERY_ID} .tm-ytp-screenshot-action {
        width: 56px;
        height: 56px;
        border-radius: 50%;
        background: rgba(0, 0, 0, 0.65);
        display: flex;
        align-items: center;
        justify-content: center;
        border: 1px solid rgba(255, 255, 255, 0.25);
        cursor: pointer;
        backdrop-filter: blur(2px);
        transition: transform 0.2s ease, background 0.2s ease, border-color 0.2s ease;
        color: #fff;
      }
  
      #${GALLERY_ID} .tm-ytp-screenshot-action:hover {
        transform: scale(1.05);
        background: rgba(0, 0, 0, 0.82);
      }
  
      #${GALLERY_ID} .tm-ytp-screenshot-action svg {
        width: 28px;
        height: 28px;
        stroke: currentColor;
        stroke-width: 2;
      }
  
      #${GALLERY_ID} .tm-ytp-screenshot-item.tm-ytp-screenshot-copied .tm-ytp-screenshot-action--copy {
        background: rgba(24, 144, 255, 0.85);
        border-color: rgba(64, 169, 255, 0.9);
        color: #0a1a2c;
      }
  
      #${GALLERY_ID} .tm-ytp-screenshot-item.tm-ytp-screenshot-saved .tm-ytp-screenshot-action--save {
        background: rgba(24, 201, 100, 0.85);
        border-color: rgba(76, 238, 164, 0.95);
        color: #0f1c0f;
      }
  
      #${GALLERY_ID} .tm-ytp-screenshot-timestamp {
        position: absolute;
        left: 14px;
        bottom: 14px;
        padding: 4px 8px;
        border-radius: 6px;
        background: rgba(0, 0, 0, 0.6);
        color: #fff;
        font-size: 14px;
        line-height: 1;
      font-family: var(--yt-spec-font-family, "YouTube Sans", "Roboto", sans-serif);
        font-weight: 500;
      }
  
      #${BUTTON_ID} {
        width: 48px;
        height: 40px;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 0;
      }
  
      #${BUTTON_ID} svg {
        width: 22px;
        height: 22px;
        stroke: currentColor;
        stroke-width: 1.5;
      }
    `);

    init();

    function init() {
        ensureGallery();
        attachObservers();
        ensureButtonWithRetries();
    }

    function ensureButtonWithRetries(attempt = 0) {
        if (attempt > RETRY_LIMIT) {
            return;
        }
        if (!ensureButton()) {
            setTimeout(() => ensureButtonWithRetries(attempt + 1), RETRY_DELAY);
        }
    }

    function attachObservers() {
        const reactRoot = document.body;
        if (!reactRoot) {
            return;
        }

        const observer = new MutationObserver(throttle(ensureButton, 500));
        observer.observe(reactRoot, {
            childList: true,
            subtree: true,
        });

        document.addEventListener('yt-navigate-finish', () => {
            ensureButtonWithRetries();
        });

        window.addEventListener('yt-page-data-updated', () => {
            ensureButtonWithRetries();
        });
    }

    function ensureButton() {
        const controls = document.querySelector('.ytp-right-controls');
        if (!controls) {
            return false;
        }

        if (document.getElementById(BUTTON_ID)) {
            return true;
        }

        const button = createButton();
        controls.insertBefore(button, controls.firstChild);
        return true;
    }

    function createButton() {
        const button = document.createElement('button');
        button.id = BUTTON_ID;
        button.className = 'ytp-button';
        button.type = 'button';
        button.title = '截图';
        button.setAttribute('aria-label', '截图');

        const icon = createCameraIcon();
        button.appendChild(icon);

        button.addEventListener('click', (event) => {
            event.preventDefault();
            captureScreenshot();
        });
        return button;
    }

    function createCameraIcon() {
        const svgNS = 'http://www.w3.org/2000/svg';
        const svg = document.createElementNS(svgNS, 'svg');
        svg.setAttribute('viewBox', '0 0 24 24');
        svg.setAttribute('aria-hidden', 'true');
        svg.setAttribute('focusable', 'false');
        const group = document.createElementNS(svgNS, 'g');
        group.setAttribute('fill', 'none');
        group.setAttribute('stroke', 'currentColor');
        group.setAttribute('stroke-linecap', 'round');
        group.setAttribute('stroke-linejoin', 'round');
        group.setAttribute('stroke-width', '2');

        const body = document.createElementNS(svgNS, 'path');
        body.setAttribute('d', 'M13.997 4a2 2 0 0 1 1.76 1.05l.486.9A2 2 0 0 0 18.003 7H20a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V9a2 2 0 0 1 2-2h1.997a2 2 0 0 0 1.759-1.048l.489-.904A2 2 0 0 1 10.004 4z');
        const lens = document.createElementNS(svgNS, 'circle');
        lens.setAttribute('cx', '12');
        lens.setAttribute('cy', '13');
        lens.setAttribute('r', '3');

        group.appendChild(body);
        group.appendChild(lens);
        svg.appendChild(group);
        return svg;
    }

    function createTrashIcon() {
        const svgNS = 'http://www.w3.org/2000/svg';
        const svg = document.createElementNS(svgNS, 'svg');
        svg.setAttribute('viewBox', '0 0 24 24');
        svg.setAttribute('aria-hidden', 'true');
        svg.setAttribute('focusable', 'false');
        const path = document.createElementNS(svgNS, 'path');
        path.setAttribute('fill', 'none');
        path.setAttribute('stroke', 'currentColor');
        path.setAttribute('stroke-linecap', 'round');
        path.setAttribute('stroke-linejoin', 'round');
        path.setAttribute('stroke-width', '2');
        path.setAttribute('d', 'M10 11v6m4-6v6m5-11v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6M3 6h18M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2');

        svg.appendChild(path);
        return svg;
    }

    function createCopyIcon() {
        const svgNS = 'http://www.w3.org/2000/svg';
        const svg = document.createElementNS(svgNS, 'svg');
        svg.setAttribute('viewBox', '0 0 24 24');
        svg.setAttribute('aria-hidden', 'true');
        svg.setAttribute('focusable', 'false');
        const group = document.createElementNS(svgNS, 'g');
        group.setAttribute('fill', 'none');
        group.setAttribute('stroke', 'currentColor');
        group.setAttribute('stroke-linecap', 'round');
        group.setAttribute('stroke-linejoin', 'round');
        group.setAttribute('stroke-width', '2');

        const rect = document.createElementNS(svgNS, 'rect');
        rect.setAttribute('width', '14');
        rect.setAttribute('height', '14');
        rect.setAttribute('x', '8');
        rect.setAttribute('y', '8');
        rect.setAttribute('rx', '2');
        rect.setAttribute('ry', '2');

        const path = document.createElementNS(svgNS, 'path');
        path.setAttribute('d', 'M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2');

        group.appendChild(rect);
        group.appendChild(path);
        svg.appendChild(group);
        return svg;
    }

    function createSaveIcon() {
        const svgNS = 'http://www.w3.org/2000/svg';
        const svg = document.createElementNS(svgNS, 'svg');
        svg.setAttribute('viewBox', '0 0 24 24');
        svg.setAttribute('aria-hidden', 'true');
        svg.setAttribute('focusable', 'false');
        const group = document.createElementNS(svgNS, 'g');
        group.setAttribute('fill', 'none');
        group.setAttribute('stroke', 'currentColor');
        group.setAttribute('stroke-linecap', 'round');
        group.setAttribute('stroke-linejoin', 'round');
        group.setAttribute('stroke-width', '2');

        const body = document.createElementNS(svgNS, 'path');
        body.setAttribute('d', 'M15.2 3a2 2 0 0 1 1.4.6l3.8 3.8a2 2 0 0 1 .6 1.4V19a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2z');
        const slot = document.createElementNS(svgNS, 'path');
        slot.setAttribute('d', 'M17 21v-7a1 1 0 0 0-1-1H8a1 1 0 0 0-1 1v7');
        const top = document.createElementNS(svgNS, 'path');
        top.setAttribute('d', 'M7 3v4a1 1 0 0 0 1 1h7');

        group.appendChild(body);
        group.appendChild(slot);
        group.appendChild(top);
        svg.appendChild(group);
        return svg;
    }

    async function copyImageToClipboard(dataUrl) {
        const response = await fetch(dataUrl);
        const blob = await response.blob();
        if (!navigator.clipboard || !navigator.clipboard.write) {
            throw new Error('Clipboard API not available');
        }
        const item = new ClipboardItem({ [blob.type]: blob });
        await navigator.clipboard.write([item]);
    }

    function saveImage(dataUrl, filename, item) {
        const link = document.createElement('a');
        link.href = dataUrl;
        link.download = filename;
        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link);
        item.classList.add('tm-ytp-screenshot-saved');
        setTimeout(() => item.classList.remove('tm-ytp-screenshot-saved'), 600);
    }

    function captureScreenshot() {
        const video = document.querySelector('video.html5-main-video');
        if (!video) {
            console.warn('[YouTube Screenshot] Video element not found.');
            return;
        }

        if (video.readyState < 2 || video.videoWidth === 0 || video.videoHeight === 0) {
            console.warn('[YouTube Screenshot] Video is not ready for capturing.');
            return;
        }

        const canvas = document.createElement('canvas');
        canvas.width = video.videoWidth;
        canvas.height = video.videoHeight;
        const ctx = canvas.getContext('2d');
        if (!ctx) {
            console.warn('[YouTube Screenshot] Unable to obtain 2D context.');
            return;
        }

        ctx.drawImage(video, 0, 0, canvas.width, canvas.height);

        try {
            const dataUrl = canvas.toDataURL('image/png');
            addScreenshotToGallery(dataUrl, video.currentTime);
        } catch (error) {
            console.error('[YouTube Screenshot] Failed to capture screenshot:', error);
        }
    }

    function addScreenshotToGallery(dataUrl, playbackTime) {
        const gallery = ensureGallery();
        const item = document.createElement('div');
        item.className = 'tm-ytp-screenshot-item';

        const link = document.createElement('a');
        const timestamp = new Date();
        const filename = `youtube-screenshot-${formatTimestamp(timestamp)}.png`;
        link.href = dataUrl;
        link.download = filename;
        link.target = '_blank';
        link.rel = 'noopener';

        const img = document.createElement('img');
        img.src = dataUrl;
        img.alt = 'YouTube screenshot';
        link.appendChild(img);

        const toolbar = document.createElement('div');
        toolbar.className = 'tm-ytp-screenshot-toolbar';
        toolbar.textContent = filename;
        toolbar.setAttribute('title', filename);

        const timestampBadge = document.createElement('div');
        timestampBadge.className = 'tm-ytp-screenshot-timestamp';
        timestampBadge.textContent = formatPlaybackTimestamp(playbackTime);

        const actions = document.createElement('div');
        actions.className = 'tm-ytp-screenshot-actions';

        const saveButton = document.createElement('button');
        saveButton.type = 'button';
        saveButton.className = 'tm-ytp-screenshot-action tm-ytp-screenshot-action--save';
        saveButton.title = '保存图片';
        const saveIcon = createSaveIcon();
        saveButton.appendChild(saveIcon);
        saveButton.addEventListener('click', (event) => {
            event.stopPropagation();
            event.preventDefault();
            saveImage(dataUrl, filename, item);
        });

        const copyButton = document.createElement('button');
        copyButton.type = 'button';
        copyButton.className = 'tm-ytp-screenshot-action tm-ytp-screenshot-action--copy';
        copyButton.title = '复制到剪贴板';
        const copyIcon = createCopyIcon();
        copyButton.appendChild(copyIcon);
        copyButton.addEventListener('click', async (event) => {
            event.stopPropagation();
            event.preventDefault();
            try {
                await copyImageToClipboard(dataUrl);
                item.classList.add('tm-ytp-screenshot-copied');
                setTimeout(() => item.classList.remove('tm-ytp-screenshot-copied'), 600);
            } catch (error) {
                console.warn('[YouTube Screenshot] Failed to copy screenshot to clipboard.', error);
            }
        });

        const removeButton = document.createElement('button');
        removeButton.type = 'button';
        removeButton.className = 'tm-ytp-screenshot-action tm-ytp-screenshot-action--remove';
        removeButton.title = '移除截图';
        const removeIcon = createTrashIcon();
        removeButton.appendChild(removeIcon);
        removeButton.addEventListener('click', (event) => {
            event.stopPropagation();
            event.preventDefault();
            item.remove();
        });

        actions.appendChild(saveButton);
        actions.appendChild(copyButton);
        actions.appendChild(removeButton);

        item.appendChild(link);
        item.appendChild(actions);
        item.appendChild(timestampBadge);
        item.appendChild(toolbar);

        gallery.appendChild(item);
    }

    function ensureGallery() {
        let gallery = document.getElementById(GALLERY_ID);
        if (gallery) {
            return gallery;
        }

        gallery = document.createElement('div');
        gallery.id = GALLERY_ID;
        document.body.appendChild(gallery);
        return gallery;
    }

    function formatTimestamp(date) {
        const yyyy = date.getFullYear();
        const mm = String(date.getMonth() + 1).padStart(2, '0');
        const dd = String(date.getDate()).padStart(2, '0');
        const hh = String(date.getHours()).padStart(2, '0');
        const mi = String(date.getMinutes()).padStart(2, '0');
        const ss = String(date.getSeconds()).padStart(2, '0');
        return `${yyyy}${mm}${dd}-${hh}${mi}${ss}`;
    }

    function formatPlaybackTimestamp(seconds) {
        if (typeof seconds !== 'number' || Number.isNaN(seconds)) {
            return '--:--';
        }

        const totalMs = Math.max(0, Math.round(seconds * 1000));
        const hours = Math.floor(totalMs / 3600000);
        const minutes = Math.floor((totalMs % 3600000) / 60000);
        const secs = Math.floor((totalMs % 60000) / 1000);

        const minutePart = String(minutes).padStart(2, '0');
        const secondPart = String(secs).padStart(2, '0');

        if (hours > 0) {
            const hourPart = String(hours).padStart(2, '0');
            return `${hourPart}:${minutePart}:${secondPart}`;
        }

        return `${minutePart}:${secondPart}`;
    }

    function throttle(fn, wait) {
        let lastCall = 0;
        let timeout = null;
        let lastArgs;

        return function throttled(...args) {
            const now = Date.now();
            const remaining = wait - (now - lastCall);
            lastArgs = args;

            if (remaining <= 0) {
                if (timeout) {
                    clearTimeout(timeout);
                    timeout = null;
                }
                lastCall = now;
                fn.apply(this, lastArgs);
            } else if (!timeout) {
                timeout = setTimeout(() => {
                    lastCall = Date.now();
                    timeout = null;
                    fn.apply(this, lastArgs);
                }, remaining);
            }
        };
    }
})();