@glomex/integration-react 1.1507.1 → 1.1508.1

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

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

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

@@ -4,5 +4,5 @@ import { ScriptType } from '@glomex/integration-web-component';
  * React component to define an external media item.
  */
 export const ExternalMediaItemReact = (mediaItem) => {
-    return (_jsx("glomex-external-media-item", { id: mediaItem.id, poster: mediaItem.poster, duration: mediaItem.duration, "channel-name": mediaItem.channel?.name, "channel-logo": mediaItem.channel?.logo, title: mediaItem.title, "aspect-ratio": mediaItem.aspectRatio, "minimum-age": mediaItem.minimumAge, "release-date": mediaItem.releaseDate, "has-product-placement": mediaItem.hasProductPlacement, children: mediaItem ? (_jsx("script", { type: ScriptType.EXTERNAL_MEDIA_ITEM, children: JSON.stringify(mediaItem) })) : null }));
+    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,9 +1,9 @@
-import { type GlomexMediaItemWithOverrides } from '@glomex/integration-web-component';
+import { type MediaItem } from '@glomex/integration-web-component';
 declare module 'react/jsx-runtime' {
     namespace JSX {
         interface IntrinsicElements {
             'glomex-media-item': JSX.IntrinsicElements['div'] & {
-                poster?: string;
+                environment?: string;
             };
         }
     }
@@ -11,7 +11,8 @@ declare module 'react/jsx-runtime' {
 /**
  * React component to define a glomex media item.
  */
-export declare const GlomexMediaItemReact: (item: {
+export declare const GlomexMediaItemReact: (props: {
     id: string;
-    overrides?: GlomexMediaItemWithOverrides["overrides"];
+    environment?: string;
+    item?: Partial<MediaItem>;
 }) => import("react/jsx-runtime").JSX.Element;

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

@@ -3,7 +3,7 @@ import { ScriptType } from '@glomex/integration-web-component';
 /**
  * React component to define a glomex media item.
  */
-export const GlomexMediaItemReact = (item) => {
-    const { id: mediaItemId, overrides: mediaItemOverrides } = item;
-    return (_jsx("glomex-media-item", { id: mediaItemId, ...(mediaItemOverrides?.title && { title: mediaItemOverrides.title }), ...(mediaItemOverrides?.poster && { poster: mediaItemOverrides.poster }), children: _jsx("script", { type: ScriptType.EXTERNAL_MEDIA_ITEM, children: JSON.stringify(mediaItemOverrides || {}) }) }));
+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/integration-react.d.ts

@@ -1,4 +1,4 @@
-import { type GlomexMediaItemWithOverrides, type IntegrationElement, type IntegrationProperties, type MediaItem } from '@glomex/integration-web-component';
+import { type IntegrationElement, type IntegrationProperties, type MediaItem, type MediaItemReference } from '@glomex/integration-web-component';
 import { type CSSProperties } from 'react';
 declare module 'react/jsx-runtime' {
     namespace JSX {
@@ -23,7 +23,7 @@ declare module 'react/jsx-runtime' {
  */
 export declare const Integration: import("react").ForwardRefExoticComponent<IntegrationProperties & {
     id?: string;
-    mediaItems?: (string | GlomexMediaItemWithOverrides | MediaItem)[];
+    mediaItems?: (MediaItem | MediaItemReference)[];
     preventLoadIntegration?: boolean;
     configs?: Record<string, unknown>;
     style?: CSSProperties;

package/dist/integration-react.js

@@ -1,13 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { ComponentName, getIntegrationCssUrl, loadIntegrationComponent, ScriptType } from '@glomex/integration-web-component';
+import { ComponentName, getIntegrationCssUrl, loadIntegrationComponent, normalizeMediaItem, ScriptType } from '@glomex/integration-web-component';
 import { forwardRef, useEffect, useImperativeHandle, useRef } from 'react';
 import { ExternalMediaItemReact } from './external-media-item-react.js';
 import { GlomexMediaItemReact } from './glomex-media-item-react.js';
-function isGlomexMediaItem(item) {
-    return (typeof item === 'object' &&
-        item !== null &&
-        ('overrides' in item || (Object.keys(item).length === 1 && 'id' in item)));
-}
+import { JoynMediaItemReact } from './joyn-media-item-react.js';
 /**
  * React component for the integration.
  *
@@ -20,14 +16,16 @@ export const Integration = forwardRef((props, ref) => {
         throw new Error('Cannot specify both mediaItems and playlistId');
     }
     const mediaItemComponents = (mediaItems || []).map((item, index) => {
-        const keyIndex = index + 1;
-        if (typeof item === 'string') {
-            return _jsx(GlomexMediaItemReact, { id: item }, `${item}-${keyIndex}`);
+        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);
         }
-        if (isGlomexMediaItem(item)) {
-            return (_jsx(GlomexMediaItemReact, { id: item.id, overrides: item.overrides }, `${item.id}-${keyIndex}`));
-        }
-        return _jsx(ExternalMediaItemReact, { ...item }, `${item.id}-${keyIndex}`);
     });
     useEffect(() => {
         if (preventLoadIntegration)

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

@@ -0,0 +1,18 @@
+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

@@ -0,0 +1,9 @@
+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) }) }));
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@glomex/integration-react",
-  "version": "1.1507.1",
+  "version": "1.1508.1",
   "description": "React component to integrate the glomex player",
   "documentation": "https://docs.glomex.com",
   "homepage": "https://glomex.com",
@@ -23,12 +23,12 @@
   ],
   "scripts": {
     "prepack": "npm run build",
-    "build": "rm -rf build && tsc --build",
+    "build": "rm -rf dist && tsc --build --force",
     "lint": "tsc --noEmit && biome ci",
     "watch": "tsc --build --watch"
   },
   "dependencies": {
-    "@glomex/integration-web-component": "1.1507.1"
+    "@glomex/integration-web-component": "1.1508.1"
   },
   "peerDependencies": {
     "preact": ">=10",
@@ -57,5 +57,5 @@
     "preact": "catalog:",
     "typescript": "catalog:"
   },
-  "gitHead": "07fe5c36d239ea603c322391ff72fc379ee5c041"
+  "gitHead": "b6ee0e2d31bcc5c9a2616cdbcea98ce1b2b7e1ea"
 }