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

package/etc/wildcard.brightcove.com.pem

@@ -0,0 +1,96 @@
+Certificate:
+    Data:
+        Version: 3 (0x2)
+        Serial Number: 4109 (0x100d)
+        Signature Algorithm: sha256WithRSAEncryption
+        Issuer: C=US, ST=Massachusetts, L=Boston, O=Brightcove Inc., OU=Systems Engineering/emailAddress=syseng@brightcove.com
+        Validity
+            Not Before: Jan 22 15:49:19 2016 GMT
+            Not After : Jan 19 15:49:19 2026 GMT
+        Subject: C=US, ST=Massachusetts, O=Brightcove Inc., OU=Systems Engineering, CN=*.brightcove.com/emailAddress=syseng@brightcove.com
+        Subject Public Key Info:
+            Public Key Algorithm: rsaEncryption
+            RSA Public Key: (2048 bit)
+                Modulus (2048 bit):
+                    00:c5:79:88:ee:c3:81:2a:f1:66:f1:31:48:84:aa:
+                    18:09:83:9a:0c:4f:ae:a5:ce:93:70:fa:8d:95:3b:
+                    7c:c0:0f:1b:06:95:18:25:ef:7d:a1:fb:b9:08:13:
+                    6c:0f:4b:88:d5:74:d6:cb:e0:63:9a:8d:7b:ec:d0:
+                    fe:dd:aa:67:8b:a2:99:90:e8:7c:91:26:ff:e4:e0:
+                    0b:f9:e1:1b:a8:79:2c:2f:c6:7a:f9:b0:25:2a:d3:
+                    a3:8f:2b:f7:49:ef:d3:f2:c1:08:a3:57:6c:ce:00:
+                    45:55:d3:db:41:95:6b:60:bc:c6:bb:d8:3a:b4:b7:
+                    2e:d6:32:7d:9a:37:42:2e:d8:44:75:22:47:b4:f9:
+                    13:15:46:29:f1:69:6e:a7:da:8c:9a:f1:b5:8e:8d:
+                    b0:ab:3e:29:15:5b:47:c9:95:bf:7c:29:10:f8:c9:
+                    1f:78:e3:e7:1a:24:b0:da:81:27:1d:a5:66:1a:e3:
+                    c5:7b:2c:61:58:18:76:ab:63:00:aa:9c:9c:f6:a5:
+                    4c:90:34:28:c1:0c:6d:83:ff:f3:39:59:6b:eb:7d:
+                    97:66:92:36:c6:1a:6e:20:d1:d4:ce:d0:f1:10:73:
+                    81:dc:77:79:95:3f:af:dd:64:2d:b5:06:7f:d6:04:
+                    57:68:99:05:00:62:b1:81:b2:df:b8:b8:7d:d8:bf:
+                    7b:e5
+                Exponent: 65537 (0x10001)
+        X509v3 extensions:
+            X509v3 Basic Constraints:
+                CA:FALSE
+            Netscape Comment:
+                OpenSSL Generated Certificate
+            X509v3 Subject Key Identifier:
+                25:8C:64:B3:F5:49:BD:8A:1F:42:9A:D6:69:9C:B4:04:FE:4B:82:C2
+            X509v3 Authority Key Identifier:
+                keyid:D1:E0:AC:DE:01:80:DB:94:DA:29:66:0F:A9:48:11:BF:62:9F:51:9E
+                DirName:/C=US/ST=Massachusetts/L=Boston/O=Brightcove Inc./OU=Systems Engineering/emailAddress=syseng@brightcove.com
+                serial:C2:3B:9A:77:9C:63:DE:2B
+
+            X509v3 Subject Alternative Name:
+                DNS:*.brightcove.com, DNS:*.qa.brightcove.com, DNS:*.oauth.qa.brightcove.com, DNS:*.staging.brightcove.com
+            X509v3 Key Usage:
+                Digital Signature, Non Repudiation, Key Encipherment
+    Signature Algorithm: sha256WithRSAEncryption
+        a7:58:ec:1b:a5:c3:29:1d:71:c1:dd:b0:8c:ac:1d:34:b3:24:
+        56:53:43:37:49:20:21:13:b3:1c:bc:d9:a3:e3:56:49:15:56:
+        40:51:6f:cf:9e:c1:c2:ad:08:67:b1:bd:a6:11:3b:35:65:06:
+        b3:ff:de:36:93:86:10:45:e9:36:0a:5b:26:f0:23:82:8f:83:
+        9f:1d:3f:be:ab:54:b3:f6:6c:7d:7b:67:6f:27:f7:f9:fa:30:
+        27:1e:70:e4:05:85:ac:ad:d8:a5:45:83:54:68:0a:1d:fa:c2:
+        05:46:41:d3:ad:a9:97:db:7a:fa:77:e1:0f:b0:29:09:da:15:
+        2c:f1:d4:0f:a4:ce:90:fe:54:23:20:5c:68:3d:3a:06:0e:83:
+        ab:3a:3e:43:84:2f:71:5f:d9:c8:29:d1:35:51:c2:c2:57:75:
+        8b:10:1e:cd:c0:8b:ca:b1:31:bb:5c:cf:03:52:05:f1:a8:0e:
+        bc:ca:ff:1a:7d:cf:22:fb:85:13:22:96:cb:dd:2b:00:68:5c:
+        ce:cd:d6:e7:5d:f1:fe:9e:60:07:7e:df:2d:d5:99:74:b3:90:
+        33:55:da:18:7c:83:31:80:59:b1:a5:53:2f:5c:f2:86:d1:6f:
+        eb:fe:68:5d:a3:0b:52:36:d8:77:40:24:fc:ed:5c:72:7a:23:
+        e5:2f:bb:6b
+-----BEGIN CERTIFICATE-----
+MIIFTjCCBDagAwIBAgICEA0wDQYJKoZIhvcNAQELBQAwgZQxCzAJBgNVBAYTAlVT
+MRYwFAYDVQQIEw1NYXNzYWNodXNldHRzMQ8wDQYDVQQHEwZCb3N0b24xGDAWBgNV
+BAoTD0JyaWdodGNvdmUgSW5jLjEcMBoGA1UECxMTU3lzdGVtcyBFbmdpbmVlcmlu
+ZzEkMCIGCSqGSIb3DQEJARYVc3lzZW5nQGJyaWdodGNvdmUuY29tMB4XDTE2MDEy
+MjE1NDkxOVoXDTI2MDExOTE1NDkxOVowgZ4xCzAJBgNVBAYTAlVTMRYwFAYDVQQI
+Ew1NYXNzYWNodXNldHRzMRgwFgYDVQQKEw9CcmlnaHRjb3ZlIEluYy4xHDAaBgNV
+BAsTE1N5c3RlbXMgRW5naW5lZXJpbmcxGTAXBgNVBAMUECouYnJpZ2h0Y292ZS5j
+b20xJDAiBgkqhkiG9w0BCQEWFXN5c2VuZ0BicmlnaHRjb3ZlLmNvbTCCASIwDQYJ
+KoZIhvcNAQEBBQADggEPADCCAQoCggEBAMV5iO7DgSrxZvExSISqGAmDmgxPrqXO
+k3D6jZU7fMAPGwaVGCXvfaH7uQgTbA9LiNV01svgY5qNe+zQ/t2qZ4uimZDofJEm
+/+TgC/nhG6h5LC/GevmwJSrTo48r90nv0/LBCKNXbM4ARVXT20GVa2C8xrvYOrS3
+LtYyfZo3Qi7YRHUiR7T5ExVGKfFpbqfajJrxtY6NsKs+KRVbR8mVv3wpEPjJH3jj
+5xoksNqBJx2lZhrjxXssYVgYdqtjAKqcnPalTJA0KMEMbYP/8zlZa+t9l2aSNsYa
+biDR1M7Q8RBzgdx3eZU/r91kLbUGf9YEV2iZBQBisYGy37i4fdi/e+UCAwEAAaOC
+AZwwggGYMAkGA1UdEwQCMAAwLAYJYIZIAYb4QgENBB8WHU9wZW5TU0wgR2VuZXJh
+dGVkIENlcnRpZmljYXRlMB0GA1UdDgQWBBQljGSz9Um9ih9CmtZpnLQE/kuCwjCB
+yQYDVR0jBIHBMIG+gBTR4KzeAYDblNopZg+pSBG/Yp9RnqGBmqSBlzCBlDELMAkG
+A1UEBhMCVVMxFjAUBgNVBAgTDU1hc3NhY2h1c2V0dHMxDzANBgNVBAcTBkJvc3Rv
+bjEYMBYGA1UEChMPQnJpZ2h0Y292ZSBJbmMuMRwwGgYDVQQLExNTeXN0ZW1zIEVu
+Z2luZWVyaW5nMSQwIgYJKoZIhvcNAQkBFhVzeXNlbmdAYnJpZ2h0Y292ZS5jb22C
+CQDCO5p3nGPeKzBlBgNVHREEXjBcghAqLmJyaWdodGNvdmUuY29tghMqLnFhLmJy
+aWdodGNvdmUuY29tghkqLm9hdXRoLnFhLmJyaWdodGNvdmUuY29tghgqLnN0YWdp
+bmcuYnJpZ2h0Y292ZS5jb20wCwYDVR0PBAQDAgXgMA0GCSqGSIb3DQEBCwUAA4IB
+AQCnWOwbpcMpHXHB3bCMrB00syRWU0M3SSAhE7McvNmj41ZJFVZAUW/PnsHCrQhn
+sb2mETs1ZQaz/942k4YQRek2Clsm8COCj4OfHT++q1Sz9mx9e2dvJ/f5+jAnHnDk
+BYWsrdilRYNUaAod+sIFRkHTramX23r6d+EPsCkJ2hUs8dQPpM6Q/lQjIFxoPToG
+DoOrOj5DhC9xX9nIKdE1UcLCV3WLEB7NwIvKsTG7XM8DUgXxqA68yv8afc8i+4UT
+IpbL3SsAaFzOzdbnXfH+nmAHft8t1Zl0s5AzVdoYfIMxgFmxpVMvXPKG0W/r/mhd
+owtSNth3QCT87VxyeiPlL7tr
+-----END CERTIFICATE-----

