@brightcove/components-embed-code-modal 0.8.1 → 0.8.3

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,274 @@
+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,
+} 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';
+
+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;
+}
+
+export const ModalContainer = ({
+  handleSetComponentKey,
+  data,
+  embedCodeModalType = EmbedCodeModalTypes.VIDEO,
+  handleSetHasCreatedPlayer,
+  hasCreatedPlayer,
+  embedCodeProperties,
+  isOutstreamPlayer,
+  showDVR,
+  onDVRClick,
+  dvrTime,
+  showLowLatency,
+  onLowLatencyClick,
+}: 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);
+
+  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 (!isFetching) {
+    switch (embedCodeModalType) {
+      case EmbedCodeModalTypes.LIVE:
+      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 (!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;
+        }
+        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>
+  );
+};