☰

Toggle YouTube Heart Comments

Toggle YouTube heart comments.

  1. // ==UserScript==
  2. // @name        Toggle YouTube Heart Comments
  3. // @namespace   https://github.com/gslin/toggle-youtube-heart-comments-userscript
  4. // @match       https://www.youtube.com/*
  5. // @grant       none
  6. // @version     0.20210611.0
  7. // @author      Gea-Suan Lin <gslin@gslin.com>
  8. // @description Toggle YouTube heart comments.
  9. // @license     MIT
  10. // ==/UserScript==
  11.  
  12. (() => {
  13.     'use strict;'
  14.  
  15.     let ob = new window.MutationObserver(mutations => {
  16.         mutations.forEach(mutation => {
  17.             mutation.addedNodes.forEach(() => {
  18.                 // Only filter pages whose path are "/watch".
  19.                 if (document.location.pathname !== '/watch') {
  20.                     return;
  21.                 }
  22.  
  23.                 let sheet = document.querySelector('.has-creator-heart-style');
  24.                 if (!sheet) {
  25.                     sheet = document.createElement('style');
  26.                     sheet.classList.add('has-creator-heart-style');
  27.                     document.getElementsByTagName('head')[0].appendChild(sheet);
  28.                 }
  29.  
  30.                 // Wait for ytd-comments element ready.
  31.                 let comments_el = document.querySelector('ytd-comments');
  32.                 if (!comments_el) {
  33.                     return;
  34.                 }
  35.  
  36.                 // Simulate "ytd-comment-thread-renderer:has(ytd-creator-heart-renderer)" selector.
  37.                 let comments_heart = document.querySelectorAll('ytd-comment-thread-renderer');
  38.                 comments_heart.forEach(el => {
  39.                     if (el.querySelector('ytd-creator-heart-renderer')) {
  40.                         el.classList.add('has-creator-heart');
  41.                     }
  42.                 });
  43.  
  44.                 // Don't install twice.
  45.                 if (document.getElementById('toggle_youtube_heart_comments')) {
  46.                     return;
  47.                 }
  48.  
  49.                 let toggle_el = document.createElement('div');
  50.                 toggle_el.innerHTML = '<button data-status="0" id="toggle_youtube_heart_comments">All (All / Heart / Non-Heart)</button>';
  51.  
  52.                 let button_el = toggle_el.querySelector('button');
  53.                 button_el.addEventListener('click', () => {
  54.                     if (button_el.dataset.status === '0') {
  55.                         button_el.dataset.status = '1';
  56.                         button_el.innerHTML = 'Heart (All / Heart / Non-Heart)';
  57.                         sheet.innerHTML = 'ytd-comment-thread-renderer:not(.has-creator-heart) { display: none; }'
  58.                     } else if (button_el.dataset.status === '1') {
  59.                         button_el.dataset.status = '2';
  60.                         button_el.innerHTML = 'Non-Heart (All / Heart / Non-Heart)';
  61.                         sheet.innerHTML = 'ytd-comment-thread-renderer.has-creator-heart { display: none; }'
  62.                     } else {
  63.                         button_el.dataset.status = '0';
  64.                         button_el.innerHTML = 'All (All / Heart / Non-Heart)';
  65.                         sheet.innerHTML = '';
  66.                     }
  67.                 });
  68.  
  69.                 comments_el.insertAdjacentElement('beforebegin', toggle_el);
  70.                 console.debug('Toggle YouTube Heart Comments installed.');
  71.             });
  72.         });
  73.     });
  74.  
  75.     ob.observe(document, {
  76.         childList: true,
  77.         subtree: true,
  78.     });
  79. })();