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

@@ -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:

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
+        <Route path="media" element={<MediaLibraryPage />} />
-          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="exercises">
           <Route index element={<ExercisesListPage />} />
           <Route path="new" element={<ExerciseFormPage />} />

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', {
+    return (
-      className: 'media-library__thumb-video',
+      <video
-      src: url,
+        className="media-library__thumb-video"
-      muted: true,
+        src={url}
-      playsInline: true,
+        muted
-      preload: 'metadata',
+        playsInline
-      onLoadedMetadata: (e) => {
+        preload="metadata"
-        const el = e.target
+        onLoadedMetadata={(e) => {
-        try {
+          const el = e.target
-          const d = el.duration
+          try {
-          el.currentTime = Number.isFinite(d) && d > 0 ? Math.min(0.05, d * 0.01) : 0.05
+            const d = el.duration
-        } catch {
+            el.currentTime = Number.isFinite(d) && d > 0 ? Math.min(0.05, d * 0.01) : 0.05
-          /* ignore */
+          } catch {
-        }
+            /* ignore */
-      },
+          }
-    })
+        }}
+      />
+    )
   }
   if (mime.startsWith('image/')) {
     return (
@@ -905,17 +907,17 @@ export default function MediaLibraryPage() {
                   )
                 }
                 if (kind === 'video') {
-                  return createElement(
+                  return (
-                    'video',
+                    <video
-                    {
+                      key={preview.id}
-                      key: preview.id,
+                      className="media-library__preview-video"
-                      className: 'media-library__preview-video',
+                      src={url}
-                      src: url,
+                      controls
-                      controls: true,
+                      playsInline
-                      playsInline: true,
+                      preload="metadata"
-                      preload: 'metadata',
+                    >
-                    },
+                      Wiedergabe nicht unterstützt.
-                    'Wiedergabe nicht unterstützt.',
+                    </video>
                   )
                 }
                 if (kind === 'pdf') {