Skip to content

Instantly share code, notes, and snippets.

@furf
Last active October 28, 2020 16:20
Show Gist options
  • Save furf/34183eca47e061ea2e22ace181296a4e to your computer and use it in GitHub Desktop.
Save furf/34183eca47e061ea2e22ace181296a4e to your computer and use it in GitHub Desktop.
<rmp-mock-video-controller>
<rmp-muted-toggle ?muted=${boolean('muted', true)}>
<rmp-mute-button id="story.mute" slot="mute-button">
<icon-mute fill></icon-mute>
</rmp-mute-button>
<rmp-unmute-button id="story.unmute" slot="unmute-button">
<icon-volume fill></icon-volume>
</rmp-unmute-button>
</rmp-muted-toggle>
</rmp-mock-video-controller>
/**
* MutedToggle component
*/
export class MutedToggle extends LitElement {
@videoContext.Consumer('muted')
muted?: TMuted;
render() {
return this.muted
? html`<slot name="unmute-button">${this.renderUnmuteButtonSlot()}</slot>`
: html`<slot name="mute-button">${this.renderMuteButtonSlot()}</slot>`;
}
protected renderMuteButtonSlot() {
return html`<rmp-mute-button />`;
}
protected renderUnmuteButtonSlot() {
return html`<rmp-unmute-button />`;
}
}
export class MuteButton extends LitElement {
static styles = css`
:host button {
cursor: pointer;
}
`;
@videoContext.Consumer('muted')
muted: TMuted = false;
render() {
return html`
<button @click=${this.onClick} ?disabled="${this.muted}">
<slot>${this.renderSlot()}</slot>
</button>
`;
}
protected renderSlot() {
return html`<rmp-mute-button-label />`;
}
private onClick(event: Event) {
this.dispatchEvent(new CustomEvent(CLICK_MUTE_BUTTON, event));
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment