@glomex/integration-web-component 1.1297.1

package/README.md

@@ -0,0 +1,71 @@
+# @glomex/integration-web-component
+
+## Introduction
+
+`@glomex/integration-web-component` exposes a Web Component and types to easily integrate the glomex player. In order to use this component, you need to have a glomex account. You can get one by following the instructions in the [Getting Started](https://docs.glomex.com/publisher/getting-started) section.
+
+## About glomex
+
+[glomex](https://glomex.com) operates Germany’s largest marketplace for premium video content. Our platform connects publishers, content creators, and advertisers, enabling the seamless distribution of high-quality video content across the web.
+
+Our ecosystem is designed to create value for all participants:
+
+- **Publishers** gain access to premium video content and monetization opportunities
+- **Content Owners** receive wide distribution and revenue for their video assets
+- **Advertisers** reach targeted audiences across a network of quality websites
+
+## Usage
+
+### Loading & integrating the player
+
+For plain JavaScript projects, you can follow [this guide](https://docs.glomex.com/publisher/player/embed-code/advanced/javascript).
+You though can use the `@glomex/integration-web-component` helper to load the integration component and styles also in JavaScript projects.
+
+```ts
+import {
+  IntegrationEvent,
+  ComponentName,
+  loadIntegrationComponent,
+  loadIntegrationStyles
+} from '@glomex/integration-web-component';
+
+// Get the container element where the player will be placed
+const container = document.getElementById('player-container-on-site');
+const integrationId = 'FILL_IN_INTEGRATION_ID';
+const playlistId = 'FILL_IN_PLAYLIST_ID';
+// It makes sense to load integration css
+// as early as possible to reduce layout shifts.
+// You also can get the CSS URL with this helper:
+// `import { getIntegrationCssUrl } from '@glomex/integration/load';`
+loadIntegrationStyles(integrationId);
+// load the integration web component
+loadIntegrationComponent();
+// create the fully typed integration element
+const integration = document.createElement(ComponentName.INTEGRATION);
+integration.setAttribute('integration-id', integrationId);
+integration.setAttribute('playlist-id', playlistId);
+integration.addEventListener(IntegrationEvent.CONTENT_START, () => {
+  console.log('content start', integration.content);
+});
+// attach the integration element
+container.appendChild(integration);
+// wait until the integration was upgraded to access web component methods
+await window.customElements.whenDefined(ComponentName.INTEGRATION);
+integration.play();
+```
+
+### Implementing a public API script
+
+```ts
+import {
+  IntegrationEvent,
+  type ConnectIntegration
+} from '@glomex/integration-web-component';
+
+// with this you get a fully typed integration
+export const connectIntegration: ConnectIntegration = (integration) => {
+  integration.addEventListener(IntegrationEvent.CONTENT_PLAY, () => {
+    console.log('play', integration.content);
+  });
+};
+```

package/build/index.d.ts

@@ -0,0 +1,1044 @@
+
+
+export declare interface Ad {
+    id: string;
+    isLinear: boolean;
+    duration: number;
+    positionIndex: number;
+    breakIndex: number;
+    breakName: string;
+    mimetype: string;
+    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"
+}
+
+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;
+}
+
+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}, {@link MinimalMediaItem}, or array of {@link MediaItem} or {@link MinimalMediaItem}
+ * 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 MediaSource#src}
+     */
+    src: string;
+    /**
+     * {@inheritDoc MediaSource#mimetype}
+     */
+    mimetype?: MediaSource_2['mimetype'];
+    /**
+     * {@inheritDoc MediaItem#type}
+     */
+    type?: MediaItem['type'];
+    /**
+     * {@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(): MinimalMediaItem | 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 {
+    /**
+     * {@inheritDoc MediaItem#id}
+     */
+    id: string;
+    /**
+     * Overridden poster of the media item.
+     */
+    poster?: string;
+    /**
+     * Overridden title of the media item.
+     */
+    title: string;
+}
+
+/**
+ * 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 StreamType: typeof StreamType;
+    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;
+    /**
+     * Initiates playback of the media content.
+     */
+    play(): void;
+    /**
+     * Pauses the current media playback.
+     */
+    pause(): void;
+    /**
+     * Returns the current playback time (in seconds) of the media.
+     */
+    get currentTime(): number;
+    /**
+     * 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 is currently in a seeking state.
+     */
+    get seeking(): 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;
+    /**
+     * 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 {
+    /** @eventProperty */
+    ready: CustomEvent<unknown>;
+    /** @eventProperty */
+    integrationabort: CustomEvent<unknown & {
+        error: Error;
+    }>;
+    /** @eventProperty */
+    integrationadavailable: CustomEvent<unknown>;
+    /** @eventProperty */
+    integrationpassback: CustomEvent<unknown & {
+        reason: string;
+    }>;
+    /** @eventProperty */
+    userupdateconsent: CustomEvent<unknown>;
+    /** @eventProperty */
+    playlistupdate: CustomEvent<unknown>;
+    /** @eventProperty */
+    playersetpresentationmode: CustomEvent<unknown & {
+        mode: PresentationMode;
+    }>;
+    /** @eventProperty */
+    contentstart: CustomEvent<unknown>;
+    /** @eventProperty */
+    contentimpression: CustomEvent<unknown>;
+    /** @eventProperty */
+    contentstop: CustomEvent<unknown>;
+    /** @eventProperty */
+    contenterror: CustomEvent<unknown & {
+        error: MediaError_2 | MediaItemError;
+    }>;
+    /** @eventProperty */
+    contentmarkerreached: CustomEvent<unknown & {
+        markerName: string;
+        markerData: unknown;
+    }>;
+    /** @eventProperty */
+    timeupdate: CustomEvent<unknown> | HTMLElementEventMap['timeupdate'];
+    /** @eventProperty */
+    seeking: CustomEvent<unknown> | HTMLElementEventMap['seeking'];
+    /** @eventProperty */
+    seeked: CustomEvent<unknown> | HTMLElementEventMap['seeked'];
+    /** @eventProperty */
+    play: CustomEvent<unknown> | HTMLElementEventMap['play'];
+    /** @eventProperty */
+    pause: CustomEvent<unknown> | HTMLElementEventMap['pause'];
+    /** @eventProperty */
+    volumechange: CustomEvent<unknown> | HTMLElementEventMap['volumechange'];
+    /** @eventProperty */
+    ended: CustomEvent<unknown> | HTMLElementEventMap['ended'];
+    /** @eventProperty */
+    adimpression: CustomEvent<unknown>;
+    /** @eventProperty */
+    adtimeupdate: CustomEvent<unknown>;
+    /** @eventProperty */
+    advolumechange: CustomEvent<unknown>;
+    /** @eventProperty */
+    adpaused: CustomEvent<unknown>;
+    /** @eventProperty */
+    adresumed: CustomEvent<unknown>;
+    /** @eventProperty */
+    adclick: CustomEvent<unknown>;
+    /** @eventProperty */
+    adskipped: CustomEvent<unknown>;
+    /** @eventProperty */
+    adcomplete: CustomEvent<unknown>;
+}
+
+/**
+ * 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 {
+    /** @eventProperty */
+    READY = "ready",
+    /** @eventProperty */
+    INTEGRATION_ABORT = "integrationabort",
+    /** @eventProperty */
+    INTEGRATION_AD_AVAILABLE = "integrationadavailable",
+    /** @eventProperty */
+    INTEGRATION_PASSBACK = "integrationpassback",
+    /** @eventProperty */
+    USER_UPDATE_CONSENT = "userupdateconsent",
+    /** @eventProperty */
+    PLAYLIST_UPDATE = "playlistupdate",
+    /** @eventProperty */
+    PLAYER_SET_PRESENTATION_MODE = "playersetpresentationmode",
+    /** @eventProperty */
+    CONTENT_START = "contentstart",
+    /** @eventProperty */
+    CONTENT_IMPRESSION = "contentimpression",
+    /** @eventProperty */
+    CONTENT_STOP = "contentstop",
+    /** @eventProperty */
+    CONTENT_ERROR = "contenterror",
+    /** @eventProperty */
+    CONTENT_MARKER_REACHED = "contentmarkerreached",
+    /** @eventProperty */
+    CONTENT_TIME_UPDATE = "timeupdate",
+    /** @eventProperty */
+    CONTENT_SEEKING = "seeking",
+    /** @eventProperty */
+    CONTENT_SEEKED = "seeked",
+    /** @eventProperty */
+    CONTENT_PLAY = "play",
+    /** @eventProperty */
+    CONTENT_PAUSE = "pause",
+    /** @eventProperty */
+    CONTENT_VOLUME_CHANGE = "volumechange",
+    /** @eventProperty */
+    CONTENT_ENDED = "ended",
+    /** @eventProperty */
+    AD_IMPRESSION = "adimpression",
+    /** @eventProperty */
+    AD_TIME_UPDATE = "adtimeupdate",
+    /** @eventProperty */
+    AD_VOLUME_CHANGE = "advolumechange",
+    /** @eventProperty */
+    AD_PAUSED = "adpaused",
+    /** @eventProperty */
+    AD_RESUMED = "adresumed",
+    /** @eventProperty */
+    AD_CLICK = "adclick",
+    /** @eventProperty */
+    AD_SKIPPED = "adskipped",
+    /** @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;
+}
+
+export declare enum KnownMarkerName {
+    PREROLL = "preroll",
+    MIDROLL = "midroll",
+    POSTROLL = "postroll",
+    FIRST_QUARTILE = "contentFirstQuartile",
+    MIDPOINT = "contentMidpoint",
+    THIRD_QUARTILE = "contentThirdQuartile",
+    COMPLETE = "contentComplete",
+    STILL_INTERESTING = "stillInteresting"
+}
+
+export declare function loadIntegrationComponent(): Promise<unknown>;
+
+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 extends MinimalMediaItem {
+    /** @ignore */
+    ppsj: string;
+    /**
+     * Mark this media item as a recommendation.
+     */
+    isRecommendation?: boolean;
+    /** @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.
+     */
+    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;
+        /**
+         * The root `poster` is used
+         * @ignore
+         */
+        poster?: 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;
+        /**
+         * Can probably be removed because unused.
+         * @ignore
+         */
+        thumbnail?: string;
+        /** Teaser video URL which is used for previewing the media item for some integrations. */
+        video?: string;
+        /**
+         * The root `title` is used
+         *
+         * @ignore
+         */
+        title?: string;
+    };
+    /** @ignore */
+    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;
+    };
+    /**
+     * Details to show for the age rating (e.g. `['Alcohol']`)
+     */
+    ageRatingDetails?: string[];
+    /** Keywords of the media item */
+    keywords?: string[];
+    /** Show id and name of the media item */
+    show?: {
+        name: string;
+        id?: string;
+    };
+    /** Category id and name of the media item */
+    category?: {
+        name: string;
+        id?: string;
+    };
+    error?: MediaItemError;
+    /** @ignore */
+    experiments?: Experiment[];
+    /** @ignore */
+    branding?: {
+        backgroundColor?: string;
+        cutInZoomAssetUrl?: string;
+        cutInZoomHideTimeout?: number;
+        logoUrl?: string;
+        logoLinkUrl?: string;
+    };
+    /** @ignore */
+    tracking?: {
+        scriptUrl: string;
+        data?: {
+            episodeExternalId?: string;
+            showTitle?: string;
+            showId?: string;
+            onlineExclusive?: boolean;
+            channel?: string;
+        };
+    };
+    /** Livestream details */
+    livestream?: {
+        /** UTC start time of the livestream in milliseconds */
+        startTime: number;
+        /** UTC end time of the livestream in milliseconds */
+        endTime?: number;
+    };
+    /** @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;
+    /**
+     * An external episode identifier. Often the id the episode was imported from.
+     */
+    externalEpisodeId?: string;
+    /**
+     * An additional external show name. Often the name the show was imported from.
+     */
+    externalShowName?: string;
+    /**
+     * An additional external show identifier. Often the id the show was imported from.
+     */
+    externalShowId?: string;
+    /**
+     * An additional external channel name. Often the name the channel was imported from.
+     */
+    externalChannelName?: string;
+    /**
+     * Whether the media item is exclusive for the web.
+     */
+    isWebExclusive?: boolean;
+}
+
+/**
+ * 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 | MinimalMediaItem | (MediaItem | MinimalMediaItem)[] | Promise<MediaItem | MinimalMediaItem | (MediaItem | MinimalMediaItem)[]>;
+}
+
+/**
+ * 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 interface MediaSource_2 {
+    /**
+     * Unique identifier of the media source.
+     *
+     * @defaultValue `...` 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;
+    /**
+     * 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;
+}
+export { MediaSource_2 as MediaSource }
+
+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"
+}
+
+export declare interface MinimalMediaItem {
+    /**
+     * Unique identifier of the media item.
+     */
+    id: string;
+    /**
+     * 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;
+    /**
+     * Stream type of the media item.
+     *
+     * @defaultValue `StreamType.VOD`
+     */
+    type?: StreamType;
+    /**
+     * Language of the media item. 2-letter ISO language code.
+     *
+     * @defaultValue `de` (German)
+     */
+    language?: string;
+    /**
+     * IAB categories (as {@link iabCategoryTaxonomy}) of the media item.
+     */
+    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.
+     *
+     * @defaultValue `16:9`
+     */
+    aspectRatio?: string;
+    /**
+     * Minimum age to watch the media item.
+     *
+     * @defaultValue `0` (no minimum age)
+     */
+    minimumAge?: number;
+    /**
+     * Release date of the media item. Unix timestamp in milliseconds.
+     */
+    releaseDate?: number;
+    /**
+     * Time when the media item expires. Unix timestamp in milliseconds.
+     */
+    endDate?: number;
+    /**
+     * Whether the media item has product placements.
+     */
+    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']`)?
+     *
+     * @defaultValue `['all']` (worldwide)
+     */
+    regionsAllowed?: string[];
+}
+
+export declare interface Page {
+    url: string;
+    searchParams: Record<string, string>;
+    apexDomain: string;
+    hostname: string;
+    referrer: string;
+}
+
+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 enum StreamType {
+    LIVE = "live",
+    VOD = "vod",
+    LIVE_DRM = "live-drm",
+    VOD_DRM = "vod-drm",
+    DYNAMIC_CONTENT = "dynamic-content"
+}
+
+export { }
+
+declare global {
+  interface HTMLElementTagNameMap {
+    [ComponentName.INTEGRATION]: IntegrationElement;
+    [ComponentName.GLOMEX_MEDIA_ITEM]: GlomexMediaItemElement;
+    [ComponentName.EXTERNAL_MEDIA_ITEM]: ExternalMediaItemElement;
+  }
+  interface HTMLElementEventMap extends IntegrationElementEventMap {}
+}

