Toggle Youtube Styles

Adds toggles to enable/disable some styles that change Youtube

Version au 27/04/2024. Voir la dernière version.

Vous devrez installer une extension telle que Tampermonkey, Greasemonkey ou Violentmonkey pour installer ce script.

You will need to install an extension such as Tampermonkey to install this script.

Vous devrez installer une extension telle que Tampermonkey ou Violentmonkey pour installer ce script.

Vous devrez installer une extension telle que Tampermonkey ou Userscripts pour installer ce script.

Vous devrez installer une extension telle que Tampermonkey pour installer ce script.

Vous devrez installer une extension de gestionnaire de script utilisateur pour installer ce script.

(J'ai déjà un gestionnaire de scripts utilisateur, laissez-moi l'installer !)

Vous devrez installer une extension telle que Stylus pour installer ce style.

Vous devrez installer une extension telle que Stylus pour installer ce style.

Vous devrez installer une extension telle que Stylus pour installer ce style.

Vous devrez installer une extension du gestionnaire de style pour utilisateur pour installer ce style.

Vous devrez installer une extension du gestionnaire de style pour utilisateur pour installer ce style.

Vous devrez installer une extension du gestionnaire de style pour utilisateur pour installer ce style.

(J'ai déjà un gestionnaire de style utilisateur, laissez-moi l'installer!)

// ==UserScript==
// @name        Toggle Youtube Styles
// @license     MIT
// @namespace   rtonne
// @match       https://www.youtube.com/*
// @version     1.1
// @author      Rtonne
// @description Adds toggles to enable/disable some styles that change Youtube
// @grant       GM.addStyle
// @grant       GM.registerMenuCommand
// @grant       GM.unregisterMenuCommand
// @grant       GM.getValue
// @grant       GM.setValue
// ==/UserScript==

// To check if inplace command replacement is supported
// https://violentmonkey.github.io/api/gm/#gm_registermenucommand
const inplace = "test" === GM.registerMenuCommand("test", ()=>{}, {id: "test"});
GM.unregisterMenuCommand("test");

const commands = [
  {
    id: "guide_sections",
    disabled_caption: "☑ Guide Sections",
    enabled_caption: "☐ Guide Sections",
    disableStyle: () => GM.addStyle(`
      #sections.ytd-guide-renderer > ytd-guide-section-renderer:nth-child(n+3) {
        display: unset;
      }
    `),
    enableStyle: () => GM.addStyle(`
      #sections.ytd-guide-renderer > ytd-guide-section-renderer:nth-child(n+3) {
        display: none;
      }
    `)
  },
  {
    id: "comments",
    disabled_caption: "☑ Comments",
    enabled_caption: "☐ Comments",
    disableStyle: () => GM.addStyle(`
      ytd-comments#comments {
        display: unset;
      }
    `),
    enableStyle: () => GM.addStyle(`
      ytd-comments#comments {
        display: none;
      }
    `)
  },
  {
    id: "related_videos",
    disabled_caption: "☑ Related Videos",
    enabled_caption: "☐ Related Videos",
    disableStyle: () => GM.addStyle(`
      #secondary.ytd-watch-flexy > #secondary-inner > #related {
        display: unset;
      }
    `),
    enableStyle: () => GM.addStyle(`
      #secondary.ytd-watch-flexy > #secondary-inner > #related {
        display: none;
      }
    `)
  },
  {
    id: "shorts",
    disabled_caption: "☑ Shorts",
    enabled_caption: "☐ Shorts",
    disableStyle: () => GM.addStyle(`
      ytd-rich-section-renderer {
        display: unset;
      }
    `),
    enableStyle: () => GM.addStyle(`
      ytd-rich-section-renderer {
        display: none;
      }
    `)
  },
];

for (const command of commands) {
  setCommand(command);
}
registerAllCommands();

async function registerAllCommands() {
  for (const command of commands) {
    GM.registerMenuCommand(
      await getCaption(command),
      () => toggleCommand(command),
      {id: command.id, autoClose:false}
    );
  }
}
async function unregisterAllCommands() {
  for (const command of commands) {
    GM.unregisterMenuCommand(command.id);
  }
}
async function toggleCommand(command) {
  await GM.setValue(command.id, !(await GM.getValue(command.id, false)));
  setCommand(command);
  if (inplace) {
    GM.registerMenuCommand(
      await getCaption(command),
      () => toggleCommand(command),
      {id: command.id, autoClose:false}
    );
  } else {
    unregisterAllCommands();
    registerAllCommands();
  }
}
async function setCommand(command) {
  if (await GM.getValue(command.id, false)) {
    command.enableStyle();
  } else {
    command.disableStyle();
  }
}
async function getCaption(command) {
  let caption = command.enabled_caption;
  if (!(await GM.getValue(command.id, false))) {
    caption = command.disabled_caption;
  }
  return caption;
}