search

muxinc / media-chrome

Custom elements (web components) for making audio and video player controls that look great in your website or app.
https://media-chrome.org
MIT License
1.77k stars 71 forks source link

feat: add range preview chapters #755

Closed luwes closed 9 months ago

luwes commented 1 year ago

related work https://github.com/muxinc/media-chrome/pull/664

test url: https://media-chrome-git-fork-luwes-chapters-range-mux.vercel.app/examples/vanilla/advanced.html

This adds the chapters in the time range piece of supporting the chapters feature.

It's an approach I haven't seen in other players, instead of dividing the visual track in multiple divs with many child divs representing progress, buffer, pointer highlight, etc like seen in the screenshot at the bottom of the YT player markup.

The approach in this PR uses clip-path and an SVG with a <clipPath> that contains a <rect> for each segment. That should make the amount of elements be reduced by at least 3x.

SCR-20231030-nrj

YouTube player markup with a lot more elements

SCR-20231022-doo

vercel[bot] commented 1 year ago

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 Feb 9, 2024 3:46pm
media-chrome-docs ✅ Ready (Inspect) Visit Preview 💬 Add feedback Feb 9, 2024 3:46pm
codecov[bot] commented 1 year ago

Codecov Report

Attention: 115 lines in your changes are missing coverage. Please review.

Comparison is base (dbc79eb) 78.64% compared to head (1091eb6) 78.59%. Report is 4 commits behind head on main.

Files Patch % Lines
src/js/media-chrome-range.js 60.29% 54 Missing :warning:
src/js/controller.js 35.13% 24 Missing :warning:
src/js/media-preview-chapter-display.js 64.51% 22 Missing :warning:
src/js/media-time-range.js 84.21% 12 Missing :warning:
src/js/media-preview-time-display.js 0.00% 2 Missing :warning:
src/js/utils/server-safe-globals.js 75.00% 1 Missing :warning:
Additional details and impacted files ```diff @@ Coverage Diff @@ ## main #755 +/- ## ========================================== - Coverage 78.64% 78.59% -0.05% ========================================== Files 58 59 +1 Lines 10789 11046 +257 ========================================== + Hits 8485 8682 +197 - Misses 2304 2364 +60 ```

:umbrella: View full report in Codecov by Sentry.
:loudspeaker: Have feedback on the report? Share it here.

dylanjha commented 1 year ago

Screenshot 2023-11-03 at 9 36 38 AM

Weird, I can't visually see it here

(on the demo link: https://media-chrome-git-fork-luwes-chapters-range-mux.vercel.app/examples/vanilla/advanced.html)

luwes commented 1 year ago

@dylanjha strange, is that the Arc browser? which version

dylanjha commented 1 year ago

@luwes ya Arc

Version 1.14.0 (42789) Chromium Engine Version 118.0.5993.117

vercel[bot] commented 1 year ago

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

A member of the Team first needs to authorize it.