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

package/src/js/EmbedCodeModal.tsx

@@ -0,0 +1,105 @@
+import React, { useEffect, useState } from 'react';
+
+import { I18nextProvider } from 'react-i18next';
+import { initialize } from '@brightcove/studio-components';
+import { QueryClient, QueryClientProvider } from 'react-query';
+
+import { ModalContainer } from 'js/components';
+
+import i18n from 'js/i18n';
+import {
+  EmbedCodeModalTypes,
+  EmbedCodeProperties,
+  ModalDataPayload,
+} from './types/EmbedCodeModalProps';
+
+// Theme initialization moved inside component to support dynamic theme prop
+
+const queryClient = new QueryClient();
+
+export interface EmbedCodeModalProps {
+  data: ModalDataPayload;
+  language?: 'en' | 'es' | 'fr' | 'ko' | 'ja' | 'zh';
+  theme?: 'blueSteel' | 'prism';
+  embedCodeModalType?: EmbedCodeModalTypes;
+  // Parameters to be passed in case the the type is Player
+  embedCodeProperties?: EmbedCodeProperties;
+  isOutstreamPlayer?: boolean;
+  showDVR?: boolean;
+  onDVRClick?: (newValue: boolean) => void;
+  dvrTime?: number;
+  showLowLatency?: boolean;
+  onLowLatencyClick?: (newValue: boolean) => void;
+  ssai?: boolean;
+  adConfigOptions?: Array<{ label: string; value: string }>;
+  onAdConfigChange?: (value: string) => void;
+}
+
+const EmbedModal = ({
+  data,
+  language,
+  theme,
+  embedCodeModalType,
+  embedCodeProperties,
+  isOutstreamPlayer,
+  showDVR,
+  onDVRClick,
+  dvrTime,
+  showLowLatency,
+  onLowLatencyClick,
+  ssai,
+  adConfigOptions,
+  onAdConfigChange,
+}: EmbedCodeModalProps) => {
+  const [componentKey, setComponentKey] = useState(0);
+  const [hasCreatedPlayer, setHasCreatedPlayer] = useState(false);
+
+  useEffect(() => {
+    // Default to 'blueSteel' to maintain existing behavior
+    const studioComponentsTheme =
+      theme === 'prism' ? 'blueSteel' : theme || 'blueSteel';
+    initialize({ theme: studioComponentsTheme });
+  }, [theme]);
+
+  useEffect(() => {
+    i18n.changeLanguage(language || window.StudioModule.config.lang);
+  }, [language]);
+
+  const handleSetComponentKey = () => {
+    setComponentKey(componentKey + 1);
+  };
+
+  const handleSetHasCreatedPlayer = (value: boolean) => {
+    setHasCreatedPlayer(value);
+  };
+
+  // avoid calling anything if there is not data
+  return data ? (
+    <QueryClientProvider client={queryClient}>
+      <I18nextProvider i18n={i18n}>
+        <ModalContainer
+          key={componentKey}
+          handleSetComponentKey={handleSetComponentKey}
+          data={data}
+          language={language}
+          theme={theme}
+          embedCodeModalType={embedCodeModalType}
+          handleSetHasCreatedPlayer={handleSetHasCreatedPlayer}
+          hasCreatedPlayer={hasCreatedPlayer}
+          embedCodeProperties={embedCodeProperties}
+          isOutstreamPlayer={isOutstreamPlayer}
+          showDVR={showDVR}
+          onDVRClick={onDVRClick}
+          dvrTime={dvrTime}
+          showLowLatency={showLowLatency}
+          onLowLatencyClick={onLowLatencyClick}
+          ssai={ssai}
+          adConfigOptions={adConfigOptions}
+          onAdConfigChange={onAdConfigChange}
+        />
+      </I18nextProvider>
+    </QueryClientProvider>
+  ) : null;
+};
+
+export default EmbedModal;

package/src/js/components/CustomSettingsDropdown.tsx

