@brightcove/components-embed-code-modal 1.0.6 → 1.0.8

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

@@ -0,0 +1,343 @@
+import React, { useState, useCallback, useMemo } from 'react';
+import {
+  PrismDropDown,
+  PrismInput,
+  PrismIconButton,
+  PrismCheckbox,
+  PrismCodeCard,
+} from '@brightcove/prism-core';
+import { useTranslation } from 'react-i18next';
+
+import { PlayerSelectItem, PlayersObject } from 'js/types/players';
+import {
+  LivePayload,
+  EmbedCodeAspectRatio,
+  EmbedCodeProperties,
+} from 'js/types/EmbedCodeModalProps';
+import {
+  calculateDimensions,
+  calculateHeight,
+  shouldUpdateWidth,
+} from 'js/utils/dimensions';
+import { generateEmbedCode } from 'js/utils/embedCodeGenerator';
+
+import css from 'styles/prism/PrismLiveModal.sass';
+
+interface PrismPlayerControlsProps {
+  video: LivePayload;
+  players: PlayersObject;
+  playerListForSelection: PlayerSelectItem[];
+  selectedPlayer: string;
+  onPlayerChange: (playerId: string) => void;
+  embedProperties: EmbedCodeProperties;
+  setEmbedProperties: (value: EmbedCodeProperties) => void;
+  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 }>;
+}
+
+export const PrismPlayerControls = ({
+  video,
+  players,
+  playerListForSelection,
+  selectedPlayer,
+  onPlayerChange,
+  embedProperties,
+  setEmbedProperties,
+  showDVR,
+  onDVRClick,
+  dvrTime,
+  showLowLatency,
+  onLowLatencyClick,
+  adConfigValue,
+  onAdConfigChange,
+  ssai,
+  adConfigOptions = [],
+}: PrismPlayerControlsProps) => {
+  const { t } = useTranslation();
+  const [prevAspectRatio, setPrevAspectRatio] = useState(
+    embedProperties.aspectRatio,
+  );
+  const [aspectRatioLocked, setAspectRatioLocked] = useState(
+    embedProperties.aspectRatio !== EmbedCodeAspectRatio.CUSTOM,
+  );
+  const [dvrEnabled, setDvrEnabled] = useState(!showLowLatency);
+  const [lowLatencyEnabled, setLowLatencyEnabled] = useState(true);
+
+  const handlePropertiesUpdate = useCallback(
+    (name: string, value: string | boolean | number) => {
+      if (name === 'aspectRatio') {
+        const calculateNewWidth = shouldUpdateWidth(
+          prevAspectRatio,
+          value as EmbedCodeAspectRatio,
+        );
+
+        setPrevAspectRatio(value as EmbedCodeAspectRatio);
+        setAspectRatioLocked(value !== EmbedCodeAspectRatio.CUSTOM);
+
+        const dimensions = calculateDimensions(
+          calculateNewWidth,
+          value as EmbedCodeAspectRatio,
+          embedProperties.width,
+          embedProperties.height,
+        );
+
+        setEmbedProperties({
+          ...embedProperties,
+          aspectRatio: value as EmbedCodeAspectRatio,
+          width: dimensions.width as number,
+          height: dimensions.height,
+        });
+
+        return;
+      } else if (name === 'width' && aspectRatioLocked) {
+        const height = calculateHeight(
+          value as number,
+          embedProperties.aspectRatio,
+        );
+
+        setEmbedProperties({
+          ...embedProperties,
+          width: value as number,
+          height,
+        });
+
+        return;
+      }
+
+      setEmbedProperties({
+        ...embedProperties,
+        [name]: value,
+      });
+    },
+    [prevAspectRatio, aspectRatioLocked, embedProperties, setEmbedProperties],
+  );
+
+  const toggleAspectRatioLock = useCallback(() => {
+    if (embedProperties.aspectRatio === EmbedCodeAspectRatio.CUSTOM) {
+      return;
+    }
+    setAspectRatioLocked(!aspectRatioLocked);
+  }, [aspectRatioLocked, embedProperties.aspectRatio]);
+
+  // Player dropdown items
+  const playerItems = playerListForSelection.map((player) => ({
+    value: player.value,
+    label: player.label,
+  }));
+
+  // Sizing dropdown items
+  const sizingItems = [
+    { value: 'responsive', label: 'Responsive' },
+    { value: 'fixed', label: 'Fixed' },
+  ];
+
+  // Aspect ratio dropdown items
+  const aspectRatioItems = [
+    { value: EmbedCodeAspectRatio.SIXTEEN_NINE, label: '16:9 (Desktop)' },
+    { value: EmbedCodeAspectRatio.NINE_SIXTEEN, label: '9:16 (Mobile)' },
+    { value: EmbedCodeAspectRatio.ONE_ONE, label: '1:1' },
+    { value: EmbedCodeAspectRatio.FOUR_THREE, label: '4:3' },
+    { value: EmbedCodeAspectRatio.CUSTOM, label: 'Custom' },
+  ];
+
+  // Generate embed code
+  const player = players[selectedPlayer];
+  const { embedCode, embedCodeJS } = generateEmbedCode({
+    accountId: video.accountId,
+    playerId: selectedPlayer,
+    videoId: video.videoId,
+    embedProperties,
+    isCampaign: player?.hasCampaignPlugin || false,
+    isViewerIdSource: player?.hasViewerIDSource || false,
+    isBcMapTracking: player?.hasBcMapTracking || false,
+    livePlaybackToken: video.livePlaybackToken,
+    adConfigId: adConfigValue || video.adConfigId,
+  });
+
+  const codeCardTabs = useMemo(
+    () => [
+      {
+        label: (t('tabs.labels.iframe') as string) || 'iframe',
+        code: embedCode,
+        language: 'html',
+      },
+      {
+        label: (t('tabs.labels.javascript') as string) || 'JavaScript',
+        code: embedCodeJS,
+        language: 'javascript',
+      },
+    ],
+    [embedCode, embedCodeJS, t],
+  );
+
+  // Warning message for custom plugins
+  const warningMessage: string | undefined =
+    player?.hasCampaignPlugin || player?.hasViewerIDSource
+      ? (t('customPluginNotice') as string)
+      : void 0;
+
+  const handleDVRChange = useCallback(
+    (checked: boolean) => {
+      setDvrEnabled(checked);
+      if (onDVRClick) {
+        onDVRClick(checked);
+      }
+      if (checked && lowLatencyEnabled) {
+        setLowLatencyEnabled(false);
+        if (onLowLatencyClick) {
+          onLowLatencyClick(false);
+        }
+      }
+    },
+    [lowLatencyEnabled, onDVRClick, onLowLatencyClick],
+  );
+
+  const handleLowLatencyChange = useCallback(
+    (checked: boolean) => {
+      setLowLatencyEnabled(checked);
+      if (onLowLatencyClick) {
+        onLowLatencyClick(checked);
+      }
+      if (checked && dvrEnabled) {
+        setDvrEnabled(false);
+        if (onDVRClick) {
+          onDVRClick(false);
+        }
+      }
+    },
+    [dvrEnabled, onDVRClick, onLowLatencyClick],
+  );
+
+  return (
+    <div className={css.prismLeftColumn}>
+      {/* Player Dropdown */}
+      <PrismDropDown
+        label={t('player') as string}
+        items={playerItems}
+        value={selectedPlayer}
+        onChange={(item) => onPlayerChange(item.value as string)}
+        searchable
+        placeholder='Select Player'
+      />
+
+      {/* Player Sizing Dropdown */}
+      <PrismDropDown
+        label={(t('prism.customSettings.sizing') as string) || 'Player Sizing'}
+        items={sizingItems}
+        value={embedProperties.responsive ? 'responsive' : 'fixed'}
+        onChange={(item) =>
+          handlePropertiesUpdate('responsive', item.value === 'responsive')
+        }
+      />
+
+      {/* Aspect Ratio Dropdown */}
+      <PrismDropDown
+        label={(t('customSettings.aspectRatio') as string) || 'Aspect Ratio'}
+        items={aspectRatioItems}
+        value={embedProperties.aspectRatio}
+        onChange={(item) => handlePropertiesUpdate('aspectRatio', item.value)}
+      />
+
+      {/* Width/Height Input Group */}
+      <div className={css.prismInputGroup}>
+        <PrismInput
+          variant='FieldGroup'
+          label={(t('customSettings.playerWidth') as string) || 'Player Width'}
+          type='number'
+          value={String(embedProperties.width)}
+          onChange={(value) => handlePropertiesUpdate('width', Number(value))}
+          groupTitle='Unit'
+          groupValue={embedProperties.units}
+          onGroupChange={(unit) => handlePropertiesUpdate('units', unit)}
+          groupOptions={['px', '%']}
+        />
+
+        <PrismIconButton
+          icon='link'
+          variant='Ghost'
+          size='small'
+          onClick={toggleAspectRatioLock}
+          disabled={embedProperties.aspectRatio === EmbedCodeAspectRatio.CUSTOM}
+          className={css.prismLinkButton}
+        />
+
+        <PrismInput
+          variant='FieldGroup'
+          label={
+            (t('customSettings.playerHeight') as string) || 'Player Height'
+          }
+          type='number'
+          value={String(embedProperties.height)}
+          onChange={(value) => handlePropertiesUpdate('height', Number(value))}
+          disabled={aspectRatioLocked}
+          groupTitle='Unit'
+          groupValue={embedProperties.units}
+          onGroupChange={(unit) => handlePropertiesUpdate('units', unit)}
+          groupOptions={['px', '%']}
+        />
+      </div>
+
+      {/* DVR Checkbox (conditional) */}
+      {showDVR && (
+        <div>
+          <PrismCheckbox
+            label={(t('dvr.allowDVR') as string) || 'Enable DVR'}
+            checked={dvrEnabled}
+            onChange={(e) => handleDVRChange(e.target.checked)}
+            disabled={showLowLatency && lowLatencyEnabled}
+          />
+          {dvrEnabled && typeof dvrTime === 'number' && (
+            <div className={css.prismInputGroup}>
+              <PrismInput
+                variant='FieldGroup'
+                label={(t('dvr.inputLabel') as string) || 'DVR Window'}
+                type='number'
+                value={String(dvrTime)}
+                disabled
+                groupTitle='Unit'
+                groupValue={(t('dvr.unit') as string) || 'sec'}
+                groupOptions={[(t('dvr.unit') as string) || 'sec']}
+              />
+            </div>
+          )}
+        </div>
+      )}
+
+      {/* Low Latency Checkbox (conditional) */}
+      {showLowLatency && (
+        <PrismCheckbox
+          label={(t('lowLatency') as string) || 'Enable Low Latency'}
+          checked={lowLatencyEnabled}
+          onChange={(e) => handleLowLatencyChange(e.target.checked)}
+          disabled={showDVR && dvrEnabled}
+        />
+      )}
+
+      {/* Ad Config Dropdown (conditional) */}
+      {ssai && adConfigOptions.length > 0 && onAdConfigChange && (
+        <PrismDropDown
+          label={(t('adConfiguration') as string) || 'Ad Configuration'}
+          items={adConfigOptions.map((opt) => ({
+            value: opt.value,
+            label: opt.label,
+          }))}
+          value={adConfigValue || adConfigOptions[0].value}
+          onChange={(item) => onAdConfigChange(item.value as string)}
+        />
+      )}
+
+      {warningMessage && (
+        <div className={css.prismCustomPluginNotice}>{warningMessage}</div>
+      )}
+
+      <PrismCodeCard className={css.prismCodeCard} tabs={codeCardTabs} />
+    </div>
+  );
+};

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

