From cd5a11498dc4b0ae24132234aca7ffae635b56cc Mon Sep 17 00:00:00 2001
From: VK-RED <vishnukumart96@gmail.com>
Date: Thu, 18 Apr 2024 19:17:55 +0530
Subject: [PATCH] feat: add Youtube Renderer

---
 package.json                       |  2 +-
 src/components/VideoPlayer2.tsx    | 12 ++++++++++++
 src/components/YoutubeRenderer.tsx | 23 +++++++++++++++++++++++
 3 files changed, 36 insertions(+), 1 deletion(-)
 create mode 100644 src/components/YoutubeRenderer.tsx

diff --git a/package.json b/package.json
index fb7561020..32ea8eb4a 100644
--- a/package.json
+++ b/package.json
@@ -14,7 +14,7 @@
     "lint:fix": "eslint --max-warnings 0 --config .eslintrc . --fix",
     "format:fix": "prettier --write \"**/*.{ts,tsx,json}\"",
     "format:check": "prettier --check \"**/*.{ts,tsx,json}\"",
-    "prisma:docker" : "npm run prisma:migrate && npm run db:seed && npm run studio",
+    "prisma:docker": "npm run prisma:migrate && npm run db:seed && npm run studio",
     "dev:docker": "npm run prisma:docker & next dev",
     "prisma:migrate": "prisma migrate deploy",
     "db:seed": "prisma db seed",
diff --git a/src/components/VideoPlayer2.tsx b/src/components/VideoPlayer2.tsx
index 87342c837..bafee82d6 100644
--- a/src/components/VideoPlayer2.tsx
+++ b/src/components/VideoPlayer2.tsx
@@ -12,6 +12,7 @@ import 'videojs-seek-buttons';
 import { handleMarkAsCompleted } from '@/lib/utils';
 import { useSearchParams } from 'next/navigation';
 import './QualitySelectorControllBar';
+import { YoutubeRenderer } from './YoutubeRenderer';
 
 // todo correct types
 interface VideoPlayerProps {
@@ -38,6 +39,7 @@ export const VideoPlayer: FunctionComponent<VideoPlayerProps> = ({
   const playerRef = useRef<Player | null>(null);
   const [player, setPlayer] = useState<any>(null);
   const searchParams = useSearchParams();
+  const vidUrl = options.sources[0].src;
   useEffect(() => {
     const t = searchParams.get('timestamp');
     if (contentId && player && !t) {
@@ -352,6 +354,16 @@ export const VideoPlayer: FunctionComponent<VideoPlayerProps> = ({
       player.currentTime(parseInt(t, 10));
     }
   }, [searchParams, player]);
+
+  const isYoutubeUrl = (url: string) => {
+    const regex = /^https:\/\/www\.youtube\.com\/embed\/[a-zA-Z0-9_-]+/;
+    return regex.test(url);
+  };
+
+  if (isYoutubeUrl(vidUrl)) {
+    return <YoutubeRenderer url={vidUrl} />;
+  }
+
   return (
     <div
       data-vjs-player
diff --git a/src/components/YoutubeRenderer.tsx b/src/components/YoutubeRenderer.tsx
new file mode 100644
index 000000000..cd0d38532
--- /dev/null
+++ b/src/components/YoutubeRenderer.tsx
@@ -0,0 +1,23 @@
+import { FunctionComponent } from 'react';
+
+interface YoutubeRendererProps {
+  url: string;
+}
+
+export const YoutubeRenderer: FunctionComponent<YoutubeRendererProps> = ({
+  url,
+}) => {
+  return (
+    <div className="mt-2 flex justify-center">
+      <iframe
+        width="100%"
+        className="h-[80vh]"
+        height="500px"
+        src={url}
+        title="YouTube video player"
+        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+        allowFullScreen
+      ></iframe>
+    </div>
+  );
+};