☰

Mark Watched YouTube Videos

Add an indicator for watched videos on YouTube

当前为 2019-04-14 提交的版本，查看 最新版本。

  1. // ==UserScript==
  2. // @name        Mark Watched YouTube Videos
  3. // @namespace   MarkWatchedYouTubeVideos
  4. // @description Add an indicator for watched videos on YouTube
  5. // @version     1.0.16
  6. // @license     AGPL v3
  7. // @author      jcunews
  8. // @include     https://www.youtube.com/*
  9. // @grant       GM_getValue
  10. // @grant       GM_setValue
  11. // @run-at      document-start
  12. // ==/UserScript==
  13.  
  14. (function() {
  15.   
  16.   //=== config start ===
  17.   var maxWatchedVideoAge   = 365;    //number of days. set to zero to disable (not recommended)
  18.   var pageLoadMarkDelay    = 400;    //number of milliseconds to wait before marking video items on page load phase (increase if slow network/browser)
  19.   var contentLoadMarkDelay = 600;    //number of milliseconds to wait before marking video items on content load phase (increase if slow network/browser)
  20.   var markerMouseButtons   = [0, 1]; //one or more mouse buttons to use for manual marker toggle. 0=left, 1=right, 2=middle. e.g.:
  21.                                      //if `[0]`, only left button is used, which is ALT+LeftClick.
  22.                                      //if `[1]`, only right button is used, which is ALT+RightClick.
  23.                                      //if `[0,1]`, any left or right button can be used, which is: ALT+LeftClick or ALT+RightClick.
  24.   //=== config end ===
  25.  
  26.   var watchedVideos, ageMultiplier = 24 * 60 * 60 * 1000;
  27.  
  28.   function getVideoId(url) {
  29.     var vid = url.match(/\/watch(?:\?|.*?&)v=([^&]+)/);
  30.     if (vid) vid = vid[1] || vid[2];
  31.     return vid;
  32.   }
  33.  
  34.   function watched(vid, res) {
  35.     res = -1;
  36.     watchedVideos.some(function(v, i) {
  37.       if (v.id === vid) {
  38.         res = i;
  39.         return true;
  40.       } else return false;
  41.     });
  42.     return res;
  43.   }
  44.  
  45.   function processVideoItems(selector) {
  46.     var items = document.querySelectorAll(selector), i, link;
  47.     for (i = items.length-1; i >= 0; i--) {
  48.       link = items[i].querySelector("A");
  49.       if (link) {
  50.         if (watched(getVideoId(link.href)) >= 0) {
  51.           items[i].classList.add("watched");
  52.         } else items[i].classList.remove("watched");
  53.       }
  54.     }
  55.   }
  56.  
  57.   function processAllVideoItems() {
  58.     //home page
  59.     processVideoItems(".yt-uix-shelfslider-list>.yt-shelf-grid-item");
  60.     //subscriptions page
  61.     processVideoItems(".multirow-shelf>.shelf-content>.yt-shelf-grid-item");
  62.     //channel/user home page
  63.     processVideoItems("#contents>.ytd-item-section-renderer>.ytd-newspaper-renderer,#items>.yt-horizontal-list-renderer"); //old
  64.     processVideoItems("#contents>.ytd-channel-featured-content-renderer,#contents>.ytd-shelf-renderer>#grid-container>.ytd-expanded-shelf-contents-renderer"); //new
  65.     //channel/user video page
  66.     processVideoItems(".yt-uix-slider-list>.featured-content-item,#items>.ytd-grid-renderer");
  67.     //channel/user playlist page
  68.     processVideoItems(".expanded-shelf>.expanded-shelf-content-list>.expanded-shelf-content-item-wrapper,.ytd-playlist-video-renderer");
  69.     //channel/user playlist item page
  70.     processVideoItems(".pl-video-list .pl-video-table .pl-video,ytd-playlist-panel-video-renderer");
  71.     //channel/user videos page
  72.     processVideoItems(".channels-browse-content-grid>.channels-content-item");
  73.     //channel/user search page
  74.     if (/^\/(?:channel|user)\/.*?\/search/.test(location.pathname)) {
  75.       processVideoItems(".ytd-browse #contents>.ytd-item-section-renderer"); //new
  76.     }
  77.     //search page
  78.     processVideoItems("#results>.section-list .item-section>li,#browse-items-primary>.browse-list-item-container"); //old
  79.     processVideoItems(".ytd-search #contents>.ytd-item-section-renderer"); //new
  80.     //video page sidebar
  81.     processVideoItems(".watch-sidebar-body>.video-list>.video-list-item,.playlist-videos-container>.playlist-videos-list>li"); //old
  82.     processVideoItems(".ytd-compact-video-renderer"); //new
  83.   }
  84.  
  85.   function doProcessPage() {
  86.     //get list of watched videos
  87.     watchedVideos = GM_getValue("watchedVideos");
  88.     if (!watchedVideos) {
  89.       watchedVideos = "[]";
  90.       GM_setValue("watchedVideos", watchedVideos);
  91.     }
  92.     try {
  93.       watchedVideos = JSON.parse(watchedVideos);
  94.       if (watchedVideos.length && (("object" !== typeof watchedVideos[0]) || !watchedVideos[0].id)) {
  95.         watchedVideos = "[]";
  96.         GM_setValue("watchedVideos", watchedVideos);
  97.       }
  98.     } catch(z) {
  99.       watchedVideos = "[]";
  100.       GM_setValue("watchedVideos", watchedVideos);
  101.     }
  102.  
  103.     //remove old watched video history
  104.     var i = 0, now = (new Date()).valueOf();
  105.     if (maxWatchedVideoAge > 0) {
  106.       while (i < watchedVideos.length) {
  107.         if (((now - watchedVideos.timestamp) / ageMultiplier) > maxWatchedVideoAge) {
  108.           watchedVideos.splice(0, 1);
  109.         } else break;
  110.       }
  111.     }
  112.  
  113.     //check and remember current video
  114.     var vid = getVideoId(location.href);
  115.     if (vid && (watched(vid) < 0)) {
  116.       watchedVideos.push({id: vid, timestamp: now});
  117.       GM_setValue("watchedVideos", JSON.stringify(watchedVideos));
  118.     }
  119.  
  120.     //=== mark watched videos ===
  121.     processAllVideoItems();
  122.   }
  123.  
  124.   function processPage() {
  125.     setTimeout(doProcessPage, 200);
  126.   }
  127.  
  128.   var xhropen = XMLHttpRequest.prototype.open, xhrsend = XMLHttpRequest.prototype.send;
  129.   XMLHttpRequest.prototype.open = function(method, url) {
  130.     this.url_mwyv = url;
  131.     return xhropen.apply(this, arguments);
  132.   };
  133.   XMLHttpRequest.prototype.send = function(method, url) {
  134.     if ((/\/\w+_ajax\?|\/results\?search_query/).test(this.url_mwyv) && !this.listened_mwyv) {
  135.       this.listened_mwyv = 1;
  136.       this.addEventListener("load", function() {
  137.         setTimeout(processPage, Math.floor(pageLoadMarkDelay / 2));
  138.       });
  139.     }
  140.     return xhrsend.apply(this, arguments);
  141.   };
  142.  
  143.   addEventListener("DOMContentLoaded", function() {
  144.     var style = document.createElement("STYLE");
  145.     style.innerHTML = `
  146. .watched
  147.   { background-color: #cec !important }
  148. .playlist-videos-container>.playlist-videos-list>li.watched,
  149. .playlist-videos-container>.playlist-videos-list>li.watched>a,
  150. .playlist-videos-container>.playlist-videos-list>li.watched .yt-ui-ellipsis
  151.   { background-color: #030 !important }
  152. `;
  153.     document.head.appendChild(style);
  154.   });
  155.  
  156.   var lastFocusState = document.hasFocus();
  157.   addEventListener("blur", function() {
  158.     lastFocusState = false;
  159.   });
  160.   addEventListener("focus", function() {
  161.     if (!lastFocusState) processPage();
  162.     lastFocusState = true;
  163.   });
  164.   addEventListener("click", function(ev, vid, i) {
  165.     if ((markerMouseButtons.indexOf(ev.button) >= 0) && ev.altKey) {
  166.       i = ev.target;
  167.       if (i) {
  168.         if (i.href) {
  169.           vid = getVideoId(i.href);
  170.         } else {
  171.           i = i.parentNode;
  172.           while (i) {
  173.             if (i.tagName === "A") {
  174.               vid = getVideoId(i.href);
  175.               break;
  176.             }
  177.             i = i.parentNode;
  178.           }
  179.         }
  180.         if (vid) {
  181.           i = watched(vid);
  182.           if (i >= 0) {
  183.             watchedVideos.splice(i, 1);
  184.           } else watchedVideos.push({id: vid, timestamp: (new Date()).valueOf()});
  185.           GM_setValue("watchedVideos", JSON.stringify(watchedVideos));
  186.           processAllVideoItems();
  187.         }
  188.       }
  189.     }
  190.   });
  191.   if (markerMouseButtons.indexOf(1) >= 0) {
  192.     addEventListener("contextmenu", function(ev, vid, i) {
  193.       if (ev.altKey) {
  194.         i = ev.target;
  195.         if (i) {
  196.           if (i.href) {
  197.             vid = getVideoId(i.href);
  198.           } else {
  199.             i = i.parentNode;
  200.             while (i) {
  201.               if (i.tagName === "A") {
  202.                 vid = getVideoId(i.href);
  203.                 break;
  204.               }
  205.               i = i.parentNode;
  206.             }
  207.           }
  208.           if (vid) {
  209.             i = watched(vid);
  210.             if (i >= 0) {
  211.               watchedVideos.splice(i, 1);
  212.             } else watchedVideos.push({id: vid, timestamp: (new Date()).valueOf()});
  213.             GM_setValue("watchedVideos", JSON.stringify(watchedVideos));
  214.             processAllVideoItems();
  215.           }
  216.         }
  217.       }
  218.     });
  219.   }
  220.   if (window["body-container"]) { //old
  221.     addEventListener("spfdone", processPage);
  222.     processPage();
  223.   } else { //new
  224.     var t=0;
  225.     function pl() {
  226.       clearTimeout(t);
  227.       t = setTimeout(processPage, 300);
  228.     }
  229.     (function init(vm) {
  230.       if (vm = document.getElementById("visibility-monitor")) {
  231.         vm.addEventListener("viewport-load", pl);
  232.       } else setTimeout(init, 100);
  233.     })();
  234.     (function init2(mh) {
  235.       if (mh = document.getElementById("masthead")) {
  236.         mh.addEventListener("yt-rendererstamper-finished", pl);
  237.       } else setTimeout(init2, 100);
  238.     })();
  239.     addEventListener("load", function() {
  240.       setTimeout(processPage, pageLoadMarkDelay);
  241.     });
  242.     addEventListener("spfprocess", function() {
  243.       setTimeout(processPage, contentLoadMarkDelay);
  244.     });
  245.   }
  246. })();