import { MediaChromeButton } from "./media-chrome-button.js";
import { globalThis, document } from "./utils/server-safe-globals.js";
import { MediaUIEvents, MediaUIAttributes } from "./constants.js";
import { tooltipLabels, verbs } from "./labels/labels.js";
import {
getBooleanAttr,
setBooleanAttr,
getStringAttr,
setStringAttr
} from "./utils/element-utils.js";
const enterIcon = ``;
const exitIcon = ``;
const slotTemplate = document.createElement("template");
slotTemplate.innerHTML = /*html*/
`
${enterIcon}
${exitIcon}
`;
const tooltipContent = (
/*html*/
`
${tooltipLabels.START_CAST}
${tooltipLabels.STOP_CAST}
`
);
const updateAriaLabel = (el) => {
const label = el.mediaIsCasting ? verbs.EXIT_CAST() : verbs.ENTER_CAST();
el.setAttribute("aria-label", label);
};
class MediaCastButton extends MediaChromeButton {
static get observedAttributes() {
return [
...super.observedAttributes,
MediaUIAttributes.MEDIA_IS_CASTING,
MediaUIAttributes.MEDIA_CAST_UNAVAILABLE
];
}
constructor(options = {}) {
super({ slotTemplate, tooltipContent, ...options });
}
connectedCallback() {
super.connectedCallback();
updateAriaLabel(this);
}
attributeChangedCallback(attrName, oldValue, newValue) {
super.attributeChangedCallback(attrName, oldValue, newValue);
if (attrName === MediaUIAttributes.MEDIA_IS_CASTING) {
updateAriaLabel(this);
}
}
/**
* @type {boolean} Are we currently casting
*/
get mediaIsCasting() {
return getBooleanAttr(this, MediaUIAttributes.MEDIA_IS_CASTING);
}
set mediaIsCasting(value) {
setBooleanAttr(this, MediaUIAttributes.MEDIA_IS_CASTING, value);
}
/**
* @type {string | undefined} Cast unavailability state
*/
get mediaCastUnavailable() {
return getStringAttr(this, MediaUIAttributes.MEDIA_CAST_UNAVAILABLE);
}
set mediaCastUnavailable(value) {
setStringAttr(this, MediaUIAttributes.MEDIA_CAST_UNAVAILABLE, value);
}
handleClick() {
const eventName = this.mediaIsCasting ? MediaUIEvents.MEDIA_EXIT_CAST_REQUEST : MediaUIEvents.MEDIA_ENTER_CAST_REQUEST;
this.dispatchEvent(
new globalThis.CustomEvent(eventName, { composed: true, bubbles: true })
);
}
}
if (!globalThis.customElements.get("media-cast-button")) {
globalThis.customElements.define("media-cast-button", MediaCastButton);
}
var media_cast_button_default = MediaCastButton;
export {
media_cast_button_default as default
};