From 635264e7852846e7e093af71915bcc8e25db6b60 Mon Sep 17 00:00:00 2001
From: Winston Hsiao <hsiaowinston@gmail.com>
Date: Tue, 17 Sep 2024 20:45:03 -0400
Subject: [PATCH] Simple video player

---
 frontend/src/components/VideoDemo.tsx      | 53 ++++++++++++++++++++++
 frontend/src/components/home/KLangDemo.tsx | 17 +++----
 2 files changed, 60 insertions(+), 10 deletions(-)
 create mode 100644 frontend/src/components/VideoDemo.tsx

diff --git a/frontend/src/components/VideoDemo.tsx b/frontend/src/components/VideoDemo.tsx
new file mode 100644
index 00000000..22b9bfe6
--- /dev/null
+++ b/frontend/src/components/VideoDemo.tsx
@@ -0,0 +1,53 @@
+import React from "react";
+
+interface VideoDemoProps {
+  src: string;
+  type: "youtube" | "local";
+  title?: string;
+  autoplay?: boolean;
+}
+
+export const VideoDemo: React.FC<VideoDemoProps> = ({
+  src,
+  type,
+  title,
+  autoplay = false,
+}) => {
+  if (type === "youtube") {
+    const youtubeParams = new URLSearchParams({
+      autoplay: autoplay ? "1" : "0",
+      controls: "0",
+      showinfo: "0",
+      rel: "0",
+      loop: "1",
+      playlist: src.split("/").pop() || "",
+    }).toString();
+
+    const embedUrl = `${src}?${youtubeParams}`;
+
+    return (
+      <iframe
+        className="w-full h-full"
+        src={embedUrl}
+        title={title || "YouTube video player"}
+        frameBorder="0"
+        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+        referrerPolicy="strict-origin-when-cross-origin"
+        allowFullScreen
+      ></iframe>
+    );
+  } else {
+    return (
+      <video
+        className="w-full h-full object-cover"
+        autoPlay={autoplay}
+        loop
+        muted
+        playsInline
+      >
+        <source src={src} type="video/mp4" />
+        Your browser does not support the video tag.
+      </video>
+    );
+  }
+};
diff --git a/frontend/src/components/home/KLangDemo.tsx b/frontend/src/components/home/KLangDemo.tsx
index 4fcfab4e..bc565957 100644
--- a/frontend/src/components/home/KLangDemo.tsx
+++ b/frontend/src/components/home/KLangDemo.tsx
@@ -1,5 +1,6 @@
 import { useState } from "react";
 
+import { VideoDemo } from "@/components/VideoDemo";
 import { Button } from "@/components/ui/button";
 
 export default function KLangDemo() {
@@ -35,16 +36,12 @@ speakPhrase("Hello, I am a robot.");`,
       <div className="space-y-4">
         <div className="flex flex-col items-center space-y-4 text-center">
           <div className="w-full max-w-4xl aspect-video overflow-hidden rounded-xl border bg-gray-11">
-            <video
-              className="w-full h-full object-cover"
-              autoPlay
-              loop
-              muted
-              playsInline
-            >
-              <source src="/placeholder.mp4" type="video/mp4" />
-              Your browser does not support the video tag.
-            </video>
+            <VideoDemo
+              src="https://www.youtube.com/embed/Y-mD7Cp9KSs"
+              type="youtube"
+              title="Minimal PPO Implementation"
+              autoplay={true}
+            />
           </div>
         </div>
       </div>