@glomex/integration-web-component/build/index.d.ts

Web component and types to integrate the glomex player

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<string, boolean>;
    vendorLegitimateInterests?: Record<string, boolean>;
    purposeConsents?: Record<string, boolean>;
    purposeLegitimateInterests?: Record<string, boolean>;
    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<string, ExperimentVariant>;
    conditions: Record<string, unknown>;
}

declare interface ExperimentVariant {
    weight: number;
    contentOverride: Record<string, unknown>;
}

/**
 * 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>
 *  <!-- further media items -->
 * </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;
}

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' | 'isExternal'>>;
}

/**
 * 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;
    /**
     * 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<ImageBitmap>;
    /**
     * 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<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;
    }>;
    /**
     * @inheritdoc IntegrationEvent.CONTENT_SELECT
     * @eventProperty
     */
    [IntegrationEvent.CONTENT_SELECT]: CustomEvent<{
        sessionId: string;
        source: ContentSource;
    }>;
    /**
     * @inheritdoc IntegrationEvent.CONTENT_START
     * @eventProperty
     */
    [IntegrationEvent.CONTENT_START]: CustomEvent<void>;
    /**
     * @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;
    }>;
    /**
     * @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<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_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>;
}

/**
 * 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
 * <script>
 *   class CustomMediaItemElement extends HTMLElement {
 *     get data() {
 *       return fetch(`https://api.example.com/media/${this.getAttribute('id')}`)
 *       .then(response => response.json())
 *       .then((body) => ({
 *         id: this.getAttribute('id'),
 *         sources: body.sources,
 *         duration: body.duration,
 *         poster: body.poster,
 *         title: body.title
 *       }));
 *     }
 *   }
 *   window.customElements.define('custom-media-item', CustomMediaItemElement);
 * </script>
 * <glomex-integration
 *   integration-id="REPLACE_WITH_INTEGRATION_ID"
 * >
 *   <custom-media-item id="API_CONTENT_ID"></custom-media-item>
 * </glomex-integration>
 * ```
 */
export declare interface MediaItemElement extends HTMLElement {
    readonly data: MediaItem | MediaItem[] | Promise<MediaItem | MediaItem[]>;
}

/**
 * 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<string, string>;
    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 {}
}