Merge branch 'main' into code-improvement

code100x · Apr 21, 2024 · ec5cea3 · ec5cea3
2 parents 8681f69 + 29c5989
commit ec5cea3
Show file tree

Hide file tree

Showing 7 changed files with 79 additions and 4,290 deletions.
diff --git a/src/components/Sidebar.tsx b/src/components/Sidebar.tsx
@@ -1,5 +1,5 @@
 'use client';
-import { useRouter } from 'next/navigation';
+import { usePathname, useRouter } from 'next/navigation';
 import {
   Accordion,
   AccordionContent,
@@ -23,7 +23,34 @@ export function Sidebar({
   courseId: string;
 }) {
   const router = useRouter();
+  const pathName = usePathname();
+
   const [sidebarOpen, setSidebarOpen] = useRecoilState(sidebarOpenAtom);
+  const [currentActiveContentIds, setCurrentActiveContentIds] = useState<
+    number[]
+  >([]);
+
+  useEffect(() => {
+    const urlRegex = /\/courses\/.*./;
+    const courseUrlRegex = /\/courses\/\d+((?:\/\d+)+)/;
+
+    if (urlRegex.test(pathName)) {
+      const matchArray = pathName.match(courseUrlRegex);
+      let currentUrlContentId;
+      // if matchArray is not null
+      if (matchArray) {
+        const urlPathString = matchArray[1];
+        currentUrlContentId = Number(
+          urlPathString.slice(urlPathString.length - 1),
+        ); // get last content id from pathString e.g '/1/2' => 2 (number)
+      }
+      const pathArray = findPathToContent(
+        fullCourseContent,
+        currentUrlContentId,
+      );
+      setCurrentActiveContentIds(pathArray);
+    }
+  }, [pathName]);
 
   useEffect(() => {
     if (window.innerWidth < 500) {
@@ -65,13 +92,20 @@ export function Sidebar({
 
   const renderContent = (contents: any) => {
     return contents.map((content: any) => {
+      const isActiveContent = currentActiveContentIds?.some(
+        (id) => content.id === id,
+      );
       if (content.children && content.children.length > 0) {
         // This is a folder with children
         return (
           <AccordionItem
             key={content.id}
             value={`item-${content.id}`}
-            className="text-gray-900 dark:text-white hover:bg-gray-100 dark:hover:bg-gray-700 cursor-pointer"
+            className={
+              content.type === 'folder' && isActiveContent
+                ? 'dark:bg-gray-600  bg-gray-200 dark:text-white text-black dark:hover:bg-gray-500 hover:bg-gray-100'
+                : ''
+            }
           >
             <AccordionTrigger className="px-2 text-left">
               {content.title}
@@ -87,7 +121,11 @@ export function Sidebar({
       return (
         <div
           key={content.id}
-          className="group p-2 flex border-gray-300 border-b hover:bg-gray-100 dark:hover:bg-gray-700 dark:border-gray-700 cursor-pointer bg-gray-50 dark:bg-gray-800"
+          className={`p-2 flex border-b hover:bg-gray-200 cursor-pointer ${
+            isActiveContent
+              ? 'dark:bg-gray-700 bg-gray-300 dark:text-white text-black dark:hover:bg-gray-500'
+              : 'bg-gray-50 dark:bg-gray-800 dark:hover:bg-gray-700 dark:text-white text-black'
+          }`}
           onClick={() => {
             navigateToContent(content.id);
           }}

diff --git 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/VideoPlayerSegment.tsx b/src/components/VideoPlayerSegment.tsx
@@ -89,7 +89,7 @@ export const VideoPlayerSegment: FunctionComponent<VideoProps> = ({
   };
 
   return (
-    <div className="">
+    <div className="mb-6">
       <div className="flex-1 relative">
         <div
           id="thumbnail-preview"

diff --git a/src/components/YoutubeRenderer.tsx 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>
+  );
+};
diff --git a/src/components/admin/ContentRendererClient.tsx b/src/components/admin/ContentRendererClient.tsx
@@ -118,7 +118,6 @@ export const ContentRendererClient = ({
             setContentCompleted(true);
           }}
         />
-        <br />
         <div className="flex justify-between mb-2">
           <div>
             <div className="text-gray-900 dark:text-white font-bold text-2xl">
@@ -136,7 +135,6 @@ export const ContentRendererClient = ({
 
           <div>
             {/* <QualitySelector /> */}
-            <br />
             {metadata.slides ? (
               <div
                 style={{
@@ -154,7 +152,7 @@ export const ContentRendererClient = ({
             ) : null}
             {!showChapters && metadata.segments?.length > 0 && (
               <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 rounded my-4 p-2"
                 onClick={() => {
                   scrollTo({ top: 0, behavior: 'smooth' });
                   toggleShowChapters();

diff --git a/src/components/print/Print.tsx b/src/components/print/Print.tsx
@@ -23,8 +23,7 @@ export function Print() {
     setTimeout(() => {
       print();
       opened = true;
-      window.close();
-    }, 2000);
+    }, 1000);
   }, []);
 
   return null;