@glomex/integration-react 1.1544.1 → 1.1547.0

package/dist/index.d.ts

@@ -1,2 +1,2 @@
-export * from '@glomex/integration-web-component';
+export * from '@turbo-player/integration-react';
 export { Integration } from './integration-react.js';

package/dist/index.js

@@ -1,2 +1,2 @@
-export * from '@glomex/integration-web-component';
+export * from '@turbo-player/integration-react';
 export { Integration } from './integration-react.js';

package/dist/integration-react.d.ts

@@ -1,65 +1,35 @@
-import { type IntegrationElement, type IntegrationProperties, type MediaItem, type MediaItemReference } from '@glomex/integration-web-component';
-import { type CSSProperties } from 'react';
-type IntegrationIntrinsicProps = Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, 'ref' | 'children'> & {
-    ref?: React.Ref<IntegrationElement | null>;
-    children?: React.ReactNode;
-    index?: number;
-    placement?: string;
-    schain?: string;
-    tenant?: string;
-    'integration-id'?: string;
-    'playlist-id'?: string;
-    'top-level-iframe'?: boolean;
-    'user-language'?: string;
-    'ad-player'?: string;
-    env?: string;
-    variant?: string;
-    crossorigin?: string;
-    hidden?: boolean;
-};
-declare module 'react/jsx-runtime' {
-    namespace JSX {
-        interface IntrinsicElements {
-            'glomex-integration': IntegrationIntrinsicProps;
-            'turbo-integration': IntegrationIntrinsicProps;
-        }
-    }
-}
+import { type IntegrationElement } from '@turbo-player/integration-react';
 /**
- * React component for the integration.
+ * React component for the glomex integration.
  *
- * By default renders a `<glomex-integration>` custom element (tenant `"glomex"`).
- * When `tenant="joyn"` is passed, renders a `<turbo-integration>` element instead
- * and loads scripts/CSS from the joyn CDN.
+ * Renders a `<glomex-integration>` custom element and loads
+ * scripts/CSS from the glomex CDN.
  *
- * @example Default (glomex)
+ * @example
  * ```tsx
- * <Integration integrationId="my-integration">
+ * <Integration integrationId="your-integration-id">
  *   <glomex-media-item id="MEDIA_ID" />
  * </Integration>
  * ```
  *
- * @example Joyn tenant (stage)
- * ```tsx
- * <Integration tenant="joyn" env="stage" integrationId="joyn-vod">
- *   <joyn-media-item id="MEDIA_ID" />
- * </Integration>
- * ```
- *
  * @see {@link IntegrationElementEventMap} for all available events.
  */
