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

package/src/js/services/url-shortener.ts

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

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

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

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

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

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

package/src/js/types/studioModule.ts

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

package/src/js/utils/addPluginsDataToPlayers.ts

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

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

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

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

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

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