@brightcove/components-embed-code-modal 0.8.2 → 0.8.3

package/__tests__/TabsSection.test.tsx

@@ -0,0 +1,46 @@
+import React from 'react';
+import { act, fireEvent, render } from '@testing-library/react';
+import { TabsSection } from 'js/components';
+
+const DEFAULT_MODAL_COMP = {
+  playerId: 'default',
+  videoId: '1234',
+  accountId: 'default',
+  isBcMapTracking: false,
+};
+
+test('renders TabsSection clickeable tabs', async () => {
+  const { getByRole, getByText } = render(
+    <TabsSection {...DEFAULT_MODAL_COMP} isCampaign isViewerIdSource={false} />,
+  );
+  const jsBtn = getByRole('tab', { name: /javascript/i });
+  act(() => {
+    fireEvent.click(jsBtn);
+  });
+  expect(getByText(/data-video-id/i)).toBeInTheDocument();
+});
+
+test('renders helper text for campaign players', async () => {
+  const { getByText } = render(
+    <TabsSection {...DEFAULT_MODAL_COMP} isCampaign isViewerIdSource={false} />,
+  );
+  expect(getByText('tabs.helperTextWarning')).toBeInTheDocument();
+});
+
+test('renders helper text for viewer id source players', async () => {
+  const { getByText } = render(
+    <TabsSection {...DEFAULT_MODAL_COMP} isCampaign={false} isViewerIdSource />,
+  );
+  expect(getByText('tabs.viewerIdTextWarning')).toBeInTheDocument();
+});
+
+test('renders iframe content if it is not campaign or viewer id', async () => {
+  const { getByText } = render(
+    <TabsSection
+      {...DEFAULT_MODAL_COMP}
+      isCampaign={false}
+      isViewerIdSource={false}
+    />,
+  );
+  expect(getByText(/allowfullscreen/i)).toBeInTheDocument();
+});

package/__tests__/TitleWithTooltip.test.tsx

@@ -0,0 +1,45 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { TitleWithTooltip } from '../src/js/components';
+import { truncateVideoTitle } from '../src/js/utils/util';
+
+const DEFAULT_VIDEO_COMP = {
+  videoId: '123',
+  videoName:
+    'The cat is a domestic species of small carnivorous mammal. It is the only domesticated species in the family Felidae and is often referred to as the domestic cat to distinguish it from the wild members of the family. ',
+  accountId: '456',
+  duration: 10,
+};
+
+const DEFAULT_PROJECT_COMP = {
+  videoId: '456',
+  interactivityProjectId: '987',
+  interactivityProjectName:
+    "The dog is a domesticated descendant of the wolf. Also called the domestic dog, it is derived from the extinct Pleistocene wolf, and the modern wolf is the dog's nearest living relative. ",
+  accountId: '456',
+  duration: 10,
+};
+
+test('renders TitleWithTooltip for Video with truncated title if its too long', () => {
+  const truncatedTitle = truncateVideoTitle(DEFAULT_VIDEO_COMP.videoName);
+  render(
+    <TitleWithTooltip
+      name={DEFAULT_VIDEO_COMP.videoName}
+      id={DEFAULT_VIDEO_COMP.videoId}
+    />,
+  );
+  expect(screen.getByText(truncatedTitle)).toBeInTheDocument();
+});
+
+test('renders TitleWithTooltip for Project with truncated title if its too long', () => {
+  const truncatedTitle = truncateVideoTitle(
+    DEFAULT_PROJECT_COMP.interactivityProjectName,
+  );
+  render(
+    <TitleWithTooltip
+      name={DEFAULT_PROJECT_COMP.interactivityProjectName}
+      id={DEFAULT_PROJECT_COMP.videoId}
+    />,
+  );
+  expect(screen.getByText(truncatedTitle)).toBeInTheDocument();
+});

package/__tests__/VideoPlayer.test.tsx

