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

package/src/js/components/PlayerPreview.tsx

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

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

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

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

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

@@ -0,0 +1,303 @@
+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/components/{index.d.ts → index.ts}

@@ -7,4 +7,3 @@ export * from './VideoLinks';
 export * from './VideoPlayer';
 export * from './PlayerPreview';
 export * from './CustomSettingsDropdown';
-//# sourceMappingURL=index.d.ts.map

package/src/js/constants/baseUrls.ts

@@ -0,0 +1,4 @@
+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';

package/src/js/constants/embed.ts

@@ -0,0 +1,12 @@
+import {
+  EmbedCodeAspectRatio,
+  EmbedCodeUnits,
+} from 'js/types/EmbedCodeModalProps';
+
+export const EMBED_DEFAULT = {
+  responsive: false,
+  width: 960,
+  height: 540,
+  units: EmbedCodeUnits.PX,
+  aspectRatio: EmbedCodeAspectRatio.CUSTOM,
+};

package/src/js/constants/player.ts

@@ -0,0 +1,32 @@
+export const DEFAULT_PLAYER_ID = 'default';
+export const DEFAULT_PLAYER_NAME = 'Brightcove Default Player';
+
+export const PLAYER_LIST_FOR_SELECTION = [
+  {
+    label: DEFAULT_PLAYER_NAME,
+    value: DEFAULT_PLAYER_ID,
+  },
+];
+
+export const FAVORITE_PLAYER_SETTING = 'favorite_player_id';
+
+export const PLAYERS = {
+  default: {
+    hasCustomPlugins: false,
+    id: DEFAULT_PLAYER_ID,
+    hasCampaignPlugin: false,
+    label: DEFAULT_PLAYER_NAME,
+    hasInteractivityPlugin: false,
+    hasViewerIDSource: false,
+    hasBcMapTracking: false,
+  },
+};
+
+export const DEFAULT_INTERACTIVITY_PLAYER = {
+  name: 'Interactivity Player',
+  registry_id: '@brightcove/videojs-interactivity-viewer',
+  version: '2.x',
+  options: {
+    mobilefullscreen: true,
+  },
+};