fix(big-play-button): component customization

[amtins]

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

[codecov]

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]

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