@brightcove/components-embed-code-modal 1.1.0 → 1.1.2

package/src/js/components/EmbedCopySection.tsx

@@ -1,130 +0,0 @@
-import React, { useEffect, useState } from 'react';
-import { useTranslation } from 'react-i18next';
-
-import brightcoveEmbedCode from '@brightcove/player-embed-code';
-import {
-  Flex,
-  FlexItem,
-  CopyField,
-  PlainTextArea,
-} from '@brightcove/studio-components';
-
-import { EmbedCodeProps } from 'js/types/EmbedCodeProps';
-import { getUrlBase, getBrightcove, decodeHtmlEntities } from 'js/utils/util';
-
-import css from 'styles/EmbedCode.sass';
-import {
-  EmbedCodeAspectRatio,
-  EmbedCodeUnits,
-} from 'js/types/EmbedCodeModalProps';
-
-interface EmbedCodeConfig {
-  accountId: string;
-  responsive: boolean;
-  width: number;
-  height: number;
-  iframe: boolean;
-  videoId?: string;
-  interactivityProjectId?: string;
-  playerId: string;
-  urlBase: string;
-  playlistIsHorizontal: boolean;
-  units: EmbedCodeUnits;
-  aspectRatio?: EmbedCodeAspectRatio;
-}
-
-const DEFAULT_HEIGHT = 540;
-const DEFAULT_WIDTH = 960;
-const defaultConfig = {
-  responsive: false,
-  width: DEFAULT_WIDTH,
-  height: DEFAULT_HEIGHT,
-  urlBase: getUrlBase(),
-  playlistIsHorizontal: true,
-  units: EmbedCodeUnits.PX,
-  aspectRatio: EmbedCodeAspectRatio.FLUID,
-};
-
-const createEmbedConfigObject = ({
-  embedCodeProperties,
-  accountId,
-  iframe,
-  videoId,
-  playerId,
-  interactivityProjectId,
-  livePlaybackToken,
-  adConfigId,
-}: EmbedCodeProps): EmbedCodeConfig => {
-  const config = {
-    accountId,
-    iframe,
-    videoId,
-    playerId,
-    livePlaybackToken,
-    adConfigId,
-    interactivityProjectId,
-  };
-  return Object.assign(
-    {},
-    { ...defaultConfig, ...config, ...embedCodeProperties },
-  );
-};
-
-export const EmbedCode = (config: EmbedCodeProps) => {
-  const { t } = useTranslation();
-  const [embedCode, setEmbedCode] = useState('');
-
-  useEffect(() => {
-    const embedConfigObj = createEmbedConfigObject(config);
-
-    if (embedConfigObj.aspectRatio) {
-      embedConfigObj.aspectRatio =
-        embedConfigObj.aspectRatio === EmbedCodeAspectRatio.CUSTOM
-          ? EmbedCodeAspectRatio.FLUID
-          : embedConfigObj.aspectRatio;
-    }
-
-    const embedCode = decodeHtmlEntities(brightcoveEmbedCode(embedConfigObj));
-    setEmbedCode(embedCode);
-  }, [config]);
-
-  const HelperTextNodeNew = (
-    <Flex>
-      <FlexItem flexGrow='1' className={css.helperText}>
-        {t('tabs.helperText')}
-      </FlexItem>
-    </Flex>
-  );
-
-  return (
-    <>
-      <CopyField
-        className={css.copyInput}
-        helperNode={HelperTextNodeNew}
-        Component={PlainTextArea}
-        componentProps={{
-          // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-          // @ts-ignore
-          disabled: true,
-          disableResizing: true,
-          className: css.textAreaDimensions,
-          onChange: () => void 0,
-        }}
-        onCopy={() => {
-          getBrightcove().Toaster.success({
-            title: t('toasterTitle'),
-            message: t('toasterMessage'),
-          });
-        }}
-        onError={() => {
-          getBrightcove().Toaster.error({
-            message: t('toasterErrorMessage'),
-          });
-        }}
-        value={embedCode}
-        hideButton={true}
-        testName='embed-copy-section'
-      />
-    </>
-  );
-};

package/src/js/components/ModalContainer.tsx

@@ -1,367 +0,0 @@
-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

@@ -1,42 +0,0 @@
-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

@@ -1,116 +0,0 @@
-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

@@ -1,31 +0,0 @@
-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>
-  );
-};