@@ -0,0 +1,98 @@
+import React, { useCallback } from 'react';
+import ReactPlayerLoader from '@brightcove/react-player-loader';
+import { PrismButton } from '@brightcove/prism-core';
+import { getBrightcove, getUrlBase } from 'js/utils/util';
+import { useTranslation } from 'react-i18next';
+
+import css from 'styles/prism/PrismLiveModal.sass';
+
+interface PrismPlayerPreviewProps {
+  accountId: string;
+  playerId: string;
+  videoId: string;
+  previewUrl: string;
+  livePlaybackToken?: string;
+  adConfigId?: string;
+}
+
+export const PrismPlayerPreview = ({
+  accountId,
+  playerId,
+  videoId,
+  previewUrl,
+}: PrismPlayerPreviewProps) => {
+  const { t } = useTranslation();
+
+  const handleCopyUrl = useCallback(() => {
+    if (!previewUrl) {
+      getBrightcove().Toaster.error({
+        title: t('toasterTitle') as string,
+        message: 'Please select a player first',
+      });
+      return;
+    }
+    navigator.clipboard.writeText(previewUrl).then(() => {
+      getBrightcove().Toaster.success({
+        title: t('toasterTitle') as string,
+        message: t('toasterGetURLSuccess') as string,
+      });
+    });
+  }, [previewUrl, t]);
+
+  const handleOpenPreview = useCallback(() => {
+    if (!previewUrl) {
+      getBrightcove().Toaster.error({
+        title: t('toasterTitle') as string,
+        message: 'Please select a player first',
+      });
+      return;
+    }
+    window.open(previewUrl, '_blank', 'noopener,noreferrer');
+  }, [previewUrl, t]);
+
+  // Build player options for Live modal
+  // Note: Following Bluesteel pattern - we DON'T pass adConfigId or livePlaybackToken
+  // to ReactPlayerLoader. These are only used in the previewUrl for external links
+  // and in the embed code generation, not for the embedded player preview.
+  const playerOptions: Record<string, string> = {
+    accountId,
+    playerId,
+    videoId,
+  };
+
+  return (
+    <div className={css.prismPlayerPreviewContainer}>
+      <div className={css.prismPlayerActions}>
+        <PrismButton
+          variant='Primary'
+          size='small'
+          onClick={handleCopyUrl}
+          rightIcon='copy'
+          disabled={!previewUrl}
+        >
+          {t('prism.getURL') as string}
+        </PrismButton>
+        <PrismButton
+          variant='Primary'
+          size='small'
+          onClick={handleOpenPreview}
+          rightIcon='link'
+          disabled={!previewUrl}
+        >
+          {t('previewButton') as string}
+        </PrismButton>
+      </div>
+
+      <div className={css.prismPlayerWrapper}>
+        <ReactPlayerLoader
+          key={`${accountId}-${playerId}-${videoId}`}
+          {...playerOptions}
+          baseUrl={getUrlBase()}
+          attrs={{ className: css.playerLoader }}
+          embedType='iframe'
+          refNode='player-container'
+        />
+      </div>
+    </div>
+  );
+};

