Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

fix(big-play-button): component customization #8398

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

fix(big-play-button): component customization #8398

wants to merge 1 commit into from

Conversation

amtins
Copy link
Contributor

@amtins amtins commented Aug 12, 2023 •
edited
Loading

Description

Allows to easily change the visual aspect of the component without having to adjust the positioning.

Screencast.from.12.08.23.20.37.48.webm

Reduced test case

const t = [
  () => {videojs.getAllPlayers()[0].tech(true).trigger('waiting'); return 1},
  () => (videojs.dom.$('.vjs-loading-spinner').style.background = 'blue'),
  () => (videojs.dom.$('.vjs-big-play-button').style.background = 'none'),
  () => (videojs.dom.$('.vjs-big-play-button').style.height = '1.8em'),
  () => (videojs.dom.$('.vjs-big-play-button').style.width = '1.8em'),
  () => (videojs.dom.$('.vjs-big-play-button').style.borderRadius = '50%'),
  () => {
    videojs.dom.$('.vjs-big-play-button').style.width = '3em';
    videojs.dom.$('.vjs-big-play-button').style.height = '3em';
    return 1
  },
  () =>
    (videojs.dom.$('.vjs-big-play-button').style.border = '0.1em solid #fff'),
  () =>
    (videojs.dom.$('.vjs-big-play-button').style.border = '0.2em solid #fff'),
  () =>
    (videojs.dom.$('.vjs-big-play-button').style.border = '0.3em solid #fff'),
  () =>
    (videojs.dom.$('.vjs-big-play-button').style.border = '0.1em solid #fff'),
];

const interval = setInterval(() => {
  if (!t.shift()?.()) clearInterval(interval);
}, 1_000);

Specific Changes proposed

  • remove margin top/left used to center the component
  • add translate x/y to center the component regardless of its size
  • remove the line-height used to center the play icon
  • add display flex to center of pseudo-elements
  • keep height at 100% to fill the parent as before

Requirements Checklist

  • Feature implemented / Bug fixed
  • If necessary, more likely in a feature request than a bug fix
    • Change has been verified in an actual browser (Chrome, Firefox, IE)
    • Unit Tests updated or fixed
    • Docs/guides updated
    • Example created (starter template on JSBin)
  • Reviewed by Two Core Contributors

@amtins
fix(big-play-button): component customization
bc034bb 
Allows to easily change the visual aspect of the component without having to adjust the positioning.

- remove `margin` top/left used to center the component
- add `translate` x/y to center the component regardless of its size
- remove the `line-height` used to center the play `icon`
- add display `flex` to center of pseudo-elements
- keep `height` at 100% to fill the parent as before
@codecov
Copy link

codecov bot commented Aug 12, 2023

Codecov Report

Merging #8398 (bc034bb) into main (3e9ef0a) will not change coverage.
The diff coverage is n/a.

@@           Coverage Diff           @@
##             main    #8398   +/-   ##
=======================================
  Coverage   82.68%   82.68%           
=======================================
  Files         113      113           
  Lines        7578     7578           
  Branches     1821     1821           
=======================================
  Hits         6266     6266           
  Misses       1312     1312

📣 We’re building smart automated test selection to slash your CI/CD build times. Learn more

@mister-ben
Copy link
Contributor

This is better approach, but there's potential to break users' existing customisations based on the styles as they are.

@amtins amtins mentioned this pull request Aug 23, 2023
Open
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers
No reviews
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

None yet
2 participants
@amtins @mister-ben