package/jest/jest.setup.js

@@ -0,0 +1,62 @@
+import '@testing-library/jest-dom';
+import 'jest-canvas-mock';
+import ResizeObserver from 'resize-observer-polyfill';
+
+// eslint-disable-next-line no-undef
+jest.mock('js/hooks/useGetPlayers', () => {
+  // eslint-disable-next-line no-undef
+  return jest.fn().mockReturnValue({
+    isLoading: false,
+    data: {
+      items: [
+        {
+          account_id: 'test',
+          id: 'default',
+          name: 'default',
+          description: 'test',
+          branches: { master: { configuration: {} } },
+          created_at: 'test',
+          embed_count: 2,
+          url: 'test',
+        },
+      ],
+    },
+  });
+});
+
+// eslint-disable-next-line no-undef
+jest.mock('react-i18next', () => ({
+  useTranslation: () => {
+    return {
+      t: (str) => str,
+      i18n: {
+        changeLanguage: () =>
+          new Promise(() => {
+            return;
+          }),
+      },
+    };
+  },
+  initReactI18next: {
+    type: '3rdParty',
+    init: () => {
+      return;
+    },
+  },
+  Trans: () => '<div/>',
+}));
+
+global.StudioModule = {
+  config: {
+    product: {
+      env: 'qa',
+    },
+  },
+  getCurrentUserAccount: () => {
+    return {
+      roles: [],
+    };
+  },
+};
+
+global.ResizeObserver = ResizeObserver;

