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

package/src/translations/es.json

@@ -0,0 +1,65 @@
+{
+  "modalHeader": "Incrustar en sitio web",
+  "mediaNotice": "Utilizará el reproductor predeterminado de su cuenta",
+  "tooltipText": "Actualmente se está utilizando el reproductor predeterminado de Brightcove. La gestión de reproductores estará disponible próximamente.",
+  "tooltipTextNew": "Los reproductores determinan la experiencia del usuario a la hora de reproducir vídeos por medio de ajustes como el estilo del reproductor, ajustes de configuración especiales y otros.",
+  "tooltipLink": "Más información sobre reproductores",
+  "learnmore": "https://es.studio.support.brightcove.com/players/getting-started-players-module.html",
+  "previewButton": "Vista previa",
+  "player": "Reproductor",
+  "getURL": "Obtener URL",
+  "tabs": {
+    "labels": {
+      "iframe": "iframe",
+      "javascript": "JavaScript"
+    },
+    "helperText": "Copie el código HTML y péguelo en su sitio web.",
+    "helperTextWarning": "Este reproductor está configurado con el complemento Campaign. Para garantizar un seguimiento adecuado, debe utilizarse el código de incrustación JavaScript.",
+    "viewerIdTextWarning": "Este reproductor está configurado con el seguimiento de identificadores de espectadores. Para garantizar un seguimiento correcto, debe utilizarse el código de incrustación JavaScript.",
+    "bcMapTrackingTextWarning": "This player is configured with MAPs Tracking. To ensure proper tracking, the JavaScript embed code should be used."
+  },
+  "toasterTitle": "Operación realizada correctamente.",
+  "toasterMessage": "Código copiado al portapapeles",
+  "toasterGetURLSuccess": "URL copiada al portapapeles",
+  "toasterGetURLError": "No es posible generar la URL",
+  "toasterErrorMessage": "Se ha producido un error al copiar el texto al portapapeles.",
+  "customPluginNotice": "Puede ocurrir que las configuraciones personalizadas impidan la previsualización completa.",
+  "done": "Hecho",
+  "close": "Cerrar",
+  "noPlayerModalHeader": "Crear un reproductor de interactividad",
+  "noPlayerModalContent1": "Para poder incrustar un proyecto de interactividad, primero hay que activar la función de interactividad.",
+  "noPlayerModalContent2": "Active esta función en cualquier reproductor existente o cree uno nuevo.",
+  "toPlayersModuleLink": "Ir al módulo Players",
+  "cancel": "Cancelar",
+  "createPlayerNow": "Crear reproductor ahora",
+  "createPlayerFailedTitle": "No ha sido posible crear el reproductor con la interactividad activada.",
+  "createPlayerFailedMessage": "Vuelva a intentarlo.",
+  "activateModal": "No hay ningún reproductor con la interactividad activada",
+  "activateModalContent1": "Para poder incrustar proyectos, se precisa un reproductor con la interactividad activada. En este momento, esta cuenta no tiene reproductores con la interactividad activada. Para crear uno, utilice el ",
+  "activateModalContent2": "Módulo Players",
+  "customSettings": {
+    "sizing": "Dimensionamiento",
+    "aspectRatio": "Relación de aspecto",
+    "playerWidth": "Anchura del reproductor",
+    "playerHeight": "Altura del reproductor",
+    "units": "Unidades"
+  },
+  "lowLatency": "Baja latencia",
+  "dvr": {
+    "allowDVR": "Permitir DVR",
+    "inputLabel": "Tiempo",
+    "inputDescription": "El tiempo, en segundos, que se mantendrá en el manifiesto del DVR en directo",
+    "unit": "seg"
+  },
+  "adConfiguration": "Configuración de Anuncios",
+  "prism": {
+    "copying": "Copiando...",
+    "copied": "Copiado",
+    "copyURL": "Copiar URL",
+    "shortURL": "URL corta",
+    "fullURL": "URL completa",
+    "customSettings": {
+      "sizing": "Tamaño del Reproductor"
+    }
+  }
+}

package/src/translations/fr.json