package/src/js/components/prism/index.ts

@@ -0,0 +1,3 @@
+export { PrismLiveModal } from './PrismLiveModal';
+export { PrismPlayerControls } from './PrismPlayerControls';
+export { PrismPlayerPreview } from './PrismPlayerPreview';

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

package/src/js/constants/pluginsRegistry.ts

@@ -0,0 +1,30 @@
+// Plugins available in the BC registry
+export const bcHostedPlugins = [
+  'bcAa',
+  'bcAirplay',
+  'bcGa',
+  'bcGtm',
+  'bcPlaylistUi',
+  'bcTealium',
+  'bcMapPlugin',
+  'chromecastReceiver',
+  'customEndscreen',
+  'eme',
+  'ima3',
+  'interactivityViewer',
+  'kollective',
+  'overlay',
+  'pip',
+  'playlistEndscreen',
+  'qualityMenu',
+  'social',
+  'ssai',
+  'thumbnails',
+];
+
+export const CAMPAIGN_PLUGIN_NAME = 'bcMapPlugin';
+export const VIEWER_ID_KEY_NAME = 'viewer_id_source';
+export const BC_MAP_TRACKING_NAME = 'bcMapTracking';
+export const INTERACTIVITY_PLUGIN_NAME = 'interactivityViewer';
+export const INTERACTIVITY_REGISTRY_ID =
+  '@brightcove/videojs-interactivity-viewer';

