setPreview(null)}
- onKeyDown={(e) => e.key === 'Escape' && setPreview(null)}
- >
-
- )}
)
}
diff --git a/frontend/src/components/MediaPreviewModal.jsx b/frontend/src/components/MediaPreviewModal.jsx
new file mode 100644
index 0000000..2164bf8
--- /dev/null
+++ b/frontend/src/components/MediaPreviewModal.jsx
@@ -0,0 +1,140 @@
+/**
+ * Gemeinsamer Medienvorschau-Dialog.
+ *
+ * Props:
+ * title – Anzeigename des Mediums (Dateiname o.ä.)
+ * media – Medienobjekt (mime_type, embed_url, asset_legal_hold_active, media_type)
+ * fileUrl – Bereits aufgelöste Datei-URL (null für Embed-only-Medien)
+ * onClose – Pflicht
+ * onReport – optional; wenn gesetzt, erscheint "Melden"-Button
+ * onEdit – optional; wenn gesetzt, erscheint "Bearbeiten"-Button
+ */
+import React from 'react'
+
+export default function MediaPreviewModal({ title, media, fileUrl, onClose, onReport, onEdit }) {
+ const mlow = (media?.mime_type || '').toLowerCase()
+ const isHeic = mlow.includes('heic') || mlow.includes('heif')
+ const isImage = !isHeic && (media?.mime_type?.startsWith('image/') || media?.media_type === 'image')
+ const isVideo = media?.mime_type?.startsWith('video/') || media?.media_type === 'video'
+ const isPdf = mlow.includes('pdf')
+ const isLegalHold = !!media?.asset_legal_hold_active
+ const canReport = onReport && !isLegalHold
+
+ function handleBackdrop(e) {
+ if (e.target === e.currentTarget) onClose()
+ }
+
+ function handleKeyDown(e) {
+ if (e.key === 'Escape') onClose()
+ }
+
+ return (
+ e.stopPropagation()}
- >
- 
- ) : (
-
- Vorschau
- {preview.embed_url ? ( - - ) : preview.mime_type?.startsWith('video/') || preview.media_type === 'video' ? ( - - ) : preview.mime_type?.startsWith('image/') || preview.media_type === 'image' ? ( -- - Datei öffnen - -
- )} -
-
-
-
+
+ )
+}
diff --git a/frontend/src/pages/ExerciseFormPage.jsx b/frontend/src/pages/ExerciseFormPage.jsx
index 76026a6..c54de8a 100644
--- a/frontend/src/pages/ExerciseFormPage.jsx
+++ b/frontend/src/pages/ExerciseFormPage.jsx
@@ -5,6 +5,8 @@ import { resolveExerciseMediaFileUrl, resolveMediaAssetFileUrl } from '../utils/
import RichTextEditor from '../components/RichTextEditor'
import ExerciseProgressionGraphPanel from '../components/ExerciseProgressionGraphPanel'
import ExerciseMediaThumbTile from '../components/ExerciseMediaThumbTile'
+import MediaPreviewModal from '../components/MediaPreviewModal'
+import ReportContentModal from '../components/ReportContentModal'
import {
SHINKAN_EXERCISE_MEDIA_DRAG_MIME,
buildExerciseMediaDragPayload,
@@ -391,6 +393,7 @@ function ExerciseFormPage() {
const [archiveItems, setArchiveItems] = useState([])
const [archiveError, setArchiveError] = useState(null)
const [mediaPreview, setMediaPreview] = useState(null)
+ const [reportTarget, setReportTarget] = useState(null)
useEffect(() => {
const next = {}
@@ -1652,66 +1655,28 @@ function ExerciseFormPage() {
)}
{mediaPreview && (
- e.stopPropagation()}
+ >
+ {/* Header */}
+ 
+ ) : isVideo ? (
+
+ ) : isPdf ? (
+
+
+
+
+ {/* Body */}
+ {isLegalHold ? (
+ + {title || 'Vorschau'} +
+
+ {canReport && (
+
+ )}
+ {onEdit && (
+
+ )}
+
+
+ + Dieses Medium ist gesperrt und steht nicht zur Verfügung. +
+ ) : media?.embed_url ? ( + + ) : isHeic ? ( +
+
+ ) : isImage ? (
+ + HEIC/HEIF — in diesem Browser oft keine eingebettete Vorschau. Zum Ansehen herunterladen oder im neuen Tab öffnen. +
+ {fileUrl && ( + + Datei öffnen + + )} +
+
+ ) : fileUrl ? (
+ PDF — zur Ansicht im neuen Tab öffnen.
+ {fileUrl && ( + + PDF öffnen + + )} ++ Datei öffnen +
+ ) : ( +Keine Vorschau verfügbar.
+ )} + setMediaPreview(null)}
- onKeyDown={(e) => e.key === 'Escape' && setMediaPreview(null)}
- >
-
+ e.stopPropagation()}
- >
-
- ) : (
-
- Vorschau
- {mediaPreview.asset_legal_hold_active ? ( -- Dieses Medium ist gesperrt und steht nicht zur Verfügung. -
- ) : mediaPreview.embed_url ? ( -- - {mediaPreview.embed_url} - -
- ) : mediaPreview.mime_type?.startsWith('video/') || mediaPreview.media_type === 'video' ? ( - - ) : mediaPreview.mime_type?.startsWith('image/') || mediaPreview.media_type === 'image' ? ( -- - Datei öffnen - -
- )} -
-
-
- setPreview(null)}
- >
-
+ e.stopPropagation()}
- >
-
-
-
- - {preview.original_filename || `Medium #${preview.id}`} -
-
- {(preview.lifecycle_state || 'active') === 'active' && !preview.legal_hold_active && (
-
- )}
-
-
-
-
- {(() => {
- const url = resolveMediaAssetFileUrl(preview.id)
- const kind = previewDisplayKind(preview.mime_type)
- const mlow = (preview.mime_type || '').toLowerCase()
- if (!url) {
- return 
- )
- }
- if (kind === 'video') {
- return (
-
- )
- }
- if (kind === 'pdf') {
- return (
-
- Keine Datei-URL.
- } - if (mlow.includes('heic') || mlow.includes('heif')) { - return ( -
-
- )
- }
- if (kind === 'image') {
- return (
- - HEIC/HEIF — in diesem Browser oft keine eingebettete Vorschau. Zum Ansehen herunterladen oder im neuen Tab öffnen. -
- - Datei öffnen - -
-
- )
- }
- return (
- PDF — zur Ansicht im neuen Tab öffnen.
- - PDF öffnen - -
-
- )
- })()}
- - Vorschau für diesen Typ nicht verfügbar ({preview.mime_type || 'unbekannt'}). -
- - Datei öffnen - -