@@ -0,0 +1,65 @@
+{
+  "modalHeader": "Intégration à un site Internet",
+  "mediaNotice": "Ceci utilisera le lecteur par défaut de votre compte",
+  "tooltipText": "Utilise actuellement le lecteur Brightcove par défaut. La fonctionnalité de gestion des lecteurs sera bientôt disponible.",
+  "tooltipTextNew": "Les joueurs choisissent l'expérience de lecture vidéo comme l'apparence, les paramètres de configuration spéciaux, et plus.",
+  "tooltipLink": "En savoir plus sur les lecteurs",
+  "learnmore": "https://fr.studio.support.brightcove.com/players/getting-started-players-module.html",
+  "previewButton": "Aperçu",
+  "player": "Player",
+  "getURL": "Obtenir l'URL",
+  "tabs": {
+    "labels": {
+      "iframe": "iframe",
+      "javascript": "JavaScript"
+    },
+    "helperText": "Copiez le code HTML et collez-le dans votre site Internet.",
+    "helperTextWarning": "Ce joueur est configuré avec le plug-in Campaign. Pour garantir un suivi adéquat, le code incorporé JavaScript doit être utilisé.",
+    "viewerIdTextWarning": "Ce joueur est configuré avec le suivi des ID spectateurs. Pour garantir un suivi adéquat, le code incorporé JavaScript doit être utilisé.",
+    "bcMapTrackingTextWarning": "This player is configured with MAPs Tracking. To ensure proper tracking, the JavaScript embed code should be used."
+  },
+  "toasterTitle": "Réussite.",
+  "toasterMessage": "Code copié dans le presse-papiers",
+  "toasterGetURLSuccess": "URL copiée dans le presse-papiers",
+  "toasterGetURLError": "Impossible de générer l'URL",
+  "toasterErrorMessage": "Erreur lors de la copie du texte dans le presse-papiers",
+  "customPluginNotice": "En raison des configurations personnalisées, vous pourriez ne pas pouvoir visualiser l'aperçu plein écran.",
+  "done": "Terminé",
+  "close": "Fermer",
+  "noPlayerModalHeader": "Créer un lecteur d’interactivité",
+  "noPlayerModalContent1": "Pour intégrer un projet d’interactivité vous devez activer la fonction d’interactivité.",
+  "noPlayerModalContent2": "Activez cette fonction sur un lecteur existant ou créez-en un nouveau.",
+  "toPlayersModuleLink": "Accéder au module Lecteurs",
+  "cancel": "Annuler",
+  "createPlayerNow": "Créer un lecteur maintenant",
+  "createPlayerFailedTitle": "Impossible de créer le lecteur compatible à l’interactivité.",
+  "createPlayerFailedMessage": "Veuillez réessayer.",
+  "activateModal": "Aucun lecteur compatible à l’interactivité.",
+  "activateModalContent1": "Un lecteur compatible à l’interactivité est obligatoire pour intégrer un projet. Actuellement, ce compte ne contient aucun lecteur compatible à l’interactivité. Pour en créer un, utilisez le ",
+  "activateModalContent2": "module Lecteurs",
+  "customSettings": {
+    "sizing": "Redimensionnement",
+    "aspectRatio": "Ratio d'aspect",
+    "playerWidth": "Largeur du lecteur",
+    "playerHeight": "Hauteur du lecteur",
+    "units": "Unités"
+  },
+  "lowLatency": "Faible latence",
+  "adConfiguration": "Configuration des Annonces",
+  "dvr": {
+    "allowDVR": "Permettre le DVR",
+    "inputLabel": "Durée",
+    "inputDescription": "La durée, en secondes, à conserver dans le manifeste DVR en direct",
+    "unit": "s"
+  },
+  "prism": {
+    "copying": "Copie en cours...",
+    "copied": "Copié",
+    "copyURL": "Copier l'URL",
+    "shortURL": "URL courte",
+    "fullURL": "URL complète",
+    "customSettings": {
+      "sizing": "Taille du Lecteur"
+    }
+  }
+}

package/src/translations/ja.json

