☰

YouTube Enhancer (Real-Time Subscriber Count)

Adds an overlay to YouTube channel banners showing real-time subscriber count.

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

  1. // ==UserScript==
  2. // @name         YouTube Enhancer (Real-Time Subscriber Count)
  3. // @description  Adds an overlay to YouTube channel banners showing real-time subscriber count.
  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.     // Constants
  18.     const OPTIONS = ['subscribers', 'views', 'videos'];
  19.     const FONT_LINK = "https://fonts.googleapis.com/css2?family=Rubik:wght@400;700&display=swap";
  20.     const API_BASE_URL = 'https://exyezed.vercel.app/api/channel/';
  21.     const STATS_API_URL = 'https://api.livecounts.io/youtube-live-subscriber-counter/stats/';
  22.     const DEFAULT_UPDATE_INTERVAL = 2000;
  23.     const DEFAULT_OVERLAY_OPACITY = 0.75;
  24.  
  25.     // Global variables
  26.     let overlay = null;
  27.     let isUpdating = false;
  28.     let intervalId = null;
  29.     let currentChannelName = null;
  30.     let updateInterval = parseInt(localStorage.getItem('youtubeEnhancerInterval')) || DEFAULT_UPDATE_INTERVAL;
  31.     let overlayOpacity = parseFloat(localStorage.getItem('youtubeEnhancerOpacity')) || DEFAULT_OVERLAY_OPACITY;
  32.  
  33.     const lastSuccessfulStats = new Map();
  34.     const previousStats = new Map();
  35.  
  36.     // Initialization
  37.     function init() {
  38.         loadFonts();
  39.         initializeLocalStorage();
  40.         addStyles();
  41.         observePageChanges();
  42.         addNavigationListener();
  43.     }
  44.  
  45.     function loadFonts() {
  46.         const fontLink = document.createElement("link");
  47.         fontLink.rel = "stylesheet";
  48.         fontLink.href = FONT_LINK;
  49.         document.head.appendChild(fontLink);
  50.     }
  51.  
  52.     function initializeLocalStorage() {
  53.         OPTIONS.forEach(option => {
  54.             if (localStorage.getItem(`show-${option}`) === null) {
  55.                 localStorage.setItem(`show-${option}`, 'true');
  56.             }
  57.         });
  58.     }
  59.  
  60.     function addStyles() {
  61.         const style = document.createElement('style');
  62.         style.textContent = `
  63.             .settings-button {
  64.                 position: absolute;
  65.                 top: 12px;
  66.                 right: 12px;
  67.                 width: 16px;
  68.                 height: 16px;
  69.                 cursor: pointer;
  70.                 z-index: 2;
  71.                 transition: transform 0.3s ease;
  72.             }
  73.             .settings-button:hover {
  74.                 transform: rotate(45deg);
  75.             }
  76.             .settings-menu {
  77.                 position: absolute;
  78.                 top: 35px;
  79.                 right: 12px;
  80.                 background: rgba(0, 0, 0, 0.95);
  81.                 padding: 10px;
  82.                 border-radius: 6px;
  83.                 z-index: 2;
  84.                 display: none;
  85.             }
  86.             .settings-menu.show {
  87.                 display: flex;
  88.             }
  89.             .interval-slider, .opacity-slider {
  90.                 width: 160px;
  91.                 margin: 5px 0;
  92.                 height: 4px;
  93.             }
  94.             .interval-value, .opacity-value {
  95.                 color: white;
  96.                 font-size: 12px;
  97.                 margin-top: 3px;
  98.                 margin-bottom: 8px;
  99.             }
  100.             .setting-group {
  101.                 margin-bottom: 10px;
  102.             }
  103.             .setting-group:last-child {
  104.                 margin-bottom: 0;
  105.             }
  106.             @keyframes spin {
  107.                 from { transform: rotate(0deg); }
  108.                 to { transform: rotate(360deg); }
  109.             }
  110.         `;
  111.         document.head.appendChild(style);
  112.     }
  113.  
  114.     // UI Components
  115.     function createSettingsButton() {
  116.         const button = document.createElement('div');
  117.         button.className = 'settings-button';
  118.         
  119.         const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
  120.         svg.setAttribute("xmlns", "http://www.w3.org/2000/svg");
  121.         svg.setAttribute("viewBox", "0 0 512 512");
  122.         
  123.         const path = document.createElementNS("http://www.w3.org/2000/svg", "path");
  124.         path.setAttribute("fill", "white");
  125.         path.setAttribute("d", "M495.9 166.6c3.2 8.7 .5 18.4-6.4 24.6l-43.3 39.4c1.1 8.3 1.7 16.8 1.7 25.4s-.6 17.1-1.7 25.4l43.3 39.4c6.9 6.2 9.6 15.9 6.4 24.6c-4.4 11.9-9.7 23.3-15.8 34.3l-4.7 8.1c-6.6 11-14 21.4-22.1 31.2c-5.9 7.2-15.7 9.6-24.5 6.8l-55.7-17.7c-13.4 10.3-28.2 18.9-44 25.4l-12.5 57.1c-2 9.1-9 16.3-18.2 17.8c-13.8 2.3-28 3.5-42.5 3.5s-28.7-1.2-42.5-3.5c-9.2-1.5-16.2-8.7-18.2-17.8l-12.5-57.1c-15.8-6.5-30.6-15.1-44-25.4L83.1 425.9c-8.8 2.8-18.6 .3-24.5-6.8c-8.1-9.8-15.5-20.2-22.1-31.2l-4.7-8.1c-6.1-11-11.4-22.4-15.8-34.3c-3.2-8.7-.5-18.4 6.4-24.6l43.3-39.4C64.6 273.1 64 264.6 64 256s.6-17.1 1.7-25.4L22.4 191.2c-6.9-6.2-9.6-15.9-6.4-24.6c4.4-11.9 9.7-23.3 15.8-34.3l4.7-8.1c6.6-11 14-21.4 22.1-31.2c5.9-7.2 15.7-9.6 24.5-6.8l55.7 17.7c13.4-10.3 28.2-18.9 44-25.4l12.5-57.1c2-9.1 9-16.3 18.2-17.8C227.3 1.2 241.5 0 256 0s28.7 1.2 42.5 3.5c9.2 1.5 16.2 8.7 18.2 17.8l12.5 57.1c15.8 6.5 30.6 15.1 44 25.4l55.7-17.7c8.8-2.8 18.6-.3 24.5 6.8c8.1 9.8 15.5 20.2 22.1 31.2l4.7 8.1c6.1 11 11.4 22.4 15.8 34.3zM256 336a80 80 0 1 0 0-160 80 80 0 1 0 0 160z");
  126.         
  127.         svg.appendChild(path);
  128.         button.appendChild(svg);
  129.         
  130.         return button;
  131.     }
  132.  
  133.     function createSettingsMenu() {
  134.         const menu = document.createElement('div');
  135.         menu.className = 'settings-menu';
  136.         menu.style.gap = '15px'; 
  137.         menu.style.width = '360px';
  138.     
  139.         const displaySection = createDisplaySection();
  140.         const controlsSection = createControlsSection();
  141.     
  142.         menu.appendChild(displaySection);
  143.         menu.appendChild(controlsSection);
  144.     
  145.         return menu;
  146.     }
  147.  
  148.     function createDisplaySection() {
  149.         const displaySection = document.createElement('div');
  150.         displaySection.style.flex = '1';
  151.         
  152.         const displayLabel = document.createElement('label');
  153.         displayLabel.textContent = 'Display Options';
  154.         displayLabel.style.marginBottom = '10px';
  155.         displayLabel.style.display = 'block';
  156.         displayLabel.style.fontSize = '16px';
  157.         displayLabel.style.fontWeight = 'bold';
  158.         displaySection.appendChild(displayLabel);
  159.     
  160.         OPTIONS.forEach(option => {
  161.             const checkboxContainer = document.createElement('div');
  162.             checkboxContainer.style.display = 'flex';
  163.             checkboxContainer.style.alignItems = 'center';
  164.             checkboxContainer.style.marginTop = '5px';
  165.     
  166.             const checkbox = document.createElement('input');
  167.             checkbox.type = 'checkbox';
  168.             checkbox.id = `show-${option}`;
  169.             checkbox.checked = localStorage.getItem(`show-${option}`) !== 'false';
  170.             checkbox.style.marginRight = '8px';
  171.             checkbox.style.cursor = 'pointer';
  172.     
  173.             const checkboxLabel = document.createElement('label');
  174.             checkboxLabel.htmlFor = `show-${option}`;
  175.             checkboxLabel.textContent = option.charAt(0).toUpperCase() + option.slice(1);
  176.             checkboxLabel.style.cursor = 'pointer';
  177.             checkboxLabel.style.color = 'white';
  178.             checkboxLabel.style.fontSize = '14px';
  179.     
  180.             checkbox.addEventListener('change', () => {
  181.                 localStorage.setItem(`show-${option}`, checkbox.checked);
  182.                 updateDisplayState();
  183.             });
  184.     
  185.             checkboxContainer.appendChild(checkbox);
  186.             checkboxContainer.appendChild(checkboxLabel);
  187.             displaySection.appendChild(checkboxContainer);
  188.         });
  189.  
  190.         return displaySection;
  191.     }
  192.  
  193.     function createControlsSection() {
  194.         const controlsSection = document.createElement('div');
  195.         controlsSection.style.flex = '1';
  196.         
  197.         const intervalLabel = document.createElement('label');
  198.         intervalLabel.textContent = 'Update Interval';
  199.         intervalLabel.style.display = 'block';
  200.         intervalLabel.style.marginBottom = '5px';
  201.         intervalLabel.style.fontSize = '16px';
  202.         intervalLabel.style.fontWeight = 'bold';
  203.     
  204.         const intervalSlider = document.createElement('input');
  205.         intervalSlider.type = 'range';
  206.         intervalSlider.min = '2';
  207.         intervalSlider.max = '10';
  208.         intervalSlider.value = updateInterval / 1000;
  209.         intervalSlider.step = '1';
  210.         intervalSlider.className = 'interval-slider';
  211.     
  212.         const intervalValue = document.createElement('div');
  213.         intervalValue.className = 'interval-value';
  214.         intervalValue.textContent = `${intervalSlider.value}s`;
  215.         intervalValue.style.marginBottom = '15px';
  216.         intervalValue.style.fontSize = '14px';
  217.     
  218.         intervalSlider.addEventListener('input', (e) => {
  219.             const newInterval = parseInt(e.target.value) * 1000;
  220.             intervalValue.textContent = `${e.target.value}s`;
  221.             updateInterval = newInterval;
  222.             localStorage.setItem('youtubeEnhancerInterval', newInterval);
  223.     
  224.             if (intervalId) {
  225.                 clearInterval(intervalId);
  226.                 intervalId = setInterval(() => {
  227.                     updateOverlayContent(overlay, currentChannelName);
  228.                 }, newInterval);
  229.             }
  230.         });
  231.     
  232.         const opacityLabel = document.createElement('label');
  233.         opacityLabel.textContent = 'Background Opacity';
  234.         opacityLabel.style.display = 'block';
  235.         opacityLabel.style.marginBottom = '5px';
  236.         opacityLabel.style.fontSize = '16px';
  237.         opacityLabel.style.fontWeight = 'bold';
  238.     
  239.         const opacitySlider = document.createElement('input');
  240.         opacitySlider.type = 'range';
  241.         opacitySlider.min = '50';
  242.         opacitySlider.max = '90';
  243.         opacitySlider.value = overlayOpacity * 100;
  244.         opacitySlider.step = '5';
  245.         opacitySlider.className = 'opacity-slider';
  246.     
  247.         const opacityValue = document.createElement('div');
  248.         opacityValue.className = 'opacity-value';
  249.         opacityValue.textContent = `${opacitySlider.value}%`;
  250.         opacityValue.style.fontSize = '14px';
  251.     
  252.         opacitySlider.addEventListener('input', (e) => {
  253.             const newOpacity = parseInt(e.target.value) / 100;
  254.             opacityValue.textContent = `${e.target.value}%`;
  255.             overlayOpacity = newOpacity;
  256.             localStorage.setItem('youtubeEnhancerOpacity', newOpacity);
  257.     
  258.             if (overlay) {
  259.                 overlay.style.backgroundColor = `rgba(0, 0, 0, ${newOpacity})`;
  260.             }
  261.         });
  262.     
  263.         controlsSection.appendChild(intervalLabel);
  264.         controlsSection.appendChild(intervalSlider);
  265.         controlsSection.appendChild(intervalValue);
  266.         controlsSection.appendChild(opacityLabel);
  267.         controlsSection.appendChild(opacitySlider);
  268.         controlsSection.appendChild(opacityValue);
  269.  
  270.         return controlsSection;
  271.     }
  272.  
  273.     function createSpinner() {
  274.         const spinnerContainer = document.createElement('div');
  275.         spinnerContainer.style.position = 'absolute';
  276.         spinnerContainer.style.top = '0';
  277.         spinnerContainer.style.left = '0';
  278.         spinnerContainer.style.width = '100%';
  279.         spinnerContainer.style.height = '100%';
  280.         spinnerContainer.style.display = 'flex';
  281.         spinnerContainer.style.justifyContent = 'center';
  282.         spinnerContainer.style.alignItems = 'center';
  283.         spinnerContainer.classList.add('spinner-container');
  284.  
  285.         const spinner = document.createElementNS("http://www.w3.org/2000/svg", "svg");
  286.         spinner.setAttribute("viewBox", "0 0 512 512");
  287.         spinner.setAttribute("width", "64");
  288.         spinner.setAttribute("height", "64");
  289.         spinner.classList.add('loading-spinner');
  290.         spinner.style.animation = "spin 1s linear infinite";
  291.  
  292.         const secondaryPath = document.createElementNS("http://www.w3.org/2000/svg", "path");
  293.         secondaryPath.setAttribute("d", "M0 256C0 114.9 114.1 .5 255.1 0C237.9 .5 224 14.6 224 32c0 17.7 14.3 32 32 32C150 64 64 150 64 256s86 192 192 192c69.7 0 130.7-37.1 164.5-92.6c-3 6.6-3.3 14.8-1 22.2c1.2 3.7 3 7.2 5.4 10.3c1.2 1.5 2.6 3 4.1 4.3c.8 .7 1.6 1.3 2.4 1.9c.4 .3 .8 .6 1.3 .9s.9 .6 1.3 .8c5 2.9 10.6 4.3 16 4.3c11 0 21.8-5.7 27.7-16c-44.3 76.5-127 128-221.7 128C114.6 512 0 397.4 0 256z");
  294.         secondaryPath.style.opacity = "0.4";
  295.         secondaryPath.style.fill = "white";
  296.  
  297.         const primaryPath = document.createElementNS("http://www.w3.org/2000/svg", "path");
  298.         primaryPath.setAttribute("d",
  299.             "M224 32c0-17.7 14.3-32 32-32C397.4 0 512 114.6 512 256c0 46.6-12.5 90.4-34.3 128c-8.8 15.3-28.4 20.5-43.7 11.7s-20.5-28.4-11.7-43.7c16.3-28.2 25.7-61 25.7-96c0-106-86-192-192-192c-17.7 0-32-14.3-32-32z");
  300.         primaryPath.style.fill = "white";
  301.  
  302.         spinner.appendChild(secondaryPath);
  303.         spinner.appendChild(primaryPath);
  304.         spinnerContainer.appendChild(spinner);
  305.         return spinnerContainer;
  306.     }
  307.  
  308.     function createSVGIcon(path) {
  309.         const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
  310.         svg.setAttribute("viewBox", "0 0 640 512");
  311.         svg.setAttribute("width", "2rem");
  312.         svg.setAttribute("height", "2rem");
  313.         svg.style.marginRight = "0.5rem";
  314.         svg.style.display = "none";
  315.  
  316.         const svgPath = document.createElementNS("http://www.w3.org/2000/svg", "path");
  317.         svgPath.setAttribute("d", path);
  318.         svgPath.setAttribute("fill", "white");
  319.  
  320.         svg.appendChild(svgPath);
  321.         return svg;
  322.     }
  323.  
  324.     function createStatContainer(className, iconPath) {
  325.         const container = document.createElement('div');
  326.         Object.assign(container.style, {
  327.             display: 'flex',
  328.             flexDirection: 'column',
  329.             alignItems: 'center',
  330.             justifyContent: 'center',
  331.             visibility: 'hidden',
  332.             width: '33%',
  333.             height: '100%',
  334.             padding: '0 1rem'
  335.         });
  336.  
  337.         const numberContainer = document.createElement('div');
  338.         Object.assign(numberContainer.style, {
  339.             display: 'flex',
  340.             flexDirection: 'column',
  341.             alignItems: 'center',
  342.             justifyContent: 'center'
  343.         });
  344.  
  345.         const differenceElement = document.createElement('div');
  346.         differenceElement.classList.add(`${className}-difference`);
  347.         Object.assign(differenceElement.style, {
  348.             fontSize: '2.5rem',
  349.             height: '2.5rem',
  350.             marginBottom: '1rem'
  351.         });
  352.  
  353.         const digitContainer = createNumberContainer();
  354.         digitContainer.classList.add(`${className}-number`);
  355.         Object.assign(digitContainer.style, {
  356.             fontSize: '4rem',
  357.             fontWeight: 'bold',
  358.             lineHeight: '1',
  359.             height: '4rem',
  360.             fontFamily: 'inherit',
  361.             letterSpacing: '0.025em'
  362.         });
  363.  
  364.         numberContainer.appendChild(differenceElement);
  365.         numberContainer.appendChild(digitContainer);
  366.  
  367.         const labelContainer = document.createElement('div');
  368.         Object.assign(labelContainer.style, {
  369.             display: 'flex',
  370.             alignItems: 'center',
  371.             marginTop: '0.5rem'
  372.         });
  373.  
  374.         const icon = createSVGIcon(iconPath);
  375.         Object.assign(icon.style, {
  376.             width: '2rem',
  377.             height: '2rem',
  378.             marginRight: '0.75rem'
  379.         });
  380.  
  381.         const labelElement = document.createElement('div');
  382.         labelElement.classList.add(`${className}-label`);
  383.         labelElement.style.fontSize = '2rem';
  384.  
  385.         labelContainer.appendChild(icon);
  386.         labelContainer.appendChild(labelElement);
  387.  
  388.         container.appendChild(numberContainer);
  389.         container.appendChild(labelContainer);
  390.  
  391.         return container;
  392.     }
  393.  
  394.     function createOverlay(bannerElement) {
  395.         clearExistingOverlay();
  396.  
  397.         if (!bannerElement) return null;
  398.  
  399.         const overlay = document.createElement('div');
  400.         overlay.classList.add('channel-banner-overlay');
  401.         Object.assign(overlay.style, {
  402.             position: 'absolute',
  403.             top: '0',
  404.             left: '0',
  405.             width: '100%',
  406.             height: '100%',
  407.             backgroundColor: `rgba(0, 0, 0, ${overlayOpacity})`,
  408.             borderRadius: '15px',
  409.             zIndex: '1',
  410.             display: 'flex',
  411.             justifyContent: 'space-around',
  412.             alignItems: 'center',
  413.             color: 'white',
  414.             fontFamily: 'Rubik, sans-serif'
  415.         });
  416.  
  417.         const settingsButton = createSettingsButton();
  418.         const settingsMenu = createSettingsMenu();
  419.         overlay.appendChild(settingsButton);
  420.         overlay.appendChild(settingsMenu);
  421.  
  422.         settingsButton.addEventListener('click', (e) => {
  423.             e.stopPropagation();
  424.             settingsMenu.classList.toggle('show');
  425.         });
  426.  
  427.         document.addEventListener('click', (e) => {
  428.             if (!settingsMenu.contains(e.target) && !settingsButton.contains(e.target)) {
  429.                 settingsMenu.classList.remove('show');
  430.             }
  431.         });
  432.  
  433.         const spinner = createSpinner();
  434.         overlay.appendChild(spinner);
  435.  
  436.         const subscribersElement = createStatContainer('subscribers', "M144 160c-44.2 0-80-35.8-80-80S99.8 0 144 0s80 35.8 80 80s-35.8 80-80 80zm368 0c-44.2 0-80-35.8-80-80s35.8-80 80-80s80 35.8 80 80s-35.8 80-80 80zM0 298.7C0 239.8 47.8 192 106.7 192h42.7c15.9 0 31 3.5 44.6 9.7c-1.3 7.2-1.9 14.7-1.9 22.3c0 38.2 16.8 72.5 43.3 96c-.2 0-.4 0-.7 0H21.3C9.6 320 0 310.4 0 298.7zM405.3 320c-.2 0-.4 0-.7 0c26.6-23.5 43.3-57.8 43.3-96c0-7.6-.7-15-1.9-22.3c13.6-6.3 28.7-9.7 44.6-9.7h42.7C592.2 192 640 239.8 640 298.7c0 11.8-9.6 21.3-21.3 21.3H405.3zM416 224c0 53-43 96-96 96s-96-43-96-96s43-96 96-96s96 43 96 96zM128 485.3C128 411.7 187.7 352 261.3 352H378.7C452.3 352 512 411.7 512 485.3c0 14.7-11.9 26.7-26.7 26.7H154.7c-14.7 0-26.7-11.9-26.7-26.7z");
  437.         const viewsElement = createStatContainer('views', "M288 32c-80.8 0-145.5 36.8-192.6 80.6C48.6 156 17.3 208 2.5 243.7c-3.3 7.9-3.3 16.7 0 24.6C17.3 304 48.6 356 95.4 399.4C142.5 443.2 207.2 480 288 480s145.5-36.8 192.6-80.6c46.8-43.5 78.1-95.4 93-131.1c3.3-7.9 3.3-16.7 0-24.6c-14.9-35.7-46.2-87.7-93-131.1C433.5 68.8 368.8 32 288 32zM144 256a144 144 0 1 1 288 0 144 144 0 1 1 -288 0zm144-64c0 35.3-28.7 64-64 64c-7.1 0-13.9-1.2-20.3-3.3c-5.5-1.8-11.9 1.6-11.7 7.4c.3 6.9 1.3 13.8 3.2 20.7c13.7 51.2 66.4 81.6 117.6 67.9s81.6-66.4 67.9-117.6c-11.1-41.5-47.8-69.4-88.6-71.1c-5.8-.2-9.2 6.1-7.4 11.7c2.1 6.4 3.3 13.2 3.3 20.3z");
  438.         const videosElement = createStatContainer('videos', "M0 128C0 92.7 28.7 64 64 64H320c35.3 0 64 28.7 64 64V384c0 35.3-28.7 64-64 64H64c-35.3 0-64-28.7-64-64V128zM559.1 99.8c10.4 5.6 16.9 16.4 16.9 28.2V384c0 11.8-6.5 22.6-16.9 28.2s-23 5-32.9-1.6l-96-64L416 337.1V320 192 174.9l14.2-9.5 96-64c9.8-6.5 22.4-7.2 32.9-1.6z");
  439.  
  440.         overlay.appendChild(subscribersElement);
  441.         overlay.appendChild(viewsElement);
  442.         overlay.appendChild(videosElement);
  443.         
  444.         bannerElement.appendChild(overlay);
  445.         updateDisplayState();
  446.         return overlay;
  447.     }
  448.  
  449.     // Helper Functions
  450.     function fetchWithGM(url, headers = {}) {
  451.         return new Promise((resolve, reject) => {
  452.             GM_xmlhttpRequest({
  453.                 method: "GET",
  454.                 url: url,
  455.                 headers: headers,
  456.                 onload: function(response) {
  457.                     if (response.status === 200) {
  458.                         resolve(JSON.parse(response.responseText));
  459.                     } else {
  460.                         reject(new Error(`Failed to fetch: ${response.status}`));
  461.                     }
  462.                 },
  463.                 onerror: function(error) {
  464.                     reject(error);
  465.                 },
  466.             });
  467.         });
  468.     }
  469.  
  470.     async function fetchChannelId(channelName) {
  471.         try {
  472.             const response = await fetchWithGM(`${API_BASE_URL}${channelName}`);
  473.             if (!response || !response.channel_id) {
  474.                 throw new Error('Invalid channel ID response');
  475.             }
  476.             return response.channel_id;
  477.         } catch (error) {
  478.             console.error('Error fetching channel ID:', error);
  479.             
  480.             const metaTag = document.querySelector('meta[itemprop="channelId"]');
  481.             if (metaTag && metaTag.content) {
  482.                 return metaTag.content;
  483.             }
  484.             
  485.             const urlMatch = window.location.href.match(/channel\/(UC[\w-]+)/);
  486.             if (urlMatch && urlMatch[1]) {
  487.                 return urlMatch[1];
  488.             }
  489.             
  490.             throw new Error('Could not determine channel ID');
  491.         }
  492.     }
  493.     
  494.     async function fetchChannelStats(channelId) {
  495.         try {
  496.             let retries = 3;
  497.             let lastError;
  498.             
  499.             while (retries > 0) {
  500.                 try {
  501.                     const stats = await fetchWithGM(
  502.                         `${STATS_API_URL}${channelId}`,
  503.                         {
  504.                             origin: "https://livecounts.io",
  505.                             referer: "https://livecounts.io/",
  506.                         }
  507.                     );
  508.                     
  509.                     if (!stats || typeof stats.followerCount === 'undefined') {
  510.                         throw new Error('Invalid stats response');
  511.                     }
  512.                     
  513.                     lastSuccessfulStats.set(channelId, stats);
  514.                     return stats;
  515.                 } catch (e) {
  516.                     lastError = e;
  517.                     retries--;
  518.                     if (retries > 0) {
  519.                         await new Promise(resolve => setTimeout(resolve, 1000));
  520.                     }
  521.                 }
  522.             }
  523.             
  524.             if (lastSuccessfulStats.has(channelId)) {
  525.                 return lastSuccessfulStats.get(channelId);
  526.             }
  527.             
  528.             const fallbackStats = {
  529.                 followerCount: 0,
  530.                 bottomOdos: [0, 0],
  531.                 error: true
  532.             };
  533.             
  534.             const subCountElem = document.querySelector('#subscriber-count');
  535.             if (subCountElem) {
  536.                 const subText = subCountElem.textContent;
  537.                 const subMatch = subText.match(/[\d,]+/);
  538.                 if (subMatch) {
  539.                     fallbackStats.followerCount = parseInt(subMatch[0].replace(/,/g, ''));
  540.                 }
  541.             }
  542.             
  543.             return fallbackStats;
  544.             
  545.         } catch (error) {
  546.             console.error('Error fetching channel stats:', error);
  547.             throw error;
  548.         }
  549.     }
  550.  
  551.     function clearExistingOverlay() {
  552.         const existingOverlay = document.querySelector('.channel-banner-overlay');
  553.         if (existingOverlay) {
  554.             existingOverlay.remove();
  555.         }
  556.         if (intervalId) {
  557.             clearInterval(intervalId);
  558.             intervalId = null;
  559.         }
  560.         lastSuccessfulStats.clear();
  561.         previousStats.clear();
  562.         isUpdating = false;
  563.         overlay = null;
  564.     }
  565.  
  566.     function createDigitElement() {
  567.         const digit = document.createElement('span');
  568.         Object.assign(digit.style, {
  569.             display: 'inline-block',
  570.             width: '0.6em',
  571.             textAlign: 'center',
  572.             marginRight: '0.025em',
  573.             marginLeft: '0.025em'
  574.         });
  575.         return digit;
  576.     }
  577.  
  578.     function createCommaElement() {
  579.         const comma = document.createElement('span');
  580.         comma.textContent = ',';
  581.         Object.assign(comma.style, {
  582.             display: 'inline-block',
  583.             width: '0.3em',
  584.             textAlign: 'center'
  585.         });
  586.         return comma;
  587.     }
  588.  
  589.     function createNumberContainer() {
  590.         const container = document.createElement('div');
  591.         Object.assign(container.style, {
  592.             display: 'flex',
  593.             justifyContent: 'center',
  594.             alignItems: 'center',
  595.             letterSpacing: '0.025em'
  596.         });
  597.         return container;
  598.     }
  599.  
  600.     function updateDigits(container, newValue) {
  601.         const newValueStr = newValue.toString();
  602.         const digits = [];
  603.     
  604.         for (let i = newValueStr.length - 1; i >= 0; i -= 3) {
  605.             const start = Math.max(0, i - 2);
  606.             digits.unshift(newValueStr.slice(start, i + 1));
  607.         }
  608.     
  609.         while (container.firstChild) {
  610.             container.removeChild(container.firstChild);
  611.         }
  612.         
  613.         let digitIndex = 0;
  614.     
  615.         for (let i = 0; i < digits.length; i++) {
  616.             const group = digits[i];
  617.             for (let j = 0; j < group.length; j++) {
  618.                 const digitElement = createDigitElement();
  619.                 digitElement.textContent = group[j];
  620.                 container.appendChild(digitElement);
  621.                 digitIndex++;
  622.             }
  623.             if (i < digits.length - 1) {
  624.                 container.appendChild(createCommaElement());
  625.             }
  626.         }
  627.     
  628.         let elementIndex = 0;
  629.         for (let i = 0; i < digits.length; i++) {
  630.             const group = digits[i];
  631.             for (let j = 0; j < group.length; j++) {
  632.                 const digitElement = container.children[elementIndex];
  633.                 const newDigit = parseInt(group[j]);
  634.                 const currentDigit = parseInt(digitElement.textContent || '0');
  635.     
  636.                 if (currentDigit !== newDigit) {
  637.                     animateDigit(digitElement, currentDigit, newDigit);
  638.                 }
  639.                 elementIndex++;
  640.             }
  641.             if (i < digits.length - 1) {
  642.                 elementIndex++;
  643.             }
  644.         }
  645.     }
  646.  
  647.     function animateDigit(element, start, end) {
  648.         const duration = 1000;
  649.         const startTime = performance.now();
  650.  
  651.         function update(currentTime) {
  652.             const elapsed = currentTime - startTime;
  653.             const progress = Math.min(elapsed / duration, 1);
  654.             const easeOutQuart = 1 - Math.pow(1 - progress, 4);
  655.             const current = Math.round(start + (end - start) * easeOutQuart);
  656.             element.textContent = current;
  657.  
  658.             if (progress < 1) {
  659.                 requestAnimationFrame(update);
  660.             }
  661.         }
  662.  
  663.         requestAnimationFrame(update);
  664.     }
  665.  
  666.     function showContent(overlay) {
  667.         const spinnerContainer = overlay.querySelector('.spinner-container');
  668.         if (spinnerContainer) {
  669.             spinnerContainer.remove();
  670.         }
  671.  
  672.         const containers = overlay.querySelectorAll('div[style*="visibility: hidden"]');
  673.         containers.forEach(container => {
  674.             container.style.visibility = 'visible';
  675.         });
  676.  
  677.         const icons = overlay.querySelectorAll('svg[style*="display: none"]');
  678.         icons.forEach(icon => {
  679.             icon.style.display = 'block';
  680.         });
  681.     }
  682.  
  683.     function updateDifferenceElement(element, currentValue, previousValue) {
  684.         if (!previousValue) return;
  685.     
  686.         const difference = currentValue - previousValue;
  687.         if (difference === 0) {
  688.             element.textContent = '';
  689.             return;
  690.         }
  691.     
  692.         const sign = difference > 0 ? '+' : '';
  693.         element.textContent = `${sign}${difference.toLocaleString()}`;
  694.         element.style.color = difference > 0 ? '#1ed760' : '#f3727f';
  695.     
  696.         setTimeout(() => {
  697.             element.textContent = '';
  698.         }, 1000);
  699.     }
  700.  
  701.     function updateDisplayState() {
  702.         const overlay = document.querySelector('.channel-banner-overlay');
  703.         if (!overlay) return;
  704.     
  705.         const statContainers = overlay.querySelectorAll('div[style*="width"]');
  706.         if (!statContainers.length) return;
  707.     
  708.         let visibleCount = 0;
  709.         const visibleContainers = [];
  710.     
  711.         statContainers.forEach(container => {
  712.             const numberContainer = container.querySelector('[class$="-number"]');
  713.             if (!numberContainer) return;
  714.             
  715.             const type = numberContainer.className.replace('-number', '');
  716.             
  717.             const isVisible = localStorage.getItem(`show-${type}`) !== 'false';
  718.             
  719.             if (isVisible) {
  720.                 container.style.display = 'flex';
  721.                 visibleCount++;
  722.                 visibleContainers.push(container);
  723.             } else {
  724.                 container.style.display = 'none';
  725.             }
  726.         });
  727.     
  728.         visibleContainers.forEach(container => {
  729.             container.style.width = '';
  730.             container.style.margin = '';
  731.             
  732.             switch (visibleCount) {
  733.                 case 1:
  734.                     container.style.width = '100%';
  735.                     break;
  736.                 case 2:
  737.                     container.style.width = '50%';
  738.                     break;
  739.                 case 3:
  740.                     container.style.width = '33.33%';
  741.                     break;
  742.                 default:
  743.                     container.style.display = 'none';
  744.             }
  745.         });
  746.     
  747.         overlay.style.display = 'flex';
  748.     }
  749.  
  750.     async function updateOverlayContent(overlay, channelName) {
  751.         if (isUpdating || channelName !== currentChannelName) return;
  752.         isUpdating = true;
  753.         
  754.         try {
  755.             const channelId = await fetchChannelId(channelName);
  756.             const stats = await fetchChannelStats(channelId);
  757.             
  758.             if (channelName !== currentChannelName) {
  759.                 isUpdating = false;
  760.                 return;
  761.             }
  762.             
  763.             if (stats.error) {
  764.                 const containers = overlay.querySelectorAll('[class$="-number"]');
  765.                 containers.forEach(container => {
  766.                     if (container.classList.contains('subscribers-number') && stats.followerCount > 0) {
  767.                         updateDigits(container, stats.followerCount);
  768.                     } else {
  769.                         container.textContent = '---';
  770.                     }
  771.                 });
  772.                 return;
  773.             }
  774.  
  775.             const updateElement = (className, value, label) => {
  776.                 const numberContainer = overlay.querySelector(`.${className}-number`);
  777.                 const differenceElement = overlay.querySelector(`.${className}-difference`);
  778.                 const labelElement = overlay.querySelector(`.${className}-label`);
  779.                 
  780.                 if (numberContainer) {
  781.                     updateDigits(numberContainer, value);
  782.                 }
  783.                 
  784.                 if (differenceElement && previousStats.has(channelId)) {
  785.                     const previousValue = className === 'subscribers' ?
  786.                         previousStats.get(channelId).followerCount :
  787.                         previousStats.get(channelId).bottomOdos[className === 'views' ? 0 : 1];
  788.                     updateDifferenceElement(differenceElement, value, previousValue);
  789.                 }
  790.                 
  791.                 if (labelElement) {
  792.                     labelElement.textContent = label;
  793.                 }
  794.             };
  795.             
  796.             updateElement('subscribers', stats.followerCount, 'Subscribers');
  797.             updateElement('views', stats.bottomOdos[0], 'Views');
  798.             updateElement('videos', stats.bottomOdos[1], 'Videos');
  799.             
  800.             if (!previousStats.has(channelId)) {
  801.                 showContent(overlay);
  802.             }
  803.             
  804.             previousStats.set(channelId, stats);
  805.             
  806.         } catch (error) {
  807.             console.error(`Error updating overlay: ${error.message}`);
  808.             const containers = overlay.querySelectorAll('[class$="-number"]');
  809.             containers.forEach(container => {
  810.                 container.textContent = '---';
  811.             });
  812.         } finally {
  813.             isUpdating = false;
  814.         }
  815.     }
  816.  
  817.     function addOverlay(bannerElement) {
  818.         const channelName = window.location.pathname.split("/")[1].replace("@", "");
  819.  
  820.         if (channelName === currentChannelName && overlay) {
  821.             return;
  822.         }
  823.  
  824.         currentChannelName = channelName;
  825.         overlay = createOverlay(bannerElement);
  826.  
  827.         if (overlay) {
  828.             if (intervalId) {
  829.                 clearInterval(intervalId);
  830.             }
  831.  
  832.             intervalId = setInterval(() => {
  833.                 updateOverlayContent(overlay, channelName);
  834.             }, updateInterval);
  835.  
  836.             updateOverlayContent(overlay, channelName);
  837.         }
  838.     }
  839.  
  840.     function isChannelPage() {
  841.         return window.location.pathname.startsWith("/@") ||
  842.                window.location.pathname.startsWith("/channel/") ||
  843.                window.location.pathname.startsWith("/c/");
  844.     }
  845.  
  846.     function observePageChanges() {
  847.         const observer = new MutationObserver((mutations) => {
  848.             for (const mutation of mutations) {
  849.                 if (mutation.type === 'childList') {
  850.                     const bannerElement = document.getElementById('page-header-banner-sizer');
  851.                     if (bannerElement && isChannelPage()) {
  852.                         addOverlay(bannerElement);
  853.                         break;
  854.                     }
  855.                 }
  856.             }
  857.         });
  858.  
  859.         observer.observe(document.body, {
  860.             childList: true,
  861.             subtree: true
  862.         });
  863.     }
  864.  
  865.     function addNavigationListener() {
  866.         window.addEventListener("yt-navigate-finish", () => {
  867.             if (!isChannelPage()) {
  868.                 clearExistingOverlay();
  869.                 currentChannelName = null;
  870.             } else {
  871.                 const bannerElement = document.getElementById('page-header-banner-sizer');
  872.                 if (bannerElement) {
  873.                     addOverlay(bannerElement);
  874.                 }
  875.             }
  876.         });
  877.     }
  878.  
  879.     // Initialize the script
  880.     init();
  881.     console.log('YouTube Enhancer (Real-Time Subscriber Count) is running');
  882. })();