Raw Source Toggle Dropdown

• Minified Source

alike03 / Youtube grey out watched

// ==UserScript==
// @name        Youtube grey out watched
// @description Grays out watched videos on Subscription page
// @author      alike03
// @namespace   yt_grey_out
// @match       *://*.youtube.com/*
// @version     1.1
// @icon        https://www.youtube.com/favicon.ico
// @supportURL  https://openuserjs.org/scripts/alike03/Youtube_grey_out_watched/issues
// @updateURL   https://openuserjs.org/meta/alike03/Youtube_grey_out_watched.meta.js
// @downloadURL https://openuserjs.org/install/alike03/Youtube_grey_out_watched.min.user.js
// @copyright   2023, alike03 (https://openuserjs.org/users/alike03)
// @license     MIT
// ==/UserScript==
/* jshint esversion: 6 */

const app = document.querySelector('ytd-app');
var count = 0;

function markVideos(a) {
  const withProgressbar = app.querySelectorAll('ytd-browse[page-subtype="subscriptions"] ytd-grid-video-renderer:not([data-status]) ytd-thumbnail-overlay-resume-playback-renderer #progress');

  count += withProgressbar.length;
  console.log(withProgressbar.length, count);
  withProgressbar.forEach(function (element) {
    let videoElement = element.closest('ytd-grid-video-renderer');

    let containerWidth = videoElement.offsetWidth;
    let progressWidth = element.offsetWidth;

    let progress = parseInt(progressWidth) / parseInt(containerWidth) * 100;
    let status = progress == 100 ? 'watched' : 'resume';

    //element.setAttribute('status', status);
    if (progressWidth != 0) {
      videoElement.dataset.status = status;
    }
  });
}

function analyzePage() {
  if (window.location.pathname.startsWith('/feed/subscriptions')) {
    const list = app.querySelector('ytd-section-list-renderer');

    if (list.dataset.processed) {
      return;
    }

    list.dataset.processed = true;
    list.addEventListener('yt-next-continuation-data-updated', markVideos);

    new MutationObserver(markVideos).observe(list, {
      childList: true,
      subtree: true
    });
  }
}

if (app) {
  app.addEventListener('yt-navigate-finish', analyzePage);
  document.head.insertAdjacentHTML("beforeend", `<style>
        .ytd-grid-renderer {
            transition: opacity, filter .5s ease-out;
            filter: grayscale(0);
            opacity: 1;
        }

        .ytd-grid-renderer[data-status="resume"] {
            filter: grayscale(.3);
            opacity: 1;
        }

        .ytd-grid-renderer[data-status="watched"] {
            filter: grayscale(1);
            opacity: .5;
        }
    </style>`);
}

analyzePage();