@glomex/integration-web-component

export declare interface Ad { sessionId: string; id: string; isLinear: boolean; duration?: number; positionIndex: number; breakIndex: number; breakName: string; mimetype: string; totalAds: number; adUrl?: string; nonLinearWidth?: number; nonLinearHeight?: number; title?: string; advertiserName?: string; width?: number; height?: number; adSystem?: string; universalAdIds?: { id: string; registry: string; }[]; creativeId?: string; skippable: boolean; clickThroughUrl?: string; } export declare const ALLOWED_UI_ACTIONS: readonly ["play", "pause", "openEpg", "startAgeSetup", "forgotPin"]; /** * An additional API script definition that should be executed for this media-item. * * @example * ``` * { * name: 'some-name', * scriptUrl: 'https://content-owner.com/tracking/script.js', * conditions: [ * { startMethods: ['click-to-play'], muted: false, requiredVendors: ['967'], probability: 1 }, * { startMethods: ['autoplay-scroll'], muted: undefined, requiredVendors: undefined, probability: 1 } // undefined = no filtering * ] * } * ``` */ declare interface ApiScript { /** Name of the API script that should be exposed to tracking */ name: string; /** URL of the API script that should be executed. Must implement {@link ConnectIntegration}. */ url: string; /** * Conditions under which the API script should be executed. Undefined means always. */ conditions?: { startMethods?: StartMethod[]; muted?: boolean | undefined; requiredVendors?: string[]; probability: number; }[]; } /** * Describes an alternative audio track provided by the media source. */ export declare interface AudioTrack { /** * Unique identifier for the audio track. Typically provided by the media/source pipeline. */ id: number; /** * Human-readable name of the track (e.g., "Deutsch", "English — Commentary"). */ label: string; /** * Language of the audio track as a BCP 47 tag (e.g., "en", "de-DE"). */ language: string; /** * Whether this audio track is currently selected for playback. */ active: boolean; } export declare interface Channel { /** Human-readable channel title shown in the player UI */ name?: string; /** Stable machine-facing code used for lookups or analytics */ code?: string; /** Provider-specific identifier when it differs from `code` */ id?: string; /** Canonical playback or landing URL clients should open */ url?: string; /** Square channel-logo URL (ideally 96x96) used wherever icons appear */ logo?: string; } export declare enum ComponentName { INTEGRATION = "glomex-integration", EXTERNAL_MEDIA_ITEM = "glomex-external-media-item", GLOMEX_MEDIA_ITEM = "glomex-media-item" } /** * Describes the contract that an external API tracking script must implement so that it can be * imported and executed by the integration. The API script must be hosted on the remote server * with CORS enabled. * * @example * ```ts * import { IntegrationEvent } from '@glomex/integration'; * export const connectIntegration: ConnectIntegration = ( * integration, * // userId will be undefined when no consent is given * { userCountryCode, userId, integrationEnvironment } * ) => { * integration.addEventListener(IntegrationEvent.CONTENT_PLAY, () => { * console.log('play', integration.content); * }); * }; * ``` * * @example * ```js * export const connectIntegration = ( * integration, * // userId will be undefined when no consent is given * { userCountryCode, userId, integrationEnvironment } * ) => { * const { IntegrationEvent } = integration.constructor; * integration.addEventListener(IntegrationEvent.CONTENT_PLAY, () => { * console.log('play', integration.content); * }); * }; * ``` */ export declare type ConnectIntegration = (integration: IntegrationElement, context: { userCountryCode?: string; userId?: string; integrationEnvironment?: string; }, options?: { warnCallback?: (error: Error) => void; }) => (() => void) | undefined; export declare interface Consent { gdprApplies: boolean; consentString?: string; cmpId?: number; policyVersion?: number; vendorListVersion?: number; vendorConsents?: Record<string, boolean>; vendorLegitimateInterests?: Record<string, boolean>; purposeConsents?: Record<string, boolean>; purposeLegitimateInterests?: Record<string, boolean>; ready: boolean; addtlConsent?: string; } /** * Selected source of the given content. */ export declare interface ContentSource { id?: string; mimetype: Mimetype; src: string; playbackMode: PlaybackMode; entitlementToken?: string; drm: boolean; } export declare enum ContentStopReason { CLEAR_PLAYLIST = "clearPlaylist", SELECT_PLAYLIST_ITEM = "selectPlaylistItem", ENDED = "ended", CONTENT_ERROR = "contentError", API_STOP = "apiStop", LIVESTREAM_STOP = "livestreamStop", PAGE_HIDE = "pageHide", BEFORE_UNLOAD = "beforeUnload" } export declare interface CustomMarker extends Omit<Marker, 'name'> { /** {@inheritDoc Marker.name} */ name: string; } declare interface Experiment { name: string; enabled: boolean; participantPercentage: number; variants: Record<string, ExperimentVariant>; conditions: Record<string, unknown>; } declare interface ExperimentVariant { weight: number; contentOverride: Record<string, unknown>; } export declare interface ExtendedVideoPlaybackQuality extends VideoPlaybackQuality { bitrate: number; liveLatency: number; throughput: number; bytes: number; bandwidth: number; width: number; height: number; } export declare const EXTERNAL_PLAYER_NAME = "turbo-player"; /** * A media item web component that allows to define an external media item. It can be placed * inside the integration element. For more complex use cases, see {@link MediaItemElement}. * * @tagname glomex-external-media-item * * @slot - (optional) Slot for inline JSON of type `application/glomex-external-media-item+json` * * @example the most simple glomex-external-media-item * * This only works when no `playlist-id` is assigned to `glomex-integration` * * ```html * <glomex-integration * integration-id="REPLACE_WITH_INTEGRATION_ID" * > * <glomex-external-media-item * id="SOME_ID" * src="SOME_VIDEO_URL" * duration="LENGTH_OF_VIDEO" * poster="POSTER_URL" * title="VIDEO_TITLE" * ></glomex-external-media-item> *  * </glomex-integration> * ``` * * @example the most simple glomex-external-media-item with inline JSON * * It is possible to use {@link MediaItem} or array of {@link MediaItem} * in JSON format. * * ```html * <glomex-integration * integration-id="REPLACE_WITH_INTEGRATION_ID" * > * <glomex-external-media-item> * <script type="application/glomex-external-media-item+json"> * { * "id": "SOME_ID", * "sources": [ * { * "src": "SOME_VIDEO_URL", * "mimetype": "video/mp4" * } * ], * "duration": "LENGTH_OF_VIDEO", * "poster": "POSTER_URL", * "title": "VIDEO_TITLE" * } * </script> * </glomex-external-media-item> * </glomex-integration> * ``` */ export declare class ExternalMediaItemElement extends HTMLElement implements MediaItemElement { #private; /** * {@inheritDoc MediaItem#id} */ id: string; /** * {@inheritDoc MediaSourceBase#src} */ src: string; /** * {@inheritDoc MediaSourceBase#mimetype} */ mimetype?: MediaSource_2['mimetype']; /** * {@inheritDoc MediaSourceBase#playbackMode} */ playbackMode?: MediaSourceBase['playbackMode']; /** * {@inheritDoc MediaItem#duration} */ duration?: number; /** * {@inheritDoc MediaItem#poster} */ poster: string; /** * {@inheritDoc MediaItem#title} */ title: string; /** * {@inheritDoc MediaItem#description} */ description?: string; /** * {@inheritDoc Channel#logo} */ channelLogo?: string; /** * {@inheritDoc Channel#name} */ channelName?: string; /** * {@inheritDoc MediaItem#aspectRatio} */ aspectRatio?: string; /** * {@inheritDoc MediaItem#minimumAge} */ minimumAge?: number; /** * {@inheritDoc MediaItem#releaseDate} */ releaseDate?: number; /** * {@inheritDoc MediaItem#endDate} */ endDate?: number; /** * {@inheritDoc MediaItem#hasProductPlacement} */ hasProductPlacement?: boolean; get data(): MediaItem; } /** * An optional context object that can be used to pass additional application, device and user information to the integration. Updates must be performed immutably: always provide a new object to the {@link IntegrationElement#extraContext} property when modifying any property or nested field. */ export declare interface ExtraContext { /** * The presentational context of the integration. Do not define it when it is not part of those contexts. */ presentationalContext?: 'curated-list' | 'discovery-page'; /** * The version of the app. When it is a website, fill in the deployed version of the website. */ appVersion?: string; /** * The name of the app. When it is a website, fill in the name of the project. */ appName?: string; /** * User ids of the user. User ids are only used when the user has given consent for the assigned vendor. */ userIds?: ExtraContextUserId[]; /** * The bundle id of the app. Only required for iOS apps. */ appBundleId?: string; /** * The store id of the app. Only required for apps. Depending on the app store, the id is formatted differently. * {@link https://iabtechlab.com/wp-content/uploads/2020/08/IAB-Tech-Lab-OTT-store-assigned-App-Identification-Guidelines-2020.pdf IAB Tech Lab App Identification Guidelines} */ appStoreId?: string; /** * The store URL of the app. Only required for apps. * {@link https://iabtechlab.com/wp-content/uploads/2020/08/IAB-Tech-Lab-OTT-store-assigned-App-Identification-Guidelines-2020.pdf IAB Tech Lab App Identification Guidelines} */ appStoreUrl?: string; b2bContext?: string; deviceId?: ExtraContextDeviceId; } /** * Device id of the user. Only required for app environments. When no listed deviceId is available, you can pass a ppid {@link ExtraContextUserId}. */ export declare interface ExtraContextDeviceId { id: string; name: 'aaid' | 'afai' | 'asia' | 'asid' | 'tifa' | 'vaid' | 'idfa' | 'idfv' | 'lgudid' | 'msai' | 'oaid' | 'psnai' | 'rida' | 'vida' | 'waid'; } /** * User id of the user that can be passed additionally to the integration. It improves the monetization. User ids * can be updated dynamically by assigning a new object to the {@link IntegrationElement#extraContext} property. */ export declare interface ExtraContextUserId { id: string; name: 'netId' | 'sevenPassId' | 'ppid' | 'utiqId' | 'liverampId' | 'pairId'; ext?: Record<string, unknown>; } export declare function getIntegrationCssUrl(integrationId: string): string; /** * Web component that allows to override title and poster of a given glomex content id. It can be placed * inside the integration element. For integrating external media items, see {@link ExternalMediaItemElement}. * * @tagname glomex-media-item * * @example with 2 glomex-media-items * * This only works when no `playlist-id` is assigned to `glomex-integration` * * ```html * <glomex-integration * integration-id="REPLACE_WITH_INTEGRATION_ID" * > * <glomex-media-item * id="REPLACE_WITH_MEDIA_OR_PLAYLIST_ID" * ></glomex-media-item> * <glomex-media-item * id="ANOTHER_MEDIA_OR_PLAYLIST_ID" * ></glomex-media-item> * </glomex-integration> * ``` * * @example glomex-media-item with title and poster override * * ```html * <glomex-integration * integration-id="REPLACE_WITH_INTEGRATION_ID" * > * <glomex-media-item * id="REPLACE_WITH_MEDIA_OR_PLAYLIST_ID" * title="REPLACE_WITH_TITLE_OVERRIDE" * poster="REPLACE_WITH_POSTER_URL_OVERRIDE" * ></glomex-media-item> * </glomex-integration> * ``` */ export declare class GlomexMediaItemElement extends HTMLElement { #private; /** * {@inheritDoc MediaItem#id} */ id: string; /** * Overridden poster of the media item. */ poster: string; /** * Overridden title of the media item. */ title: string; } export declare interface GlomexMediaItemWithOverrides { id: string; overrides: Partial<Omit<MediaItem, 'id' | 'sources'>>; } /** * Web component to integrate the player. * * @see {@link IntegrationElementEventMap} for a full list of event types and their payloads * @tagname glomex-integration * @slot - (optional) Slot for custom media items ({@link GlomexMediaItemElement}, {@link ExternalMediaItemElement} or {@link MediaItemElement}) * * @example with a playlist-id * * ```html * <glomex-integration * integration-id="REPLACE_WITH_INTEGRATION_ID" * playlist-id="REPLACE_WITH_PLAYLIST_ID" * ></glomex-integration> * ``` * * You can find more advanced examples in the {@link GlomexMediaItemElement}, {@link ExternalMediaItemElement} or {@link MediaItemElement} documentation. */ export declare class IntegrationElement extends HTMLElement implements IntegrationProperties { #private; static MarkerType: typeof MarkerType; static KnownMarkerName: typeof KnownMarkerName; static PlaybackMode: typeof PlaybackMode; static Mimetype: typeof Mimetype; static PresentationMode: typeof PresentationMode; static IntegrationEvent: typeof IntegrationEvent; /** * {@inheritDoc IntegrationProperties.integrationId} * @attribute integration-id */ integrationId?: string; /** * {@inheritDoc IntegrationProperties.playlistId} * @attribute playlist-id */ playlistId?: string; /** * {@inheritDoc IntegrationProperties.index} * @attribute index */ index?: number; /** * {@inheritDoc IntegrationProperties.hidden} * @attribute {on|off} hidden */ hidden: boolean; /** * {@inheritDoc IntegrationProperties.topLevelIframe} * @attribute top-level-iframe */ topLevelIframe: boolean; /** * {@inheritDoc IntegrationProperties.placement} * @attribute placement */ placement?: string; variant?: string; adPlayer?: string; /** * {@inheritDoc IntegrationProperties.crossorigin} * @attribute crossorigin */ crossorigin?: IntegrationProperties['crossorigin']; /** * {@inheritDoc IntegrationProperties.userLanguage} * @attribute user-language */ userLanguage?: string; extraContext?: ExtraContext; /** * Optional callback function invoked when the integration fails to load an advertisement. * The callback receives an object with a `reason` property that explains why no ad was loaded. * It must be defined before the element gets attached to the DOM. */ passback?: (payload: { reason: string; }) => void; /** * Resolves when the integration API is available (e.g. setting volume, play, pause, etc.). * Alternatively to `element.addEventListener(IntegrationEvent.READY, () => {...})` */ ready: Promise<void>; /** * Initiates playback of the media content. * @param options.startMethod - The method used to start playback (defaults to CLICK) */ play(options?: { startMethod: Exclude<StartMethod, StartMethod.PRE_CLICK>; }): Promise<void>; /** * Pauses the current media playback. */ pause(): Promise<void>; /** * Snapshots current video frame. Requires {@link crossorigin} to be set to `anonymous`. */ getCurrentVideoFrame(): Promise<ImageBitmap>; /** * Returns the current playback time (in seconds) of the media. */ get currentTime(): number; /** * Returns the current extended playback quality. */ getVideoPlaybackQuality(): { droppedVideoFrames: number; totalVideoFrames: number; creationTime: number; corruptedVideoFrames: number; bitrate: number; liveLatency: number; throughput: number; bytes: number; bandwidth: number; width: number; height: number; } | undefined; /** * Returns the current session ID. */ get sessionId(): string; /** * Returns the current wall clock time (UNIX timestamp in seconds). Useful for livestreams. */ get wallClockTime(): number; /** * Seeks the media to the specified time, updating the current playback time. * @param time - The time (in seconds) to seek to. */ set currentTime(time: number); /** * Retrieves the total duration (in seconds) of the current media content. */ get duration(): number; /** * Indicates whether the media playback is currently muted. */ get muted(): boolean; /** * Mutes or unmutes the media playback. * @param value - A boolean value indicating whether to mute the media playback. */ set muted(value: boolean); /** * Returns the current volume level of the media playback (0-1). */ get volume(): number; /** * Sets the media playback volume to the specified level. * @param value - The volume level to be set (0-1). */ set volume(value: number); /** * Returns `true` if the media playback is currently paused; otherwise, returns `false`. */ get paused(): boolean; /** * Indicates whether the media playback has ended. */ get ended(): boolean; /** * Indicates whether the media is currently in a seeking state. */ get seeking(): boolean; /** * Indicates whether the media is currently in a buffering state. */ get buffering(): boolean; /** * Retrieves the current presentation mode of the media player. * This mode may affect how the media is displayed. */ get presentationMode(): PresentationMode; /** * Returns whether the ad playback is muted. If no ad is currently active, this value is `undefined`. */ get adMuted(): boolean | undefined; /** * Retrieves the volume level for the ad playback. If no ad is currently active, this value is `undefined`. */ get adVolume(): number | undefined; /** * Returns the current playback time (in seconds) for the ad content. If no ad is currently active, this value is `NaN`. */ get adCurrentTime(): number; /** * Retrieves the total duration (in seconds) of the ad content. If no ad is currently active, this value is `NaN`. */ get adDuration(): number; /** * Indicates whether the ad playback is currently paused. If no ad is currently active, this value is `undefined`. */ get adPaused(): boolean | undefined; /** * Retrieves the currently selected content item. */ get content(): MediaItem | undefined; /** * Retrieves the currently selected source. */ get source(): ContentSource | undefined; /** * Retrieves the current playlist. */ get playlist(): MediaItem[] | undefined; /** * Provides access to the user's consent information. */ get consent(): Consent | undefined; /** * Retrieves information about the detected page. */ get page(): Page | undefined; /** * Retrieves the playback time (in seconds) of the current content. */ get contentPlaybackTime(): number; /** * Retrieves details about the currently selected ad, if any. */ get currentAd(): Ad | undefined; /** Version of the integration */ get version(): string; /** * Sets the presentation mode of the media player to the specified mode. This mode affects how the integration gets displayed * (e.g. inline, dock, lightbox, fullscreen). * * @param {PresentationMode} mode - The presentation mode to set. * @param {Object} [options] - Optional configuration. * @param {boolean} [options.byUser=false] - Indicates if the change was initiated by a user action. */ setPresentationMode(mode: PresentationMode | PresentationModeString, { byUser }?: { byUser?: boolean | undefined; }): Promise<void>; /** * Exits the current presentation mode. * * @param {Object} [options] - Optional configuration. * @param {boolean} [options.byUser=false] - Indicates if the change was initiated by a user action. */ exitCurrentPresentationMode({ byUser }?: { byUser?: boolean; }): Promise<void>; /** * Returns the current audio track. */ getCurrentAudioTrack(): AudioTrack | undefined; /** * Returns the available audio tracks. */ getAudioTracks(): AudioTrack[] | undefined; /** * Set the audio track by Id. * @param trackId - The identifier of the audio track to activate received from {@link getAudioTracks} (see {@link AudioTrack.id}). */ setAudioTrackById(trackId: string): void; /** * Returns the current text track. */ getCurrentTextTrack(): { id: string; kind: TextTrackKind; label: string; src: string; language: string; mode: "showing"; } | null; /** * Returns the available text tracks. */ getTextTracks(): TextTrack_2[]; /** * Returns the available video tracks. */ getVideoTracks(): VideoTrack[]; /** * Returns the current video track. */ getCurrentVideoTrack(): VideoTrack | null; /** * Sets the active video track by video track ID, or switches to automatic ABR mode. * * @param videoTrackId - The ID of the video track id to activate received from {@link getVideoTracks} (see {@link VideoTrack.id}). Pass `null` or `undefined` to enable automatic adaptive bitrate selection (ABR). */ setVideoTrackById(videoTrackId: string | null | undefined): void; /** * Set the text track by Id. * @param trackId - The identifier of the text track to activate received from {@link getTextTracks} (see {@link TextTrack.id}). */ setTextTrackById(trackId: string): void; /** * Disable any active text track. */ disableTextTrack(): void; } /** * Map of events that are dispatched by the {@link IntegrationElement}. The {@link IntegrationElement} provides * getters to read {@link IntegrationElement#consent consent}, {@link IntegrationElement#content content}, {@link IntegrationElement#page page}, {@link IntegrationElement#currentTime currentTime}, ... state from. * * @see {@link IntegrationEvent} for all event types as constants * * @example * * ```js * // using strings * integration.addEventListener('ready', () => {}); * // using constants * await window.customElements.whenDefined('glomex-integration'); * const { IntegrationEvent } = integration.constructor; * integration.addEventListener(IntegrationEvent.READY, () => {}); * ``` */ export declare interface IntegrationElementEventMap { /** * @inheritdoc IntegrationEvent.READY * @eventProperty */ [IntegrationEvent.READY]: CustomEvent<void>; /** * @inheritdoc IntegrationEvent.INTEGRATION_ABORT * @eventProperty */ [IntegrationEvent.INTEGRATION_ABORT]: CustomEvent<{ error: Error; }>; /** * @inheritdoc IntegrationEvent.INTEGRATION_AD_AVAILABLE * @eventProperty */ [IntegrationEvent.INTEGRATION_AD_AVAILABLE]: CustomEvent<void>; /** * @inheritdoc IntegrationEvent.INTEGRATION_PASSBACK * @eventProperty */ [IntegrationEvent.INTEGRATION_PASSBACK]: CustomEvent<{ reason: string; }>; /** * @inheritdoc IntegrationEvent.USER_UPDATE_CONSENT * @eventProperty */ [IntegrationEvent.USER_UPDATE_CONSENT]: CustomEvent<void>; /** * @inheritdoc IntegrationEvent.PLAYLIST_UPDATE * @eventProperty */ [IntegrationEvent.PLAYLIST_UPDATE]: CustomEvent<void>; /** * @inheritdoc IntegrationEvent.PLAYER_SET_PRESENTATION_MODE * @eventProperty */ [IntegrationEvent.PLAYER_SET_PRESENTATION_MODE]: CustomEvent<{ mode: PresentationMode; previousMode: PresentationMode; }>; /** * @inheritdoc IntegrationEvent.CONTENT_SELECT * @eventProperty */ [IntegrationEvent.CONTENT_SELECT]: CustomEvent<{ sessionId: string; source: ContentSource; }>; /** * @inheritdoc IntegrationEvent.CONTENT_START * @eventProperty */ [IntegrationEvent.CONTENT_START]: CustomEvent<{ startMethod: StartMethod; }>; /** * @inheritdoc IntegrationEvent.CONTENT_IMPRESSION * @eventProperty */ [IntegrationEvent.CONTENT_IMPRESSION]: CustomEvent<void>; /** * @inheritdoc IntegrationEvent.CONTENT_BUFFERING_START * @eventProperty */ [IntegrationEvent.CONTENT_BUFFERING_START]: CustomEvent<void>; /** * @inheritdoc IntegrationEvent.CONTENT_BUFFERING_END * @eventProperty */ [IntegrationEvent.CONTENT_BUFFERING_END]: CustomEvent<void>; /** * @inheritdoc IntegrationEvent.CONTENT_STOP * @eventProperty */ [IntegrationEvent.CONTENT_STOP]: CustomEvent<{ reason: ContentStopReason; }>; /** * @inheritdoc IntegrationEvent.CONTENT_ERROR * @eventProperty */ [IntegrationEvent.CONTENT_ERROR]: CustomEvent<{ error: MediaError_2 | MediaItemError | MediaNetworkError; }>; /** * @inheritdoc IntegrationEvent.CONTENT_MARKER_REACHED * @eventProperty */ [IntegrationEvent.CONTENT_MARKER_REACHED]: CustomEvent<{ markerName: string; markerData: unknown; }>; /** * @inheritdoc IntegrationEvent.CONTENT_QUALITY_CHANGED * @eventProperty */ [IntegrationEvent.CONTENT_QUALITY_CHANGED]: CustomEvent<void>; /** * @inheritdoc IntegrationEvent.CONTENT_TIME_UPDATE * @eventProperty */ [IntegrationEvent.CONTENT_TIME_UPDATE]: CustomEvent<void> | HTMLElementEventMap['timeupdate']; /** * @inheritdoc IntegrationEvent.CONTENT_SEEKING * @eventProperty */ [IntegrationEvent.CONTENT_SEEKING]: CustomEvent<void> | HTMLElementEventMap['seeking']; /** * @inheritdoc IntegrationEvent.CONTENT_SEEKED * @eventProperty */ [IntegrationEvent.CONTENT_SEEKED]: CustomEvent<void> | HTMLElementEventMap['seeked']; /** * @inheritdoc IntegrationEvent.CONTENT_PLAY * @eventProperty */ [IntegrationEvent.CONTENT_PLAY]: CustomEvent<void> | HTMLElementEventMap['play']; /** * @inheritdoc IntegrationEvent.CONTENT_PAUSE * @eventProperty */ [IntegrationEvent.CONTENT_PAUSE]: CustomEvent<void> | HTMLElementEventMap['pause']; /** * @inheritdoc IntegrationEvent.CONTENT_VOLUME_CHANGE * @eventProperty */ [IntegrationEvent.CONTENT_VOLUME_CHANGE]: CustomEvent<void> | HTMLElementEventMap['volumechange']; /** * @inheritdoc IntegrationEvent.CONTENT_ENDED * @eventProperty */ [IntegrationEvent.CONTENT_ENDED]: CustomEvent<void> | HTMLElementEventMap['ended']; /** * @inheritdoc IntegrationEvent.AD_BREAK_REQUEST * @eventProperty */ [IntegrationEvent.AD_BREAK_REQUEST]: CustomEvent<{ name: string; index: number; plannedSlotCount: number; plannedAdRequestCount: number; }>; /** * @inheritdoc IntegrationEvent.AD_BREAK_REQUEST_ERROR * @eventProperty */ [IntegrationEvent.AD_BREAK_REQUEST_ERROR]: CustomEvent<{ name: string; index: number; error: Error & { code?: string; }; }>; /** * @inheritdoc IntegrationEvent.AD_LOADED * @eventProperty */ [IntegrationEvent.AD_LOADED]: CustomEvent<void>; /** * @inheritdoc IntegrationEvent.AD_IMPRESSION * @eventProperty */ [IntegrationEvent.AD_IMPRESSION]: CustomEvent<void>; /** * @inheritdoc IntegrationEvent.AD_BUFFERING_START * @eventProperty */ [IntegrationEvent.AD_BUFFERING_START]: CustomEvent<void>; /** * @inheritdoc IntegrationEvent.AD_BUFFERING_END * @eventProperty */ [IntegrationEvent.AD_BUFFERING_END]: CustomEvent<void>; /** * @inheritdoc IntegrationEvent.AD_TIME_UPDATE * @eventProperty */ [IntegrationEvent.AD_TIME_UPDATE]: CustomEvent<void>; /** * @inheritdoc IntegrationEvent.AD_VOLUME_CHANGE * @eventProperty */ [IntegrationEvent.AD_VOLUME_CHANGE]: CustomEvent<void>; /** * @inheritdoc IntegrationEvent.AD_PAUSED * @eventProperty */ [IntegrationEvent.AD_PAUSED]: CustomEvent<void>; /** * @inheritdoc IntegrationEvent.AD_RESUMED * @eventProperty */ [IntegrationEvent.AD_RESUMED]: CustomEvent<void>; /** * @inheritdoc IntegrationEvent.AD_CLICK * @eventProperty */ [IntegrationEvent.AD_CLICK]: CustomEvent<void>; /** * @inheritdoc IntegrationEvent.AD_SKIPPED * @eventProperty */ [IntegrationEvent.AD_SKIPPED]: CustomEvent<void>; /** * @inheritdoc IntegrationEvent.AD_COMPLETE * @eventProperty */ [IntegrationEvent.AD_COMPLETE]: CustomEvent<void>; /** * @inheritdoc IntegrationEvent.UI_INTERACTION * @eventProperty */ [IntegrationEvent.UI_INTERACTION]: CustomEvent<{ action: UiAction; }>; } /** * Constants for all events dispatched by the {@link IntegrationElement}. * * @see {@link IntegrationElementEventMap} for a full list of event types and their payloads */ export declare enum IntegrationEvent { /** * When the integration got initialized. * @eventProperty */ READY = "ready", /** * When the integration got aborted because of a configuration / authorization error. * It is not triggered when the content errors. * @eventProperty */ INTEGRATION_ABORT = "integrationabort", /** * When an ad is available. * @eventProperty */ INTEGRATION_AD_AVAILABLE = "integrationadavailable", /** * When a passback is triggered because of no content or no ad. Only available when {@link IntegrationElement#passback} is set. * @eventProperty */ INTEGRATION_PASSBACK = "integrationpassback", /** * When the user's consent got updated. * See {@link IntegrationElement#consent} to get the current consent. * @eventProperty */ USER_UPDATE_CONSENT = "userupdateconsent", /** * When the playlist is updated (e.g. new media item got added). See {@link IntegrationElement#playlist} to get the current playlist items. * @eventProperty */ PLAYLIST_UPDATE = "playlistupdate", /** * When the player's presentation mode got changed. * @eventProperty */ PLAYER_SET_PRESENTATION_MODE = "playersetpresentationmode", /** * When content got selected. See {@link IntegrationElement#content} to get the current content. * @eventProperty */ CONTENT_SELECT = "contentselect", /** * When content started initially (e.g. before ad break). * @eventProperty */ CONTENT_START = "contentstart", /** * When the first frame of the content got played back. * @eventProperty */ CONTENT_IMPRESSION = "contentimpression", /** * When content buffering started. * @eventProperty */ CONTENT_BUFFERING_START = "contentbufferingstart", /** * When content buffering ended. * @eventProperty */ CONTENT_BUFFERING_END = "contentbufferingend", /** * When content got stopped (e.g. loading another content or it ended normally). The reason is provided in the payload. * It gets triggered after a potential postroll. * @eventProperty */ CONTENT_STOP = "contentstop", /** * When a content error occurs upon loading or playing the content. * @eventProperty */ CONTENT_ERROR = "contenterror", /** * When a marker is reached. See {@link MediaItem#markers} how to define own markers. * @eventProperty */ CONTENT_MARKER_REACHED = "contentmarkerreached", /** * When the content's quality changes. * @eventProperty */ CONTENT_QUALITY_CHANGED = "contentqualitychanged", /** * When the content's time updates. This is equal to {@link https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/timeupdate_event HTMLMediaElement.timeupdate}. * See {@link IntegrationElement#currentTime} to get the current time. * @eventProperty */ CONTENT_TIME_UPDATE = "timeupdate", /** * When the content is seeking. This is equal to {@link https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/seeking_event HTMLMediaElement.seeking}. * See {@link IntegrationElement#seeking} to get the current seeking state. * @eventProperty */ CONTENT_SEEKING = "seeking", /** * When the content has seeked. This is equal to {@link https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/seeked_event HTMLMediaElement.seeked}. * @eventProperty */ CONTENT_SEEKED = "seeked", /** * When the content switches from paused to playing. This is equal to {@link https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/play_event HTMLMediaElement.play}. * @eventProperty */ CONTENT_PLAY = "play", /** * When the content switches from playing to paused. This is equal to {@link https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/pause_event HTMLMediaElement.pause}. * @eventProperty */ CONTENT_PAUSE = "pause", /** * When the content's volume changes. This is equal to {@link https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/volumechange_event HTMLMediaElement.volumechange}. * See {@link IntegrationElement#volume} to get the current volume. * @eventProperty */ CONTENT_VOLUME_CHANGE = "volumechange", /** * When the content reached its end. This is equal to {@link https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/ended_event HTMLMediaElement.ended}. * See {@link IntegrationElement#ended} to check if the content ended. * @eventProperty */ CONTENT_ENDED = "ended", /** * When an ad break gets requested */ AD_BREAK_REQUEST = "adbreakrequest", /** * When an ad break request fails */ AD_BREAK_REQUEST_ERROR = "adbreakrequesterror", /** * When an ad is loaded. * See {@link IntegrationElement#currentAd} to get the loaded ad. * @eventProperty */ AD_LOADED = "adloaded", /** * When the first frame of the ad got played back. * See {@link IntegrationElement#currentAd} to get the current ad. * @eventProperty */ AD_IMPRESSION = "adimpression", /** * When the ad started buffering. * @eventProperty */ AD_BUFFERING_START = "adbufferingstart", /** * When the ad stopped buffering. * @eventProperty */ AD_BUFFERING_END = "adbufferingend", /** * When the ad's time updates. * @eventProperty */ AD_TIME_UPDATE = "adtimeupdate", /** * When the ad's volume changes. * See {@link IntegrationElement#adVolume} to get the current volume. * @eventProperty */ AD_VOLUME_CHANGE = "advolumechange", /** * When the ad paused. * @eventProperty */ AD_PAUSED = "adpaused", /** * When the ad resumed. * @eventProperty */ AD_RESUMED = "adresumed", /** * When the ad was clicked. * @eventProperty */ AD_CLICK = "adclick", /** * When the ad was skipped. * @eventProperty */ AD_SKIPPED = "adskipped", /** * When the ad completed. * @eventProperty */ AD_COMPLETE = "adcomplete", /** * When the user interacted with the UI (e.g. play, pause, seek, etc.). The specific action is provided in the payload. * @eventProperty */ UI_INTERACTION = "uiinteraction" } /** * Properties that can be set on the integration element. */ export declare interface IntegrationProperties { /** * The identifier for this integration. This value is used to determine the configuration and behavior of the integration. */ integrationId?: string; /** * Defines the playlist / content identifier that should be loaded and managed by the integration. It can be a single content id, a playlist id or `auto`. * It must be empty when the content is provided via the `media-item` web components inside the integration. */ playlistId?: string; /** * Determines the index of the media item within the playlist that should be or is currently selected. */ index?: number; /** * Hides the integration element when set to `true`. */ hidden?: boolean; /** * An optional flag that can mark the integration as if it is running in a top-level window context. Useful when the embedded iframe represents an article, which contains this integration. */ topLevelIframe?: boolean; /** * Allows the publisher to provide an optional placement attribute, which supplies additional contextual information for enhanced analytics tracking. * This can be a simple string or a stringified JSON object. If it is a stringified JSON object, its contents are forwarded as `placementDetail`. If the object contains a property key `name`, its value will be tracked for the placement attribute. */ placement?: string; env?: 'stage' | 'local'; variant?: string; adPlayer?: string; /** * The {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes/crossorigin crossorigin attribute} * is used to define the CORS (Cross-Origin Resource Sharing) policy for the video element. * Defaults to `anonymous`. If set to `none` (non-standard value) it won't require CORS headers * for the loaded media files, though text-tracks from foreign origins then cannot be loaded. */ crossorigin?: '' | 'anonymous' | 'use-credentials' | 'none'; /** * Preferred language for the current user. * When provided, this value is used for the UI instead of the browser language detected in the environment. * Accepts a BCP 47 language tag (e.g. "de", "en-US"). */ userLanguage?: string; /** * {@inheritDoc ExtraContext} */ extraContext?: ExtraContext; } export declare const INTERNAL_PREFIX = "turbo"; export declare enum KnownMarkerName { PREROLL = "preroll", MIDROLL = "midroll", POSTROLL = "postroll", FIRST_QUARTILE = "contentFirstQuartile", MIDPOINT = "contentMidpoint", THIRD_QUARTILE = "contentThirdQuartile", COMPLETE = "contentComplete", STILL_INTERESTING = "stillInteresting", REQUEST_RECOMMENDATIONS = "requestRecommendations" } export declare function loadIntegrationComponent(): void; export declare function loadIntegrationStyles(integrationId: string): void; /** * Known markers that the integration interprets. */ export declare interface Marker { /** Name of the marker */ name: KnownMarkerName; /** Type of the marker */ type: MarkerType; /** * Threshold for the marker: * - {@link MarkerType.TIME_IN_SECONDS}: seconds * - {@link MarkerType.PERCENT}: percent as fraction (0-1) * - {@link MarkerType.TIME_IN_SECONDS_RECURRING}: seconds */ threshold: number; /** Whether the marker should reference watch time instead of current time. Livestreams always use watch time. */ useWatchTime?: boolean; } export declare enum MarkerType { /** Triggers by time in seconds */ TIME_IN_SECONDS = "time", /** Triggers by percentage (only works when media item has a {@link MediaItem#duration duration}) */ PERCENT = "percent", /** Recurringly triggers by time in seconds (e.g. every 60 seconds) */ TIME_IN_SECONDS_RECURRING = "timeRecurring" } /** * Runtime error when the player fails to load or play a media item. */ declare interface MediaError_2 { name: 'MediaError'; /** Error code from the playback engine */ code: string; /** A detailed error message */ message: string; } export { MediaError_2 as MediaError } /** * Represents a media asset within the player. * * A minimal MediaItem requires only: * - an `id` * - a poster image * - a title * - a source * * Additional fields can be supplied to support analytics, monetization, UI enhancements, and other use cases. * In general, the richer the metadata, the more likely the MediaItem can satisfy all integration requirements. */ export declare interface MediaItem { /** * Unique identifier of the media item. */ id: string; /** * Additional ids that identify the media item in other systems */ additionalIds?: { joynId?: string; joynMediaId?: string; externalId?: string; }; /** * Poster image of the media item. */ poster: string; /** * Sources of the media item. */ sources: MediaSource_2[]; /** * Array of text tracks for subtitles, captions, etc. * These tracks apply to the whole media item, not to individual sources. */ textTracks?: TextTrack_2[]; /** * Title of the media item. */ title: string; /** * Duration of the media item in seconds. Not defined when livestream. */ duration?: number; /** * Description of the media item. */ description?: string; /** * Language of the media item. 2-letter ISO language code. * * @defaultValue `de` (German) */ language?: string; /** * IAB categories (as {@link iabCategoryTaxonomy}) of the media item. Used for monetization. */ iabCategories?: string[]; /** * IAB category taxonomy used for {@link iabCategories} ({@link https://github.com/InteractiveAdvertisingBureau/AdCOM/blob/main/AdCOM%20v1.0%20FINAL.md#list_categorytaxonomies see IAB spec for details}) * @defaultValue `9` for IAB Tech Lab Content Taxonomy 3.1 */ iabCategoryTaxonomy?: number; /** * Aspect ratio of the media item. Useful when vertical variants are used. * * @defaultValue `16:9` */ aspectRatio?: string; /** * Minimum age to watch the media item. Shows a minimum age indicator in the UI. * * @defaultValue `0` (no minimum age) */ minimumAge?: number; /** * Release date of the media item. Unix timestamp in milliseconds. * Useful for JSON-LD generation. */ releaseDate?: number; /** * Time when the media item expires. Unix timestamp in milliseconds. * Useful for JSON-LD generation. */ endDate?: number; /** * Whether the media item has product placements. Shows a product placement indicator in the UI. */ hasProductPlacement?: boolean; /** * Channel (or often referred to as brand) of the media item. */ channel?: Channel; /** * Markers of the media item. * * @defaultValue `[{ name: KnownMarkerName.PREROLL, type: MarkerType.TIME_IN_SECONDS, threshold: 0 }]` */ markers?: (Marker | CustomMarker)[]; /** * In which country can this media item be played (e.g. `['de', 'at']`)? Useful for * JSON-LD generation. * * @defaultValue `['all']` (worldwide) */ regionsAllowed?: string[]; /** * Will be automatically filled based on {@link minimumAge} and {@link iabCategories}. * @ignore */ ppsj?: string; /** * Mark this media item as a recommendation. */ isRecommendation?: boolean; /** * An internal marker for the used playlist. It is automatically filled. * @ignore */ playlistId?: string; /** * JSON-LD `contentUrl` that allows search engines to crawl the media source. * You should only allow known crawlers ({@link https://developers.google.com/search/docs/crawling-indexing/verifying-googlebot?hl=en how to verify Googlebot & Crawler}) * to access those media sources. */ seoContentUrl?: string; /** * Additional teaser options that improve the loading experience and enable additional * integration variants. */ teaser?: { /** Image of the first frame of the media item. Used for initially showing the first frame of the media item. */ firstFrame?: string; /** {@link https://blurha.sh/ Blurhash} of the first frame of the media item. Used for coloring the background. */ firstFrameBlurHash?: string | null; /** Blurred version of the first frame of the media item. Used to show something early while loading. */ firstFrameBlurred?: string; /** {@link https://blurha.sh/ Blurhash} of the poster of the media item. Used for coloring the background. */ posterBlurHash?: string | null; /** Blurred version of the poster of the media item. Used to show something early while loading. */ posterBlurred?: string; /** Teaser video URL which is used for previewing the media item for some integrations. */ video?: string; }; /** * Additional labels for this media item. */ labels?: { id: string; name: string; }[]; /** Genre of the media item (e.g. `Documentary`) */ genre?: string; /** Content owner id and name of the media item */ contentOwner?: { id?: string; name: string; }; /** * Additional details to show for the age rating (e.g. `['Alcohol']`) next to the minimum age. */ ageRatingDetails?: string[]; /** Keywords of the media item */ keywords?: string[]; /** Logo of the media item in size 220x90 (e.g. for shows, movies, sports events etc.) */ logo?: string; /** Alt text for the logo of the media item */ logoAltText?: string; /** Accent color of the media item that is shown behind the logo */ logoAccentColor?: string; /** Show (often referred to as series, format or tv-show) the media item belongs to */ show?: { id?: string; name: string; episodeNumber?: number; seasonNumber?: number; }; /** Competition the media item belongs to */ competition?: { id?: string; name?: string; }; /** Compilation the media item belongs to */ compilation?: { id?: string; name?: string; }; /** The live on demand channel (livestream using a VoD playlist, often called ODC) the media item belongs to */ liveOnDemandChannel?: { id?: string; name?: string; }; /** Category id and name of the media item */ category?: { id?: string; name: string; }; /** Error information if the media item is not available upfront. */ error?: MediaItemError; /** * Internal definition of experiments. * @ignore */ experiments?: Experiment[]; /** * Additional content branding */ branding?: { /** @ignore */ backgroundColor?: string; /** @ignore */ cutInZoomAssetUrl?: string; /** @ignore */ cutInZoomHideTimeout?: number; /** Logo that should appear in the corner */ logoUrl?: string; /** Optional link target for the logo */ logoLinkUrl?: string; }; /** Livestream details */ livestream?: { /** UTC start time of the livestream in milliseconds */ startTime: number; /** UTC end time of the livestrea