Youtube layout switch, ViolentMonkey script

yt-layout-switch.js

// ==UserScript==
// @name        YouTube layout switch
// @description Script to switch the two main columns of YT's video layout (puts player on the right and video list on the left).
//
// @author      y8a5y
// @namespace   https://gist.github.com/y8a5y/d88d2f0225b0246692ea302653e5183e
// @version     1.1.0
//
// @match       *://www.youtube.com/*
// @icon        https://www.youtube.com/favicon.ico
//
// @grant       GM_addStyle
// @require     https://cdn.jsdelivr.net/npm/@violentmonkey/dom@2
//
// @downloadURL https://gist.githubusercontent.com/y8a5y/d88d2f0225b0246692ea302653e5183e/raw/yt-layout-switch.js
// @updateURL   https://gist.githubusercontent.com/y8a5y/d88d2f0225b0246692ea302653e5183e/raw/yt-layout-switch.js
// ==/UserScript==

onUrlChange();

// see https://violentmonkey.github.io/api/matching/#matching-spa-sites-like-fb-github-twitter-youtube
if (self.navigation) {
  navigation.addEventListener('navigatesuccess', onUrlChange);
} else {
  let u = location.href;
  new MutationObserver(() => u !== (u = location.href) && onUrlChange())
    .observe(document, {subtree: true, childList: true});
}

function onUrlChange() {
  if (!location.pathname.startsWith('/watch')) {
    return;
  }

  // watch layout
  VM.observe(document.body, () => {
    const primary = document.querySelector("#primary.style-scope.ytd-watch-flexy");
    const secondary = document.querySelector("#secondary.style-scope.ytd-watch-flexy");
    console.log(primary, secondary)

    // check layout is fully present
    if (!!primary && !!secondary) {
      // change layout
      primary.before(secondary);
      return true;
    }
  });

  // fix padding style
  GM_addStyle("ytd-watch-flexy #secondary.ytd-watch-flexy { padding-right: 0 !important; padding-left: 24px !important; }");
}