@brightcove/components-embed-code-modal 1.0.7 → 1.0.8

package/src/js/components/ModalContainer.tsx

@@ -0,0 +1,367 @@
+import React, { useState, useCallback, useEffect, useMemo } from 'react';
+
+import { useTranslation } from 'react-i18next';
+import useGetPlayers from 'js/hooks/useGetPlayers';
+import { Modal, Flex, Button } from '@brightcove/studio-components';
+
+import {
+  EmbedCodeModalTypes,
+  PlayerPayload,
+  NoInteractivityPlayerModalTypes,
+  EmbedCodeProperties,
+  LivePayload,
+} from 'js/types/EmbedCodeModalProps';
+import { EmbedCodeModalProps } from 'js/EmbedCodeModal';
+import { addPluginsDataToPlayers } from 'js/utils/addPluginsDataToPlayers';
+import { PlayerSelectItem, PlayersObject } from 'js/types/players';
+import { createPlayer } from 'js/services/players-api';
+import { getStudioModule, getBrightcove, ROLES } from 'js/utils/util';
+import { DEFAULT_INTERACTIVITY_PLAYER } from 'js/constants/player';
+
+import css from 'styles/EmbedCodeModal.sass';
+import { VideoPlayer } from './VideoPlayer';
+import { PlayerPreview } from './PlayerPreview';
+import { getAccountId } from '../utils/call';
+import { NoPlayerModal } from './NoPlayerModal';
+import { PrismLiveModal } from './prism';
+
+interface ModalContainerProps extends EmbedCodeModalProps {
+  handleSetComponentKey: () => void;
+  handleSetHasCreatedPlayer: (value: boolean) => void;
+  hasCreatedPlayer: boolean;
+  embedCodeProperties?: EmbedCodeProperties;
+  isOutstreamPlayer?: boolean;
+  onDVRClick?: (newValue: boolean) => void;
+  dvrTime?: number;
+  showLowLatency?: boolean;
+  onLowLatencyClick?: (newValue: boolean) => void;
+  ssai?: boolean;
+  adConfigOptions?: Array<{ label: string; value: string }>;
+  onAdConfigChange?: (value: string) => void;
+  theme?: 'blueSteel' | 'prism';
+}
+
+export const ModalContainer = ({
+  handleSetComponentKey,
+  data,
+  embedCodeModalType = EmbedCodeModalTypes.VIDEO,
+  handleSetHasCreatedPlayer,
+  hasCreatedPlayer,
+  embedCodeProperties,
+  isOutstreamPlayer,
+  showDVR,
+  onDVRClick,
+  dvrTime,
+  showLowLatency,
+  onLowLatencyClick,
+  ssai,
+  adConfigOptions = [],
+  onAdConfigChange,
+  theme,
+}: ModalContainerProps) => {
+  const { t } = useTranslation();
+  const [isModalOpen, setIsModalOpen] = useState<boolean>(false);
+  const { isFetching, data: playersData } = useGetPlayers(
+    embedCodeModalType !== EmbedCodeModalTypes.PLAYER,
+  );
+  const [players, setPlayers] = useState<PlayersObject>({});
+  const [playerListForSelection, setPlayerListForSelection] = useState<
+    PlayerSelectItem[]
+  >([]);
+  const [hasPublishingRole, setHasPublishingRole] = useState(false);
+  const [buttonSpinner, setButtonSpinner] = useState(false);
+  const [adConfigValue, setAdConfigValue] = useState('');
+  const [hasInitialized, setHasInitialized] = useState(false);
+
+  const handleAdConfigChange = (value: string) => {
+    setAdConfigValue(value);
+    if (onAdConfigChange) {
+      onAdConfigChange(value);
+    }
+  };
+
+  useEffect(() => {
+    if (adConfigOptions.length > 0) {
+      const initialValue = adConfigOptions[0].value;
+
+      // Only initialize if we haven't initialized yet, or if the current value is not in the new options
+      if (
+        !hasInitialized ||
+        !adConfigOptions.some((option) => option.value === adConfigValue)
+      ) {
+        setAdConfigValue(initialValue);
+        setHasInitialized(true);
+
+        if (onAdConfigChange) {
+          onAdConfigChange(initialValue);
+        }
+      }
+    }
+  }, [adConfigOptions, hasInitialized, onAdConfigChange, adConfigValue]);
+
+  useEffect(() => {
+    const { roles } = getStudioModule().getCurrentUserAccount();
+    if (roles.length && roles.includes(ROLES.PUBLISHING)) {
+      setHasPublishingRole(true);
+    }
+  }, []);
+
+  useEffect(() => {
+    if (embedCodeModalType === EmbedCodeModalTypes.PLAYER) {
+      return;
+    }
+    if (!isFetching && playersData && (playersData?.items.length ?? 0) > 0) {
+      const { playerListForSelection, players = {} } =
+        addPluginsDataToPlayers(playersData);
+      let filteredPlayerListForSelection = playerListForSelection;
+
+      if (embedCodeModalType === EmbedCodeModalTypes.PROJECT) {
+        filteredPlayerListForSelection = playerListForSelection.filter(
+          (player) => players[player.value].hasInteractivityPlugin,
+        );
+      }
+
+      setPlayers(players);
+      setPlayerListForSelection(filteredPlayerListForSelection);
+    }
+  }, [isFetching, playersData, embedCodeModalType]);
+
+  const hasInteractivityEnabledPlayer = useMemo(
+    () =>
+      Object.values(players).some((player) => player.hasInteractivityPlugin),
+    [players],
+  );
+
+  useEffect(() => {
+    if (data) {
+      setIsModalOpen(true);
+    }
+  }, [data]);
+
+  const closeModal = useCallback(() => {
+    setIsModalOpen(false);
+    handleSetHasCreatedPlayer(false);
+  }, [handleSetHasCreatedPlayer]);
+
+  const createInteractivityPlayer = () => {
+    const { name, registry_id, version, options } =
+      DEFAULT_INTERACTIVITY_PLAYER;
+
+    setButtonSpinner(true);
+
+    const payload = {
+      data: {
+        name,
+        configuration: {
+          plugins: [
+            {
+              registry_id,
+              version,
+              options,
+            },
+          ],
+        },
+      },
+    };
+
+    createPlayer(payload)
+      .then((res) => {
+        if (res && res.id) {
+          handleSetHasCreatedPlayer(true);
+          handleSetComponentKey();
+        }
+      })
+      .catch((reason) => {
+        console.error(reason);
+        getBrightcove().Toaster.error({
+          title: t('createPlayerFailedTitle'),
+          message: t('createPlayerFailedMessage'),
+        });
+      })
+      .finally(() => {
+        setButtonSpinner(false);
+      });
+  };
+
+  let content: JSX.Element | null = null;
+  let modalTitle = t('modalHeader');
+  let isLargeModal = true;
+  let buttons = [
+    <Button
+      key={'close-button'}
+      text={t('done')}
+      onClick={closeModal}
+      testName={'close-modal-btn'}
+    />,
+  ];
+
+  if (
+    embedCodeModalType === EmbedCodeModalTypes.LIVE &&
+    theme === 'prism' &&
+    'videoId' in data
+  ) {
+    return (
+      <PrismLiveModal
+        isOpen={isModalOpen}
+        onClose={closeModal}
+        video={data as LivePayload}
+        players={players}
+        playerListForSelection={playerListForSelection}
+        showDVR={showDVR}
+        onDVRClick={onDVRClick}
+        dvrTime={dvrTime}
+        showLowLatency={showLowLatency}
+        onLowLatencyClick={onLowLatencyClick}
+        adConfigValue={adConfigValue}
+        onAdConfigChange={handleAdConfigChange}
+        ssai={ssai}
+        adConfigOptions={adConfigOptions}
+      />
+    );
+  }
+
+  switch (embedCodeModalType) {
+    case EmbedCodeModalTypes.LIVE:
+      content =
+        'videoId' in data ? (
+          <VideoPlayer
+            video={data}
+            embedCodeModalType={embedCodeModalType}
+            players={players}
+            playerListForSelection={playerListForSelection}
+            showDVR={showDVR}
+            onDVRClick={onDVRClick}
+            dvrTime={dvrTime}
+            showLowLatency={showLowLatency}
+            onLowLatencyClick={onLowLatencyClick}
+            adConfigValue={adConfigValue}
+            onAdConfigChange={handleAdConfigChange}
+            ssai={ssai}
+            adConfigOptions={adConfigOptions}
+          />
+        ) : null;
+      break;
+    case EmbedCodeModalTypes.VIDEO:
+      content =
+        'videoId' in data ? (
+          <VideoPlayer
+            video={data}
+            embedCodeModalType={embedCodeModalType}
+            players={players}
+            playerListForSelection={playerListForSelection}
+            showDVR={showDVR}
+            onDVRClick={onDVRClick}
+            dvrTime={dvrTime}
+            showLowLatency={showLowLatency}
+            onLowLatencyClick={onLowLatencyClick}
+          />
+        ) : null;
+      break;
+    case EmbedCodeModalTypes.PLAYER:
+      {
+        const accountId = data.accountId || getAccountId();
+        content =
+          'id' in data && accountId ? (
+            <PlayerPreview
+              {...(data as PlayerPayload)}
+              accountId={accountId}
+              embedCodeProperties={embedCodeProperties}
+              isOutstreamPlayer={isOutstreamPlayer}
+            />
+          ) : null;
+      }
+      break;
+    case EmbedCodeModalTypes.PROJECT:
+      if (!isFetching) {
+        if (!hasInteractivityEnabledPlayer && !hasPublishingRole) {
+          modalTitle = t('activateModal');
+          isLargeModal = false;
+          buttons = [
+            <Button
+              key={'close-button'}
+              text={t('close')}
+              onClick={closeModal}
+              testName={'close-modal-done-btn'}
+            />,
+          ];
+          content = (
+            <NoPlayerModal
+              modalType={NoInteractivityPlayerModalTypes.NO_PERMISSION}
+            />
+          );
+        } else if (!hasInteractivityEnabledPlayer) {
+          modalTitle = t('noPlayerModalHeader');
+          isLargeModal = false;
+          buttons = [
+            <Button
+              key={'cancel-button'}
+              text={t('cancel')}
+              onClick={closeModal}
+              testName={'cancel-button'}
+              look='tertiary'
+            />,
+            <Button
+              key={'create-player-button'}
+              text={t('createPlayerNow')}
+              spinner={buttonSpinner}
+              onClick={createInteractivityPlayer}
+              testName={'create-player-button'}
+            />,
+          ];
+          content = (
+            <NoPlayerModal
+              modalType={NoInteractivityPlayerModalTypes.NO_PLAYER}
+            />
+          );
+        } else {
+          content =
+            'videoId' in data && 'interactivityProjectId' in data ? (
+              <VideoPlayer
+                video={data}
+                embedCodeModalType={embedCodeModalType}
+                playerListForSelection={playerListForSelection}
+                players={players}
+                hasCreatedPlayer={hasCreatedPlayer}
+              />
+            ) : null;
+        }
+      } else {
+        content =
+          'videoId' in data && 'interactivityProjectId' in data ? (
+            <VideoPlayer
+              video={data}
+              embedCodeModalType={embedCodeModalType}
+              playerListForSelection={playerListForSelection}
+              players={players}
+              hasCreatedPlayer={hasCreatedPlayer}
+            />
+          ) : null;
+      }
+      break;
+    default: {
+      console.warn(`EmbedModal with ${embedCodeModalType} is not supported`);
+      content = null;
+      break;
+    }
+  }
+
+  if (!content) {
+    console.warn(
+      `EmbedModal called with wrong props for type: ${embedCodeModalType}`,
+    );
+    return null;
+  }
+
+  return (
+    <Modal
+      testName='embed-modal'
+      title={modalTitle}
+      isOpen={isModalOpen}
+      large={isLargeModal}
+      onClose={closeModal}
+      buttons={buttons}
+    >
+      <Flex className={css.videoDetailsContainer}>{content}</Flex>
+    </Modal>
+  );
+};

