feat: add DRM support mux app

apps/mux/contentful-app-manifest.json

@@ -17,6 +17,15 @@
       "entryFile": "functions/src/getSignedUrlTokens.ts",
       "allowNetworks": ["api.contentful.com", "https://api.mux.com"],
       "accepts": ["appaction.call"]
+    },
+    {
+      "id": "getDRMLicenseTokens",
+      "name": "Get DRM license tokens",
+      "description": "This action returns DRM license tokens for securing Mux video playback with DRM protection.",
+      "path": "functions/src/getDRMLicenseTokens.js",
+      "entryFile": "functions/src/getDRMLicenseTokens.ts",
+      "allowNetworks": ["api.contentful.com", "https://api.mux.com"],
+      "accepts": ["appaction.call"]
     }
   ]
 }

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

@@ -22,6 +22,7 @@ interface MuxAssetConfigurationModalProps {
   onConfirm: (data: ModalData) => void;
   installationParams: {
     muxEnableSignedUrls: boolean;
+    muxEnableDRM?: boolean;
   };
   isEditMode?: boolean;
   asset?: MuxContentfulObject;
@@ -37,7 +38,7 @@ const ModalContent: FC<MuxAssetConfigurationModalProps> = ({
   asset,
   sdk,
 }) => {
-  const { muxEnableSignedUrls } = installationParams;
+  const { muxEnableSignedUrls, muxEnableDRM } = installationParams;
 
   const [modalData, setModalData] = useState<ModalData>({
     videoQuality: 'plus',
@@ -65,7 +66,11 @@ const ModalContent: FC<MuxAssetConfigurationModalProps> = ({
     if (isEditMode && asset) {
       setModalData({
         videoQuality: 'plus',
-        playbackPolicies: asset.signedPlaybackId ? ['signed'] : ['public'],
+        playbackPolicies: asset.drmPlaybackId
+          ? ['drm']
+          : asset.signedPlaybackId
+            ? ['signed']
+            : ['public'],
         captionsConfig: {
           captionsType: 'off',
           languageCode: null,
@@ -136,6 +141,7 @@ const ModalContent: FC<MuxAssetConfigurationModalProps> = ({
                   setModalData((prev) => ({ ...prev, playbackPolicies: policies }))
                 }
                 enableSignedUrls={muxEnableSignedUrls}
+                enableDRM={muxEnableDRM}
                 onValidationChange={(isValid) =>
                   handleValidationChange('playbackPolicies', isValid)
                 }

apps/mux/frontend/src/components/AssetConfiguration/Playback/PlaybackSwitcher.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,13 +28,18 @@ 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);
 
@@ -44,6 +54,7 @@ export const PlaybackSwitcher: React.FC<PlaybackSwitcherProps> = ({
           }
         }}
         enableSignedUrls={enableSignedUrls}
+        enableDRM={enableDRM}
       />
     </Flex>
   );

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

@@ -7,6 +7,7 @@ interface PlaybackPolicySelectorProps {
   selectedPolicies: PolicyType[];
   onPoliciesChange: (policies: PolicyType[]) => void;
   enableSignedUrls: boolean;
+  enableDRM?: boolean;
   onValidationChange?: (isValid: boolean) => void;
 }
 
@@ -17,6 +18,7 @@ export const PlaybackPolicySelector: FC<PlaybackPolicySelectorProps> = ({
   selectedPolicies,
   onPoliciesChange,
   enableSignedUrls,
+  enableDRM = false,
   onValidationChange,
 }) => {
   const handlePolicyChange = (event: React.ChangeEvent<HTMLInputElement>) => {
@@ -65,6 +67,22 @@ export const PlaybackPolicySelector: FC<PlaybackPolicySelectorProps> = ({
             />
           </FormControl.HelpText>
         </FormControl>
+
+        <FormControl marginBottom="none">
+          <Radio value="drm" isDisabled={!enableDRM}>
+            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/PlayerCode.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;