YouTube - Proper Description

Watch page description below the video with proper open/close toggle, instead of a side bar.

  1. // ==UserScript==
  2. // @name YouTube - Proper Description
  3. // @namespace q1k
  4. // @version 2.1.9
  5. // @description Watch page description below the video with proper open/close toggle, instead of a side bar.
  6. // @author q1k
  7. // @match *://www.youtube.com/*
  8. // @grant none
  9. // @run-at document-start
  10. // @compatible Tampermonkey
  11. // ==/UserScript==
  12.  
  13. var debug_mode = true;
  14.  
  15. if(typeof window.isSecureContext !== 'undefined' && window.isSecureContext){
  16. if (window.trustedTypes && window.trustedTypes.createPolicy) {
  17. window.trustedTypes.createPolicy('default', {
  18. createHTML: (string, sink) => string,
  19. createScript: (string, sink) => string,
  20. createScriptURL: (string, sink) => string
  21. });
  22. }
  23. }
  24. async function findElement(selector) {
  25. return new Promise(function(resolve) {
  26. if (document.querySelector(selector)) {
  27. return resolve(document.querySelector(selector));
  28. }
  29. const observer = new MutationObserver(function(mutations) {
  30. if (document.querySelector(selector)) {
  31. resolve(document.querySelector(selector));
  32. observer.disconnect();
  33. }
  34. });
  35. observer.observe(document, {
  36. childList: true,
  37. subtree: true
  38. });
  39. });
  40. }
  41. function watchExistingButtonForChange(oldbutton, newbutton, newbuttontext) {
  42. if(newbutton.innerText.trim().length>0) {
  43. return;
  44. }
  45. newbuttontext.innerText = oldbutton.innerText.replace("...","").trim();
  46. var mo = new MutationObserver(function(mutations) {
  47. if(oldbutton.innerText.trim().length>0) {
  48. newbuttontext.innerText = oldbutton.innerText.replace("...","").trim();
  49. mo.disconnect();
  50. }
  51. });
  52. mo.observe(oldbutton, {
  53. childList: true,
  54. subtree: true,
  55. characterData: true
  56. });
  57. }
  58. var more, less, description;
  59. function addButton(open, idname, button_current) {
  60. let button_new = document.createElement("div");
  61. //button.setAttribute("id", idname);
  62. button_new.setAttribute("class","desc_toggles "+idname);
  63. button_new.innerHTML = "<div class='desc_text more-button style-scope ytd-video-secondary-info-renderer'></div>";
  64. let button_new_text = button_new.querySelector(".desc_text");
  65. button_current.parentNode.appendChild(button_new);
  66. description = button_current.closest("#description-inline-expander");
  67. return [button_new, button_new_text];
  68. }
  69.  
  70. var styles = document.createElement("style");
  71. styles.innerHTML=`
  72. /* remove */
  73. ytd-watch-metadata #description #info-container, ytd-watch-metadata #description ytd-watch-info-text, /*view and date info*/
  74. ytd-watch-metadata #comment-teaser, /*comment teaser*/
  75. ytd-watch-metadata #bottom-row #description-inner #description-interaction {/*click effect on description*/
  76. display: none !important;
  77. }
  78. /*title and general look*/
  79. ytd-watch-metadata { margin-top: 0; padding-top: 20px;/*2rem;*/ padding-bottom: 16px; border-bottom: 1px solid var(--yt-spec-10-percent-layer); }
  80. ytd-watch-metadata #title h1 { font-family: 'Roboto',sans-serif; line-height: 2.6rem; font-weight: 400; font-size: 1.8rem; max-height: 5.2rem; }
  81.  
  82. /*moved views/date from #bottom-row #info-container*/
  83. ytd-watch-metadata #title #info { line-height: 2rem; font-size: 1.4rem; font-weight: 400; color: var(--yt-spec-text-secondary); /*#aaa*/ display: initial; }
  84. /**/
  85. ytd-watch-metadata #title #info > *:nth-child(2n) { font-size: 0; }
  86. ytd-watch-metadata #title #info > *:nth-child(2n):before { content: " • "; font-size: 1.4rem; user-select: none; }
  87. ytd-watch-metadata #title #info { display: initial; }
  88. ytd-watch-metadata #title #info > span { display: none; }
  89. ytd-watch-metadata #title #info > * { font-weight: 400; }
  90. ytd-watch-metadata #title #info > a[href*='hashtag'] ~ span { display: inline; }
  91. /**/
  92. ytd-watch-metadata #top-row > #info > * { /*moved views/date from #bottom-row #info-container*/ line-height: 2rem; font-size: 1.4rem; font-weight: 400; color: var(--yt-spec-text-secondary); /*#aaa*/ }
  93. /*ytd-watch-metadata #top-row > #info > *:nth-child(2) { font-size: 0; }
  94. ytd-watch-metadata #top-row > #info > *:nth-child(2):before { content: " • "; font-size: 1.4rem; user-select: none; }*/
  95. /*action buttons top-row*/
  96. ytd-watch-metadata #top-row { align-items: center; margin: 0 !important; padding-bottom: 5px !important; border-bottom: 1px solid var(--yt-spec-10-percent-layer); /*dark: rgba(255, 255, 255, 0.2), light: rgba(0, 0, 0, 0.1)*/}
  97. ytd-watch-metadata #top-row #actions { margin-top: 0; }
  98. /*views and date - created element populated automatically from #bottom-row #tooltip*/
  99.  
  100. /*moved channel info #owner from top-row to before bottom-row - profile pic-name, subscribe button, subs number, etc*/
  101. ytd-watch-metadata #owner { margin: 0 0 12px 0; padding: 16px 0 0 0; }
  102. /*general bottom-row look and other fixes*/
  103. ytd-watch-metadata #bottom-row { margin: 0 !important; }
  104. ytd-watch-metadata #bottom-row #description-inner { margin: 0; }
  105. ytd-watch-metadata #bottom-row #description { cursor: auto; background: none !important; border-radius: 0; margin: 0 12px 0 0; margin: 0; /*padding-bottom: 1em;*/ /*border-bottom: 1px solid var(--yt-spec-10-percent-layer);*/ }
  106. /*hide tooltip when hovered date info */
  107. ytd-watch-metadata #bottom-row #description-inner > tp-yt-paper-tooltip[for="info"] { display: none; }
  108. ytd-watch-metadata #bottom-row ytd-text-inline-expander #snippet { -webkit-mask-image: none !important; mask-image: none !important; }
  109.  
  110. ytd-watch-metadata #owner #avatar { width: 48px; height: 48px; }
  111. ytd-watch-metadata #owner a { line-height: 1; }
  112. ytd-watch-metadata #owner #avatar img { width: 100%; }
  113. ytd-watch-metadata #owner ytd-video-owner-renderer { width: 100%; }
  114.  
  115. /*
  116. ytd-watch-metadata #bottom-row #description-inner ytd-text-inline-expander[is-expanded][closed="true"] {
  117. max-height: 60px;
  118. overflow: hidden;
  119. }
  120. ytd-watch-metadata #bottom-row #description-inner ytd-text-inline-expander[is-expanded]:not([closed="true"]) {
  121. max-height: none;
  122. }*/
  123.  
  124. ytd-watch-metadata #description [is-expanded] #ellipsis {
  125. display: none;
  126. }
  127. ytd-watch-metadata #expand.ytd-text-inline-expander,
  128. ytd-watch-metadata #collapse.ytd-text-inline-expander {
  129. position: static;
  130. margin-top: 1rem !important;
  131. text-transform: uppercase;
  132. color: var(--yt-spec-text-secondary); /*#aaa*/
  133. /*font-size: 1.2rem;
  134. line-height: 1.8rem;*/
  135. }
  136. ytd-watch-metadata #expand.ytd-text-inline-expander paper-ripple,
  137. ytd-watch-metadata #collapse.ytd-text-inline-expander paper-ripple {
  138. display: none !important;
  139. }
  140.  
  141. /*******************************************************************/
  142. /*wide show-hide buttons*/
  143. /*ytd-watch-metadata #description #expand,
  144. ytd-watch-metadata #description #collapse { border-color: rgba(0,0,0,0.125); padding-bottom: 0; border-bottom: none; }
  145. [dark] ytd-watch-metadata #description #expand,
  146. [dark] ytd-watch-metadata #description #collapse { border-color: rgba(255,255,255,0.125); }
  147.  
  148. ytd-watch-metadata #description #expand,
  149. ytd-watch-metadata #description #collapse { margin-left: 0; }
  150. ytd-watch-metadata #description #expand,
  151. ytd-watch-metadata #description #collapse { width: 100%; border-top: 1px solid; border-radius: 0; text-align: center; cursor: pointer; margin-top: 1em; background: linear-gradient(rgba(0,0,0,0.02), transparent); }
  152. [dark] ytd-watch-metadata #description #expand,
  153. [dark] ytd-watch-metadata #description #collapse { background: linear-gradient(rgba(255,255,255,0.02), transparent); }
  154. ytd-watch-metadata #description #expand:hover,
  155. ytd-watch-metadata #description #collapse:hover { background: rgba(0,0,0,0.03); }
  156. [dark] ytd-watch-metadata #description #expand:hover,
  157. [dark] ytd-watch-metadata #description #collapse:hover { background: rgba(255,255,255,0.03); }
  158. [dark] ytd-watch-metadata #description #expand,
  159. [dark] ytd-watch-metadata #description #collapse { margin: 0; padding: 4px; }
  160. ytd-watch-metadata {
  161. border-bottom: none;
  162. padding-bottom: 0;
  163. }*/
  164. /*
  165. ytd-watch-metadata, ytd-watch-metadata .desc_toggles { border-color: rgba(0,0,0,0.125); padding-bottom: 0; border-bottom: none; }
  166. [dark] ytd-watch-metadata, [dark] ytd-watch-metadata .desc_toggles { border-color: rgba(255,255,255,0.125); }
  167.  
  168. #description, #description > * { margin-left: 0; }
  169. ytd-watch-metadata .desc_toggles { width: 100%; border-top: 1px solid; border-radius: 0; text-align: center; cursor: pointer; margin-top: 1em; background: linear-gradient(rgba(0,0,0,0.02), transparent); }
  170. [dark] ytd-watch-metadata .desc_toggles { background: linear-gradient(rgba(255,255,255,0.02), transparent); }
  171. ytd-watch-metadata .desc_toggles:hover { background: rgba(0,0,0,0.03); }
  172. [dark] ytd-watch-metadata .desc_toggles:hover { background: rgba(255,255,255,0.03); }
  173. ytd-watch-metadata .desc_toggles .desc_text { margin: 0; padding: 4px; }
  174. */
  175. /********************************************************************/
  176.  
  177. /*ytd-watch-metadata { *//*display: none !important;*//* }
  178. #meta-contents[hidden], #info-contents[hidden]{ display: block !important; }*/
  179.  
  180. ytd-watch-metadata tp-yt-paper-button#expand, ytd-watch-metadata tp-yt-paper-button#collapse, ytd-watch-metadata #description-inline-expander:not([is-expanded]) .description_close, ytd-watch-metadata #description-inline-expander[is-expanded] .description_open, ytd-watch-metadata #description-inline-expander tp-yt-paper-button#expand[hidden] ~ tp-yt-paper-button#collapse[hidden] ~ div.desc_toggles { display: none !important; }
  181. ytd-watch-metadata .desc_toggles { display: inline-block; cursor: pointer; }
  182.  
  183. /*ytd-video-primary-info-renderer[use-yt-sans20-light] .title.ytd-video-primary-info-renderer { line-height: 2.6rem !important; font-weight: 400 !important; font-size: 1.8rem !important; font-family: "Roboto",sans-serif !important; }
  184. /*#player #cinematics, #player #cinematics canvas { display: none !important; }*/
  185. /**/
  186. /*game info cards*/
  187. [dark] ytd-rich-metadata-renderer[darker-dark-theme] a { background-color: #242424;/*rgba(255,255,255,0.05;*/ }
  188. /*uploader profile pic*/
  189. #meta #avatar { width: 48px; height: 48px; margin-right: 16px; }
  190. #meta #avatar img { width: 100%; }
  191. /**/
  192. /*general buttons, light and dark theme*/
  193. #subscribe-button ytd-button-renderer a,
  194. ytd-watch-metadata ytd-video-owner-renderer ytd-button-renderer a,
  195. ytd-watch-metadata ytd-video-owner-renderer ytd-button-renderer button,
  196. #channel-header-container #meta ~ #buttons ytd-button-renderer a,
  197. #channel-header-container #meta ~ #buttons ytd-button-renderer button,
  198. yt-flexible-actions-view-model button-view-model button
  199. { border-radius: 2px !important; text-transform: uppercase !important; letter-spacing: 0.5px;
  200. background: /*rgb(7,92,211,0.1)*/ transparent !important; border: 1px solid #075cd3 !important; color: #075cd3 !important; }
  201.  
  202. [dark] #subscribe-button ytd-button-renderer a,
  203. [dark] ytd-watch-metadata ytd-video-owner-renderer ytd-button-renderer a,
  204. [dark] ytd-watch-metadata ytd-video-owner-renderer ytd-button-renderer button,
  205. [dark] #channel-header-container #meta ~ #buttons ytd-button-renderer a,
  206. [dark] #channel-header-container #meta ~ #buttons ytd-button-renderer button,
  207. yt-flexible-actions-view-model button-view-model button
  208. { background: /*rgba(62,166,255,0.1)*/ transparent !important; border: 1px solid #3ea6ff !important; color: #3ea6ff !important; }
  209.  
  210. /*
  211. light{ background: rgba(0,0,0,0.1) !important; border: none !important; color: #000 !important; }
  212. dark{ background: rgba(255,255,255,0.1) !important; border: none !important; color: #aaa !important; }
  213. */
  214.  
  215. /*owner buttons*/
  216. #edit-buttons ytd-button-renderer a,
  217. #edit-buttons ytd-button-renderer button,
  218. yt-flexible-actions-view-model button-view-model button
  219. { letter-spacing: 0.5px; background: rgb(7,92,211,0.1) !important; border: 1px solid #075cd3 !important; color: #075cd3 !important; }
  220. [dark] #edit-buttons ytd-button-renderer a,
  221. [dark] #edit-buttons ytd-button-renderer button,
  222. yt-flexible-actions-view-model button-view-model button
  223. { background: rgba(62,166,255,0.1) !important; border: 1px solid #3ea6ff !important; color: #3ea6ff !important; }
  224. #sponsor-button ytd-button-renderer button { border-radius: 2px !important; text-transform: uppercase !important; }
  225.  
  226. /*sub button*/
  227. #subscribe-button ytd-subscribe-button-renderer button.yt-spec-button-shape-next--filled,
  228. #subscribe-button ytd-button-renderer button.yt-spec-button-shape-next--filled,
  229. yt-subscribe-button-view-model button.yt-spec-button-shape-next--filled { background: #c00 !important; color: #fff !important; }
  230. #subscribe-button ytd-subscribe-button-renderer button.yt-spec-button-shape-next--tonal,
  231. #subscribe-button ytd-button-renderer button.yt-spec-button-shape-next--tonal,
  232. yt-subscribe-button-view-model button.yt-spec-button-shape-next--tonal { background: rgba(0,0,0,0.1) !important; color: #000 !important; }
  233. [dark] #subscribe-button ytd-subscribe-button-renderer button.yt-spec-button-shape-next--tonal,
  234. [dark] #subscribe-button ytd-button-renderer button.yt-spec-button-shape-next--tonal,
  235. [dark] yt-subscribe-button-view-model button.yt-spec-button-shape-next--tonal { background: rgba(255,255,255,0.1) !important; color: #aaa !important; }
  236. #subscribe ytd-subscribe-button-renderer button,
  237. #subscribe ytd-button-renderer button,
  238. #subscribe-button ytd-subscribe-button-renderer button,
  239. #subscribe-button ytd-button-renderer button,
  240. yt-subscribe-button-view-model button { letter-spacing: 0.5px; border-radius: 2px !important; text-transform: uppercase !important; }
  241. /*animation*/
  242. #subscribe-button ytd-subscribe-button-renderer .smartimation__border,
  243. yt-subscribe-button-view-model yt-touch-feedback-shape,
  244. yt-subscribe-button-view-model [class*="animated-action_"],
  245. #subscribe .animated-action__background-container,
  246. #subscribe-button .animated-action__background-container { border-radius: 2px !important; }
  247. yt-subscribe-button-view-model { width: auto !important; }
  248.  
  249. /*join/joined button */
  250. #sponsor-button ytd-button-renderer button.yt-spec-button-shape-next--mono.yt-spec-button-shape-next--tonal,
  251. yt-flexible-actions-view-model button-view-model button.yt-spec-button-shape-next--mono.yt-spec-button-shape-next--tonal
  252. { background: /*rgb(7,92,211,0.1)*/ transparent !important; border: 1px solid #075cd3 !important; color: #075cd3 !important; }
  253. [dark] #sponsor-button ytd-button-renderer button.yt-spec-button-shape-next--mono.yt-spec-button-shape-next--tonal,
  254. [dark] yt-flexible-actions-view-model button-view-model button.yt-spec-button-shape-next--mono.yt-spec-button-shape-next--tonal
  255. { background: /*rgba(62,166,255,0.1)*/ transparent !important; border: 1px solid #3ea6ff !important; color: #3ea6ff !important; }
  256.  
  257. ytd-watch-metadata ytd-video-owner-renderer #sponsor-button ytd-button-renderer a.yt-spec-button-shape-next--tonal,
  258. #channel-header-container #meta ~ #buttons #sponsor-button ytd-button-renderer a.yt-spec-button-shape-next--tonal,
  259. yt-flexible-actions-view-model button-view-model button.yt-spec-button-shape-next--tonal
  260. { background: rgba(0,0,0,0.1) !important; color: #000 !important; border: none !important; }
  261.  
  262. [dark] ytd-watch-metadata ytd-video-owner-renderer #sponsor-button ytd-button-renderer a.yt-spec-button-shape-next--tonal,
  263. [dark] #channel-header-container #meta ~ #buttons #sponsor-button ytd-button-renderer a.yt-spec-button-shape-next--tonal,
  264. [dark] yt-flexible-actions-view-model button-view-model button.yt-spec-button-shape-next--tonal
  265. { background: rgba(255,255,255,0.1) !important; color: #aaa !important; border: none !important; }
  266.  
  267.  
  268. /**/
  269.  
  270. /**/
  271. ytd-watch-metadata .yt-spec-button-shape-next--mono.yt-spec-button-shape-next--tonal { background: transparent !important; }
  272. ytd-watch-metadata .yt-spec-button-shape-next--mono.yt-spec-button-shape-next--tonal:hover, #info .yt-spec-button-shape-next--mono.yt-spec-button-shape-next--tonal:hover { /*background: rgba(0,0,0,0.1) !important;*/ }
  273. [dark] ytd-watch-metadata .yt-spec-button-shape-next--mono.yt-spec-button-shape-next--tonal:hover, [dark] #info .yt-spec-button-shape-next--mono.yt-spec-button-shape-next--tonal:hover { /*background: rgba(255,255,255,0.1) !important;*/ }
  274. /**/
  275. ytd-watch-metadata ytd-menu-renderer button, ytd-watch-metadata ytd-button-renderer yt-button-shape button, ytd-watch-metadata ytd-button-renderer yt-button-shape a { border-radius: 0 !important; }
  276. ytd-watch-metadata ytd-toggle-button-renderer tp-yt-paper-tooltip #tooltip, #info ytd-button-renderer tp-yt-paper-tooltip #tooltip { width: max-content; }
  277. ytd-watch-metadata #top-level-buttons-computed button { padding: 0 12px; text-transform: uppercase; }
  278. ytd-watch-metadata #top-level-buttons-computed ytd-button-renderer button { padding: 0 8px; text-transform: uppercase; }
  279. ytd-watch-metadata #top-level-buttons-computed > *:not(:first-child) { margin: 0 0 0 8px; }
  280. ytd-watch-metadata #flexible-item-buttons > * { margin-left: 8px;}
  281. ytd-watch-metadata #flexible-item-buttons button, ytd-watch-metadata #flexible-item-buttons a { padding: 0 8px; text-transform: uppercase; }
  282. ytd-segmented-like-dislike-button-renderer button { padding: 0 12px !important; }
  283.  
  284. ytd-watch-metadata ytd-menu-renderer > #button-shape { margin-left: 3px !important; } /*ellipsis menu hidden actions*/
  285.  
  286. /*fix for Return Youtube Dislikes*/
  287. /*ytd-watch-metadata #top-level-buttons-computed { position: relative; }
  288. ytd-segmented-like-dislike-button-renderer button span#text { margin-left: 6px; }
  289. ytd-watch-metadata ytd-menu-renderer[has-flexible-items] { *//*overflow:unset !important;*//* }
  290. ytd-watch-metadata ytd-segmented-like-dislike-button-renderer { position: relative; }
  291. ytd-watch-metadata ytd-segmented-like-dislike-button-renderer button > .yt-spec-button-shape-next__icon { margin-left: -4px !important}
  292. ytd-watch-metadata ytd-segmented-like-dislike-button-renderer #segmented-dislike-button button { width: auto !important; padding: 0 12px 0 12px !important; }
  293. ytd-watch-metadata .ryd-tooltip { position: absolute; bottom: 0px; margin: 0 !important; top: auto; left: 0; width: 100% !important; /*display: none;*//* }
  294. ytd-watch-metadata ytd-segmented-like-dislike-button-renderer .ryd-tooltip { display: block; }
  295. ytd-watch-metadata #ryd-bar-container { width: 100% !important; }
  296. ytd-watch-metadata #ryd-dislike-tooltip { top: -40px !important; pointer-events: none; }*/
  297.  
  298. ytd-watch-metadata .ryd-tooltip { position: absolute; margin: 0 !important; bottom: -5px; }
  299. ytd-watch-metadata .ryd-tooltip-bar-container { padding-bottom: 16px; }
  300. ytd-watch-metadata #ryd-dislike-tooltip { top: auto !important; bottom: 0; pointer-events: none; }
  301.  
  302. /**/
  303. ytd-comments#comments #replies #expander .more-button button,
  304. ytd-comments#comments #replies #expander .less-button button { background: transparent !important; }
  305. ytd-comments#comments #replies #expander .more-button button yt-touch-feedback-shape,
  306. ytd-comments#comments #replies #expander .less-button button yt-touch-feedback-shape { display: none !important; }
  307. /*remove like animation*/
  308. ytd-segmented-like-dislike-button-renderer #segmented-like-button button lottie-component svg > g > g[clip-path*="url(#__lottie_element_"] { transform: matrix(1.0880000591278076,0,0,1.0880000591278076,69.95299530029297,67.9433822631836) !important; }
  309. ytd-segmented-like-dislike-button-renderer #segmented-like-button button lottie-component svg g g g { transform: matrix(1,0,0,1,60,60) !important; }
  310. ytd-segmented-like-dislike-button-renderer #segmented-like-button button lottie-component svg > g > g[clip-path*="url(#__lottie_element_"]:first-child { display: none !important; }
  311. ytd-segmented-like-dislike-button-renderer #segmented-like-button button lottie-component svg g path { fill: #000 !important; stroke: #000; }
  312. [dark] ytd-segmented-like-dislike-button-renderer #segmented-like-button button lottie-component svg g path { fill: #fff !important; stroke: #fff; }
  313.  
  314. ytd-segmented-like-dislike-button-renderer #segmented-like-button button svg g g[clip-path*="url(#__lottie_element_"] > :nth-child(1) path { d:path(" M25.025999069213867,-4.00600004196167 C25.025999069213867,-4.00600004196167 5.992000102996826,-3.996999979019165 5.992000102996826,-3.996999979019165 C5.992000102996826,-3.996999979019165 11.012999534606934,-22.983999252319336 11.012999534606934,-22.983999252319336 C12.230999946594238,-26.90399932861328 13,-31.94300079345703 8.994000434875488,-31.981000900268555 C7,-32 5,-32 4.021999835968018,-31.007999420166016 C4.021999835968018,-31.007999420166016 -19.993000030517578,-5.03000020980835 -19.993000030517578,-5.03000020980835 C-19.993000030517578,-5.03000020980835 -20.027999877929688,32.025001525878906 -20.027999877929688,32.025001525878906 C-20.027999877929688,32.025001525878906 20.97599983215332,31.986000061035156 20.97599983215332,31.986000061035156 C25.010000228881836,31.986000061035156 26.198999404907227,29.562000274658203 26.99799919128418,25.985000610351562 C26.99799919128418,25.985000610351562 31.972000122070312,4.026000022888184 31.972000122070312,4.026000022888184 C33,-0.6930000185966492 30.392000198364258,-4.00600004196167 25.025999069213867,-4.00600004196167z") !important; }
  315. ytd-segmented-like-dislike-button-renderer #segmented-like-button button svg g g[clip-path*="url(#__lottie_element_"] > :nth-child(3) path { d:path(" M-27.993000030517578,-4.015999794006348 C-27.993000030517578,-4.015999794006348 -36.02799987792969,-3.996999979019165 -36.02799987792969,-3.996999979019165 C-36.02799987792969,-3.996999979019165 -36,31.9950008392334 -36,31.9950008392334 C-36,31.9950008392334 -28.027999877929688,31.976999282836914 -28.027999877929688,31.976999282836914 C-28.027999877929688,31.976999282836914 -27.993000030517578,-4.015999794006348 -27.993000030517578,-4.015999794006348z") !important; }
  316. ytd-segmented-like-dislike-button-renderer #segmented-like-button button[aria-pressed="false"] svg g g[clip-path*="url(#__lottie_element_"] > :nth-child(1),
  317. ytd-segmented-like-dislike-button-renderer #segmented-like-button button[aria-pressed="false"] svg g g[clip-path*="url(#__lottie_element_"] > :nth-child(3) { display: none !important; }
  318. ytd-segmented-like-dislike-button-renderer #segmented-like-button button[aria-pressed="true"] svg g g[clip-path*="url(#__lottie_element_"] > :nth-child(1),
  319. ytd-segmented-like-dislike-button-renderer #segmented-like-button button[aria-pressed="true"] svg g g[clip-path*="url(#__lottie_element_"] > :nth-child(3) { display: block !important; }
  320.  
  321. ytd-segmented-like-dislike-button-renderer #segmented-like-button button svg g g[clip-path*="url(#__lottie_element_"] > :nth-child(2) path { d:path(" M25.025999069213867,-4.00600004196167 C25.025999069213867,-4.00600004196167 5.992000102996826,-3.996999979019165 5.992000102996826,-3.996999979019165 C5.992000102996826,-3.996999979019165 11.012999534606934,-22.983999252319336 11.012999534606934,-22.983999252319336 C12.230999946594238,-26.90399932861328 13,-31.94300079345703 8.994000434875488,-31.981000900268555 C7,-32 5,-32 4.021999835968018,-31.007999420166016 C4.021999835968018,-31.007999420166016 -19.993000030517578,-5.03000020980835 -19.993000030517578,-5.03000020980835 C-19.993000030517578,-5.03000020980835 -20.027999877929688,32.025001525878906 -20.027999877929688,32.025001525878906 C-20.027999877929688,32.025001525878906 20.97599983215332,31.986000061035156 20.97599983215332,31.986000061035156 C25.010000228881836,31.986000061035156 26.198999404907227,29.562000274658203 26.99799919128418,25.985000610351562 C26.99799919128418,25.985000610351562 31.972000122070312,4.026000022888184 31.972000122070312,4.026000022888184 C33,-0.6930000185966492 30.392000198364258,-4.00600004196167 25.025999069213867,-4.00600004196167z") !important; }
  322. ytd-segmented-like-dislike-button-renderer #segmented-like-button button svg g g[clip-path*="url(#__lottie_element_"] > :nth-child(4) path { d:path(" M-19.986000061035156,-4.03000020980835 C-19.986000061035156,-4.03000020980835 -36.020999908447266,-3.996999979019165 -36.020999908447266,-3.996999979019165 C-36.020999908447266,-3.996999979019165 -36.00199890136719,31.993000030517578 -36.00199890136719,31.993000030517578 C-36.00199890136719,31.993000030517578 -20.030000686645508,32.02299880981445 -20.030000686645508,32.02299880981445 C-20.030000686645508,32.02299880981445 -19.986000061035156,-4.03000020980835 -19.986000061035156,-4.03000020980835z") !important; }
  323. ytd-segmented-like-dislike-button-renderer #segmented-like-button button[aria-pressed="false"] svg g g[clip-path*="url(#__lottie_element_"] > :nth-child(2),
  324. ytd-segmented-like-dislike-button-renderer #segmented-like-button button[aria-pressed="false"] svg g g[clip-path*="url(#__lottie_element_"] > :nth-child(4) { display: block !important; }
  325. ytd-segmented-like-dislike-button-renderer #segmented-like-button button[aria-pressed="true"] svg g g[clip-path*="url(#__lottie_element_"] > :nth-child(2),
  326. ytd-segmented-like-dislike-button-renderer #segmented-like-button button[aria-pressed="true"] svg g g[clip-path*="url(#__lottie_element_"] > :nth-child(4) { display: none !important; }
  327.  
  328. `;
  329. /*
  330. var styles_alt = document.createElement("style");
  331. styles_alt.innerHTML=`
  332. ytd-watch-metadata, ytd-watch-metadata .desc_toggles { border-color: rgba(0,0,0,0.125); padding-bottom: 0; border-bottom: none; }
  333. [dark] ytd-watch-metadata, [dark] ytd-watch-metadata .desc_toggles { border-color: rgba(255,255,255,0.125); }
  334.  
  335. #description, #description > * { margin-left: 0; }
  336. ytd-watch-metadata .desc_toggles { width: 100%; border-top: 1px solid; border-radius: 0; text-align: center; cursor: pointer; margin-top: 1em; background: linear-gradient(rgba(0,0,0,0.02), transparent); }
  337. [dark] ytd-watch-metadata .desc_toggles { background: linear-gradient(rgba(255,255,255,0.02), transparent); }
  338. ytd-watch-metadata .desc_toggles:hover { background: rgba(0,0,0,0.03); }
  339. [dark] ytd-watch-metadata .desc_toggles:hover { background: rgba(255,255,255,0.03); }
  340. ytd-watch-metadata .desc_toggles .desc_text { margin: 0; padding: 4px; }
  341. `;*/
  342. //document.head.appendChild(styles);
  343. //document.head.appendChild(styles_alt);
  344.  
  345.  
  346. //prevent description opening when clicked anywhere on it
  347. Element.prototype._addEventListenerPD = Element.prototype.addEventListener;
  348. Element.prototype.addEventListener = function(a,b,c) {
  349. if(this.id=="description" && this.classList.contains("ytd-watch-metadata")) {
  350. return
  351. }
  352. this._addEventListenerPD(a,b,c);
  353. if(!this.eventListenerList) this.eventListenerList = {};
  354. if(!this.eventListenerList[a]) this.eventListenerList[a] = [];
  355. this.eventListenerList[a].push(b);
  356. };
  357.  
  358. var more2;
  359. function expand_button(el){
  360. //more = el;
  361. let buttons = addButton(true, "description_open", el);
  362. more2 = buttons[0];
  363. buttons[0].addEventListener('click', function(e) {
  364. description.setAttribute("is-expanded","");
  365. more.removeAttribute("hidden");
  366. less.setAttribute("hidden","");
  367. });
  368. if(typeof yt !== "undefined")
  369. yt.msgs_.SHOW_MORE ? buttons[1].innerText=yt.msgs_.SHOW_MORE : buttons[1].innerText = more.innerText.replace("...","").trim();
  370. watchExistingButtonForChange(el, buttons[0], buttons[1]);
  371. }
  372. function collapse_button(el){
  373. //less = el;
  374. let buttons = addButton(false, "description_close", el);
  375. buttons[0].addEventListener('click', function(e) {
  376. description.removeAttribute("is-expanded");
  377. less.removeAttribute("hidden");
  378. more.setAttribute("hidden","");
  379. });
  380. if(typeof yt !== "undefined")
  381. yt.msgs_.SHOW_LESS ? buttons[1].innerText=yt.msgs_.SHOW_LESS : buttons[1].innerText = less.innerText.replace("...","").trim();
  382. watchExistingButtonForChange(el, buttons[0], buttons[1]);
  383. }
  384.  
  385.  
  386. function watchVideoInfoForChange(info1,custom_info2){
  387. if(info1.innerText.indexOf('•') > 0) {
  388. custom_info2.innerText = info1.innerText.split('•')[0].trim() + ' • ' + info1.innerText.split('•')[1].trim();
  389. } else {
  390. custom_info2.innerText = info1.innerText.trim();
  391. }
  392. var obs = new MutationObserver(function(mutations){
  393. if(info1.innerText.indexOf('•') > 0) {
  394. custom_info2.innerText = info1.innerText.split('•')[0].trim() + ' • ' + info1.innerText.split('•')[1].trim();
  395. } else {
  396. custom_info2.innerText = info1.innerText.trim();
  397. }
  398. });
  399.  
  400. obs.observe(info1, {
  401. childList: true,
  402. subtree: true,
  403. characterData: true
  404. });
  405. }
  406. function createCustomInfo(date_info, top_row){
  407. let custom_info = document.createElement("span");
  408. custom_info.setAttribute("id","info");
  409. custom_info.innerHTML = "<span class='views-and-date'></span>";
  410. let custom_info2 = custom_info.querySelector(".views-and-date");
  411.  
  412. top_row.prepend(custom_info);
  413.  
  414. watchVideoInfoForChange(date_info,custom_info2);
  415. }
  416.  
  417. (async function(){
  418. debug_mode && console.log("[YTPD] - searching for elements");
  419. let watch_metadata = await findElement("ytd-watch-metadata");
  420. debug_mode && console.log("[YTPD] - found ytd-watch-metadata");
  421. let top_row = await findElement("ytd-watch-metadata #top-row");
  422. debug_mode && console.log("[YTPD] - found: #top-row");
  423. let bottom_row = await findElement("ytd-watch-metadata #bottom-row");
  424. debug_mode && console.log("[YTPD] - found: #bottom-row");
  425. let uploader = await findElement("ytd-watch-metadata #owner");
  426. debug_mode && console.log("[YTPD] - found: #owner");
  427. let date_info = await findElement("ytd-watch-metadata #bottom-row #description ytd-watch-info-text tp-yt-paper-tooltip #tooltip, ytd-watch-metadata #bottom-row #description > tp-yt-paper-tooltip #tooltip");
  428. debug_mode && console.log("[YTPD] - found: #tooltip");
  429. let description_expander = await findElement("ytd-watch-metadata #description #description-inline-expander");
  430. debug_mode && console.log("[YTPD] - found: #description");
  431. let teaser_carousel = await findElement("ytd-watch-metadata #bottom-row #teaser-carousel");
  432. debug_mode && console.log("[YTPD] - found: #teaser-carousel");
  433.  
  434. more = await findElement("ytd-watch-metadata #expand");
  435. debug_mode && console.log("[YTPD] - found: #expand");
  436. less = await findElement("ytd-watch-metadata #collapse");
  437. debug_mode && console.log("[YTPD] - found: #collapse");
  438.  
  439. expand_button(more)
  440. collapse_button(less);
  441.  
  442. bottom_row.parentNode.insertBefore(uploader, bottom_row); // move uploader info before #bottom-row
  443.  
  444. watch_metadata.appendChild(teaser_carousel);
  445.  
  446. createCustomInfo(date_info, top_row);
  447.  
  448. document.head.appendChild(styles);
  449.  
  450. findElement("ytd-watch-metadata > ytd-metadata-row-container-renderer").then(function(el){
  451. more2.parentNode.insertBefore(el, more2); // move game_info cards inside description
  452. });
  453. debug_mode && console.log("[YTPD] - done");
  454.  
  455. })();
  456.