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

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,324 +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,
-  Select,
-} 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, PLAYERS } 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,
-  adConfigValue,
-  onAdConfigChange,
-  ssai = false,
-  adConfigOptions = [],
-}: {
-  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;
-  adConfigValue?: string;
-  onAdConfigChange?: (value: string) => void;
-  ssai?: boolean;
-  adConfigOptions?: Array<{ label: string; value: string }>;
-}) => {
-  const { t } = useTranslation();
-  const [player, setPlayer] = useState<PlayersObjectItem>(PLAYERS.default);
-  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'
-        />
-        {embedCodeModalType === EmbedCodeModalTypes.LIVE &&
-          ssai &&
-          adConfigOptions.length > 0 &&
-          onAdConfigChange && (
-            <Select
-              label={t('adConfiguration')}
-              value={adConfigValue || adConfigOptions[0]?.value || ''}
-              options={adConfigOptions}
-              onChange={onAdConfigChange}
-              testName='ad-config-dropdown'
-            />
-          )}
-        {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.ts

@@ -1,9 +0,0 @@
-export * from './EmbedCopySection';
-export * from './ModalContainer';
-export * from './TitleWithTooltip';
-export * from './TabsHeader';
-export * from './TabsSection';
-export * from './VideoLinks';
-export * from './VideoPlayer';
-export * from './PlayerPreview';
-export * from './CustomSettingsDropdown';

package/src/js/components/prism/PrismLiveModal.tsx

@@ -1,162 +0,0 @@
-import React, { useState, useEffect } from 'react';
-import { PrismModal } from '@brightcove/prism-core';
-import { useTranslation } from 'react-i18next';
-import { PlayerSelectItem, PlayersObject } from 'js/types/players';
-import {
-  LivePayload,
-  EmbedCodeProperties,
-  EmbedCodeAspectRatio,
-  EmbedCodeUnits,
-} from 'js/types/EmbedCodeModalProps';
-import { getVideoPreviewLink, VideoPreviewLinkOptions } from 'js/utils/util';
-import { getFavoritePlayer } from 'js/utils/featureSwitches';
-import { PrismPlayerControls } from './PrismPlayerControls';
-import { PrismPlayerPreview } from './PrismPlayerPreview';
-
-import css from 'styles/prism/PrismLiveModal.sass';
-
-interface PrismLiveModalProps {
-  isOpen: boolean;
-  onClose: () => void;
-  video: LivePayload;
-  players: PlayersObject;
-  playerListForSelection: PlayerSelectItem[];
-  showDVR?: boolean;
-  onDVRClick?: (newValue: boolean) => void;
-  dvrTime?: number;
-  showLowLatency?: boolean;
-  onLowLatencyClick?: (newValue: boolean) => void;
-  adConfigValue?: string;
-  onAdConfigChange?: (value: string) => void;
-  ssai?: boolean;
-  adConfigOptions?: Array<{ label: string; value: string }>;
-}
-
-const DEFAULT_PLAYER_ID = 'default';
-const DEFAULT_EMBED_PROPERTIES: EmbedCodeProperties = {
-  width: 960,
-  height: 540,
-  units: EmbedCodeUnits.PX,
-  responsive: false,
-  aspectRatio: EmbedCodeAspectRatio.SIXTEEN_NINE,
-};
-
-export const PrismLiveModal = ({
-  isOpen,
-  onClose,
-  video,
-  players,
-  playerListForSelection,
-  showDVR,
-  onDVRClick,
-  dvrTime,
-  showLowLatency,
-  onLowLatencyClick,
-  adConfigValue,
-  onAdConfigChange,
-  ssai,
-  adConfigOptions,
-}: PrismLiveModalProps) => {
-  const { t } = useTranslation();
-  const [selectedPlayer, setSelectedPlayer] =
-    useState<string>(DEFAULT_PLAYER_ID);
-  const [embedProperties, setEmbedProperties] = useState<EmbedCodeProperties>(
-    DEFAULT_EMBED_PROPERTIES,
-  );
-  const [previewUrl, setPreviewUrl] = useState<string>('');
-
-  // Initialize selected player
-  useEffect(() => {
-    if (playerListForSelection.length === 0) {
-      return;
-    }
-
-    const favoritePlayer = getFavoritePlayer();
-    const player = players[favoritePlayer];
-
-    if (
-      playerListForSelection.find((selection) => selection.value === player?.id)
-    ) {
-      setSelectedPlayer(player.id);
-    } else {
-      setSelectedPlayer(playerListForSelection[0].value);
-    }
-  }, [playerListForSelection, players]);
-
-  // Update preview URL when player or video changes
-  useEffect(() => {
-    if (!selectedPlayer) {
-      setPreviewUrl('');
-      return;
-    }
-
-    const options: VideoPreviewLinkOptions = {
-      accountId: video.accountId,
-      playerId: selectedPlayer,
-      videoId: video.videoId,
-    };
-
-    // Use the selected adConfigValue from dropdown, fallback to video.adConfigId
-    if (adConfigValue) {
-      options.adConfigId = adConfigValue;
-    } else if (video.adConfigId) {
-      options.adConfigId = video.adConfigId;
-    }
-
-    if (video.livePlaybackToken) {
-      options.livePlaybackToken = video.livePlaybackToken;
-    }
-
-    setPreviewUrl(getVideoPreviewLink(options));
-  }, [selectedPlayer, video, adConfigValue]);
-
-  const handlePlayerChange = (playerId: string) => {
-    setSelectedPlayer(playerId);
-  };
-
-  return (
-    <PrismModal
-      isOpen={isOpen}
-      onClose={onClose}
-      title={(t('modalHeader') as string) || 'Publish Video'}
-      onPrimaryAction={onClose}
-      primaryButtonText={t('done') as string}
-      cancelButtonText={t('cancel') as string}
-      className={css.prismLiveModal}
-    >
-      <div className={css.prismLiveModalContent}>
-        {/* Left Column: Player Controls */}
-        <PrismPlayerControls
-          video={video}
-          players={players}
-          playerListForSelection={playerListForSelection}
-          selectedPlayer={selectedPlayer}
-          onPlayerChange={handlePlayerChange}
-          embedProperties={embedProperties}
-          setEmbedProperties={setEmbedProperties}
-          showDVR={showDVR}
-          onDVRClick={onDVRClick}
-          dvrTime={dvrTime}
-          showLowLatency={showLowLatency}
-          onLowLatencyClick={onLowLatencyClick}
-          adConfigValue={adConfigValue}
-          onAdConfigChange={onAdConfigChange}
-          ssai={ssai}
-          adConfigOptions={adConfigOptions}
-        />
-
-        {/* Right Column: Player Preview */}
-        <div className={css.prismRightColumn}>
-          <PrismPlayerPreview
-            accountId={video.accountId}
-            playerId={selectedPlayer}
-            videoId={video.videoId}
-            previewUrl={previewUrl}
-            livePlaybackToken={video.livePlaybackToken}
-            adConfigId={adConfigValue || video.adConfigId}
-          />
-        </div>
-      </div>
-    </PrismModal>
-  );
-};