☰

Return WATCHED badge on Youtube (with custom text)

Bring back the WATCHED overlay to the videos you have already watched on youtube.

Verze ze dne 04. 07. 2022. Zobrazit nejnovější verzi.

/* ==UserStyle==
@name Return WATCHED badge on Youtube (with custom text)
@namespace q1k
@type uso
@description Bring back the WATCHED overlay to the videos you have already watched on youtube.
@version 1.0.1
@advanced text watched_text "Watched video text: " "WATCHED"
@advanced dropdown watched_badge_style "Watched badge style: " {
	0 "Small (default)" <<<EOT
  /* white overlay *\/
  .resume-playback-background,
  ytd-thumbnail-overlay-resume-playback-renderer {
    background: rgba(255, 255, 255, 0.37) !important;
    position: absolute;
    left: 0;
    top: 0;
    display: block !important;
    height: 100%;
    width: 100%;
    pointer-events: none;
    opacity: 1;
    z-index: 11;
    text-align: left;
    font-size: 12px;
    transition: background 0.2s;
  }
  
  /* watched tag - default *\/
  .resume-playback-background::before,
  ytd-thumbnail-overlay-resume-playback-renderer::before {
    background: black;
    content: "/*[[watched_text]]*\/";
    color: white;
    font-weight: 500;
    box-sizing: border-box;
    width: auto;
    height: 17px;
    line-height: 17px;
    padding-left: 5px;
    padding-right: 5px;
    
    display: block;
    position: absolute;
    left: 1px;
    top: 1px;
    z-index: 12;
    opacity: 0.9;
    pointer-events: none;
    font-size: 100%;
  }

  #thumbnail:hover ytd-thumbnail-overlay-resume-playback-renderer {
    background: rgba(0, 0, 0, 0) !important;
    transition: background 0.2s;
  }
 EOT;
	1 "Alternative (old style)" <<<EOT
  /* white overlay *\/
  .resume-playback-background,
  ytd-thumbnail-overlay-resume-playback-renderer {
    background: rgba(255, 255, 255, 0.37) !important;
    position: absolute;
    left: 0;
    top: 0;
    display: block !important;
    height: 100%;
    width: 100%;
    pointer-events: none;
    opacity: 1;
    z-index: 11;
    text-align: left;
    font-size: 12px;
  }
  
  /* watched tag - alternative *\/
  .resume-playback-background::before,
  ytd-thumbnail-overlay-resume-playback-renderer::before {
    background: #444;
    content: "/*[[watched_text]]*\/";
    color: white;
    font-weight: 500;
    box-sizing: border-box;
    width: 100%;
    height: 18px;
    line-height: 18px;
    padding-left: 5px;
    padding-right: 5px;
    
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 12;
    opacity: 0.9;
    pointer-events: none;
    font-size: 93%;
  } EOT;
	2 "Full (completely covered)" <<<EOT
  /* overlay *\/
  .resume-playback-background,
  ytd-thumbnail-overlay-resume-playback-renderer {
    background: rgba(0, 0, 0, 0.7) !important;
    position: absolute;
    left: 0;
    top: 0;
    display: block !important;
    height: 100%;
    width: 100%;
    pointer-events: none;
    opacity: 1;
    z-index: 11;
    font-size: 12px;
    text-align: center;
    transition: background 0.2s;
  }
  
  /* watched tag - full *\/
  .resume-playback-background::before,
  ytd-thumbnail-overlay-resume-playback-renderer::before {
    /*background: rgba(0, 0, 0, 0.85);*\/
    content: "/*[[watched_text]]*\/";
    color: white;
    font-weight: 400;
    box-sizing: border-box;
    width: auto;
    height: 100%;
    line-height: normal;
    padding: 1px 5px;
    
    display: flex;
    z-index: 12;
    opacity: 0.9;
    pointer-events: none;
    font-size: 140%;
    transition: opacity 0.2s;
    flex-direction: row;
    align-items: center;
    justify-content: center;
  }
  
  .yt-lockup-thumbnail:hover .resume-playback-background::before,
  .thumb-wrapper:hover .resume-playback-background::before,
  #thumbnail:hover ytd-thumbnail-overlay-resume-playback-renderer::before {
    opacity: 0;
    transition: opacity 0.2s;
  }
  
  .yt-lockup-thumbnail:hover .resume-playback-background,
  .thumb-wrapper:hover .resume-playback-background,
  #thumbnail:hover ytd-thumbnail-overlay-resume-playback-renderer {
    background: rgba(0, 0, 0, 0) !important;
    transition: background 0.2s;
  } EOT;
}
@advanced dropdown remove_red_bar "Remove red bar?" {
	0 "No" <<<EOT
/* remove red bar - NO *\/
  /* fix the other tags/badges *\/
  .resume-playback-progress-bar,
  .ytd-thumbnail-overlay-resume-playback-renderer {
    z-index: 13 !important;
    height: 4px !important;
  }
  
  .video-time,
  ytd-thumbnail-overlay-time-status-renderer {
    z-index: 13 !important;
    pointer-events: none;
  } EOT;
	1 "Yes" <<<EOT
/* remove red bar - YES *\/
  .resume-playback-progress-bar, .resume-playback-background::after,
  .ytd-thumbnail-overlay-resume-playback-renderer,
  ytd-thumbnail-overlay-resume-playback-renderer::after {
    display: none !important;
  }
  
  /* fix the video time tag *\/
  .video-time,
  ytd-thumbnail-overlay-time-status-renderer {
    z-index: 13 !important;
    pointer-events: none;
    margin-bottom: 0 !important;
    bottom: 2px;
  } EOT;
}
==/UserStyle== */

@namespace url(http://www.w3.org/1999/xhtml);
@-moz-document domain("youtube.com") {
  
/*
Bring back the WATCHED badge to the videos you have already watched on youtube.
In a recent update youtube removed the watched tag, and added a red progression bar on the bottom that doesn't function properly.
With this style you will get the WATCHED tag back.
*/
  #progress.ytd-thumbnail-overlay-resume-playback-renderer { height: 4px !important; bottom: 0px !important; position: absolute !important; }
  #overlays > * { z-index: 13; }
  #hover-overlays ytd-thumbnail-overlay-toggle-button-renderer {
    z-index: 13;
  }
  
/*[[watched_badge_style]]*/
  
  /* return the progressbar background */
  .resume-playback-background::after,
  ytd-thumbnail-overlay-resume-playback-renderer::after {
    background: rgba(255, 255, 255, 0.5);
    content: "";
    position: absolute;
    display: block;
    right: 0;
    bottom: 0;
    height: 4px;
    width: 100%;
    z-index: 12;
  }
  
  /*[[remove_red_bar]]*/
  
  /* */
  .watched-badge,
  .ytd-thumbnail-overlay-playback-status-renderer {
    display: none !important;
  }
  .watched .video-thumb, .watch-sidebar-body .yt-uix-simple-thumb-wrap.watched > img {
    opacity: 1 !important;
  }
  
}