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

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

package/src/js/types/EmbedCodeProps.ts

@@ -0,0 +1,13 @@
+import { EmbedCodeProperties } from './EmbedCodeModalProps';
+
+export type EmbedCodeProps = {
+  iframe: boolean;
+  accountId: string;
+  videoId?: string;
+  playerId: string;
+  interactivityProjectId?: string;
+  embedCodeProperties?: EmbedCodeProperties;
+  isOutstreamPlayer?: boolean;
+  livePlaybackToken?: string;
+  adConfigId?: string;
+};

package/src/js/types/brightcoveEmbedCode.d.ts

@@ -0,0 +1,18 @@
+declare module '@brightcove/player-embed-code' {
+  export interface EmbedCodeOptions {
+    accountId: string;
+    playerId?: string;
+    iframe?: boolean;
+    videoId?: string;
+    interactivityProjectId?: string;
+    width?: number;
+    height?: number;
+    responsive?: boolean;
+    urlBase?: string;
+    playlistIsHorizontal?: boolean;
+  }
+
+  export default function brightcoveEmbedCode(
+    options: EmbedCodeOptions,
+  ): string;
+}

package/src/js/types/players.ts

@@ -0,0 +1,64 @@
+export type PlayerSelectItem = {
+  label: string;
+  value: string;
+};
+
+export type PlayersObjectItem = {
+  label: string;
+  id: string;
+  hasCustomPlugins: boolean;
+  hasCampaignPlugin: boolean;
+  hasInteractivityPlugin: boolean;
+  hasViewerIDSource: boolean;
+  hasBcMapTracking: boolean;
+};
+
+export type PlayersObject = {
+  [key: string]: PlayersObjectItem;
+};
+
+export type PlayerItem = {
+  account_id: string;
+  id: string;
+  name: string;
+  description: string;
+  branches: object;
+  created_at: string;
+  embed_count: number;
+  url: string;
+};
+
+export type GetPlayersPayload = {
+  item_count: number;
+  items: PlayerItem[];
+};
+
+export type TabsSelectedId = string | number | undefined;
+
+export type CreatePlayerPayload = {
+  data: {
+    name: string;
+    description?: string;
+    configuration?: {
+      autoplay?;
+      loop?: boolean;
+      video_cloud?: {
+        video: string;
+      };
+      plugins?: {
+        registry_id: string;
+        version: string;
+      }[];
+    };
+  };
+};
+
+export type CreatePlayerResponse = {
+  id: string;
+  url: string;
+  embed_code: string;
+  embed_in_page: string;
+  preview_url: string;
+  preview_embed_in_page: string;
+  preview_embed_code: string;
+};

package/src/js/types/react-i18next.d.ts

@@ -0,0 +1,8 @@
+import 'react-i18next';
+import { resources } from 'js/i18n';
+
+declare module 'react-i18next' {
+  interface CustomTypeOptions {
+    resources: typeof resources.en;
+  }
+}

package/src/js/types/studioModule.ts

@@ -0,0 +1,7 @@
+import { StudioModule, StudioBrightcove } from 'types/studio';
+declare global {
+  interface Window {
+    StudioModule: StudioModule;
+    brightcove: StudioBrightcove;
+  }
+}

package/src/js/utils/addPluginsDataToPlayers.ts

@@ -0,0 +1,59 @@
+import { sortAsc } from 'js/utils/util';
+import {
+  GetPlayersPayload,
+  PlayerSelectItem,
+  PlayersObject,
+} from 'js/types/players';
+import {
+  bcHostedPlugins,
+  CAMPAIGN_PLUGIN_NAME,
+  INTERACTIVITY_REGISTRY_ID,
+  INTERACTIVITY_PLUGIN_NAME,
+  VIEWER_ID_KEY_NAME,
+  BC_MAP_TRACKING_NAME,
+} from 'js/constants/pluginsRegistry';
+
+export function addPluginsDataToPlayers(players: GetPlayersPayload) {
+  const playerListForSelection: PlayerSelectItem[] = [];
+  const playersObject: PlayersObject = {};
+  players?.items.forEach((player) => {
+    const playerConfig = player.branches['master'].configuration;
+    const plugins = playerConfig.plugins ?? [];
+    const hasPlugins = plugins ? plugins.length > 0 : false;
+
+    let hasBCHostedPlugin = false;
+    let hasCampaignPlugin = false;
+    let hasInteractivityPlugin = false;
+    const hasViewerIDSource = !!playerConfig[VIEWER_ID_KEY_NAME];
+    let hasBcMapTracking = false;
+
+    for (const plugin of plugins) {
+      const { name } = plugin;
+      hasBCHostedPlugin = bcHostedPlugins.includes(name);
+      hasCampaignPlugin =
+        hasCampaignPlugin || plugin.name === CAMPAIGN_PLUGIN_NAME;
+      hasInteractivityPlugin =
+        hasInteractivityPlugin ||
+        plugin.registry_id === INTERACTIVITY_REGISTRY_ID ||
+        plugin.name === INTERACTIVITY_PLUGIN_NAME;
+      hasBcMapTracking =
+        hasBcMapTracking || plugin.name === BC_MAP_TRACKING_NAME;
+    }
+
+    playerListForSelection.push({ label: player.name, value: player.id });
+    playersObject[player.id] = {
+      label: player.name,
+      id: player.id,
+      hasCustomPlugins: !hasBCHostedPlugin && hasPlugins,
+      hasCampaignPlugin,
+      hasInteractivityPlugin,
+      hasViewerIDSource,
+      hasBcMapTracking,
+    };
+  });
+
+  return {
+    players: playersObject,
+    playerListForSelection: sortAsc(playerListForSelection),
+  };
+}

