Greasy Fork is available in English.

Youtube - right side description with toggle button

Relocates the description to the right side and creates a button on the header to toggle with related videos

  1. // ==UserScript==
  2. // @name Youtube - right side description with toggle button
  3. // @description Relocates the description to the right side and creates a button on the header to toggle with related videos
  4. // @namespace https://greasyfork.org/en/users/758587-barn852
  5. // @version 2.0
  6. // @author barn852
  7. // @license MIT
  8. // @match *://*.youtube.com/*
  9. // @include *://*.youtube.com/watch*
  10. // @grant none
  11. // @require https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js
  12. // @run-at document-end
  13. // @noframes
  14. // ==/UserScript==
  15.  
  16. (function(){
  17. 'use strict';
  18.  
  19. const hide_related = () => $('#related').hide();
  20. const insert_right = () => document.querySelector('#secondary-inner').appendChild(document.getElementById('meta-contents'));
  21.  
  22. const observer = new MutationObserver(function(mutations){
  23. mutations.forEach(function(mutation){
  24. if (mutation.type === 'childList'){
  25. mutation.addedNodes.forEach(function(node){
  26. hide_related();
  27. });
  28. };
  29. if (document.querySelector("#secondary-inner > #meta-contents")) { return } else { insert_right() };
  30. });
  31. });
  32.  
  33. observer.observe(document.body, {'childList': true, 'subtree' : true});
  34.  
  35. let target = document.querySelectorAll('body')[0];
  36. let options = {'childList': true, 'subtree' : true};
  37.  
  38. let button = document.createElement('button');
  39. button.innerHTML = '<svg width="24" height="24" viewBox="0 0 22 22"><g fill="currentColor"><path d="M4 14h4v-4H4v4zm0 5h4v-4H4v4zM4 9h4V5H4v4zm5 5h12v-4H9v4zm0 5h12v-4H9v4zM9 5v4h12V5H9z"/></g></svg>';
  40. button.style = ` background: transparent; border: 0; color: rgb(96,96,96); outline: 0; cursor: pointer; padding-left: 24px; padding-right: 24px; `;
  41.  
  42. let hide = true;
  43.  
  44. button.onclick = ()=>{
  45. hide = !hide;
  46. $('#meta-contents').show();
  47. if (hide){
  48. if ($('#related')[0])
  49. $('#related').hide();
  50. else
  51. observer.observe(target, options);
  52. console.log(`hide`);
  53. }
  54. else{
  55. observer.disconnect();
  56. console.log(`show`);
  57. $('#related').show();
  58. $('#meta-contents').hide();
  59. }
  60. }
  61.  
  62. let waitButton = setInterval(() => {
  63. if ($('#end').length) {
  64. clearInterval(waitButton);
  65.  
  66. let menu = $('#end')[0];
  67. menu.insertBefore(button, menu.lastElementChild);
  68.  
  69. }
  70. }, 500);
  71.  
  72. console.log('inserted');
  73.  
  74. window.addEventListener('yt-page-data-updated', function () {
  75.  
  76. var checkExist = setInterval(function() {
  77. var ytMeta = document.querySelector('#secondary-inner #more .more-button.ytd-video-secondary-info-renderer');
  78. if(ytMeta){
  79. (ytMeta).click();
  80. clearInterval(checkExist);
  81. }
  82. }, 500);
  83.  
  84. });
  85.  
  86. } )()