@@ -0,0 +1,65 @@
+{
+  "modalHeader": "Webサイトに埋め込み",
+  "mediaNotice": "アカウントのデフォルトのプレーヤーを使用します",
+  "tooltipText": "現在、Brightcoveのデフォルトのプレーヤーを使用しています。プレーヤー管理が、間もなく公開されます。",
+  "tooltipTextNew": "プレーヤーは、スタイル指定や特別な設定など、動画再生体験を決定します。",
+  "tooltipLink": "プレーヤーについての詳細",
+  "learnmore": "https://ja.studio.support.brightcove.com/players/getting-started-players-module.html",
+  "previewButton": "プレビュー",
+  "player": "プレーヤー",
+  "getURL": "URLを取得する",
+  "tabs": {
+    "labels": {
+      "iframe": "iframe",
+      "javascript": "JavaScript"
+    },
+    "helperText": "HTMLコードをコピーし、お客様のWebサイトに貼り付けてください。",
+    "helperTextWarning": "このプレーヤーは、キャンペーンプラグインを使って構成されています。適切にトラッキングするには、 JavaScript埋め込みコードを使用してください。",
+    "viewerIdTextWarning": "このプレーヤーは、視聴者IDトラッキングを使って構成されています。適切にトラッキングするには、 JavaScript埋め込みコードを使用してください。",
+    "bcMapTrackingTextWarning": "This player is configured with MAPs Tracking. To ensure proper tracking, the JavaScript embed code should be used."
+  },
+  "toasterTitle": "成功。",
+  "toasterMessage": "コードをクリップボードにコピーしました",
+  "toasterGetURLSuccess": "URLをクリップボードにコピーしました",
+  "toasterGetURLError": "URLを生成できません",
+  "toasterErrorMessage": "テキストをクリップボードにコピー中にエラーが発生しました",
+  "customPluginNotice": "カスタム設定により、プレビューが完全でない場合があります。",
+  "done": "完了",
+  "close": "閉じる",
+  "noPlayerModalHeader": "インタラクティブプレーヤーの作成",
+  "noPlayerModalContent1": "インタラクティブプロジェクトを埋め込むには、インタラクティブ機能を有効にする必要があります。",
+  "noPlayerModalContent2": "既存のプレーヤーでこの機能をアクティブ化するか、新しいプレーヤーを作成してください。",
+  "toPlayersModuleLink": "Playersモジュールに移動します",
+  "cancel": "キャンセル",
+  "createPlayerNow": "今すぐプレーヤーを作成",
+  "createPlayerFailedTitle": "インタラクティブ機能対応プレーヤーの作成に失敗しました。",
+  "createPlayerFailedMessage": "もう一度お試しください。",
+  "activateModal": "インタラクティブ機能対応プレーヤーがありません",
+  "activateModalContent1": "プロジェクトを埋め込むには、インタラクティブ機能対応プレーヤーが必要です。現在、このアカウントには、インタラクティブ機能対応プレーヤーがありません。作成するには ",
+  "activateModalContent2": "Playersモジュールを使用します",
+  "customSettings": {
+    "sizing": "サイズ",
+    "aspectRatio": "アスペクト比",
+    "playerWidth": "プレーヤーの幅",
+    "playerHeight": "プレーヤーの高さ",
+    "units": "単位"
+  },
+  "lowLatency": "低遅延",
+  "adConfiguration": "広告設定",
+  "dvr": {
+    "allowDVR": "DVR の許可",
+    "inputLabel": "時間",
+    "inputDescription": "ライブ DVR マニフェストに保持する時間（秒単位）",
+    "unit": "秒"
+  },
+  "prism": {
+    "copying": "コピー中...",
+    "copied": "コピー済み",
+    "copyURL": "URLをコピー",
+    "shortURL": "短縮URL",
+    "fullURL": "完全なURL",
+    "customSettings": {
+      "sizing": "プレーヤーのサイズ"
+    }
+  }
+}

package/src/translations/ko.json