@@ -0,0 +1,38 @@
+import React from 'react';
+import { QueryClientProvider, QueryClient } from 'react-query';
+import { render, screen } from '@testing-library/react';
+import { VideoPlayer } from '../src/js/components/VideoPlayer';
+import { EmbedCodeModalTypes } from '../src/js/types/EmbedCodeModalProps';
+import { PLAYER_LIST_FOR_SELECTION, PLAYERS } from '../src/js/constants/player';
+
+jest.mock('../src/js/utils/featureSwitches');
+
+const wrappedComponent = (children: React.ReactElement) => (
+  <QueryClientProvider client={new QueryClient()}>
+    {children}
+  </QueryClientProvider>
+);
+
+const DEFAULT_MODAL_COMP = {
+  videoId: '123',
+  videoName: 'test video',
+  accountId: '456',
+  duration: 10,
+};
+
+test('renders EmbedCodeModal component with right information', () => {
+  render(
+    wrappedComponent(
+      <VideoPlayer
+        video={DEFAULT_MODAL_COMP}
+        embedCodeModalType={EmbedCodeModalTypes.VIDEO}
+        playerListForSelection={PLAYER_LIST_FOR_SELECTION}
+        players={PLAYERS}
+      />,
+    ),
+  );
+  expect(screen.getByText(DEFAULT_MODAL_COMP.videoId)).toBeInTheDocument();
+  expect(screen.getByText(DEFAULT_MODAL_COMP.videoName)).toBeInTheDocument();
+  expect(screen.getByRole('tab', { name: /javascript/i })).toBeInTheDocument();
+  expect(screen.getByRole('tab', { name: /IFrame/i })).toBeInTheDocument();
+});

package/__tests__/util.test.ts

@@ -0,0 +1,89 @@
+import {
+  getVideoPreviewLink,
+  sortAsc,
+  truncateVideoTitle,
+} from '../src/js/utils/util';
+
+test('sorting working as expected', () => {
+  const data = [
+    { value: '6B9lFzOYe', label: '#1212' },
+    { value: 'BKCEJEm0L', label: 'other 2' },
+    { value: 'WbMYTw0lh', label: '&^qwe' },
+    { value: 'ZLJg8MzKS', label: '123' },
+    { value: 'default', label: 'Brightcove' },
+  ];
+  const expected = [
+    { value: 'WbMYTw0lh', label: '&^qwe' },
+    { value: '6B9lFzOYe', label: '#1212' },
+    { value: 'ZLJg8MzKS', label: '123' },
+    { value: 'default', label: 'Brightcove' },
+    { value: 'BKCEJEm0L', label: 'other 2' },
+  ];
+  expect(sortAsc(data)).toEqual(expected);
+});
+
+test('video preview url created correctly', () => {
+  const video = {
+    videoId: 'test',
+    videoName: 'test',
+    accountId: 'test',
+    posterUrl: 'test',
+    duration: 10,
+  };
+  const expected =
+    'https://players.qa.brightcove.net/test/default_default/index.html?videoId=test';
+  expect(
+    getVideoPreviewLink({
+      accountId: video.accountId,
+      videoId: video.videoId,
+      playerId: 'default',
+    }),
+  ).toBe(expected);
+});
+
+test('interactivity project preview url created correctly', () => {
+  const video = {
+    interactivityProjectId: 'test',
+    accountId: 'test',
+    posterUrl: 'test',
+    duration: 10,
+  };
+  const expected =
+    'https://players.qa.brightcove.net/test/default_default/index.html?interactivityProjectId=test';
+  expect(
+    getVideoPreviewLink({
+      accountId: video.accountId,
+      interactivityProjectId: video.interactivityProjectId,
+      playerId: 'default',
+    }),
+  ).toBe(expected);
+});
+
+test('long video titles are truncated properly', () => {
+  const video = {
+    videoId: 'test',
+    videoName:
+      'The cat is a domestic species of small carnivorous mammal. It is the only domesticated species in the family Felidae and is often referred to as the domestic cat to distinguish it from the wild members of the family. ',
+    accountId: 'test',
+    posterUrl: 'test',
+    duration: 10,
+  };
+  const expected =
+    'The cat is a domestic species of small carnivorous mammal. I...';
+  const truncatedTitle = truncateVideoTitle(video.videoName);
+
+  expect(expected).toEqual(truncatedTitle);
+});
+
+test('short video titles are truncated properly', () => {
+  const video = {
+    videoId: 'test',
+    videoName: 'This is a normal video title',
+    accountId: 'test',
+    posterUrl: 'test',
+    duration: 10,
+  };
+  const truncatedTitle = truncateVideoTitle(video.videoName);
+
+  expect(video.videoName).toEqual(truncatedTitle);
+});

