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

package/build/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@brightcove/components-embed-code-modal",
-  "version": "1.1.1",
+  "version": "1.1.3",
   "repository": {
     "type": "git",
     "url": "https://bithub.brightcove.com/studio-ui-kit/studio-components-embed-code-modal.git"
@@ -34,7 +34,7 @@
     "@brightcove/kacl": "^0.1.11",
     "@brightcove/notify-change": "^0.1.7",
     "@brightcove/player-embed-code": "^2.0.4",
-    "@brightcove/prism-core": "^1.64.0",
+    "@brightcove/prism-core": "^1.174.0",
     "@brightcove/react-player-loader": "^1.4.2",
     "@brightcove/studio-api-services": "^7.0.0",
     "@brightcove/studio-components": "^7.23.4",

package/build/src/js/components/prism/PrismLiveModal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PrismLiveModal.d.ts","sourceRoot":"","sources":["../../../../../src/js/components/prism/PrismLiveModal.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA8B,MAAM,OAAO,CAAC;AAGnD,OAAO,EAAE,gBAAgB,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AACnE,OAAO,EACL,WAAW,EAIZ,MAAM,8BAA8B,CAAC;AAQtC,UAAU,mBAAmB;IAC3B,MAAM,EAAE,OAAO,CAAC;IAChB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,KAAK,EAAE,WAAW,CAAC;IACnB,OAAO,EAAE,aAAa,CAAC;IACvB,sBAAsB,EAAE,gBAAgB,EAAE,CAAC;IAC3C,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,UAAU,CAAC,EAAE,CAAC,QAAQ,EAAE,OAAO,KAAK,IAAI,CAAC;IACzC,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,iBAAiB,CAAC,EAAE,CAAC,QAAQ,EAAE,OAAO,KAAK,IAAI,CAAC;IAChD,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,gBAAgB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC3C,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,eAAe,CAAC,EAAE,KAAK,CAAC;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;CAC3D;AAWD,eAAO,MAAM,cAAc,0LAexB,mBAAmB,sBAuGrB,CAAC"}
+{"version":3,"file":"PrismLiveModal.d.ts","sourceRoot":"","sources":["../../../../../src/js/components/prism/PrismLiveModal.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA2C,MAAM,OAAO,CAAC;AAGhE,OAAO,EAAE,gBAAgB,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AACnE,OAAO,EACL,WAAW,EAIZ,MAAM,8BAA8B,CAAC;AAatC,UAAU,mBAAmB;IAC3B,MAAM,EAAE,OAAO,CAAC;IAChB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,KAAK,EAAE,WAAW,CAAC;IACnB,OAAO,EAAE,aAAa,CAAC;IACvB,sBAAsB,EAAE,gBAAgB,EAAE,CAAC;IAC3C,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,UAAU,CAAC,EAAE,CAAC,QAAQ,EAAE,OAAO,KAAK,IAAI,CAAC;IACzC,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,iBAAiB,CAAC,EAAE,CAAC,QAAQ,EAAE,OAAO,KAAK,IAAI,CAAC;IAChD,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,gBAAgB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC3C,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,eAAe,CAAC,EAAE,KAAK,CAAC;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;CAC3D;AAWD,eAAO,MAAM,cAAc,0LAexB,mBAAmB,sBAoIrB,CAAC"}

package/build/src/js/components/prism/PrismPlayerControls.d.ts

@@ -21,7 +21,8 @@ interface PrismPlayerControlsProps {
         label: string;
         value: string;
     }>;
+    onEmbedCodeChange?: (code: string) => void;
 }
-export declare const PrismPlayerControls: ({ video, players, playerListForSelection, selectedPlayer, onPlayerChange, embedProperties, setEmbedProperties, showDVR, onDVRClick, dvrTime, showLowLatency, onLowLatencyClick, adConfigValue, onAdConfigChange, ssai, adConfigOptions, }: PrismPlayerControlsProps) => React.JSX.Element;
+export declare const PrismPlayerControls: ({ video, players, playerListForSelection, selectedPlayer, onPlayerChange, embedProperties, setEmbedProperties, showDVR, onDVRClick, dvrTime, showLowLatency, onLowLatencyClick, adConfigValue, onAdConfigChange, ssai, adConfigOptions, onEmbedCodeChange, }: PrismPlayerControlsProps) => React.JSX.Element;
 export {};
 //# sourceMappingURL=PrismPlayerControls.d.ts.map

package/build/src/js/components/prism/PrismPlayerControls.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PrismPlayerControls.d.ts","sourceRoot":"","sources":["../../../../../src/js/components/prism/PrismPlayerControls.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAyC,MAAM,OAAO,CAAC;AAU9D,OAAO,EAAE,gBAAgB,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AACnE,OAAO,EACL,WAAW,EAEX,mBAAmB,EACpB,MAAM,8BAA8B,CAAC;AAUtC,UAAU,wBAAwB;IAChC,KAAK,EAAE,WAAW,CAAC;IACnB,OAAO,EAAE,aAAa,CAAC;IACvB,sBAAsB,EAAE,gBAAgB,EAAE,CAAC;IAC3C,cAAc,EAAE,MAAM,CAAC;IACvB,cAAc,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IAC3C,eAAe,EAAE,mBAAmB,CAAC;IACrC,kBAAkB,EAAE,CAAC,KAAK,EAAE,mBAAmB,KAAK,IAAI,CAAC;IACzD,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,UAAU,CAAC,EAAE,CAAC,QAAQ,EAAE,OAAO,KAAK,IAAI,CAAC;IACzC,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,iBAAiB,CAAC,EAAE,CAAC,QAAQ,EAAE,OAAO,KAAK,IAAI,CAAC;IAChD,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,gBAAgB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC3C,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,eAAe,CAAC,EAAE,KAAK,CAAC;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;CAC3D;AAED,eAAO,MAAM,mBAAmB,8OAiB7B,wBAAwB,sBAyR1B,CAAC"}
+{"version":3,"file":"PrismPlayerControls.d.ts","sourceRoot":"","sources":["../../../../../src/js/components/prism/PrismPlayerControls.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoD,MAAM,OAAO,CAAC;AAUzE,OAAO,EAAE,gBAAgB,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AACnE,OAAO,EACL,WAAW,EAEX,mBAAmB,EACpB,MAAM,8BAA8B,CAAC;AAUtC,UAAU,wBAAwB;IAChC,KAAK,EAAE,WAAW,CAAC;IACnB,OAAO,EAAE,aAAa,CAAC;IACvB,sBAAsB,EAAE,gBAAgB,EAAE,CAAC;IAC3C,cAAc,EAAE,MAAM,CAAC;IACvB,cAAc,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IAC3C,eAAe,EAAE,mBAAmB,CAAC;IACrC,kBAAkB,EAAE,CAAC,KAAK,EAAE,mBAAmB,KAAK,IAAI,CAAC;IACzD,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,UAAU,CAAC,EAAE,CAAC,QAAQ,EAAE,OAAO,KAAK,IAAI,CAAC;IACzC,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,iBAAiB,CAAC,EAAE,CAAC,QAAQ,EAAE,OAAO,KAAK,IAAI,CAAC;IAChD,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,gBAAgB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC3C,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,eAAe,CAAC,EAAE,KAAK,CAAC;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;IAC1D,iBAAiB,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;CAC5C;AAED,eAAO,MAAM,mBAAmB,iQAkB7B,wBAAwB,sBAoS1B,CAAC"}

package/build/src/js/components/prism/PrismPlayerPreview.d.ts

@@ -6,7 +6,8 @@ interface PrismPlayerPreviewProps {
     previewUrl: string;
     livePlaybackToken?: string;
     adConfigId?: string;
+    isMobile?: boolean;
 }
-export declare const PrismPlayerPreview: ({ accountId, playerId, videoId, previewUrl, }: PrismPlayerPreviewProps) => React.JSX.Element;
+export declare const PrismPlayerPreview: ({ accountId, playerId, videoId, previewUrl, isMobile, }: PrismPlayerPreviewProps) => React.JSX.Element;
 export {};
 //# sourceMappingURL=PrismPlayerPreview.d.ts.map

package/build/src/js/components/prism/PrismPlayerPreview.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PrismPlayerPreview.d.ts","sourceRoot":"","sources":["../../../../../src/js/components/prism/PrismPlayerPreview.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4D,MAAM,OAAO,CAAC;AAUjF,UAAU,uBAAuB;IAC/B,SAAS,EAAE,MAAM,CAAC;IAClB,QAAQ,EAAE,MAAM,CAAC;IACjB,OAAO,EAAE,MAAM,CAAC;IAChB,UAAU,EAAE,MAAM,CAAC;IACnB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED,eAAO,MAAM,kBAAkB,kDAK5B,uBAAuB,sBAmKzB,CAAC"}
+{"version":3,"file":"PrismPlayerPreview.d.ts","sourceRoot":"","sources":["../../../../../src/js/components/prism/PrismPlayerPreview.tsx"],"names":[],"mappings":"AAAA,OAAO,KAMN,MAAM,OAAO,CAAC;AAUf,UAAU,uBAAuB;IAC/B,SAAS,EAAE,MAAM,CAAC;IAClB,QAAQ,EAAE,MAAM,CAAC;IACjB,OAAO,EAAE,MAAM,CAAC;IAChB,UAAU,EAAE,MAAM,CAAC;IACnB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,eAAO,MAAM,kBAAkB,4DAM5B,uBAAuB,sBAuKzB,CAAC"}

package/build/src/js/hooks/useIsMobile.d.ts

@@ -0,0 +1,3 @@
+declare const useIsMobile: () => boolean;
+export default useIsMobile;
+//# sourceMappingURL=useIsMobile.d.ts.map

package/build/src/js/hooks/useIsMobile.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useIsMobile.d.ts","sourceRoot":"","sources":["../../../../src/js/hooks/useIsMobile.ts"],"names":[],"mappings":"AASA,QAAA,MAAM,WAAW,QAAO,OAqBvB,CAAC;AAEF,eAAe,WAAW,CAAC"}

package/build/src/js/i18n.d.ts

@@ -22,6 +22,10 @@ export declare const resources: {
                 bcMapTrackingTextWarning: string;
             };
             done: string;
+            urlShort: string;
+            previewShort: string;
+            copyCode: string;
+            codeCopied: string;
             close: string;
             toasterTitle: string;
             toasterMessage: string;
@@ -95,6 +99,10 @@ export declare const resources: {
             toasterErrorMessage: string;
             customPluginNotice: string;
             done: string;
+            urlShort: string;
+            previewShort: string;
+            copyCode: string;
+            codeCopied: string;
             close: string;
             noPlayerModalHeader: string;
             noPlayerModalContent1: string;
@@ -162,6 +170,10 @@ export declare const resources: {
             toasterErrorMessage: string;
             customPluginNotice: string;
             done: string;
+            urlShort: string;
+            previewShort: string;
+            copyCode: string;
+            codeCopied: string;
             close: string;
             noPlayerModalHeader: string;
             noPlayerModalContent1: string;
@@ -229,6 +241,10 @@ export declare const resources: {
             toasterErrorMessage: string;
             customPluginNotice: string;
             done: string;
+            urlShort: string;
+            previewShort: string;
+            copyCode: string;
+            codeCopied: string;
             close: string;
             noPlayerModalHeader: string;
             noPlayerModalContent1: string;
@@ -296,6 +312,10 @@ export declare const resources: {
             toasterErrorMessage: string;
             customPluginNotice: string;
             done: string;
+            urlShort: string;
+            previewShort: string;
+            copyCode: string;
+            codeCopied: string;
             close: string;
             noPlayerModalHeader: string;
             noPlayerModalContent1: string;
@@ -363,6 +383,10 @@ export declare const resources: {
             toasterErrorMessage: string;
             customPluginNotice: string;
             done: string;
+            urlShort: string;
+            previewShort: string;
+            copyCode: string;
+            codeCopied: string;
             close: string;
             noPlayerModalHeader: string;
             noPlayerModalContent1: string;

package/build/src/js/i18n.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"i18n.d.ts","sourceRoot":"","sources":["../../../src/js/i18n.ts"],"names":[],"mappings":"AAAA,OAAO,IAAI,MAAM,SAAS,CAAC;AAU3B,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmBrB,CAAC;AAaF,eAAe,IAAI,CAAC"}
+{"version":3,"file":"i18n.d.ts","sourceRoot":"","sources":["../../../src/js/i18n.ts"],"names":[],"mappings":"AAAA,OAAO,IAAI,MAAM,SAAS,CAAC;AAU3B,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmBrB,CAAC;AAaF,eAAe,IAAI,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@brightcove/components-embed-code-modal",
-  "version": "1.1.1",
+  "version": "1.1.3",
   "repository": {
     "type": "git",
     "url": "https://bithub.brightcove.com/studio-ui-kit/studio-components-embed-code-modal.git"
@@ -45,7 +45,7 @@
     "@brightcove/kacl": "^0.1.11",
     "@brightcove/notify-change": "^0.1.7",
     "@brightcove/player-embed-code": "^2.0.4",
-    "@brightcove/prism-core": "^1.64.0",
+    "@brightcove/prism-core": "^1.174.0",
     "@brightcove/react-player-loader": "^1.4.2",
     "@brightcove/studio-api-services": "^7.0.0",
     "@brightcove/studio-components": "^7.23.4",

package/src/js/components/VideoPlayer.tsx

@@ -280,7 +280,7 @@ export const VideoPlayer = ({
         <TabsSection {...sharedProps} embedCodeProperties={embedProperties} />
         {showLowLatency ? (
           <Checkbox
-            disabled={showDVR && allowDVR}
+            disabled={false}
             checked={allowLowLatency}
             onChange={() => {
               onLowLatencyClick?.(!allowLowLatency);
@@ -295,7 +295,7 @@ export const VideoPlayer = ({
         {showDVR && (
           <div>
             <Checkbox
-              disabled={showLowLatency && allowLowLatency}
+              disabled={false}
               checked={allowDVR}
               onChange={() => {
                 onDVRClick?.(!allowDVR);

package/src/js/components/prism/PrismLiveModal.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useCallback } from 'react';
 import { PrismModal } from '@brightcove/prism-core';
 import { useTranslation } from 'react-i18next';
 import { PlayerSelectItem, PlayersObject } from 'js/types/players';
@@ -8,8 +8,13 @@ import {
   EmbedCodeAspectRatio,
   EmbedCodeUnits,
 } from 'js/types/EmbedCodeModalProps';
-import { getVideoPreviewLink, VideoPreviewLinkOptions } from 'js/utils/util';
+import {
+  getBrightcove,
+  getVideoPreviewLink,
+  VideoPreviewLinkOptions,
+} from 'js/utils/util';
 import { getFavoritePlayer } from 'js/utils/featureSwitches';
+import useIsMobile from 'js/hooks/useIsMobile';
 import { PrismPlayerControls } from './PrismPlayerControls';
 import { PrismPlayerPreview } from './PrismPlayerPreview';
 
@@ -58,12 +63,14 @@ export const PrismLiveModal = ({
   adConfigOptions,
 }: PrismLiveModalProps) => {
   const { t } = useTranslation();
+  const isMobile = useIsMobile();
   const [selectedPlayer, setSelectedPlayer] =
     useState<string>(DEFAULT_PLAYER_ID);
   const [embedProperties, setEmbedProperties] = useState<EmbedCodeProperties>(
     DEFAULT_EMBED_PROPERTIES,
   );
   const [previewUrl, setPreviewUrl] = useState<string>('');
+  const [embedCode, setEmbedCode] = useState<string>('');
 
   // Initialize selected player
   useEffect(() => {
@@ -114,15 +121,40 @@ export const PrismLiveModal = ({
     setSelectedPlayer(playerId);
   };
 
+  const handleCopyEmbedCode = useCallback(async () => {
+    if (!embedCode) {
+      return;
+    }
+    try {
+      await navigator.clipboard.writeText(embedCode);
+      getBrightcove().Toaster.success({
+        message: t('codeCopied') as string,
+      });
+    } catch {
+      getBrightcove().Toaster.error({
+        message: t('toasterErrorMessage') as string,
+      });
+    }
+  }, [embedCode, t]);
+
   return (
     <PrismModal
       isOpen={isOpen}
       onClose={onClose}
       title={(t('modalHeader') as string) || 'Publish Video'}
-      onPrimaryAction={onClose}
-      primaryButtonText={t('done') as string}
-      cancelButtonText={t('cancel') as string}
-      className={css.prismLiveModal}
+      bottomSheet={isMobile}
+      size='extraLarge'
+      forceMaxHeight
+      contentScroll={isMobile ? 'auto' : 'none'}
+      showHeaderBottomBorder
+      onPrimaryAction={isMobile ? handleCopyEmbedCode : onClose}
+      primaryButtonText={
+        isMobile ? (t('copyCode') as string) : (t('done') as string)
+      }
+      onSecondaryAction={onClose}
+      cancelButtonText={
+        isMobile ? (t('done') as string) : (t('cancel') as string)
+      }
     >
       <div className={css.prismLiveModalContent}>
         {/* Left Column: Player Controls */}
@@ -143,6 +175,7 @@ export const PrismLiveModal = ({
           onAdConfigChange={onAdConfigChange}
           ssai={ssai}
           adConfigOptions={adConfigOptions}
+          onEmbedCodeChange={setEmbedCode}
         />
 
         {/* Right Column: Player Preview */}
@@ -154,6 +187,7 @@ export const PrismLiveModal = ({
             previewUrl={previewUrl}
             livePlaybackToken={video.livePlaybackToken}
             adConfigId={adConfigValue || video.adConfigId}
+            isMobile={isMobile}
           />
         </div>
       </div>

package/src/js/components/prism/PrismPlayerControls.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useCallback, useMemo } from 'react';
+import React, { useState, useCallback, useEffect, useMemo } from 'react';
 import {
   PrismDropDown,
   PrismInput,
@@ -40,6 +40,7 @@ interface PrismPlayerControlsProps {
   onAdConfigChange?: (value: string) => void;
   ssai?: boolean;
   adConfigOptions?: Array<{ label: string; value: string }>;
+  onEmbedCodeChange?: (code: string) => void;
 }
 
 export const PrismPlayerControls = ({
@@ -59,6 +60,7 @@ export const PrismPlayerControls = ({
   onAdConfigChange,
   ssai,
   adConfigOptions = [],
+  onEmbedCodeChange,
 }: PrismPlayerControlsProps) => {
   const { t } = useTranslation();
   const [prevAspectRatio, setPrevAspectRatio] = useState(
@@ -161,6 +163,16 @@ export const PrismPlayerControls = ({
     adConfigId: adConfigValue || video.adConfigId,
   });
 
+  const requiresJsEmbed = Boolean(
+    player?.hasCampaignPlugin ||
+      player?.hasViewerIDSource ||
+      player?.hasBcMapTracking,
+  );
+
+  useEffect(() => {
+    onEmbedCodeChange?.(requiresJsEmbed ? embedCodeJS : embedCode);
+  }, [embedCode, embedCodeJS, requiresJsEmbed, onEmbedCodeChange]);
+
   const codeCardTabs = useMemo(
     () => [
       {
@@ -189,14 +201,8 @@ export const PrismPlayerControls = ({
       if (onDVRClick) {
         onDVRClick(checked);
       }
-      if (checked && lowLatencyEnabled) {
-        setLowLatencyEnabled(false);
-        if (onLowLatencyClick) {
-          onLowLatencyClick(false);
-        }
-      }
     },
-    [lowLatencyEnabled, onDVRClick, onLowLatencyClick],
+    [onDVRClick],
   );
 
   const handleLowLatencyChange = useCallback(
@@ -205,14 +211,8 @@ export const PrismPlayerControls = ({
       if (onLowLatencyClick) {
         onLowLatencyClick(checked);
       }
-      if (checked && dvrEnabled) {
-        setDvrEnabled(false);
-        if (onDVRClick) {
-          onDVRClick(false);
-        }
-      }
     },
-    [dvrEnabled, onDVRClick, onLowLatencyClick],
+    [onLowLatencyClick],
   );
 
   return (
@@ -247,17 +247,22 @@ export const PrismPlayerControls = ({
 
       {/* Width/Height Input Group */}
       <div className={css.prismInputGroup}>
-        <PrismInput
-          variant='FieldGroup'
-          label={(t('customSettings.playerWidth') as string) || 'Player Width'}
-          type='number'
-          value={String(embedProperties.width)}
-          onChange={(value) => handlePropertiesUpdate('width', Number(value))}
-          groupTitle='Unit'
-          groupValue={embedProperties.units}
-          onGroupChange={(unit) => handlePropertiesUpdate('units', unit)}
-          groupOptions={['px', '%']}
-        />
+        <div className={css.prismSizingField}>
+          <PrismInput
+            variant='FieldGroup'
+            fullWidth
+            label={
+              (t('customSettings.playerWidth') as string) || 'Player Width'
+            }
+            type='number'
+            value={String(embedProperties.width)}
+            onChange={(value) => handlePropertiesUpdate('width', Number(value))}
+            groupTitle='Unit'
+            groupValue={embedProperties.units}
+            onGroupChange={(unit) => handlePropertiesUpdate('units', unit)}
+            groupOptions={['px', '%']}
+          />
+        </div>
 
         <PrismIconButton
           icon='link'
@@ -268,20 +273,25 @@ export const PrismPlayerControls = ({
           className={css.prismLinkButton}
         />
 
-        <PrismInput
-          variant='FieldGroup'
-          label={
-            (t('customSettings.playerHeight') as string) || 'Player Height'
-          }
-          type='number'
-          value={String(embedProperties.height)}
-          onChange={(value) => handlePropertiesUpdate('height', Number(value))}
-          disabled={aspectRatioLocked}
-          groupTitle='Unit'
-          groupValue={embedProperties.units}
-          onGroupChange={(unit) => handlePropertiesUpdate('units', unit)}
-          groupOptions={['px', '%']}
-        />
+        <div className={css.prismSizingField}>
+          <PrismInput
+            variant='FieldGroup'
+            fullWidth
+            label={
+              (t('customSettings.playerHeight') as string) || 'Player Height'
+            }
+            type='number'
+            value={String(embedProperties.height)}
+            onChange={(value) =>
+              handlePropertiesUpdate('height', Number(value))
+            }
+            disabled={aspectRatioLocked}
+            groupTitle='Unit'
+            groupValue={embedProperties.units}
+            onGroupChange={(unit) => handlePropertiesUpdate('units', unit)}
+            groupOptions={['px', '%']}
+          />
+        </div>
       </div>
 
       {/* DVR Checkbox (conditional) */}
@@ -291,12 +301,13 @@ export const PrismPlayerControls = ({
             label={(t('dvr.allowDVR') as string) || 'Enable DVR'}
             checked={dvrEnabled}
             onChange={(e) => handleDVRChange(e.target.checked)}
-            disabled={showLowLatency && lowLatencyEnabled}
+            disabled={false}
           />
           {dvrEnabled && typeof dvrTime === 'number' && (
             <div className={css.prismInputGroup}>
               <PrismInput
                 variant='FieldGroup'
+                fullWidth
                 label={(t('dvr.inputLabel') as string) || 'DVR Window'}
                 type='number'
                 value={String(dvrTime)}
@@ -316,7 +327,7 @@ export const PrismPlayerControls = ({
           label={(t('lowLatency') as string) || 'Enable Low Latency'}
           checked={lowLatencyEnabled}
           onChange={(e) => handleLowLatencyChange(e.target.checked)}
-          disabled={showDVR && dvrEnabled}
+          disabled={false}
         />
       )}
 
@@ -337,7 +348,9 @@ export const PrismPlayerControls = ({
         <div className={css.prismCustomPluginNotice}>{warningMessage}</div>
       )}
 
-      <PrismCodeCard className={css.prismCodeCard} tabs={codeCardTabs} />
+      <div className={css.prismCodeCard}>
+        <PrismCodeCard indefiniteGrow tabs={codeCardTabs} />
+      </div>
     </div>
   );
 };

package/src/js/components/prism/PrismPlayerPreview.tsx

@@ -1,4 +1,10 @@
-import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import React, {
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
 import ReactPlayerLoader from '@brightcove/react-player-loader';
 import { PrismButton, PrismButtonDropdown } from '@brightcove/prism-core';
 import { getBrightcove, getUrlBase } from 'js/utils/util';
@@ -15,6 +21,7 @@ interface PrismPlayerPreviewProps {
   previewUrl: string;
   livePlaybackToken?: string;
   adConfigId?: string;
+  isMobile?: boolean;
 }
 
 export const PrismPlayerPreview = ({
@@ -22,6 +29,7 @@ export const PrismPlayerPreview = ({
   playerId,
   videoId,
   previewUrl,
+  isMobile,
 }: PrismPlayerPreviewProps) => {
   const { t } = useTranslation();
   const [isShorteningUrl, setIsShorteningUrl] = useState<boolean>(false);
@@ -127,7 +135,9 @@ export const PrismPlayerPreview = ({
     if (isShorteningUrl) {
       return t('prism.copying') as string;
     }
-    return t('prism.copyURL') as string;
+    return isMobile
+      ? (t('urlShort') as string)
+      : (t('prism.copyURL') as string);
   };
 
   const handleOpenPreview = useCallback(() => {
@@ -152,8 +162,8 @@ export const PrismPlayerPreview = ({
     <div className={css.prismPlayerPreviewContainer}>
       <div className={css.prismPlayerActions}>
         <PrismButtonDropdown
-          variant='Primary'
-          size='small'
+          variant={isMobile ? 'Secondary' : 'Primary'}
+          {...(isMobile ? { size: 'mobile' as const, fullWidth: true } : {})}
           options={copyUrlOptions}
           modalTitle={t('prism.copyURL') as string}
           showDropdownIcon={!isCopied && !isShorteningUrl}
@@ -163,13 +173,15 @@ export const PrismPlayerPreview = ({
           {copyUrlLabel()}
         </PrismButtonDropdown>
         <PrismButton
-          variant='Primary'
-          size='small'
+          variant={isMobile ? 'Secondary' : 'Primary'}
+          {...(isMobile ? { size: 'mobile' as const, fullWidth: true } : {})}
           onClick={handleOpenPreview}
           rightIcon='link'
           disabled={!previewUrl}
         >
-          {t('previewButton') as string}
+          {isMobile
+            ? (t('previewShort') as string)
+            : (t('previewButton') as string)}
         </PrismButton>
       </div>
 

package/src/js/hooks/useIsMobile.ts

@@ -0,0 +1,33 @@
+import { useEffect, useState } from 'react';
+
+const MOBILE_MEDIA_QUERY = '(max-width: 1023px)';
+
+const getMatches = (): boolean =>
+  typeof window !== 'undefined' && typeof window.matchMedia === 'function'
+    ? window.matchMedia(MOBILE_MEDIA_QUERY).matches
+    : false;
+
+const useIsMobile = (): boolean => {
+  const [isMobile, setIsMobile] = useState<boolean>(getMatches);
+
+  useEffect(() => {
+    if (
+      typeof window === 'undefined' ||
+      typeof window.matchMedia !== 'function'
+    ) {
+      return;
+    }
+
+    const mql = window.matchMedia(MOBILE_MEDIA_QUERY);
+    const handleChange = (event: MediaQueryListEvent) =>
+      setIsMobile(event.matches);
+
+    setIsMobile(mql.matches);
+    mql.addEventListener('change', handleChange);
+    return () => mql.removeEventListener('change', handleChange);
+  }, []);
+
+  return isMobile;
+};
+
+export default useIsMobile;