Mark watched videos current vs expected behavior

[lackovic]

Is there a page documenting this feature?

As far as I understood, to mark a video as watched you need to hover with the mouse cursor on a video thumbnail and click on the gray "eye" icon in the bottom left corner: once clicked the icon becomes slightly darker gray, but besides that I don't see a way to understand which videos have been marked as watched.

The expected behavior is that the thumbnail video is marked as watched in the YouTube way, underlined with a thick red line.

[tazihad]

yes we need this feature. Whole thumbnail should be marked

[ImprovedTube]

hi @lackovic @tazihad ! what about also making these thumbnails a bit smaller / a bit transparent

[raszpl]

speaking of watched. Currently extension is tracking watched regardless of settings/consent

ImprovedTube.storage.mark_watched_videos
undefined
Object.keys(ImprovedTube.storage.watched).length
xxxx

https://github.com/code4charity/YouTube-Extension/blob/b9761fa795f996ff93f6ba6466c86d47c07c76c5/youtube-scripts.js#L819 properly gates this behind a setting, but https://github.com/code4charity/YouTube-Extension/blob/b9761fa795f996ff93f6ba6466c86d47c07c76c5/youtube-scripts.js#L432 doesnt

Something like a new option ImprovedTube.storage.track_watched_videos turned on whenever you turn on ImprovedTube.storage.mark_watched_videos would solve this. Add Reset/Delete watched history Button for good measure. This way User could decide it he wants to track and mark watched separately, and be in control of collected data. Similar problem with Analyzer - no button to delete stored data.

[bonbonboi]

Excuse me, beside that issue which is we can't recognize the watched videos of not watched, what does "Track watched videos" mean? also is it related to "mark watched videos"?

[raszpl]

in order to "mark watched videos" you need to know which ones you watched. If you dont "track watched videos" you wont know which ones you watched :)

Personally I do something else. I make sure every video I watch pushes to browser history a clean URL

let pushed;
let videoid_regex = new RegExp('[?&]v=([^&]+)');
if (document.location.pathname == "/watch" && pushed != document.location.search.match(videoid_regex)[1] && document.location.search != "?v="+document.location.search.match(videoid_regex)[1]) {
  pushed = document.location.search.match(videoid_regex)[1]
  history.pushState(null, null, '/watch?v='+document.location.search.match(videoid_regex)[1])
}

then I modify CSS to change color of visited links

let css = ''
// make VISITED links distinct
//subscriptions/lists
css += 'a#video-title {color: #167ac6!important;}';
css += 'a:visited#video-title {color: #141761!important;}';
//commenter channel name
css += 'a#author-text {color: #167ac6!important;}';
css += 'a:visited#author-text {color: #141761!important;}';
//sidebar
css += 'a #video-title {color: #167ac6!important;}';
css += 'a:visited #video-title {color: #141761!important;}';

css += '#content-text a, #description a {color: #167ac6!important;}';
css += '#content-text a:visited, #description a:visited{color: #141761!important;}';

and finally make sure any videos showing up on YT page have a clean URL

  if (document.location.pathname == "/playlist") {
    Array.from( document.getElementsByClassName("yt-simple-endpoint style-scope ytd-playlist-video-renderer")).forEach(el => {el.href = decodeURIComponent("?v="+el.href.match(videoid_regex)[1])})

  document.addEventListener('DOMSubtreeModified', function (e){
...
    // playlist links swapped for direct VIDEO links to see VISITED links, redirects to original on click.
    else if ((document.location.search.includes("&list=") || document.location.search.includes("?list="))
             && event.target.className
             && typeof event.target.className.match !== 'undefined'
             && event.target.className.match(/(ytd-playlist-panel-video-renderer)/)) {
      Array.from( event.target.querySelectorAll('.yt-simple-endpoint.style-scope.ytd-playlist-panel-video-renderer[href*="&list="], .yt-simple-endpoint.style-scope.ytd-playlist-video-renderer[href*="&list="]')).forEach(el => {
        el.setAttribute('redirect', el.href);
        el.href = el.href.match(/(.*?\/watch\?v=(.*?))(&|$)/)[1];
        el.onclick = function(e) {
          e.preventDefault();
          window.location.href = this.getAttribute('redirect');
        }
      });
    }
  }, true);


  document.addEventListener('DOMNodeInserted', function (event) {
    // playlist links lead directly to VIDEO, not playlist, this lets you see VISITED links.
    if (document.location.pathname == "/playlist") {
      Array.from( document.getElementsByClassName("pl-video-title-link")).forEach(el => {
        el.href = decodeURIComponent("?v="+el.href.match(videoid_regex)[1]);
      });
    }

that way I get distinctly colored links to already watched videos for free, browser remembers it for me without the need for additional databases

[ImprovedTube]

Personally I do something else. I make sure every video I watch pushes to browser history a clean URL and finally make sure any videos showing up on YT page have a clean URL

Which video links don't appear in history otherwise?

then I modify CSS to change color of visited links

It would be another great option for this extension! @raszpl
As well as for our https://github.com/code-charity/History-Manager-with-indexedDB (, which i'm so sad to delay to review and finish. And as a side-effect will be eligible to apply for public funding because it enables data independence)