0-MockVideoPlayer.html

<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>

1-MutedToggle.ts

/**
 * 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 />`;
  }
}

2-MuteButton.ts

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));
  }
}