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.21k stars 62 forks source link

fix: calc padding CSS var issue #757

Closed luwes closed 11 months ago

luwes commented 11 months ago

this improves an issue with calculating the range width and the padding that can be set via CSS vars.

previously if the CSS var was set to 0 or another valid padding value 3px 5px for example the calc() function would fail.

this new approach requires 2 padding elements but it doesn't fail against CSS vars like above

vercel[bot] commented 11 months 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 Nov 2, 2023 10:44pm
media-chrome-docs ✅ Ready (Inspect) Visit Preview 💬 Add feedback Nov 2, 2023 10:44pm
codecov[bot] commented 11 months ago

Codecov Report

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

Comparison is base (444f248) 79.32% compared to head (fbdfc91) 79.09%. Report is 5 commits behind head on main.

Additional details and impacted files ```diff @@ Coverage Diff @@ ## main #757 +/- ## ========================================== - Coverage 79.32% 79.09% -0.24% ========================================== Files 57 58 +1 Lines 10348 10467 +119 ========================================== + Hits 8209 8279 +70 - Misses 2139 2188 +49 ``` | [Files](https://app.codecov.io/gh/muxinc/media-chrome/pull/757?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=muxinc) | Coverage Δ | | |---|---|---| | [src/js/controller.js](https://app.codecov.io/gh/muxinc/media-chrome/pull/757?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=muxinc#diff-c3JjL2pzL2NvbnRyb2xsZXIuanM=) | `65.85% <100.00%> (ø)` | | | [src/js/media-chrome-button.js](https://app.codecov.io/gh/muxinc/media-chrome/pull/757?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=muxinc#diff-c3JjL2pzL21lZGlhLWNocm9tZS1idXR0b24uanM=) | `89.91% <100.00%> (+0.04%)` | :arrow_up: | | [src/js/media-container.js](https://app.codecov.io/gh/muxinc/media-chrome/pull/757?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=muxinc#diff-c3JjL2pzL21lZGlhLWNvbnRhaW5lci5qcw==) | `83.90% <ø> (+0.57%)` | :arrow_up: | | [src/js/media-control-bar.js](https://app.codecov.io/gh/muxinc/media-chrome/pull/757?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=muxinc#diff-c3JjL2pzL21lZGlhLWNvbnRyb2wtYmFyLmpz) | `79.59% <100.00%> (-2.40%)` | :arrow_down: | | [src/js/media-time-display.js](https://app.codecov.io/gh/muxinc/media-chrome/pull/757?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=muxinc#diff-c3JjL2pzL21lZGlhLXRpbWUtZGlzcGxheS5qcw==) | `79.49% <100.00%> (-0.15%)` | :arrow_down: | | [src/js/utils/element-utils.js](https://app.codecov.io/gh/muxinc/media-chrome/pull/757?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=muxinc#diff-c3JjL2pzL3V0aWxzL2VsZW1lbnQtdXRpbHMuanM=) | `88.20% <88.88%> (+0.06%)` | :arrow_up: | | [src/js/media-volume-range.js](https://app.codecov.io/gh/muxinc/media-chrome/pull/757?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=muxinc#diff-c3JjL2pzL21lZGlhLXZvbHVtZS1yYW5nZS5qcw==) | `61.94% <14.28%> (+0.92%)` | :arrow_up: | | [src/js/utils/range-animation.js](https://app.codecov.io/gh/muxinc/media-chrome/pull/757?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=muxinc#diff-c3JjL2pzL3V0aWxzL3JhbmdlLWFuaW1hdGlvbi5qcw==) | `50.63% <50.63%> (ø)` | | | [src/js/media-time-range.js](https://app.codecov.io/gh/muxinc/media-chrome/pull/757?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=muxinc#diff-c3JjL2pzL21lZGlhLXRpbWUtcmFuZ2UuanM=) | `77.92% <64.05%> (+7.05%)` | :arrow_up: | | [src/js/media-chrome-range.js](https://app.codecov.io/gh/muxinc/media-chrome/pull/757?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=muxinc#diff-c3JjL2pzL21lZGlhLWNocm9tZS1yYW5nZS5qcw==) | `80.76% <71.83%> (-12.16%)` | :arrow_down: |

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