package/src/js/hooks/useGetPlayers.ts

@@ -0,0 +1,12 @@
+import { useQuery } from 'react-query';
+
+import { getPlayers } from 'js/services/players-api';
+
+const useGetPlayers = (isPlayersCallEnabled: boolean) => {
+  return useQuery(['players'], () => getPlayers(), {
+    refetchOnWindowFocus: false,
+    enabled: isPlayersCallEnabled,
+  });
+};
+
+export default useGetPlayers;

package/src/js/i18n.ts

@@ -0,0 +1,43 @@
+import i18n from 'i18next';
+import { initReactI18next } from 'react-i18next';
+
+import common_en from 'translations/en.json';
+import common_es from 'translations/es.json';
+import common_fr from 'translations/fr.json';
+import common_ja from 'translations/ja.json';
+import common_ko from 'translations/ko.json';
+import common_zh from 'translations/zh.json';
+
+export const resources = {
+  en: {
+    translation: common_en,
+  },
+  es: {
+    translation: common_es,
+  },
+  fr: {
+    translation: common_fr,
+  },
+  ja: {
+    translation: common_ja,
+  },
+  ko: {
+    translation: common_ko,
+  },
+  zh: {
+    translation: common_zh,
+  },
+};
+
+i18n.use(initReactI18next).init({
+  lng: window.StudioModule?.config?.lang || 'en',
+  fallbackLng: 'en',
+  debug: true,
+  returnObjects: true,
+  resources,
+  interpolation: {
+    escapeValue: false, // react already safe from xss
+  },
+});
+
+export default i18n;

