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

package/.github/workflows/ci.yml

@@ -20,4 +20,4 @@ jobs:
         test:ci
       dry-run: false
     secrets:
-      npm-token: ${{ secrets.NPM_PUBLISH_TOKEN }}
+      npm-token: ${{ secrets.NPM_TOKEN }}

package/CHANGELOG.md

@@ -7,6 +7,22 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 
 ## [Unreleased]
 
+## [1.1.3] - 2026-09-25
+### Added
+- Mobile layout for the live embed modal: bottom sheet, Copy Code / Done footer, compact URL / Preview row and a hidden code card
+
+### Changed
+- Use prism-core's native modal props for sizing, scrolling and the header border, with the columns scrolling independently
+- Switch between the stacked and two-column layouts at a single 1024px breakpoint
+- Fill the width/height sizing inputs and use Prism's default desktop size for the Copy URL / Preview buttons
+
+### Fixed
+- Copy the recommended embed on mobile (JavaScript for Campaign, Viewer ID and MAP tracking players)
+
+## [1.1.2] - 2026-08-13
+### Fixed
+- Allow DVR and Low Latency to be selected simultaneously in the live embed modal
+
 ## [1.1.1] - 2026-07-28
 ### Fixed
 - Point the root `types` at `./build/src/index.d.ts`, so consumers get declarations again. `publish-dir` moved from `build` to `.` in 1.0.8, which made the root `package.json` the published manifest; `main` was already root-relative but `types` still assumed `build/` was the package root, so 1.0.8 and 1.1.0 shipped a `types` path that does not exist and consumers hit `TS7016`
@@ -338,7 +354,11 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 ### Added
 - Initial commit of embed code modal component
 
-[Unreleased]: https://bithub.brightcove.com/studio-ui-kit/studio-components-embed-code-modal/compare/v1.0.6...HEAD
+[Unreleased]: https://bithub.brightcove.com/studio-ui-kit/studio-components-embed-code-modal/compare/v1.1.2...HEAD
+[1.1.2]: https://bithub.brightcove.com/studio-ui-kit/studio-components-embed-code-modal/compare/v1.1.1...v1.1.2
+[1.1.1]: https://bithub.brightcove.com/studio-ui-kit/studio-components-embed-code-modal/compare/v1.1.0...v1.1.1
+[1.1.0]: https://bithub.brightcove.com/studio-ui-kit/studio-components-embed-code-modal/compare/v1.0.7...v1.1.0
+[1.0.7]: https://bithub.brightcove.com/studio-ui-kit/studio-components-embed-code-modal/compare/v1.0.6...v1.0.7
 [1.0.6]: https://bithub.brightcove.com/studio-ui-kit/studio-components-embed-code-modal/compare/v1.0.5...v1.0.6
 [1.0.5]: https://bithub.brightcove.com/studio-ui-kit/studio-components-embed-code-modal/compare/v1.0.4...v1.0.5
 [1.0.4]: https://bithub.brightcove.com/studio-ui-kit/studio-components-embed-code-modal/compare/v1.0.3...v1.0.4

package/__tests__/PrismLiveModal.test.tsx

@@ -0,0 +1,85 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { PrismLiveModal } from '../src/js/components/prism/PrismLiveModal';
+import { LivePayload } from '../src/js/types/EmbedCodeModalProps';
+
+jest.mock('@brightcove/prism-core', () => ({
+  PrismModal: ({
+    children,
+    ...props
+  }: {
+    children: React.ReactNode;
+  } & Record<string, unknown>) => (
+    <div data-testid='prism-modal' data-props={JSON.stringify(props)}>
+      {children}
+    </div>
+  ),
+}));
+
+jest.mock('../src/js/components/prism/PrismPlayerControls', () => ({
+  PrismPlayerControls: () => <div />,
+}));
+
+jest.mock('../src/js/components/prism/PrismPlayerPreview', () => ({
+  PrismPlayerPreview: () => <div />,
+}));
+
+jest.mock('js/utils/util', () => ({
+  getVideoPreviewLink: jest.fn(() => ''),
+}));
+
+const VIDEO: LivePayload = {
+  videoId: '123',
+  accountId: '456',
+  livePlaybackToken: 'token',
+  adConfigId: '',
+};
+
+const renderModal = () =>
+  render(
+    <PrismLiveModal
+      isOpen
+      onClose={jest.fn()}
+      video={VIDEO}
+      players={{}}
+      playerListForSelection={[]}
+    />,
+  );
+
+const setViewportWidth = (width: number) =>
+  Object.defineProperty(window, 'innerWidth', {
+    configurable: true,
+    value: width,
+  });
+
+describe('PrismLiveModal', () => {
+  afterEach(() => setViewportWidth(1024));
+
+  const renderProps = () =>
+    JSON.parse(
+      screen.getByTestId('prism-modal').getAttribute('data-props') as string,
+    );
+
+  test('configures the modal through native Prism props', () => {
+    renderModal();
+
+    expect(renderProps()).toMatchObject({
+      size: 'extraLarge',
+      forceMaxHeight: true,
+      contentScroll: 'none',
+      showHeaderBottomBorder: true,
+    });
+  });
+
+  test('docks as a bottom sheet and copies the code from the mobile footer', () => {
+    setViewportWidth(800);
+    renderModal();
+
+    expect(renderProps()).toMatchObject({
+      bottomSheet: true,
+      contentScroll: 'auto',
+      primaryButtonText: 'copyCode',
+      cancelButtonText: 'done',
+    });
+  });
+});

