Greasy Fork

Seems like this is one of the only styles around that currently still works everywhere on YouTube from what I can tell, one thing I'd love to see though is an option to make it kind of like the picture. The top video is completely watched, while the second video only a small percentage of the video is watched. That way it makes it easier to see what videos I may not have fully watched for whatever reason (be it I'm coming back to it later or whatever).

just don't hide the red bar, and you can tell at a glance the video is partly watched

I don't really like the red bar so I prefer to hide it (I much prefer the way it is in the screenshot) which is why I asked for this suggestion.

well, unfortunally with pure css it's probably not possible. with js it wouldn't be hard, but then this won't be a userstyle anymore.

there might be a hacky way to do this. but having both the red bar and this fill bar you have on the pic (which i barely even noticed) might not be possible.

but i'll have to take a look at it over the weekend.

It's definitely possible with just pure css as this userstyle right here https://userstyles.world/style/18613 does it (the above picture was taken with that userstyle). It's just that his userstyle is semi-broken and doesn't work everywhere like yours does and you at least seem to have a presence unlike the guy who made that userstyle.

btw the red bar is disabled in the above pictures, the red bar you see is actually part of the thumbnail image from the creator and not the progress bar.

*technically not disabled but hidden like your theme does when the disable progress bar is enabled. (I can't edit my last post for some reason as greasyfork is stupid in that if I go away from the page and come back it won't let me edit my own posts..)

yeah, after i wrote that comment i thought about it, and yes, it's possible to have both the red bar and the progressive fill of the thumbnail

btw, edit only works for 5 minutes after you post

> btw, edit only works for 5 minutes after you post

Ah got it, tbh I rarely ever make comments so I never could figure out why the edit button would disappear xD

> yeah, after i wrote that comment i thought about it, and yes, it's possible to have both the red bar and the progressive fill of the thumbnail

Are you trying to think up a way to have both of them enabled at the same time or something? I guess that would make sense. The way I was thinking of was having a fourth option for the "watched_badge_style" that would disable the red progress bar, enable the progressive fill of the thumbnail and the bold checkmark. But it's your style so you can come up with whatever method you'd prefer to do things.

OK, so in your first comment you said percentage. I don't know why, but then I thought to see if I can add a percentage number instead of the text "watched". So I had a quick look and that would've only been possible to be done with JS, the bar inself has the width as an inline style. So it wouldn't be good to have the text show up (we can either have the whole "width: xx%" or nothing. So I said it needs JS. Then I thought I could just use line-height and break on whitespace. And then I re-read your comment and noticed you weren't talking about the text changing, but rather have a progressive fill/hide of the thumbnail which I didn't even notice the first time I looked at the picture.

So ofcourse it's possible. I've added it now

Aha it's all good ^^ Tried the new option and it works great, I did make a few changes myself like changing it to a FontAwesome checkmark (prefer it over the "watched" text) and such but otherwise thanks a bunch :)

it's ok. You can add the font in a new style, so if this gets updated you won't lose the changes.

All you need is this:

@font-face {
    font-family: 'FontAwesome';
    src: url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/fonts/fontawesome-webfont.eot');
    src: url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/fonts/fontawesome-webfont.eot') format('embedded-opentype'), url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/fonts/fontawesome-webfont.ttf') format('truetype'), url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/fonts/fontawesome-webfont.woff') format('woff'), url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/fonts/fontawesome-webfont.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}
.resume-playback-background::before,
ytd-thumbnail-overlay-resume-playback-renderer::before,
.ytThumbnailOverlayProgressBarHostWatchedProgressBar::before {
  font-family: FontAwesome, Roboto, Arial, sans-serif;
  font-size: 250% !important;
  content: "\f00c" !important;
}