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

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

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

@@ -1,188 +0,0 @@
-import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import ReactPlayerLoader from '@brightcove/react-player-loader';
-import { PrismButton, PrismButtonDropdown } from '@brightcove/prism-core';
-import { getBrightcove, getUrlBase } from 'js/utils/util';
-import { useTranslation } from 'react-i18next';
-
-import { getUrlAndAddItToClipboard } from '../VideoLinks';
-
-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 [isShorteningUrl, setIsShorteningUrl] = useState<boolean>(false);
-  const [isCopied, setIsCopied] = useState<boolean>(false);
-  const copiedTimeoutRef = useRef<ReturnType<typeof setTimeout>>();
-  const shortenRequestRef = useRef<number>(0);
-
-  useEffect(
-    () => () => {
-      shortenRequestRef.current += 1;
-      if (copiedTimeoutRef.current) {
-        clearTimeout(copiedTimeoutRef.current);
-      }
-      setIsShorteningUrl(false);
-      setIsCopied(false);
-    },
-    [previewUrl],
-  );
-
-  const notifyMissingPreviewUrl = useCallback(() => {
-    getBrightcove().Toaster.error({
-      title: t('toasterTitle') as string,
-      message: 'Please select a player first',
-    });
-  }, [t]);
-
-  const showCopiedFeedback = useCallback(() => {
-    if (copiedTimeoutRef.current) {
-      clearTimeout(copiedTimeoutRef.current);
-    }
-    setIsCopied(true);
-    copiedTimeoutRef.current = setTimeout(() => setIsCopied(false), 2000);
-  }, []);
-
-  const handleCopyFullUrl = useCallback(() => {
-    if (!previewUrl) {
-      notifyMissingPreviewUrl();
-      return;
-    }
-    navigator.clipboard
-      .writeText(previewUrl)
-      .then(showCopiedFeedback)
-      .catch(() => {
-        getBrightcove().Toaster.error({
-          message: t('toasterErrorMessage') as string,
-        });
-      });
-  }, [previewUrl, t, notifyMissingPreviewUrl, showCopiedFeedback]);
-
-  const handleCopyShortUrl = useCallback(() => {
-    if (!previewUrl) {
-      notifyMissingPreviewUrl();
-      return;
-    }
-    const requestId = shortenRequestRef.current + 1;
-    shortenRequestRef.current = requestId;
-    const isCurrentRequest = () => shortenRequestRef.current === requestId;
-
-    setIsShorteningUrl(true);
-    getUrlAndAddItToClipboard(previewUrl)
-      .then(() => {
-        if (isCurrentRequest()) {
-          showCopiedFeedback();
-        }
-      })
-      .catch(() => {
-        if (isCurrentRequest()) {
-          getBrightcove().Toaster.error({
-            message: t('toasterGetURLError') as string,
-          });
-        }
-      })
-      .finally(() => {
-        if (isCurrentRequest()) {
-          setIsShorteningUrl(false);
-        }
-      });
-  }, [previewUrl, t, notifyMissingPreviewUrl, showCopiedFeedback]);
-
-  const copyUrlOptions = useMemo(
-    () => [
-      {
-        id: 'short-url',
-        label: t('prism.shortURL') as string,
-        icon: 'LAYERS_SUBTRACT',
-        onClick: handleCopyShortUrl,
-        disabled: isShorteningUrl,
-      },
-      {
-        id: 'full-url',
-        label: t('prism.fullURL') as string,
-        icon: 'LAYERS_SUBTRACT',
-        onClick: handleCopyFullUrl,
-      },
-    ],
-    [t, handleCopyShortUrl, handleCopyFullUrl, isShorteningUrl],
-  );
-
-  const copyUrlLabel = () => {
-    if (isCopied) {
-      return t('prism.copied') as string;
-    }
-    if (isShorteningUrl) {
-      return t('prism.copying') as string;
-    }
-    return t('prism.copyURL') as string;
-  };
-
-  const handleOpenPreview = useCallback(() => {
-    if (!previewUrl) {
-      notifyMissingPreviewUrl();
-      return;
-    }
-    window.open(previewUrl, '_blank', 'noopener,noreferrer');
-  }, [previewUrl, notifyMissingPreviewUrl]);
-
-  // 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}>
-        <PrismButtonDropdown
-          variant='Primary'
-          size='small'
-          options={copyUrlOptions}
-          modalTitle={t('prism.copyURL') as string}
-          showDropdownIcon={!isCopied && !isShorteningUrl}
-          {...(isCopied ? { rightIcon: 'CHECK' } : {})}
-          disabled={!previewUrl || isShorteningUrl || isCopied}
-        >
-          {copyUrlLabel()}
-        </PrismButtonDropdown>
-        <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

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

package/src/js/constants/baseUrls.ts

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

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

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

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

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

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

@@ -1,26 +0,0 @@
-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 });
-};