☰

Action Buttons Fix (modified)

Fixes watch action buttons to be like how they used to be! (it also includes the classic 'Subscribed' notification icon prior to December 2022)

  1. // ==UserScript==
  2. // @name         Action Buttons Fix (modified)
  3. // @version      1.0.5
  4. // @description  Fixes watch action buttons to be like how they used to be! (it also includes the classic 'Subscribed' notification icon prior to December 2022)
  5. // @author       xX_LegendCraftd_Xx
  6. // @icon         https://www.youtube.com/favicon.ico
  7. // @namespace    https://greasyfork.org/en/users/933798
  8. // @license      MIT
  9. // @match        https://*.youtube.com/*
  10. // @grant        none
  11. // @run-at       document-start
  12. // ==/UserScript==
  13.  
  14. const abtnconfig = {
  15.     unsegmentLikeButton: false,
  16.     noFlexibleItems: true
  17. };
  18.  
  19. function updateBtns() {
  20.     var watchFlexy = document.querySelector("ytd-watch-flexy");
  21.     var results = watchFlexy.data.contents.twoColumnWatchNextResults.results.results.contents;
  22.  
  23.     for (var i = 0; i < results.length; i++) {
  24.         if (results[i].videoPrimaryInfoRenderer) {
  25.             var actions = results[i].videoPrimaryInfoRenderer.videoActions.menuRenderer;
  26.  
  27.             if (abtnconfig.unsegmentLikeButton) {
  28.                 if (actions.topLevelButtons[0].segmentedLikeDislikeButtonRenderer) {
  29.                     var segmented = actions.topLevelButtons[0].segmentedLikeDislikeButtonRenderer;
  30.                     actions.topLevelButtons.splice(0, 1);
  31.                     actions.topLevelButtons.unshift(segmented.dislikeButton);
  32.                     actions.topLevelButtons.unshift(segmented.likeButton);
  33.                 }
  34.             }
  35.  
  36.             if (abtnconfig.noFlexibleItems) {
  37.                 for (var i = 0; i < actions.flexibleItems.length; i++) {
  38.                     actions.topLevelButtons.push(actions.flexibleItems[i].menuFlexibleItemRenderer.topLevelButton);
  39.                 }
  40.  
  41.                 delete actions.flexibleItems
  42.             }
  43.         }
  44.     }
  45.  
  46.     var temp = watchFlexy.data;
  47.     watchFlexy.data = {};
  48.     watchFlexy.data = temp;
  49. }
  50.  
  51. document.addEventListener("yt-page-data-updated", (e) => {
  52.     if (e.detail.pageType == "watch") {
  53.         updateBtns();
  54.     }
  55. });
  56.  
  57. (function() {
  58. let css = `
  59. /* Fix the position of watchaction buttons */
  60. #actions.ytd-watch-metadata {
  61.   min-width: auto !important;
  62. }
  63.  
  64. /* Revert classic 'Subscribed' notifcation icon */
  65. yt-button-shape.style-scope.ytd-subscribe-button-renderer {
  66.   display: flex !important;
  67. }
  68.  
  69. yt-smartimation.ytd-subscribe-button-renderer, .smartimation__content > __slot-el {
  70.   display: flex !important;
  71. }
  72.  
  73. #notification-preference-toggle-button:not([hidden]) + yt-animated-action #notification-preference-button.ytd-subscribe-button-renderer[invisible], #subscribe-button-shape.ytd-subscribe-button-renderer[invisible] {
  74.   pointer-events: auto;
  75.   visibility: visible;
  76.   position: static;
  77. }
  78.  
  79. div#notification-preference-button.style-scope.ytd-subscribe-button-renderer > ytd-subscription-notification-toggle-button-renderer-next.style-scope.ytd-subscribe-button-renderer > yt-button-shape > .yt-spec-button-shape-next--size-m {
  80.   background-color: transparent !important;
  81.   border-radius: 16px !important;
  82.   padding-left: 14px !important;
  83.   padding-right: 2px !important;
  84.   margin-left: 4px !important;
  85. }
  86.  
  87. div#notification-preference-button.style-scope.ytd-subscribe-button-renderer > ytd-subscription-notification-toggle-button-renderer-next.style-scope.ytd-subscribe-button-renderer > yt-button-shape > .yt-spec-button-shape-next--size-m > div.cbox.yt-spec-button-shape-next--button-text-content, div#notification-preference-button.style-scope.ytd-subscribe-button-renderer > ytd-subscription-notification-toggle-button-renderer-next.style-scope.ytd-subscribe-button-renderer > yt-button-shape > .yt-spec-button-shape-next--size-m > div.yt-spec-button-shape-next__secondary-icon, button.yt-spec-button-shape-next.yt-spec-button-shape-next--tonal.yt-spec-button-shape-next--mono.yt-spec-button-shape-next--size-m.yt-spec-button-shape-next--icon-leading-trailing > div.yt-spec-button-shape-next__button-text-content {
  88.   display: none !important;
  89. }
  90.  
  91. #buttons.ytd-c4-tabbed-header-renderer {
  92.   flex-direction: row-reverse !important;
  93. }`;
  94. if (typeof GM_addStyle !== "undefined") {
  95.   GM_addStyle(css);
  96. } else {
  97.   let styleNode = document.createElement("style");
  98.   styleNode.appendChild(document.createTextNode(css));
  99.   (document.querySelector("head") || document.documentElement).appendChild(styleNode);
  100. }
  101. })();