Add limits for content + fix video playback

frontend/src/pages/AssignmentDetailPage.tsx

@@ -20,7 +20,8 @@ export function AssignmentDetailPage() {
   const [assignment, setAssignment] = useState<AssignmentDetail | null>(null)
   const [isLoading, setIsLoading] = useState(true)
   const [error, setError] = useState<string | null>(null)
-  const [proofImageBlobUrl, setProofImageBlobUrl] = useState<string | null>(null)
+  const [proofMediaBlobUrl, setProofMediaBlobUrl] = useState<string | null>(null)
+  const [proofMediaType, setProofMediaType] = useState<'image' | 'video' | null>(null)
 
   // Dispute creation
   const [showDisputeForm, setShowDisputeForm] = useState(false)
@@ -38,8 +39,8 @@ export function AssignmentDetailPage() {
     loadAssignment()
     return () => {
       // Cleanup blob URL on unmount
-      if (proofImageBlobUrl) {
-        URL.revokeObjectURL(proofImageBlobUrl)
+      if (proofMediaBlobUrl) {
+        URL.revokeObjectURL(proofMediaBlobUrl)
       }
     }
   }, [id])
@@ -52,13 +53,14 @@ export function AssignmentDetailPage() {
       const data = await assignmentsApi.getDetail(parseInt(id))
       setAssignment(data)
 
-      // Load proof image if exists
+      // Load proof media if exists
       if (data.proof_image_url) {
         try {
-          const blobUrl = await assignmentsApi.getProofImageUrl(parseInt(id))
-          setProofImageBlobUrl(blobUrl)
+          const { url, type } = await assignmentsApi.getProofMediaUrl(parseInt(id))
+          setProofMediaBlobUrl(url)
+          setProofMediaType(type)
         } catch {
-          // Ignore error, image just won't show
+          // Ignore error, media just won't show
         }
       }
     } catch (err: unknown) {
@@ -251,15 +253,24 @@ export function AssignmentDetailPage() {
             Доказательство
           </h3>
 
-          {/* Proof image */}
+          {/* Proof media (image or video) */}
           {assignment.proof_image_url && (
             <div className="mb-4">
-              {proofImageBlobUrl ? (
-                <img
-                  src={proofImageBlobUrl}
-                  alt="Proof"
-                  className="w-full rounded-lg max-h-96 object-contain bg-gray-900"
-                />
+              {proofMediaBlobUrl ? (
+                proofMediaType === 'video' ? (
+                  <video
+                    src={proofMediaBlobUrl}
+                    controls
+                    className="w-full rounded-lg max-h-96 bg-gray-900"
+                    preload="metadata"
+                  />
+                ) : (
+                  <img
+                    src={proofMediaBlobUrl}
+                    alt="Proof"
+                    className="w-full rounded-lg max-h-96 object-contain bg-gray-900"
+                  />
+                )
               ) : (
                 <div className="w-full h-48 bg-gray-900 rounded-lg flex items-center justify-center">
                   <Loader2 className="w-8 h-8 animate-spin text-gray-500" />