package/__tests__/PrismPlayerControls.test.tsx

@@ -0,0 +1,139 @@
+import React from 'react';
+import { render, screen, fireEvent } from '@testing-library/react';
+import { PrismPlayerControls } from '../src/js/components/prism/PrismPlayerControls';
+import {
+  EmbedCodeAspectRatio,
+  EmbedCodeUnits,
+} from '../src/js/types/EmbedCodeModalProps';
+import { PLAYER_LIST_FOR_SELECTION, PLAYERS } from '../src/js/constants/player';
+
+jest.mock('@brightcove/prism-core', () => ({
+  PrismCheckbox: ({
+    label,
+    checked,
+    onChange,
+    disabled,
+  }: {
+    label: string;
+    checked: boolean;
+    onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+    disabled?: boolean;
+  }) => (
+    <input
+      type='checkbox'
+      aria-label={label}
+      checked={checked}
+      onChange={onChange}
+      disabled={disabled}
+    />
+  ),
+  PrismDropDown: () => <div />,
+  PrismInput: () => <div />,
+  PrismIconButton: () => <button />,
+  PrismCodeCard: () => <div />,
+}));
+
+const DEFAULT_VIDEO = {
+  videoId: '789',
+  accountId: '456',
+  livePlaybackToken: 'token123',
+  adConfigId: '',
+};
+
+const DEFAULT_EMBED_PROPERTIES = {
+  width: 960,
+  height: 540,
+  units: EmbedCodeUnits.PX,
+  responsive: false,
+  aspectRatio: EmbedCodeAspectRatio.CUSTOM,
+};
+
+const renderControls = (extraProps = {}) =>
+  render(
+    <PrismPlayerControls
+      video={DEFAULT_VIDEO}
+      players={PLAYERS}
+      playerListForSelection={PLAYER_LIST_FOR_SELECTION}
+      selectedPlayer='default'
+      onPlayerChange={jest.fn()}
+      embedProperties={DEFAULT_EMBED_PROPERTIES}
+      setEmbedProperties={jest.fn()}
+      showDVR
+      showLowLatency
+      dvrTime={300}
+      {...extraProps}
+    />,
+  );
+
+describe('embed code reporting', () => {
+  test('reports the iframe embed for a plain player', () => {
+    const onEmbedCodeChange = jest.fn();
+    renderControls({ onEmbedCodeChange });
+
+    const code = onEmbedCodeChange.mock.calls.at(-1)?.[0] as string;
+    expect(code).toContain('<iframe');
+  });
+
+  test('reports the JavaScript embed for a player that requires it', () => {
+    const onEmbedCodeChange = jest.fn();
+    renderControls({
+      players: {
+        default: { ...PLAYERS.default, hasCampaignPlugin: true },
+      },
+      onEmbedCodeChange,
+    });
+
+    const code = onEmbedCodeChange.mock.calls.at(-1)?.[0] as string;
+    expect(code).toContain('<video-js');
+  });
+});
+
+describe('DVR and Low Latency checkboxes are independent', () => {
+  test('both checkboxes are enabled when asset supports DVR and Low Latency', () => {
+    renderControls();
+    expect(
+      screen.getByRole('checkbox', { name: 'dvr.allowDVR' }),
+    ).not.toBeDisabled();
+    expect(
+      screen.getByRole('checkbox', { name: 'lowLatency' }),
+    ).not.toBeDisabled();
+  });
+
+  test('DVR checkbox starts unchecked when Low Latency is also present', () => {
+    renderControls();
+    expect(
+      screen.getByRole('checkbox', { name: 'dvr.allowDVR' }),
+    ).not.toBeChecked();
+    expect(screen.getByRole('checkbox', { name: 'lowLatency' })).toBeChecked();
+  });
+
+  test('Low Latency checkbox stays enabled when DVR is checked', () => {
+    renderControls();
+    fireEvent.click(screen.getByRole('checkbox', { name: 'dvr.allowDVR' }));
+    expect(
+      screen.getByRole('checkbox', { name: 'lowLatency' }),
+    ).not.toBeDisabled();
+  });
+
+  test('DVR checkbox stays enabled when Low Latency is checked', () => {
+    renderControls();
+    fireEvent.click(screen.getByRole('checkbox', { name: 'lowLatency' }));
+    expect(
+      screen.getByRole('checkbox', { name: 'dvr.allowDVR' }),
+    ).not.toBeDisabled();
+  });
+
+  test('each callback fires independently without affecting the other', () => {
+    const onDVRClick = jest.fn();
+    const onLowLatencyClick = jest.fn();
+    renderControls({ onDVRClick, onLowLatencyClick });
+
+    fireEvent.click(screen.getByRole('checkbox', { name: 'dvr.allowDVR' }));
+    expect(onDVRClick).toHaveBeenCalledTimes(1);
+    expect(onLowLatencyClick).not.toHaveBeenCalled();
+
+    fireEvent.click(screen.getByRole('checkbox', { name: 'lowLatency' }));
+    expect(onLowLatencyClick).toHaveBeenCalledTimes(1);
+    expect(onDVRClick).toHaveBeenCalledTimes(1);
+  });
+});