package/src/js/components/NoPlayerModal.tsx

@@ -0,0 +1,42 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { Flex } from '@brightcove/studio-components';
+import { getPlayerManagerModuleUrl } from 'js/utils/util';
+import { NoInteractivityPlayerModalTypes } from 'js/types/EmbedCodeModalProps';
+
+interface NoPlayerProps {
+  modalType: NoInteractivityPlayerModalTypes;
+}
+
+export const NoPlayerModal = ({ modalType }: NoPlayerProps) => {
+  const { t } = useTranslation();
+
+  const createPlayersModuleLink = (text: string) => {
+    return <a href={getPlayerManagerModuleUrl()}>{text}</a>;
+  };
+
+  return (
+    <Flex flexDirection='column'>
+      <p>
+        {modalType === NoInteractivityPlayerModalTypes.NO_PLAYER ? (
+          t('noPlayerModalContent1')
+        ) : (
+          <>
+            {t('activateModalContent1')}
+            {createPlayersModuleLink(t('activateModalContent2'))}.
+          </>
+        )}
+        <br />
+        {modalType === NoInteractivityPlayerModalTypes.NO_PLAYER
+          ? t('noPlayerModalContent2')
+          : null}
+      </p>
+
+      <>
+        {modalType === NoInteractivityPlayerModalTypes.NO_PLAYER ? (
+          <p>{createPlayersModuleLink(t('toPlayersModuleLink'))}</p>
+        ) : null}
+      </>
+    </Flex>
+  );
+};

