Old Youtube Buttons

Changes various YouTube elements to resemble the old YouTube Design. (Green/Red Like/Dislike, Yellow Subscribe Button.)

  1. // ==UserScript==
  2. // @name Old Youtube Buttons
  3. // @namespace YellowSubButt
  4. // @version 0.3.23
  5. // @description Changes various YouTube elements to resemble the old YouTube Design. (Green/Red Like/Dislike, Yellow Subscribe Button.)
  6. // @author SomeSchmuck
  7. // @match *://*.youtube.com/*
  8. // @icon https://th.bing.com/th/id/R.a12178dd72afd2470f0d2285602f2374?rik=%2fZTUzR2M%2fWKHUA&riu=http%3a%2f%2fsguru.org%2fwp-content%2fuploads%2f2018%2f02%2fYouTube_logo.png&ehk=kk7ZapiqeyJwuqO64Byiid8PbemJtRLsbmphetcvtcE%3d&risl=&pid=ImgRaw&r=0
  9. // @grant GM_addStyle
  10. // @run-at document-end
  11. // @connect youtube.com
  12. // @license MIT
  13. // ==/UserScript==
  14.  
  15. // grant GM.xmlHttpRequest TODO: is this needed?
  16.  
  17. // TODOs:
  18. // make the above section a little cleaner and see if certain parts are actually needed or not
  19. // maybe make this not use esversion 6? technically better browser support that way, although
  20. // that might not even be an issue... Too bad!
  21. /* jshint esversion: 6 */
  22.  
  23. //known issues:
  24. //sub button sometimes has a thin white/really bright line at the very bottom;
  25. // this might be a browser issue, though adjusting css padding can hide it a little bit
  26.  
  27. // 0.3.23 change:
  28. // fix video like/dislike buttons not being coloured.
  29.  
  30. // 0.3.22 change:
  31. // fix comment like-dislike buttons not being coloured.
  32.  
  33. // 0.3.21 changes:
  34. // improved script performance by limiting the amount of times the actually intensive parts of the script
  35. // performance wise can run in a single second; update rate is limited to at most twice in a second which should
  36. // realistically be more than enough
  37. // slight code cleanup
  38.  
  39. // Supported values: 2008, 2012.
  40. // TODO: Add support for design changes YouTube made during supported years, instead
  41. // of a general hodgepodge of all the different designs ssen in one year.
  42. var ytEra = 2008;
  43. var lastTime = Date.now();
  44. var delta = 0;
  45. (function() {
  46. "use strict";
  47. locationChange();
  48. function set_join_buttons(){
  49. // remove any existing buttons with the 'oytJoin' id; this removes random
  50. // buttons that also get to look like the join button.
  51. let existJoins = document.querySelectorAll('#oytJoin');
  52. for (let i = 0; i < existJoins.length; i++){
  53. // console.log(existJoins[fj]);
  54. existJoins[i].removeAttribute('id');
  55. }
  56. let joinDivs = document.querySelectorAll('#sponsor-button');
  57. // console.log(joinDivs);
  58. for (let i = 0; i < joinDivs.length; i++){
  59. // console.log(joinDivs[jb].children.length);
  60. if (joinDivs[i].children.length > 0){
  61. let joinButton = joinDivs[i].getElementsByTagName('button')[0];
  62. // console.log(subButton);
  63. if (joinButton != undefined){
  64. joinButton.setAttribute('id', 'oytJoin');
  65. //TODO: implement support for having joined a channel.
  66. }
  67. }
  68. }
  69. //this might accidentally override a button we don't want to... Too bad!
  70. joinDivs = document.querySelectorAll('#purchase-button');
  71. for (let i = 0; i < joinDivs.length; i++){
  72. let purchaseButton = joinDivs[i].getElementsByTagName('button')[0];
  73. if (purchaseButton != undefined){
  74. purchaseButton.setAttribute('id', 'oytJoin');
  75. //TODO: implement support for having joined a channel.
  76. }
  77. }
  78. }
  79. //TODO: Fix comments text formatting
  80. function set_buttons_text(){
  81. let reply_info = document.getElementsByTagName('yt-formatted-string');
  82. //console.log(reply_info.length);
  83. if (reply_info.length != 0){
  84. for(let r = 0; r < reply_info.length; r++){
  85. let reply_str = reply_info[r].innerText.toLowerCase();
  86. const reply_style = 'border-bottom: 1px dotted #0140FF; color: #0140FF; text-transform: capitalize; font-weight: normal;';
  87. const join_text_style = 'color: #039';
  88. if (reply_str != null){
  89. if (reply_str === 'reply'){
  90. reply_info[r].setAttribute('style', reply_style);
  91. } else if (reply_str === 'join' || reply_str === 'customize channel' || reply_str === 'manage videos'){
  92. reply_info[r].setAttribute('style', join_text_style);
  93. } else {
  94. //if we don't pass above checks, remove styling. Youtube shouldn't have anything
  95. // important formatted like this anyway, so we're... fine i think
  96. reply_info[r].removeAttribute('style');
  97. }
  98. }
  99. }
  100. }
  101. }
  102. function set_video_inf(){
  103. // set_video_buttons();
  104. // set_buttons_text();
  105. // setSubJoin();
  106. set_join_buttons();
  107. }
  108. // function addGlobalStyle(css) {
  109. // let head, style, styles;
  110. // //console.log(document.getElementsByTagName('head'))
  111. // head = document.getElementsByTagName('head')[0];
  112. // if (!head) { return; }
  113. // styles = head.getElementsByClassName('yt_style');
  114. // if (styles.length >= 1){ return; }
  115. // style = document.createElement('style');
  116. // style.type = 'text/css';
  117. // style.setAttribute('class', "yt_style");
  118. // style.innerHTML = css;
  119. // head.appendChild(style);
  120. // // console.log(head);
  121. // }
  122. function createStyle() {
  123. let style = '';
  124. // var style = '';
  125. //sub button; new YT ver
  126. style += '#subscribe-button > ytd-button-renderer > yt-button-shape > button, .style-scope.ytd-subscribe-button-renderer > button{background: linear-gradient(180deg, #fff9c1 0%, #fed81c 100%) !important; border: 1px solid #ecc101 !important; border-radius: 4px !important; color: #994800 !important; text-transform: capitalize !important; font-weight: bold !important; padding: 2px 9px 0 10px; height: 27px; font-family: Arial, sans-serif; font-size: 12px;}';
  127. style += '#subscribe-button > ytd-button-renderer > yt-button-shape > button:hover, .style-scope.ytd-subscribe-button-renderer > button:hover{background: linear-gradient(180deg, #fffffa 0%, #fed925 100%) !important; text-decoration: underline;}';
  128. //unsub button
  129. style += '#notification-preference-button > ytd-subscription-notification-toggle-button-renderer-next > yt-button-shape > button{background: linear-gradient(180deg, #fefefe 0%, #c2c2c2 100%) !important; color: #333 !important; border: 1px solid #ccc !important; border-radius: 4px !important; text-transform: capitalize !important; font-weight: bold !important; padding: 2px 9px 0 10px; height: 27px; font-family: Arial, sans-serif; font-size: 12px;}';
  130. style += '#notification-preference-button > ytd-subscription-notification-toggle-button-renderer-next > yt-button-shape > button:hover { background: linear-gradient(180deg, #fefefe 0%, #a8a6a6 100%) !important; }';
  131. //remove notif bell and dropdown arrow (maybe change arrow to something old style later?)
  132. style += '#notification-preference-button > ytd-subscription-notification-toggle-button-renderer-next > yt-button-shape > button > div.yt-spec-button-shape-next__icon{display: none;}';
  133. style += '#notification-preference-button > ytd-subscription-notification-toggle-button-renderer-next > yt-button-shape > button > div.yt-spec-button-shape-next__secondary-icon{display: none;}';
  134. //join button(s)
  135. style += '#oytJoin{background-image: linear-gradient(180deg, #fbfcff 0%, #93b2ff 100%) !important; color: #1c1b16 !important; font-size: 14px; text-transform: capitalize !important; font-weight: bold; font-family: Arial, sans-serif; height: 25px !important; border-radius: 4px !important; border-color: #8aa1d5 !important;}';
  136. //Likes-dislikes
  137. style += '#like-button{--yt-spec-text-primary: green !important;} #like-button > yt-button-shape > button.yt-spec-button-shape-next{color: green;}';
  138. style += '#dislike-button{--yt-spec-text-primary: red !important;} #dislike-button > yt-button-shape > button.yt-spec-button-shape-next{color: red;}';
  139. // New like buttons (more efficient than through JS lmao)
  140. style += 'like-button-view-model > toggle-button-view-model > button > .yt-spec-button-shape-next__icon > yt-icon > yt-animated-icon > ytd-lottie-player > lottie-component > svg > g > g > g > path{fill: green; stroke: green;}';
  141. style += 'dislike-button-view-model > toggle-button-view-model > button > .yt-spec-button-shape-next__icon > yt-icon{color: red;}';
  142. // Signed out like button
  143. style += 'like-button-view-model > toggle-button-view-model > button > .yt-spec-button-shape-next__icon > yt-icon{color: green;}';
  144. // reply text styling
  145. let repCol = '#0140FF'; // default 2008 colour
  146. let repLapseCol = repCol;
  147. let repUnd = 'border-bottom: 1px dotted' + repCol + '; font-weight: normal;';
  148. if (ytEra == 2012) {
  149. repCol = '#999';
  150. repLapseCol = '#438bc5';
  151. repUnd = 'font-weight: bold; font-size: 11px; font-family: arial,sans-serif;';
  152. style += '#reply-button-end > ytd-button-renderer > yt-button-shape > button:hover > div > span {color: ' + repLapseCol + '; text-decoration: underline;}';
  153. // style += '.more-button.ytd-comment-replies-renderer:hover, .less-button.ytd-comment-replies-renderer:hover{--yt-spec-call-to-action: #438bc5;}';
  154. style += '.more-button.ytd-comment-replies-renderer:hover > yt-button-shape > button > div > span, .less-button.ytd-comment-replies-renderer:hover > yt-button-shape > button > div > span{text-decoration: underline;}';
  155. style += '.more-button.ytd-comment-replies-renderer > yt-button-shape > button > div > span, .less-button.ytd-comment-replies-renderer > yt-button-shape > button > div > span{' + repUnd + ' font-size: 12px;}';
  156. }
  157. style += '#reply-button-end > ytd-button-renderer > yt-button-shape > button > div > span{' + repUnd + 'color: ' + repCol + ';}';
  158. style += '#reply-button-end > ytd-button-renderer > yt-button-shape > button:hover{background-color: transparent;}';
  159. style += '.more-button.ytd-comment-replies-renderer, .less-button.ytd-comment-replies-renderer{--yt-spec-touch-response: transparent; --yt-spec-suggested-action: transparent; --yt-spec-call-to-action: ' + repLapseCol + ';}';
  160. return style;
  161. }
  162. //trick to make buttons that don't originally have hover css have hover css part 2 :)
  163. //addGlobalStyle('ytd-button-renderer #button.ytd-button-renderer[join]:hover { border-color: green !important;}')
  164. GM_addStyle(createStyle());
  165. //this bit of script was taken and modified from the script "Youtube: Download Video" by HayaoGai
  166. //link to that script: https://greasyfork.org/en/scripts/404304-youtube-download-video
  167. function locationChange() {
  168. //console.log('Switched page!');
  169. const observer = new MutationObserver(mutations => {
  170. // limit update rate
  171. let tempTime = Date.now();
  172. delta += tempTime - lastTime;
  173. lastTime = tempTime;
  174. if (delta >= 500) {
  175. set_video_inf();
  176. delta = 0; // reset delta time
  177. }
  178. });
  179. const target = document.body;
  180. const config = { childList: true, subtree: true };
  181. observer.observe(target, config);
  182. }
  183. })();