@glomex/integration-react/dist/integration-react.js

React component to integrate the glomex player

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 { 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)));
}
/**
 * React component for the 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, ...rest } = props;
    const elementRef = useRef(null);
    if (mediaItems && playlistId) {
        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}`);
        }
        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)
            return;
        loadIntegrationComponent();
    }, [preventLoadIntegration]);
    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.INTEGRATION).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, ...rest, children: [mediaItemComponents, children, configs && (_jsx("script", { type: ScriptType.INTEGRATION_CONFIGS, children: JSON.stringify(configs) }))] })] }));
});