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

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

package/src/js/utils/util.ts

@@ -0,0 +1,153 @@
+import {
+  QA_URL,
+  PROD_URL,
+  QA_PREVIEW_URL,
+  PROD_PREVIEW_URL,
+} from 'js/constants/baseUrls';
+import { StudioModule, StudioBrightcove } from 'types/studio';
+import { PlayerSelectItem } from '../types/players';
+
+const QA = 'qa';
+const PRODUCTION = 'production';
+const TITLE_CHAR_LIMIT = 60;
+export const ROLES = {
+  PUBLISHING: 'PUBLISHING',
+};
+export const PREVIEW_URL_BASE = () => {
+  const env = getStudioEnvironment();
+  const envMap = {
+    qa: '.qa',
+    staging: '.staging',
+    production: '',
+  };
+  return `//preview-players${envMap[env]}.brightcove.net/v2/accounts`;
+};
+
+/**
+ * Get the studio environment as a string.
+ * @returns the studio environment
+ */
+export function getStudioEnvironment(): string {
+  return window.StudioModule?.config.product.env || PRODUCTION;
+}
+
+/**
+ * Is the module running in QA environment?
+ */
+export function isQA() {
+  return getStudioEnvironment() === QA;
+}
+
+/**
+ * Gets the correct player url base depending on environment
+ */
+export function getUrlBase() {
+  return isQA() ? QA_URL : PROD_URL;
+}
+
+/**
+ *
+ * @param options : array of PlayerSelectItem
+ * @returns options ordered ascending
+ */
+export function sortAsc(options: PlayerSelectItem[]): PlayerSelectItem[] {
+  return options.sort((a, b) => a.label.localeCompare(b.label));
+}
+
+export type VideoPreviewLinkOptions = {
+  accountId: string;
+  videoId?: string;
+  interactivityProjectId?: string;
+  playerId: string;
+  adConfigId?: string;
+  livePlaybackToken?: string;
+};
+/**
+ *
+ * @param accountId : accountId of current user
+ * @param videoId : VideoPayload type info
+ * @param interactivityProjectId : id of interactivity project
+ * @param playerId : playerId used for preview
+ * @returns a working preview link with given information
+ * @param adConfigId : token for live playback
+ * @param livePlaybackToken : token for live playback
+ */
+export const getVideoPreviewLink = (options: VideoPreviewLinkOptions) => {
+  const {
+    accountId,
+    videoId,
+    interactivityProjectId,
+    playerId,
+    adConfigId,
+    livePlaybackToken,
+  } = options;
+  const params = new URLSearchParams();
+  if (interactivityProjectId) {
+    params.append('interactivityProjectId', interactivityProjectId);
+  }
+
+  if (videoId) {
+    params.append('videoId', videoId);
+  }
+
+  if (adConfigId) {
+    params.append('adConfigId', adConfigId);
+  }
+
+  if (livePlaybackToken) {
+    params.append('livePlaybackToken', livePlaybackToken);
+  }
+  const paramsString = params.toString();
+  return `${getUrlBase()}${accountId}/${playerId}_default/index.html${
+    paramsString !== '' ? `?${paramsString}` : ''
+  }`;
+};
+
+/**
+ * Truncates a video title property
+ * @param videoName - video title
+ * @returns  truncated video title
+ */
+export const truncateVideoTitle = (videoName: string): string => {
+  if (videoName.length > TITLE_CHAR_LIMIT) {
+    return `${videoName.substring(0, TITLE_CHAR_LIMIT).trim()}...`;
+  }
+  return videoName;
+};
+
+export function getPreviewUrlBase() {
+  return isQA() ? QA_PREVIEW_URL : PROD_PREVIEW_URL;
+}
+
+/**
+ *
+ * @param accountId : account id of current user
+ * @param playerId : playerId used for preview
+ * @returns a working preview url with given information
+ */
+export const getPreviewPlayerUrl = (
+  accountId: string,
+  playerId: string,
+): string =>
+  `${getPreviewUrlBase()}/v2/accounts/${accountId}/players/${playerId}/preview/embeds/default/master/index.html`;
+
+export const getStudioModule = (): StudioModule => window.StudioModule;
+
+export const getBrightcove = (): StudioBrightcove => window.brightcove;
+
+export function getProductPath(): string {
+  return getStudioModule()?.config?.product?.path || '/products/videocloud';
+}
+
+/**
+ * @returns Player Manager Module URL
+ */
+export const getPlayerManagerModuleUrl = () => {
+  return `${getProductPath()}/players`;
+};
+
+export const decodeHtmlEntities = (str: string) => {
+  const textarea = document.createElement('textarea');
+  textarea.innerHTML = str;
+  return textarea.value;
+};