☰

Greasy Fork is available in English.

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://greatest.deepsurf.us/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. })();