@@ -0,0 +1,184 @@
+import React, { useState } from 'react';
+import {
+  RadioGroup,
+  Select,
+  Input,
+  Icon,
+  ICONS,
+  Fadeable,
+} from '@brightcove/studio-components';
+import { useTranslation } from 'react-i18next';
+
+import css from 'styles/CustomSettingsDropdown.sass';
+import {
+  EmbedCodeAspectRatio,
+  EmbedCodeProperties,
+  EmbedCodeUnits,
+} from 'js/types/EmbedCodeModalProps';
+import {
+  calculateDimensions,
+  calculateHeight,
+  shouldUpdateWidth,
+} from 'js/utils/dimensions';
+
+export enum Sizing {
+  FIXED = 'Fixed',
+  RESPONSIVE = 'Responsive',
+}
+
+export const CustomSettingsDropdown = ({
+  setEmbedProperties,
+  embedProperties,
+}: {
+  embedProperties: EmbedCodeProperties;
+  setEmbedProperties: (value: EmbedCodeProperties) => void;
+}) => {
+  const { t } = useTranslation();
+  const [isHidden, setIsHidden] = useState<boolean>(true);
+  const [prevAspectRatio, setPrevAspectRatio] = useState(
+    embedProperties.aspectRatio,
+  );
+
+  const handlePropertiesUpdate = (
+    name: string,
+    value: string | boolean | number,
+  ) => {
+    if (name === 'aspectRatio') {
+      const calculateNewWidth = shouldUpdateWidth(
+        prevAspectRatio,
+        value as EmbedCodeAspectRatio,
+      );
+
+      setPrevAspectRatio(value as EmbedCodeAspectRatio);
+
+      const dimensions = calculateDimensions(
+        calculateNewWidth,
+        value as EmbedCodeAspectRatio,
+        embedProperties.width,
+        embedProperties.height,
+      );
+
+      setEmbedProperties({
+        ...embedProperties,
+        aspectRatio: value as EmbedCodeAspectRatio,
+        width: dimensions.width as number,
+        height: dimensions.height,
+      });
+
+      return;
+    } else if (
+      name === 'width' &&
+      embedProperties.aspectRatio !== EmbedCodeAspectRatio.CUSTOM
+    ) {
+      const height = calculateHeight(
+        value as number,
+        embedProperties.aspectRatio,
+      );
+
+      setEmbedProperties({
+        ...embedProperties,
+        width: value as number,
+        height,
+      });
+
+      return;
+    }
+
+    setEmbedProperties({
+      ...embedProperties,
+      [name]: value,
+    });
+  };
+
+  return (
+    <div className={css.featuresDropdown}>
+      <div className={css.topArea} onClick={() => setIsHidden(!isHidden)}>
+        <div className={css.title}>Custom settings</div>
+        <div className={css.right}>
+          <div className={css.description}>Sizing & ratio</div>
+          <Icon
+            name={isHidden ? ICONS.CARET_DOWN : ICONS.CARET_UP}
+            className={css.icon}
+          />
+        </div>
+      </div>
+      <Fadeable show={!isHidden} className={css.hiddenArea}>
+        <div className={css.hiddenAreaContainer}>
+          <RadioGroup
+            inline
+            name='sizing'
+            label={t('customSettings.sizing')}
+            value={
+              embedProperties.responsive ? Sizing.RESPONSIVE : Sizing.FIXED
+            }
+            options={[Sizing.FIXED, Sizing.RESPONSIVE]}
+            onChange={(value: string) =>
+              handlePropertiesUpdate('responsive', value === Sizing.RESPONSIVE)
+            }
+            testName='embed-sizing-radio-group'
+          />
+          <Select
+            label={t('customSettings.aspectRatio')}
+            value={embedProperties.aspectRatio}
+            options={[
+              EmbedCodeAspectRatio.SIXTEEN_NINE,
+              EmbedCodeAspectRatio.NINE_SIXTEEN,
+              EmbedCodeAspectRatio.ONE_ONE,
+              EmbedCodeAspectRatio.FOUR_THREE,
+              EmbedCodeAspectRatio.CUSTOM,
+            ]}
+            className={css.aspectRatioSelect}
+            onChange={(value: string) =>
+              handlePropertiesUpdate('aspectRatio', value)
+            }
+            testName='embed-aspect-ratio-select'
+          />
+          <div className={css.sizeEdit}>
+            <Input
+              label={t('customSettings.playerWidth')}
+              value={embedProperties.width}
+              onChange={(value: string) =>
+                handlePropertiesUpdate('width', value)
+              }
+              error={
+                embedProperties.width <= 0
+                  ? 'Can only be positive integers'
+                  : ''
+              }
+              testName='embed-width-input'
+            />
+            <Input
+              label={t('customSettings.playerHeight')}
+              value={embedProperties.height}
+              onChange={(value: string) =>
+                handlePropertiesUpdate('height', value)
+              }
+              disabled={
+                embedProperties.aspectRatio !== EmbedCodeAspectRatio.CUSTOM
+              }
+              error={
+                embedProperties.height <= 0
+                  ? 'Can only be positive integers'
+                  : ''
+              }
+              testName='embed-height-input'
+            />
+            <Select
+              label={t('customSettings.units')}
+              value={embedProperties.units}
+              options={[
+                EmbedCodeUnits.PX,
+                EmbedCodeUnits.EM,
+                EmbedCodeUnits.PERCENT,
+              ]}
+              onChange={(value: string) =>
+                handlePropertiesUpdate('units', value)
+              }
+              testName='embed-units-select'
+            />
+          </div>
+        </div>
+      </Fadeable>
+    </div>
+  );
+};

