☰

YouTube Enhancer (Loop & Screenshot Button)

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

当前为 2024-11-03 提交的版本，查看 最新版本。

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