-export declare const Integration: import("react").ForwardRefExoticComponent<IntegrationProperties & {
+export declare const Integration: import("react").ForwardRefExoticComponent<Omit<import("react").HTMLAttributes<HTMLElement> & import("@turbo-player/integration-react").IntegrationProperties & {
     id?: string;
-    mediaItems?: (MediaItem | MediaItemReference)[];
-    preventLoadIntegration?: boolean;
+    moduleUrl?: string;
+    tagName: string;
+    stylesUrl?: string;
+    mediaItems?: (import("@turbo-player/integration-react").MediaItem | import("@turbo-player/integration-react").MediaItemReference)[];
     configs?: Record<string, unknown>;
-    style?: CSSProperties;
-    /**
-     * Override the custom element tag name (e.g. `'turbo-integration'`).
-     * When omitted the tag is derived from the `tenant` prop.
-     */
-    componentName?: string;
+    sharedContextData?: import("@turbo-player/integration-react").SharedContextData;
 } & {
     children?: import("react").ReactNode | undefined;
+} & import("react").RefAttributes<IntegrationElement>, "tagName" | "ref"> & {
+    /**
+     * Override the custom element tag name rendered by the integration.
+     * Defaults to `'glomex-integration'`.
+     *
+     * @example 'your-integration'
+     */
+    tagName?: string;
 } & import("react").RefAttributes<IntegrationElement>>;
-export {};

package/dist/integration-react.js

@@ -1,88 +1,25 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { getIntegrationComponentName, getIntegrationCssUrl, loadIntegrationComponent, normalizeMediaItem, ScriptType } from '@glomex/integration-web-component';
-import { createElement, Fragment, forwardRef, useEffect, useImperativeHandle, useRef } from 'react';
-import { ExternalMediaItemReact } from './external-media-item-react.js';
-import { GlomexMediaItemReact } from './glomex-media-item-react.js';
-import { JoynMediaItemReact } from './joyn-media-item-react.js';
+import { Integration as TurboIntegration } from '@turbo-player/integration-react';
+import { forwardRef } from 'react';
+const MODULE_URL = 'https://player.glomex.com/integration/1/integration.js';
+const STYLES_URL = 'https://player.glomex.com/variant/{id}/variant.css';
+const TAG_NAME = 'glomex-integration';
 /**
- * React component for the integration.
+ * React component for the glomex integration.
  *
- * By default renders a `<glomex-integration>` custom element (tenant `"glomex"`).
- * When `tenant="joyn"` is passed, renders a `<turbo-integration>` element instead
- * and loads scripts/CSS from the joyn CDN.
+ * Renders a `<glomex-integration>` custom element and loads
+ * scripts/CSS from the glomex CDN.
  *
- * @example Default (glomex)
+ * @example
  * ```tsx
- * <Integration integrationId="my-integration">
+ * <Integration integrationId="your-integration-id">
  *   <glomex-media-item id="MEDIA_ID" />
  * </Integration>
  * ```
  *
- * @example Joyn tenant (stage)
- * ```tsx
- * <Integration tenant="joyn" env="stage" integrationId="joyn-vod">
- *   <joyn-media-item id="MEDIA_ID" />
- * </Integration>
- * ```
- *
  * @see {@link IntegrationElementEventMap} for all available events.
  */
 export const Integration = forwardRef((props, ref) => {
-    const { children, integrationId, playlistId, index, hidden, topLevelIframe, placement, schain, tenant, env, mediaItems, configs, preventLoadIntegration, extraContext, userLanguage, componentName: componentNameOverride, ...rest } = props;
-    const elementRef = useRef(null);
-    const componentName = componentNameOverride || getIntegrationComponentName(tenant);
-    if (mediaItems && playlistId) {
-        throw new Error('Cannot specify both mediaItems and playlistId');
-    }
-    const mediaItemComponents = (mediaItems || []).map((item, index) => {
-        const ref = normalizeMediaItem(item);
-        const key = `${ref.id}-${index + 1}`;
-        switch (ref.provider) {
-            case 'glomex':
-                return (_jsx(GlomexMediaItemReact, { id: ref.id, environment: ref.environment, item: ref.item }, key));
-            case 'joyn':
-                return (_jsx(JoynMediaItemReact, { id: ref.id, environment: ref.environment, item: ref.item }, key));
-            default:
-                return _jsx(ExternalMediaItemReact, { ...ref.item }, key);
-        }
-    });
-    useEffect(() => {
-        if (preventLoadIntegration)
-            return;
-        loadIntegrationComponent(tenant, env);
-    }, [preventLoadIntegration, tenant, env]);
-    useImperativeHandle(ref, () => {
-        const element = elementRef.current;
-        element.extraContext = extraContext;
-        // patch ready when integration element was not upgraded yet
-        element.ready =
-            elementRef.current?.ready ||
-                new Promise((resolve) => window.customElements
-                    .whenDefined(componentName)
-                    .then(() => elementRef.current?.ready.then(() => resolve())));
-        return element;
-    }, [extraContext, componentName]);
-    const cssUrl = integrationId ? getIntegrationCssUrl(integrationId, tenant, env) : undefined;
-    const elementProps = {
-        ref: elementRef,
-        'integration-id': integrationId,
-        'playlist-id': playlistId,
-        index,
-        hidden,
-        'top-level-iframe': topLevelIframe,
-        placement,
-        schain,
-        tenant,
-        env,
-        'user-language': userLanguage,
-        ...rest
-    };
-    const elementChildren = [
-        ...mediaItemComponents,
-        children,
-        configs
-            ? createElement('script', { type: ScriptType.INTEGRATION_CONFIGS }, JSON.stringify(configs))
-            : null
-    ];
-    return createElement(Fragment, null, cssUrl ? createElement('link', { rel: 'stylesheet', href: cssUrl }) : null, createElement(componentName, elementProps, ...elementChildren));
+    const { tagName, stylesUrl, moduleUrl, ...rest } = props;
+    return (_jsx(TurboIntegration, { ref: ref, tagName: tagName ?? TAG_NAME, moduleUrl: moduleUrl ? moduleUrl : MODULE_URL, stylesUrl: stylesUrl ?? STYLES_URL, ...rest }));
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@glomex/integration-react",
-  "version": "1.1544.1",
+  "version": "1.1547.0",
   "description": "React component to integrate the glomex player",
   "documentation": "https://docs.glomex.com",
   "homepage": "https://glomex.com",
@@ -28,7 +28,7 @@
     "watch": "tsc --build --watch"
   },
   "dependencies": {
-    "@glomex/integration-web-component": "1.1544.1"
+    "@turbo-player/integration-react": "1.1547.0"
   },
   "peerDependencies": {
     "preact": ">=10",
@@ -57,5 +57,5 @@
     "preact": "catalog:",
     "typescript": "catalog:"
   },
-  "gitHead": "82c04eec4783512f0249d25ae4f6af11f6608b72"
+  "gitHead": "ae6260568f515b6806d9b486876886f1f842e98d"
 }

package/dist/external-media-item-react.d.ts

@@ -1,15 +0,0 @@
-import { type MediaItem } from '@glomex/integration-web-component';
-declare module 'react/jsx-runtime' {
-    namespace JSX {
-        interface IntrinsicElements {
-            'external-media-item': JSX.IntrinsicElements['div'] & {
-                poster?: string;
-                duration?: number;
-            };
-        }
-    }
-}
-/**
- * React component to define an external media item.
- */
-export declare const ExternalMediaItemReact: (mediaItem?: MediaItem) => import("react/jsx-runtime").JSX.Element;

package/dist/external-media-item-react.js

@@ -1,8 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { ScriptType } from '@glomex/integration-web-component';
-/**
- * React component to define an external media item.
- */
-export const ExternalMediaItemReact = (mediaItem) => {
-    return (_jsx("external-media-item", { children: _jsx("script", { type: ScriptType.EXTERNAL_MEDIA_ITEM, children: JSON.stringify(mediaItem || []) }) }));
-};

package/dist/glomex-media-item-react.d.ts

@@ -1,18 +0,0 @@
-import { type MediaItem } from '@glomex/integration-web-component';
-declare module 'react/jsx-runtime' {
-    namespace JSX {
-        interface IntrinsicElements {
-            'glomex-media-item': JSX.IntrinsicElements['div'] & {
-                environment?: string;
-            };
-        }
-    }
-}
-/**
- * React component to define a glomex media item.
- */
-export declare const GlomexMediaItemReact: (props: {
-    id: string;
-    environment?: string;
-    item?: Partial<MediaItem>;
-}) => import("react/jsx-runtime").JSX.Element;

package/dist/glomex-media-item-react.js

@@ -1,9 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { ScriptType } from '@glomex/integration-web-component';
-/**
- * React component to define a glomex media item.
- */
-export const GlomexMediaItemReact = (props) => {
-    const { id: mediaItemId, item } = props;
-    return (_jsx("glomex-media-item", { id: mediaItemId, environment: props.environment, children: item && _jsx("script", { type: ScriptType.EXTERNAL_MEDIA_ITEM, children: JSON.stringify(item) }) }));
-};

package/dist/joyn-media-item-react.d.ts

@@ -1,18 +0,0 @@
-import { type MediaItem } from '@glomex/integration-web-component';
-declare module 'react/jsx-runtime' {
-    namespace JSX {
-        interface IntrinsicElements {
-            'joyn-media-item': JSX.IntrinsicElements['div'] & {
-                environment?: string;
-            };
-        }
-    }
-}
-/**
- * React component to define a glomex media item.
- */
-export declare const JoynMediaItemReact: (props: {
-    id: string;
-    environment?: string;
-    item?: Partial<MediaItem>;
-}) => import("react/jsx-runtime").JSX.Element;

package/dist/joyn-media-item-react.js

@@ -1,9 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { ScriptType } from '@glomex/integration-web-component';
-/**
- * React component to define a glomex media item.
- */
-export const JoynMediaItemReact = (props) => {
-    const { id: mediaItemId, item } = props;
-    return (_jsx("joyn-media-item", { id: mediaItemId, environment: props.environment, children: item && _jsx("script", { type: ScriptType.EXTERNAL_MEDIA_ITEM, children: JSON.stringify(item) }) }));
-};