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

package/scripts/create-dist-pkg-prod.js

@@ -1,18 +0,0 @@
-const fs = require('fs');
-const path = require('path');
-const pkg = require('../package.json');
-
-const BUILD_DIR = path.resolve(__dirname, '..', 'build');
-
-pkg.name = '@brightcove/components-embed-code-modal'
-pkg.main = './index.js';
-pkg.module = './index.js';
-
-delete pkg.scripts.prepare;
-delete pkg.scripts['lint:staged'];
-delete pkg['lint-staged'];
-
-fs.writeFileSync(
-  path.join(BUILD_DIR, 'package.json'),
-  JSON.stringify(pkg, null, 2)
-);

package/src/index.ts

@@ -1,16 +0,0 @@
-import EmbedCodeModal from './js/EmbedCodeModal';
-import type {
-  VideoPayload,
-  PlayerPayload,
-  ProjectPayload,
-} from 'js/types/EmbedCodeModalProps';
-// eslint-disable-next-line no-duplicate-imports
-import { EmbedCodeModalTypes } from 'js/types/EmbedCodeModalProps';
-
-export {
-  EmbedCodeModal,
-  VideoPayload,
-  PlayerPayload,
-  ProjectPayload,
-  EmbedCodeModalTypes,
-};

package/src/js/EmbedCodeModal.tsx

@@ -1,88 +0,0 @@
-import React, { useEffect, useState } from 'react';
-
-import { I18nextProvider } from 'react-i18next';
-import { initialize } from '@brightcove/studio-components';
-import { QueryClient, QueryClientProvider } from 'react-query';
-
-import { ModalContainer } from 'js/components';
-
-import i18n from 'js/i18n';
-import {
-  EmbedCodeModalTypes,
-  EmbedCodeProperties,
-  ModalDataPayload,
-} from './types/EmbedCodeModalProps';
-
-const appTheme = 'blueSteel';
-
-initialize({ theme: appTheme });
-
-const queryClient = new QueryClient();
-
-export interface EmbedCodeModalProps {
-  data: ModalDataPayload;
-  language?: 'en' | 'es' | 'fr' | 'ko' | 'ja' | 'zh';
-  embedCodeModalType?: EmbedCodeModalTypes;
-  // Parameters to be passed in case the the type is Player
-  embedCodeProperties?: EmbedCodeProperties;
-  isOutstreamPlayer?: boolean;
-  showDVR?: boolean;
-  onDVRClick?: (newValue: boolean) => void;
-  dvrTime?: number;
-  showLowLatency?: boolean;
-  onLowLatencyClick?: (newValue: boolean) => void;
-}
-
-const EmbedModal = ({
-  data,
-  language,
-  embedCodeModalType,
-  embedCodeProperties,
-  isOutstreamPlayer,
-  showDVR,
-  onDVRClick,
-  dvrTime,
-  showLowLatency,
-  onLowLatencyClick,
-}: EmbedCodeModalProps) => {
-  const [componentKey, setComponentKey] = useState(0);
-  const [hasCreatedPlayer, setHasCreatedPlayer] = useState(false);
-
-  useEffect(() => {
-    i18n.changeLanguage(language || window.StudioModule.config.lang);
-  }, [language]);
-
-  const handleSetComponentKey = () => {
-    setComponentKey(componentKey + 1);
-  };
-
-  const handleSetHasCreatedPlayer = (value: boolean) => {
-    setHasCreatedPlayer(value);
-  };
-
-  // avoid calling anything if there is not data
-  return data ? (
-    <QueryClientProvider client={queryClient}>
-      <I18nextProvider i18n={i18n}>
-        <ModalContainer
-          key={componentKey}
-          handleSetComponentKey={handleSetComponentKey}
-          data={data}
-          language={language}
-          embedCodeModalType={embedCodeModalType}
-          handleSetHasCreatedPlayer={handleSetHasCreatedPlayer}
-          hasCreatedPlayer={hasCreatedPlayer}
-          embedCodeProperties={embedCodeProperties}
-          isOutstreamPlayer={isOutstreamPlayer}
-          showDVR={showDVR}
-          onDVRClick={onDVRClick}
-          dvrTime={dvrTime}
-          showLowLatency={showLowLatency}
-          onLowLatencyClick={onLowLatencyClick}
-        />
-      </I18nextProvider>
-    </QueryClientProvider>
-  ) : null;
-};
-
-export default EmbedModal;

package/src/js/components/CustomSettingsDropdown.tsx

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

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