export declare interface Ad { sessionId: string; id: string; isLinear: boolean; duration: number; positionIndex: number; breakIndex: number; breakName: string; mimetype: string; totalAds: number; nonLinearWidth?: number; nonLinearHeight?: number; } export declare interface Channel { /** Name of the channel */ name: string; /** Identifier of the channel */ id?: string; /** Target URL of the channel */ url?: string; /** Square logo of the channel (optimal size: 96x96 pixels) */ 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; vendorLegitimateInterests?: Record; purposeConsents?: Record; purposeLegitimateInterests?: Record; ready: boolean; addtlConsent?: string; } /** * Selected source of the given content. */ 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" } export declare interface CustomMarker { /** {@inheritDoc Marker.name} */ name: string; /** {@inheritDoc Marker.type} */ type: MarkerType; /** {@inheritDoc Marker.threshold} */ threshold: number; } declare interface Experiment { name: string; enabled: boolean; participantPercentage: number; variants: Record; conditions: Record; } declare interface ExperimentVariant { weight: number; contentOverride: Record; } /** * 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 * * * * * ``` * * @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 * * * * * * ``` */ 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; } 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 * * * * * ``` * * @example glomex-media-item with title and poster override * * ```html * * * * ``` */ 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>; } /** * 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 * * ``` * * 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; /** * 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; /** * Initiates playback of the media content. */ play(): void; /** * Pauses the current media playback. */ pause(): void; /** * Snapshots current video frame. */ getCurrentVideoFrame(): Promise; /** * Returns the current playback time (in seconds) of the media. */ get currentTime(): number; /** * 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 current playlist content items. */ 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; }): 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; }): 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; /** * @inheritdoc IntegrationEvent.INTEGRATION_ABORT * @eventProperty */ [IntegrationEvent.INTEGRATION_ABORT]: CustomEvent<{ error: Error; }>; /** * @inheritdoc IntegrationEvent.INTEGRATION_AD_AVAILABLE * @eventProperty */ [IntegrationEvent.INTEGRATION_AD_AVAILABLE]: CustomEvent; /** * @inheritdoc IntegrationEvent.INTEGRATION_PASSBACK * @eventProperty */ [IntegrationEvent.INTEGRATION_PASSBACK]: CustomEvent<{ reason: string; }>; /** * @inheritdoc IntegrationEvent.USER_UPDATE_CONSENT * @eventProperty */ [IntegrationEvent.USER_UPDATE_CONSENT]: CustomEvent; /** * @inheritdoc IntegrationEvent.PLAYLIST_UPDATE * @eventProperty */ [IntegrationEvent.PLAYLIST_UPDATE]: CustomEvent; /** * @inheritdoc IntegrationEvent.PLAYER_SET_PRESENTATION_MODE * @eventProperty */ [IntegrationEvent.PLAYER_SET_PRESENTATION_MODE]: CustomEvent<{ mode: PresentationMode; }>; /** * @inheritdoc IntegrationEvent.CONTENT_SELECT * @eventProperty */ [IntegrationEvent.CONTENT_SELECT]: CustomEvent<{ sessionId: string; source: ContentSource; }>; /** * @inheritdoc IntegrationEvent.CONTENT_START * @eventProperty */ [IntegrationEvent.CONTENT_START]: CustomEvent; /** * @inheritdoc IntegrationEvent.CONTENT_IMPRESSION * @eventProperty */ [IntegrationEvent.CONTENT_IMPRESSION]: CustomEvent; /** * @inheritdoc IntegrationEvent.CONTENT_BUFFERING_START * @eventProperty */ [IntegrationEvent.CONTENT_BUFFERING_START]: CustomEvent; /** * @inheritdoc IntegrationEvent.CONTENT_BUFFERING_END * @eventProperty */ [IntegrationEvent.CONTENT_BUFFERING_END]: CustomEvent; /** * @inheritdoc IntegrationEvent.CONTENT_STOP * @eventProperty */ [IntegrationEvent.CONTENT_STOP]: CustomEvent<{ reason: ContentStopReason; }>; /** * @inheritdoc IntegrationEvent.CONTENT_ERROR * @eventProperty */ [IntegrationEvent.CONTENT_ERROR]: CustomEvent<{ error: MediaError_2 | MediaItemError; }>; /** * @inheritdoc IntegrationEvent.CONTENT_MARKER_REACHED * @eventProperty */ [IntegrationEvent.CONTENT_MARKER_REACHED]: CustomEvent<{ markerName: string; markerData: unknown; }>; /** * @inheritdoc IntegrationEvent.CONTENT_TIME_UPDATE * @eventProperty */ [IntegrationEvent.CONTENT_TIME_UPDATE]: CustomEvent | HTMLElementEventMap['timeupdate']; /** * @inheritdoc IntegrationEvent.CONTENT_SEEKING * @eventProperty */ [IntegrationEvent.CONTENT_SEEKING]: CustomEvent | HTMLElementEventMap['seeking']; /** * @inheritdoc IntegrationEvent.CONTENT_SEEKED * @eventProperty */ [IntegrationEvent.CONTENT_SEEKED]: CustomEvent | HTMLElementEventMap['seeked']; /** * @inheritdoc IntegrationEvent.CONTENT_PLAY * @eventProperty */ [IntegrationEvent.CONTENT_PLAY]: CustomEvent | HTMLElementEventMap['play']; /** * @inheritdoc IntegrationEvent.CONTENT_PAUSE * @eventProperty */ [IntegrationEvent.CONTENT_PAUSE]: CustomEvent | HTMLElementEventMap['pause']; /** * @inheritdoc IntegrationEvent.CONTENT_VOLUME_CHANGE * @eventProperty */ [IntegrationEvent.CONTENT_VOLUME_CHANGE]: CustomEvent | HTMLElementEventMap['volumechange']; /** * @inheritdoc IntegrationEvent.CONTENT_ENDED * @eventProperty */ [IntegrationEvent.CONTENT_ENDED]: CustomEvent | HTMLElementEventMap['ended']; /** * @inheritdoc IntegrationEvent.AD_IMPRESSION * @eventProperty */ [IntegrationEvent.AD_IMPRESSION]: CustomEvent; /** * @inheritdoc IntegrationEvent.AD_BUFFERING_START * @eventProperty */ [IntegrationEvent.AD_BUFFERING_START]: CustomEvent; /** * @inheritdoc IntegrationEvent.AD_BUFFERING_END * @eventProperty */ [IntegrationEvent.AD_BUFFERING_END]: CustomEvent; /** * @inheritdoc IntegrationEvent.AD_TIME_UPDATE * @eventProperty */ [IntegrationEvent.AD_TIME_UPDATE]: CustomEvent; /** * @inheritdoc IntegrationEvent.AD_VOLUME_CHANGE * @eventProperty */ [IntegrationEvent.AD_VOLUME_CHANGE]: CustomEvent; /** * @inheritdoc IntegrationEvent.AD_PAUSED * @eventProperty */ [IntegrationEvent.AD_PAUSED]: CustomEvent; /** * @inheritdoc IntegrationEvent.AD_RESUMED * @eventProperty */ [IntegrationEvent.AD_RESUMED]: CustomEvent; /** * @inheritdoc IntegrationEvent.AD_CLICK * @eventProperty */ [IntegrationEvent.AD_CLICK]: CustomEvent; /** * @inheritdoc IntegrationEvent.AD_SKIPPED * @eventProperty */ [IntegrationEvent.AD_SKIPPED]: CustomEvent; /** * @inheritdoc IntegrationEvent.AD_COMPLETE * @eventProperty */ [IntegrationEvent.AD_COMPLETE]: CustomEvent; } /** * 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 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 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" } /** * 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. */ placement?: string; /** * Allows the publisher to provide an optional ppid (publisher provided user id) attribute, which supplies additional contextual information for enhanced analytics tracking. */ ppid?: string; env?: 'stage' | 'local'; variant?: string; } 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; } 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 } 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; }; /** * Whether the media item is external. This automatically gets set when an external media item is assigned. * @ignore */ isExternal?: boolean; /** * Poster image of the media item. */ poster: string; /** * Sources of the media item. */ sources: MediaSource_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 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[]; /** 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; }; /** 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[]; /** * Advanced additional content branding (e.g. L around the video). * @ignore */ branding?: { backgroundColor?: string; cutInZoomAssetUrl?: string; cutInZoomHideTimeout?: number; logoUrl?: string; logoLinkUrl?: string; }; /** Livestream details */ livestream?: { /** UTC start time of the livestream in milliseconds */ startTime: number; /** UTC end time of the livestream in milliseconds */ endTime?: number; }; /** * Only relevant for glomex-internal use. Mark it to allow teaser experiments. * @ignore */ allowTeaserExperiments?: boolean; /** * URL of the API script that should be executed for this media-item. Script * must export `export function connectIntegration(glomexIntegration) {}` * * @ignore */ apiScriptUrl?: string; } /** * Abstract definition of a media item web component that can be used as a child of the {@link IntegrationElement}. * * @example of a custom media item * * It is possible to create more complex media items that query an own API. * * ```html * * * * * ``` */ export declare interface MediaItemElement extends HTMLElement { readonly data: MediaItem | MediaItem[] | Promise; } /** * Serializable error with the reason why a media item is not available. * `name` is set to `MediaItemError` internally. */ export declare interface MediaItemError { /** * @protected */ name?: 'MediaItemError'; /** Error code that gets handled by the player */ code: MediaItemErrorCode; /** Optional custom error message or code from the source system */ message?: string; } export declare enum MediaItemErrorCode { NOT_FOUND = "NotFound", NOT_AVAILABLE = "NotAvailable", GEOBLOCKED = "Geoblocked", YOUTH_PROTECTED = "YouthProtected" } declare type MediaSource_2 = MediaSourceBase | MediaSourceDrm | MediaSourceJoyn | MediaSourceDynamicContent; export { MediaSource_2 as MediaSource } declare interface MediaSourceBase { /** * Unique identifier of the media source. * * @defaultValue `V1StGXR8_Z5jdHi6B-myT` a generated identifier */ id?: string; /** * Mimetype of the media source. * * @defaultValue detected from file extension of given {@link src} or `undefined` */ mimetype?: Mimetype; /** * The source URL of this media source. */ src: string; /** * Until the media source is valid. Unix timestamp in milliseconds. */ validUntil?: number; /** * Content mode of the media source. * * @defaultValue `PlaybackMode.VOD` */ playbackMode?: PlaybackMode; } declare interface MediaSourceDrm extends MediaSourceBase { /** * DRM provider header name. Only relevant in combination with tokens. */ drmProviderHeaderName?: string; /** * Fairplay license URI. Or `undefined` when {@link fairplayToken} in combination with {@link drmProviderHeaderName} is provided. */ fairplayLicenseUri?: string; /** * FairPlay certificate URI. */ fairplayCertificateUri?: string; /** * FairPlay token. */ fairplayToken?: string; /** * Widevine license URI. Or `undefined` when {@link widevineToken} in combination with {@link drmProviderHeaderName} is provided. */ widevineLicenseUri?: string; /** * Widevine token. */ widevineToken?: string; /** * PlayReady license URI. Or `undefined` when {@link playreadyToken} in combination with {@link drmProviderHeaderName} is provided. */ playreadyLicenseUri?: string; /** * PlayReady token. */ playreadyToken?: string; } declare interface MediaSourceDynamicContent extends MediaSourceBase { mimetype: Mimetype.DYNAMIC_CONTENT; } declare interface MediaSourceJoyn { /** * Media / asset identifier of joyn. */ id: string; mimetype: Mimetype.JOYN; /** * User token used for authentication. */ token: string; /** {@inheritDoc MediaSourceBase.playbackMode} */ playbackMode?: PlaybackMode; /** * Allowing to enforce stage environment */ environment?: 'stg'; } export declare enum Mimetype { HLS = "application/vnd.apple.mpegurl", HLS_LEGACY = "application/x-mpegURL", DASH = "application/dash+xml", MP4 = "video/mp4", OGG = "video/ogg", WEBM = "video/webm", MP3 = "audio/mp3", AAC = "audio/aac", WAV = "audio/wav", OGG_AUDIO = "audio/ogg", MPEG_AUDIO = "audio/mpeg", DYNAMIC_CONTENT = "application/x-turbo-dynamic-content", JOYN = "application/x-joyn-source" } export declare interface Page { url: string; searchParams: Record; apexDomain: string; hostname: string; referrer: string; } export declare enum PlaybackMode { LIVE = "live", VOD = "vod", INTERACTIVE = "interactive", EMBED = "embed" } export declare enum PresentationMode { HIDDEN = "hidden", INLINE = "inline", DOCK = "dock", LIGHTBOX = "lightbox", FULLSCREEN = "fullscreen", AMP_DOCK = "amp-dock" } declare type PresentationModeString = `${PresentationMode}`; export declare enum ScriptType { INTEGRATION_CONFIGS = "application/glomex-integration-configs+json", EXTERNAL_MEDIA_ITEM = "application/glomex-external-media-item+json" } export { } declare global { interface HTMLElementTagNameMap { [ComponentName.INTEGRATION]: IntegrationElement; [ComponentName.GLOMEX_MEDIA_ITEM]: GlomexMediaItemElement; [ComponentName.EXTERNAL_MEDIA_ITEM]: ExternalMediaItemElement; } interface HTMLElementEventMap extends IntegrationElementEventMap {} }