package/build/index.js

@@ -0,0 +1 @@
+var e,t,n,o,a,r,i,E,T,d,s,N,l,_,p,c,m,I,A,O;(s=e||(e={})).DEFAULT="turbo-integration",s.SCRIPT="turbo-script",s.IFRAME="turbo-iframe",s.FULLPAGE="turbo-fullpage",s.AMP_VIDEO_IFRAME="turbo-amp-video-iframe",s.AMP_IFRAME="turbo-amp-iframe",(N=t||(t={})).INTEGRATION="glomex-integration",N.EXTERNAL_MEDIA_ITEM="glomex-external-media-item",N.GLOMEX_MEDIA_ITEM="glomex-media-item",(l=n||(n={})).INTEGRATION_CONFIGS="application/glomex-integration-configs+json",l.EXTERNAL_MEDIA_ITEM="application/glomex-external-media-item+json",(_=o||(o={})).HIDDEN="hidden",_.INLINE="inline",_.DOCK="dock",_.LIGHTBOX="lightbox",_.FULLSCREEN="fullscreen",_.AMP_DOCK="amp-dock",(p=a||(a={})).READY="ready",p.INTEGRATION_ABORT="integrationabort",p.INTEGRATION_AD_AVAILABLE="integrationadavailable",p.INTEGRATION_PASSBACK="integrationpassback",p.USER_UPDATE_CONSENT="userupdateconsent",p.PLAYLIST_UPDATE="playlistupdate",p.PLAYER_SET_PRESENTATION_MODE="playersetpresentationmode",p.CONTENT_START="contentstart",p.CONTENT_IMPRESSION="contentimpression",p.CONTENT_STOP="contentstop",p.CONTENT_ERROR="contenterror",p.CONTENT_MARKER_REACHED="contentmarkerreached",p.CONTENT_TIME_UPDATE="timeupdate",p.CONTENT_SEEKING="seeking",p.CONTENT_SEEKED="seeked",p.CONTENT_PLAY="play",p.CONTENT_PAUSE="pause",p.CONTENT_VOLUME_CHANGE="volumechange",p.CONTENT_ENDED="ended",p.AD_IMPRESSION="adimpression",p.AD_TIME_UPDATE="adtimeupdate",p.AD_VOLUME_CHANGE="advolumechange",p.AD_PAUSED="adpaused",p.AD_RESUMED="adresumed",p.AD_CLICK="adclick",p.AD_SKIPPED="adskipped",p.AD_COMPLETE="adcomplete",(c=r||(r={})).TIME_IN_SECONDS="time",c.PERCENT="percent",c.TIME_IN_SECONDS_RECURRING="timeRecurring",(m=i||(i={})).PREROLL="preroll",m.MIDROLL="midroll",m.POSTROLL="postroll",m.FIRST_QUARTILE="contentFirstQuartile",m.MIDPOINT="contentMidpoint",m.THIRD_QUARTILE="contentThirdQuartile",m.COMPLETE="contentComplete",m.STILL_INTERESTING="stillInteresting",(I=E||(E={})).NOT_FOUND="NotFound",I.NOT_AVAILABLE="NotAvailable",I.GEOBLOCKED="Geoblocked",I.YOUTH_PROTECTED="YouthProtected",(A=T||(T={})).HLS="application/vnd.apple.mpegurl",A.HLS_LEGACY="application/x-mpegURL",A.DASH="application/dash+xml",A.MP4="video/mp4",A.OGG="video/ogg",A.WEBM="video/webm",A.MP3="audio/mp3",A.AAC="audio/aac",A.WAV="audio/wav",A.OGG_AUDIO="audio/ogg",A.MPEG_AUDIO="audio/mpeg",A.DYNAMIC_CONTENT="application/x-turbo-dynamic-content",(O=d||(d={})).LIVE="live",O.VOD="vod",O.LIVE_DRM="live-drm",O.VOD_DRM="vod-drm",O.DYNAMIC_CONTENT="dynamic-content";let D="player.glomex.com",u=`https://${D}/integration/1/integration.js`;function C(e){return`https://${D}/variant/${e}/variant.css`}function M(){let e=document.querySelector(`script[src="${u}"]`);return e?Promise.resolve(e):new Promise((e,t)=>{let n=document.createElement("script");n.type="module",n.src=u,n.onload=()=>e(n),n.onerror=()=>t(Error(`Failed to load script ${u}`)),(document.head||document.body).appendChild(n)})}function R(e){if(document.querySelector(`link[href="${C(e)}"]`))return;let t=document.createElement("link");t.rel="stylesheet",t.href=C(e),(document.head||document.body).appendChild(t)}export{t as ComponentName,a as IntegrationEvent,i as KnownMarkerName,r as MarkerType,E as MediaItemErrorCode,T as Mimetype,o as PresentationMode,n as ScriptType,d as StreamType,C as getIntegrationCssUrl,M as loadIntegrationComponent,R as loadIntegrationStyles};

package/package.json

@@ -0,0 +1,28 @@
+{
+  "name": "@glomex/integration-web-component",
+  "version": "1.1297.1",
+  "description": "Web component and types to integrate the glomex player",
+  "type": "module",
+  "main": "./build/index.js",
+  "types": "./build/index.d.ts",
+  "files": [
+    "build/**/*.js",
+    "build/**/*.d.ts"
+  ],
+  "scripts": {
+    "prepare": "npm run build",
+    "build": "rm -rf build && tsc --build && rslib build",
+    "lint": "tsc --build && biome ci",
+    "watch": "tsc --build && rslib build --watch"
+  },
+  "devDependencies": {
+    "@biomejs/biome": "^1.9.4",
+    "@glomex/integration": "^1.1297.0",
+    "@rslib/core": "^0.5.4",
+    "typescript": "^5.8.2"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "gitHead": "1c5a80d615a212f04f3a5f14b7adf2e9af2ada29"
+}