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

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

package/src/js/components/TabsSection.tsx

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

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

package/src/js/components/VideoLinks.tsx

@@ -1,83 +0,0 @@
-import React, { useCallback, useState } from 'react';
-import { useTranslation } from 'react-i18next';
-import { Button, Loader } from '@brightcove/studio-components';
-import css from 'styles/EmbedCodeModal.sass';
-import { shortenUrl } from '../services/url-shortener';
-import { getBrightcove } from 'js/utils/util';
-
-interface VideoLinksProps {
-  previewUrl: string;
-  playerUrl: string;
-}
-
-export const VideoLinks = ({ previewUrl, playerUrl }: VideoLinksProps) => {
-  const { t } = useTranslation();
-  const [isGetUrlLoading, setIsGetUrlLoading] = useState<boolean>(false);
-
-  const copyPreviewURL = useCallback(
-    async (link: string) => {
-      setIsGetUrlLoading(true);
-      getUrlAndAddItToClipboard(link)
-        .then(() => {
-          getBrightcove().Toaster.success({
-            title: t('toasterTitle'),
-            message: t('toasterGetURLSuccess'),
-          });
-        })
-        .catch(() => {
-          getBrightcove().Toaster.error({
-            message: t('toasterGetURLError'),
-          });
-        })
-        .finally(() => setIsGetUrlLoading(false));
-    },
-    [t],
-  );
-  return (
-    <div>
-      <div className={css.getURLBtnContainer}>
-        <Button
-          look='tertiary'
-          text={t('getURL')}
-          testName='get-url-btn'
-          icon={isGetUrlLoading ? '' : 'link'}
-          iconRight
-          onClick={() => copyPreviewURL(playerUrl)}
-        />
-        {isGetUrlLoading && (
-          <Loader className={css.getURLBtnSpinner} size='inline' color='navy' />
-        )}
-      </div>
-      <Button
-        look='tertiary'
-        text={t('previewButton')}
-        testName='preview-player-btn'
-        icon='external_link'
-        iconRight
-        onClick={() => {
-          window.open(previewUrl, '_blank');
-        }}
-      />
-    </div>
-  );
-};
-
-export const getUrlAndAddItToClipboard = async (url: string) => {
-  const escapedLongUrl = encodeURI(url);
-  // safari
-  try {
-    return navigator.clipboard.write([
-      new ClipboardItem({
-        // eslint-disable-next-line no-async-promise-executor
-        'text/plain': new Promise(async (resolve) => {
-          const shortUrl = await shortenUrl({ longUrl: escapedLongUrl });
-          resolve(new Blob([shortUrl], { type: 'text/plain' }));
-        }),
-      }),
-    ]);
-  } catch {
-    // chrome and firefox
-    const shortUrl = await shortenUrl({ longUrl: escapedLongUrl });
-    return navigator.clipboard.writeText(shortUrl);
-  }
-};

package/src/js/components/VideoPlayer.tsx

