☰

Enhanced YouTube

Enhance YouTube by improving layout, adding shortcuts, customizing controls, and toggling dark mode

  1. // ==UserScript==
  2. // @name         Enhanced YouTube
  3. // @namespace    https://discord.gg/rPbnXvFf
  4. // @version      1.2
  5. // @description  Enhance YouTube by improving layout, adding shortcuts, customizing controls, and toggling dark mode
  6. // @author       Pixel.pilot
  7. // @match        https://www.youtube.com/*
  8. // @grant        none
  9. // @license      All Rights Reserved
  10. // ==/UserScript==
  11.  
  12. (function() {
  13.     'use strict';
  14.  
  15.     /**
  16.      * Function to remove ads from the YouTube page.
  17.      */
  18.     function removeAds() {
  19.         const adSelectors = ['#player-ads', '.video-ads', '.ytp-ad-module'];
  20.         adSelectors.forEach(selector => {
  21.             document.querySelectorAll(selector).forEach(ad => ad.remove());
  22.         });
  23.     }
  24.  
  25.     /**
  26.      * Function to enhance the layout for both PC and mobile.
  27.      * - Sets the video player width to 100% on PC.
  28.      * - Ensures proper viewport settings on mobile.
  29.      */
  30.     function enhanceLayout() {
  31.         // Wide video player on PC
  32.         const player = document.getElementById('player-container');
  33.         if (player) {
  34.             player.style.width = '100%';
  35.         }
  36.  
  37.         // Mobile optimizations
  38.         const metaViewport = document.querySelector('meta[name="viewport"]') || document.createElement('meta');
  39.         metaViewport.name = "viewport";
  40.         metaViewport.content = "width=device-width, initial-scale=1";
  41.         document.head.appendChild(metaViewport);
  42.     }
  43.  
  44.     /**
  45.      * Function to customize the video player controls.
  46.      * - Changes the background color and border radius of the controls.
  47.      */
  48.     function customizeControls() {
  49.         const controls = document.querySelector('.ytp-chrome-bottom');
  50.         if (controls) {
  51.             controls.style.backgroundColor = 'rgba(0, 0, 0, 0.5)';
  52.             controls.style.borderRadius = '10px';
  53.         }
  54.     }
  55.  
  56.     /**
  57.      * Function to toggle dark mode on the page.
  58.      * - Applies dark mode styling to the page and changes link colors.
  59.      */
  60.     function toggleDarkMode() {
  61.         const body = document.body;
  62.         body.classList.toggle('dark-mode');
  63.         if (body.classList.contains('dark-mode')) {
  64.             body.style.backgroundColor = '#181818';
  65.             document.querySelectorAll('a').forEach(a => a.style.color = '#1e90ff');
  66.         } else {
  67.             body.style.backgroundColor = '';
  68.             document.querySelectorAll('a').forEach(a => a.style.color = '');
  69.         }
  70.     }
  71.  
  72.     /**
  73.      * Function to add keyboard shortcuts for various actions.
  74.      * - 'f': Toggle fullscreen mode
  75.      * - 'm': Mute/unmute video
  76.      * - 'd': Toggle dark mode
  77.      */
  78.     function addShortcuts() {
  79.         document.addEventListener('keydown', (e) => {
  80.             switch (e.key) {
  81.                 case 'f':
  82.                     document.querySelector('.ytp-fullscreen-button')?.click();
  83.                     break;
  84.                 case 'm':
  85.                     document.querySelector('.ytp-mute-button')?.click();
  86.                     break;
  87.                 case 'd':
  88.                     toggleDarkMode();
  89.                     break;
  90.             }
  91.         });
  92.     }
  93.  
  94.     /**
  95.      * Run all enhancements.
  96.      * Includes ad removal, layout enhancement, control customization, and shortcut addition.
  97.      */
  98.     function runEnhancements() {
  99.         try {
  100.             removeAds();
  101.             enhanceLayout();
  102.             customizeControls();
  103.             addShortcuts();
  104.         } catch (error) {
  105.             console.error('Error running enhancements:', error);
  106.         }
  107.     }
  108.  
  109.     // Wait for the YouTube page to fully load
  110.     window.addEventListener('load', runEnhancements);
  111.  
  112.     // Handle dynamic content load with MutationObserver
  113.     const observer = new MutationObserver(runEnhancements);
  114.     observer.observe(document.body, { childList: true, subtree: true });
  115.  
  116.     console.log('Enhanced YouTube script loaded');
  117. })();