@glomex/integration-react 1.1531.0 → 1.1532.0

package/dist/integration-react.d.ts

@@ -1,24 +1,50 @@
 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;
+    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': Omit<JSX.IntrinsicElements['div'], 'ref' | 'children'> & {
-                ref?: React.Ref<IntegrationElement | null>;
-                children?: React.ReactNode;
-                index?: number;
-                placement?: string;
-                'integration-id'?: string;
-                'playlist-id'?: string;
-                'top-level-iframe'?: boolean;
-                hidden?: boolean;
-            };
+            'glomex-integration': IntegrationIntrinsicProps;
+            'turbo-integration': IntegrationIntrinsicProps;
         }
     }
 }
 /**
  * React component for the 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.
+ *
+ * @example Default (glomex)
+ * ```tsx
+ * <Integration integrationId="my-integration">
+ *   <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 & {
@@ -27,6 +53,12 @@ export declare const Integration: import("react").ForwardRefExoticComponent<Inte
     preventLoadIntegration?: boolean;
     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;
 } & {
     children?: import("react").ReactNode | undefined;
 } & import("react").RefAttributes<IntegrationElement>>;
+export {};

package/dist/integration-react.js

@@ -1,17 +1,36 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { ComponentName, getIntegrationCssUrl, loadIntegrationComponent, normalizeMediaItem, ScriptType } from '@glomex/integration-web-component';
-import { forwardRef, useEffect, useImperativeHandle, useRef } from 'react';
+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';
 /**
  * React component for the 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.
+ *
+ * @example Default (glomex)
+ * ```tsx
+ * <Integration integrationId="my-integration">
+ *   <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, mediaItems, configs, preventLoadIntegration, extraContext, userLanguage, ...rest } = props;
+    const { children, integrationId, playlistId, index, hidden, topLevelIframe, placement, 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');
     }
@@ -30,8 +49,8 @@ export const Integration = forwardRef((props, ref) => {
     useEffect(() => {
         if (preventLoadIntegration)
             return;
-        loadIntegrationComponent();
-    }, [preventLoadIntegration]);
+        loadIntegrationComponent(tenant, env);
+    }, [preventLoadIntegration, tenant, env]);
     useImperativeHandle(ref, () => {
         const element = elementRef.current;
         element.extraContext = extraContext;
@@ -39,9 +58,30 @@ export const Integration = forwardRef((props, ref) => {
         element.ready =
             elementRef.current?.ready ||
                 new Promise((resolve) => window.customElements
-                    .whenDefined(ComponentName.INTEGRATION)
+                    .whenDefined(componentName)
                     .then(() => elementRef.current?.ready.then(() => resolve())));
         return element;
-    }, [extraContext]);
-    return (_jsxs(_Fragment, { children: [integrationId && _jsx("link", { rel: "stylesheet", href: getIntegrationCssUrl(integrationId) }), _jsxs("glomex-integration", { ref: elementRef, "integration-id": integrationId, "playlist-id": playlistId, index: index, hidden: hidden, "top-level-iframe": topLevelIframe, placement: placement, "user-language": userLanguage, ...rest, children: [mediaItemComponents, children, configs && (_jsx("script", { type: ScriptType.INTEGRATION_CONFIGS, children: JSON.stringify(configs) }))] })] }));
+    }, [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,
+        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));
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@glomex/integration-react",
-  "version": "1.1531.0",
+  "version": "1.1532.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": "workspace:*"
+    "@glomex/integration-web-component": "1.1532.0"
   },
   "peerDependencies": {
     "preact": ">=10",
@@ -56,5 +56,6 @@
     "@types/react-dom": "^19.2.2",
     "preact": "catalog:",
     "typescript": "catalog:"
-  }
+  },
+  "gitHead": "60743cdfa3c12ee68a9559f2a3d7af85c0ca8408"
 }