@@ -0,0 +1,65 @@
+{
+  "modalHeader": "웹사이트에 임베드",
+  "mediaNotice": "계정의 기본 플레이어를 사용합니다",
+  "tooltipText": "현재 Brightcove 기본 플레이어 사용 중입니다. 플레이어 관리가 곧 출시됩니다.",
+  "tooltipTextNew": "플레이어는 스타일 지정, 특수 구성 설정 등 비디오 재생 경험을 결정합니다.",
+  "tooltipLink": "플레이어에 대해 자세히 알아보기",
+  "learnmore": "https://ko.studio.support.brightcove.com/players/getting-started-players-module.html",
+  "previewButton": "미리 보기",
+  "player": "플레이어",
+  "getURL": "URL 받기",
+  "tabs": {
+    "labels": {
+      "iframe": "iframe",
+      "javascript": "JavaScript"
+    },
+    "helperText": "HTML 코드를 복사하여 웹사이트에 붙여넣으십시오.",
+    "helperTextWarning": "이 플레이어는 캠페인 플러그인과 함께 구성됩니다. 바르게 추적되게 하려면, JavaScript 내장 코드를 사용해야 합니다.",
+    "viewerIdTextWarning": "이 플레이어는 시청자 ID 트래킹과 함께 구성됩니다. 바르게 추적되게 하려면, JavaScript 내장 코드를 사용해야 합니다.",
+    "bcMapTrackingTextWarning": "This player is configured with MAPs Tracking. To ensure proper tracking, the JavaScript embed code should be used."
+  },
+  "toasterTitle": "성공.",
+  "toasterMessage": "클립보드에 코드가 복사됨",
+  "toasterGetURLSuccess": "URL이 클립보드에 복사됨",
+  "toasterGetURLError": "URL 생성 불가",
+  "toasterErrorMessage": "클립보드에 텍스트를 복사하는 중 오류 발생",
+  "customPluginNotice": "사용자 정의 구성으로 인해 전체 미리 보기를 이용하지 못할 수도 있습니다.",
+  "done": "완료",
+  "close": "닫기",
+  "noPlayerModalHeader": "상호작용성 플레이어 생성",
+  "noPlayerModalContent1": "상호작용성 프로젝트를 임베딩하려면 상호작용성 기능을 활성화해야 합니다.",
+  "noPlayerModalContent2": "기존 플레이어에서 이 기능을 활성화하거나 새 플레이어를 생성하십시오.",
+  "toPlayersModuleLink": "플레이어 모듈로 이동",
+  "cancel": "취소",
+  "createPlayerNow": "지금 플레이어 생성",
+  "createPlayerFailedTitle": "상호작용성 지원 플레이어를 생성하지 못했습니다.",
+  "createPlayerFailedMessage": "다시 시도해 주십시오.",
+  "activateModal": "상호작용성 지원 플레이어가 없음",
+  "activateModalContent1": "프로젝트를 임베딩하려면 상호작용성 지원 플레이어가 필요합니다. 현재 이 계정에는 상호작용성 지원 플레이어가 없습니다. 다음을 사용해 새 플레이어 생성 ",
+  "activateModalContent2": "플레이어 모듈",
+  "customSettings": {
+    "sizing": "크기 조정",
+    "aspectRatio": "가로 세로 비율",
+    "playerWidth": "플레이어 너비",
+    "playerHeight": "플레이어 높이",
+    "units": "단위"
+  },
+  "lowLatency": "저지연성",
+  "adConfiguration": "광고 구성",
+  "dvr": {
+    "allowDVR": "DVR 허용",
+    "inputLabel": "시간",
+    "inputDescription": "라이브 DVR 매니페스트에 유지할 시간(초)",
+    "unit": "초"
+  },
+  "prism": {
+    "copying": "복사 중...",
+    "copied": "복사됨",
+    "copyURL": "URL 복사",
+    "shortURL": "짧은 URL",
+    "fullURL": "전체 URL",
+    "customSettings": {
+      "sizing": "플레이어 크기"
+    }
+  }
+}

package/src/translations/zh.json

