From d758de3852d1ea181e5e57d7a69d1684b786fbf9 Mon Sep 17 00:00:00 2001
From: Lars <Lars@stommer.de>
Date: Fri, 8 May 2026 09:07:51 +0200
Subject: [PATCH] feat: add MEDIAWIKI_CATEGORY_MODELS to docker-compose and
 refactor MediaLibraryPage

- Introduced MEDIAWIKI_CATEGORY_MODELS environment variable in docker-compose.yml for better configuration.
- Refactored MediaLibraryPage to simplify video rendering by replacing createElement with JSX syntax, enhancing readability and maintainability.
- Removed lazy loading and Suspense for MediaLibraryPage to streamline component rendering.
---
 docker-compose.yml                      |  1 +
 frontend/src/App.jsx                    | 28 ++----------
 frontend/src/pages/MediaLibraryPage.jsx | 58 +++++++++++++------------
 3 files changed, 34 insertions(+), 53 deletions(-)

diff --git a/docker-compose.yml b/docker-compose.yml
index 7a3da2b..f6b2596 100644
--- a/docker-compose.yml
+++ b/docker-compose.yml
@@ -51,6 +51,7 @@ services:
       MEDIAWIKI_CATEGORY_EXERCISES: "${MEDIAWIKI_CATEGORY_EXERCISES:-Übungen}"
       MEDIAWIKI_CATEGORY_SKILLS: "${MEDIAWIKI_CATEGORY_SKILLS:-Fähigkeitsbeschreibung}"
       MEDIAWIKI_CATEGORY_METHODS: "${MEDIAWIKI_CATEGORY_METHODS:-Methodenbeschreibung}"
+      MEDIAWIKI_CATEGORY_MODELS: "${MEDIAWIKI_CATEGORY_MODELS:-Reifegradmodelle}"
       # Medien: Container-Pfad MEDIA_ROOT; Host-Pfad SHINKAN_MEDIA_HOST (in .env überschreiben; Default /shinkan-media).
       MEDIA_ROOT: "${MEDIA_ROOT:-/app/media}"
     volumes:
diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx
index 4016a3c..1c68048 100644
--- a/frontend/src/App.jsx
+++ b/frontend/src/App.jsx
@@ -1,4 +1,4 @@
-import React, { lazy, Suspense } from 'react'
+import React from 'react'
 import {
   BrowserRouter as Router,
   Routes,
@@ -32,11 +32,10 @@ import AdminMaturityModelsPage from './pages/AdminMaturityModelsPage'
 import TrainerContextsPage from './pages/TrainerContextsPage'
 import MediaWikiImportPage from './pages/MediaWikiImportPage'
 import AdminUsersPage from './pages/AdminUsersPage'
+import MediaLibraryPage from './pages/MediaLibraryPage'
 import ActiveClubSwitcher from './components/ActiveClubSwitcher'
 import './app.css'
 
-const MediaLibraryPage = lazy(() => import('./pages/MediaLibraryPage'))
-
 // Bottom Navigation (Mobile)
 function Nav({ isAdmin }) {
   const items = getMainNavItems(isAdmin)
@@ -160,28 +159,7 @@ function AppRoutes() {
         <Route path="profile" element={<Navigate to="/settings" replace />} />
         <Route path="settings" element={<AccountSettingsPage />} />
         <Route path="settings/system" element={<SettingsSystemInfoPage />} />
-        <Route
-          path="media"
-          element={
-            <Suspense
-              fallback={
-                <div
-                  style={{
-                    minHeight: '50vh',
-                    display: 'flex',
-                    alignItems: 'center',
-                    justifyContent: 'center',
-                    background: 'var(--bg)',
-                  }}
-                >
-                  <div className="spinner" />
-                </div>
-              }
-            >
-              <MediaLibraryPage />
-            </Suspense>
-          }
-        />
+        <Route path="media" element={<MediaLibraryPage />} />
         <Route path="exercises">
           <Route index element={<ExercisesListPage />} />
           <Route path="new" element={<ExerciseFormPage />} />
diff --git a/frontend/src/pages/MediaLibraryPage.jsx b/frontend/src/pages/MediaLibraryPage.jsx
index 73898ad..4ad8f22 100644
--- a/frontend/src/pages/MediaLibraryPage.jsx
+++ b/frontend/src/pages/MediaLibraryPage.jsx
@@ -1,4 +1,4 @@
-import { useEffect, useState, useCallback, useRef, createElement } from 'react'
+import { useEffect, useState, useCallback, useRef } from 'react'
 import { Link } from 'react-router-dom'
 import {
   LayoutGrid,
@@ -162,22 +162,24 @@ function MediaThumb({ mediaId, mimeType }) {
     return <div className="media-library__thumb-ph">HEIC</div>
   }
   if (mime.startsWith('video/')) {
-    return createElement('video', {
-      className: 'media-library__thumb-video',
-      src: url,
-      muted: true,
-      playsInline: true,
-      preload: 'metadata',
-      onLoadedMetadata: (e) => {
-        const el = e.target
-        try {
-          const d = el.duration
-          el.currentTime = Number.isFinite(d) && d > 0 ? Math.min(0.05, d * 0.01) : 0.05
-        } catch {
-          /* ignore */
-        }
-      },
-    })
+    return (
+      <video
+        className="media-library__thumb-video"
+        src={url}
+        muted
+        playsInline
+        preload="metadata"
+        onLoadedMetadata={(e) => {
+          const el = e.target
+          try {
+            const d = el.duration
+            el.currentTime = Number.isFinite(d) && d > 0 ? Math.min(0.05, d * 0.01) : 0.05
+          } catch {
+            /* ignore */
+          }
+        }}
+      />
+    )
   }
   if (mime.startsWith('image/')) {
     return (
@@ -905,17 +907,17 @@ export default function MediaLibraryPage() {
                   )
                 }
                 if (kind === 'video') {
-                  return createElement(
-                    'video',
-                    {
-                      key: preview.id,
-                      className: 'media-library__preview-video',
-                      src: url,
-                      controls: true,
-                      playsInline: true,
-                      preload: 'metadata',
-                    },
-                    'Wiedergabe nicht unterstützt.',
+                  return (
+                    <video
+                      key={preview.id}
+                      className="media-library__preview-video"
+                      src={url}
+                      controls
+                      playsInline
+                      preload="metadata"
+                    >
+                      Wiedergabe nicht unterstützt.
+                    </video>
                   )
                 }
                 if (kind === 'pdf') {