import { efContext } from "./efContext.js";
import { playingContext } from "./playingContext.js";
import { consume } from "@lit/context";
import { LitElement, css, html } from "lit";
import { customElement } from "lit/decorators.js";
import _decorate from "@oxc-project/runtime/helpers/decorate";
let EFTogglePlay = class EFTogglePlay$1 extends LitElement {
	constructor(..._args) {
		super(..._args);
		this.playing = false;
	}
	static {
		this.styles = [css`
      :host {}
      div {
        all: inherit;
      }
    `];
	}
	render() {
		return html`
      <div
        @click=${() => {
			if (this.context) if (this.playing) this.context.pause();
			else this.context.play();
		}}
      >
        ${this.playing ? html`<slot name="pause"></slot>` : html`<slot name="play"></slot>`}
      </div>
    `;
	}
	togglePlay() {
		if (this.context) if (this.playing) this.context.pause();
		else this.context.play();
	}
};
_decorate([consume({
	context: efContext,
	subscribe: true
})], EFTogglePlay.prototype, "context", void 0);
_decorate([consume({
	context: playingContext,
	subscribe: true
})], EFTogglePlay.prototype, "playing", void 0);
EFTogglePlay = _decorate([customElement("ef-toggle-play")], EFTogglePlay);
export { EFTogglePlay };
