Video test integration

package-lock.json

@@ -37,6 +37,7 @@
         "@radix-ui/react-toggle-group": "^1.1.0",
         "@radix-ui/react-tooltip": "^1.1.4",
         "@react-pdf/renderer": "^4.3.0",
+        "@tailwindcss/aspect-ratio": "^0.4.2",
         "@tanstack/react-query": "^5.56.2",
         "aos": "^2.3.4",
         "axios": "^1.9.0",
@@ -3153,6 +3154,15 @@
         "@swc/counter": "^0.1.3"
       }
     },
+    "node_modules/@tailwindcss/aspect-ratio": {
+      "version": "0.4.2",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/aspect-ratio/-/aspect-ratio-0.4.2.tgz",
+      "integrity": "sha512-8QPrypskfBa7QIMuKHg2TA7BqES6vhBrDLOv8Unb6FcFyd3TjKbc6lcmb9UPQHxfl24sXoJ41ux/H7qQQvfaSQ==",
+      "license": "MIT",
+      "peerDependencies": {
+        "tailwindcss": ">=2.0.0 || >=3.0.0 || >=3.0.0-alpha.1"
+      }
+    },
     "node_modules/@tailwindcss/line-clamp": {
       "version": "0.4.4",
       "resolved": "https://registry.npmjs.org/@tailwindcss/line-clamp/-/line-clamp-0.4.4.tgz",

package.json

@@ -40,6 +40,7 @@
     "@radix-ui/react-toggle-group": "^1.1.0",
     "@radix-ui/react-tooltip": "^1.1.4",
     "@react-pdf/renderer": "^4.3.0",
+    "@tailwindcss/aspect-ratio": "^0.4.2",
     "@tanstack/react-query": "^5.56.2",
     "aos": "^2.3.4",
     "axios": "^1.9.0",

src/main.tsx

@@ -34,6 +34,7 @@ import Satzung from "./pages/Satzung";
 import Beitraege from "./pages/Beitraege";
 
 import { ThemeProvider } from "@/context/ThemeContext";
+import VideosPage from "./pages/VideosPage";
 
 
 
@@ -75,6 +76,9 @@ ReactDOM.createRoot(document.getElementById("root")!).render(
           <Route path="/satzung" element={<Layout><Satzung /></Layout>} />
           <Route path="/impressum" element={<Layout><Impressum /></Layout>} />
           <Route path="/beitraege" element={<Layout><Beitraege /></Layout>} />
+          <Route path="/videos" element={<Layout><VideosPage/></Layout>} />
+
+
           <Route path="/admin" element={<PrivateRoute><Layout><AdminDashboard /></Layout></PrivateRoute>} />
           <Route path="/admin/news" element={<PrivateRoute><Layout><NewsManager /></Layout></PrivateRoute>} />
           <Route path="/admin/users" element={<PrivateRoute><Layout><UserManagementPage /></Layout></PrivateRoute>} />
@@ -89,6 +93,7 @@ ReactDOM.createRoot(document.getElementById("root")!).render(
           <Route path="/admin/gallery" element={<PrivateRoute><Layout><GalleryManager /></Layout></PrivateRoute>} />
           <Route path="/admin/events" element={<PrivateRoute><Layout><EventsAdmin /></Layout></PrivateRoute>} />
           
+          
           </Routes>
         </AuthProvider>
       </BrowserRouter>

src/pages/VideosPage.tsx

@@ -0,0 +1,73 @@
+import { useRef } from "react";
+import { Rewind, FastForward, Pause, Play } from "lucide-react";
+
+const VideosPage = () => {
+  const videoRef = useRef<HTMLVideoElement>(null);
+
+  const skip = (seconds: number) => {
+    if (videoRef.current) {
+      videoRef.current.currentTime += seconds;
+    }
+  };
+
+  const togglePlayPause = () => {
+    const video = videoRef.current;
+    if (!video) return;
+    if (video.paused) {
+      video.play();
+    } else {
+      video.pause();
+    }
+  };
+
+  return (
+    <div className="max-w-4xl mx-auto px-4 py-12">
+      <h1 className="text-3xl font-bold text-center text-frog-600 mb-8">
+        Trainingsvideo: Satz 1
+      </h1>
+
+      <div className="relative">
+        <video
+          ref={videoRef}
+          controls
+          controlsList="nodownload"
+          preload="none"
+          width="100%"
+          poster="https://volleycloud.marc-wieland.de/index.php/s/7F6Sz5DQyct32Xt/preview"
+          onContextMenu={(e) => e.preventDefault()}
+          className="rounded-md shadow-md outline-none"
+        >
+          <source
+            src="https://volleycloud.marc-wieland.de/index.php/s/7F6Sz5DQyct32Xt/download"
+            type="video/mp4"
+          />
+          Dein Browser unterstützt kein eingebettetes Video.
+        </video>
+
+        {/* Custom Steuerung */}
+        <div className="mt-4 flex justify-center gap-4">
+          <button
+            onClick={() => skip(-5)}
+            className="bg-gray-100 dark:bg-gray-800 p-3 rounded-full hover:scale-105 transition shadow"
+          >
+            <Rewind className="h-5 w-5" />
+          </button>
+          <button
+            onClick={togglePlayPause}
+            className="bg-gray-100 dark:bg-gray-800 p-3 rounded-full hover:scale-105 transition shadow"
+          >
+            <Play className="h-5 w-5" />
+          </button>
+          <button
+            onClick={() => skip(5)}
+            className="bg-gray-100 dark:bg-gray-800 p-3 rounded-full hover:scale-105 transition shadow"
+          >
+            <FastForward className="h-5 w-5" />
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default VideosPage;

tailwind.config.ts

@@ -114,5 +114,6 @@ export default {
   plugins: [
     require("tailwindcss-animate"),
     require("@tailwindcss/typography"),
+    require('@tailwindcss/aspect-ratio')
   ],
 } satisfies Config;