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

package/src/module.tsx

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

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

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

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

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

package/src/styles/prism/PrismLiveModal.sass

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

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

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

@@ -1,65 +0,0 @@
-{
-  "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": {
-    "copying": "Copying...",
-    "copied": "Copied",
-    "copyURL": "Copy URL",
-    "shortURL": "Short URL",
-    "fullURL": "Full URL",
-    "customSettings": {
-      "sizing": "Player Sizing"
-    }
-  }
-}