@@ -0,0 +1,65 @@
+{
+  "modalHeader": "內嵌到網站",
+  "mediaNotice": "會使用您帳戶的預設播放程式",
+  "tooltipText": "目前使用 Brightcove 預設播放程式。播放程式管理功能即將推出。",
+  "tooltipTextNew": "播放器決定視訊播放體驗，例如樣式風格、特別組態設定等。",
+  "tooltipLink": "瞭解關於播放程式的更多資訊",
+  "learnmore": "https://zh-tw.studio.support.brightcove.com/players/getting-started-players-module.html",
+  "previewButton": "預覽",
+  "player": "播放程式",
+  "getURL": "取得 URL",
+  "tabs": {
+    "labels": {
+      "iframe": "iframe",
+      "javascript": "JavaScript"
+    },
+    "helperText": "複製 HTML 程式碼並貼到您的網站上。",
+    "helperTextWarning": "此播放程式設定有活動外掛程式。為了確保正確追蹤，應使用 JavaScript 內嵌程式碼。",
+    "viewerIdTextWarning": "此播放程式設定有觀眾 ID 追蹤。為了確保正確追蹤，應使用 JavaScript 內嵌程式碼。",
+    "bcMapTrackingTextWarning": "This player is configured with MAPs Tracking. To ensure proper tracking, the JavaScript embed code should be used."
+  },
+  "toasterTitle": "成功.",
+  "toasterMessage": "程式碼已複製到剪貼簿",
+  "toasterGetURLSuccess": "URL 已複製到剪貼簿",
+  "toasterGetURLError": "無法產生 URL",
+  "toasterErrorMessage": "複製文字到剪貼簿時發生錯誤",
+  "customPluginNotice": "由於自訂組態，您可能無法體驗完整預覽版。",
+  "done": "完成",
+  "close": "關閉",
+  "noPlayerModalHeader": "建立互動播放程式",
+  "noPlayerModalContent1": "若要嵌入互動專案，您必須啟用互動功能。",
+  "noPlayerModalContent2": "在任何現有播放程式上啟動此功能或建立新項目。",
+  "toPlayersModuleLink": "前往播放程式模組",
+  "cancel": "取消",
+  "createPlayerNow": "立即建立播放程式",
+  "createPlayerFailedTitle": "無法建立已啟用互動功能的播放程式。",
+  "createPlayerFailedMessage": "請再試一次。",
+  "activateModal": "沒有已啟用互動功能的播放程式",
+  "activateModalContent1": "需要有已啟用互動功能的播放程式才能嵌入專案。目前，此帳戶沒有已啟用互動功能的播放程式。若要建立一個，請使用 ",
+  "activateModalContent2": "播放程式模組",
+  "customSettings": {
+    "sizing": "調整大小",
+    "aspectRatio": "长宽比",
+    "playerWidth": "播放程序宽度",
+    "playerHeight": "播放程序高度",
+    "units": "單位"
+  },
+  "lowLatency": "低延遲",
+  "adConfiguration": "廣告配置",
+  "dvr": {
+    "allowDVR": "允許 DVR",
+    "inputLabel": "時間",
+    "inputDescription": "保留在即時 DVR 資訊清單中的時間（以秒為單位）",
+    "unit": "秒"
+  },
+  "prism": {
+    "copying": "複製中...",
+    "copied": "已複製",
+    "copyURL": "複製URL",
+    "shortURL": "短網址",
+    "fullURL": "完整URL",
+    "customSettings": {
+      "sizing": "播放程式大小"
+    }
+  }
+}

package/src/types/studio.ts

