@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, 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';
import { JoynMediaItemReact } from './joyn-media-item-react.js';
/**
 * 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, userLanguage, ...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 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();
    }, [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(() => 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) }))] })] }));
});