@shopgate/pwa-common/components/EmbeddedMedia/index.js

Common library for the Shopgate Connect PWA.

import React, { Fragment, useMemo } from 'react';
import PropTypes from 'prop-types';
import Helmet from 'react-helmet';
import { embeddedMedia } from '@shopgate/pwa-common/collections';

/**
 * EmbeddedMedia component. Handles loading of media related scripts e.g. the Vimeo Player.
 * @returns {JSX}
 */
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
const EmbeddedMedia = ({
  children,
  cookieConsentSettings
}) => {
  const cookieConsent = useMemo(() => ({
    comfortCookiesAccepted: false,
    statisticsCookiesAccepted: false,
    ...cookieConsentSettings
  }), [cookieConsentSettings]);
  if (!embeddedMedia.getHasPendingProviders() || !cookieConsent.comfortCookiesAccepted) {
    return children;
  }

  // Get all pending providers
  const pendingProviders = Array.from(embeddedMedia.providers).filter(p => p.isPending);

  /**
   * Inject onLoad cb to script tags
   * @param {Element[]} scriptTags script tags to listen for
   * @param {MediaProvider} provider Provider
   */
  const updateProviderScripts = ({
    scriptTags
  }) => {
    if (scriptTags) {
      scriptTags.forEach(scriptTag => {
        const provider = pendingProviders.find(p => p.remoteScriptUrl === scriptTag.getAttribute('src'));
        // eslint-disable-next-line no-param-reassign
        scriptTag.onload = () => {
          provider.onScriptLoaded();
        };
      });
    }
  };
  const scripts = pendingProviders.map(provider => ({
    src: provider.remoteScriptUrl,
    type: 'text/javascript'
  }));
  return /*#__PURE__*/_jsxs(_Fragment, {
    children: [/*#__PURE__*/_jsx(Helmet, {
      script: scripts
      // Helmet doesn't support `onload` in script objects so we have to hack in our own
      ,
      onChangeClientState: (newState, addedTags) => updateProviderScripts(addedTags)
    }), children]
  });
};
EmbeddedMedia.defaultProps = {
  cookieConsentSettings: {
    comfortCookiesAccepted: false,
    statisticsCookiesAccepted: false
  }
};
export default EmbeddedMedia;