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

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

@@ -0,0 +1,356 @@
+import React, { useState, useCallback, useEffect, 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 }>;
+  onEmbedCodeChange?: (code: string) => void;
+}
+
+export const PrismPlayerControls = ({
+  video,
+  players,
+  playerListForSelection,
+  selectedPlayer,
+  onPlayerChange,
+  embedProperties,
+  setEmbedProperties,
+  showDVR,
+  onDVRClick,
+  dvrTime,
+  showLowLatency,
+  onLowLatencyClick,
+  adConfigValue,
+  onAdConfigChange,
+  ssai,
+  adConfigOptions = [],
+  onEmbedCodeChange,
+}: 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 requiresJsEmbed = Boolean(
+    player?.hasCampaignPlugin ||
+      player?.hasViewerIDSource ||
+      player?.hasBcMapTracking,
+  );
+
+  useEffect(() => {
+    onEmbedCodeChange?.(requiresJsEmbed ? embedCodeJS : embedCode);
+  }, [embedCode, embedCodeJS, requiresJsEmbed, onEmbedCodeChange]);
+
+  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);
+      }
+    },
+    [onDVRClick],
+  );
+
+  const handleLowLatencyChange = useCallback(
+    (checked: boolean) => {
+      setLowLatencyEnabled(checked);
+      if (onLowLatencyClick) {
+        onLowLatencyClick(checked);
+      }
+    },
+    [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}>
+        <div className={css.prismSizingField}>
+          <PrismInput
+            variant='FieldGroup'
+            fullWidth
+            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', '%']}
+          />
+        </div>
+
+        <PrismIconButton
+          icon='link'
+          variant='Ghost'
+          size='small'
+          onClick={toggleAspectRatioLock}
+          disabled={embedProperties.aspectRatio === EmbedCodeAspectRatio.CUSTOM}
+          className={css.prismLinkButton}
+        />
+
+        <div className={css.prismSizingField}>
+          <PrismInput
+            variant='FieldGroup'
+            fullWidth
+            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>
+      </div>
+
+      {/* DVR Checkbox (conditional) */}
+      {showDVR && (
+        <div>
+          <PrismCheckbox
+            label={(t('dvr.allowDVR') as string) || 'Enable DVR'}
+            checked={dvrEnabled}
+            onChange={(e) => handleDVRChange(e.target.checked)}
+            disabled={false}
+          />
+          {dvrEnabled && typeof dvrTime === 'number' && (
+            <div className={css.prismInputGroup}>
+              <PrismInput
+                variant='FieldGroup'
+                fullWidth
+                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={false}
+        />
+      )}
+
+      {/* 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>
+      )}
+
+      <div className={css.prismCodeCard}>
+        <PrismCodeCard indefiniteGrow tabs={codeCardTabs} />
+      </div>
+    </div>
+  );
+};

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

@@ -0,0 +1,200 @@
+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;
+  isMobile?: boolean;
+}
+
+export const PrismPlayerPreview = ({
+  accountId,
+  playerId,
+  videoId,
+  previewUrl,
+  isMobile,
+}: 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 isMobile
+      ? (t('urlShort') as string)
+      : (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={isMobile ? 'Secondary' : 'Primary'}
+          {...(isMobile ? { size: 'mobile' as const, fullWidth: true } : {})}
+          options={copyUrlOptions}
+          modalTitle={t('prism.copyURL') as string}
+          showDropdownIcon={!isCopied && !isShorteningUrl}
+          {...(isCopied ? { rightIcon: 'CHECK' } : {})}
+          disabled={!previewUrl || isShorteningUrl || isCopied}
+        >
+          {copyUrlLabel()}
+        </PrismButtonDropdown>
+        <PrismButton
+          variant={isMobile ? 'Secondary' : 'Primary'}
+          {...(isMobile ? { size: 'mobile' as const, fullWidth: true } : {})}
+          onClick={handleOpenPreview}
+          rightIcon='link'
+          disabled={!previewUrl}
+        >
+          {isMobile
+            ? (t('previewShort') as string)
+            : (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/hooks/useIsMobile.ts

@@ -0,0 +1,33 @@
+import { useEffect, useState } from 'react';
+
+const MOBILE_MEDIA_QUERY = '(max-width: 1023px)';
+
+const getMatches = (): boolean =>
+  typeof window !== 'undefined' && typeof window.matchMedia === 'function'
+    ? window.matchMedia(MOBILE_MEDIA_QUERY).matches
+    : false;
+
+const useIsMobile = (): boolean => {
+  const [isMobile, setIsMobile] = useState<boolean>(getMatches);
+
+  useEffect(() => {
+    if (
+      typeof window === 'undefined' ||
+      typeof window.matchMedia !== 'function'
+    ) {
+      return;
+    }
+
+    const mql = window.matchMedia(MOBILE_MEDIA_QUERY);
+    const handleChange = (event: MediaQueryListEvent) =>
+      setIsMobile(event.matches);
+
+    setIsMobile(mql.matches);
+    mql.addEventListener('change', handleChange);
+    return () => mql.removeEventListener('change', handleChange);
+  }, []);
+
+  return isMobile;
+};
+
+export default useIsMobile;