☰

YouTube Enhancer (Loop & Screenshot Buttons)

Add Loop, Save and Copy Screenshot Buttons.

  1. // ==UserScript==
  2. // @name         YouTube Enhancer (Loop & Screenshot Buttons)
  3. // @description  Add Loop, Save and Copy Screenshot Buttons.
  4. // @icon         https://raw.githubusercontent.com/exyezed/youtube-enhancer/refs/heads/main/extras/youtube-enhancer.png
  5. // @version      1.5
  6. // @author       exyezed
  7. // @namespace    https://github.com/exyezed/youtube-enhancer/
  8. // @supportURL   https://github.com/exyezed/youtube-enhancer/issues
  9. // @license      MIT
  10. // @match        https://www.youtube.com/*
  11. // @grant        none
  12. // ==/UserScript==
  13.  
  14. (function() {
  15.     'use strict';
  16.  
  17.     const buttonConfig = {
  18.         screenshotFormat: "png",
  19.         extension: 'png',
  20.         clickDuration: 500
  21.     };
  22.  
  23.     const buttonCSS = `
  24.     a.buttonLoopAndScreenshot-loop-button, 
  25.     a.buttonLoopAndScreenshot-save-screenshot-button,
  26.     a.buttonLoopAndScreenshot-copy-screenshot-button {
  27.         text-align: center;
  28.         position: relative;
  29.         display: flex;
  30.         align-items: center;
  31.         justify-content: center;
  32.         width: 48px;
  33.         height: 48px;
  34.     }
  35.  
  36.     a.buttonLoopAndScreenshot-loop-button svg, 
  37.     a.buttonLoopAndScreenshot-save-screenshot-button svg,
  38.     a.buttonLoopAndScreenshot-copy-screenshot-button svg {
  39.         width: 24px;
  40.         height: 24px;
  41.         vertical-align: middle;
  42.         transition: fill 0.2s ease;
  43.     }
  44.  
  45.     a.buttonLoopAndScreenshot-loop-button:hover svg,
  46.     a.buttonLoopAndScreenshot-save-screenshot-button:hover svg,
  47.     a.buttonLoopAndScreenshot-copy-screenshot-button:hover svg {
  48.         fill: url(#buttonGradient);
  49.     }
  50.  
  51.     a.buttonLoopAndScreenshot-loop-button.active svg,
  52.     a.buttonLoopAndScreenshot-save-screenshot-button.clicked svg,
  53.     a.buttonLoopAndScreenshot-copy-screenshot-button.clicked svg {
  54.         fill: url(#successGradient);
  55.     }
  56.  
  57.     .buttonLoopAndScreenshot-shorts-save-button,
  58.     .buttonLoopAndScreenshot-shorts-copy-button {
  59.         display: flex;
  60.         align-items: center;
  61.         justify-content: center;
  62.         margin-top: 16px;
  63.         width: 48px;
  64.         height: 48px;
  65.         border-radius: 50%;
  66.         cursor: pointer;
  67.         transition: background-color 0.3s;
  68.     }
  69.  
  70.     .buttonLoopAndScreenshot-shorts-save-button svg,
  71.     .buttonLoopAndScreenshot-shorts-copy-button svg {
  72.         width: 24px;
  73.         height: 24px;
  74.         transition: fill 0.1s ease;
  75.     }
  76.  
  77.     .buttonLoopAndScreenshot-shorts-save-button svg path,
  78.     .buttonLoopAndScreenshot-shorts-copy-button svg path {
  79.         transition: fill 0.1s ease;
  80.     }
  81.  
  82.     .buttonLoopAndScreenshot-shorts-save-button:hover svg path,
  83.     .buttonLoopAndScreenshot-shorts-copy-button:hover svg path {
  84.         fill: url(#shortsButtonGradient) !important;
  85.     }
  86.  
  87.     .buttonLoopAndScreenshot-shorts-save-button.clicked svg path,
  88.     .buttonLoopAndScreenshot-shorts-copy-button.clicked svg path {
  89.         fill: url(#shortsSuccessGradient) !important;
  90.     }
  91.  
  92.     html[dark] .buttonLoopAndScreenshot-shorts-save-button,
  93.     html[dark] .buttonLoopAndScreenshot-shorts-copy-button {
  94.         background-color: rgba(255, 255, 255, 0.1);
  95.     }
  96.  
  97.     html[dark] .buttonLoopAndScreenshot-shorts-save-button:hover,
  98.     html[dark] .buttonLoopAndScreenshot-shorts-copy-button:hover {
  99.         background-color: rgba(255, 255, 255, 0.2);
  100.     }
  101.  
  102.     html[dark] .buttonLoopAndScreenshot-shorts-save-button svg path,
  103.     html[dark] .buttonLoopAndScreenshot-shorts-copy-button svg path {
  104.         fill: white;
  105.     }
  106.  
  107.     html:not([dark]) .buttonLoopAndScreenshot-shorts-save-button,
  108.     html:not([dark]) .buttonLoopAndScreenshot-shorts-copy-button {
  109.         background-color: rgba(0, 0, 0, 0.05);
  110.     }
  111.  
  112.     html:not([dark]) .buttonLoopAndScreenshot-shorts-save-button:hover,
  113.     html:not([dark]) .buttonLoopAndScreenshot-shorts-copy-button:hover {
  114.         background-color: rgba(0, 0, 0, 0.1);
  115.     }
  116.  
  117.     html:not([dark]) .buttonLoopAndScreenshot-shorts-save-button svg path,
  118.     html:not([dark]) .buttonLoopAndScreenshot-shorts-copy-button svg path {
  119.         fill: #030303;
  120.     }
  121.     `;
  122.     
  123.     const iconUtils = {
  124.         createGradientDefs(isShortsButton = false) {
  125.             const defs = document.createElementNS('http://www.w3.org/2000/svg', 'defs');
  126.             
  127.             const hoverGradient = document.createElementNS('http://www.w3.org/2000/svg', 'linearGradient');
  128.             hoverGradient.setAttribute('id', isShortsButton ? 'shortsButtonGradient' : 'buttonGradient');
  129.             hoverGradient.setAttribute('x1', '0%');
  130.             hoverGradient.setAttribute('y1', '0%');
  131.             hoverGradient.setAttribute('x2', '100%');
  132.             hoverGradient.setAttribute('y2', '100%');
  133.             
  134.             const hoverStop1 = document.createElementNS('http://www.w3.org/2000/svg', 'stop');
  135.             hoverStop1.setAttribute('offset', '0%');
  136.             hoverStop1.setAttribute('style', 'stop-color:#f03');
  137.             
  138.             const hoverStop2 = document.createElementNS('http://www.w3.org/2000/svg', 'stop');
  139.             hoverStop2.setAttribute('offset', '100%');
  140.             hoverStop2.setAttribute('style', 'stop-color:#ff2791');
  141.             
  142.             hoverGradient.appendChild(hoverStop1);
  143.             hoverGradient.appendChild(hoverStop2);
  144.             defs.appendChild(hoverGradient);
  145.             
  146.             const successGradient = document.createElementNS('http://www.w3.org/2000/svg', 'linearGradient');
  147.             successGradient.setAttribute('id', isShortsButton ? 'shortsSuccessGradient' : 'successGradient');
  148.             successGradient.setAttribute('x1', '0%');
  149.             successGradient.setAttribute('y1', '0%');
  150.             successGradient.setAttribute('x2', '100%');
  151.             successGradient.setAttribute('y2', '100%');
  152.             
  153.             const successStop1 = document.createElementNS('http://www.w3.org/2000/svg', 'stop');
  154.             successStop1.setAttribute('offset', '0%');
  155.             successStop1.setAttribute('style', 'stop-color:#0f9d58');
  156.             
  157.             const successStop2 = document.createElementNS('http://www.w3.org/2000/svg', 'stop');
  158.             successStop2.setAttribute('offset', '100%');
  159.             successStop2.setAttribute('style', 'stop-color:#00c853');
  160.             
  161.             successGradient.appendChild(successStop1);
  162.             successGradient.appendChild(successStop2);
  163.             defs.appendChild(successGradient);
  164.             
  165.             return defs;
  166.         },
  167.         
  168.         createBaseSVG(viewBox, fill = '#e8eaed', isShortsButton = false) {
  169.             const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
  170.             svg.setAttribute('xmlns', 'http://www.w3.org/2000/svg');
  171.             svg.setAttribute('height', '24px');
  172.             svg.setAttribute('viewBox', viewBox);
  173.             svg.setAttribute('width', '24px');
  174.             svg.setAttribute('fill', fill);
  175.             svg.appendChild(this.createGradientDefs(isShortsButton));
  176.             return svg;
  177.         },
  178.         
  179.         paths: {
  180.             loopPath: 'M220-260q-92 0-156-64T0-480q0-92 64-156t156-64q37 0 71 13t61 37l68 62-60 54-62-56q-16-14-36-22t-42-8q-58 0-99 41t-41 99q0 58 41 99t99 41q22 0 42-8t36-22l310-280q27-24 61-37t71-13q92 0 156 64t64 156q0 92-64 156t-156 64q-37 0-71-13t-61-37l-68-62 60-54 62 56q16 14 36 22t42 8q58 0 99-41t41-99q0-58-41-99t-99-41q-22 0-42 8t-36 22L352-310q-27 24-61 37t-71 13Z',
  181.             screenshotPath: 'M20 5h-3.17l-1.24-1.35A2 2 0 0 0 14.12 3H9.88c-.56 0-1.1.24-1.47.65L7.17 5H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2m-3 12H7a.5.5 0 0 1-.4-.8l2-2.67c.2-.27.6-.27.8 0L11.25 16l2.6-3.47c.2-.27.6-.27.8 0l2.75 3.67a.5.5 0 0 1-.4.8',
  182.             copyScreenshotPath: 'M9 14h10l-3.45-4.5l-2.3 3l-1.55-2zm-1 4q-.825 0-1.412-.587T6 16V4q0-.825.588-1.412T8 2h12q.825 0 1.413.588T22 4v12q0 .825-.587 1.413T20 18zm0-2h12V4H8zm-4 6q-.825 0-1.412-.587T2 20V6h2v14h14v2zM8 4h12v12H8z'
  183.         },
  184.         
  185.         createLoopIcon() {
  186.             const svg = this.createBaseSVG('0 -960 960 960');
  187.             
  188.             const path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
  189.             path.setAttribute('d', this.paths.loopPath);
  190.             
  191.             svg.appendChild(path);
  192.             return svg;
  193.         },
  194.         
  195.         createSaveScreenshotIcon(isShortsButton = false) {
  196.             const svg = this.createBaseSVG('0 0 24 24', '#e8eaed', isShortsButton);
  197.             
  198.             const path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
  199.             path.setAttribute('d', this.paths.screenshotPath);
  200.             
  201.             svg.appendChild(path);
  202.             return svg;
  203.         },
  204.         
  205.         createCopyScreenshotIcon(isShortsButton = false) {
  206.             const svg = this.createBaseSVG('0 0 24 24', '#e8eaed', isShortsButton);
  207.             
  208.             const path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
  209.             path.setAttribute('d', this.paths.copyScreenshotPath);
  210.             
  211.             svg.appendChild(path);
  212.             return svg;
  213.         }
  214.     };
  215.     
  216.     const buttonUtils = {
  217.         addStyle(styleString) {
  218.             const style = document.createElement('style');
  219.             style.textContent = styleString;
  220.             document.head.append(style);
  221.         },
  222.  
  223.         getVideoId() {
  224.             const urlParams = new URLSearchParams(window.location.search);
  225.             return urlParams.get('v') || window.location.pathname.split('/').pop();
  226.         },
  227.  
  228.         getApiKey() {
  229.             const scripts = document.getElementsByTagName('script');
  230.             for (const script of scripts) {
  231.                 const match = script.textContent.match(/"INNERTUBE_API_KEY":\s*"([^"]+)"/);
  232.                 if (match && match[1]) return match[1];
  233.             }
  234.             return null;
  235.         },
  236.  
  237.         getClientInfo() {
  238.             const scripts = document.getElementsByTagName('script');
  239.             let clientName = null;
  240.             let clientVersion = null;
  241.             
  242.             for (const script of scripts) {
  243.                 const nameMatch = script.textContent.match(/"INNERTUBE_CLIENT_NAME":\s*"([^"]+)"/);
  244.                 const versionMatch = script.textContent.match(/"INNERTUBE_CLIENT_VERSION":\s*"([^"]+)"/);
  245.                 
  246.                 if (nameMatch && nameMatch[1]) clientName = nameMatch[1];
  247.                 if (versionMatch && versionMatch[1]) clientVersion = versionMatch[1];
  248.             }
  249.             
  250.             return { clientName, clientVersion };
  251.         },
  252.  
  253.         async fetchVideoDetails(videoId) {
  254.             try {
  255.                 const apiKey = this.getApiKey();
  256.                 if (!apiKey) return null;
  257.                 
  258.                 const { clientName, clientVersion } = this.getClientInfo();
  259.                 if (!clientName || !clientVersion) return null;
  260.                 
  261.                 const response = await fetch(`https://www.youtube.com/youtubei/v1/player?key=${apiKey}`, {
  262.                     method: 'POST',
  263.                     headers: {
  264.                         'Content-Type': 'application/json',
  265.                     },
  266.                     body: JSON.stringify({
  267.                         videoId: videoId,
  268.                         context: {
  269.                             client: {
  270.                                 clientName: clientName,
  271.                                 clientVersion: clientVersion,
  272.                             }
  273.                         }
  274.                     })
  275.                 });
  276.                 
  277.                 if (!response.ok) return null;
  278.                 const data = await response.json();
  279.                 if (data && data.videoDetails && data.videoDetails.title) {
  280.                     return data.videoDetails.title;
  281.                 }
  282.                 return 'YouTube Video';
  283.             } catch (error) {
  284.                 return 'YouTube Video';
  285.             }
  286.         },
  287.  
  288.         async getVideoTitle(callback) {
  289.             const videoId = this.getVideoId();
  290.             const title = await this.fetchVideoDetails(videoId);
  291.             callback(title || 'YouTube Video');
  292.         },
  293.  
  294.         formatTime(time) {
  295.             const date = new Date();
  296.             const dateString = `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`;
  297.             const timeString = [
  298.                 Math.floor(time / 3600),
  299.                 Math.floor((time % 3600) / 60),
  300.                 Math.floor(time % 60)
  301.             ].map(v => v.toString().padStart(2, '0')).join('-');
  302.             return `${dateString} ${timeString}`;
  303.         },
  304.  
  305.         async copyToClipboard(blob) {
  306.             const clipboardItem = new ClipboardItem({ "image/png": blob });
  307.             await navigator.clipboard.write([clipboardItem]);
  308.         },
  309.  
  310.         downloadScreenshot(blob, filename) {
  311.             const url = URL.createObjectURL(blob);
  312.             const a = document.createElement('a');
  313.             a.style.display = 'none';
  314.             a.href = url;
  315.             a.download = filename;
  316.             document.body.appendChild(a);
  317.             a.click();
  318.             document.body.removeChild(a);
  319.             URL.revokeObjectURL(url);
  320.         },
  321.  
  322.         captureScreenshot(player, action = 'download') {
  323.             if (!player) return;
  324.             
  325.             const canvas = document.createElement("canvas");
  326.             canvas.width = player.videoWidth;
  327.             canvas.height = player.videoHeight;
  328.             canvas.getContext('2d').drawImage(player, 0, 0, canvas.width, canvas.height);
  329.             
  330.             this.getVideoTitle((title) => {
  331.                 const time = player.currentTime;
  332.                 const filename = `${title} ${this.formatTime(time)}.${buttonConfig.extension}`;
  333.                 
  334.                 canvas.toBlob(async (blob) => {
  335.                     if (action === 'copy') {
  336.                         await this.copyToClipboard(blob);
  337.                     } else {
  338.                         this.downloadScreenshot(blob, filename);
  339.                     }
  340.                 }, `image/${buttonConfig.screenshotFormat}`);
  341.             });
  342.         }
  343.     };
  344.  
  345.     const regularVideo = {
  346.         init() {
  347.             this.waitForControls().then(() => {
  348.                 this.insertLoopElement();
  349.                 this.insertSaveScreenshotElement();
  350.                 this.insertCopyScreenshotElement();
  351.                 this.addObserver();
  352.                 this.addContextMenuListener();
  353.             });
  354.         },
  355.  
  356.         waitForControls() {
  357.             return new Promise((resolve, reject) => {
  358.                 let attempts = 0;
  359.                 const maxAttempts = 50;
  360.                 
  361.                 const checkControls = () => {
  362.                     const controls = document.querySelector('div.ytp-left-controls');
  363.                     if (controls) {
  364.                         resolve(controls);
  365.                     } else if (attempts >= maxAttempts) {
  366.                         reject(new Error('Controls not found after maximum attempts'));
  367.                     } else {
  368.                         attempts++;
  369.                         setTimeout(checkControls, 100);
  370.                     }
  371.                 };
  372.                 
  373.                 checkControls();
  374.             });
  375.         },
  376.  
  377.         insertLoopElement() {
  378.             const controls = document.querySelector('div.ytp-left-controls');
  379.             if (!controls) return;
  380.  
  381.             if (document.querySelector('.buttonLoopAndScreenshot-loop-button')) return;
  382.  
  383.             const newButton = document.createElement('a');
  384.             newButton.classList.add('ytp-button', 'buttonLoopAndScreenshot-loop-button');
  385.             newButton.title = 'Loop Video';
  386.             newButton.appendChild(iconUtils.createLoopIcon());
  387.             newButton.addEventListener('click', this.toggleLoopState);
  388.  
  389.             controls.appendChild(newButton);
  390.         },
  391.  
  392.         insertSaveScreenshotElement() {
  393.             const controls = document.querySelector('div.ytp-left-controls');
  394.             if (!controls) return;
  395.  
  396.             if (document.querySelector('.buttonLoopAndScreenshot-save-screenshot-button')) return;
  397.  
  398.             const newButton = document.createElement('a');
  399.             newButton.classList.add('ytp-button', 'buttonLoopAndScreenshot-save-screenshot-button');
  400.             newButton.title = 'Save Screenshot';
  401.             newButton.appendChild(iconUtils.createSaveScreenshotIcon());
  402.             newButton.addEventListener('click', this.handleSaveScreenshotClick);
  403.  
  404.             const loopButton = document.querySelector('.buttonLoopAndScreenshot-loop-button');
  405.             if (loopButton) {
  406.                 loopButton.parentNode.insertBefore(newButton, loopButton.nextSibling);
  407.             } else {
  408.                 controls.appendChild(newButton);
  409.             }
  410.         },
  411.         
  412.         insertCopyScreenshotElement() {
  413.             const controls = document.querySelector('div.ytp-left-controls');
  414.             if (!controls) return;
  415.  
  416.             if (document.querySelector('.buttonLoopAndScreenshot-copy-screenshot-button')) return;
  417.  
  418.             const newButton = document.createElement('a');
  419.             newButton.classList.add('ytp-button', 'buttonLoopAndScreenshot-copy-screenshot-button');
  420.             newButton.title = 'Copy Screenshot to Clipboard';
  421.             newButton.appendChild(iconUtils.createCopyScreenshotIcon());
  422.             newButton.addEventListener('click', this.handleCopyScreenshotClick);
  423.  
  424.             const saveButton = document.querySelector('.buttonLoopAndScreenshot-save-screenshot-button');
  425.             if (saveButton) {
  426.                 saveButton.parentNode.insertBefore(newButton, saveButton.nextSibling);
  427.             } else {
  428.                 controls.appendChild(newButton);
  429.             }
  430.         },
  431.  
  432.         toggleLoopState() {
  433.             const video = document.querySelector('video');
  434.             video.loop = !video.loop;
  435.             if (video.loop) video.play();
  436.  
  437.             regularVideo.updateToggleControls();
  438.         },
  439.  
  440.         updateToggleControls() {
  441.             const youtubeVideoLoop = document.querySelector('.buttonLoopAndScreenshot-loop-button');
  442.             youtubeVideoLoop.classList.toggle('active');
  443.             youtubeVideoLoop.setAttribute('title', this.isActive() ? 'Stop Looping' : 'Loop Video');
  444.         },
  445.  
  446.         isActive() {
  447.             const youtubeVideoLoop = document.querySelector('.buttonLoopAndScreenshot-loop-button');
  448.             return youtubeVideoLoop.classList.contains('active');
  449.         },
  450.  
  451.         addObserver() {
  452.             const video = document.querySelector('video');
  453.             new MutationObserver((mutations) => {
  454.                 mutations.forEach(() => {
  455.                     if ((video.getAttribute('loop') === null && this.isActive()) ||
  456.                         (video.getAttribute('loop') !== null && !this.isActive())) this.updateToggleControls();
  457.                 });
  458.             }).observe(video, { attributes: true, attributeFilter: ['loop'] });
  459.         },
  460.  
  461.         addContextMenuListener() {
  462.             const video = document.querySelector('video');
  463.             video.addEventListener('contextmenu', () => {
  464.                 setTimeout(() => {
  465.                     const checkbox = document.querySelector('[role=menuitemcheckbox]');
  466.                     checkbox.setAttribute('aria-checked', this.isActive());
  467.                     checkbox.addEventListener('click', this.toggleLoopState);
  468.                 }, 50);
  469.             });
  470.         },
  471.  
  472.         handleSaveScreenshotClick(event) {
  473.             const button = event.currentTarget;
  474.             button.classList.add('clicked');
  475.             setTimeout(() => {
  476.                 button.classList.remove('clicked');
  477.             }, buttonConfig.clickDuration);
  478.  
  479.             const player = document.querySelector('video');
  480.             buttonUtils.captureScreenshot(player, 'download');
  481.         },
  482.         
  483.         handleCopyScreenshotClick(event) {
  484.             const button = event.currentTarget;
  485.             button.classList.add('clicked');
  486.             setTimeout(() => {
  487.                 button.classList.remove('clicked');
  488.             }, buttonConfig.clickDuration);
  489.  
  490.             const player = document.querySelector('video');
  491.             buttonUtils.captureScreenshot(player, 'copy');
  492.         }
  493.     };
  494.  
  495.     const shortsVideo = {
  496.         init() {
  497.             this.insertSaveScreenshotElement();
  498.             this.insertCopyScreenshotElement();
  499.         },
  500.     
  501.         insertSaveScreenshotElement() {
  502.             const shortsContainer = document.querySelector('ytd-reel-video-renderer[is-active] #actions');
  503.             if (shortsContainer && !shortsContainer.querySelector('.buttonLoopAndScreenshot-shorts-save-button')) {
  504.                 const iconDiv = document.createElement('div');
  505.                 iconDiv.className = 'buttonLoopAndScreenshot-shorts-save-button';
  506.                 iconDiv.title = 'Save Screenshot';
  507.                 iconDiv.appendChild(iconUtils.createSaveScreenshotIcon(true));
  508.                 
  509.                 const customShortsIcon = shortsContainer.querySelector('#custom-shorts-icon');
  510.                 if (customShortsIcon) {
  511.                     customShortsIcon.parentNode.insertBefore(iconDiv, customShortsIcon);
  512.                 } else {
  513.                     shortsContainer.insertBefore(iconDiv, shortsContainer.firstChild);
  514.                 }
  515.     
  516.                 iconDiv.addEventListener('click', (event) => {
  517.                     const button = event.currentTarget;
  518.                     button.classList.add('clicked');
  519.                     
  520.                     setTimeout(() => {
  521.                         button.classList.remove('clicked');
  522.                     }, buttonConfig.clickDuration);
  523.                     
  524.                     this.captureScreenshot('download');
  525.                 });
  526.             }
  527.         },
  528.         
  529.         insertCopyScreenshotElement() {
  530.             const shortsContainer = document.querySelector('ytd-reel-video-renderer[is-active] #actions');
  531.             if (shortsContainer && !shortsContainer.querySelector('.buttonLoopAndScreenshot-shorts-copy-button')) {
  532.                 const iconDiv = document.createElement('div');
  533.                 iconDiv.className = 'buttonLoopAndScreenshot-shorts-copy-button';
  534.                 iconDiv.title = 'Copy Screenshot to Clipboard';
  535.                 iconDiv.appendChild(iconUtils.createCopyScreenshotIcon(true));
  536.                 
  537.                 const saveButton = shortsContainer.querySelector('.buttonLoopAndScreenshot-shorts-save-button');
  538.                 if (saveButton) {
  539.                     saveButton.parentNode.insertBefore(iconDiv, saveButton.nextSibling);
  540.                 } else {
  541.                     const customShortsIcon = shortsContainer.querySelector('#custom-shorts-icon');
  542.                     if (customShortsIcon) {
  543.                         customShortsIcon.parentNode.insertBefore(iconDiv, customShortsIcon);
  544.                     } else {
  545.                         shortsContainer.insertBefore(iconDiv, shortsContainer.firstChild);
  546.                     }
  547.                 }
  548.     
  549.                 iconDiv.addEventListener('click', (event) => {
  550.                     const button = event.currentTarget;
  551.                     button.classList.add('clicked');
  552.                     
  553.                     setTimeout(() => {
  554.                         button.classList.remove('clicked');
  555.                     }, buttonConfig.clickDuration);
  556.                     
  557.                     this.captureScreenshot('copy');
  558.                 });
  559.             }
  560.         },
  561.  
  562.         captureScreenshot(action) {
  563.             const player = document.querySelector('ytd-reel-video-renderer[is-active] video');
  564.             buttonUtils.captureScreenshot(player, action);
  565.         }
  566.     };
  567.  
  568.     const themeHandler = {
  569.         init() {
  570.             this.updateStyles();
  571.             this.addObserver();
  572.         },
  573.  
  574.         updateStyles() {
  575.             const isDarkTheme = document.documentElement.hasAttribute('dark');
  576.             document.documentElement.classList.toggle('dark-theme', isDarkTheme);
  577.         },
  578.  
  579.         addObserver() {
  580.             const observer = new MutationObserver(() => this.updateStyles());
  581.             observer.observe(document.documentElement, {
  582.                 attributes: true,
  583.                 attributeFilter: ['dark']
  584.             });
  585.         }
  586.     };
  587.  
  588.     function initialize() {
  589.         buttonUtils.addStyle(buttonCSS);
  590.         waitForVideo().then(initializeWhenReady);
  591.     }
  592.  
  593.     function waitForVideo() {
  594.         return new Promise((resolve) => {
  595.             const checkVideo = () => {
  596.                 if (document.querySelector('video')) {
  597.                     resolve();
  598.                 } else {
  599.                     setTimeout(checkVideo, 100);
  600.                 }
  601.             };
  602.             checkVideo();
  603.         });
  604.     }
  605.  
  606.     function initializeWhenReady() {
  607.         initializeFeatures();
  608.     }
  609.  
  610.     function initializeFeatures() {
  611.         regularVideo.init();
  612.         themeHandler.init();
  613.         initializeShortsFeatures();
  614.     }
  615.  
  616.     function initializeShortsFeatures() {
  617.         if (window.location.pathname.includes('/shorts/')) {
  618.             setTimeout(shortsVideo.init.bind(shortsVideo), 500);
  619.         }
  620.     }
  621.  
  622.     const shortsObserver = new MutationObserver((mutations) => {
  623.         for (let mutation of mutations) {
  624.             if (mutation.type === 'childList') {
  625.                 initializeShortsFeatures();
  626.             }
  627.         }
  628.     });
  629.  
  630.     shortsObserver.observe(document.body, { childList: true, subtree: true });
  631.  
  632.     window.addEventListener('yt-navigate-finish', initializeShortsFeatures);
  633.  
  634.     document.addEventListener('yt-action', function(event) {
  635.         if (event.detail && event.detail.actionName === 'yt-reload-continuation-items-command') {
  636.             initializeShortsFeatures();
  637.         }
  638.     });
  639.  
  640.     initialize();
  641. })();

欢迎访问Greasy Fork镜像

土豆服务器，请按需使用

镜像地址随时可能被墙，建议加群获取最新地址

加入Q群

QingJ © 2025

镜像随时可能失效，请加Q群300939539或关注我们的公众号极客氢云获取最新地址