package/src/js/components/PlayerPreview.tsx

@@ -0,0 +1,116 @@
+import React, { useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+import cx from 'classnames';
+import { Hideable } from '@brightcove/studio-components';
+import ReactPlayerLoader from '@brightcove/react-player-loader';
+
+import {
+  getPreviewPlayerUrl,
+  getUrlBase,
+  getVideoPreviewLink,
+} from 'js/utils/util';
+import {
+  bcHostedPlugins,
+  CAMPAIGN_PLUGIN_NAME,
+  VIEWER_ID_KEY_NAME,
+  BC_MAP_TRACKING_NAME,
+} from 'js/constants/pluginsRegistry';
+import { PlayerPayload } from '../types/EmbedCodeModalProps';
+
+import { TabsSection, VideoLinks } from 'js/components';
+
+import css from 'styles/EmbedCodeModal.sass';
+
+interface Plugin {
+  name: string;
+  options?: Record<string, unknown>;
+}
+
+export const PlayerPreview = ({
+  id,
+  configuration,
+  accountId = '',
+  embedCodeProperties,
+  isOutstreamPlayer,
+}: PlayerPayload) => {
+  const { t } = useTranslation();
+  const previewPlayerUrl = getPreviewPlayerUrl(accountId, id);
+  const playerUrl = getVideoPreviewLink({ accountId, playerId: id });
+
+  const {
+    hasCustomPlugins,
+    isCampaignPlayer,
+    isViewerIdSource,
+    isBcMapTracking,
+  } = useMemo((): {
+    isCampaignPlayer: boolean;
+    hasCustomPlugins: boolean;
+    isViewerIdSource: boolean;
+    isBcMapTracking: boolean;
+  } => {
+    let hasBCHostedPlugin = false;
+    let isCampaignPlayer = false;
+    let isViewerIdSource = false;
+    let isBcMapTracking = false;
+    let plugins: Plugin[] = [];
+
+    // TODO: refactor with addPluginsDataToPlayers function to reuse code
+    if (configuration) {
+      plugins = (configuration.plugins as Plugin[]) ?? plugins;
+      for (const plugin of plugins) {
+        const { name } = plugin;
+        hasBCHostedPlugin = bcHostedPlugins.includes(name);
+        isCampaignPlayer =
+          isCampaignPlayer || plugin.name === CAMPAIGN_PLUGIN_NAME;
+        isBcMapTracking =
+          isBcMapTracking || plugin.name === BC_MAP_TRACKING_NAME;
+      }
+      isViewerIdSource =
+        (configuration[VIEWER_ID_KEY_NAME] as boolean) || false;
+    }
+
+    return {
+      hasCustomPlugins: !hasBCHostedPlugin && plugins.length > 0,
+      isCampaignPlayer,
+      isViewerIdSource,
+      isBcMapTracking,
+    };
+  }, [configuration]);
+
+  return (
+    <>
+      <div className={css.leftContent}>
+        <ReactPlayerLoader
+          accountId={accountId}
+          baseUrl={getUrlBase()}
+          attrs={{ className: css.playerLoader }}
+          embedType='iframe'
+          refNode='player-container'
+          playerUrl={previewPlayerUrl}
+        />
+        <Hideable show={hasCustomPlugins}>
+          <span className={css.customPluginNotice}>
+            {t('customPluginNotice')}
+          </span>
+        </Hideable>
+        {isOutstreamPlayer ? null : (
+          <VideoLinks previewUrl={previewPlayerUrl} playerUrl={playerUrl} />
+        )}
+      </div>
+      <div
+        className={cx(css.rightContent, {
+          [css.rightContentFullWidth]: !!isOutstreamPlayer,
+        })}
+      >
+        <TabsSection
+          isCampaign={isCampaignPlayer}
+          isViewerIdSource={isViewerIdSource}
+          isBcMapTracking={isBcMapTracking}
+          playerId={id}
+          accountId={accountId}
+          embedCodeProperties={embedCodeProperties}
+        />
+      </div>
+    </>
+  );
+};

package/src/js/components/TabsHeader.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import { Flex, Tabs, TabList, Tab } from '@brightcove/studio-components';
+import { TabsSelectedId } from 'js/types/players';
+
+interface TabsHeaderProps {
+  currentTab: TabsSelectedId;
+  handleTabChange: () => void;
+  iframeLabel: string;
+  jsLabel: string;
+}
+export const TabsHeader = ({
+  currentTab,
+  handleTabChange,
+  iframeLabel,
+  jsLabel,
+}: TabsHeaderProps) => {
+  return (
+    <Flex justifyContent='space-between' alignItems='baseline'>
+      <Tabs selectedId={currentTab} onSelect={handleTabChange}>
+        <TabList>
+          <Tab tabId='iframe' testName={'iframe-tab'}>
+            {iframeLabel}
+          </Tab>
+          <Tab tabId='javascript' testName={'js-tab'}>
+            {jsLabel}
+          </Tab>
+        </TabList>
+      </Tabs>
+    </Flex>
+  );
+};

package/src/js/components/TabsSection.tsx

@@ -0,0 +1,74 @@
+import React, { useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { TabPanel } from '@brightcove/studio-components';
+import { TabsSelectedId } from 'js/types/players';
+import css from 'styles/EmbedCodeModal.sass';
+import { TabsHeader, EmbedCode } from 'js/components';
+import { EmbedCodeProperties } from 'js/types/EmbedCodeModalProps';
+
+export const TabsSection = ({
+  isCampaign,
+  isViewerIdSource,
+  isBcMapTracking,
+  ...rest
+}: {
+  playerId: string;
+  isCampaign: boolean;
+  isViewerIdSource: boolean;
+  isBcMapTracking: boolean;
+  videoId?: string;
+  accountId: string;
+  interactivityProjectId?: string;
+  livePlaybackToken?: string;
+  adConfigId?: string;
+  embedCodeProperties?: EmbedCodeProperties;
+}) => {
+  const { t } = useTranslation();
+  const [currentTab, setCurrentTab] = useState<TabsSelectedId>('iframe');
+
+  const isIframe = currentTab === 'iframe';
+
+  const handleTabChange = (id?: string | number) => setCurrentTab(id);
+
+  return (
+    <>
+      <TabsHeader
+        currentTab={currentTab}
+        handleTabChange={handleTabChange}
+        jsLabel={t('tabs.labels.javascript')}
+        iframeLabel={t('tabs.labels.iframe')}
+      />
+      <TabPanel
+        testName='embed-tab-content'
+        className={css.tabPanelContent}
+        render={() => {
+          if (isIframe) {
+            if (isCampaign) {
+              return (
+                <span className={css.redHelperText}>
+                  {t('tabs.helperTextWarning')}
+                </span>
+              );
+            } else if (isViewerIdSource) {
+              return (
+                <span className={css.redHelperText}>
+                  {t('tabs.viewerIdTextWarning')}
+                </span>
+              );
+            } else if (isBcMapTracking) {
+              return (
+                <span className={css.redHelperText}>
+                  {t('tabs.bcMapTrackingTextWarning')}
+                </span>
+              );
+            } else {
+              return <EmbedCode iframe={isIframe} {...rest} />;
+            }
+          } else {
+            return <EmbedCode iframe={isIframe} {...rest} />;
+          }
+        }}
+      />
+    </>
+  );
+};

package/src/js/components/TitleWithTooltip.tsx

@@ -0,0 +1,39 @@
+import React, { useEffect, useMemo, useState } from 'react';
+import { Flex, ToolTip } from '@brightcove/studio-components';
+import css from 'styles/EmbedCodeModal.sass';
+import { truncateVideoTitle } from '../utils/util';
+
+interface TitleWithTooltipProps {
+  name: string;
+  id: string;
+}
+export const TitleWithTooltip = ({ name, id }: TitleWithTooltipProps) => {
+  const [isOverflowing, setIsOverflowing] = useState(false);
+
+  const titleMemo = useMemo(
+    () => (name ? truncateVideoTitle(name) : ''),
+    [name],
+  );
+
+  useEffect(() => {
+    if (name) {
+      setIsOverflowing(titleMemo !== name);
+    }
+  }, [titleMemo, name]);
+
+  return (
+    <Flex flexDirection='column' className={css.mediaData}>
+      <ToolTip
+        placement='top'
+        portal
+        block
+        content={name}
+        active={isOverflowing}
+        testName='embed-video-tooltip'
+      >
+        <div className={css.mediaTitle}>{titleMemo}</div>
+      </ToolTip>
+      <div className={css.mediaId}>{id}</div>
+    </Flex>
+  );
+};