Add limits for content + fix video playback

frontend/src/pages/PlayPage.tsx

@@ -9,6 +9,12 @@ import { Loader2, Upload, X, Gamepad2, ArrowLeftRight, Check, XCircle, Clock, Se
 import { useToast } from '@/store/toast'
 import { useConfirm } from '@/store/confirm'
 
+// File size limits
+const MAX_IMAGE_SIZE = 15 * 1024 * 1024 // 15 MB
+const MAX_VIDEO_SIZE = 30 * 1024 * 1024 // 30 MB
+const IMAGE_EXTENSIONS = ['jpg', 'jpeg', 'png', 'gif', 'webp']
+const VIDEO_EXTENSIONS = ['mp4', 'webm', 'mov']
+
 export function PlayPage() {
   const { id } = useParams<{ id: string }>()
   const toast = useToast()
@@ -142,6 +148,38 @@ export function PlayPage() {
     }
   }
 
+  const validateAndSetFile = (
+    file: File | null,
+    setFile: (file: File | null) => void,
+    inputRef: React.RefObject<HTMLInputElement>
+  ) => {
+    if (!file) {
+      setFile(null)
+      return
+    }
+
+    const ext = file.name.split('.').pop()?.toLowerCase() || ''
+    const isImage = IMAGE_EXTENSIONS.includes(ext)
+    const isVideo = VIDEO_EXTENSIONS.includes(ext)
+
+    if (!isImage && !isVideo) {
+      toast.error('Неподдерживаемый формат файла')
+      if (inputRef.current) inputRef.current.value = ''
+      return
+    }
+
+    const maxSize = isImage ? MAX_IMAGE_SIZE : MAX_VIDEO_SIZE
+    const maxSizeMB = isImage ? 15 : 30
+
+    if (file.size > maxSize) {
+      toast.error(`Файл слишком большой. Максимум ${maxSizeMB} МБ для ${isImage ? 'изображений' : 'видео'}`)
+      if (inputRef.current) inputRef.current.value = ''
+      return
+    }
+
+    setFile(file)
+  }
+
   const loadData = async () => {
     if (!id) return
     try {
@@ -651,7 +689,7 @@ export function PlayPage() {
                       type="file"
                       accept="image/*,video/*"
                       className="hidden"
-                      onChange={(e) => setEventProofFile(e.target.files?.[0] || null)}
+                      onChange={(e) => validateAndSetFile(e.target.files?.[0] || null, setEventProofFile, eventFileInputRef)}
                     />
 
                     {eventProofFile ? (
@@ -666,14 +704,19 @@ export function PlayPage() {
                         </Button>
                       </div>
                     ) : (
-                      <Button
-                        variant="secondary"
-                        className="w-full"
-                        onClick={() => eventFileInputRef.current?.click()}
-                      >
-                        <Upload className="w-4 h-4 mr-2" />
-                        Выбрать файл
-                      </Button>
+                      <div>
+                        <Button
+                          variant="secondary"
+                          className="w-full"
+                          onClick={() => eventFileInputRef.current?.click()}
+                        >
+                          <Upload className="w-4 h-4 mr-2" />
+                          Выбрать файл
+                        </Button>
+                        <p className="text-xs text-gray-500 mt-1 text-center">
+                          Макс. 15 МБ для изображений, 30 МБ для видео
+                        </p>
+                      </div>
                     )}
                   </div>
 
@@ -983,7 +1026,7 @@ export function PlayPage() {
                   type="file"
                   accept="image/*,video/*"
                   className="hidden"
-                  onChange={(e) => setProofFile(e.target.files?.[0] || null)}
+                  onChange={(e) => validateAndSetFile(e.target.files?.[0] || null, setProofFile, fileInputRef)}
                 />
 
                 {proofFile ? (
@@ -998,14 +1041,19 @@ export function PlayPage() {
                     </Button>
                   </div>
                 ) : (
-                  <Button
-                    variant="secondary"
-                    className="w-full"
-                    onClick={() => fileInputRef.current?.click()}
-                  >
-                    <Upload className="w-4 h-4 mr-2" />
-                    Выбрать файл
-                  </Button>
+                  <div>
+                    <Button
+                      variant="secondary"
+                      className="w-full"
+                      onClick={() => fileInputRef.current?.click()}
+                    >
+                      <Upload className="w-4 h-4 mr-2" />
+                      Выбрать файл
+                    </Button>
+                    <p className="text-xs text-gray-500 mt-1 text-center">
+                      Макс. 15 МБ для изображений, 30 МБ для видео
+                    </p>
+                  </div>
                 )}
               </div>