package/babel.config.json

@@ -0,0 +1,17 @@
+{
+  "presets": [
+    [
+      "@babel/preset-env",
+      {
+        "useBuiltIns": "entry",
+        "corejs": 3
+      }
+    ],
+    "@babel/preset-typescript",
+    "@babel/preset-react"
+  ],
+  "plugins": [
+    "@babel/proposal-class-properties",
+    "@babel/plugin-transform-runtime"
+  ]
+}

package/etc/wildcard.brightcove.com.key

@@ -0,0 +1,27 @@
+-----BEGIN RSA PRIVATE KEY-----
+MIIEpAIBAAKCAQEAxXmI7sOBKvFm8TFIhKoYCYOaDE+upc6TcPqNlTt8wA8bBpUY
+Je99ofu5CBNsD0uI1XTWy+Bjmo177ND+3apni6KZkOh8kSb/5OAL+eEbqHksL8Z6
++bAlKtOjjyv3Se/T8sEIo1dszgBFVdPbQZVrYLzGu9g6tLcu1jJ9mjdCLthEdSJH
+tPkTFUYp8Wlup9qMmvG1jo2wqz4pFVtHyZW/fCkQ+MkfeOPnGiSw2oEnHaVmGuPF
+eyxhWBh2q2MAqpyc9qVMkDQowQxtg//zOVlr632XZpI2xhpuINHUztDxEHOB3Hd5
+lT+v3WQttQZ/1gRXaJkFAGKxgbLfuLh92L975QIDAQABAoIBAFKdh/YsAKwQlnqt
+naMy7h982UPxSiXACNspV3ZpjsVjDHFyisnEKhFMmJqSVZEIjtSOrxZYaBNOwdvP
+i/D8y5kVi52eRg8L+96rBRejX8jZ+Ox74xL26HXEWRca07gxB8D1lUGQ38pHPrqr
+iX0kn+m20IXh7p2QTZ37PaT5HU0vHIs6K0wOWelPxjtU93FIsiwfaOOba3FOLEXa
+Sd5GvRu9pCpSPO45zTsMI6w1MlD38KUJDcBf2Tm/gSMgfDvj1gPvynXBedlWDXsL
+TIckV0YO0gmRiWanoXc0lafE3Fb0ctcRrGBBlpjhGxkXxYNY5A6b8CE9eJQWtUg8
+7Xo14kECgYEA9V3uqpE0TuArzNzy8jth0meH/gGmIWknQSCSX2wj6b4yvArOWrsS
+qyq1Wd0JfE8AOZf4uWuiJKRk0uRE+xkpYk4tH+7/0+R315a1SXiQb020R6iMC406
+wrRSz0R+xFF8zyD4AKKxSO8CgMotcU/oH78lGObWwTuxQlptXjcC8/kCgYEAzghL
+EDS6TzM9EFt8rbOi6quoahTsDNoPm8kG1TNKxmM805N7dQS3E72/6Sp2ndiTysgu
+rS8j0JC8yBx6oaQMcvY/dUZ3/ZdR6Y6SDqmaTFmbcpWGQzKW89VP5kIffi80dF3A
+FtXt94mG2vcbxdWxyC8CIrDwevfmczs0C5pPak0CgYBHJHcg6X0bKZBJk/61EVap
+pO8fTOcYZN7G2WTXWgmHqmgXcaKnV/pvurBeX+JyMo3EJTYuvPCEY04Af8MocwE2
+yaf3zFpM27+LuNzTcqueOg99f3crmkVhUtt30UpYLbBcdhiyRnnUxcgaA4Tth9er
+7MYa1EOMP3yD2qg/Wv/2MQKBgQCnRrJzCOxPC0HDuxOiD9vw/cexwSTZVl4f1HoY
+tRk7syyadv5gRqDBhWh/zXsastFjbV4AO+qvFiQ/sGecPw3gdK+W7szS9n2Jy7gn
+8WmWHZaI1H96pWNLut+xCfR5xaen5snjgHNBa8YylzhUSiiaaBgqxE+q9wSCgAnE
+ddeObQKBgQCpy2Vq/aUUNMVNDV3vmEwYRD8qsqe5JWXswyOM+ZyHg3N06auP2RHx
+NqUE9gdDxR1gc6cUhxbR9+L9DMEWiLVqXY51yddMCVuQVTHyH4MhyJcXv1eEbtX2
+T/5dnQPy5ib85HAvAei6bf+uRKjm86984JfYZIwEwbGS+H9irF/3Pw==
+-----END RSA PRIVATE KEY-----

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": "0.8.2",
+  "version": "0.8.3",
   "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",
