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

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

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