Video test integration

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;