feat: add range CSS parts

[luwes]

fix #921, fix #983

• Brushed up mobile example https://media-chrome-git-fork-luwes-range-css-parts-mux.vercel.app/examples/vanilla/mobile.html
• Removes the background element, we can use the track element for setting the CSS background.
• Adds CSS parts: thumb, track, progress, buffered.
• --media-range-track-color CSS var is removed from JS docs, this was left over from the old structure with CSS linear-gradient where it represented the color of the range section on the right of the thumb.

1. a smooth track height transition on hover looks like

  media-time-range::part(track) {
    transition: transform 0.2s;
    transform: scaleY(1);
  }

  media-time-range:hover::part(track) {
    transform: scaleY(1.5);
  }

2. adding border-radius to track buffered and track progress elements

media-time-range::part(buffered),
media-time-range::part(progress) {
  border-radius: 9999px;
}

[vercel]

@luwes is attempting to deploy a commit to the Mux Team on Vercel.

A member of the Team first needs to authorize it.

[codecov]

Codecov Report

Attention: Patch coverage is 95.45455% with 1 line in your changes missing coverage. Please review.

Project coverage is 76.90%. Comparing base (3ea80df) to head (4c559c2).
Report is 123 commits behind head on main.

Files with missing lines	Patch %	Lines
src/js/media-time-range.ts	88.88%	1 Missing ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##             main     #990      +/-   ##
==========================================
- Coverage   78.55%   76.90%   -1.65%     
==========================================
  Files          59       50       -9     
  Lines       11080    12095    +1015     
  Branches        0      699     +699     
==========================================
+ Hits         8704     9302     +598     
- Misses       2376     2768     +392     
- Partials        0       25      +25     

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
media-chrome	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Oct 4, 2024 4:31pm
media-chrome-demo-nextjs	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Oct 4, 2024 4:31pm
media-chrome-docs	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Oct 4, 2024 4:31pm

[heff]

lgtm

[heff]

Is appearance an undocumented part? Or should it not be exposed? It's kind of an odd concept.

[luwes]

I tend to agree now but it was documented unfortunately so I don't think we can remove it :(

[cjpillsbury]

I know we don't frequently do this, but I think this is a good case to deprecate (and document the deprecation). I think several of these names may be confusing or at least not intuitive. The track-specific parts are not obviously track specific. I'm not sure why the div indicating what's been buffered is called "highlight"? I don't have a clear sense of what "pointer" actually is from the name or the description? Might be worth some time/thought/discussion getting these names right, since, per @luwes's last comment, once we add these parts + names it's a bigger deal to change or remove them.

If we do deprecate "appearance" and decide to rename it in the deprecation process, I think we can just:

1. add the new part name to the attribute
2. update the docs indicating that appearance is deprecated and will be removed in a future release and they should use whatever the new part name is (which should also be documented).

[luwes]

Sounds good yes, I don't want to rush this.

There's much to think about also heading in the future CSS vars vs CSS parts. And if we ever want to deprecate CSS vars in favor of a CSS part.

highlight is called like that because it's in the base class MediaChromeRange.
It doesn't really know about buffering or even if it's a time range.

the appearance naming is from CSS and webkit uses this as well. it's the visual UI, the appearance :)

add background and pointer parts and JS docs

[heff]

lgtm