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

package/src/js/components/CustomSettingsDropdown.tsx

@@ -0,0 +1,184 @@
+import React, { useState } from 'react';
+import {
+  RadioGroup,
+  Select,
+  Input,
+  Icon,
+  ICONS,
+  Fadeable,
+} from '@brightcove/studio-components';
+import { useTranslation } from 'react-i18next';
+
+import css from 'styles/CustomSettingsDropdown.sass';
+import {
+  EmbedCodeAspectRatio,
+  EmbedCodeProperties,
+  EmbedCodeUnits,
+} from 'js/types/EmbedCodeModalProps';
+import {
+  calculateDimensions,
+  calculateHeight,
+  shouldUpdateWidth,
+} from 'js/utils/dimensions';
+
+export enum Sizing {
+  FIXED = 'Fixed',
+  RESPONSIVE = 'Responsive',
+}
+
+export const CustomSettingsDropdown = ({
+  setEmbedProperties,
+  embedProperties,
+}: {
+  embedProperties: EmbedCodeProperties;
+  setEmbedProperties: (value: EmbedCodeProperties) => void;
+}) => {
+  const { t } = useTranslation();
+  const [isHidden, setIsHidden] = useState<boolean>(true);
+  const [prevAspectRatio, setPrevAspectRatio] = useState(
+    embedProperties.aspectRatio,
+  );
+
+  const handlePropertiesUpdate = (
+    name: string,
+    value: string | boolean | number,
+  ) => {
+    if (name === 'aspectRatio') {
+      const calculateNewWidth = shouldUpdateWidth(
+        prevAspectRatio,
+        value as EmbedCodeAspectRatio,
+      );
+
+      setPrevAspectRatio(value as EmbedCodeAspectRatio);
+
+      const dimensions = calculateDimensions(
+        calculateNewWidth,
+        value as EmbedCodeAspectRatio,
+        embedProperties.width,
+        embedProperties.height,
+      );
+
+      setEmbedProperties({
+        ...embedProperties,
+        aspectRatio: value as EmbedCodeAspectRatio,
+        width: dimensions.width as number,
+        height: dimensions.height,
+      });
+
+      return;
+    } else if (
+      name === 'width' &&
+      embedProperties.aspectRatio !== EmbedCodeAspectRatio.CUSTOM
+    ) {
+      const height = calculateHeight(
+        value as number,
+        embedProperties.aspectRatio,
+      );
+
+      setEmbedProperties({
+        ...embedProperties,
+        width: value as number,
+        height,
+      });
+
+      return;
+    }
+
+    setEmbedProperties({
+      ...embedProperties,
+      [name]: value,
+    });
+  };
+
+  return (
+    <div className={css.featuresDropdown}>
+      <div className={css.topArea} onClick={() => setIsHidden(!isHidden)}>
+        <div className={css.title}>Custom settings</div>
+        <div className={css.right}>
+          <div className={css.description}>Sizing & ratio</div>
+          <Icon
+            name={isHidden ? ICONS.CARET_DOWN : ICONS.CARET_UP}
+            className={css.icon}
+          />
+        </div>
+      </div>
+      <Fadeable show={!isHidden} className={css.hiddenArea}>
+        <div className={css.hiddenAreaContainer}>
+          <RadioGroup
+            inline
+            name='sizing'
+            label={t('customSettings.sizing')}
+            value={
+              embedProperties.responsive ? Sizing.RESPONSIVE : Sizing.FIXED
+            }
+            options={[Sizing.FIXED, Sizing.RESPONSIVE]}
+            onChange={(value: string) =>
+              handlePropertiesUpdate('responsive', value === Sizing.RESPONSIVE)
+            }
+            testName='embed-sizing-radio-group'
+          />
+          <Select
+            label={t('customSettings.aspectRatio')}
+            value={embedProperties.aspectRatio}
+            options={[
+              EmbedCodeAspectRatio.SIXTEEN_NINE,
+              EmbedCodeAspectRatio.NINE_SIXTEEN,
+              EmbedCodeAspectRatio.ONE_ONE,
+              EmbedCodeAspectRatio.FOUR_THREE,
+              EmbedCodeAspectRatio.CUSTOM,
+            ]}
+            className={css.aspectRatioSelect}
+            onChange={(value: string) =>
+              handlePropertiesUpdate('aspectRatio', value)
+            }
+            testName='embed-aspect-ratio-select'
+          />
+          <div className={css.sizeEdit}>
+            <Input
+              label={t('customSettings.playerWidth')}
+              value={embedProperties.width}
+              onChange={(value: string) =>
+                handlePropertiesUpdate('width', value)
+              }
+              error={
+                embedProperties.width <= 0
+                  ? 'Can only be positive integers'
+                  : ''
+              }
+              testName='embed-width-input'
+            />
+            <Input
+              label={t('customSettings.playerHeight')}
+              value={embedProperties.height}
+              onChange={(value: string) =>
+                handlePropertiesUpdate('height', value)
+              }
+              disabled={
+                embedProperties.aspectRatio !== EmbedCodeAspectRatio.CUSTOM
+              }
+              error={
+                embedProperties.height <= 0
+                  ? 'Can only be positive integers'
+                  : ''
+              }
+              testName='embed-height-input'
+            />
+            <Select
+              label={t('customSettings.units')}
+              value={embedProperties.units}
+              options={[
+                EmbedCodeUnits.PX,
+                EmbedCodeUnits.EM,
+                EmbedCodeUnits.PERCENT,
+              ]}
+              onChange={(value: string) =>
+                handlePropertiesUpdate('units', value)
+              }
+              testName='embed-units-select'
+            />
+          </div>
+        </div>
+      </Fadeable>
+    </div>
+  );
+};

package/src/js/components/EmbedCopySection.tsx

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

@@ -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>
+  );
+};