package/jest/jest.stub.js

@@ -0,0 +1,4 @@
+// stub out modules that you want to load for tests here
+module.exports = {
+  process: () => '',
+};

package/jest.config.js

@@ -0,0 +1,24 @@
+module.exports = {
+  transform: {
+    '\\.(css|sass)$': '<rootDir>/jest/jest.stub.js',
+    '^.+\\.(t|j)sx?$': 'babel-jest',
+  },
+  moduleNameMapper: {
+    '^js/(.*)$': '<rootDir>/src/js/$1',
+    '^styles/(.*)$': '<rootDir>/src/styles/$1',
+    '^mocks/(.*)$': '<rootDir>/__mocks__/$1',
+    '^translations/(.*)$': '<rootDir>/src/translations/$1',
+    '\\.(css|sass)$': '<rootDir>/jest/jest.stub.js',
+  },
+  testPathIgnorePatterns : [
+    './build/',
+  ],
+  setupFilesAfterEnv: ['<rootDir>/jest/jest.setup.js'],
+  coveragePathIgnorePatterns: [
+    '/node_modules/',
+    '/jest/',
+    '/locales/',
+    '/styles/',
+  ],
+  testEnvironment: 'jest-environment-jsdom',
+};

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@brightcove/components-embed-code-modal",
-  "version": "1.0.7",
+  "version": "1.0.8",
   "repository": {
     "type": "git",
     "url": "https://bithub.brightcove.com/studio-ui-kit/studio-components-embed-code-modal.git"
   },
   "description": "Embed Code Modal used for publishing videos",
