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

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,324 @@
+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={false}
+            checked={allowLowLatency}
+            onChange={() => {
+              onLowLatencyClick?.(!allowLowLatency);
+              setAllowLowLatency(!allowLowLatency);
+            }}
+            className={css.dvrCheckbox}
+            testName='low-latency-checkbox'
+          >
+            {t('lowLatency')}
+          </Checkbox>
+        ) : null}
+        {showDVR && (
+          <div>
+            <Checkbox
+              disabled={false}
+              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

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

@@ -0,0 +1,196 @@
+import React, { useState, useEffect, useCallback } 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 {
+  getBrightcove,
+  getVideoPreviewLink,
+  VideoPreviewLinkOptions,
+} from 'js/utils/util';
+import { getFavoritePlayer } from 'js/utils/featureSwitches';
+import useIsMobile from 'js/hooks/useIsMobile';
+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 isMobile = useIsMobile();
+  const [selectedPlayer, setSelectedPlayer] =
+    useState<string>(DEFAULT_PLAYER_ID);
+  const [embedProperties, setEmbedProperties] = useState<EmbedCodeProperties>(
+    DEFAULT_EMBED_PROPERTIES,
+  );
+  const [previewUrl, setPreviewUrl] = useState<string>('');
+  const [embedCode, setEmbedCode] = 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);
+  };
+
+  const handleCopyEmbedCode = useCallback(async () => {
+    if (!embedCode) {
+      return;
+    }
+    try {
+      await navigator.clipboard.writeText(embedCode);
+      getBrightcove().Toaster.success({
+        message: t('codeCopied') as string,
+      });
+    } catch {
+      getBrightcove().Toaster.error({
+        message: t('toasterErrorMessage') as string,
+      });
+    }
+  }, [embedCode, t]);
+
+  return (
+    <PrismModal
+      isOpen={isOpen}
+      onClose={onClose}
+      title={(t('modalHeader') as string) || 'Publish Video'}
+      bottomSheet={isMobile}
+      size='extraLarge'
+      forceMaxHeight
+      contentScroll={isMobile ? 'auto' : 'none'}
+      showHeaderBottomBorder
+      onPrimaryAction={isMobile ? handleCopyEmbedCode : onClose}
+      primaryButtonText={
+        isMobile ? (t('copyCode') as string) : (t('done') as string)
+      }
+      onSecondaryAction={onClose}
+      cancelButtonText={
+        isMobile ? (t('done') as string) : (t('cancel') as string)
+      }
+    >
+      <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}
+          onEmbedCodeChange={setEmbedCode}
+        />
+
+        {/* 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}
+            isMobile={isMobile}
+          />
+        </div>
+      </div>
+    </PrismModal>
+  );
+};