Merge branch 'code100x:main' into main

.gitignore

@@ -37,3 +37,5 @@ yarn-error.log*
 # typescript
 *.tsbuildinfo
 next-env.d.ts
+
+*storybook.log

.storybook/main.ts

@@ -0,0 +1,24 @@
+import type { StorybookConfig } from '@storybook/nextjs';
+
+const config: StorybookConfig = {
+  stories: [
+    '../storybook/**/*.mdx',
+    '../storybook/**/*.stories.@(js|jsx|mjs|ts|tsx)',
+    '../storybook/stories/components/**/*.stories.@(js|jsx|mjs|ts|tsx)',
+  ],
+  addons: [
+    '@storybook/addon-links',
+    '@storybook/addon-essentials',
+    '@chromatic-com/storybook',
+    '@storybook/addon-interactions',
+  ],
+  framework: {
+    name: '@storybook/nextjs',
+    options: {},
+  },
+  docs: {
+    autodocs: 'tag',
+  },
+  staticDirs: ['../public'],
+};
+export default config;

.storybook/preview.ts

@@ -0,0 +1,15 @@
+import type { Preview } from '@storybook/react';
+import '../src/styles/tailwind.css';
+
+const preview: Preview = {
+  parameters: {
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i,
+      },
+    },
+  },
+};
+
+export default preview;

README.md

@@ -2,24 +2,6 @@
 
 ## Table of contents
 
