☰

Classic Youtube Layout

Revert to old Youtube UI Layout. Comments below the video and recommendations in the sidebar. Forked from https://greasyfork.org/en/scripts/488254-pre-2024-youtube-ui v.1.1.0 by KartongFace on 4/22/2024

  1. // ==UserScript==
  2. // @name         Classic Youtube Layout
  3. // @version      1.01
  4. // @description  Revert to old Youtube UI Layout. Comments below the video and recommendations in the sidebar. Forked from https://greasyfork.org/en/scripts/488254-pre-2024-youtube-ui v.1.1.0 by KartongFace on 4/22/2024
  5. // @author       Andrew Toups
  6. // @match        https://*.youtube.com/*
  7. // @icon         https://www.google.com/s2/favicons?sz=64&domain=youtube.com
  8. // @run-at       document-end
  9. // @namespace    2psy
  10. // @license      MIT
  11. // @grant        GM_addStyle
  12. // ==/UserScript==
  13. GM_addStyle(`
  14. ytd-watch-flexy ytd-rich-grid-row #dismissible.ytd-rich-grid-media {
  15.   flex-direction: row;
  16.   max-width: 100%;
  17.   width: 100%;
  18.   gap: 1rem;
  19. }
  20. ytd-watch-flexy ytd-rich-grid-row #thumbnail {
  21.   width: 100%;
  22.   flex: 1 0 50%;
  23. }
  24. ytd-watch-flexy ytd-rich-grid-row #details.ytd-rich-grid-media {
  25.   flex: 1 0 50%;
  26.   -moz-box-flex: unset;
  27.   width: auto;
  28.   max-width: 100%;
  29.   flex-direction: column;
  30. }
  31. ytd-watch-flexy #avatar-link.ytd-rich-grid-media { display: none; }
  32. ytd-watch-flexy #video-title.ytd-rich-grid-media {
  33.   font-size: 1.4rem;
  34.   line-height: 1.2;
  35. }
  36. ytd-watch-flexy h3.ytd-rich-grid-media { margin-top: 0; }
  37. ytd-watch-flexy ytd-video-meta-block[rich-meta] #metadata-line.ytd-video-meta-block,
  38. ytd-watch-flexy ytd-video-meta-block[rich-meta] #byline-container.ytd-video-meta-block {
  39.   font-size: 1.2rem;
  40.   line-height: 1.2;
  41. }
  42. ytd-watch-flexy ytd-rich-item-renderer { margin-bottom: 7px; }
  43. ytd-watch-flexy ytd-rich-grid-renderer[reduced-top-margin] #contents.ytd-rich-grid-renderer { padding-top: 0; }
  44. ytd-watch-flexy ytd-rich-grid-row #contents.ytd-rich-grid-row { margin: 0; }
  45. `);
  46.  
  47. (function () {
  48.   'use strict';
  49.     setInterval(function() {
  50.         // Revert the new YouTube 2024 redesign experiment flags
  51.         if (typeof ytcfg === "object") {
  52.             ytcfg.set('EXPERIMENT_FLAGS', {
  53.                 ...ytcfg.get('EXPERIMENT_FLAGS'),
  54.                 web_player_enable_featured_product_banner_exclusives_on_desktop:false,
  55.                 kevlar_watch_comments_ep_disable_theater:true,
  56.                 kevlar_watch_comments_panel_button:true,
  57.                 fill_view_models_on_web_vod:true,
  58.                 kevlar_watch_flexy_metadata_height:136,
  59.                 kevlar_watch_grid:false,
  60.                 kevlar_watch_max_player_width:1280,
  61.                 live_chat_over_engagement_panels:false,
  62.                 live_chat_scaled_height:false,
  63.                 live_chat_smaller_min_height:false,
  64.                 main_app_controller_extraction_batch_18:false,
  65.                 main_app_controller_extraction_batch_19:false,
  66.                 no_iframe_for_web_stickiness:false,
  67.                 optimal_reading_width_comments_ep:false,
  68.                 remove_masthead_channel_banner_on_refresh:false,
  69.                 small_avatars_for_comments:false,
  70.                 small_avatars_for_comments_ep:false,
  71.                 web_watch_compact_comments:false,
  72.                 web_watch_compact_comments_header:false,
  73.                 web_watch_log_theater_mode:false,
  74.                 web_watch_theater_chat:false,
  75.                 web_watch_theater_fixed_chat:false,
  76.                 wn_grid_max_item_width:0,
  77.                 wn_grid_min_item_width:0,
  78.             });
  79.         }
  80.     }, 100);
  81. })();
  82. const marker = "/*ignore*/";
  83. window.addEventListener('load', function () {
  84.     setInterval(function() {
  85.         const isFull = document.fullscreenElement !== null;
  86.         const isCin = document.querySelector('#player-container-inner')?.children.length === 0;
  87.         if (isFull || isCin) return;
  88.         const controls = document.querySelector(".ytp-chrome-bottom");
  89.         const baseWidth = parseInt(controls?.style.width);
  90.         const padding = 2 * parseInt(controls?.style.left);
  91.         const basis = baseWidth + padding;
  92.         const column = document.querySelector("#primary.ytd-watch-flexy");
  93.         column?.setAttribute("style",
  94.                          `--ytd-watch-flexy-max-player-width: min(calc((100vh - var(--ytd-watch-flexy-masthead-height) - var(--ytd-watch-flexy-space-below-player))*(var(--ytd-watch-flexy-width-ratio)/var(--ytd-watch-flexy-height-ratio))), ${basis}px);
  95.                          flex: 1 0 calc(48px + ${basis}px);`);
  96.         const container = column.querySelector("#player-container-outer");
  97.         container.setAttribute("style", `min-width: ${basis}px;`);
  98.     }, 100);
  99. });
  100.  
  101. function callback() {
  102.     if (document.fullscreenElement) {
  103.         document.getElementById("chips-wrapper").style.visibility = "hidden";
  104.     } else {
  105.         document.getElementById("chips-wrapper").style.visibility = "visible";
  106.     }
  107. }
  108. document.addEventListener('fullscreenchange', callback);
  109. document.addEventListener('webkitfullscreenchange', callback);