feat: Add playback ID to details (#352)

Author: ottob

src/components/VideoDetails/VideoDetails.tsx

@@ -280,6 +280,13 @@ const VideoDetails: React.FC<VideoDetailsProps> = (props) => {
                     size={2}
                   />
                   <IconInfo text={`Mux ID: \n${displayInfo.id}`} icon={TagIcon} size={2} />
+                  {displayInfo?.playbackId && (
+                    <IconInfo
+                      text={`Playback ID: ${displayInfo.playbackId}`}
+                      icon={TagIcon}
+                      size={2}
+                    />
+                  )}
                 </Stack>
               </Stack>
             </TabPanel>

src/util/getVideoMetadata.ts

@@ -10,6 +10,7 @@ export default function getVideoMetadata(doc: VideoAssetDocument) {
   return {
     title: doc.filename || id.slice(0, 12),
     id: id,
+    playbackId: doc.playbackId,
     createdAt: date,
     duration: doc.data?.duration ? formatSeconds(doc.data?.duration) : undefined,
     aspect_ratio: doc.data?.aspect_ratio,