feat: add seek_handle_border options

[Keith94]

Adds a border to seekbar handle with related options for color, thickness, and hover thickness expressed as a ratio.

Changed slider_hover_size default value to 100 with toggle removed. Slightly increased handle sizes.

If accepted, will update docs later.

[Samillion]

Don't know if there's a more elegant way.

Initially I thought just editing bord value and adding color would do it, but I don't think that would work, since for it to work the handle would need to be its own element, not tied to seekbar.... I think.

[Keith94]

Hmm, if you draw a border like that on a shape would it cause any artifacts or blurriness though?

[Samillion]

I genuinely have no idea. In theory, it should be fine, since it works on ass drawn elements (icons, indicators and such)

Like I said though, I have never done something like this, so my information is basically all theory.

[Keith94]

Making the handle its own element would be a huge refactor since the handle depends on the slider's state and has to move in sync every frame.

Probably not worth it to go that route.

[Keith94]

I added a few comments to clarify a bit, and updated docs. Hopefully should be good to go.

[Samillion]

Beautiful, thank you so much for your effort.

If you don't mind:

• Can we test this thoroughly before merging? As in, delay a fast merge for a bit.
• The color of the border (and border size, maybe?) still feel a bit off. I LOVE the idea, just the aesthetics of it looks strange

Or is that just me? (Be honest, I'm often wrong)

For example, Firefox: (from ontop in top bar PR)

Their method is "make the seekhandle match the seekbar's left and right side" ie: ranges/cache

I'm not saying we should absolutely do it like that, but it's a thought to process.

Then again, I remember when nekoxuee showed us Screenbox player:
https://github.com/huynhsontung/Screenbox/blob/main/assets/images/docs/PC-HeroPlayerPageVideo_Dark.png

Which follows what you applied (Windows' UI)

I have no idea to be honest lol.

Other possible references:

• https://videojs.org/ (play, on hover)
• https://dribbble.com/search/volume-slider (bunch of slider images)

I honestly couldn't find any other references, because 90% of what I found is exactly what we're using now. It was surprising the lack of variety in slider styles (pre 2015 there is A LOT, but look ancient)

[Keith94]

The Firefox look is perfectly suitable (used to be a fan of the browser for many years) and I don't mind applying it at all.

What you're asking should be feasible with what we have now, right? Can you send me your desired colors etc. and I can apply it.

[Keith94]

Also you can delay the merge for as long as you need.

[Samillion]

Don't apply, because I have no idea if this is a better default or not.

seek_handle_border_color=#FB8C00
seek_handle_color=#a85607
seek_handle_size=0.8
seek_handle_border_size=0.35

[Keith94]

It does tie very nicely into the orange theme. Let me sleep on it and try a few options.

[Samillion]

I genuinely trust your sense of aesthetic, it was you that suggested the orange palette in the first place. Can't wait.

[Keith94]

The difference I'm seeing is that Firefox uses a fully opaque seekbar background whereas ModernZ uses 50% opacity.

In order to mimic their appearance, we could make the seekbar_bg opaque so the handle color is always consistent with it. This appears to be a common approach with those sliders.

Want me to apply the fix?

[Samillion]

Sounds good, consistency always wins.

[Keith94]

The cache rendering over the foreground seemed unusual and affected the color, so I made it render over background only. I'm not sure if we still want seekrangealpha in this case or we could make it opaque in the future.

Let me know if that's okay

[Samillion]

I don't mind at all, I think the original idea was to give a visual hint of back cache, hence the transparency.

Though it's not that important, as long as forward cache is visible like before.

[Samillion]

Before you do more work, I have to ask, is all this worth the effort just for a slider handle border?

Genuinely asking, not rejecting. It seems like such a huge refactor for a small visual outcome. It's probably why most don't add border.

Edit:
Again, to be crystal clear, I'm not rejecting, just asking genuinely.

[Keith94]

I think it's worth it. Unlike other players, we can produce some nice color combinations now. Here's my personal one.

Ultimately, you have the final say whether you want it or not.

[Samillion]

I think it's worth it. Unlike other players, we can produce some nice color combinations now.

Agreed, customization is always nice.

Here's my personal one.

Beautiful.

---

I will not hinder progress on this anymore as I honestly doubt my own opinion when it comes to aesthetics.

cc @nekoxuee @clivedc Apologies for the bother. Could you help us decide on default color option for this new slider look please? Only if it's not a bother.

[Samillion]

@Keith94 to not delay anything further, by all means make all the changes you think will be good. I trust your instinct.

Once it's merge ready, let me know. Take all the time you need. If you need any help, don't hesitate to let me know.

[Keith94]

I made default colors a bit darker and changed alpha to 75%. Seems good enough.

[nekoxuee]

Handle is fine. The main problem is the warm background and orange accent are too close in temperature, and the played/unplayed lacks contrast. seekbarbg_color should be a cool neutral colour.

Keith personal colours fix this exact problem

[Samillion]

Indeed, his pick (personal setup) looks very nice.

[Keith94]

Ah, should I apply that here?

Not sure if you want specific parts or whole thing exactly. The new orange shade is from Windows Media Player.

[Samillion]

Like I said, I trust your instinct.

If they turn out to be good, yay, if not, we'll make you feel bad about it. It's a win win for us.

Joking aside, it really does look nice, we can adjust whatever if need be.

[Keith94]

Pushed another adjustment.

For some reason, picking the default colors is way too stressful for me. >.<

[Samillion]

I love the seekbar colors. The thing is, the second I see the handle my brain screams "this is not right"

However, I promised I won't hinder progress, so I merely ask, the dark gray border/circle with orange circle inside looks ok to you guys? @Keith94 @nekoxuee

[Samillion]

For reference, not to impose an opinion:

seek_handle_border_color=#FF8232
seek_handle_color=#a85607

[Keith94]

I like both! Your example seems like a safer option. Stands out against all backgrounds. Will change in a bit.

[Samillion]

Like I said, I didn't mean to impose an opinion. Which do you think would be the best default? Ignore my suggestion, my opinion is just there to brainstorm, not to decide over others.

Or if you have an alternative to both suggestions.

As you pointed out, the reason I "feel" it's not right is because the border disappears a lot, making the middle circle seem out of place.

Unfortunately, we don't get direct feedback a lot, only passive indicators (ie: stars count) So the burden of deciding what would be good is entirely on us.

[Keith94]

I prefer yours for the reason I mentioned. It's always visible even with a dark video. I don't forsee many complaints because it's all customizable.

[Samillion]

Alright. When you make the change, let me know when it's merge ready please or if you'd like me to wait. There is no rush at all.

Thanks for all your efforts and indulging me through my annoying process.

[Keith94]

Rebased and updated colors. Seems good on my end.

[Samillion]

Much appreciated. ❤️

Merging.