@@ -85,6 +96,5 @@
     "@brightcove/studio-icons": "*",
     "react": "^17.0.2",
     "react-dom": "^17.0.2"
-  },
-  "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,16 @@
+import EmbedCodeModal from './js/EmbedCodeModal';
+import type {
+  VideoPayload,
+  PlayerPayload,
+  ProjectPayload,
+} from 'js/types/EmbedCodeModalProps';
+// eslint-disable-next-line no-duplicate-imports
+import { EmbedCodeModalTypes } from 'js/types/EmbedCodeModalProps';
+
+export {
+  EmbedCodeModal,
+  VideoPayload,
+  PlayerPayload,
+  ProjectPayload,
+  EmbedCodeModalTypes,
+};

package/src/js/EmbedCodeModal.tsx

@@ -0,0 +1,88 @@
+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';
+
+const appTheme = 'blueSteel';
+
+initialize({ theme: appTheme });
+
+const queryClient = new QueryClient();
+
+export interface EmbedCodeModalProps {
+  data: ModalDataPayload;
+  language?: 'en' | 'es' | 'fr' | 'ko' | 'ja' | 'zh';
+  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;
+}
+
+const EmbedModal = ({
+  data,
+  language,
+  embedCodeModalType,
+  embedCodeProperties,
+  isOutstreamPlayer,
+  showDVR,
+  onDVRClick,
+  dvrTime,
+  showLowLatency,
+  onLowLatencyClick,
+}: EmbedCodeModalProps) => {
+  const [componentKey, setComponentKey] = useState(0);
+  const [hasCreatedPlayer, setHasCreatedPlayer] = useState(false);
+
+  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}
+          embedCodeModalType={embedCodeModalType}
+          handleSetHasCreatedPlayer={handleSetHasCreatedPlayer}
+          hasCreatedPlayer={hasCreatedPlayer}
+          embedCodeProperties={embedCodeProperties}
+          isOutstreamPlayer={isOutstreamPlayer}
+          showDVR={showDVR}
+          onDVRClick={onDVRClick}
+          dvrTime={dvrTime}
+          showLowLatency={showLowLatency}
+          onLowLatencyClick={onLowLatencyClick}
+        />
+      </I18nextProvider>
+    </QueryClientProvider>
+  ) : null;
+};
+
+export default EmbedModal;