From 8a4b86e9fa060b99e974766c0e6dbc67f99d5496 Mon Sep 17 00:00:00 2001
From: Vijay <74645268+vijaysingh2219@users.noreply.github.com>
Date: Wed, 17 Apr 2024 00:05:43 +0530
Subject: [PATCH] Integrated Youtube Renderer with video player

---
 prisma/seed.ts                                |  72 ++++---
 src/components/YoutubeRenderer.tsx            |  18 +-
 .../admin/ContentRendererClient.tsx           | 197 ++++++++++--------
 3 files changed, 172 insertions(+), 115 deletions(-)

diff --git a/prisma/seed.ts b/prisma/seed.ts
index fe3ba0b86..9be7ad0f8 100644
--- a/prisma/seed.ts
+++ b/prisma/seed.ts
@@ -147,30 +147,54 @@ async function main() {
     data: {
       id: 1,
       contentId: 3,
-      video_1080p_mp4_1: 'https://www.w3schools.com/html/mov_bbb.mp4',
-      video_1080p_mp4_2: 'https://www.w3schools.com/html/mov_bbb.mp4',
-      video_1080p_mp4_3: 'https://www.w3schools.com/html/mov_bbb.mp4',
-      video_1080p_mp4_4: 'https://www.w3schools.com/html/mov_bbb.mp4',
-      video_1080p_1: 'https://www.w3schools.com/html/mov_bbb.mp4',
-      video_1080p_2: 'https://www.w3schools.com/html/mov_bbb.mp4',
-      video_1080p_3: 'https://www.w3schools.com/html/mov_bbb.mp4',
-      video_1080p_4: 'https://www.w3schools.com/html/mov_bbb.mp4',
-      video_720p_mp4_1: 'https://www.w3schools.com/html/mov_bbb.mp4',
-      video_720p_mp4_2: 'https://www.w3schools.com/html/mov_bbb.mp4',
-      video_720p_mp4_3: 'https://www.w3schools.com/html/mov_bbb.mp4',
-      video_720p_mp4_4: 'https://www.w3schools.com/html/mov_bbb.mp4',
-      video_720p_1: 'https://www.w3schools.com/html/mov_bbb.mp4',
-      video_720p_2: 'https://www.w3schools.com/html/mov_bbb.mp4',
-      video_720p_3: 'https://www.w3schools.com/html/mov_bbb.mp4',
-      video_720p_4: 'https://www.w3schools.com/html/mov_bbb.mp4',
-      video_360p_mp4_1: 'https://www.w3schools.com/html/mov_bbb.mp4',
-      video_360p_mp4_2: 'https://www.w3schools.com/html/mov_bbb.mp4',
-      video_360p_mp4_3: 'https://www.w3schools.com/html/mov_bbb.mp4',
-      video_360p_mp4_4: 'https://www.w3schools.com/html/mov_bbb.mp4',
-      video_360p_1: 'https://www.w3schools.com/html/mov_bbb.mp4',
-      video_360p_2: 'https://www.w3schools.com/html/mov_bbb.mp4',
-      video_360p_3: 'https://www.w3schools.com/html/mov_bbb.mp4',
-      video_360p_4: 'https://www.w3schools.com/html/mov_bbb.mp4',
+      // video_1080p_mp4_1: 'https://www.w3schools.com/html/mov_bbb.mp4',
+      // video_1080p_mp4_2: 'https://www.w3schools.com/html/mov_bbb.mp4',
+      // video_1080p_mp4_3: 'https://www.w3schools.com/html/mov_bbb.mp4',
+      // video_1080p_mp4_4: 'https://www.w3schools.com/html/mov_bbb.mp4',
+      // video_1080p_1: 'https://www.w3schools.com/html/mov_bbb.mp4',
+      // video_1080p_2: 'https://www.w3schools.com/html/mov_bbb.mp4',
+      // video_1080p_3: 'https://www.w3schools.com/html/mov_bbb.mp4',
+      // video_1080p_4: 'https://www.w3schools.com/html/mov_bbb.mp4',
+      // video_720p_mp4_1: 'https://www.w3schools.com/html/mov_bbb.mp4',
+      // video_720p_mp4_2: 'https://www.w3schools.com/html/mov_bbb.mp4',
+      // video_720p_mp4_3: 'https://www.w3schools.com/html/mov_bbb.mp4',
+      // video_720p_mp4_4: 'https://www.w3schools.com/html/mov_bbb.mp4',
+      // video_720p_1: 'https://www.w3schools.com/html/mov_bbb.mp4',
+      // video_720p_2: 'https://www.w3schools.com/html/mov_bbb.mp4',
+      // video_720p_3: 'https://www.w3schools.com/html/mov_bbb.mp4',
+      // video_720p_4: 'https://www.w3schools.com/html/mov_bbb.mp4',
+      // video_360p_mp4_1: 'https://www.w3schools.com/html/mov_bbb.mp4',
+      // video_360p_mp4_2: 'https://www.w3schools.com/html/mov_bbb.mp4',
+      // video_360p_mp4_3: 'https://www.w3schools.com/html/mov_bbb.mp4',
+      // video_360p_mp4_4: 'https://www.w3schools.com/html/mov_bbb.mp4',
+      // video_360p_1: 'https://www.w3schools.com/html/mov_bbb.mp4',
+      // video_360p_2: 'https://www.w3schools.com/html/mov_bbb.mp4',
+      // video_360p_3: 'https://www.w3schools.com/html/mov_bbb.mp4',
+      // video_360p_4: 'https://www.w3schools.com/html/mov_bbb.mp4',
+      video_1080p_mp4_1: 'https://www.youtube.com/watch?v=IJkYipYNEtI',
+      video_1080p_mp4_2: 'https://www.youtube.com/watch?v=IJkYipYNEtI',
+      video_1080p_mp4_3: 'https://www.youtube.com/watch?v=IJkYipYNEtI',
+      video_1080p_mp4_4: 'https://www.youtube.com/watch?v=IJkYipYNEtI',
+      video_1080p_1: 'https://www.youtube.com/watch?v=IJkYipYNEtI',
+      video_1080p_2: 'https://www.youtube.com/watch?v=IJkYipYNEtI',
+      video_1080p_3: 'https://www.youtube.com/watch?v=IJkYipYNEtI',
+      video_1080p_4: 'https://www.youtube.com/watch?v=IJkYipYNEtI',
+      video_720p_mp4_1: 'https://www.youtube.com/watch?v=IJkYipYNEtI',
+      video_720p_mp4_2: 'https://www.youtube.com/watch?v=IJkYipYNEtI',
+      video_720p_mp4_3: 'https://www.youtube.com/watch?v=IJkYipYNEtI',
+      video_720p_mp4_4: 'https://www.youtube.com/watch?v=IJkYipYNEtI',
+      video_720p_1: 'https://www.youtube.com/watch?v=IJkYipYNEtI',
+      video_720p_2: 'https://www.youtube.com/watch?v=IJkYipYNEtI',
+      video_720p_3: 'https://www.youtube.com/watch?v=IJkYipYNEtI',
+      video_720p_4: 'https://www.youtube.com/watch?v=IJkYipYNEtI',
+      video_360p_mp4_1: 'https://www.youtube.com/watch?v=IJkYipYNEtI',
+      video_360p_mp4_2: 'https://www.youtube.com/watch?v=IJkYipYNEtI',
+      video_360p_mp4_3: 'https://www.youtube.com/watch?v=IJkYipYNEtI',
+      video_360p_mp4_4: 'https://www.youtube.com/watch?v=IJkYipYNEtI',
+      video_360p_1: 'https://www.youtube.com/watch?v=IJkYipYNEtI',
+      video_360p_2: 'https://www.youtube.com/watch?v=IJkYipYNEtI',
+      video_360p_3: 'https://www.youtube.com/watch?v=IJkYipYNEtI',
+      video_360p_4: 'https://www.youtube.com/watch?v=IJkYipYNEtI',
       slides:
         'https://appx-recordings.s3.ap-south-1.amazonaws.com/drm/100x/slides/Loops%2C+callbacks.pdf',
     },
diff --git a/src/components/YoutubeRenderer.tsx b/src/components/YoutubeRenderer.tsx
index 3710c8704..ef849b19d 100644
--- a/src/components/YoutubeRenderer.tsx
+++ b/src/components/YoutubeRenderer.tsx
@@ -2,25 +2,33 @@ import React from 'react';
 
 interface Props {
   videoURL: string;
-  width: string;
-  height: string;
+  width?: string;
+  height?: string;
   style?: React.CSSProperties;
+  className?: string;
 }
 
-export const YoutubeRenderer = ({ width, height, videoURL, style }: Props) => {
+export const YoutubeRenderer = ({
+  width,
+  height,
+  videoURL,
+  style,
+  className,
+}: Props) => {
   if (!videoURL) {
     return null;
   }
   return (
     <iframe
-      width={width}
-      height={height}
+      width={width || 1280}
+      height={height || 720}
       src={videoURL}
       title="YouTube video player"
       allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
       referrerPolicy="strict-origin-when-cross-origin"
       allowFullScreen
       style={style}
+      className={className || ''}
     ></iframe>
   );
 };
diff --git a/src/components/admin/ContentRendererClient.tsx b/src/components/admin/ContentRendererClient.tsx
index d864a5f3a..a1a6e22c4 100644
--- a/src/components/admin/ContentRendererClient.tsx
+++ b/src/components/admin/ContentRendererClient.tsx
@@ -5,6 +5,20 @@ import { VideoPlayerSegment } from '@/components/VideoPlayerSegment';
 import VideoContentChapters from '../VideoContentChapters';
 import { useMemo, useState } from 'react';
 import { handleMarkAsCompleted } from '@/lib/utils';
+import YoutubeRenderer from '../YoutubeRenderer';
+
+const isYouTubeUrl = (url: string): boolean => {
+  const youtubePattern: RegExp =
+    /(?:youtu|youtube)(?:\.com|\.be)\/(?:watch\?v=)?([\w-]+)/;
+  return youtubePattern.test(url);
+};
+
+const extractYouTubeIdFromUrl = (url: string): string | null => {
+  const match: RegExpMatchArray | null = url.match(
+    /(?:youtu\.be\/|(?:youtube\.com\/(?:v\/|u\/\w\/|embed\/|watch\?v=)))([\w-]+)/,
+  );
+  return match ? match[1] : null;
+};
 
 export const ContentRendererClient = ({
   metadata,
@@ -63,6 +77,11 @@ export const ContentRendererClient = ({
         src: mpdUrl,
         type: 'application/x-mpegURL',
       };
+    } else if (isYouTubeUrl(mpdUrl)) {
+      return {
+        src: mpdUrl,
+        type: 'video/youtube',
+      };
     }
     return {
       src: mpdUrl,
@@ -89,101 +108,107 @@ export const ContentRendererClient = ({
 
   return (
     <div className="flex gap-2 items-start flex-col lg:flex-row">
-      <div className="flex-1 w-full">
-        <VideoPlayerSegment
-          setQuality={setQuality}
-          contentId={content.id}
-          subtitles={metadata.subtitles}
-          thumbnails={[]}
-          segments={metadata?.segments || []}
-          videoJsOptions={{
-            playbackrates: [0.5, 1, 1.25, 1.5, 1.75, 2],
-            controls: true,
-            fluid: true,
-            html5: {
-              vhs: {
-                overridenative: true,
-              },
-            },
-            thumbnail: metadata.thumbnail || false, // data.isComposite ? data.thumbnails[0] : null,
-            isComposite: true,
-            height: 720,
-            width: 1080,
-            delta: 30,
-            autoplay: true,
-            responsive: true,
-            sources: [source],
-          }}
-          onVideoEnd={() => {
-            setContentCompleted(true);
-          }}
+      {source.type === 'video/youtube' ? (
+        <YoutubeRenderer
+          width="1200"
+          videoURL={`https://www.youtube.com/embed/${extractYouTubeIdFromUrl(source.src)}`}
         />
-        <br />
-        <div className="flex justify-between mb-2">
-          <div>
-            <div className="text-gray-900 dark:text-white font-bold text-2xl">
-              {content.title}
+      ) : (
+        <div className="flex-1 w-full">
+          <VideoPlayerSegment
+            setQuality={setQuality}
+            contentId={content.id}
+            subtitles={metadata.subtitles}
+            thumbnails={[]}
+            segments={metadata?.segments || []}
+            videoJsOptions={{
+              playbackrates: [0.5, 1, 1.25, 1.5, 1.75, 2],
+              controls: true,
+              fluid: true,
+              html5: {
+                vhs: {
+                  overridenative: true,
+                },
+              },
+              thumbnail: metadata.thumbnail || false, // data.isComposite ? data.thumbnails[0] : null,
+              isComposite: true,
+              height: 720,
+              width: 1080,
+              delta: 30,
+              autoplay: true,
+              responsive: true,
+              sources: [source],
+            }}
+            onVideoEnd={() => {
+              setContentCompleted(true);
+            }}
+          />
+          <br />
+          <div className="flex justify-between mb-2">
+            <div>
+              <div className="text-gray-900 dark:text-white font-bold text-2xl">
+                {content.title}
+              </div>
+
+              <button
+                className="bg-blue-500 hover:bg-blue-700 text-white font-bold rounded p-2 my-4"
+                disabled={loadingMarkAs}
+                onClick={handleMarkCompleted}
+              >
+                {contentCompleted ? 'Mark as Incomplete' : 'Mark as completed'}
+              </button>
             </div>
 
-            <button
-              className="bg-blue-500 hover:bg-blue-700 text-white font-bold rounded p-2 my-4"
-              disabled={loadingMarkAs}
-              onClick={handleMarkCompleted}
-            >
-              {contentCompleted ? 'Mark as Incomplete' : 'Mark as completed'}
-            </button>
+            <div>
+              {/* <QualitySelector /> */}
+              <br />
+              {metadata.slides ? (
+                <div
+                  style={{
+                    display: 'flex',
+                    flexDirection: 'row-reverse',
+                    gap: '10px',
+                  }}
+                >
+                  <a href={metadata.slides} target="_blank">
+                    <button className="bg-blue-500 hover:bg-blue-700 text-white font-bold rounded p-2">
+                      Slides
+                    </button>
+                  </a>
+                </div>
+              ) : null}
+              {!showChapters && metadata.segments?.length > 0 && (
+                <button
+                  className="bg-blue-500 hover:bg-blue-700 text-white font-bold rounded p-2"
+                  onClick={() => {
+                    scrollTo({ top: 0, behavior: 'smooth' });
+                    toggleShowChapters();
+                  }}
+                >
+                  View All Chapters
+                </button>
+              )}
+            </div>
           </div>
-
-          <div>
-            {/* <QualitySelector /> */}
-            <br />
-            {metadata.slides ? (
-              <div
-                style={{
-                  display: 'flex',
-                  flexDirection: 'row-reverse',
-                  gap: '10px',
-                }}
-              >
-                <a href={metadata.slides} target="_blank">
-                  <button className="bg-blue-500 hover:bg-blue-700 text-white font-bold rounded p-2">
-                    Slides
-                  </button>
-                </a>
-              </div>
-            ) : null}
-            {!showChapters && metadata.segments?.length > 0 && (
+          {nextContent ? (
+            <div className="flex flex-row-reverse">
               <button
-                className="bg-blue-500 hover:bg-blue-700 text-white font-bold rounded p-2"
+                className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded ml-4"
                 onClick={() => {
-                  scrollTo({ top: 0, behavior: 'smooth' });
-                  toggleShowChapters();
+                  const originalPath = window.location.pathname;
+                  const parts = originalPath.split('/');
+                  parts.pop();
+                  parts.push(nextContent.id.toString());
+                  const newPath = parts.join('/');
+                  router.push(newPath);
                 }}
               >
-                View All Chapters
-              </button>
-            )}
-          </div>
+                {nextContent.title}
+              </button>{' '}
+            </div>
+          ) : null}
         </div>
-        {nextContent ? (
-          <div className="flex flex-row-reverse">
-            <button
-              className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded ml-4"
-              onClick={() => {
-                const originalPath = window.location.pathname;
-                const parts = originalPath.split('/');
-                parts.pop();
-                parts.push(nextContent.id.toString());
-                const newPath = parts.join('/');
-                router.push(newPath);
-              }}
-            >
-              {nextContent.title}
-            </button>{' '}
-          </div>
-        ) : null}
-      </div>
-
+      )}
       {showChapters && (
         <VideoContentChapters
           segments={metadata?.segments}