package/src/js/services/players-api.ts

@@ -0,0 +1,26 @@
+import {
+  getAllPlayers,
+  createPlayer as createPlayerAPI,
+  getPlayer as getPlayerAPI,
+} from '@brightcove/studio-api-services/api/players-api';
+import { callAPI } from 'js/utils/call';
+import {
+  GetPlayersPayload,
+  CreatePlayerPayload,
+  CreatePlayerResponse,
+  PlayerItem,
+} from 'js/types/players';
+
+export const getPlayers = async (): Promise<GetPlayersPayload> => {
+  return callAPI(getAllPlayers, {});
+};
+
+export const createPlayer = async (
+  payload: CreatePlayerPayload,
+): Promise<CreatePlayerResponse> => {
+  return callAPI(createPlayerAPI, payload);
+};
+
+export const getPlayer = async (playerId: string): Promise<PlayerItem> => {
+  return callAPI(getPlayerAPI, { playerId });
+};

package/src/js/services/url-shortener.ts

@@ -0,0 +1,10 @@
+import { getShortenedUrl } from '@brightcove/studio-api-services/api/url-shortener-api';
+import { callAPI } from 'js/utils/call';
+
+export const shortenUrl = async ({
+  longUrl,
+}: {
+  longUrl: string;
+}): Promise<string> => {
+  return callAPI(getShortenedUrl, { longUrl });
+};

package/src/js/types/EmbedCodeModalProps.ts

@@ -0,0 +1,72 @@
+// export payload that will be used to pass data into component
+export interface VideoPayload {
+  videoId: string;
+  videoName: string;
+  accountId: string;
+  posterUrl?: string;
+  duration: number;
+}
+
+export interface PlayerPayload {
+  id: string;
+  configuration?: Record<string, unknown>;
+  name?: string;
+  accountId?: string;
+  embedCodeProperties?: EmbedCodeProperties;
+  isOutstreamPlayer?: boolean;
+}
+
+export interface ProjectPayload {
+  accountId: string;
+  videoId: string;
+  interactivityProjectId: string;
+  interactivityProjectName: string;
+}
+
+export interface LivePayload {
+  videoId: string;
+  accountId: string;
+  livePlaybackToken: string;
+  adConfigId: string;
+}
+
+export enum EmbedCodeModalTypes {
+  PLAYER = 'player',
+  VIDEO = 'video',
+  PROJECT = 'project',
+  LIVE = 'live',
+}
+
+export enum NoInteractivityPlayerModalTypes {
+  NO_PLAYER = 'no-player',
+  NO_PERMISSION = 'no-permission',
+}
+
+export type ModalDataPayload =
+  | VideoPayload
+  | PlayerPayload
+  | ProjectPayload
+  | LivePayload;
+
+export enum EmbedCodeUnits {
+  PX = 'px',
+  EM = 'em',
+  PERCENT = '%',
+}
+
+export enum EmbedCodeAspectRatio {
+  FLUID = 'fluid',
+  CUSTOM = 'custom',
+  ONE_ONE = '1:1',
+  FOUR_THREE = '4:3',
+  SIXTEEN_NINE = '16:9',
+  NINE_SIXTEEN = '9:16',
+}
+
+export interface EmbedCodeProperties {
+  width: number;
+  height: number;
+  units: EmbedCodeUnits;
+  responsive: boolean;
+  aspectRatio: EmbedCodeAspectRatio;
+}