@brightcove/components-embed-code-modal 0.8.2 → 0.8.3

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

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