-- [Prerequisites](#prerequisites)
-- [Setup](#setup)
-  - [Using Docker](#using-docker)
-  - [Without Docker](#without-docker)
-- [Usage](#usage)
-- [Contributing](#contributing)
-
-## Prerequisites
-
-Before you begin, ensure you have met the following requirements
-
-- Node.js and npm installed on your machine.
-- Docker installed (optional, required for Docker setup).
-- Access to a PostgreSQL database (can be local or hosted).
-
-## Setup
-
-### Using Docker
 
 1. Clone the repository:
    ```bash

chromatic.config.json

@@ -0,0 +1,4 @@
+{
+  "projectId": "Project:66234a5ec2e12ce0e1adf381",
+  "zip": true
+}

package.json

@@ -21,7 +21,12 @@
     "db:reset": "prisma migrate reset",
     "prepare": "husky install",
     "studio": "prisma studio",
-    "studio:docker": "open http://localhost:5555 || start http://localhost:5555"
+    "studio:docker": "open http://localhost:5555 || start http://localhost:5555",
+    "storybook": "concurrently 'yarn:watch:*'",
+    "watch:storybook": "storybook dev -p 6006",
+    "watch:tailwind": "npx tailwind -i ./src/styles/tailwind-input.css -o ./src/styles/tailwind.css --watch",
+    "build:tailwind": "npx tailwind -i ./src/styles/tailwind-input.css -o ./src/styles/tailwind.css",
+    "build-storybook": "npm run build:tailwind && storybook build"
   },
   "dependencies": {
     "@auth/prisma-adapter": "^1.0.6",
@@ -68,6 +73,7 @@
     "react-resizable-panels": "^1.0.7",
     "recoil": "^0.7.7",
     "sonner": "^1.4.0",
+    "storybook": "^8.0.8",
     "tailwind-merge": "^2.2.1",
     "tailwindcss-animate": "^1.0.7",
     "vaul": "^0.8.9",
@@ -79,20 +85,30 @@
     "zod": "^3.22.4"
   },
   "devDependencies": {
+    "@chromatic-com/storybook": "^1.3.3",
+    "@storybook/addon-controls": "^8.0.8",
+    "@storybook/addon-essentials": "^8.0.8",
+    "@storybook/addon-interactions": "^8.0.8",
+    "@storybook/addon-links": "^8.0.8",
+    "@storybook/addon-onboarding": "^8.0.8",
+    "@storybook/blocks": "^8.0.8",
+    "@storybook/nextjs": "^8.0.8",
+    "@storybook/react": "^8.0.8",
+    "@storybook/test": "^8.0.8",
     "@types/node": "^20",
     "@types/react": "^18",
     "@types/react-dom": "^18",
     "@typescript-eslint/eslint-plugin": "^6.20.0",
     "@typescript-eslint/parser": "^6.20.0",
     "autoprefixer": "^10.0.1",
-    "csv-parser": "^3.0.0",
+
     "eslint": "^8.56.0",
+    "eslint-plugin-storybook": "^0.8.0",
     "husky": "^9.0.7",
     "postcss": "^8",
     "prettier": "^3.2.4",
     "prisma": "^5.6.0",
     "tailwindcss": "^3.3.0",
     "ts-node": "^10.9.2",
-    "typescript": "^5.3.2"
   }
 }

src/actions/videopreview/videoPreview.tsx

@@ -1,14 +1,18 @@
-"use server";
+'use server';
 import db from '@/db';
 
-export default async function VideoPreview({ contentId }: { contentId: number }) {
-    const videoMetadata = await db.videoMetadata.findFirst({
-        where: { contentId },
-        select: { video_360p_1: true }
-    });
+export default async function VideoPreview({
+  contentId,
+}: {
+  contentId: number;
+}) {
+  const videoMetadata = await db.videoMetadata.findFirst({
+    where: { contentId },
+    select: { video_360p_1: true },
+  });
 
-    if (videoMetadata) {
-        return videoMetadata.video_360p_1;
-    }
-    return null;
+  if (videoMetadata) {
+    return videoMetadata.video_360p_1;
+  }
+  return null;
 }

src/components/ContentCard.tsx

@@ -5,7 +5,7 @@ import BookmarkButton from './bookmark/BookmarkButton';
 import { formatTime } from '@/lib/utils';
 import VideoThumbnail from './videothumbnail';
 
-export const  ContentCard = ({
+export const ContentCard = ({
   title,
   onClick,
   markAsCompleted,
@@ -54,21 +54,30 @@ export const  ContentCard = ({
           {contentDuration && formatTime(contentDuration)}
         </div>
       )}
-      {type !=='video' && <div className="relative overflow-hidden rounded-md">
-        <img src={image} alt={title} className="" />
-        {!!videoProgressPercent && (
-          <div className="absolute bottom-0 w-full h-1 bg-[#707071]">
-            <div
-              className="h-full bg-[#FF0101]"
-              style={{ width: `${videoProgressPercent}%` }}
-            />
-          </div>
-        )}
-      </div>}
-      {type ==='video'  && <div className="relative overflow-hidden rounded-md ">   
-         <VideoThumbnail contentId={contentId} imageUrl={"https://d2szwvl7yo497w.cloudfront.net/courseThumbnails/video.png"}  duration={1} />
-      </div>}
-
+      {type !== 'video' && (
+        <div className="relative overflow-hidden rounded-md">
+          <img src={image} alt={title} className="" />
+          {!!videoProgressPercent && (
+            <div className="absolute bottom-0 w-full h-1 bg-[#707071]">
+              <div
+                className="h-full bg-[#FF0101]"
+                style={{ width: `${videoProgressPercent}%` }}
+              />
+            </div>
+          )}
+        </div>
+      )}
+      {type === 'video' && (
+        <div className="relative overflow-hidden rounded-md ">
+          <VideoThumbnail
+            contentId={contentId ?? 0}
+            imageUrl={
+              'https://d2szwvl7yo497w.cloudfront.net/courseThumbnails/video.png'
+            }
+          />
+        </div>
+      )}
+
       {bookmark !== undefined && contentId && (
         <div className="absolute top-2 left-2">
           <BookmarkButton

src/components/CourseCard.tsx

@@ -8,14 +8,26 @@ import { useRouter } from 'next/navigation';
 export const CourseCard = ({
   course,
   onClick,
+  buttonColor,
+  roundedCardSize,
 }: {
   course: Course;
   onClick: () => void;
+  buttonColor: string;
+  roundedCardSize: 'lg' | 'xl' | '2xl' | '3xl';
 }) => {
+  const roundedClassNames = {
+    lg: 'rounded-lg',
+    xl: 'rounded-xl',
+    '2xl': 'rounded-2xl',
+    '3xl': 'rounded-3xl',
+  };
+
+  const roundedClassName = roundedClassNames[roundedCardSize] || 'rounded-lg';
   const router = useRouter();
   return (
     <div
-      className="max-w-sm bg-white border border-gray-200 rounded-lg shadow dark:bg-gray-800 dark:border-gray-700 mx-auto w-full"
+      className={`max-w-sm bg-white border border-gray-200 ${roundedClassName} shadow dark:bg-gray-800 dark:border-gray-700 mx-auto w-full`}
       onClick={() => {
         onClick();
       }}
@@ -36,6 +48,54 @@ export const CourseCard = ({
           <div className="mt-4 mb-2">{course.title} Cohort</div>
         </div>
         <div>
+          <button
+            type="button"
+            className="text-white bg-blue-700 hover:bg-blue-800 focus:outline-none focus:ring-4 focus:ring-blue-300 font-medium rounded-full text-sm px-5 py-2.5 text-center me-2 mb-2 w-full"
+            style={{
+              backgroundColor: buttonColor,
+            }}
+          >
+            View Content
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+  return (
+    <div
+      className={`max-w-full flex flex-col md:flex-row items-center bg-slate-100 md:border rounded-${roundedCardSize} shadow-lg dark:bg-gradient-to-t md:dark:bg-gradient-to-l dark:from-slate-900 dark:to-slate-800`}
+      onClick={() => {
+        onClick();
+      }}
+    >
+      <div className="relative">
+        <div className="p-2">
+          <img
+            src={course.imageUrl}
+            alt={course.title}
+            className="rounded-t-md md:rounded-l-md md:rounded-r-none md:max-w-md"
+          />
+        </div>
+      </div>
+
+      <div className="px-6 py-2 w-full h-full">
+        <div className="flex flex-col w-full h-full items-start justify-between md:py-4">
+          <div className="w-full items-start mb-3">
+            <h2 className="mb-0 md:mb-2 dark:text-neutral-100 text-neutral-800 text-xl sm:text-3xl font-semibold">
+              {course.title} Cohort
+            </h2>
+
+            <p className="dark:text-neutral-200 text-neutral-700 font-medium">
+              {course.description}
+            </p>
+          </div>
+
+          <div className="w-full flex justify-end pb-2 md:pb-0">
+            <Button className="group">
+              Explore Content{' '}
+              <ChevronRight className="h-4 w-4 ml-1 group-hover:translate-x-1 transition" />
+            </Button>
+          </div>
           <PrimaryButton>View Content</PrimaryButton>
           {course.certIssued && (
             <SecondaryButton

src/components/Courses.tsx

@@ -13,6 +13,8 @@ export const Courses = ({ courses }: { courses: Course[] }) => {
           <CourseCard
             key={course.id}
             course={course}
+            buttonColor=""
+            roundedCardSize="lg"
             onClick={() => {
               if (
                 course.title.includes('Machine Learning') ||

src/components/VideoPlayerSegment.tsx

@@ -1,6 +1,11 @@
 'use client';
 import React, { FunctionComponent, useRef } from 'react';
-import { VideoPlayer } from '@/components/videoPlayer/VideoPlayer';
+import { VideoPlayer } from '@/components/VideoPlayer2';
+import {
+  createSegmentMarkersWithoutDuration,
+  getCurrentSegmentName,
+} from '@/lib/utils';
+import Player from 'video.js/dist/types/player';
 
 import { Segment } from '@/lib/utils';
 
@@ -30,8 +35,59 @@ export const VideoPlayerSegment: FunctionComponent<VideoProps> = ({
   videoJsOptions,
   onVideoEnd,
 }) => {
+  const playerRef = useRef<Player | null>(null);
+
   const thumbnailPreviewRef = useRef<HTMLDivElement>(null);
 
+  const overrideUpdateTime = (player: Player) => {
+    const seekBar = player
+      .getChild('ControlBar')
+      ?.getChild('ProgressControl')
+      ?.getChild('SeekBar');
+
+    if (seekBar) {
+      const mouseTimeDisplay = seekBar.getChild('mouseTimeDisplay');
+      if (mouseTimeDisplay) {
+        const timeTooltip: any = mouseTimeDisplay.getChild('timeTooltip');
+        if (timeTooltip) {
+          timeTooltip.update = function (
+            seekBarRect: any,
+            seekBarPoint: any,
+            time: string,
+          ) {
+            const segmentName = getCurrentSegmentName(time, segments);
+            this.write(`${time} - ${segmentName}`);
+
+            // Delay the execution to ensure the tooltip width is calculated after the content update
+            setTimeout(() => {
+              const tooltipWidth = this.el().offsetWidth;
+              // Calculate the offset from the right side
+              const rightOffset = tooltipWidth / 2;
+              this.el().style.right = `-${rightOffset}px`;
+
+              // Adjust the left style to 'auto' to avoid conflict with the right property
+              this.el().style.left = 'auto';
+              this.el().style.width = '200px';
+              this.el().style.fontSize = '14px';
+            }, 0);
+          };
+        } else {
+          console.error('TimeTooltip component not found.');
+        }
+      } else {
+        console.error('MouseTimeDisplay component not found.');
+      }
+    } else {
+      console.error('SeekBar component not found.');
+    }
+  };
+  const handlePlayerReady = async (player: Player) => {
+    playerRef.current = player;
+
+    createSegmentMarkersWithoutDuration(player, segments);
+    overrideUpdateTime(player);
+  };
+
   return (
     <div className="mb-6">
       <div className="flex-1 relative">
@@ -41,12 +97,12 @@ export const VideoPlayerSegment: FunctionComponent<VideoProps> = ({
           className="hidden absolute bg-no-repeat bg-cover w-[320px] h-[180px] pointer-events-none z-10"
         />
         <VideoPlayer
-          options={videoJsOptions}
-          subtitles={subtitles}
-          onVideoEnd={onVideoEnd}
-          segments={segments}
           setQuality={setQuality}
           contentId={contentId}
+          subtitles={subtitles}
+          options={videoJsOptions}
+          onVideoEnd={onVideoEnd}
+          onReady={handlePlayerReady}
         />
       </div>
     </div>