@@ -1,303 +0,0 @@
-import React, { useEffect, useState, useMemo, useCallback } from 'react';
-import { useTranslation } from 'react-i18next';
-import ReactPlayerLoader from '@brightcove/react-player-loader';
-import {
-  Checkbox,
-  Hideable,
-  Input,
-  PlayerSelect,
-} from '@brightcove/studio-components';
-import {
-  VideoPayload,
-  ProjectPayload,
-  EmbedCodeModalTypes,
-  EmbedCodeProperties,
-  LivePayload,
-} from 'js/types/EmbedCodeModalProps';
-import {
-  PlayerSelectItem,
-  PlayersObject,
-  PlayersObjectItem,
-} from 'js/types/players';
-import css from 'styles/EmbedCodeModal.sass';
-import {
-  getUrlBase,
-  getVideoPreviewLink,
-  PREVIEW_URL_BASE,
-  VideoPreviewLinkOptions,
-} from 'js/utils/util';
-import {
-  VideoLinks,
-  TitleWithTooltip,
-  TabsSection,
-  CustomSettingsDropdown,
-} from 'js/components';
-import { DEFAULT_PLAYER_ID } from 'js/constants/player';
-import { EMBED_DEFAULT } from 'js/constants/embed';
-import { getFavoritePlayer } from 'js/utils/featureSwitches';
-import cx from 'classnames';
-
-export const VideoPlayer = ({
-  video,
-  embedCodeModalType,
-  playerListForSelection,
-  players,
-  hasCreatedPlayer,
-  embedCodeProperties,
-  showDVR,
-  onDVRClick,
-  dvrTime,
-  showLowLatency,
-  onLowLatencyClick,
-}: {
-  video: VideoPayload | ProjectPayload | LivePayload;
-  embedCodeModalType: EmbedCodeModalTypes;
-  playerListForSelection: PlayerSelectItem[];
-  players: PlayersObject;
-  hasCreatedPlayer?: boolean;
-  embedCodeProperties?: EmbedCodeProperties;
-  showDVR?: boolean;
-  onDVRClick?: (newValue: boolean) => void;
-  dvrTime?: number;
-  showLowLatency?: boolean;
-  onLowLatencyClick?: (newValue: boolean) => void;
-}) => {
-  const { t } = useTranslation();
-  const [player, setPlayer] = useState<PlayersObjectItem>();
-  const [previewUrl, setPreviewUrl] = useState<string>('');
-  const [embedProperties, setEmbedProperties] = useState<EmbedCodeProperties>(
-    embedCodeProperties ? embedCodeProperties : EMBED_DEFAULT,
-  );
-  const [allowLowLatency, setAllowLowLatency] = useState(true);
-  const [allowDVR, setAllowDVR] = useState(!showLowLatency);
-  const [time, setTime] = useState<number>(dvrTime || 0);
-
-  useEffect(() => {
-    setTime(dvrTime || 0);
-  }, [dvrTime]);
-
-  useEffect(() => {
-    if (playerListForSelection.length === 0) return;
-    const favoritePlayer = getFavoritePlayer();
-    const player = players[favoritePlayer];
-
-    if (
-      playerListForSelection.find((selection) => selection.value === player?.id)
-    ) {
-      setPlayer(player);
-    } else {
-      setPlayer(players[playerListForSelection[0].value]);
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [playerListForSelection]);
-
-  const onPlayerSelectChange = (id: string) => {
-    const player = players[id];
-    setPlayer(player);
-  };
-
-  const interactivityProjectId = useMemo(() => {
-    return embedCodeModalType === EmbedCodeModalTypes.PROJECT
-      ? (video as ProjectPayload).interactivityProjectId
-      : null;
-  }, [video, embedCodeModalType]);
-
-  const onEmbedCreated = useCallback(
-    (el: HTMLElement) => {
-      if (interactivityProjectId) {
-        el.setAttribute(
-          'data-interactivity-project-id',
-          interactivityProjectId,
-        );
-      }
-    },
-    [interactivityProjectId],
-  );
-
-  const sharedProps: {
-    accountId: string;
-    playerId: string;
-    isCampaign: boolean;
-    isViewerIdSource: boolean;
-    isBcMapTracking: boolean;
-    videoId?: string;
-    interactivityProjectId?: string;
-    livePlaybackToken?: string;
-    adConfigId?: string;
-  } = {
-    accountId: video.accountId,
-    playerId:
-      player?.id ||
-      (playerListForSelection.length > 0
-        ? playerListForSelection[0].value
-        : DEFAULT_PLAYER_ID),
-    isCampaign: player?.hasCampaignPlugin || false,
-    isViewerIdSource: player?.hasViewerIDSource || false,
-    isBcMapTracking: player?.hasBcMapTracking || false,
-    videoId: video.videoId,
-  };
-
-  const name = interactivityProjectId
-    ? (video as ProjectPayload).interactivityProjectName
-    : (video as VideoPayload).videoName;
-  const id = interactivityProjectId || video.videoId;
-
-  if (interactivityProjectId) {
-    sharedProps.interactivityProjectId = interactivityProjectId;
-  }
-
-  const { livePlaybackToken, adConfigId } = video as LivePayload;
-
-  if (livePlaybackToken) {
-    sharedProps.livePlaybackToken = livePlaybackToken;
-  }
-
-  if (adConfigId) {
-    sharedProps.adConfigId = adConfigId;
-  }
-
-  const {
-    adConfigId: sharedAdConfigId,
-    livePlaybackToken: sharedLivePlaybackToken,
-    ...restSharedProps
-  } = sharedProps;
-
-  const playerProps = {
-    ...restSharedProps,
-    ...(sharedAdConfigId ? {} : { adConfigId: sharedAdConfigId }),
-    ...(sharedLivePlaybackToken
-      ? {}
-      : { livePlaybackToken: sharedLivePlaybackToken }),
-  };
-
-  useEffect(() => {
-    if (player?.id) {
-      const options: VideoPreviewLinkOptions = {
-        accountId: video.accountId,
-        playerId: player.id,
-        videoId: video.videoId,
-      };
-      if (interactivityProjectId) {
-        options.interactivityProjectId = interactivityProjectId;
-      }
-
-      if (adConfigId) {
-        options.adConfigId = adConfigId;
-      }
-
-      if (livePlaybackToken) {
-        options.livePlaybackToken = livePlaybackToken;
-      }
-
-      setPreviewUrl(getVideoPreviewLink(options));
-    }
-  }, [player, video, interactivityProjectId, adConfigId, livePlaybackToken]);
-
-  return (
-    <>
-      <div className={css.leftContent}>
-        <PlayerSelect
-          label={t('player')}
-          tooltip={
-            <>
-              <div>{t('tooltipTextNew')}</div>
-              <a href={t('learnmore')} target='_blank' rel='noreferrer'>
-                {t('tooltipLink')}
-              </a>
-            </>
-          }
-          selectedPlayer={player?.id || DEFAULT_PLAYER_ID}
-          players={playerListForSelection}
-          onChange={onPlayerSelectChange}
-          inputClassName={css.playerSelect}
-          testName='embed-player-select'
-        />
-        {hasCreatedPlayer ? (
-          <iframe
-            src={`${PREVIEW_URL_BASE()}/${sharedProps.accountId}/players/${
-              sharedProps.playerId
-            }/preview/embeds/default/master/index.html?interactivityProjectId=${
-              sharedProps.interactivityProjectId
-            }&videoId=${sharedProps.videoId}`}
-            allowFullScreen
-            allow='autoplay;encrypted-media;fullscreen'
-            width='539'
-            height='303.2'
-            data-interactivity-project-id={interactivityProjectId}
-          ></iframe>
-        ) : (
-          <ReactPlayerLoader
-            {...playerProps}
-            baseUrl={getUrlBase()}
-            attrs={{ className: css.playerLoader }}
-            embedType='iframe'
-            refNode='player-container'
-            onEmbedCreated={onEmbedCreated}
-          />
-        )}
-        <Hideable show={player?.hasCustomPlugins}>
-          <span className={css.customPluginNotice}>
-            {t('customPluginNotice')}
-          </span>
-        </Hideable>
-        <VideoLinks previewUrl={previewUrl} playerUrl={previewUrl} />
-      </div>
-      <div
-        className={cx(css.rightContent, {
-          [css.expandRightContent]: showDVR,
-        })}
-      >
-        <TitleWithTooltip name={name} id={id} />
-        {(embedCodeModalType === EmbedCodeModalTypes.VIDEO ||
-          embedCodeModalType === EmbedCodeModalTypes.PROJECT ||
-          embedCodeModalType === EmbedCodeModalTypes.LIVE) && (
-          <CustomSettingsDropdown
-            setEmbedProperties={setEmbedProperties}
-            embedProperties={embedProperties}
-          />
-        )}
-        <TabsSection {...sharedProps} embedCodeProperties={embedProperties} />
-        {showLowLatency ? (
-          <Checkbox
-            disabled={showDVR && allowDVR}
-            checked={allowLowLatency}
-            onChange={() => {
-              onLowLatencyClick?.(!allowLowLatency);
-              setAllowLowLatency(!allowLowLatency);
-            }}
-            className={css.dvrCheckbox}
-            testName='low-latency-checkbox'
-          >
-            {t('lowLatency')}
-          </Checkbox>
-        ) : null}
-        {showDVR && (
-          <div>
-            <Checkbox
-              disabled={showLowLatency && allowLowLatency}
-              checked={allowDVR}
-              onChange={() => {
-                onDVRClick?.(!allowDVR);
-                setAllowDVR(!allowDVR);
-              }}
-              className={css.dvrCheckbox}
-              testName='dvr-checkbox'
-            >
-              {t('dvr.allowDVR')}
-            </Checkbox>
-            {allowDVR && (
-              <Input
-                className={css.timeInput}
-                label={t('dvr.inputLabel')}
-                value={time}
-                description={t('dvr.inputDescription')}
-                disabled
-                testName='dvr-time-input'
-              />
-            )}
-          </div>
-        )}
-      </div>
-    </>
-  );
-};

package/src/js/constants/baseUrls.ts

@@ -1,4 +0,0 @@
-export const QA_URL = 'https://players.qa.brightcove.net/';
-export const PROD_URL = 'https://players.brightcove.net/';
-export const QA_PREVIEW_URL = 'https://preview-players.qa.brightcove.net';
-export const PROD_PREVIEW_URL = 'https://preview-players.brightcove.net';