{ "version": 3, "sources": ["../src/polyfills/index.ts", "../src/index.ts", "../src/env.ts", "../../../node_modules/custom-media-element/custom-media-element.js", "../../../node_modules/castable-video/castable-utils.js", "../../../node_modules/castable-video/castable-remote-playback.js", "../../../node_modules/castable-video/castable-mixin.js", "../../../node_modules/media-tracks/dist/track-event.js", "../../../node_modules/media-tracks/dist/utils.js", "../../../node_modules/media-tracks/dist/video-track-list.js", "../../../node_modules/media-tracks/dist/rendition-event.js", "../../../node_modules/media-tracks/dist/video-rendition-list.js", "../../../node_modules/media-tracks/dist/video-rendition.js", "../../../node_modules/media-tracks/dist/video-track.js", "../../../node_modules/media-tracks/dist/audio-rendition-list.js", "../../../node_modules/media-tracks/dist/audio-rendition.js", "../../../node_modules/media-tracks/dist/audio-track-list.js", "../../../node_modules/media-tracks/dist/audio-track.js", "../../../node_modules/media-tracks/dist/mixin.js"], "sourcesContent": ["/* eslint @typescript-eslint/no-empty-function: \"off\", @typescript-eslint/no-unused-vars: \"off\" */\n\nclass EventTarget {\n addEventListener() {}\n removeEventListener() {}\n dispatchEvent(_event: Event) {\n return true;\n }\n}\n\n// @github/template-parts requires DocumentFragment to be available on globalThis for SSR\nif (typeof DocumentFragment === 'undefined') {\n class DocumentFragment extends EventTarget {}\n // @ts-ignore\n globalThis.DocumentFragment = DocumentFragment;\n}\n\nclass HTMLElement extends EventTarget {}\nclass HTMLVideoElement extends EventTarget {}\n\nconst customElements: CustomElementRegistry = {\n get(_name: string) {\n return undefined;\n },\n define(_name, _constructor, _options) {},\n getName(_constructor) {\n return null;\n },\n upgrade(_root) {},\n whenDefined(_name) {\n return Promise.resolve(HTMLElement as unknown as CustomElementConstructor);\n },\n};\n\nclass CustomEvent {\n #detail;\n get detail() {\n return this.#detail;\n }\n constructor(typeArg: string, eventInitDict: CustomEventInit = {}) {\n // super(typeArg, eventInitDict);\n this.#detail = eventInitDict?.detail;\n }\n initCustomEvent() {}\n}\n\nfunction createElement(_tagName: string, _options?: ElementCreationOptions): HTMLElement {\n return new HTMLElement();\n}\n\nconst globalThisShim = {\n document: {\n createElement,\n },\n DocumentFragment,\n customElements,\n CustomEvent,\n EventTarget,\n HTMLElement,\n HTMLVideoElement,\n};\n\n// const isServer = typeof window === 'undefined' || typeof globalThis.customElements === 'undefined';\n// const GlobalThis = isServer ? globalThisShim : globalThis;\n// const Document = isServer ? globalThisShim.document : globalThis.document;\n//\n// export { GlobalThis as globalThis, Document as document };\nconst isServer = typeof window === 'undefined' || typeof globalThis.customElements === 'undefined';\ntype GlobalThis = typeof globalThis;\nconst internalGlobalThis: GlobalThis = (isServer ? globalThisShim : globalThis) as GlobalThis;\nconst internalDocument: Document = (isServer ? globalThisShim.document : globalThis.document) as Document;\n\nexport { internalGlobalThis as globalThis, internalDocument as document };\n", "import { globalThis } from './polyfills';\nimport {\n initialize,\n teardown,\n generatePlayerInitTime,\n MuxMediaProps,\n StreamTypes,\n PlaybackTypes,\n toMuxVideoURL,\n Metadata,\n MediaError,\n getError,\n CmcdTypes,\n CmcdTypeValues,\n addCuePoints,\n getCuePoints,\n getActiveCuePoint,\n addChapters,\n getActiveChapter,\n getStartDate,\n getCurrentPdt,\n getStreamType,\n getTargetLiveWindow,\n getLiveEdgeStart,\n getSeekable,\n getEnded,\n getChapters,\n toPlaybackIdFromSrc,\n toPlaybackIdParts,\n // isMuxVideoSrc,\n} from '@mux/playback-core';\nimport type {\n PlaybackCore,\n PlaybackEngine,\n Autoplay,\n ExtensionMimeTypeMap,\n ValueOf,\n MaxResolutionValue,\n MinResolutionValue,\n RenditionOrderValue,\n Chapter,\n CuePoint,\n Tokens,\n} from '@mux/playback-core';\nimport { getPlayerVersion } from './env';\n// this must be imported after playback-core for the polyfill to be included\nimport { CustomVideoElement, Events as VideoEvents } from 'custom-media-element';\nimport { CastableMediaMixin } from 'castable-video/castable-mixin.js';\nimport { MediaTracksMixin } from 'media-tracks';\nimport type { HlsConfig } from 'hls.js';\n\n// Must mutate so the added events are available in custom-media-element.\nVideoEvents.push('castchange', 'entercast', 'leavecast');\n\nexport const Attributes = {\n BEACON_COLLECTION_DOMAIN: 'beacon-collection-domain',\n CUSTOM_DOMAIN: 'custom-domain',\n DEBUG: 'debug',\n DISABLE_TRACKING: 'disable-tracking',\n DISABLE_COOKIES: 'disable-cookies',\n DRM_TOKEN: 'drm-token',\n PLAYBACK_TOKEN: 'playback-token',\n ENV_KEY: 'env-key',\n MAX_RESOLUTION: 'max-resolution',\n MIN_RESOLUTION: 'min-resolution',\n RENDITION_ORDER: 'rendition-order',\n PROGRAM_START_TIME: 'program-start-time',\n PROGRAM_END_TIME: 'program-end-time',\n ASSET_START_TIME: 'asset-start-time',\n ASSET_END_TIME: 'asset-end-time',\n METADATA_URL: 'metadata-url',\n PLAYBACK_ID: 'playback-id',\n PLAYER_SOFTWARE_NAME: 'player-software-name',\n PLAYER_SOFTWARE_VERSION: 'player-software-version',\n PREFER_CMCD: 'prefer-cmcd',\n PREFER_PLAYBACK: 'prefer-playback',\n START_TIME: 'start-time',\n STREAM_TYPE: 'stream-type',\n TARGET_LIVE_WINDOW: 'target-live-window',\n LIVE_EDGE_OFFSET: 'live-edge-offset',\n TYPE: 'type',\n} as const;\n\nconst AttributeNameValues = Object.values(Attributes);\n\nconst playerSoftwareVersion = getPlayerVersion();\nconst playerSoftwareName = 'mux-video';\n\nclass MuxVideoBaseElement extends CustomVideoElement implements Partial {\n static get observedAttributes() {\n return [...AttributeNameValues, ...(CustomVideoElement.observedAttributes ?? [])];\n }\n\n #core?: PlaybackCore;\n #loadRequested?: Promise | null;\n #playerInitTime: number;\n #metadata: Readonly = {};\n #tokens: Tokens = {};\n #_hlsConfig?: Partial;\n #playerSoftwareVersion?: string;\n #playerSoftwareName?: string;\n #errorTranslator?: (errorEvent: any) => any;\n\n constructor() {\n super();\n this.#playerInitTime = generatePlayerInitTime();\n }\n\n get preferCmcd() {\n return (this.getAttribute(Attributes.PREFER_CMCD) as ValueOf) ?? undefined;\n }\n\n set preferCmcd(value: ValueOf | undefined) {\n if (value === this.preferCmcd) return;\n if (!value) {\n this.removeAttribute(Attributes.PREFER_CMCD);\n } else if (CmcdTypeValues.includes(value)) {\n this.setAttribute(Attributes.PREFER_CMCD, value);\n } else {\n console.warn(`Invalid value for preferCmcd. Must be one of ${CmcdTypeValues.join()}`);\n }\n }\n\n get playerInitTime() {\n return this.#playerInitTime;\n }\n\n get playerSoftwareName() {\n return this.#playerSoftwareName ?? playerSoftwareName;\n }\n\n set playerSoftwareName(value: string | undefined) {\n this.#playerSoftwareName = value;\n }\n\n get playerSoftwareVersion() {\n return this.#playerSoftwareVersion ?? playerSoftwareVersion;\n }\n\n set playerSoftwareVersion(value: string | undefined) {\n this.#playerSoftwareVersion = value;\n }\n\n // Keeping this named \"_hls\" since it's exposed for unadvertised \"advanced usage\" via getter that assumes specifically hls.js (CJP)\n get _hls(): PlaybackEngine | undefined {\n return this.#core?.engine;\n }\n\n get mux(): Readonly | undefined {\n return this.nativeEl?.mux;\n }\n\n get error() {\n return getError(this.nativeEl) ?? null;\n }\n\n get errorTranslator(): ((errorEvent: any) => any) | undefined {\n return this.#errorTranslator;\n }\n\n set errorTranslator(value: ((errorEvent: any) => any) | undefined) {\n this.#errorTranslator = value;\n }\n\n get src() {\n // Use the attribute value as the source of truth.\n // No need to store it in two places.\n // This avoids needing a to read the attribute initially and update the src.\n return this.getAttribute('src') as string;\n }\n\n set src(val: string) {\n // If being set by attributeChangedCallback,\n // dont' cause an infinite loop\n if (val === this.src) return;\n\n if (val == null) {\n this.removeAttribute('src');\n } else {\n this.setAttribute('src', val);\n }\n }\n\n get type(): ValueOf | undefined {\n return (this.getAttribute(Attributes.TYPE) as ValueOf) ?? undefined;\n }\n\n set type(val: ValueOf | undefined) {\n // dont' cause an infinite loop\n if (val === this.type) return;\n\n if (val) {\n this.setAttribute(Attributes.TYPE, val);\n } else {\n this.removeAttribute(Attributes.TYPE);\n }\n }\n\n /** @ts-ignore */\n get autoplay(): Autoplay {\n const attr = this.getAttribute('autoplay');\n\n if (attr === null) {\n return false;\n } else if (attr === '') {\n return true;\n } else {\n return attr as Autoplay;\n }\n }\n\n /** @ts-ignore */\n set autoplay(val: Autoplay) {\n const currentVal = this.autoplay;\n if (val === currentVal) {\n return;\n }\n\n if (val) {\n this.setAttribute('autoplay', typeof val === 'string' ? val : '');\n } else {\n this.removeAttribute('autoplay');\n }\n }\n\n get preload() {\n const val = this.getAttribute('preload') as HTMLMediaElement['preload'];\n if (val === '') return 'auto';\n if (['none', 'metadata', 'auto'].includes(val)) return val;\n return super.preload;\n }\n\n set preload(val) {\n // don't cause an infinite loop\n // check the attribute because an empty string maps to the `auto` prop\n if (val == this.getAttribute('preload')) return;\n\n if (['', 'none', 'metadata', 'auto'].includes(val)) {\n this.setAttribute('preload', val);\n } else {\n this.removeAttribute('preload');\n }\n }\n\n get debug() {\n return this.getAttribute(Attributes.DEBUG) != null;\n }\n\n set debug(val) {\n // dont' cause an infinite loop\n if (val === this.debug) return;\n\n if (val) {\n this.setAttribute(Attributes.DEBUG, '');\n } else {\n this.removeAttribute(Attributes.DEBUG);\n }\n }\n\n get disableTracking() {\n return this.hasAttribute(Attributes.DISABLE_TRACKING);\n }\n\n set disableTracking(val) {\n // dont' cause an infinite loop\n if (val === this.disableTracking) return;\n\n this.toggleAttribute(Attributes.DISABLE_TRACKING, !!val);\n }\n\n get disableCookies() {\n return this.hasAttribute(Attributes.DISABLE_COOKIES);\n }\n\n set disableCookies(val) {\n // dont' cause an infinite loop\n if (val === this.disableCookies) return;\n\n if (val) {\n this.setAttribute(Attributes.DISABLE_COOKIES, '');\n } else {\n this.removeAttribute(Attributes.DISABLE_COOKIES);\n }\n }\n\n get startTime(): number | undefined {\n const val = this.getAttribute(Attributes.START_TIME);\n if (val == null) return undefined;\n const num = +val;\n return !Number.isNaN(num) ? num : undefined;\n }\n\n set startTime(val: number | undefined) {\n // dont' cause an infinite loop\n if (val === this.startTime) return;\n\n if (val == null) {\n this.removeAttribute(Attributes.START_TIME);\n } else {\n this.setAttribute(Attributes.START_TIME, `${val}`);\n }\n }\n\n // NOTE: playbackId may contain additional query params (e.g. token= for playback token) (CJP)\n get playbackId(): string | undefined {\n if (this.hasAttribute(Attributes.PLAYBACK_ID)) {\n return this.getAttribute(Attributes.PLAYBACK_ID) as string;\n }\n\n return toPlaybackIdFromSrc(this.src) ?? undefined;\n }\n\n set playbackId(val: string | undefined) {\n // dont' cause an infinite loop\n if (val === this.playbackId) return;\n\n if (val) {\n this.setAttribute(Attributes.PLAYBACK_ID, val);\n } else {\n this.removeAttribute(Attributes.PLAYBACK_ID);\n }\n }\n\n get maxResolution() {\n return (this.getAttribute(Attributes.MAX_RESOLUTION) as MaxResolutionValue) ?? undefined;\n }\n\n set maxResolution(val: MaxResolutionValue | undefined) {\n if (val === this.maxResolution) return;\n\n if (val) {\n this.setAttribute(Attributes.MAX_RESOLUTION, val);\n } else {\n this.removeAttribute(Attributes.MAX_RESOLUTION);\n }\n }\n\n get minResolution() {\n return (this.getAttribute(Attributes.MIN_RESOLUTION) as MinResolutionValue) ?? undefined;\n }\n\n set minResolution(val: MinResolutionValue | undefined) {\n if (val === this.minResolution) return;\n\n if (val) {\n this.setAttribute(Attributes.MIN_RESOLUTION, val);\n } else {\n this.removeAttribute(Attributes.MIN_RESOLUTION);\n }\n }\n\n get renditionOrder() {\n return (this.getAttribute(Attributes.RENDITION_ORDER) as RenditionOrderValue) ?? undefined;\n }\n\n set renditionOrder(val: RenditionOrderValue | undefined) {\n if (val === this.renditionOrder) return;\n\n if (val) {\n this.setAttribute(Attributes.RENDITION_ORDER, val);\n } else {\n this.removeAttribute(Attributes.RENDITION_ORDER);\n }\n }\n\n get programStartTime() {\n const val = this.getAttribute(Attributes.PROGRAM_START_TIME);\n if (val == null) return undefined;\n const num = +val;\n return !Number.isNaN(num) ? num : undefined;\n }\n\n set programStartTime(val: number | undefined) {\n if (val == undefined) {\n this.removeAttribute(Attributes.PROGRAM_START_TIME);\n } else {\n this.setAttribute(Attributes.PROGRAM_START_TIME, `${val}`);\n }\n }\n\n get programEndTime() {\n const val = this.getAttribute(Attributes.PROGRAM_END_TIME);\n if (val == null) return undefined;\n const num = +val;\n return !Number.isNaN(num) ? num : undefined;\n }\n\n set programEndTime(val: number | undefined) {\n if (val == undefined) {\n this.removeAttribute(Attributes.PROGRAM_END_TIME);\n } else {\n this.setAttribute(Attributes.PROGRAM_END_TIME, `${val}`);\n }\n }\n\n get assetStartTime() {\n const val = this.getAttribute(Attributes.ASSET_START_TIME);\n if (val == null) return undefined;\n const num = +val;\n return !Number.isNaN(num) ? num : undefined;\n }\n\n set assetStartTime(val: number | undefined) {\n if (val == undefined) {\n this.removeAttribute(Attributes.ASSET_START_TIME);\n } else {\n this.setAttribute(Attributes.ASSET_START_TIME, `${val}`);\n }\n }\n\n get assetEndTime() {\n const val = this.getAttribute(Attributes.ASSET_END_TIME);\n if (val == null) return undefined;\n const num = +val;\n return !Number.isNaN(num) ? num : undefined;\n }\n\n set assetEndTime(val: number | undefined) {\n if (val == undefined) {\n this.removeAttribute(Attributes.ASSET_END_TIME);\n } else {\n this.setAttribute(Attributes.ASSET_END_TIME, `${val}`);\n }\n }\n\n get customDomain() {\n return this.getAttribute(Attributes.CUSTOM_DOMAIN) ?? undefined;\n }\n\n set customDomain(val: string | undefined) {\n // dont' cause an infinite loop\n if (val === this.customDomain) return;\n\n if (val) {\n this.setAttribute(Attributes.CUSTOM_DOMAIN, val);\n } else {\n this.removeAttribute(Attributes.CUSTOM_DOMAIN);\n }\n }\n\n get drmToken() {\n return this.getAttribute(Attributes.DRM_TOKEN) ?? undefined;\n }\n\n set drmToken(val: string | undefined) {\n // dont' cause an infinite loop\n if (val === this.drmToken) return;\n\n if (val) {\n this.setAttribute(Attributes.DRM_TOKEN, val);\n } else {\n this.removeAttribute(Attributes.DRM_TOKEN);\n }\n }\n\n /**\n * Get the playback token for signing the src URL.\n */\n get playbackToken() {\n if (this.hasAttribute(Attributes.PLAYBACK_TOKEN)) {\n return this.getAttribute(Attributes.PLAYBACK_TOKEN) ?? undefined;\n }\n if (this.hasAttribute(Attributes.PLAYBACK_ID)) {\n const [, queryParts] = toPlaybackIdParts(this.playbackId ?? '');\n return new URLSearchParams(queryParts).get('token') ?? undefined;\n }\n if (this.src) {\n return new URLSearchParams(this.src).get('token') ?? undefined;\n }\n return undefined;\n }\n\n /**\n * Set the playback token for signing the src URL.\n */\n set playbackToken(val: string | undefined) {\n if (val === this.playbackToken) return;\n\n if (val) {\n this.setAttribute(Attributes.PLAYBACK_TOKEN, val);\n } else {\n this.removeAttribute(Attributes.PLAYBACK_TOKEN);\n }\n }\n\n get tokens() {\n const playback = this.getAttribute(Attributes.PLAYBACK_TOKEN);\n const drm = this.getAttribute(Attributes.DRM_TOKEN);\n return {\n ...this.#tokens,\n ...(playback != null ? { playback } : {}),\n ...(drm != null ? { drm } : {}),\n };\n }\n\n set tokens(val) {\n this.#tokens = val ?? {};\n }\n\n get ended() {\n // This ensures that edge case media that doesn't properly end will\n // still announce itself as \"ended\".\n return getEnded(this.nativeEl, this._hls);\n }\n\n get envKey(): string | undefined {\n return this.getAttribute(Attributes.ENV_KEY) ?? undefined;\n }\n\n set envKey(val: string | undefined) {\n // dont' cause an infinite loop\n if (val === this.envKey) return;\n\n if (val) {\n this.setAttribute(Attributes.ENV_KEY, val);\n } else {\n this.removeAttribute(Attributes.ENV_KEY);\n }\n }\n\n get beaconCollectionDomain(): string | undefined {\n return this.getAttribute(Attributes.BEACON_COLLECTION_DOMAIN) ?? undefined;\n }\n\n set beaconCollectionDomain(val: string | undefined) {\n // don't cause an infinite loop\n if (val === this.beaconCollectionDomain) return;\n\n if (val) {\n this.setAttribute(Attributes.BEACON_COLLECTION_DOMAIN, val);\n } else {\n this.removeAttribute(Attributes.BEACON_COLLECTION_DOMAIN);\n }\n }\n\n get streamType(): ValueOf | undefined {\n // Allow overriding inferred `streamType`\n return (this.getAttribute(Attributes.STREAM_TYPE) as ValueOf) ?? getStreamType(this.nativeEl);\n }\n\n set streamType(val: ValueOf | undefined) {\n // don't cause an infinite loop and avoid change event dispatching\n if (val === this.streamType) return;\n\n if (val) {\n this.setAttribute(Attributes.STREAM_TYPE, val);\n } else {\n this.removeAttribute(Attributes.STREAM_TYPE);\n }\n }\n\n get targetLiveWindow() {\n // Allow overriding inferred `targetLiveWindow`\n if (this.hasAttribute(Attributes.TARGET_LIVE_WINDOW)) {\n return +(this.getAttribute(Attributes.TARGET_LIVE_WINDOW) as string) as number;\n }\n return getTargetLiveWindow(this.nativeEl);\n }\n\n set targetLiveWindow(val: number | undefined) {\n // don't cause an infinite loop and avoid change event dispatching\n if (val == this.targetLiveWindow) return;\n\n if (val == null) {\n this.removeAttribute(Attributes.TARGET_LIVE_WINDOW);\n } else {\n this.setAttribute(Attributes.TARGET_LIVE_WINDOW, `${+val}`);\n }\n }\n\n get liveEdgeStart() {\n if (this.hasAttribute(Attributes.LIVE_EDGE_OFFSET)) {\n const { liveEdgeOffset } = this;\n const seekableEnd = this.nativeEl.seekable.end(0) ?? 0;\n const seekableStart = this.nativeEl.seekable.start(0) ?? 0;\n return Math.max(seekableStart, seekableEnd - (liveEdgeOffset as number));\n }\n return getLiveEdgeStart(this.nativeEl);\n }\n\n get liveEdgeOffset() {\n if (!this.hasAttribute(Attributes.LIVE_EDGE_OFFSET)) return undefined;\n return +(this.getAttribute(Attributes.LIVE_EDGE_OFFSET) as string) as number;\n }\n\n set liveEdgeOffset(val: number | undefined) {\n // don't cause an infinite loop and avoid change event dispatching\n if (val == this.targetLiveWindow) return;\n\n if (val == null) {\n this.removeAttribute(Attributes.LIVE_EDGE_OFFSET);\n } else {\n this.setAttribute(Attributes.LIVE_EDGE_OFFSET, `${+val}`);\n }\n }\n\n get seekable() {\n return getSeekable(this.nativeEl);\n }\n\n async addCuePoints(cuePoints: CuePoint[]) {\n return addCuePoints(this.nativeEl, cuePoints);\n }\n\n get activeCuePoint() {\n return getActiveCuePoint(this.nativeEl);\n }\n\n get cuePoints() {\n return getCuePoints(this.nativeEl);\n }\n\n async addChapters(chapters: Chapter[]) {\n return addChapters(this.nativeEl, chapters);\n }\n\n get activeChapter() {\n return getActiveChapter(this.nativeEl);\n }\n\n get chapters() {\n return getChapters(this.nativeEl);\n }\n\n getStartDate() {\n return getStartDate(this.nativeEl, this._hls);\n }\n\n get currentPdt() {\n return getCurrentPdt(this.nativeEl, this._hls);\n }\n\n get preferPlayback(): ValueOf | undefined {\n const val = this.getAttribute(Attributes.PREFER_PLAYBACK);\n if (val === PlaybackTypes.MSE || val === PlaybackTypes.NATIVE) return val;\n return undefined;\n }\n\n set preferPlayback(val: ValueOf | undefined) {\n if (val === this.preferPlayback) return;\n\n if (val === PlaybackTypes.MSE || val === PlaybackTypes.NATIVE) {\n this.setAttribute(Attributes.PREFER_PLAYBACK, val);\n } else {\n this.removeAttribute(Attributes.PREFER_PLAYBACK);\n }\n }\n\n get metadata() {\n const inferredMetadataAttrs: { [key: string]: string } = this.getAttributeNames()\n .filter((attrName) => {\n return attrName.startsWith('metadata-') && !([Attributes.METADATA_URL] as string[]).includes(attrName);\n })\n .reduce(\n (currAttrs, attrName) => {\n const value = this.getAttribute(attrName);\n if (value != null) {\n currAttrs[attrName.replace(/^metadata-/, '').replace(/-/g, '_') as string] = value;\n }\n return currAttrs;\n },\n {} as { [key: string]: string }\n );\n\n return {\n ...inferredMetadataAttrs,\n ...this.#metadata,\n };\n }\n\n set metadata(val: Readonly | undefined) {\n this.#metadata = val ?? {};\n if (!!this.mux) {\n this.mux.emit('hb', this.#metadata);\n }\n }\n\n get _hlsConfig() {\n return this.#_hlsConfig;\n }\n\n set _hlsConfig(val: Readonly> | undefined) {\n this.#_hlsConfig = val;\n }\n\n async #requestLoad() {\n if (this.#loadRequested) return;\n await (this.#loadRequested = Promise.resolve());\n this.#loadRequested = null;\n this.load();\n }\n\n load() {\n this.#core = initialize(this as Partial, this.nativeEl, this.#core);\n }\n\n unload() {\n teardown(this.nativeEl, this.#core);\n this.#core = undefined;\n }\n\n attributeChangedCallback(attrName: string, oldValue: string | null, newValue: string | null) {\n // Only forward the attributes to the native media element that are not handled.\n const isNativeAttr = CustomVideoElement.observedAttributes.includes(attrName);\n if (isNativeAttr && !['src', 'autoplay', 'preload'].includes(attrName)) {\n super.attributeChangedCallback(attrName, oldValue, newValue);\n }\n\n switch (attrName) {\n case Attributes.PLAYER_SOFTWARE_NAME:\n this.playerSoftwareName = newValue ?? undefined;\n break;\n case Attributes.PLAYER_SOFTWARE_VERSION:\n this.playerSoftwareVersion = newValue ?? undefined;\n break;\n case 'src': {\n const hadSrc = !!oldValue;\n const hasSrc = !!newValue;\n if (!hadSrc && hasSrc) {\n this.#requestLoad();\n } else if (hadSrc && !hasSrc) {\n this.unload();\n } else if (hadSrc && hasSrc) {\n this.unload();\n this.#requestLoad();\n }\n break;\n }\n case 'autoplay':\n if (newValue === oldValue) {\n break;\n }\n /** In case newValue is an empty string or null, use this.autoplay which translates to booleans (WL) */\n this.#core?.setAutoplay(this.autoplay);\n break;\n case 'preload':\n if (newValue === oldValue) {\n break;\n }\n this.#core?.setPreload(newValue as HTMLMediaElement['preload']);\n break;\n case Attributes.PLAYBACK_ID:\n this.src = toMuxVideoURL(this) as string;\n break;\n case Attributes.DEBUG: {\n const debug = this.debug;\n if (!!this.mux) {\n /** @TODO Link to docs for a more detailed discussion (CJP) */\n console.info(\n 'Cannot toggle debug mode of mux data after initialization. Make sure you set all metadata to override before setting the src.'\n );\n }\n if (!!this._hls) {\n this._hls.config.debug = debug;\n }\n break;\n }\n case Attributes.METADATA_URL:\n if (newValue) {\n fetch(newValue)\n .then((resp) => resp.json())\n .then((json) => (this.metadata = json))\n .catch(() => console.error(`Unable to load or parse metadata JSON from metadata-url ${newValue}!`));\n }\n break;\n case Attributes.STREAM_TYPE:\n // If the newValue is unset\n if (newValue == null || newValue !== oldValue) {\n this.dispatchEvent(new CustomEvent('streamtypechange', { composed: true, bubbles: true }));\n }\n break;\n case Attributes.TARGET_LIVE_WINDOW:\n if (newValue == null || newValue !== oldValue) {\n this.dispatchEvent(\n new CustomEvent('targetlivewindowchange', { composed: true, bubbles: true, detail: this.targetLiveWindow })\n );\n }\n break;\n default:\n break;\n }\n }\n\n connectedCallback(): void {\n super.connectedCallback?.();\n if (this.nativeEl && this.src && !this.#core) {\n this.#requestLoad();\n }\n }\n\n disconnectedCallback(): void {\n this.unload();\n }\n}\n\n// castable-video should be mixed in last so that it can override load().\nclass MuxVideoElement extends CastableMediaMixin(MediaTracksMixin(MuxVideoBaseElement)) {\n // NOTE: CastableMediaMixin needs to be a subclass of whatever implements the load() method\n // (i.e. MuxVideoBaseElement), but we're overriding castCustomData to provide mux-specific\n // values by default, so it needs to be defined here (i.e. in the composed subclass of\n // CastableMediaMixin). (CJP)\n #castCustomData: Record | undefined;\n\n get muxCastCustomData() {\n return {\n mux: {\n // Mux Video values\n playbackId: this.playbackId,\n minResolution: this.minResolution,\n maxResolution: this.maxResolution,\n renditionOrder: this.renditionOrder,\n customDomain: this.customDomain,\n /** @TODO Add this.tokens to MuxVideoElement (CJP) */\n tokens: {\n drm: this.drmToken,\n },\n // Mux Data values\n envKey: this.envKey,\n metadata: this.metadata,\n disableCookies: this.disableCookies,\n disableTracking: this.disableTracking,\n beaconCollectionDomain: this.beaconCollectionDomain,\n // Playback values\n startTime: this.startTime,\n // Other values\n preferCmcd: this.preferCmcd,\n },\n } as const;\n }\n\n get castCustomData() {\n return this.#castCustomData ?? this.muxCastCustomData;\n }\n\n set castCustomData(val: Record | undefined) {\n this.#castCustomData = val;\n }\n}\n\ntype MuxVideoElementType = typeof MuxVideoElement;\ndeclare global {\n var MuxVideoElement: MuxVideoElementType; // eslint-disable-line\n}\n\nif (!globalThis.customElements.get('mux-video')) {\n globalThis.customElements.define('mux-video', MuxVideoElement);\n globalThis.MuxVideoElement = MuxVideoElement;\n}\n\nexport { PlaybackEngine, PlaybackEngine as Hls, ExtensionMimeTypeMap as MimeTypes, MediaError, VideoEvents };\n\nexport default MuxVideoElement;\n", "export const isMaybeBrowser = () => typeof window != 'undefined';\n// @ts-ignore\nexport const isMaybeServer = () => typeof global != 'undefined';\n\nconst getEnvPlayerVersion = () => {\n try {\n // @ts-ignore\n return PLAYER_VERSION as string;\n } catch {}\n return 'UNKNOWN';\n};\n\nconst player_version: string = getEnvPlayerVersion();\n\nexport const getPlayerVersion = () => player_version;\n", "/**\n * Custom Media Element\n * Based on https://github.com/muxinc/custom-video-element - Mux - MIT License\n *\n * The goal is to create an element that works just like the video element\n * but can be extended/sub-classed, because native elements cannot be\n * extended today across browsers.\n */\n\n// The onevent like props are weirdly set on the HTMLElement prototype with other\n// generic events making it impossible to pick these specific to HTMLMediaElement.\nexport const Events = [\n 'abort',\n 'canplay',\n 'canplaythrough',\n 'durationchange',\n 'emptied',\n 'encrypted',\n 'ended',\n 'error',\n 'loadeddata',\n 'loadedmetadata',\n 'loadstart',\n 'pause',\n 'play',\n 'playing',\n 'progress',\n 'ratechange',\n 'seeked',\n 'seeking',\n 'stalled',\n 'suspend',\n 'timeupdate',\n 'volumechange',\n 'waiting',\n 'waitingforkey',\n 'resize',\n 'enterpictureinpicture',\n 'leavepictureinpicture',\n 'webkitbeginfullscreen',\n 'webkitendfullscreen',\n 'webkitpresentationmodechanged',\n];\n\nfunction getAudioTemplateHTML(attrs) {\n return /*html*/`\n \n \n \n \n \n `;\n}\n\n// If the `media` slot is used leave the styling up to the user.\n// It's a more consistent behavior pre and post custom element upgrade.\n\nfunction getVideoTemplateHTML(attrs) {\n return /*html*/`\n \n \n \n \n \n `;\n}\n\n/**\n * @see https://justinfagnani.com/2015/12/21/real-mixins-with-javascript-classes/\n */\nexport const CustomMediaMixin = (superclass, { tag, is }) => {\n\n // `is` makes it possible to extend a custom built-in. e.g. castable-video\n const nativeElTest = globalThis.document?.createElement?.(tag, { is });\n const nativeElProps = nativeElTest ? getNativeElProps(nativeElTest) : [];\n\n return class CustomMedia extends superclass {\n static getTemplateHTML = tag.endsWith('audio') ? getAudioTemplateHTML : getVideoTemplateHTML;\n static shadowRootOptions = { mode: 'open' };\n static Events = Events;\n static #isDefined;\n\n static get observedAttributes() {\n CustomMedia.#define();\n\n // Include any attributes from the custom built-in.\n const natAttrs = nativeElTest?.constructor?.observedAttributes ?? [];\n\n return [\n ...natAttrs,\n 'autopictureinpicture',\n 'disablepictureinpicture',\n 'disableremoteplayback',\n 'autoplay',\n 'controls',\n 'controlslist',\n 'crossorigin',\n 'loop',\n 'muted',\n 'playsinline',\n 'poster',\n 'preload',\n 'src',\n ];\n }\n\n static #define() {\n if (this.#isDefined) return;\n this.#isDefined = true;\n\n const propsToAttrs = new Set(this.observedAttributes);\n // defaultMuted maps to the muted attribute, handled manually below.\n propsToAttrs.delete('muted');\n\n // Passthrough native el functions from the custom el to the native el\n for (let prop of nativeElProps) {\n if (prop in this.prototype) continue;\n\n const type = typeof nativeElTest[prop];\n if (type == 'function') {\n // Function\n this.prototype[prop] = function (...args) {\n this.#init();\n\n const fn = () => {\n if (this.call) return this.call(prop, ...args);\n return this.nativeEl[prop].apply(this.nativeEl, args);\n };\n\n return fn();\n };\n } else {\n // Some properties like src, preload, defaultMuted are handled manually.\n\n // Getter\n let config = {\n get() {\n this.#init();\n\n let attr = prop.toLowerCase();\n if (propsToAttrs.has(attr)) {\n const val = this.getAttribute(attr);\n return val === null ? false : val === '' ? true : val;\n }\n\n return this.get?.(prop) ?? this.nativeEl?.[prop];\n },\n };\n\n if (prop !== prop.toUpperCase()) {\n // Setter (not a CONSTANT)\n config.set = function (val) {\n this.#init();\n\n let attr = prop.toLowerCase();\n if (propsToAttrs.has(attr)) {\n if (val === true || val === false || val == null) {\n this.toggleAttribute(attr, Boolean(val));\n } else {\n this.setAttribute(attr, val);\n }\n return;\n }\n\n if (this.set) {\n this.set(prop, val);\n return;\n }\n\n this.nativeEl[prop] = val;\n };\n }\n\n Object.defineProperty(this.prototype, prop, config);\n }\n }\n }\n\n #isInit;\n #nativeEl;\n #childMap = new Map();\n\n constructor() {\n super();\n\n // If the custom element is defined before the custom element's HTML is parsed\n // no attributes will be available in the constructor (construction process).\n // Wait until initializing in the attributeChangedCallback or\n // connectedCallback or accessing any properties.\n }\n\n get nativeEl() {\n this.#init();\n return this.#nativeEl\n ?? this.shadowRoot.querySelector(tag)\n ?? this.querySelector(':scope > [slot=media]')\n ?? this.querySelector(tag);\n }\n\n set nativeEl(val) {\n this.#nativeEl = val;\n }\n\n get defaultMuted() {\n return this.hasAttribute('muted');\n }\n\n set defaultMuted(val) {\n this.toggleAttribute('muted', Boolean(val));\n }\n\n get src() {\n return this.getAttribute('src');\n }\n\n set src(val) {\n this.setAttribute('src', `${val}`);\n }\n\n get preload() {\n return this.getAttribute('preload') ?? this.nativeEl?.preload;\n }\n\n set preload(val) {\n this.setAttribute('preload', `${val}`);\n }\n\n #init() {\n if (this.#isInit) return;\n this.#isInit = true;\n this.init();\n }\n\n init() {\n if (!this.shadowRoot) {\n this.attachShadow({ mode: 'open' });\n\n const attrs = namedNodeMapToObject(this.attributes);\n if (is) attrs.is = is;\n if (tag) attrs.part = tag;\n this.shadowRoot.innerHTML = this.constructor.getTemplateHTML(attrs);\n }\n\n // Neither Chrome or Firefox support setting the muted attribute\n // after using document.createElement.\n // Get around this by setting the muted property manually.\n this.nativeEl.muted = this.hasAttribute('muted');\n\n for (let prop of nativeElProps) {\n this.#upgradeProperty(prop);\n }\n\n this.shadowRoot.addEventListener('slotchange', this);\n this.#syncMediaChildren();\n\n for (let type of this.constructor.Events) {\n this.shadowRoot.addEventListener?.(type, this, true);\n }\n }\n\n handleEvent(event) {\n\n if (event.type === 'slotchange') {\n this.#syncMediaChildren();\n return;\n }\n\n if (event.target === this.nativeEl) {\n // The video events are dispatched on the CustomMediaElement instance.\n // This makes it possible to add event listeners before the element is upgraded.\n this.dispatchEvent(new CustomEvent(event.type, { detail: event.detail }));\n }\n }\n\n /**\n * Keep some native child elements like track and source in sync.\n * An unnamed will be filled with all of the custom element's\n * top-level child nodes that do not have the slot attribute.\n */\n #syncMediaChildren() {\n const removeNativeChildren = new Map(this.#childMap);\n\n this.shadowRoot.querySelector('slot:not([name])')\n .assignedElements({ flatten: true })\n .filter((el) => ['track', 'source'].includes(el.localName))\n .forEach((el) => {\n // If the source or track is still in the assigned elements keep it.\n removeNativeChildren.delete(el);\n // Re-use clones if possible.\n let clone = this.#childMap.get(el);\n if (!clone) {\n clone = el.cloneNode();\n this.#childMap.set(el, clone);\n }\n this.nativeEl.append?.(clone);\n\n // https://html.spec.whatwg.org/multipage/media.html#sourcing-out-of-band-text-tracks\n // If there are any text tracks in the media element's list of text\n // tracks whose text track kind is chapters or metadata that\n // correspond to track elements with a default attribute set whose\n // text track mode is set to disabled, then set the text track\n // mode of all such tracks to hidden.\n if (\n clone.localName === 'track' &&\n clone.default &&\n (clone.kind === 'chapters' || clone.kind === 'metadata') &&\n clone.track.mode === 'disabled'\n ) {\n clone.track.mode = 'hidden';\n }\n });\n\n removeNativeChildren.forEach((el) => el.remove());\n }\n\n #upgradeProperty(prop) {\n // Sets properties that are set before the custom element is upgraded.\n // https://web.dev/custom-elements-best-practices/#make-properties-lazy\n if (Object.prototype.hasOwnProperty.call(this, prop)) {\n const value = this[prop];\n // Delete the set property from this instance.\n delete this[prop];\n // Set the value again via the (prototype) setter on this class.\n this[prop] = value;\n }\n }\n\n attributeChangedCallback(attrName, oldValue, newValue) {\n // Initialize right after construction when the attributes become available.\n this.#init();\n this.#forwardAttribute(attrName, oldValue, newValue);\n }\n\n #forwardAttribute(attrName, oldValue, newValue) {\n // Ignore a few that don't need to be passed.\n if (['id', 'class'].includes(attrName)) {\n return;\n }\n\n // Ignore setting custom attributes from the child class.\n // They should not have any effect on the native element, it adds noise in the DOM.\n if (!CustomMedia.observedAttributes.includes(attrName)\n && this.constructor.observedAttributes.includes(attrName)\n ) {\n return;\n }\n\n if (newValue === null) {\n this.nativeEl.removeAttribute?.(attrName);\n } else {\n if (this.nativeEl.getAttribute?.(attrName) != newValue) {\n this.nativeEl.setAttribute?.(attrName, newValue);\n }\n }\n }\n\n connectedCallback() {\n this.#init();\n }\n };\n};\n\nfunction getNativeElProps(nativeElTest) {\n // Map all native element properties to the custom element\n // so that they're applied to the native element.\n // Skipping HTMLElement because of things like \"attachShadow\"\n // causing issues. Most of those props still need to apply to\n // the custom element.\n let nativeElProps = [];\n\n // Walk the prototype chain up to HTMLElement.\n // This will grab all super class props in between.\n // i.e. VideoElement and MediaElement\n for (\n let proto = Object.getPrototypeOf(nativeElTest);\n proto && proto !== HTMLElement.prototype;\n proto = Object.getPrototypeOf(proto)\n ) {\n nativeElProps.push(...Object.getOwnPropertyNames(proto));\n }\n\n return nativeElProps;\n}\n\nfunction serializeAttributes(attrs) {\n let html = '';\n for (const key in attrs) {\n const value = attrs[key];\n if (value === '') html += ` ${key}`;\n else html += ` ${key}=\"${value}\"`;\n }\n return html;\n}\n\nfunction namedNodeMapToObject(namedNodeMap) {\n let obj = {};\n for (let attr of namedNodeMap) {\n obj[attr.name] = attr.value;\n }\n return obj;\n}\n\nexport const CustomVideoElement = CustomMediaMixin(globalThis.HTMLElement ?? class {}, { tag: 'video' });\n\nexport const CustomAudioElement = CustomMediaMixin(globalThis.HTMLElement ?? class {}, { tag: 'audio' });\n", "/* global WeakRef */\n\nexport const privateProps = new WeakMap();\n\nexport class InvalidStateError extends Error {}\nexport class NotSupportedError extends Error {}\nexport class NotFoundError extends Error {}\n\n// Fallback to a plain Set if WeakRef is not available.\nexport const IterableWeakSet = globalThis.WeakRef ?\n class extends Set {\n add(el) {\n super.add(new WeakRef(el));\n }\n forEach(fn) {\n super.forEach((ref) => {\n const value = ref.deref();\n if (value) fn(value);\n });\n }\n } : Set;\n\nexport function onCastApiAvailable(callback) {\n if (!globalThis.chrome?.cast?.isAvailable) {\n globalThis.__onGCastApiAvailable = () => {\n // The globalThis.__onGCastApiAvailable callback alone is not reliable for\n // the added cast.framework. It's loaded in a separate JS file.\n // https://www.gstatic.com/eureka/clank/101/cast_sender.js\n // https://www.gstatic.com/cast/sdk/libs/sender/1.0/cast_framework.js\n customElements\n .whenDefined('google-cast-button')\n .then(callback);\n };\n } else if (!globalThis.cast?.framework) {\n customElements\n .whenDefined('google-cast-button')\n .then(callback);\n } else {\n callback();\n }\n}\n\nexport function requiresCastFramework() {\n // todo: exclude for Android>=56 which supports the Remote Playback API natively.\n return globalThis.chrome;\n}\n\nexport function loadCastFramework() {\n const sdkUrl = 'https://www.gstatic.com/cv/js/sender/v1/cast_sender.js?loadCastFramework=1';\n if (globalThis.chrome?.cast || document.querySelector(`script[src=\"${sdkUrl}\"]`)) return;\n\n const script = document.createElement('script');\n script.src = sdkUrl;\n document.head.append(script);\n}\n\nexport function castContext() {\n return globalThis.cast?.framework?.CastContext.getInstance();\n}\n\nexport function currentSession() {\n return castContext()?.getCurrentSession();\n}\n\nexport function currentMedia() {\n return currentSession()?.getSessionObj().media[0];\n}\n\nexport function editTracksInfo(request) {\n return new Promise((resolve, reject) => {\n currentMedia().editTracksInfo(request, resolve, reject);\n });\n}\n\nexport function getMediaStatus(request) {\n return new Promise((resolve, reject) => {\n currentMedia().getStatus(request, resolve, reject);\n });\n}\n\nexport function setCastOptions(options) {\n return castContext().setOptions({\n ...getDefaultCastOptions(),\n ...options,\n });\n}\n\nexport function getDefaultCastOptions() {\n return {\n // Set the receiver application ID to your own (created in the\n // Google Cast Developer Console), or optionally\n // use the chrome.cast.media.DEFAULT_MEDIA_RECEIVER_APP_ID\n receiverApplicationId: 'CC1AD845',\n\n // Auto join policy can be one of the following three:\n // ORIGIN_SCOPED - Auto connect from same appId and page origin\n // TAB_AND_ORIGIN_SCOPED - Auto connect from same appId, page origin, and tab\n // PAGE_SCOPED - No auto connect\n autoJoinPolicy: 'origin_scoped',\n\n // The following flag enables Cast Connect(requires Chrome 87 or higher)\n // https://developers.googleblog.com/2020/08/introducing-cast-connect-android-tv.html\n androidReceiverCompatible: false,\n\n language: 'en-US',\n resumeSavedSession: true,\n };\n}\n", "/* global chrome, cast */\nimport {\n privateProps,\n IterableWeakSet,\n InvalidStateError,\n NotSupportedError,\n onCastApiAvailable,\n castContext,\n currentSession,\n currentMedia,\n editTracksInfo,\n getMediaStatus,\n setCastOptions\n} from './castable-utils.js';\n\nconst remoteInstances = new IterableWeakSet();\nconst castElementRef = new WeakSet();\n\nlet cf;\n\nonCastApiAvailable(() => {\n if (!globalThis.chrome?.cast?.isAvailable) {\n // Useful to see in verbose logs if this shows undefined or false.\n console.debug('chrome.cast.isAvailable', globalThis.chrome?.cast?.isAvailable);\n return;\n }\n\n if (!cf) {\n cf = cast.framework;\n\n castContext().addEventListener(cf.CastContextEventType.CAST_STATE_CHANGED, (e) => {\n remoteInstances.forEach((r) => privateProps.get(r).onCastStateChanged?.(e));\n });\n\n castContext().addEventListener(cf.CastContextEventType.SESSION_STATE_CHANGED, (e) => {\n remoteInstances.forEach((r) => privateProps.get(r).onSessionStateChanged?.(e));\n });\n\n remoteInstances.forEach((r) => privateProps.get(r).init?.());\n }\n});\n\n\nlet remotePlaybackCallbackIdCount = 0;\n\n/**\n * Remote Playback shim for the Google cast SDK.\n * https://w3c.github.io/remote-playback/\n */\nexport class RemotePlayback extends EventTarget {\n #media;\n #isInit;\n #remotePlayer;\n #remoteListeners;\n #state = 'disconnected';\n #available = false;\n #callbacks = new Set();\n #callbackIds = new WeakMap();\n\n constructor(media) {\n super();\n\n this.#media = media;\n\n remoteInstances.add(this);\n privateProps.set(this, {\n init: () => this.#init(),\n onCastStateChanged: () => this.#onCastStateChanged(),\n onSessionStateChanged: () => this.#onSessionStateChanged(),\n getCastPlayer: () => this.#castPlayer,\n });\n\n this.#init();\n }\n\n get #castPlayer() {\n if (castElementRef.has(this.#media)) return this.#remotePlayer;\n return undefined;\n }\n\n /**\n * https://developer.mozilla.org/en-US/docs/Web/API/RemotePlayback/state\n * @return {'disconnected'|'connecting'|'connected'}\n */\n get state() {\n return this.#state;\n }\n\n async watchAvailability(callback) {\n if (this.#media.disableRemotePlayback) {\n throw new InvalidStateError('disableRemotePlayback attribute is present.');\n }\n\n this.#callbackIds.set(callback, ++remotePlaybackCallbackIdCount);\n this.#callbacks.add(callback);\n\n return remotePlaybackCallbackIdCount;\n }\n\n async cancelWatchAvailability(callback) {\n if (this.#media.disableRemotePlayback) {\n throw new InvalidStateError('disableRemotePlayback attribute is present.');\n }\n\n if (callback) {\n this.#callbacks.delete(callback);\n } else {\n this.#callbacks.clear();\n }\n }\n\n async prompt() {\n if (this.#media.disableRemotePlayback) {\n throw new InvalidStateError('disableRemotePlayback attribute is present.');\n }\n\n if (!globalThis.chrome?.cast?.isAvailable) {\n throw new NotSupportedError('The RemotePlayback API is disabled on this platform.');\n }\n\n const willDisconnect = castElementRef.has(this.#media);\n castElementRef.add(this.#media);\n\n setCastOptions(this.#media.castOptions);\n\n Object.entries(this.#remoteListeners).forEach(([event, listener]) => {\n this.#remotePlayer.controller.addEventListener(event, listener);\n });\n\n try {\n // Open browser cast menu.\n await castContext().requestSession();\n } catch (err) {\n // Don't throw an error if disconnecting or cancelling.\n if (err === 'cancel') {\n // If there will be no disconnect, reset some state here.\n if (!willDisconnect) {\n castElementRef.delete(this.#media);\n }\n return;\n }\n\n throw new Error(err);\n }\n\n privateProps.get(this.#media)?.loadOnPrompt?.();\n }\n\n #disconnect() {\n if (!castElementRef.has(this.#media)) return;\n\n Object.entries(this.#remoteListeners).forEach(([event, listener]) => {\n this.#remotePlayer.controller.removeEventListener(event, listener);\n });\n\n castElementRef.delete(this.#media);\n\n // isMuted is not in savedPlayerState. should we sync this back to local?\n this.#media.muted = this.#remotePlayer.isMuted;\n this.#media.currentTime = this.#remotePlayer.savedPlayerState.currentTime;\n if (this.#remotePlayer.savedPlayerState.isPaused === false) {\n this.#media.play();\n }\n }\n\n #onCastStateChanged() {\n // Cast state: NO_DEVICES_AVAILABLE, NOT_CONNECTED, CONNECTING, CONNECTED\n // https://developers.google.com/cast/docs/reference/web_sender/cast.framework#.CastState\n const castState = castContext().getCastState();\n\n if (castElementRef.has(this.#media)) {\n if (castState === 'CONNECTING') {\n this.#state = 'connecting';\n this.dispatchEvent(new Event('connecting'));\n }\n }\n\n if (!this.#available && castState?.includes('CONNECT')) {\n this.#available = true;\n for (let callback of this.#callbacks) callback(true);\n }\n else if (this.#available && (!castState || castState === 'NO_DEVICES_AVAILABLE')) {\n this.#available = false;\n for (let callback of this.#callbacks) callback(false);\n }\n }\n\n async #onSessionStateChanged() {\n // Session states: NO_SESSION, SESSION_STARTING, SESSION_STARTED, SESSION_START_FAILED,\n // SESSION_ENDING, SESSION_ENDED, SESSION_RESUMED\n // https://developers.google.com/cast/docs/reference/web_sender/cast.framework#.SessionState\n\n const { SESSION_RESUMED } = cf.SessionState;\n if (castContext().getSessionState() === SESSION_RESUMED) {\n /**\n * Figure out if this was the video that started the resumed session.\n * @TODO make this more specific than just checking against the video src!! (WL)\n *\n * If this video element can get the same unique id on each browser refresh\n * it would be possible to pass this unique id w/ `LoadRequest.customData`\n * and verify against currentMedia().customData below.\n */\n if (this.#media.castSrc === currentMedia()?.media.contentId) {\n castElementRef.add(this.#media);\n\n Object.entries(this.#remoteListeners).forEach(([event, listener]) => {\n this.#remotePlayer.controller.addEventListener(event, listener);\n });\n\n /**\n * There is cast framework resume session bug when you refresh the page a few\n * times the this.#remotePlayer.currentTime will not be in sync with the receiver :(\n * The below status request syncs it back up.\n */\n try {\n await getMediaStatus(new chrome.cast.media.GetStatusRequest());\n } catch (error) {\n console.error(error);\n }\n\n // Dispatch the play, playing events manually to sync remote playing state.\n this.#remoteListeners[cf.RemotePlayerEventType.IS_PAUSED_CHANGED]();\n this.#remoteListeners[cf.RemotePlayerEventType.PLAYER_STATE_CHANGED]();\n }\n }\n }\n\n #init() {\n if (!cf || this.#isInit) return;\n this.#isInit = true;\n\n setCastOptions(this.#media.castOptions);\n\n /**\n * @TODO add listeners for addtrack, removetrack (WL)\n * This only has an impact on with a `src` because these have to be\n * loaded manually in the load() method. This will require a new load() call\n * for each added/removed track w/ src.\n */\n this.#media.textTracks.addEventListener('change', () => this.#updateRemoteTextTrack());\n\n this.#onCastStateChanged();\n\n this.#remotePlayer = new cf.RemotePlayer();\n new cf.RemotePlayerController(this.#remotePlayer);\n\n this.#remoteListeners = {\n [cf.RemotePlayerEventType.IS_CONNECTED_CHANGED]: ({ value }) => {\n if (value === true) {\n this.#state = 'connected';\n this.dispatchEvent(new Event('connect'));\n } else {\n this.#disconnect();\n this.#state = 'disconnected';\n this.dispatchEvent(new Event('disconnect'));\n }\n },\n [cf.RemotePlayerEventType.DURATION_CHANGED]: () => {\n this.#media.dispatchEvent(new Event('durationchange'));\n },\n [cf.RemotePlayerEventType.VOLUME_LEVEL_CHANGED]: () => {\n this.#media.dispatchEvent(new Event('volumechange'));\n },\n [cf.RemotePlayerEventType.IS_MUTED_CHANGED]: () => {\n this.#media.dispatchEvent(new Event('volumechange'));\n },\n [cf.RemotePlayerEventType.CURRENT_TIME_CHANGED]: () => {\n if (!this.#castPlayer?.isMediaLoaded) return;\n this.#media.dispatchEvent(new Event('timeupdate'));\n },\n [cf.RemotePlayerEventType.VIDEO_INFO_CHANGED]: () => {\n this.#media.dispatchEvent(new Event('resize'));\n },\n [cf.RemotePlayerEventType.IS_PAUSED_CHANGED]: () => {\n this.#media.dispatchEvent(new Event(this.paused ? 'pause' : 'play'));\n },\n [cf.RemotePlayerEventType.PLAYER_STATE_CHANGED]: () => {\n // Player states: IDLE, PLAYING, PAUSED, BUFFERING\n // https://developers.google.com/cast/docs/reference/web_sender/chrome.cast.media#.PlayerState\n\n // pause event is handled above.\n if (this.#castPlayer?.playerState === chrome.cast.media.PlayerState.PAUSED) {\n return;\n }\n\n this.#media.dispatchEvent(\n new Event(\n {\n [chrome.cast.media.PlayerState.PLAYING]: 'playing',\n [chrome.cast.media.PlayerState.BUFFERING]: 'waiting',\n [chrome.cast.media.PlayerState.IDLE]: 'emptied',\n }[this.#castPlayer?.playerState]\n )\n );\n },\n [cf.RemotePlayerEventType.IS_MEDIA_LOADED_CHANGED]: async () => {\n if (!this.#castPlayer?.isMediaLoaded) return;\n\n // mediaInfo is not immediately available due to a bug? wait one tick\n await Promise.resolve();\n this.#onRemoteMediaLoaded();\n },\n };\n }\n\n #onRemoteMediaLoaded() {\n this.#updateRemoteTextTrack();\n }\n\n async #updateRemoteTextTrack() {\n if (!this.#castPlayer) return;\n\n // Get the tracks w/ trackId's that have been loaded; manually or via a playlist like a M3U8 or MPD.\n const remoteTracks = this.#remotePlayer.mediaInfo?.tracks ?? [];\n const remoteSubtitles = remoteTracks.filter(\n ({ type }) => type === chrome.cast.media.TrackType.TEXT\n );\n\n const localSubtitles = [...this.#media.textTracks].filter(\n ({ kind }) => kind === 'subtitles' || kind === 'captions'\n );\n\n // Create a new array from the local subs w/ the trackId's from the remote subs.\n const subtitles = remoteSubtitles\n .map(({ language, name, trackId }) => {\n // Find the corresponding local text track and assign the trackId.\n const { mode } =\n localSubtitles.find(\n (local) => local.language === language && local.label === name\n ) ?? {};\n if (mode) return { mode, trackId };\n return false;\n })\n .filter(Boolean);\n\n const hiddenSubtitles = subtitles.filter(\n ({ mode }) => mode !== 'showing'\n );\n const hiddenTrackIds = hiddenSubtitles.map(({ trackId }) => trackId);\n const showingSubtitle = subtitles.find(({ mode }) => mode === 'showing');\n\n // Note this could also include audio or video tracks, diff against local state.\n const activeTrackIds =\n currentSession()?.getSessionObj().media[0]\n ?.activeTrackIds ?? [];\n let requestTrackIds = activeTrackIds;\n\n if (activeTrackIds.length) {\n // Filter out all local hidden subtitle trackId's.\n requestTrackIds = requestTrackIds.filter(\n (id) => !hiddenTrackIds.includes(id)\n );\n }\n\n if (showingSubtitle?.trackId) {\n requestTrackIds = [...requestTrackIds, showingSubtitle.trackId];\n }\n\n // Remove duplicate ids.\n requestTrackIds = [...new Set(requestTrackIds)];\n\n const arrayEquals = (a, b) =>\n a.length === b.length && a.every((a) => b.includes(a));\n if (!arrayEquals(activeTrackIds, requestTrackIds)) {\n try {\n const request = new chrome.cast.media.EditTracksInfoRequest(\n requestTrackIds\n );\n await editTracksInfo(request);\n } catch (error) {\n console.error(error);\n }\n }\n }\n}\n", "/* global chrome */\nimport { RemotePlayback } from './castable-remote-playback.js';\nimport {\n privateProps,\n requiresCastFramework,\n loadCastFramework,\n currentSession,\n getDefaultCastOptions\n} from './castable-utils.js';\n\n/**\n * CastableMediaMixin\n *\n * This mixin function provides a way to compose multiple classes.\n * @see https://justinfagnani.com/2015/12/21/real-mixins-with-javascript-classes/\n *\n * @param {HTMLMediaElement} superclass - HTMLMediaElement or an extended class of it.\n * @return {CastableMedia}\n */\nexport const CastableMediaMixin = (superclass) =>\n class CastableMedia extends superclass {\n\n static observedAttributes = [\n ...(superclass.observedAttributes ?? []),\n 'cast-src',\n 'cast-content-type',\n 'cast-stream-type',\n 'cast-receiver',\n ];\n\n #localState = { paused: false };\n #castOptions = getDefaultCastOptions();\n #castCustomData;\n #remote;\n\n get remote() {\n if (this.#remote) return this.#remote;\n\n if (requiresCastFramework()) {\n loadCastFramework();\n\n privateProps.set(this, {\n loadOnPrompt: () => this.#loadOnPrompt()\n });\n\n return (this.#remote = new RemotePlayback(this));\n }\n\n return super.remote;\n }\n\n get #castPlayer() {\n return privateProps.get(this.remote)?.getCastPlayer?.();\n }\n\n attributeChangedCallback(attrName, oldValue, newValue) {\n super.attributeChangedCallback(attrName, oldValue, newValue);\n\n if (attrName === 'cast-receiver' && newValue) {\n this.#castOptions.receiverApplicationId = newValue;\n return;\n }\n\n if (!this.#castPlayer) return;\n\n switch (attrName) {\n case 'cast-stream-type':\n case 'cast-src':\n this.load();\n break;\n }\n }\n\n async #loadOnPrompt() {\n // Pause locally when the session is created.\n this.#localState.paused = super.paused;\n super.pause();\n\n // Sync over the muted state but not volume, 100% is different on TV's :P\n this.muted = super.muted;\n\n try {\n await this.load();\n } catch (err) {\n console.error(err);\n }\n }\n\n async load() {\n if (!this.#castPlayer) return super.load();\n\n const mediaInfo = new chrome.cast.media.MediaInfo(this.castSrc, this.castContentType);\n mediaInfo.customData = this.castCustomData;\n\n // Manually add text tracks with a `src` attribute.\n // M3U8's load text tracks in the receiver, handle these in the media loaded event.\n const subtitles = [...this.querySelectorAll('track')].filter(\n ({ kind, src }) => src && (kind === 'subtitles' || kind === 'captions')\n );\n\n const activeTrackIds = [];\n let textTrackIdCount = 0;\n\n if (subtitles.length) {\n mediaInfo.tracks = subtitles.map((trackEl) => {\n const trackId = ++textTrackIdCount;\n // only activate 1 subtitle text track.\n if (activeTrackIds.length === 0 && trackEl.track.mode === 'showing') {\n activeTrackIds.push(trackId);\n }\n\n const track = new chrome.cast.media.Track(\n trackId,\n chrome.cast.media.TrackType.TEXT\n );\n track.trackContentId = trackEl.src;\n track.trackContentType = 'text/vtt';\n track.subtype =\n trackEl.kind === 'captions'\n ? chrome.cast.media.TextTrackType.CAPTIONS\n : chrome.cast.media.TextTrackType.SUBTITLES;\n track.name = trackEl.label;\n track.language = trackEl.srclang;\n return track;\n });\n }\n\n if (this.castStreamType === 'live') {\n mediaInfo.streamType = chrome.cast.media.StreamType.LIVE;\n } else {\n mediaInfo.streamType = chrome.cast.media.StreamType.BUFFERED;\n }\n\n mediaInfo.metadata = new chrome.cast.media.GenericMediaMetadata();\n mediaInfo.metadata.title = this.title;\n mediaInfo.metadata.images = [{ url: this.poster }];\n\n const request = new chrome.cast.media.LoadRequest(mediaInfo);\n request.currentTime = super.currentTime ?? 0;\n request.autoplay = !this.#localState.paused;\n request.activeTrackIds = activeTrackIds;\n\n await currentSession()?.loadMedia(request);\n\n this.dispatchEvent(new Event('volumechange'));\n }\n\n play() {\n if (this.#castPlayer) {\n if (this.#castPlayer.isPaused) {\n this.#castPlayer.controller?.playOrPause();\n }\n return;\n }\n return super.play();\n }\n\n pause() {\n if (this.#castPlayer) {\n if (!this.#castPlayer.isPaused) {\n this.#castPlayer.controller?.playOrPause();\n }\n return;\n }\n super.pause();\n }\n\n /**\n * @see https://developers.google.com/cast/docs/reference/web_sender/cast.framework.CastOptions\n * @readonly\n *\n * @typedef {Object} CastOptions\n * @property {string} [receiverApplicationId='CC1AD845'] - The app id of the cast receiver.\n * @property {string} [autoJoinPolicy='origin_scoped'] - The auto join policy.\n * @property {string} [language='en-US'] - The language to use for the cast receiver.\n * @property {boolean} [androidReceiverCompatible=false] - Whether to use the Cast Connect.\n * @property {boolean} [resumeSavedSession=true] - Whether to resume the last session.\n *\n * @return {CastOptions}\n */\n get castOptions() {\n return this.#castOptions;\n }\n\n get castReceiver() {\n return this.getAttribute('cast-receiver') ?? undefined;\n }\n\n set castReceiver(val) {\n if (this.castReceiver == val) return;\n this.setAttribute('cast-receiver', `${val}`);\n }\n\n // Allow the cast source url to be different than