package/src/js/utils/call.ts

@@ -0,0 +1,31 @@
+const getStudioConfig = () => window.StudioModule.config;
+
+export const getAccountId = (): string => {
+  const config = getStudioConfig();
+  return config.user.currentAccount.id;
+};
+
+export const getConfig = () => {
+  const config = getStudioConfig();
+  const apiConfig = {
+    publisherId: getAccountId(),
+    api: config.module.api,
+  };
+  return { apiConfig };
+};
+
+export const call = <T>(options): Promise<T> => {
+  const studioModule = window.StudioModule;
+  const api = studioModule.api();
+
+  const callback = (resolve, reject) => {
+    api.call(options, resolve, reject);
+  };
+
+  return new Promise(callback);
+};
+
+export const callAPI = <T>(apiEndpoint, apiArgs) => {
+  const endpoint = apiEndpoint({ ...apiArgs, ...getConfig() });
+  return call<T>(endpoint);
+};

package/src/js/utils/dimensions.ts

@@ -0,0 +1,53 @@
+import { EmbedCodeAspectRatio } from 'js/types/EmbedCodeModalProps';
+
+const precision = 100;
+export const calculateHeight = (
+  height: number,
+  aspectRatio: EmbedCodeAspectRatio,
+) => {
+  height = isNaN(height) ? 0 : height;
+  let newHeight: number;
+  switch (aspectRatio) {
+    case EmbedCodeAspectRatio.CUSTOM:
+      return height;
+    case EmbedCodeAspectRatio.ONE_ONE:
+      newHeight = height;
+      break;
+    case EmbedCodeAspectRatio.FOUR_THREE:
+      newHeight = height / (4 / 3);
+      break;
+    case EmbedCodeAspectRatio.NINE_SIXTEEN:
+      newHeight = height / (9 / 16);
+      break;
+    case EmbedCodeAspectRatio.SIXTEEN_NINE:
+    default:
+      newHeight = height / (16 / 9);
+      break;
+  }
+  return Math.round(precision * newHeight) / precision;
+};
+
+export const calculateWidthForVerticalAspectRatio = (width: number) => {
+  return (Math.round(precision * (width * (9 / 16))) / precision).toString();
+};
+
+export const shouldUpdateWidth = (
+  oldAspectRatio: EmbedCodeAspectRatio,
+  aspectRatio: EmbedCodeAspectRatio,
+) =>
+  oldAspectRatio !== EmbedCodeAspectRatio.NINE_SIXTEEN &&
+  aspectRatio === EmbedCodeAspectRatio.NINE_SIXTEEN;
+
+export const calculateDimensions = (
+  calculateNewWidth: boolean,
+  aspectRatio: EmbedCodeAspectRatio,
+  width: number,
+  height: number,
+) => {
+  return {
+    height: calculateNewWidth ? width : calculateHeight(height, aspectRatio),
+    width: calculateNewWidth
+      ? calculateWidthForVerticalAspectRatio(width)
+      : height,
+  };
+};

package/src/js/utils/embedCodeGenerator.ts