package/__tests__/VideoPlayer.test.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { QueryClientProvider, QueryClient } from 'react-query';
-import { render, screen } from '@testing-library/react';
+import { render, screen, fireEvent } 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';
@@ -20,6 +20,13 @@ const DEFAULT_MODAL_COMP = {
   duration: 10,
 };
 
+const LIVE_MODAL_COMP = {
+  videoId: '789',
+  accountId: '456',
+  livePlaybackToken: 'token123',
+  adConfigId: '',
+};
+
 test('renders EmbedCodeModal component with right information', () => {
   render(
     wrappedComponent(
@@ -36,3 +43,63 @@ test('renders EmbedCodeModal component with right information', () => {
   expect(screen.getByRole('tab', { name: /javascript/i })).toBeInTheDocument();
   expect(screen.getByRole('tab', { name: /IFrame/i })).toBeInTheDocument();
 });
+
+describe('DVR and Low Latency checkboxes are independent', () => {
+  const renderLivePlayer = (extraProps = {}) =>
+    render(
+      wrappedComponent(
+        <VideoPlayer
+          video={LIVE_MODAL_COMP}
+          embedCodeModalType={EmbedCodeModalTypes.LIVE}
+          playerListForSelection={PLAYER_LIST_FOR_SELECTION}
+          players={PLAYERS}
+          showDVR
+          showLowLatency
+          {...extraProps}
+        />,
+      ),
+    );
+
+  const getDVRCheckbox = () =>
+    screen.getByRole('checkbox', { name: /dvr\.allowDVR/i });
+  const getLowLatencyCheckbox = () =>
+    screen.getByRole('checkbox', { name: /lowLatency/i });
+
+  test('both checkboxes are enabled when asset supports DVR and Low Latency', () => {
+    renderLivePlayer();
+    expect(getDVRCheckbox()).not.toBeDisabled();
+    expect(getLowLatencyCheckbox()).not.toBeDisabled();
+  });
+
+  test('DVR checkbox starts unchecked when Low Latency is also present', () => {
+    renderLivePlayer();
+    expect(getDVRCheckbox()).not.toBeChecked();
+    expect(getLowLatencyCheckbox()).toBeChecked();
+  });
+
+  test('Low Latency checkbox stays enabled when DVR is checked', () => {
+    renderLivePlayer();
+    fireEvent.click(getDVRCheckbox());
+    expect(getLowLatencyCheckbox()).not.toBeDisabled();
+  });
+
+  test('DVR checkbox stays enabled when Low Latency is checked', () => {
+    renderLivePlayer();
+    fireEvent.click(getLowLatencyCheckbox());
+    expect(getDVRCheckbox()).not.toBeDisabled();
+  });
+
+  test('each callback fires independently without affecting the other', () => {
+    const onDVRClick = jest.fn();
+    const onLowLatencyClick = jest.fn();
+    renderLivePlayer({ onDVRClick, onLowLatencyClick });
+
+    fireEvent.click(getDVRCheckbox());
+    expect(onDVRClick).toHaveBeenCalledTimes(1);
+    expect(onLowLatencyClick).not.toHaveBeenCalled();
+
+    fireEvent.click(getLowLatencyCheckbox());
+    expect(onLowLatencyClick).toHaveBeenCalledTimes(1);
+    expect(onDVRClick).toHaveBeenCalledTimes(1);
+  });
+});

package/build/__tests__/PrismLiveModal.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=PrismLiveModal.test.d.ts.map

package/build/__tests__/PrismLiveModal.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PrismLiveModal.test.d.ts","sourceRoot":"","sources":["../../__tests__/PrismLiveModal.test.tsx"],"names":[],"mappings":""}

package/build/__tests__/PrismPlayerControls.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=PrismPlayerControls.test.d.ts.map

package/build/__tests__/PrismPlayerControls.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PrismPlayerControls.test.d.ts","sourceRoot":"","sources":["../../__tests__/PrismPlayerControls.test.tsx"],"names":[],"mappings":""}