@turbo-player/integration-react - npm Package Compare versions

Comparing version 1.1581.5 to 1.1583.0

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

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

dist/external-media-item-react.js

+import { jsx as _jsx } from "react/jsx-runtime";
+import { ScriptType } from '@turbo-player/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 || []) }) }));
+};

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

+import { type MediaItem } from '@turbo-player/integration-web-component';
+declare module 'react/jsx-runtime' {
+    namespace JSX {
+        interface IntrinsicElements {
+            'glomex-media-item': import('react').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.Element;

dist/glomex-media-item-react.js

+import { jsx as _jsx } from "react/jsx-runtime";
+import { ScriptType } from '@turbo-player/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) }) }));
+};

dist/index.d.ts

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

dist/index.js

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

dist/integration-react.d.ts

+import { type ExtraContext, type HostContextData, type IntegrationElement, type IntegrationProperties, type MediaItem, type MediaItemReference, type PlayerConfigInput } from '@turbo-player/integration-web-component';
+import { type HTMLAttributes } from 'react';
+export type { ExtraContext };
+/**
+ * React wrapper for an integration custom element.
+ *
+ * Renders the custom element specified by the required `tagName` prop (matches the custom element tag name
+ * defined in the integration `moduleUrl` script).
+ * When a `moduleUrl` is provided, the integration component code is loaded automatically.
+ *
+ * @example
+ * ```tsx
+ * <Integration
+ *   tagName="my-integration"
+ *   moduleUrl="https://player.example.com/integration/1/integration.js"
+ *   integrationId="YOUR_INTEGRATION_ID"
+ * ></Integration>
+ * ```
+ *
+ * @see {@link IntegrationElementEventMap} for all available events.
+ */
+export declare const Integration: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLElement> & IntegrationProperties & {
+    /**
+     * URL to the integration module (JavaScript file).
+     * When provided, the integration component is loaded automatically.
+     */
+    moduleUrl?: string;
+    /** The custom element tag name, e.g. `"glomex-integration"` or `"joyn-integration"`. */
+    tagName: string;
+    /**
+     * CSS URL pattern for the integration styles.
+     * - If `undefined` it will auto determine the CSS URL
+     * - If `false`: CSS preloading is explicitly disabled.
+     * - If a string: that URL is used for CSS preloading. The string can contain an `{id}` placeholder
+     *   which gets replaced with the integration ID.
+     */
+    stylesUrl?: string | false;
+    /** Media items to render as a playlist. Cannot be combined with `playlistId`. */
+    mediaItems?: (MediaItem | MediaItemReference)[];
+    /** Inline player config. */
+    config?: PlayerConfigInput;
+    /** Context data forwarded directly to {@link HostContext.set}. */
+    hostContextData?: HostContextData;
+} & {
+    children?: import("react").ReactNode | undefined;
+} & import("react").RefAttributes<IntegrationElement>>;

dist/integration-react.js

+import { jsx as _jsx } from "react/jsx-runtime";
+import { createIntegrationClient, normalizeMediaItem, ScriptType } from '@turbo-player/integration-web-component';
+import { createElement, Fragment, forwardRef, useEffect, useImperativeHandle, useMemo, 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 wrapper for an integration custom element.
+ *
+ * Renders the custom element specified by the required `tagName` prop (matches the custom element tag name
+ * defined in the integration `moduleUrl` script).
+ * When a `moduleUrl` is provided, the integration component code is loaded automatically.
+ *
+ * @example
+ * ```tsx
+ * <Integration
+ *   tagName="my-integration"
+ *   moduleUrl="https://player.example.com/integration/1/integration.js"
+ *   integrationId="YOUR_INTEGRATION_ID"
+ * ></Integration>
+ * ```
+ *
+ * @see {@link IntegrationElementEventMap} for all available events.
+ */
+export const Integration = forwardRef((props, ref) => {
+    const { children, integrationId, moduleUrl, tagName, stylesUrl, index, hidden, topLevelIframe, crossorigin, placement, schain, env, mediaItems, config, extraContext, userLanguage, hostContextData, variant, ...rest } = props;
+    const elementRef = useRef(null);
+    const integrationClient = useMemo(() => createIntegrationClient({
+        moduleUrl,
+        tagName,
+        stylesUrl
+    }), [moduleUrl, tagName, stylesUrl]);
+    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 (!moduleUrl)
+            return;
+        integrationClient.loadComponent();
+    }, [moduleUrl, integrationClient]);
+    useImperativeHandle(ref, () => {
+        const element = elementRef.current;
+        // patch ready when integration element was not upgraded yet
+        element.ready =
+            elementRef.current?.ready ||
+                new Promise((resolve) => window.customElements.whenDefined(tagName).then(() => {
+                    const el = elementRef.current;
+                    el?.ready?.then(() => resolve());
+                }));
+        return element;
+    }, [tagName]);
+    // Assign via JS property: React would stringify unknown object props as attributes ("[object Object]").
+    // tagName is included in deps so the effect re-runs when a new element instance is mounted.
+    useEffect(() => {
+        if (elementRef.current) {
+            elementRef.current.extraContext = extraContext;
+        }
+    }, [extraContext, tagName]);
+    useEffect(() => {
+        if (hostContextData) {
+            let cancelled = false;
+            integrationClient
+                .getHostContext()
+                .then((hostContext) => {
+                if (!cancelled)
+                    hostContext.set(hostContextData);
+            })
+                .catch(() => {
+                // Silently ignore. `getHostContext()` internally awaits
+                // `customElements.whenDefined(tagName)` (which never rejects, but
+                // will pend forever for an unknown tagName) and then reads the static
+                // `hostContext` property. The only realistic rejection is a version
+                // mismatch where the custom element exists but does not expose a
+                // `hostContext` property.
+            });
+            return () => {
+                cancelled = true;
+            };
+        }
+    }, [hostContextData, integrationClient]);
+    const cssUrl = integrationId ? integrationClient.getCssUrl(integrationId) : undefined;
+    // extraContext and hostContextData are set via useEffect above to avoid attribute stringification.
+    const elementProps = {
+        ref: elementRef,
+        'integration-id': integrationId,
+        index,
+        hidden,
+        'top-level-iframe': topLevelIframe,
+        crossorigin,
+        placement,
+        schain,
+        env,
+        variant,
+        'user-language': userLanguage,
+        ...rest
+    };
+    // The `stylesUrl` prop takes lower priority than `config.developmentFlags.stylesUrl`
+    // (both are external inputs). Only inject it when the prop is provided and the
+    // config does not already carry its own value.
+    const mergedConfig = config || stylesUrl
+        ? {
+            ...config,
+            ...(config?.developmentFlags || stylesUrl
+                ? {
+                    developmentFlags: {
+                        ...(stylesUrl ? { stylesUrl } : {}),
+                        ...(config?.developmentFlags || {})
+                    }
+                }
+                : {})
+        }
+        : undefined;
+    const elementChildren = [
+        ...mediaItemComponents,
+        children,
+        mergedConfig
+            ? createElement('script', { type: ScriptType.PLAYER_CONFIG }, JSON.stringify(mergedConfig))
+            : null
+    ];
+    return createElement(Fragment, null, cssUrl ? createElement('link', { rel: 'stylesheet', href: cssUrl }) : null, createElement(tagName, elementProps, ...elementChildren));
+});

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

+import { type MediaItem } from '@turbo-player/integration-web-component';
+declare module 'react/jsx-runtime' {
+    namespace JSX {
+        interface IntrinsicElements {
+            'joyn-media-item': import('react').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.Element;

dist/joyn-media-item-react.js

+import { jsx as _jsx } from "react/jsx-runtime";
+import { ScriptType } from '@turbo-player/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.json

 {
   "name": "@turbo-player/integration-react",
-  "version": "1.1581.5",
+  "version": "1.1583.0",
   "description": "React component to integrate the turbo player",
@@ -29,3 +29,3 @@ "keywords": [
   "dependencies": {
-    "@turbo-player/integration-web-component": "1.1581.5"
+    "@turbo-player/integration-web-component": "1.1583.0"
   },
@@ -59,3 +59,3 @@ "peerDependencies": {
   },
-  "gitHead": "2568a38afffc541e7d208559aa9c2ad8b8690856"
+  "gitHead": "eb72a890701ad27eba03a424799949fc764b81d4"
 }

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Fixed alerts

Empty package

Supply chain risk

Package does not contain any code. It may be removed, is name squatting, or the result of a faulty package publish.

Improved metrics

Total package byte prevSize

15957

216.17%

Number of package files

13

333.33%

Lines of code

257

Infinity%

Dependency changes

• + Added

  @turbo-player/integration-web-component@1.1583.0
  (transitive)

• - Removed

  @turbo-player/integration-web-component@1.1581.5
  (transitive)

• Updated

  @turbo-player/integration-web-component@1.1583.0