package/src/js/components/EmbedCopySection.tsx

@@ -0,0 +1,130 @@
+import React, { useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import brightcoveEmbedCode from '@brightcove/player-embed-code';
+import {
+  Flex,
+  FlexItem,
+  CopyField,
+  PlainTextArea,
+} from '@brightcove/studio-components';
+
+import { EmbedCodeProps } from 'js/types/EmbedCodeProps';
+import { getUrlBase, getBrightcove, decodeHtmlEntities } from 'js/utils/util';
+
+import css from 'styles/EmbedCode.sass';
+import {
+  EmbedCodeAspectRatio,
+  EmbedCodeUnits,
+} from 'js/types/EmbedCodeModalProps';
+
+interface EmbedCodeConfig {
+  accountId: string;
+  responsive: boolean;
+  width: number;
+  height: number;
+  iframe: boolean;
+  videoId?: string;
+  interactivityProjectId?: string;
+  playerId: string;
+  urlBase: string;
+  playlistIsHorizontal: boolean;
+  units: EmbedCodeUnits;
+  aspectRatio?: EmbedCodeAspectRatio;
+}
+
+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,
+};
+
+const createEmbedConfigObject = ({
+  embedCodeProperties,
+  accountId,
+  iframe,
+  videoId,
+  playerId,
+  interactivityProjectId,
+  livePlaybackToken,
+  adConfigId,
+}: EmbedCodeProps): EmbedCodeConfig => {
+  const config = {
+    accountId,
+    iframe,
+    videoId,
+    playerId,
+    livePlaybackToken,
+    adConfigId,
+    interactivityProjectId,
+  };
+  return Object.assign(
+    {},
+    { ...defaultConfig, ...config, ...embedCodeProperties },
+  );
+};
+
+export const EmbedCode = (config: EmbedCodeProps) => {
+  const { t } = useTranslation();
+  const [embedCode, setEmbedCode] = useState('');
+
+  useEffect(() => {
+    const embedConfigObj = createEmbedConfigObject(config);
+
+    if (embedConfigObj.aspectRatio) {
+      embedConfigObj.aspectRatio =
+        embedConfigObj.aspectRatio === EmbedCodeAspectRatio.CUSTOM
+          ? EmbedCodeAspectRatio.FLUID
+          : embedConfigObj.aspectRatio;
+    }
+
+    const embedCode = decodeHtmlEntities(brightcoveEmbedCode(embedConfigObj));
+    setEmbedCode(embedCode);
+  }, [config]);
+
+  const HelperTextNodeNew = (
+    <Flex>
+      <FlexItem flexGrow='1' className={css.helperText}>
+        {t('tabs.helperText')}
+      </FlexItem>
+    </Flex>
+  );
+
+  return (
+    <>
+      <CopyField
+        className={css.copyInput}
+        helperNode={HelperTextNodeNew}
+        Component={PlainTextArea}
+        componentProps={{
+          // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+          // @ts-ignore
+          disabled: true,
+          disableResizing: true,
+          className: css.textAreaDimensions,
+          onChange: () => void 0,
+        }}
+        onCopy={() => {
+          getBrightcove().Toaster.success({
+            title: t('toasterTitle'),
+            message: t('toasterMessage'),
+          });
+        }}
+        onError={() => {
+          getBrightcove().Toaster.error({
+            message: t('toasterErrorMessage'),
+          });
+        }}
+        value={embedCode}
+        hideButton={true}
+        testName='embed-copy-section'
+      />
+    </>
+  );
+};