-  "main": "./index.js",
+  "main": "build/index.js",
   "types": "./src/index.d.ts",
   "author": "Campaign Team",
   "scripts": {
@@ -15,14 +15,25 @@
     "build:watch": "NODE_ENV=production webpack --watch",
     "clean": "rm -r build",
     "lint": "eslint \"{src,__tests__,demo}/**/*.{ts,tsx,js,jsx}\"",
+    "lint:staged": "lint-staged",
     "type-check": "tsc",
     "notify": "notify-change -m proj-projstudio",
+    "prepare": "husky install",
     "release": "release-it",
     "test": "jest",
     "test:coverage": "jest --coverage",
     "test:watch": "jest --watch",
     "pre-commit": "lint-staged && npm test"
   },
+  "lint-staged": {
+    "*.{ts,tsx,js,jsx}": [
+      "eslint --fix",
+      "prettier --write"
+    ],
+    "*.{css,scss}": [
+      "prettier --write"
+    ]
+  },
   "devDependencies": {
     "@babel/core": "^7.20.7",
     "@babel/plugin-proposal-class-properties": "^7.16.0",
@@ -95,6 +106,5 @@
     "react-dom": "^17.0.2 || ^18.0.0",
     "react-i18next": ">=11",
     "react-query": "^3.38.0"
-  },
-  "module": "./index.js"
-}
+  }
+}

package/scripts/create-dist-pkg-prod.js

@@ -0,0 +1,18 @@
+const fs = require('fs');
+const path = require('path');
+const pkg = require('../package.json');
+
+const BUILD_DIR = path.resolve(__dirname, '..', 'build');
+
+pkg.name = '@brightcove/components-embed-code-modal'
+pkg.main = './index.js';
+pkg.module = './index.js';
+
+delete pkg.scripts.prepare;
+delete pkg.scripts['lint:staged'];
+delete pkg['lint-staged'];
+
+fs.writeFileSync(
+  path.join(BUILD_DIR, 'package.json'),
+  JSON.stringify(pkg, null, 2)
+);

package/src/index.ts

@@ -0,0 +1,17 @@
+import EmbedCodeModal, { type EmbedCodeModalProps } from './js/EmbedCodeModal';
+import {
+  type VideoPayload,
+  type PlayerPayload,
+  type ProjectPayload,
+  EmbedCodeModalTypes,
+} from 'js/types/EmbedCodeModalProps';
+
+export {
+  EmbedCodeModal,
+  VideoPayload,
+  PlayerPayload,
+  ProjectPayload,
+  EmbedCodeModalTypes,
+};
+
+export type { EmbedCodeModalProps };

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'
+      />
+    </>
+  );
+};