@@ -0,0 +1,197 @@
+interface SetiSetting {
+  creator: string;
+  name: string;
+  values: string | boolean;
+  value_type: string;
+  read_only: boolean;
+  path: string;
+}
+
+interface Module {
+  api: Record<string, { origin: string; proxyPath?: string; version: string }>;
+  bcApiConfig: Record<string, string>;
+  beta: boolean;
+  icon: string;
+  id: string;
+  key: string;
+  logoutURL: string;
+  profileEditUrl: string;
+  roleRequired: string;
+  root: string;
+  title: string;
+  sdk_root: string;
+  scope: string;
+}
+
+interface ProfileVisibility {
+  [key: string]: 'show' | 'hide';
+}
+
+interface UserAccount {
+  edition: string;
+  id: string;
+  is_admin: boolean;
+  is_express: boolean;
+  mediaSharingEnabled: boolean;
+  name: string;
+  primary_admin_id: string | number;
+  restricted: boolean;
+  roles: Array<string>;
+  settings: {
+    module_core_versions: { [key: string]: SetiSetting };
+    module_versions: { [key: string]: SetiSetting };
+    account: { [key: string]: SetiSetting };
+    ingestion: {
+      profile_visibility: {
+        profile: {
+          visibility: ProfileVisibility;
+        };
+      };
+    };
+    featureSwitches: { [key: string]: boolean };
+  };
+  status: string;
+  trial_account: boolean;
+  use_quova: boolean;
+}
+
+interface Product {
+  color: string;
+  defaultModule: string;
+  env: string;
+  features: Record<string, unknown>;
+  key: string;
+  layout: string;
+  modules: Record<string, string | boolean>[];
+  path: string;
+  supportName: string;
+  systemStatus: string;
+  title: string;
+}
+
+interface User {
+  accounts: Array<UserAccount>;
+  currentAccount: UserAccount;
+  email_address: string;
+  featureSwitches: { [key: string]: boolean };
+  feature_provisioning: { [key: string]: SetiSetting };
+  first_name: string;
+  id: string;
+  last_name: string;
+  locale: string;
+  timezone: string;
+  locked: boolean;
+  lockedByAdmin: boolean;
+  module_versions: { [key: string]: SetiSetting };
+  module_core_versions: { [key: string]: SetiSetting };
+  settings: { [key: string]: SetiSetting };
+  map: { features: { [key: string]: SetiSetting }; status: SetiSetting };
+}
+
+interface ErrorResponder extends Error {
+  responseCode: number;
+  responseText: string;
+}
+
+interface BCApi {
+  CORSSupport: boolean;
+  PATH: { [key: string]: string };
+  accessToken: Record<string, unknown>;
+  accessTokenExpiry: never;
+  accessTokenLastResponseTimestamp: never;
+  accessTokenState: number;
+  accessTokenStateFailureCount: number;
+  accountId: string;
+  call: <Type>(
+    requestParams: Record<string, unknown>,
+    responder: (response: Type) => void,
+    errorResponder: (err: ErrorResponder) => void,
+  ) => unknown;
+  authenticate: (
+    callback: (error: Record<string, unknown>, token: string) => void,
+  ) => void;
+  getToken: () => string;
+  login: () => void;
+  createRequest: (requestParams: {
+    path: string;
+    data: unknown;
+    header: Record<string, unknown>;
+  }) => XMLHttpRequest;
+}
+
+export interface StudioModule {
+  bcApi: BCApi;
+  config: {
+    features: Record<string, unknown>;
+    lang: string;
+    messages: Record<string, string>;
+    user: User;
+    product: Product;
+    module: Module;
+  };
+  api: () => BCApi;
+  getAPIConfig: () => Record<string, Record<string, string>>;
+  getCurrentUserAccount: () => UserAccount;
+  getFeature: (id: string) => unknown;
+  getLanguage: () => string;
+  getModule: () => Module;
+  getModuleRoot: () => string;
+  getModuleUrl: () => string;
+  getProduct: () => Product;
+  getUser: () => User;
+  handleAccountSwitch: (callback: () => void) => void;
+  init: (config: unknown) => void;
+  injectStyles: (styles: unknown) => void;
+  parseMessages: (txt: string) => unknown;
+  parseTemplates: (txt: string, delim: string) => unknown;
+  setPageTitle: (title: string) => string;
+  showAccessDenied: () => void;
+  on: (
+    event: string,
+    callback: EventListener,
+    context?: unknown,
+    mode?: unknown,
+  ) => void;
+  once: (event: string, callback: EventListener, context?: unknown) => void;
+  off: (event: string, callback: EventListener) => void;
+  _initBCApi: (
+    accountId: string,
+    moduleId: string,
+    scope: string,
+    config: Record<string, unknown>,
+  ) => unknown;
+}
+
+interface ToastArgs {
+  details?: string | object;
+  hideAfter?: number;
+  title?: string;
+  message: string | JSX.Element;
+}
+
+interface Toaster {
+  alert: (args: ToastArgs) => number;
+  error: (args: ToastArgs) => number;
+  success: (args: ToastArgs) => number;
+  warn: (args: ToastArgs) => number;
+  notice: (args: ToastArgs) => number;
+  info: (args: ToastArgs) => number;
+  dismiss: (id: number) => void;
+  mounted: boolean;
+}
+
+export interface StudioBrightcove {
+  ConfirmationDialog: {
+    open: (props: Record<string, unknown>) => void;
+  };
+  InContextHelp: {
+    close: () => void;
+    open: () => void;
+    toggle: () => void;
+  };
+  StudioServer: {
+    openProductPackagesModal: () => void;
+  };
+  Toaster: Toaster;
+  studio: StudioModule;
+}

package/tsconfig.json

