☰

YouTube Enhancer (Loop & Screenshot Button)

Integrating loop and screenshot buttons into the video and shorts player to enhance user functionality.

目前為 2024-12-14 提交的版本，檢視 最新版本。

  1. // ==UserScript==
  2. // @name         YouTube Enhancer (Loop & Screenshot Button)
  3. // @description  Integrating loop and screenshot buttons into the video and shorts player to enhance user functionality.
  4. // @icon         https://raw.githubusercontent.com/exyezed/youtube-enhancer/refs/heads/main/extras/youtube-enhancer.png
  5. // @version      1.4
  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        GM_xmlhttpRequest
  12. // ==/UserScript==
  13.  
  14. (function() {
  15.     'use strict';
  16.  
  17.     const YouTubeEnhancerLoopScreenshotConfig = {
  18.         screenshotFormat: "png",
  19.         extension: 'png',
  20.         screenshotFunctionality: 2,
  21.         clickDuration: 200
  22.     };
  23.  
  24.     const YouTubeEnhancerLoopScreenshotCSS = `
  25.     a.YouTubeEnhancerLoopScreenshot-loop-button, 
  26.     a.YouTubeEnhancerLoopScreenshot-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.YouTubeEnhancerLoopScreenshot-loop-button svg, 
  37.     a.YouTubeEnhancerLoopScreenshot-screenshot-button svg {
  38.         width: 24px;
  39.         height: 24px;
  40.         vertical-align: middle;
  41.     }
  42.  
  43.     a.YouTubeEnhancerLoopScreenshot-loop-button.active svg {
  44.         fill: url(#buttonGradient);
  45.     }
  46.  
  47.     .YouTubeEnhancerLoopScreenshot-screenshot-button {
  48.         position: relative;
  49.         display: flex;
  50.         align-items: center;
  51.         justify-content: center;
  52.         width: 48px;
  53.         height: 48px;
  54.     }
  55.  
  56.     .YouTubeEnhancerLoopScreenshot-screenshot-button .icon-container {
  57.         position: absolute;
  58.         top: 50%;
  59.         left: 50%;
  60.         transform: translate(-50%, -50%);
  61.         width: 24px;
  62.         height: 24px;
  63.     }
  64.  
  65.     .YouTubeEnhancerLoopScreenshot-screenshot-button .default-icon,
  66.     .YouTubeEnhancerLoopScreenshot-screenshot-button .hover-icon {
  67.         position: absolute;
  68.         top: 0;
  69.         left: 0;
  70.         width: 100%;
  71.         height: 100%;
  72.         transition: opacity 0.2s ease;
  73.     }
  74.  
  75.     .YouTubeEnhancerLoopScreenshot-screenshot-button .default-icon {
  76.         opacity: 1;
  77.     }
  78.  
  79.     .YouTubeEnhancerLoopScreenshot-screenshot-button .hover-icon {
  80.         opacity: 0;
  81.     }
  82.  
  83.     .YouTubeEnhancerLoopScreenshot-screenshot-button:hover .default-icon {
  84.         opacity: 0;
  85.     }
  86.  
  87.     .YouTubeEnhancerLoopScreenshot-screenshot-button:hover .hover-icon {
  88.         opacity: 1;
  89.     }
  90.  
  91.     .YouTubeEnhancerLoopScreenshot-screenshot-button.clicked .hover-icon {
  92.         fill: url(#buttonGradient);
  93.     }
  94.  
  95.     .YouTubeEnhancerLoopScreenshot-shorts-screenshot-button {
  96.         display: flex;
  97.         align-items: center;
  98.         justify-content: center;
  99.         margin-top: 16px;
  100.         width: 48px;
  101.         height: 48px;
  102.         border-radius: 50%;
  103.         cursor: pointer;
  104.         transition: background-color 0.3s;
  105.     }
  106.  
  107.     .YouTubeEnhancerLoopScreenshot-shorts-screenshot-button svg {
  108.         width: 24px;
  109.         height: 24px;
  110.         transition: fill 0.1s ease;
  111.     }
  112.  
  113.     .YouTubeEnhancerLoopScreenshot-shorts-screenshot-button svg path {
  114.         transition: fill 0.1s ease;
  115.     }
  116.  
  117.     .YouTubeEnhancerLoopScreenshot-shorts-screenshot-button.clicked svg path {
  118.         fill: url(#shortsButtonGradient) !important;
  119.     }
  120.  
  121.     html[dark] .YouTubeEnhancerLoopScreenshot-shorts-screenshot-button {
  122.         background-color: rgba(255, 255, 255, 0.1);
  123.     }
  124.  
  125.     html[dark] .YouTubeEnhancerLoopScreenshot-shorts-screenshot-button:hover {
  126.         background-color: rgba(255, 255, 255, 0.2);
  127.     }
  128.  
  129.     html[dark] .YouTubeEnhancerLoopScreenshot-shorts-screenshot-button svg path {
  130.         fill: white;
  131.     }
  132.  
  133.     html:not([dark]) .YouTubeEnhancerLoopScreenshot-shorts-screenshot-button {
  134.         background-color: rgba(0, 0, 0, 0.05);
  135.     }
  136.  
  137.     html:not([dark]) .YouTubeEnhancerLoopScreenshot-shorts-screenshot-button:hover {
  138.         background-color: rgba(0, 0, 0, 0.1);
  139.     }
  140.  
  141.     html:not([dark]) .YouTubeEnhancerLoopScreenshot-shorts-screenshot-button svg path {
  142.         fill: #030303;
  143.     }
  144.     `;
  145.     
  146.     const YouTubeEnhancerLoopScreenshotUtils = {
  147.         addStyle(styleString) {
  148.             const style = document.createElement('style');
  149.             style.textContent = styleString;
  150.             document.head.append(style);
  151.         },
  152.  
  153.         getYouTubeVideoLoopSVG() {
  154.             const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
  155.             svg.setAttribute('xmlns', 'http://www.w3.org/2000/svg');
  156.             svg.setAttribute('height', '24px');
  157.             svg.setAttribute('viewBox', '0 -960 960 960');
  158.             svg.setAttribute('width', '24px');
  159.             svg.setAttribute('fill', '#e8eaed');
  160.             
  161.             const defs = document.createElementNS('http://www.w3.org/2000/svg', 'defs');
  162.             const gradient = document.createElementNS('http://www.w3.org/2000/svg', 'linearGradient');
  163.             gradient.setAttribute('id', 'buttonGradient');
  164.             gradient.setAttribute('x1', '0%');
  165.             gradient.setAttribute('y1', '0%');
  166.             gradient.setAttribute('x2', '100%');
  167.             gradient.setAttribute('y2', '100%');
  168.             
  169.             const stop1 = document.createElementNS('http://www.w3.org/2000/svg', 'stop');
  170.             stop1.setAttribute('offset', '0%');
  171.             stop1.setAttribute('style', 'stop-color:#f03');
  172.             
  173.             const stop2 = document.createElementNS('http://www.w3.org/2000/svg', 'stop');
  174.             stop2.setAttribute('offset', '100%');
  175.             stop2.setAttribute('style', 'stop-color:#ff2791');
  176.             
  177.             gradient.appendChild(stop1);
  178.             gradient.appendChild(stop2);
  179.             defs.appendChild(gradient);
  180.             svg.appendChild(defs);
  181.             
  182.             const path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
  183.             path.setAttribute('d', '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');
  184.             
  185.             svg.appendChild(path);
  186.             return svg;
  187.         },
  188.  
  189.         getYouTubeVideoScreenshotSVG() {
  190.             const container = document.createElement('div');
  191.             container.className = 'icon-container';
  192.             
  193.             const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
  194.             svg.setAttribute('xmlns', 'http://www.w3.org/2000/svg');
  195.             svg.setAttribute('height', '24px');
  196.             svg.setAttribute('viewBox', '0 -960 960 960');
  197.             svg.setAttribute('width', '24px');
  198.             svg.setAttribute('fill', '#e8eaed');
  199.             svg.classList.add('default-icon');
  200.             
  201.             const defs = document.createElementNS('http://www.w3.org/2000/svg', 'defs');
  202.             const gradient = document.createElementNS('http://www.w3.org/2000/svg', 'linearGradient');
  203.             gradient.setAttribute('id', 'buttonGradient');
  204.             gradient.setAttribute('x1', '0%');
  205.             gradient.setAttribute('y1', '0%');
  206.             gradient.setAttribute('x2', '100%');
  207.             gradient.setAttribute('y2', '100%');
  208.             
  209.             const stop1 = document.createElementNS('http://www.w3.org/2000/svg', 'stop');
  210.             stop1.setAttribute('offset', '0%');
  211.             stop1.setAttribute('style', 'stop-color:#f03');
  212.             
  213.             const stop2 = document.createElementNS('http://www.w3.org/2000/svg', 'stop');
  214.             stop2.setAttribute('offset', '100%');
  215.             stop2.setAttribute('style', 'stop-color:#ff2791');
  216.             
  217.             gradient.appendChild(stop1);
  218.             gradient.appendChild(stop2);
  219.             defs.appendChild(gradient);
  220.             svg.appendChild(defs);
  221.             
  222.             const path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
  223.             path.setAttribute('d', 'M240-280h480L570-480 450-320l-90-120-120 160Zm-80 160q-33 0-56.5-23.5T80-200v-480q0-33 23.5-56.5T160-760h126l74-80h240l74 80h126q33 0 56.5 23.5T880-680v480q0 33-23.5 56.5T800-120H160Zm0-80h640v-480H638l-73-80H395l-73 80H160v480Zm320-240Z');
  224.             svg.appendChild(path);
  225.     
  226.             const hoverSvg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
  227.             hoverSvg.setAttribute('xmlns', 'http://www.w3.org/2000/svg');
  228.             hoverSvg.setAttribute('height', '24px');
  229.             hoverSvg.setAttribute('viewBox', '0 0 24 24');
  230.             hoverSvg.setAttribute('width', '24px');
  231.             hoverSvg.setAttribute('fill', '#e8eaed');
  232.             hoverSvg.classList.add('hover-icon');
  233.     
  234.             const hoverPath = document.createElementNS('http://www.w3.org/2000/svg', 'path');
  235.             hoverPath.setAttribute('d', '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');
  236.     
  237.             hoverSvg.appendChild(defs.cloneNode(true));
  238.             hoverSvg.appendChild(hoverPath);
  239.     
  240.             container.appendChild(svg);
  241.             container.appendChild(hoverSvg);
  242.             
  243.             return container;
  244.         },
  245.  
  246.         getShortsScreenshotSVG() {
  247.             const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
  248.             svg.setAttribute('xmlns', 'http://www.w3.org/2000/svg');
  249.             svg.setAttribute('height', '24px');
  250.             svg.setAttribute('viewBox', '0 0 24 24');
  251.             svg.setAttribute('width', '24px');
  252.             
  253.             const defs = document.createElementNS('http://www.w3.org/2000/svg', 'defs');
  254.             const gradient = document.createElementNS('http://www.w3.org/2000/svg', 'linearGradient');
  255.             gradient.setAttribute('id', 'shortsButtonGradient');
  256.             gradient.setAttribute('x1', '0%');
  257.             gradient.setAttribute('y1', '0%');
  258.             gradient.setAttribute('x2', '100%');
  259.             gradient.setAttribute('y2', '100%');
  260.             
  261.             const stop1 = document.createElementNS('http://www.w3.org/2000/svg', 'stop');
  262.             stop1.setAttribute('offset', '0%');
  263.             stop1.setAttribute('style', 'stop-color:#f03');
  264.             
  265.             const stop2 = document.createElementNS('http://www.w3.org/2000/svg', 'stop');
  266.             stop2.setAttribute('offset', '100%');
  267.             stop2.setAttribute('style', 'stop-color:#ff2791');
  268.             
  269.             gradient.appendChild(stop1);
  270.             gradient.appendChild(stop2);
  271.             defs.appendChild(gradient);
  272.             svg.appendChild(defs);
  273.             
  274.             const path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
  275.             path.setAttribute('d', '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');
  276.             
  277.             svg.appendChild(path);
  278.             return svg;
  279.         },
  280.  
  281.         getVideoId() {
  282.             const urlParams = new URLSearchParams(window.location.search);
  283.             return urlParams.get('v') || window.location.pathname.split('/').pop();
  284.         },
  285.  
  286.         getVideoTitle(callback) {
  287.             const videoId = this.getVideoId();
  288.             GM_xmlhttpRequest({
  289.                 method: "GET",
  290.                 url: `https://exyezed.vercel.app/api/video/${videoId}`,
  291.                 onload: function(response) {
  292.                     if (response.status === 200) {
  293.                         const data = JSON.parse(response.responseText);
  294.                         callback(data.title);
  295.                     } else {
  296.                         callback('YouTube Video');
  297.                     }
  298.                 },
  299.                 onerror: function() {
  300.                     callback('YouTube Video');
  301.                 }
  302.             });
  303.         },
  304.  
  305.         formatTime(time) {
  306.             const date = new Date();
  307.             const dateString = `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`;
  308.             const timeString = [
  309.                 Math.floor(time / 3600),
  310.                 Math.floor((time % 3600) / 60),
  311.                 Math.floor(time % 60)
  312.             ].map(v => v.toString().padStart(2, '0')).join('-');
  313.             return `${dateString} ${timeString}`;
  314.         },
  315.  
  316.         async copyToClipboard(blob) {
  317.             const clipboardItem = new ClipboardItem({ "image/png": blob });
  318.             await navigator.clipboard.write([clipboardItem]);
  319.         },
  320.  
  321.         downloadScreenshot(blob, filename) {
  322.             const url = URL.createObjectURL(blob);
  323.             const a = document.createElement('a');
  324.             a.style.display = 'none';
  325.             a.href = url;
  326.             a.download = filename;
  327.             document.body.appendChild(a);
  328.             a.click();
  329.             document.body.removeChild(a);
  330.             URL.revokeObjectURL(url);
  331.         },
  332.  
  333.         captureScreenshot(player) {
  334.             if (!player) return;
  335.             
  336.             const canvas = document.createElement("canvas");
  337.             canvas.width = player.videoWidth;
  338.             canvas.height = player.videoHeight;
  339.             canvas.getContext('2d').drawImage(player, 0, 0, canvas.width, canvas.height);
  340.             
  341.             this.getVideoTitle((title) => {
  342.                 const time = player.currentTime;
  343.                 const filename = `${title} ${this.formatTime(time)}.${YouTubeEnhancerLoopScreenshotConfig.extension}`;
  344.                 
  345.                 canvas.toBlob(async (blob) => {
  346.                     const { screenshotFunctionality } = YouTubeEnhancerLoopScreenshotConfig;
  347.                     if (screenshotFunctionality >= 1) {
  348.                         await this.copyToClipboard(blob);
  349.                     }
  350.                     if (screenshotFunctionality !== 1) {
  351.                         this.downloadScreenshot(blob, filename);
  352.                     }
  353.                 }, `image/${YouTubeEnhancerLoopScreenshotConfig.screenshotFormat}`);
  354.             });
  355.         }
  356.     };
  357.  
  358.     const YouTubeEnhancerLoopScreenshotRegularVideo = {
  359.         init() {
  360.             this.waitForControls().then(() => {
  361.                 this.insertLoopElement();
  362.                 this.insertScreenshotElement();
  363.                 this.addObserver();
  364.                 this.addContextMenuListener();
  365.             }).catch(error => {
  366.                 console.error('Failed to initialize YouTube Enhancer:', error);
  367.             });
  368.         },
  369.  
  370.         waitForControls() {
  371.             return new Promise((resolve, reject) => {
  372.                 let attempts = 0;
  373.                 const maxAttempts = 50;
  374.                 
  375.                 const checkControls = () => {
  376.                     const controls = document.querySelector('div.ytp-left-controls');
  377.                     if (controls) {
  378.                         resolve(controls);
  379.                     } else if (attempts >= maxAttempts) {
  380.                         reject(new Error('Controls not found after maximum attempts'));
  381.                     } else {
  382.                         attempts++;
  383.                         setTimeout(checkControls, 100);
  384.                     }
  385.                 };
  386.                 
  387.                 checkControls();
  388.             });
  389.         },
  390.  
  391.         insertLoopElement() {
  392.             const controls = document.querySelector('div.ytp-left-controls');
  393.             if (!controls) return;
  394.  
  395.             if (document.querySelector('.YouTubeEnhancerLoopScreenshot-loop-button')) return;
  396.  
  397.             const newButton = document.createElement('a');
  398.             newButton.classList.add('ytp-button', 'YouTubeEnhancerLoopScreenshot-loop-button');
  399.             newButton.title = 'Loop Video';
  400.             newButton.appendChild(YouTubeEnhancerLoopScreenshotUtils.getYouTubeVideoLoopSVG());
  401.             newButton.addEventListener('click', this.toggleLoopState);
  402.  
  403.             controls.appendChild(newButton);
  404.         },
  405.  
  406.         insertScreenshotElement() {
  407.             const controls = document.querySelector('div.ytp-left-controls');
  408.             if (!controls) return;
  409.  
  410.             if (document.querySelector('.YouTubeEnhancerLoopScreenshot-screenshot-button')) return;
  411.  
  412.             const newButton = document.createElement('a');
  413.             newButton.classList.add('ytp-button', 'YouTubeEnhancerLoopScreenshot-screenshot-button');
  414.             newButton.title = 'Take Screenshot';
  415.             newButton.appendChild(YouTubeEnhancerLoopScreenshotUtils.getYouTubeVideoScreenshotSVG());
  416.             newButton.addEventListener('click', this.handleScreenshotClick);
  417.  
  418.             const loopButton = document.querySelector('.YouTubeEnhancerLoopScreenshot-loop-button');
  419.             if (loopButton) {
  420.                 loopButton.parentNode.insertBefore(newButton, loopButton.nextSibling);
  421.             } else {
  422.                 controls.appendChild(newButton);
  423.             }
  424.         },
  425.  
  426.         toggleLoopState() {
  427.             const video = document.querySelector('video');
  428.             video.loop = !video.loop;
  429.             if (video.loop) video.play();
  430.  
  431.             YouTubeEnhancerLoopScreenshotRegularVideo.updateToggleControls();
  432.         },
  433.  
  434.         updateToggleControls() {
  435.             const youtubeVideoLoop = document.querySelector('.YouTubeEnhancerLoopScreenshot-loop-button');
  436.             youtubeVideoLoop.classList.toggle('active');
  437.             youtubeVideoLoop.setAttribute('title', this.isActive() ? 'Stop Looping' : 'Loop Video');
  438.         },
  439.  
  440.         isActive() {
  441.             const youtubeVideoLoop = document.querySelector('.YouTubeEnhancerLoopScreenshot-loop-button');
  442.             return youtubeVideoLoop.classList.contains('active');
  443.         },
  444.  
  445.         addObserver() {
  446.             const video = document.querySelector('video');
  447.             new MutationObserver((mutations) => {
  448.                 mutations.forEach(() => {
  449.                     if ((video.getAttribute('loop') === null && this.isActive()) ||
  450.                         (video.getAttribute('loop') !== null && !this.isActive())) this.updateToggleControls();
  451.                 });
  452.             }).observe(video, { attributes: true, attributeFilter: ['loop'] });
  453.         },
  454.  
  455.         addContextMenuListener() {
  456.             const video = document.querySelector('video');
  457.             video.addEventListener('contextmenu', () => {
  458.                 setTimeout(() => {
  459.                     const checkbox = document.querySelector('[role=menuitemcheckbox]');
  460.                     checkbox.setAttribute('aria-checked', this.isActive());
  461.                     checkbox.addEventListener('click', this.toggleLoopState);
  462.                 }, 50);
  463.             });
  464.         },
  465.  
  466.         handleScreenshotClick(event) {
  467.             const button = event.currentTarget;
  468.             button.classList.add('clicked');
  469.             setTimeout(() => {
  470.                 button.classList.remove('clicked');
  471.             }, YouTubeEnhancerLoopScreenshotConfig.clickDuration);
  472.  
  473.             const player = document.querySelector('video');
  474.             YouTubeEnhancerLoopScreenshotUtils.captureScreenshot(player);
  475.         }
  476.     };
  477.  
  478.     const YouTubeEnhancerLoopScreenshotShorts = {
  479.         init() {
  480.             this.insertScreenshotElement();
  481.         },
  482.     
  483.         insertScreenshotElement() {
  484.             const shortsContainer = document.querySelector('ytd-reel-video-renderer[is-active] #actions');
  485.             if (shortsContainer && !shortsContainer.querySelector('.YouTubeEnhancerLoopScreenshot-shorts-screenshot-button')) {
  486.                 const iconDiv = document.createElement('div');
  487.                 iconDiv.className = 'YouTubeEnhancerLoopScreenshot-shorts-screenshot-button';
  488.                 iconDiv.appendChild(YouTubeEnhancerLoopScreenshotUtils.getShortsScreenshotSVG());
  489.                 
  490.                 const customShortsIcon = shortsContainer.querySelector('#custom-shorts-icon');
  491.                 if (customShortsIcon) {
  492.                     customShortsIcon.parentNode.insertBefore(iconDiv, customShortsIcon);
  493.                 } else {
  494.                     shortsContainer.insertBefore(iconDiv, shortsContainer.firstChild);
  495.                 }
  496.     
  497.                 iconDiv.addEventListener('click', (event) => {
  498.                     const button = event.currentTarget;
  499.                     button.classList.add('clicked');
  500.                     
  501.                     const path = button.querySelector('svg path');
  502.                     if (path) {
  503.                         path.style.fill = 'url(#shortsButtonGradient)';
  504.                     }
  505.                     
  506.                     setTimeout(() => {
  507.                         button.classList.remove('clicked');
  508.                         if (path) {
  509.                             path.style.fill = '';
  510.                         }
  511.                     }, YouTubeEnhancerLoopScreenshotConfig.clickDuration);
  512.                     
  513.                     this.captureScreenshot();
  514.                 });
  515.             }
  516.         },
  517.  
  518.         captureScreenshot() {
  519.             const player = document.querySelector('ytd-reel-video-renderer[is-active] video');
  520.             YouTubeEnhancerLoopScreenshotUtils.captureScreenshot(player);
  521.         }
  522.     };
  523.  
  524.     const YouTubeEnhancerLoopScreenshotTheme = {
  525.         init() {
  526.             this.updateStyles();
  527.             this.addObserver();
  528.         },
  529.  
  530.         updateStyles() {
  531.             const isDarkTheme = document.documentElement.hasAttribute('dark');
  532.             document.documentElement.classList.toggle('dark-theme', isDarkTheme);
  533.         },
  534.  
  535.         addObserver() {
  536.             const observer = new MutationObserver(() => this.updateStyles());
  537.             observer.observe(document.documentElement, {
  538.                 attributes: true,
  539.                 attributeFilter: ['dark']
  540.             });
  541.         }
  542.     };
  543.  
  544.     function YouTubeEnhancerLoopScreenshotInit() {
  545.         YouTubeEnhancerLoopScreenshotUtils.addStyle(YouTubeEnhancerLoopScreenshotCSS);
  546.         waitForVideo().then(initializeWhenReady);
  547.     }
  548.  
  549.     function waitForVideo() {
  550.         return new Promise((resolve) => {
  551.             const checkVideo = () => {
  552.                 if (document.querySelector('video')) {
  553.                     resolve();
  554.                 } else {
  555.                     setTimeout(checkVideo, 100);
  556.                 }
  557.             };
  558.             checkVideo();
  559.         });
  560.     }
  561.  
  562.     function initializeWhenReady() {
  563.         YouTubeEnhancerLoopScreenshotInitializeFeatures();
  564.     }
  565.  
  566.     function YouTubeEnhancerLoopScreenshotInitializeFeatures() {
  567.         YouTubeEnhancerLoopScreenshotRegularVideo.init();
  568.         YouTubeEnhancerLoopScreenshotTheme.init();
  569.         YouTubeEnhancerLoopScreenshotInitializeShortsFeatures();
  570.     }
  571.  
  572.     function YouTubeEnhancerLoopScreenshotInitializeShortsFeatures() {
  573.         if (window.location.pathname.includes('/shorts/')) {
  574.             setTimeout(YouTubeEnhancerLoopScreenshotShorts.init.bind(YouTubeEnhancerLoopScreenshotShorts), 500);
  575.         }
  576.     }
  577.  
  578.     const YouTubeEnhancerLoopScreenshotShortsObserver = new MutationObserver((mutations) => {
  579.         for (let mutation of mutations) {
  580.             if (mutation.type === 'childList') {
  581.                 YouTubeEnhancerLoopScreenshotInitializeShortsFeatures();
  582.             }
  583.         }
  584.     });
  585.  
  586.     YouTubeEnhancerLoopScreenshotShortsObserver.observe(document.body, { childList: true, subtree: true });
  587.  
  588.     window.addEventListener('yt-navigate-finish', YouTubeEnhancerLoopScreenshotInitializeShortsFeatures);
  589.  
  590.     document.addEventListener('yt-action', function(event) {
  591.         if (event.detail && event.detail.actionName === 'yt-reload-continuation-items-command') {
  592.             YouTubeEnhancerLoopScreenshotInitializeShortsFeatures();
  593.         }
  594.     });
  595.  
  596.     YouTubeEnhancerLoopScreenshotInit();
  597.     console.log('YouTube Enhancer (Loop & Screenshot Button) is running');
  598. })();