var __defProp = Object.defineProperty; var __getOwnPropDesc = Object.getOwnPropertyDescriptor; var __getOwnPropNames = Object.getOwnPropertyNames; var __hasOwnProp = Object.prototype.hasOwnProperty; var __export = (target, all) => { for (var name in all) __defProp(target, name, { get: all[name], enumerable: true }); }; var __copyProps = (to, from, except, desc) => { if (from && typeof from === "object" || typeof from === "function") { for (let key of __getOwnPropNames(from)) if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable }); } return to; }; var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod); var __accessCheck = (obj, member, msg) => { if (!member.has(obj)) throw TypeError("Cannot " + msg); }; var __privateGet = (obj, member, getter) => { __accessCheck(obj, member, "read from private field"); return getter ? getter.call(obj) : member.get(obj); }; var __privateAdd = (obj, member, value) => { if (member.has(obj)) throw TypeError("Cannot add the same private member more than once"); member instanceof WeakSet ? member.add(obj) : member.set(obj, value); }; var __privateSet = (obj, member, value, setter) => { __accessCheck(obj, member, "write to private field"); setter ? setter.call(obj, value) : member.set(obj, value); return value; }; var media_time_display_exports = {}; __export(media_time_display_exports, { Attributes: () => Attributes, default: () => media_time_display_default }); module.exports = __toCommonJS(media_time_display_exports); var import_media_text_display = require("./media-text-display.js"); var import_element_utils = require("./utils/element-utils.js"); var import_server_safe_globals = require("./utils/server-safe-globals.js"); var import_time = require("./utils/time.js"); var import_constants = require("./constants.js"); var import_labels = require("./labels/labels.js"); var _slot; const Attributes = { REMAINING: "remaining", SHOW_DURATION: "showduration", NO_TOGGLE: "notoggle" }; const CombinedAttributes = [ ...Object.values(Attributes), import_constants.MediaUIAttributes.MEDIA_CURRENT_TIME, import_constants.MediaUIAttributes.MEDIA_DURATION, import_constants.MediaUIAttributes.MEDIA_SEEKABLE ]; const ButtonPressedKeys = ["Enter", " "]; const DEFAULT_TIMES_SEP = " / "; const formatTimesLabel = (el, { timesSep = DEFAULT_TIMES_SEP } = {}) => { var _a, _b; const showRemaining = el.hasAttribute(Attributes.REMAINING); const showDuration = el.hasAttribute(Attributes.SHOW_DURATION); const currentTime = (_a = el.mediaCurrentTime) != null ? _a : 0; const [, seekableEnd] = (_b = el.mediaSeekable) != null ? _b : []; let endTime = 0; if (Number.isFinite(el.mediaDuration)) { endTime = el.mediaDuration; } else if (Number.isFinite(seekableEnd)) { endTime = seekableEnd; } const timeLabel = showRemaining ? (0, import_time.formatTime)(0 - (endTime - currentTime)) : (0, import_time.formatTime)(currentTime); if (!showDuration) return timeLabel; return `${timeLabel}${timesSep}${(0, import_time.formatTime)(endTime)}`; }; const DEFAULT_MISSING_TIME_PHRASE = "video not loaded, unknown time."; const updateAriaValueText = (el) => { var _a; const currentTime = el.mediaCurrentTime; const [, seekableEnd] = (_a = el.mediaSeekable) != null ? _a : []; let endTime = null; if (Number.isFinite(el.mediaDuration)) { endTime = el.mediaDuration; } else if (Number.isFinite(seekableEnd)) { endTime = seekableEnd; } if (currentTime == null || endTime === null) { el.setAttribute("aria-valuetext", DEFAULT_MISSING_TIME_PHRASE); return; } const showRemaining = el.hasAttribute(Attributes.REMAINING); const showDuration = el.hasAttribute(Attributes.SHOW_DURATION); const currentTimePhrase = showRemaining ? (0, import_time.formatAsTimePhrase)(0 - (endTime - currentTime)) : (0, import_time.formatAsTimePhrase)(currentTime); if (!showDuration) { el.setAttribute("aria-valuetext", currentTimePhrase); return; } const totalTimePhrase = (0, import_time.formatAsTimePhrase)(endTime); const fullPhrase = `${currentTimePhrase} of ${totalTimePhrase}`; el.setAttribute("aria-valuetext", fullPhrase); }; class MediaTimeDisplay extends import_media_text_display.MediaTextDisplay { constructor() { super(); __privateAdd(this, _slot, void 0); __privateSet(this, _slot, this.shadowRoot.querySelector("slot")); __privateGet(this, _slot).innerHTML = `${formatTimesLabel(this)}`; } static get observedAttributes() { return [...super.observedAttributes, ...CombinedAttributes, "disabled"]; } connectedCallback() { const { style } = (0, import_element_utils.getOrInsertCSSRule)( this.shadowRoot, ":host(:hover:not([notoggle]))" ); style.setProperty("cursor", "pointer"); style.setProperty( "background", "var(--media-control-hover-background, rgba(50 50 70 / .7))" ); if (!this.hasAttribute("disabled")) { this.enable(); } this.setAttribute("role", "progressbar"); this.setAttribute("aria-label", import_labels.nouns.PLAYBACK_TIME()); const keyUpHandler = (evt) => { const { key } = evt; if (!ButtonPressedKeys.includes(key)) { this.removeEventListener("keyup", keyUpHandler); return; } this.toggleTimeDisplay(); }; this.addEventListener("keydown", (evt) => { const { metaKey, altKey, key } = evt; if (metaKey || altKey || !ButtonPressedKeys.includes(key)) { this.removeEventListener("keyup", keyUpHandler); return; } this.addEventListener("keyup", keyUpHandler); }); this.addEventListener("click", this.toggleTimeDisplay); super.connectedCallback(); } toggleTimeDisplay() { if (this.noToggle) { return; } if (this.hasAttribute("remaining")) { this.removeAttribute("remaining"); } else { this.setAttribute("remaining", ""); } } disconnectedCallback() { this.disable(); super.disconnectedCallback(); } attributeChangedCallback(attrName, oldValue, newValue) { if (CombinedAttributes.includes(attrName)) { this.update(); } else if (attrName === "disabled" && newValue !== oldValue) { if (newValue == null) { this.enable(); } else { this.disable(); } } super.attributeChangedCallback(attrName, oldValue, newValue); } enable() { this.tabIndex = 0; } disable() { this.tabIndex = -1; } // Own props /** * Whether to show the remaining time */ get remaining() { return (0, import_element_utils.getBooleanAttr)(this, Attributes.REMAINING); } set remaining(show) { (0, import_element_utils.setBooleanAttr)(this, Attributes.REMAINING, show); } /** * Whether to show the duration */ get showDuration() { return (0, import_element_utils.getBooleanAttr)(this, Attributes.SHOW_DURATION); } set showDuration(show) { (0, import_element_utils.setBooleanAttr)(this, Attributes.SHOW_DURATION, show); } /** * Disable the default behavior that toggles between current and remaining time */ get noToggle() { return (0, import_element_utils.getBooleanAttr)(this, Attributes.NO_TOGGLE); } set noToggle(noToggle) { (0, import_element_utils.setBooleanAttr)(this, Attributes.NO_TOGGLE, noToggle); } // Props derived from media UI attributes /** * Get the duration */ get mediaDuration() { return (0, import_element_utils.getNumericAttr)(this, import_constants.MediaUIAttributes.MEDIA_DURATION); } set mediaDuration(time) { (0, import_element_utils.setNumericAttr)(this, import_constants.MediaUIAttributes.MEDIA_DURATION, time); } /** * The current time in seconds */ get mediaCurrentTime() { return (0, import_element_utils.getNumericAttr)(this, import_constants.MediaUIAttributes.MEDIA_CURRENT_TIME); } set mediaCurrentTime(time) { (0, import_element_utils.setNumericAttr)(this, import_constants.MediaUIAttributes.MEDIA_CURRENT_TIME, time); } /** * Range of values that can be seeked to. * An array of two numbers [start, end] */ get mediaSeekable() { const seekable = this.getAttribute(import_constants.MediaUIAttributes.MEDIA_SEEKABLE); if (!seekable) return void 0; return seekable.split(":").map((time) => +time); } set mediaSeekable(range) { if (range == null) { this.removeAttribute(import_constants.MediaUIAttributes.MEDIA_SEEKABLE); return; } this.setAttribute(import_constants.MediaUIAttributes.MEDIA_SEEKABLE, range.join(":")); } update() { const timesLabel = formatTimesLabel(this); updateAriaValueText(this); if (timesLabel !== __privateGet(this, _slot).innerHTML) { __privateGet(this, _slot).innerHTML = timesLabel; } } } _slot = new WeakMap(); if (!import_server_safe_globals.globalThis.customElements.get("media-time-display")) { import_server_safe_globals.globalThis.customElements.define("media-time-display", MediaTimeDisplay); } var media_time_display_default = MediaTimeDisplay;