refactor: refactor report proff section

src/components/media/ProtectedVideoPlayer.tsx

@@ -24,7 +24,8 @@ export function ProtectedVideoPlayer({
   unavailableTitle = 'Video unavailable',
   className,
 }: ProtectedVideoPlayerProps) {
-  const { objectUrl, isLoading, isError } = useProtectedMediaObjectUrl(url);
+  const { objectUrl, mediaType, isLoading, isError } =
+    useProtectedMediaObjectUrl(url);
 
   if (!url) {
     return (
@@ -73,11 +74,14 @@ export function ProtectedVideoPlayer({
       )}
     >
       <video
-        src={objectUrl}
-        className="aspect-video w-full object-cover"
+        key={objectUrl}
+        className="aspect-video w-full bg-black object-contain"
         controls
         playsInline
-      />
+        preload="metadata"
+      >
+        <source src={objectUrl} type={mediaType ?? 'video/mp4'} />
+      </video>
 
       {label ? (
         <span className="absolute top-3 left-3 rounded bg-black/65 px-2.5 py-1 text-[11px] font-semibold text-white backdrop-blur-sm">
@@ -86,7 +90,7 @@ export function ProtectedVideoPlayer({
       ) : null}
 
       {meta ? (
-        <span className="pointer-events-none absolute top-3 right-3 max-w-[55%] truncate text-xs font-medium">
+        <span className="pointer-events-none absolute top-3 right-3 max-w-[55%] truncate text-xs font-medium text-white/90">
           {meta}
         </span>
       ) : null}