@@ -0,0 +1,120 @@
+import brightcoveEmbedCode from '@brightcove/player-embed-code';
+import { getUrlBase, decodeHtmlEntities } from 'js/utils/util';
+import {
+  EmbedCodeProperties,
+  EmbedCodeUnits,
+  EmbedCodeAspectRatio,
+} from 'js/types/EmbedCodeModalProps';
+
+interface GenerateEmbedCodeParams {
+  accountId: string;
+  playerId: string;
+  videoId?: string;
+  embedProperties: EmbedCodeProperties;
+  isCampaign?: boolean;
+  isViewerIdSource?: boolean;
+  isBcMapTracking?: boolean;
+  interactivityProjectId?: string;
+  livePlaybackToken?: string;
+  adConfigId?: string;
+}
+
+const DEFAULT_HEIGHT = 540;
+const DEFAULT_WIDTH = 960;
+
+const defaultConfig = {
+  responsive: false,
+  width: DEFAULT_WIDTH,
+  height: DEFAULT_HEIGHT,
+  urlBase: getUrlBase(),
+  playlistIsHorizontal: true,
+  units: EmbedCodeUnits.PX,
+  aspectRatio: EmbedCodeAspectRatio.FLUID,
+};
+
+// Breaks the single-line embed snippet onto multiple lines so the
+// PrismCodeCard gutter renders one line number per attribute.
+export const formatEmbedSnippet = (snippet: string): string =>
+  snippet
+    .replace(/<(iframe|video-js|script)\s+/g, '<$1\n  ')
+    .replace(/"\s+([a-zA-Z-]+=)/g, '"\n  $1')
+    .replace(/>\s*<script/g, '>\n<script');
+
+const normalizeEmbedProperties = (
+  embedProperties: EmbedCodeProperties,
+): EmbedCodeProperties =>
+  embedProperties.aspectRatio === EmbedCodeAspectRatio.CUSTOM
+    ? { ...embedProperties, aspectRatio: EmbedCodeAspectRatio.FLUID }
+    : embedProperties;
+
+export const generateEmbedCode = ({
+  accountId,
+  playerId,
+  videoId,
+  embedProperties,
+  interactivityProjectId,
+  livePlaybackToken,
+  adConfigId,
+}: GenerateEmbedCodeParams): { embedCode: string; embedCodeJS: string } => {
+  const normalizedEmbedProperties = normalizeEmbedProperties(embedProperties);
+
+  const baseConfig = {
+    accountId,
+    playerId,
+    videoId,
+    livePlaybackToken,
+    adConfigId,
+    interactivityProjectId,
+  };
+
+  // Generate iFrame embed code
+  const iframeConfig = Object.assign(
+    {},
+    {
+      ...defaultConfig,
+      ...baseConfig,
+      ...normalizedEmbedProperties,
+      iframe: true,
+    },
+  );
+
+  if (iframeConfig.aspectRatio) {
+    const { ...rest } = iframeConfig;
+    const iframeCode = brightcoveEmbedCode(rest);
+    const embedCode = formatEmbedSnippet(decodeHtmlEntities(iframeCode));
+
+    // Generate JavaScript embed code
+    const jsConfig = Object.assign(
+      {},
+      {
+        ...defaultConfig,
+        ...baseConfig,
+        ...normalizedEmbedProperties,
+        iframe: false,
+      },
+    );
+    const { ...jsRest } = jsConfig;
+    const jsCode = brightcoveEmbedCode(jsRest);
+    const embedCodeJS = formatEmbedSnippet(decodeHtmlEntities(jsCode));
+
+    return { embedCode, embedCodeJS };
+  }
+
+  const iframeCode = brightcoveEmbedCode(iframeConfig);
+  const embedCode = formatEmbedSnippet(decodeHtmlEntities(iframeCode));
+
+  // Generate JavaScript embed code
+  const jsConfig = Object.assign(
+    {},
+    {
+      ...defaultConfig,
+      ...baseConfig,
+      ...normalizedEmbedProperties,
+      iframe: false,
+    },
+  );
+  const jsCode = brightcoveEmbedCode(jsConfig);
+  const embedCodeJS = formatEmbedSnippet(decodeHtmlEntities(jsCode));
+
+  return { embedCode, embedCodeJS };
+};

package/src/js/utils/featureSwitches.ts

@@ -0,0 +1,16 @@
+import {
+  DEFAULT_PLAYER_ID,
+  FAVORITE_PLAYER_SETTING,
+} from 'js/constants/player';
+
+const getStudioModule = () => window.StudioModule;
+const getUser = () => getStudioModule()?.getUser();
+
+// Gets the favorite player in a user's account
+// If the setting value is not found, use default player
+export const getFavoritePlayer = (): string => {
+  const user = getUser();
+  const favoritePlayerSetting =
+    user.currentAccount.settings.account[FAVORITE_PLAYER_SETTING];
+  return (favoritePlayerSetting?.values as string) ?? DEFAULT_PLAYER_ID;
+};