☰

YouTube (New Design) | Highlight First Watched Video

Highlight the first watched video in YouTube playlists and subcription feeds

  1. // ==UserScript==
  2. // @name            YouTube (New Design) | Highlight First Watched Video
  3. // @namespace       de.sidneys.userscripts
  4. // @homepage        https://gist.githubusercontent.com/sidneys/53aa0b6eb8b25676fd2b1bcb6b0deca5/raw/
  5. // @version         1.0.0
  6. // @description     Highlight the first watched video in YouTube playlists and subcription feeds
  7. // @author          sidneys
  8. // @icon            https://www.youtube.com/favicon.ico
  9. // @include         http*://www.youtube.com/*
  10. // @require         https://greasyfork.org/scripts/38888-greasemonkey-color-log/code/Greasemonkey%20%7C%20Color%20Log.js
  11. // @require         https://greasyfork.org/scripts/38889-greasemonkey-waitforkeyelements-2018/code/Greasemonkey%20%7C%20waitForKeyElements%202018.js
  12. // @run-at          document-end
  13. // ==/UserScript==
  14.  
  15. /**
  16.  * @default
  17.  * @constant
  18.  * @global
  19.  */
  20. DEBUG = false;
  21.  
  22.  
  23. /**
  24.  * @default
  25.  * @constant
  26.  */
  27. const urlPath = '/feed/subscriptions';
  28.  
  29. /**
  30.  * Highlight Feed Item
  31.  * @param {HTMLElement} element - div.feed-item-container
  32.  */
  33. let highlightFeedItem = (element) => {
  34.     console.debug('highlightFeedItem');
  35.  
  36.     // DOM
  37.     const itemElement = element.closest('ytd-shelf-renderer');
  38.  
  39.     itemElement.style.cssText = `
  40.         border-color: rgb(255, 33, 23) !important;
  41.         border-style: solid !important;
  42.         border-width: 2px !important;
  43.         background-image: linear-gradient(rgba(255, 33, 23, 0.75) 0%, rgba(255, 33, 23, 0.3) 50%) !important;
  44.     `;
  45.  
  46.     console.debug('First "Watched" Feed Item:', itemElement.querySelector('#video-title').innerText);
  47. };
  48.  
  49.  
  50. /**
  51.  * Init
  52.  */
  53. let init = () => {
  54.     console.info('init');
  55.  
  56.     // Check URL
  57.     if (!location.pathname.startsWith(urlPath)) { return; }
  58.  
  59.  
  60.     // Watch feed items
  61.     waitForKeyElements('ytd-thumbnail-overlay-resume-playback-renderer', (item) => {
  62.         highlightFeedItem(item);
  63.     }, true);
  64. };
  65.  
  66.  
  67. /**
  68.  * @listens window:Event#load
  69.  */
  70. window.addEventListener('load', () => {
  71.     console.debug('window#load');
  72.  
  73.     init();
  74. });
  75.  
  76. /**
  77.  * @listens window:Event#spfdone
  78.  */
  79. window.addEventListener('spfdone', () => {
  80.     console.debug('window#spfdone');
  81.  
  82.     init();
  83. });