☰

Youtube 详情评论在左边 (还能用)

标题、描述和评论会在左侧占据更多空间，视频建议则在右侧显示。

  1. // ==UserScript==
  2. // @name         Youtube Comments Section First (Latest)
  3. // @name:zh-CN   Youtube 详情评论在左边 (还能用)
  4. // @namespace    http://tampermonkey.net/
  5. // @version      20240531
  6. // @description  Title description and comments section first, suggestions on the right
  7. // @description:zh-CN   标题、描述和评论会在左侧占据更多空间，视频建议则在右侧显示。
  8. // @author       leovoon
  9. // @match        *.youtube.com/watch*
  10. // @icon         https://www.google.com/s2/favicons?sz=64&domain=youtube.com
  11. // @grant        none
  12. // @license      GNU GPLv3
  13.  
  14. // ==/UserScript==
  15.  
  16. (function() {
  17.     'use strict';
  18.  
  19.      // Function to be called when the target element exists
  20.     function waitForElement(selector, callback) {
  21.         const targetNode = document.querySelector(selector);
  22.         if (targetNode) {
  23.             callback(targetNode);
  24.             return;
  25.         }
  26.  
  27.         const observer = new MutationObserver(mutationsList => {
  28.             for (const mutation of mutationsList) {
  29.                 if (mutation.type === 'childList') {
  30.                     const targetNode = document.querySelector(selector);
  31.                     if (targetNode) {
  32.                         callback(targetNode);
  33.                         observer.disconnect();
  34.                         break;
  35.                     }
  36.                 }
  37.             }
  38.         });
  39.  
  40.         // Start observing the target node for changes in children
  41.         observer.observe(document.body, { childList: true, subtree: true });
  42.     }
  43.  
  44.     waitForElement('#columns', function(targetNode) {
  45.         if(!targetNode) return
  46.  
  47.         targetNode.children[0].style.flexGrow = 1 // how much suggestion spans
  48.          targetNode.children[0].style.flexBasis = 0
  49.         targetNode.children[0].style.minWidth = 'auto'
  50.          targetNode.children[0].style.order = 2
  51.  
  52.         targetNode.children[1].style.flexGrow = 5
  53.         targetNode.children[1].style.flexBasis = 0
  54.         targetNode.children[1].style.order = 1
  55.  
  56.         if (window.matchMedia("(min-width: 1025px)").matches) {
  57.             targetNode.style.width = 'var(--ytd-watch-flexy-max-player-height)';
  58.         }
  59.  
  60.  
  61.     });
  62.  
  63.  
  64.  
  65.  
  66. })();