☰

YouTube Row Fixer

Increase the videos per row on all page.

  1. // ==UserScript==
  2. // @name        YouTube Row Fixer
  3. // @version     1.0.2
  4. // @author      sapondanaisriwan
  5. // @description Increase the videos per row on all page.
  6. // @match       https://www.youtube.com/*
  7. // @grant       none
  8. // @license     MIT
  9. // @run-at      document-start
  10. // @icon        https://i.imgur.com/I9uDrsq.png
  11. // @namespace   https://greasyfork.org/en/users/1021085-sapondanaisriwan
  12. // @homepageURL https://github.com/sapondanaisriwan/youtube-videos-per-row-fix
  13. // @supportURL  https://github.com/sapondanaisriwan/youtube-videos-per-row-fix/issues
  14. // @require https://update.greasyfork.org/scripts/465819/1289214/API%20for%20CustomElements%20in%20YouTube.js
  15. // ==/UserScript==
  16.  
  17. /*
  18. If you want to submit a bug or request a feature please report via github issue. Since I receive so many emails, I can't reply to them all.
  19. Contact: sapondanaisriwan@gmail.com
  20. Support me: https://ko-fi.com/sapondanaisriwan 
  21. Support me: https://ko-fi.com/sapondanaisriwan
  22. Support me: https://ko-fi.com/sapondanaisriwan
  23. Support me: https://ko-fi.com/sapondanaisriwan
  24. Support me: https://ko-fi.com/sapondanaisriwan
  25. */
  26.  
  27. "use strict";
  28.  
  29. // Thanks so much to CY Fung (https://greasyfork.org/en/users/371179-cy-fung) for helping me.
  30. const settings = {
  31.   VIDEO_PER_ROW: 6,
  32.   SHELF_ITEM_PER_ROW: 9, // Max is 9
  33.   HIDE_PROFILE: true,
  34. };
  35.  
  36. const target = "ytd-rich-grid-renderer";
  37.  
  38. const styles = {
  39.   hideProfile: {
  40.     id: "hide-ch-profile",
  41.     css: `
  42.     .channel-avatar.ytd-ghost-grid-renderer,
  43.     #home-page-skeleton .channel-avatar {
  44.         display: none;
  45.     }
  46.   
  47.     ytd-rich-grid-media a#avatar-link {
  48.         display: none;
  49.     }
  50.     `,
  51.   },
  52.   skeletonEle: {
  53.     id: "unload-videos",
  54.     css: `
  55.     #home-page-skeleton .rich-grid-media-skeleton,
  56.     #home-page-skeleton .rich-shelf-videos .rich-grid-media-skeleton.mini-mode,
  57.     #home-page-skeleton #home-container-media .rich-grid-media-skeleton.mini-mode {
  58.       min-width: calc(100% / ${settings.VIDEO_PER_ROW} - 1.6rem) !important;
  59.       max-width: calc(100% / ${settings.VIDEO_PER_ROW} - 1.6rem) !important;
  60.     }
  61.     `,
  62.   },
  63. };
  64.  
  65. // Function to remove DOM element
  66. const removeEle = (id) => {
  67.   const ele = document.getElementById(id);
  68.   ele && ele.remove();
  69. };
  70.  
  71. // Function to inject a style into the webpage
  72. const injectStyle = (id, css) => {
  73.   // Remove before adding
  74.   removeEle(id);
  75.  
  76.   const style = document.createElement("style");
  77.   style.type = "text/css";
  78.   style.id = id;
  79.   style.textContent = css;
  80.   document.documentElement.appendChild(style);
  81. };
  82.  
  83. injectStyle(styles.skeletonEle.id, styles.skeletonEle.css);
  84. settings.HIDE_PROFILE &&
  85.   injectStyle(styles.hideProfile.id, styles.hideProfile.css);
  86.  
  87. customYtElements.whenRegistered(target, (proto) => {
  88.   proto.calcElementsPerRow = (a, b) => {
  89.     return a === 194 ? settings.SHELF_ITEM_PER_ROW : settings.VIDEO_PER_ROW;
  90.   };
  91. });