@@ -0,0 +1,34 @@
+{
+  "compilerOptions": {
+    "baseUrl": "./src",
+    "target": "esnext",
+    "module": "esnext",
+    "lib": ["esnext", "dom"],
+    "jsx": "react",
+    "declaration": true,
+    "declarationMap": true,
+    "emitDeclarationOnly": true,
+    "outDir": "./build",
+    /* Strict Type-Checking Options */
+    "strict": true,
+    "noImplicitAny": false,
+    "strictNullChecks": true,
+    "noUnusedLocals": true,
+    /* Module Resolution Options */
+    "moduleResolution": "node",
+    "allowSyntheticDefaultImports": true,
+    "forceConsistentCasingInFileNames": true,
+    "resolveJsonModule": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "paths": {
+      "js/*": ["./js/*"],
+      "styles/*": ["./styles/*"],
+      "translations/*": ["./translations/*"],
+      "components/*": ["./js/components/*"]
+    }
+  },
+  "include": ["./src/**/*", "./__tests__/**/*"],
+  "exclude": ["node_modules"],
+  "types": ["jest", "node"]
+}

package/webpack.config.js

@@ -0,0 +1,117 @@
+const fs = require('fs');
+const path = require('path');
+const TerserPlugin = require('terser-webpack-plugin');
+
+module.exports = () => {
+  const isDevelopment = (process.env.NODE_ENV === 'development');
+  const isDemo = (process.env.DEMO === '1');
+  const entryFile = isDevelopment ? './src/module.tsx' : './src/index.ts';
+
+  const externalPackages = [
+    'react',
+    'react-dom',
+    '@brightcove/prism-core',
+    '@brightcove/studio-components',
+    '@brightcove/studio-api-services',
+    '@brightcove/studio-design-tokens',
+    '@brightcove/studio-icons',
+    '@brightcove/player-embed-code',
+    '@brightcove/react-player-loader',
+    'i18next',
+    'react-i18next',
+    'react-query',
+  ];
+
+  // Externalize exact matches and subpath imports (e.g. react-query/devtools)
+  const externalsFn = ({request}, callback) => {
+    const match = externalPackages.find(
+      (pkg) => request === pkg || request.startsWith(pkg + '/')
+    );
+    if (match) {
+      return callback(null, `commonjs2 ${request}`);
+    }
+    callback();
+  };
+
+  return {
+    entry: {
+      app: entryFile,
+    },
+    output: isDevelopment ? {
+      path: path.resolve(__dirname, '..', 'build'),
+      filename: 'js/[name].js',
+      publicPath: 'https://localhost.brightcove.com:12345/',
+    } : {
+      path: path.resolve(__dirname, 'build'),
+      filename: 'index.js',
+      libraryTarget: 'umd'
+    },
+    mode: process.env.NODE_ENV,
+    module: {
+      rules: [
+        {
+          test: /\.(css|scss|sass)$/,
+          use: ['style-loader',
+          {
+            loader: 'css-loader',
+            options: {
+              modules: {
+                localIdentName: '[name]__[local]--[hash:base64:5]'
+              },
+            }
+          },
+          {
+            loader: 'sass-loader',
+          }],
+        },
+        {
+          test: /\.(js|ts)x?$/,
+          exclude: /node_modules/,
+          use: {
+            loader: 'babel-loader',
+          },
+        },
+      ],
+    },
+    resolve: {
+      extensions: ['.ts', '.tsx', '.js', '.jsx','.css', '.sass', '.scss'],
+      alias: {
+        js: path.resolve(path.resolve(__dirname), 'src/js'),
+        styles: path.resolve(path.resolve(__dirname), 'src/styles'),
+        translations: path.resolve(path.resolve(__dirname), 'src/translations'),
+      }
+    },
+    externals: isDemo ? {} : externalsFn,
+    devtool: 'source-map',
+    devServer: {
+      static: {
+        directory: './dist',
+      },
+      client: {
+        overlay: {
+          errors: true,
+          warnings: false,
+          runtimeErrors: true,
+        },
+      },
+      allowedHosts: 'all',
+      hot: 'only',
+      host: 'localhost.brightcove.com',
+      https: {
+        key: fs.readFileSync('./etc/wildcard.brightcove.com.key'),
+        cert: fs.readFileSync('./etc/wildcard.brightcove.com.pem'),
+      },
+      headers: {
+        'Access-Control-Allow-Origin': '*',
+      },
+      port: 12345,
+      historyApiFallback: true,
+    },
+    optimization: {
+      minimizer: [new TerserPlugin({
+        extractComments: false,
+      })],
+    },
+    stats: 'errors-only',
+  }
+}