Add centered-chrome slot to default UI

[MattiasBuelens]

This adds a centered-chrome slot to the default UI, allowing customers to replace all controls in the center of the player with their own controls.

For example, to always show the seek back/forward buttons in the center even on desktop, you can add them there without the mobile-hidden attribute:

<theoplayer-default-ui>
    <theoplayer-seek-button slot="centered-chrome" seek-offset="-10" ad-hidden></theoplayer-seek-button>
    <theoplayer-play-button slot="centered-chrome"></theoplayer-play-button>
    <theoplayer-seek-button slot="centered-chrome" seek-offset="10" ad-hidden></theoplayer-seek-button>
</theoplayer-default-ui>

You can then use a ::part selector to style the centered-chrome container itself. For example, to add more space between the buttons:

theoplayer-default-ui::part(centered-chrome) {
    display: flex;
    min-width: 50%;
    justify-content: space-evenly;
}

[changeset-bot]

🦋 Changeset detected

Latest commit: c086209

The changes in this PR will be included in the next version bump.

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR