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

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,155 @@
+@import "~@brightcove/prism-core/build/scss/tokens"
+
+.prismLiveModal
+  width: 900px
+  max-width: 90vw
+  height: 700px
+  max-height: 90vh
+
+  div[class^='Modal-Modal__content']
+    position: static
+
+.prismLiveModalContent
+  display: grid
+  grid-template-columns: 52% 48%
+  gap: 0
+  height: 100%
+  max-height: calc(700px - 120px)
+  overflow: hidden
+
+.prismLeftColumn
+  padding: var(--spacing-5, 24px)
+  display: flex
+  flex-direction: column
+  gap: var(--spacing-3, 12px)
+  overflow-y: auto
+  border-right: 1px solid var(--stroke-tertiary-default, #f5f4f0)
+  background: var(--surface-primary-default, #ffffff)
+
+  /* Custom scrollbar */
+  &::-webkit-scrollbar
+    width: 6px
+
+  &::-webkit-scrollbar-track
+    background: transparent
+
+  &::-webkit-scrollbar-thumb
+    background: var(--stroke-tertiary-default, #f5f4f0)
+    border-radius: 3px
+
+  &::-webkit-scrollbar-thumb:hover
+    background: var(--stroke-secondary-default, #e8e6de)
+
+.prismRightColumn
+  padding: var(--spacing-5, 24px)
+  display: flex
+  flex-direction: column
+  background: var(--surface-primary-default, #ffffff)
+  overflow: hidden
+
+.prismInputGroup
+  display: flex
+  gap: var(--spacing-2, 8px)
+  align-items: flex-end
+
+  > *:first-child,
+  > *:last-child
+    flex: 0 0 auto
+    width: 44%
+
+.prismLinkButton
+  margin-bottom: 8px
+  flex-shrink: 0
+
+.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)
+
+// Bound the code card so the upstream PrismCodeCard's own scroll
+// engages instead of overflowing the modal's left column. The upstream
+// component doesn't expose a height-cap prop, so we cap its inner
+// scroll element by class-name match. Re-verify on prism-core upgrades.
+.prismCodeCard
+  flex: 0 0 auto
+  max-height: 280px
+
+  [class*='CodeCard__scroll']
+    max-height: 220px
+    overflow-y: auto
+
+.prismFooter
+  display: flex
+  justify-content: flex-end
+  gap: var(--spacing-2, 8px)
+  padding: var(--spacing-4, 16px) var(--spacing-5, 24px)
+  border-top: 1px solid var(--stroke-tertiary-default, #f5f4f0)
+  background: var(--surface-primary-default, #ffffff)
+
+// 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
+@media (max-width: 768px)
+  .prismLiveModal
+    width: 100%
+    height: 100%
+    max-width: 100vw
+    max-height: 100vh
+
+  .prismLiveModalContent
+    grid-template-columns: 1fr
+    overflow-y: auto
+
+  .prismLeftColumn
+    border-right: none
+    border-bottom: 1px solid var(--stroke-tertiary-default, #f5f4f0)
+
+  .prismRightColumn
+    min-height: 400px

package/src/styles/theme.sass

@@ -0,0 +1,11 @@
+@import "~@brightcove/studio-design-tokens/themes/blueSteel/index-map.sass"
+@import "~@brightcove/studio-design-tokens/themes/classic/index-map.sass"
+
+$themes: $classic $blueSteel
+
+@function theme($theme, $property)
+  @return map-get($theme, $property)
+
+=themed
+  @each $theme in $themes
+    @content($theme)

package/src/styles/typings.td.ts

@@ -0,0 +1,9 @@
+declare module 'styles/*.sass' {
+  const content: { [className: string]: string };
+  export default content;
+}
+
+declare module 'styles/*.scss' {
+  const content: { [className: string]: string };
+  export default content;
+}

package/src/translations/en.json

@@ -0,0 +1,61 @@
+{
+  "modalHeader": "Embed on website",
+  "mediaNotice": "Will use your account’s default player",
+  "tooltipText": "Currently using the Brightcove Default Player. Player management coming soon.",
+  "tooltipTextNew": "Players determine the video playback experience such as styling, special configuration settings, and more.",
+  "tooltipLink": "Learn more about players",
+  "learnmore": "https://studio.support.brightcove.com/players/getting-started-players-module.html",
+  "previewButton": "Preview",
+  "player": "Player",
+  "getURL": "Get URL",
+  "tabs": {
+    "labels": {
+      "iframe": "iframe",
+      "javascript": "JavaScript"
+    },
+    "helperText": "Copy the HTML code and paste it on your website.",
+    "helperTextWarning": "This player is configured with the Campaign plugin. To ensure proper tracking, the JavaScript embed code should be used.",
+    "viewerIdTextWarning": "This player is configured with Viewer ID Tracking. To ensure proper tracking, the JavaScript embed code should be used.",
+    "bcMapTrackingTextWarning": "This player is configured with MAPs Tracking. To ensure proper tracking, the JavaScript embed code should be used."
+  },
+  "done": "Done",
+  "close": "Close",
+  "toasterTitle": "Success.",
+  "toasterMessage": "Code copied to clipboard",
+  "toasterGetURLSuccess": "URL copied to the clipboard",
+  "toasterErrorMessage": "Error while copying text to clipboard",
+  "toasterGetURLError": "URL cannot be generated",
+  "customPluginNotice": "Due to custom configurations, you may not be experiencing the full preview.",
+  "noPlayerModalHeader": "Create an Interactivity Player",
+  "noPlayerModalContent1": "To embed an Interactivity Project you must enable the interactivity feature.",
+  "noPlayerModalContent2": "Activate this feature on any existing player or create a new one.",
+  "toPlayersModuleLink": "Go to the Players module",
+  "cancel": "Cancel",
+  "createPlayerNow": "Create Player Now",
+  "createPlayerFailedTitle": "Failed to create the Interactivity-enabled Player.",
+  "createPlayerFailedMessage": "Please try again.",
+  "activateModal": "No Interactivity-enabled players",
+  "activateModalContent1": "An Interactivity-enabled player is required to embed a project. Currently, this account has no Interactivity-enabled players. To create one, use the ",
+  "activateModalContent2": "Players module",
+  "customSettings": {
+    "sizing": "Sizing",
+    "aspectRatio": "Aspect Ratio",
+    "playerWidth": "Player width",
+    "playerHeight": "Player height",
+    "units": "Units"
+  },
+  "lowLatency": "Low Latency",
+  "dvr": {
+    "allowDVR": "Allow DVR",
+    "inputLabel": "Time",
+    "inputDescription": "The time, in seconds, to keep in the live DVR manifest",
+    "unit": "sec"
+  },
+  "adConfiguration": "Ad Configuration",
+  "prism": {
+    "getURL": "URL",
+    "customSettings": {
+      "sizing": "Player Sizing"
+    }
+  }
+}