feat: add DRM support mux app (#10376)

* drm support

* Delete apps/mux/exampledrm.html

* not defaulting drm

* fixing error when DRM ID invalid

* external player for preview

* Fixed DRM not being created when switching between DRM and Public/Signed.
Fixed alert case.

* Refactor. Removed getDRMLicenseToken action and use getSignedURLTokens instead.
Fixed iframe loading conflict with chromecast.

* Updated onPublish action to set the drmPlaybackId

* Added restriction to not let the user use DRM for audio-only

* Fixed case when trying to play DRM video with no signing keys.
Modified playback DRM text for that.

* Changed description message

* Fixed case when no signed or DRM are selected in the app setup.

* Fixed prettier errors

* Fixed prettier errors

---------

Co-authored-by: Renzo Delfino <75499398+R-Delfino95@users.noreply.github.com>
Co-authored-by: david-shibley-contentful <149433784+david-shibley-contentful@users.noreply.github.com>

Author: 3 people

apps/mux/frontend/package-lock.json

@@ -1,5 +1,5 @@
-import { FC, useState, useEffect } from 'react';
-import { Modal, Button, Accordion } from '@contentful/f36-components';
+import { FC, useState, useEffect, useMemo } from 'react';
+import { Modal, Button, Accordion, Note } from '@contentful/f36-components';
 import { VideoQualitySelector } from './VideoQualitySelector';
 import { PlaybackPolicySelector } from './PlaybackPolicySelector';
 import { CaptionsConfiguration, CaptionsConfig } from './CaptionsConfiguration';
@@ -8,6 +8,41 @@ import MetadataConfiguration, { MetadataConfig } from './MetadataConfiguration';
 import { MuxContentfulObject, PolicyType } from '../../util/types';
 import { FieldExtensionSDK } from '@contentful/app-sdk';
 
+// Audio file extensions for detection
+const AUDIO_EXTENSIONS = [
+  '.mp3',
+  '.wav',
+  '.m4a',
+  '.aac',
+  '.ogg',
+  '.flac',
+  '.wma',
+  '.aiff',
+  '.opus',
+];
+
+/**
+ * Detects if the input is an audio-only file based on:
+ * - File MIME type (for uploaded files)
+ * - URL extension (for remote URLs)
+ */
+const isAudioFile = (file: File | null, url: string | null): boolean => {
+  // Check file MIME type
+  if (file) {
+    return file.type.startsWith('audio/');
+  }
+
+  // Check URL extension
+  if (url) {
+    const urlLower = url.toLowerCase();
+    // Remove query params and hash for extension check
+    const cleanUrl = urlLower.split('?')[0].split('#')[0];
+    return AUDIO_EXTENSIONS.some((ext) => cleanUrl.endsWith(ext));
+  }
+
+  return false;
+};
+
 export interface ModalData {
   videoQuality: string;
   playbackPolicies: PolicyType[];
@@ -22,10 +57,15 @@ interface MuxAssetConfigurationModalProps {
   onConfirm: (data: ModalData) => void;
   installationParams: {
     muxEnableSignedUrls: boolean;
+    muxEnableDRM?: boolean;
   };
   isEditMode?: boolean;
   asset?: MuxContentfulObject;
   sdk: FieldExtensionSDK;
+  /** File being uploaded (from drag & drop or file picker) */
+  file?: File | null;
+  /** URL for remote upload */
+  pendingUploadURL?: string | null;
 }
 
 const ModalContent: FC<MuxAssetConfigurationModalProps> = ({
@@ -36,12 +76,29 @@ const ModalContent: FC<MuxAssetConfigurationModalProps> = ({
   isEditMode = false,
   asset,
   sdk,
+  file = null,
+  pendingUploadURL = null,
 }) => {
-  const { muxEnableSignedUrls } = installationParams;
+  // Use explicit defaults to handle undefined values from SDK
+  const muxEnableSignedUrls = installationParams.muxEnableSignedUrls ?? false;
+  const muxEnableDRM = installationParams.muxEnableDRM ?? false;
+
+  // Detect if the input is an audio-only file
+  const isAudioOnly = useMemo(() => isAudioFile(file, pendingUploadURL), [file, pendingUploadURL]);
+
+  // DRM is disabled for audio files
+  const effectiveDRMEnabled = muxEnableDRM && !isAudioOnly;
+
+  // Determine default policy: if DRM was enabled but this is audio, fall back to signed (if available) or public
+  const getDefaultPolicy = (): PolicyType => {
+    if (effectiveDRMEnabled) return 'drm';
+    if (muxEnableSignedUrls) return 'signed';
+    return 'public';
+  };
 
   const [modalData, setModalData] = useState<ModalData>({
     videoQuality: 'plus',
-    playbackPolicies: muxEnableSignedUrls ? ['signed'] : ['public'],
+    playbackPolicies: [getDefaultPolicy()],
     captionsConfig: {
       captionsType: 'off',
       languageCode: null,
@@ -61,11 +118,30 @@ const ModalContent: FC<MuxAssetConfigurationModalProps> = ({
     },
   });
 
+  // Update policy when audio detection changes (e.g., when modal opens with new file)
+  useEffect(() => {
+    setModalData((prev) => {
+      if (isAudioOnly && prev.playbackPolicies.includes('drm')) {
+        // If current policy is DRM but this is audio, switch to signed or public
+        const fallbackPolicy: PolicyType = muxEnableSignedUrls ? 'signed' : 'public';
+        return { ...prev, playbackPolicies: [fallbackPolicy] };
+      }
+      return prev;
+    });
+  }, [isAudioOnly, muxEnableSignedUrls]);
+
   useEffect(() => {
     if (isEditMode && asset) {
+      // Determine the current playback policy
+      const currentPolicy: PolicyType = asset.drmPlaybackId
+        ? 'drm'
+        : asset.signedPlaybackId
+        ? 'signed'
+        : 'public';
+
       setModalData({
         videoQuality: 'plus',
-        playbackPolicies: asset.signedPlaybackId ? ['signed'] : ['public'],
+        playbackPolicies: [currentPolicy],
         captionsConfig: {
           captionsType: 'off',
           languageCode: null,
@@ -130,15 +206,23 @@ const ModalContent: FC<MuxAssetConfigurationModalProps> = ({
 
           {!isEditMode && (
             <Accordion.Item title="Privacy Settings">
+              {isAudioOnly && (
+                <Note variant="warning" style={{ marginBottom: '1rem' }}>
+                  Audio files do not support DRM protection. Please use the Protected option for
+                  secure playback.
+                </Note>
+              )}
               <PlaybackPolicySelector
                 selectedPolicies={modalData.playbackPolicies}
                 onPoliciesChange={(policies) =>
                   setModalData((prev) => ({ ...prev, playbackPolicies: policies }))
                 }
                 enableSignedUrls={muxEnableSignedUrls}
+                enableDRM={effectiveDRMEnabled}
                 onValidationChange={(isValid) =>
                   handleValidationChange('playbackPolicies', isValid)
                 }
+                isAudioOnly={isAudioOnly}
               />
             </Accordion.Item>
           )}

apps/mux/frontend/src/components/AssetConfiguration/MuxAssetConfigurationModal.tsx

@@ -8,12 +8,17 @@ interface PlaybackSwitcherProps {
   value: MuxContentfulObject;
   onSwapPlaybackIDs: (policy: PolicyType) => void;
   enableSignedUrls: boolean;
+  enableDRM?: boolean;
 }
 
 function isUsingSigned(value: MuxContentfulObject): boolean {
   return !!(value && value.signedPlaybackId && !value.playbackId);
 }
 
+function isUsingDRM(value: MuxContentfulObject): boolean {
+  return !!(value && value.drmPlaybackId);
+}
+
 function getCurrentPolicy(value: MuxContentfulObject): PolicyType {
   if (value?.pendingActions?.create) {
     const playbackCreateAction = value.pendingActions.create.find(
@@ -23,15 +28,21 @@ function getCurrentPolicy(value: MuxContentfulObject): PolicyType {
       return playbackCreateAction.data?.policy as PolicyType;
     }
   }
-  return isUsingSigned(value) ? 'signed' : 'public';
+  // Priority: public > signed > drm
+  if (value?.playbackId) return 'public';
+  if (isUsingSigned(value)) return 'signed';
+  if (isUsingDRM(value)) return 'drm';
+  return 'public';
 }
 
 export const PlaybackSwitcher: React.FC<PlaybackSwitcherProps> = ({
   value,
   onSwapPlaybackIDs,
   enableSignedUrls,
+  enableDRM = false,
 }) => {
   const selectedPolicy = getCurrentPolicy(value);
+  const isAudioOnly = value?.audioOnly ?? false;
 
   return (
     <Flex>
@@ -44,6 +55,8 @@ export const PlaybackSwitcher: React.FC<PlaybackSwitcherProps> = ({
           }
         }}
         enableSignedUrls={enableSignedUrls}
+        enableDRM={enableDRM}
+        isAudioOnly={isAudioOnly}
       />
     </Flex>
   );

apps/mux/frontend/src/components/AssetConfiguration/Playback/PlaybackSwitcher.tsx

@@ -6,8 +6,11 @@ import { PolicyType } from '../../util/types';
 interface PlaybackPolicySelectorProps {
   selectedPolicies: PolicyType[];
   onPoliciesChange: (policies: PolicyType[]) => void;
-  enableSignedUrls: boolean;
+  enableSignedUrls?: boolean;
+  enableDRM?: boolean;
   onValidationChange?: (isValid: boolean) => void;
+  /** When true, DRM option is disabled because audio files don't support DRM */
+  isAudioOnly?: boolean;
 }
 
 const playbackPolicyLink =
@@ -16,8 +19,10 @@ const playbackPolicyLink =
 export const PlaybackPolicySelector: FC<PlaybackPolicySelectorProps> = ({
   selectedPolicies,
   onPoliciesChange,
-  enableSignedUrls,
+  enableSignedUrls = false,
+  enableDRM = false,
   onValidationChange,
+  isAudioOnly = false,
 }) => {
   const handlePolicyChange = (event: React.ChangeEvent<HTMLInputElement>) => {
     const value = event.target.value as PolicyType;
@@ -65,6 +70,23 @@ export const PlaybackPolicySelector: FC<PlaybackPolicySelectorProps> = ({
             />
           </FormControl.HelpText>
         </FormControl>
+
+        <FormControl marginBottom="none">
+          <Radio value="drm" isDisabled={!enableDRM || isAudioOnly}>
+            DRM Protected
+          </Radio>
+          <FormControl.HelpText>
+            Highest level of content protection using industry-standard encryption. Requires DRM to
+            be enabled in app configuration.
+            <TextLink
+              icon={<ExternalLinkIcon />}
+              variant="secondary"
+              href="https://www.mux.com/blog/protect-your-video-content-with-drm-now-ga"
+              target="_blank"
+              rel="noopener noreferrer"
+            />
+          </FormControl.HelpText>
+        </FormControl>
       </Radio.Group>
       {selectedPolicies.length === 0 && (
         <FormControl.ValidationMessage>

apps/mux/frontend/src/components/AssetConfiguration/PlaybackPolicySelector.tsx

@@ -27,6 +27,7 @@ const PlayerCode: React.FC<PlayerCodeProps> = ({ params }) => {
   const playbackToken = getParam('playback-token');
   const thumbnailToken = getParam('thumbnail-token');
   const storyboardToken = getParam('storyboard-token');
+  const drmToken = getParam('drm-token');
   const audio = getParam('audio');
   const customDomain = getParam('custom-domain');
   const streamType = getParam('stream-type');
@@ -38,6 +39,7 @@ const PlayerCode: React.FC<PlayerCodeProps> = ({ params }) => {
     playbackToken ? `playback-token="${playbackToken}"` : '',
     thumbnailToken ? `thumbnail-token="${thumbnailToken}"` : '',
     storyboardToken ? `storyboard-token="${storyboardToken}"` : '',
+    drmToken ? `drm-token="${drmToken}"` : '',
     audio ? `audio="${audio}"` : '',
     customDomain ? `custom-domain="${customDomain}"` : '',
     autoplay ? 'autoplay' : '',
@@ -48,6 +50,8 @@ const PlayerCode: React.FC<PlayerCodeProps> = ({ params }) => {
     .filter(Boolean)
     .join(' ');
 
+  const muxPlayerCode = `<script src="https://unpkg.com/@mux/mux-player"></script>\n\n<mux-player ${muxPlayerAttrs} style="width:100%" />`;
+
   let iframeSrcBase =
     customDomain && customDomain !== 'mux.com'
       ? `https://${customDomain}/${playbackId}`
@@ -80,7 +84,6 @@ const PlayerCode: React.FC<PlayerCodeProps> = ({ params }) => {
     .filter(Boolean)
     .join(' ');
 
-  const muxPlayerCode = `<script src="https://unpkg.com/@mux/mux-player"></script>\n\n<mux-player ${muxPlayerAttrs} style="width:100%" />`;
   const iframeCode = `<iframe ${iframeAttrs} style="aspect-ratio: 16/9; width: 100%; border: 0;"></iframe>`;
 
   const codeSnippet = codeType === 'mux-player' ? muxPlayerCode : iframeCode;