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

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

package/src/module.tsx

@@ -0,0 +1,280 @@
+import React, { useState } from 'react';
+import { createRoot } from 'react-dom/client';
+
+import {
+  initialize,
+  Button,
+  Select,
+  Input,
+  Flex,
+  Checkbox,
+} from '@brightcove/studio-components';
+
+import { StudioModule } from 'types/studio';
+import { EmbedCodeModal } from './index';
+import {
+  VideoPayload,
+  EmbedCodeModalTypes,
+  EmbedCodeUnits,
+  EmbedCodeAspectRatio,
+} from 'js/types/EmbedCodeModalProps';
+import { EmbedCodeModalProps } from 'js/EmbedCodeModal';
+
+const videoObj: VideoPayload = {
+  videoId: '70709819045202', // string
+  videoName: 'Media Title', // string
+  accountId: '70712710456202', // string
+  posterUrl: 'http://...', // string
+  duration: 120, // number (in seconds)
+};
+
+type LangType = 'en' | 'es' | 'fr' | 'ja' | 'ko' | 'zh';
+type ThemeType = 'blueSteel' | 'prism';
+
+const appNode = document.getElementById('bc-content');
+let root: ReturnType<typeof createRoot> | null = null;
+
+const App = () => {
+  const [language, setLanguage] = useState<LangType>('en');
+  const [theme, setTheme] = useState<ThemeType>('blueSteel');
+  const [accountId, setAccountId] = useState('70713602761202');
+  const [videoId, setVideoId] = useState('70716855695113');
+  const [interactivityProjectId, setInteractivityProjectId] = useState(
+    '63ed6c0cf2b60d00179ec101',
+  );
+  const [embedProperties, setEmbedProperties] = useState({
+    units: EmbedCodeUnits.PX,
+    responsive: false,
+    width: 0,
+    height: 0,
+    aspectRatio: EmbedCodeAspectRatio.FLUID,
+  });
+  const [embedVideoObj, setEmbedVideoObj] = useState<EmbedCodeModalProps>();
+  const [showDVR, setShowDVR] = useState(false);
+  const [showLowLatency, setShowLowLatency] = useState(false);
+  const [showSSAI, setShowSSAI] = useState(false);
+
+  const handlePropertiesUpdate = (name: string, value: string) => {
+    setEmbedProperties({
+      ...embedProperties,
+      [name]: value,
+    });
+  };
+
+  return (
+    <div style={{ padding: 20 }}>
+      <h1> Embed Code Sandbox demo </h1>
+      <h5>
+        {' '}
+        Use the url params to select environment. Ex. `env=production`. <br />{' '}
+        Default is `qa`
+      </h5>
+      <h5> Select component`s language </h5>
+      <Select
+        value={language}
+        options={[
+          { label: 'English', value: 'en' },
+          { label: 'Spanish', value: 'es' },
+          { label: 'French', value: 'fr' },
+          { label: 'Japanese', value: 'ja' },
+          { label: 'Korean', value: 'ko' },
+          { label: 'Chinese', value: 'zh' },
+        ]}
+        onChange={(value: LangType) => {
+          setLanguage(value);
+        }}
+      />
+      <h5> Select theme </h5>
+      <Select
+        value={theme}
+        options={[
+          { label: 'Blue Steel', value: 'blueSteel' },
+          { label: 'Prism', value: 'prism' },
+        ]}
+        onChange={(value: ThemeType) => {
+          setTheme(value);
+        }}
+      />
+      <h5>
+        Enter a valid account ID and video ID. Keep in mind the environment
+      </h5>
+      <Flex gap='sm'>
+        <Input
+          label='BC account ID'
+          value={accountId}
+          onChange={(value: string) => {
+            setAccountId(value);
+          }}
+        />
+        <Input
+          label='Video ID'
+          value={videoId}
+          onChange={(value: string) => {
+            setVideoId(value);
+          }}
+        />
+        <Input
+          label='Project ID'
+          value={interactivityProjectId}
+          onChange={(value: string) => {
+            setInteractivityProjectId(value);
+          }}
+        />
+      </Flex>
+      <h4>Optional properties for the embed code</h4>
+      <br />
+      <Flex gap='sm' alignItems='center'>
+        <Select
+          label='Units'
+          value={embedProperties.units}
+          options={[
+            { label: 'px', value: EmbedCodeUnits.PX },
+            { label: 'em', value: EmbedCodeUnits.EM },
+            { label: '%', value: EmbedCodeUnits.PERCENT },
+          ]}
+          onChange={(value: string) => handlePropertiesUpdate('units', value)}
+        />
+        <Input
+          label='Width'
+          type='number'
+          value={embedProperties.width}
+          onChange={(value: string) => handlePropertiesUpdate('width', value)}
+        />
+        <Input
+          label='Height'
+          type='number'
+          value={embedProperties.height}
+          onChange={(value: string) => handlePropertiesUpdate('height', value)}
+        />
+        <Select
+          label='Aspect ratio'
+          value={embedProperties.aspectRatio}
+          options={[
+            { label: 'fluid', value: EmbedCodeAspectRatio.FLUID },
+            { label: '1:1', value: EmbedCodeAspectRatio.ONE_ONE },
+            { label: '4:3', value: EmbedCodeAspectRatio.FOUR_THREE },
+            { label: '16:9', value: EmbedCodeAspectRatio.SIXTEEN_NINE },
+            { label: '9:16', value: EmbedCodeAspectRatio.NINE_SIXTEEN },
+          ]}
+          onChange={(value: string) =>
+            handlePropertiesUpdate('aspectRatio', value)
+          }
+        />
+        <Checkbox onChange={setShowDVR} checked={showDVR}>
+          <strong>Show DVR</strong>
+        </Checkbox>
+        <Checkbox onChange={setShowLowLatency} checked={showLowLatency}>
+          <strong>Show Low Latency</strong>
+        </Checkbox>
+        <Checkbox onChange={setShowSSAI} checked={showSSAI}>
+          <strong>Show Ad Configuration</strong>
+        </Checkbox>
+      </Flex>
+      <Button
+        text='Show Modal Video'
+        onClick={() => {
+          setEmbedVideoObj({
+            data: { ...videoObj, videoId, accountId },
+            embedCodeModalType: EmbedCodeModalTypes.VIDEO,
+            language,
+            theme,
+          });
+        }}
+        large
+      />
+      <Button
+        text='Show Modal Player'
+        onClick={() => {
+          setEmbedVideoObj({
+            data: { id: 'default', accountId },
+            embedCodeModalType: EmbedCodeModalTypes.PLAYER,
+            language: language,
+            theme,
+          });
+        }}
+        large
+      />
+      <Button
+        text='Show Modal Project'
+        onClick={() => {
+          setEmbedVideoObj({
+            data: {
+              accountId,
+              videoId,
+              interactivityProjectId,
+              interactivityProjectName: 'My Project Name',
+            },
+            embedCodeModalType: EmbedCodeModalTypes.PROJECT,
+            language: language,
+            theme,
+          });
+        }}
+        large
+      />
+      <Button
+        text='Show Modal Live'
+        onClick={() => {
+          setEmbedVideoObj({
+            data: {
+              videoId,
+              accountId,
+              livePlaybackToken: 'live-playback-token-test',
+              adConfigId: 'ad-config-id-test',
+            },
+            embedCodeModalType: EmbedCodeModalTypes.LIVE,
+            showDVR,
+            dvrTime: 900,
+            language,
+            theme,
+            ssai: showSSAI,
+            adConfigOptions: [
+              { label: 'Basic Ad Config', value: 'basic' },
+              { label: 'Advanced Ad Config', value: 'advanced' },
+              { label: 'Premium Ad Config', value: 'premium' },
+            ],
+            onDVRClick: (newValue) => {
+              console.log('DVR clicked', newValue);
+            },
+            showLowLatency,
+            onLowLatencyClick: (newValue) => {
+              console.log('Low Latency clicked', newValue);
+            },
+          });
+        }}
+        large
+      />
+      {embedVideoObj && (
+        <EmbedCodeModal
+          {...embedVideoObj}
+          language={language}
+          theme={theme}
+          embedCodeProperties={embedProperties}
+        />
+      )}
+    </div>
+  );
+};
+
+const initBCAPI = (studioModule: StudioModule) => {
+  const onAuth = () => {
+    if (appNode) {
+      if (!root) {
+        root = createRoot(appNode);
+      }
+      root.render(<App />);
+    }
+  };
+
+  studioModule.once('auth', onAuth);
+  const { module, user } = studioModule.config;
+  const accountId = user.currentAccount.id;
+  const moduleId = module.id;
+  const moduleScope = module.scope;
+  const moduleBcApiConfig = module.bcApiConfig;
+
+  // eslint-disable-next-line no-underscore-dangle
+  studioModule._initBCApi(accountId, moduleId, moduleScope, moduleBcApiConfig);
+};
+
+initialize();
+initBCAPI(window.StudioModule);

package/src/styles/CustomSettingsDropdown.sass

@@ -0,0 +1,42 @@
+@import './base.sass'
+
+@include themed() using ($theme)
+  .featuresDropdown
+    background: white
+    margin-bottom: 10px
+    .topArea
+      border-top: 1px solid theme($theme, gray-30)
+      border-bottom: 1px solid theme($theme, gray-30)
+      background: white
+      display: flex
+      padding: 16px
+      justify-content: space-between
+      cursor: pointer
+
+      .title
+        font-weight: theme($theme, heading-weight)
+        color: black
+
+      .right
+        display: flex
+        .description
+          font-size: theme($theme, label-font-size)
+          margin-right: 30px
+        .icon
+          color: theme($theme, navy)
+
+    .hiddenArea
+      .hiddenAreaContainer
+        padding: 28px 16px
+      .aspectRatioSelect
+        span[class^="Select-wrapper"]
+          width: 343px
+      .sizeEdit
+        display: flex
+        gap: 16px
+        label
+          padding: 0
+          max-width: 110px
+          div[class^="InputGroup-labelRight-"]
+            display: none
+

package/src/styles/EmbedCode.sass

@@ -0,0 +1,30 @@
+@import './base.sass'
+
+@include themed() using ($theme)
+  // Override studio-components styles
+  .hint
+    padding-top: 2px
+  .input
+    margin: 0 !important
+    padding-bottom: 4px !important
+  .textArea
+    color: theme($theme, gray-35) !important
+    background-color: theme($theme, gray-20) !important
+    border: none !important
+    resize: none
+  .copyInput
+    margin: 0 !important
+    padding-bottom: 4px !important
+    .textAreaDimensions
+      height: 210px
+      width: 390px
+    span[class^="CopyField-copyIcon"]
+      margin-right: 10px
+  .helperText
+    color: theme($theme, gray-40)
+    font-size: 14px
+  a.copyLink
+    text-decoration: none
+    font-weight: theme($theme, body-small-weight-bold)
+    cursor: pointer
+    padding-left: 4px

package/src/styles/EmbedCodeModal.sass

@@ -0,0 +1,76 @@
+@import './base.sass'
+
+@include themed() using ($theme)
+  .videoDetailsContainer
+    margin-bottom: 27px
+    .leftContent
+      width: 540px
+      margin-right: 34px
+    .timeInput input
+      width: 150px
+    .dvrCheckbox span
+      font-weight: theme($theme, label-font-weight)
+    .rightContent
+      flex-grow: 1
+      max-height: 468px
+      overflow-y: auto
+    .expandRightContent
+      max-height: 620px
+    .rightContentFullWidth
+      [class^="EmbedCode__copyInput"]
+        textarea
+          width: 100%
+        > div > div > div
+          flex: 1
+    .mediaData
+      margin-top: 23px
+      padding: 0
+    .redHelperText
+      color: theme($theme, red)
+      font-size: 14px
+    .tabPanelContent > div > div > div
+      display: block !important
+    .mediaTitle
+      color: theme($theme, text-primary-dark)
+      font-size: theme($theme, heading-xs-size)
+      font-weight: theme($theme, heading-weight)
+      line-height: theme($theme, heading-xs-line-height)
+      word-break: break-all
+    .text
+      color: theme($theme, gray-40)
+      font-size: theme($theme, body-small-text-size)
+      font-weight: theme($theme, body-small-weight-normal)
+    .playerSelectLabel
+      font-family: theme($theme, label-font)
+      font-size: theme($theme, label-font-size)
+      font-weight: theme($theme, label-font-weight)
+      line-height: theme($theme, label-line-height)
+      letter-spacing: theme($theme, label-letter-spacing)
+      color: theme($theme, label-color)
+      padding: 0 0 .4rem
+    .playerSelect
+      width: 100%
+    .getURLBtnContainer
+      display: inline-flex
+    .getURLBtnSpinner
+      left: -5px
+      position: relative
+      margin-right: 8px
+    .mediaId
+      @extend .text
+      margin-bottom: 25px
+    .tooltip
+      margin-left: theme($theme, padding-sm)
+    .customPluginNotice
+      font-size: 14px
+    .playerLoader
+        video-js
+          width: 539px !important
+          height: 303.2px !important
+        margin-bottom: theme($theme, padding-sm)
+        iframe
+          width: 539px !important
+          height: 303.2px !important
+    .previewButton
+      align-self: center
+

package/src/styles/base.sass

@@ -0,0 +1 @@
+@import 'theme.sass'

package/src/styles/prism/PrismLiveModal.sass

@@ -0,0 +1,128 @@
+@import "~@brightcove/prism-core/build/scss/tokens"
+
+.prismLiveModalContent
+  display: grid
+  grid-template-columns: minmax(0, 52%) minmax(0, 48%)
+  gap: 0
+  height: 100%
+  min-height: 0
+  min-width: 0
+
+.prismLeftColumn
+  padding: var(--spacing-5, 24px)
+  display: flex
+  flex-direction: column
+  gap: var(--spacing-4, 16px)
+  overflow-y: auto
+  min-height: 0
+  min-width: 0
+  border-right: 1px solid var(--stroke-tertiary-default, #f5f4f0)
+  background: var(--surface-primary-default, #ffffff)
+
+.prismRightColumn
+  padding: var(--spacing-5, 24px)
+  display: flex
+  flex-direction: column
+  overflow-y: auto
+  min-height: 0
+  min-width: 0
+  background: var(--surface-primary-default, #ffffff)
+
+.prismInputGroup
+  display: flex
+  gap: var(--spacing-2, 8px)
+  align-items: flex-end
+
+.prismSizingField
+  flex: 1 1 0
+  min-width: 0
+
+.prismLinkButton
+  margin-bottom: 8px
+  flex-shrink: 0
+
+// Let the card grow with the code (all lines visible, long code scrolls the
+// column) and keep a 150px floor. The clip keeps the rounded corners that
+// `indefiniteGrow` gives up on the card root.
+.prismCodeCard
+  flex: 0 0 auto
+  border-radius: var(--radius-2, 8px)
+  overflow: hidden
+
+  // PrismCodeCard pins its code area at min-height 170px.
+  [class*='CodeCard__scroll']
+    min-height: 150px
+
+.prismCustomPluginNotice
+  padding: var(--spacing-2, 8px) var(--spacing-3, 12px)
+  background: var(--surface-warning-subdued, #fff4e5)
+  color: var(--text-warning-default, #b54708)
+  font-size: var(--font-size-4xs, 12px)
+  line-height: var(--font-line-height-5xs, 15px)
+  border-radius: var(--radius-2, 8px)
+  margin-top: var(--spacing-3, 12px)
+
+// Player Preview Styles
+.prismPlayerPreviewContainer
+  display: flex
+  flex-direction: column
+  height: 100%
+  gap: var(--spacing-3, 12px)
+
+.prismPlayerActions
+  display: flex
+  gap: var(--spacing-2, 8px)
+  justify-content: flex-end
+
+.prismPlayerWrapper
+  flex: 1
+  position: relative
+  border-radius: var(--radius-2, 8px)
+  overflow: hidden
+  display: flex
+  align-items: center
+  justify-content: center
+
+  video
+    width: 100%
+    height: auto
+
+  iframe
+    width: 100%
+    max-width: 100%
+    aspect-ratio: 16 / 9
+    border: none
+    border-radius: var(--radius-2, 8px)
+
+.playerLoader
+  width: 100%
+  max-width: 100%
+  aspect-ratio: 16 / 9
+  display: flex
+  align-items: center
+  justify-content: center
+
+  video
+    width: 100%
+    height: 100%
+    object-fit: contain
+
+// Responsive adjustments. Matches useIsMobile / media's Prism modal policy:
+// below 1024 the modal is a vertical stack, from 1024 up it is two columns.
+@media (max-width: 1023px)
+  .prismLiveModalContent
+    grid-template-columns: minmax(0, 1fr)
+    height: auto
+
+  .prismLeftColumn
+    overflow-y: visible
+    border-right: none
+    border-bottom: 1px solid var(--stroke-tertiary-default, #f5f4f0)
+
+  .prismRightColumn
+    overflow-y: visible
+    min-height: 400px
+
+  // On phones the footer offers Copy Code instead of showing the card.
+  .prismCodeCard
+    display: none