Video test integration

2025-05-18 00:47:15 +02:00
parent f35bae79bf
commit d78ece0dfd
5 changed files with 90 additions and 0 deletions
--- a/src/pages/VideosPage.tsx
+++ b/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;