1071 video player page for courses

app/(app)/courses/[slug]/[id]/_client.tsx

@@ -0,0 +1,131 @@
+"use client";
+import { FEATURE_FLAGS, isFlagEnabled } from "@/utils/flags";
+import { CircleCheck, SquarePlay } from "lucide-react";
+import { type Session } from "next-auth";
+import { notFound } from "next/navigation";
+import { mockContentList } from "../../mock";
+
+interface ContentProps {
+ session: Session | null;
+}
+
+const Content = ({ session }: ContentProps) => {
+ const flagEnabled = isFlagEnabled(FEATURE_FLAGS.COURSE_VIDEO);
+
+ if (!flagEnabled) {
+ notFound();
+ }
+
+ return (
+ <div className="overflow-auto">
+ <div className="w-full divide-x divide-gray-700 lg:grid lg:grid-cols-12">
+ <VideoPlayer />
+ <Sidebar contentList={mockContentList} />
+ </div>
+ <div className="mx-auto max-w-5xl">
+ <ContentList contentList={mockContentList} />
+ </div>
+ </div>
+ );
+};
+
+const VideoPlayer = () => (
+ <div className="col-span-9">
+ <div className="mx-auto w-full max-w-7xl bg-black">
+ <iframe
+ className="aspect-video w-full"
+ src="https://www.youtube.com/embed/oKKG-CpDjrI"
+ title="YouTube video"
+ ></iframe>
+ </div>
+ </div>
+);
+
+interface SidebarProps {
+ contentList: typeof mockContentList;
+}
+
+const Sidebar = ({ contentList }: SidebarProps) => (
+ <div className="col-span-3 flex w-full flex-col overflow-auto">
+ <ul className="divide-y divide-gray-700">
+ {contentList && contentList.length > 0 ? (
+ contentList.map((item, index) => (
+ <SidebarItem key={index} item={item} />
+ ))
+ ) : (
+ <li className="text-center text-gray-500">No content available</li>
+ )}
+ </ul>
+ </div>
+);
+
+interface SidebarItemProps {
+ item: (typeof mockContentList)[0];
+}
+
+const SidebarItem = ({ item }: SidebarItemProps) => (
+ <li className="flex flex-row items-center justify-between px-2 py-2">
+ <div className="flex flex-row items-center">
+ <SquarePlay
+ className="mr-4 h-5 w-5 text-white group-hover:text-white"
+ aria-hidden="true"
+ />
+ <p>{item.title}</p>
+ </div>
+ <CircleCheck
+ className={`h-6 w-6 ${
+ item.watched ? "mr-2 h-5 w-5 text-pink-600" : "mr-2 h-5 w-5 text-white"
+ }`}
+ aria-hidden="true"
+ />
+ </li>
+);
+
+interface ContentListProps {
+ contentList: typeof mockContentList;
+}
+
+const ContentList = ({ contentList }: ContentListProps) => {
+ return (
+ <>
+ {contentList.map(
+ ({
+ id,
+ title,
+ longDescription,
+ description,
+ publishedDate,
+ author,
+ imageLink,
+ }) => (
+ <div key={id} className="mx-auto w-full max-w-7xl py-8">
+ <h2 className="text-3xl font-extrabold tracking-tight text-neutral-800 dark:text-white">
+ {title}
+ </h2>
+ <li key={author} className="flex justify-between gap-x-6 py-5">
+ <div className="flex min-w-0 gap-x-4">
+ <img
+ alt=""
+ src={imageLink}
+ className="h-12 w-12 flex-none rounded-full bg-gray-50"
+ />
+ <div className="min-w-0 flex-auto">
+ <p className="text-sm font-semibold leading-6 text-neutral-800 dark:text-white">
+ {author}
+ </p>
+ <p className="mt-1 truncate text-xs leading-5 text-gray-500">
+ {publishedDate}
+ </p>
+ </div>
+ </div>
+ </li>
+ <div>{description}</div>
+ <div>{longDescription}</div>
+ </div>
+ ),
+ )}
+ </>
+ );
+};
+
+export default Content;

app/(app)/courses/[slug]/[id]/page.tsx

@@ -0,0 +1,13 @@
+import { getServerAuthSession } from "@/server/auth";
+import Content from "./_client";
+
+export const metadata = {
+ title: "Video Course",
+};
+
+export default async function Page() {
+ // Example of grabbing session in case it is needed
+ const session = await getServerAuthSession();
+
+ return <Content session={session} />;
+}

app/(app)/courses/mock.ts

@@ -0,0 +1,130 @@
+// Mock video source (this would typically be a path to a video file)
+const mockVideoSrc = "https://youtu.be/Ln4KSN0rchI?t=12";
+
+// Mock content list
+const mockContentList = [
+ {
+ id: 1,
+ title: "Introduction to React",
+ longDescription:
+ "In this video, we will explore the fundamentals of React, including its component-based architecture, virtual DOM, and how to get started with your first React application. This tutorial guides you through the installation and configuration of essential tools like Node.js, npm, and create-react-app to set up your React development environment.",
+ description: "Learn the basics of React and its core concepts",
+ watched: false,
+ publishedDate: "2023-01-15",
+ author: "John Doe",
+ imageLink: "https://example.com/images/react-introduction.jpg",
+ },
+ {
+ id: 2,
+ title: "Setting Up Your Development Environment",
+ longDescription:
+ "This tutorial guides you through the installation and configuration of essential tools like Node.js, npm, and create-react-app to set up your React development environment.",
+ description:
+ "Install and configure the necessary tools for React development",
+ watched: true,
+ publishedDate: "2023-01-22",
+ author: "Jane Smith",
+ },
+ {
+ id: 3,
+ title: "Components and Props",
+ longDescription:
+ "Dive deep into React's core concepts of components and props. Learn how to create reusable components and pass data between them using props.",
+ description: "Understand the building blocks of React applications",
+ watched: true,
+ publishedDate: "2023-01-29",
+ author: "John Doe",
+ },
+ {
+ id: 4,
+ title: "State and Lifecycle",
+ longDescription:
+ "Explore how to manage component state and lifecycle methods to build dynamic and interactive applications with React.",
+ description: "Manage component state and lifecycle methods",
+ watched: true,
+ publishedDate: "2023-02-05",
+ author: "Jane Smith",
+ },
+ {
+ id: 5,
+ title: "Handling Events",
+ longDescription:
+ "Learn how to handle user interactions in React, including events like clicks, form submissions, and more.",
+ description: "Learn how to handle user interactions in React",
+ watched: true,
+ publishedDate: "2023-02-12",
+ author: "John Doe",
+ },
+ {
+ id: 6,
+ title: "Conditional Rendering",
+ longDescription:
+ "Discover how to display different UI elements based on specific conditions in your React applications.",
+ description: "Display different UI based on conditions",
+ watched: false,
+ publishedDate: "2023-02-19",
+ author: "Jane Smith",
+ },
+ {
+ id: 7,
+ title: "Lists and Keys",
+ longDescription:
+ "Learn the best practices for rendering lists of components in React and how to efficiently manage them with unique keys.",
+ description: "Render multiple components efficiently",
+ watched: false,
+ publishedDate: "2023-02-26",
+ author: "John Doe",
+ },
+ {
+ id: 8,
+ title: "Forms in React",
+ longDescription:
+ "This video covers how to create and manage forms in React applications, including controlled and uncontrolled components.",
+ description: "Create and handle form inputs in React applications",
+ watched: false,
+ publishedDate: "2023-03-05",
+ author: "Jane Smith",
+ },
+ {
+ id: 9,
+ title: "Hooks: useState and useEffect",
+ longDescription:
+ "An introduction to React Hooks, focusing on useState and useEffect to manage state and side effects in functional components.",
+ description: "Understand and use basic React Hooks",
+ watched: false,
+ publishedDate: "2023-03-12",
+ author: "John Doe",
+ },
+ {
+ id: 10,
+ title: "Custom Hooks",
+ longDescription:
+ "Learn how to create custom hooks in React to encapsulate and reuse logic across components.",
+ description: "Create reusable logic with custom Hooks",
+ watched: false,
+ publishedDate: "2023-03-19",
+ author: "Jane Smith",
+ },
+ {
+ id: 11,
+ title: "Context API",
+ longDescription:
+ "Explore the Context API to manage global state in your React applications without the need for prop drilling.",
+ description: "Manage global state in your React application",
+ watched: false,
+ publishedDate: "2023-03-26",
+ author: "John Doe",
+ },
+ {
+ id: 12,
+ title: "React Router",
+ longDescription:
+ "Learn how to implement navigation in your single-page applications using React Router, including dynamic routing and nested routes.",
+ description: "Implement navigation in your single-page application",
+ watched: false,
+ publishedDate: "2023-04-02",
+ author: "Jane Smith",
+ },
+];
+
+export { mockVideoSrc, mockContentList };

utils/flags.ts

@@ -2,6 +2,7 @@ import { posthog } from "posthog-js";
 
 export const FEATURE_FLAGS = {
  FEATURE_FLAG_TEST: "feature-flag-test",
+ COURSE_VIDEO: "course-video",
  JOBS: "jobs",
  // Add more feature flags as needed
 } as const;

app/(app)/courses/[slug]/[id]/_client.tsx

@@ -0,0 +1,131 @@
+"use client";
+import { FEATURE_FLAGS, isFlagEnabled } from "@/utils/flags";
+import { CircleCheck, SquarePlay } from "lucide-react";
+import { type Session } from "next-auth";
+import { notFound } from "next/navigation";
+import { mockContentList } from "../../mock";
+
+interface ContentProps {
+ session: Session | null;
+}
+
+const Content = ({ session }: ContentProps) => {
+ const flagEnabled = isFlagEnabled(FEATURE_FLAGS.COURSE_VIDEO);
+
+ if (!flagEnabled) {
+ notFound();
+ }
+
+ return (
+ <div className="overflow-auto">
+ <div className="w-full divide-x divide-gray-700 lg:grid lg:grid-cols-12">
+ <VideoPlayer />
+ <Sidebar contentList={mockContentList} />
+ </div>
+ <div className="mx-auto max-w-5xl">
+ <ContentList contentList={mockContentList} />
+ </div>
+ </div>
+ );
+};
+
+const VideoPlayer = () => (
+ <div className="col-span-9">
+ <div className="mx-auto w-full max-w-7xl bg-black">
+ <iframe
+ className="aspect-video w-full"
+ src="https://www.youtube.com/embed/oKKG-CpDjrI"
+ title="YouTube video"
+ ></iframe>
+ </div>
+ </div>
+);
+
+interface SidebarProps {
+ contentList: typeof mockContentList;
+}
+
+const Sidebar = ({ contentList }: SidebarProps) => (
+ <div className="col-span-3 flex w-full flex-col overflow-auto">
+ <ul className="divide-y divide-gray-700">
+ {contentList && contentList.length > 0 ? (
+ contentList.map((item, index) => (
+ <SidebarItem key={index} item={item} />
+ ))
+ ) : (
+ <li className="text-center text-gray-500">No content available</li>
+ )}
+ </ul>
+ </div>
+);
+
+interface SidebarItemProps {
+ item: (typeof mockContentList)[0];
+}
+
+const SidebarItem = ({ item }: SidebarItemProps) => (
+ <li className="flex flex-row items-center justify-between px-2 py-2">
+ <div className="flex flex-row items-center">
+ <SquarePlay
+ className="mr-4 h-5 w-5 text-white group-hover:text-white"
+ aria-hidden="true"
+ />
+ <p>{item.title}</p>
+ </div>
+ <CircleCheck
+ className={`h-6 w-6 ${
+ item.watched ? "mr-2 h-5 w-5 text-pink-600" : "mr-2 h-5 w-5 text-white"
+ }`}
+ aria-hidden="true"
+ />
+ </li>
+);
+
+interface ContentListProps {
+ contentList: typeof mockContentList;
+}
+
+const ContentList = ({ contentList }: ContentListProps) => {
+ return (
+ <>
+ {contentList.map(
+ ({
+ id,
+ title,
+ longDescription,
+ description,
+ publishedDate,
+ author,
+ imageLink,
+ }) => (
+ <div key={id} className="mx-auto w-full max-w-7xl py-8">
+ <h2 className="text-3xl font-extrabold tracking-tight text-neutral-800 dark:text-white">
+ {title}
+ </h2>
+ <li key={author} className="flex justify-between gap-x-6 py-5">
+ <div className="flex min-w-0 gap-x-4">
+ <img
+ alt=""
+ src={imageLink}
+ className="h-12 w-12 flex-none rounded-full bg-gray-50"
+ />
+ <div className="min-w-0 flex-auto">
+ <p className="text-sm font-semibold leading-6 text-neutral-800 dark:text-white">
+ {author}
+ </p>
+ <p className="mt-1 truncate text-xs leading-5 text-gray-500">
+ {publishedDate}
+ </p>
+ </div>
+ </div>
+ </li>
+ <div>{description}</div>
+ <div>{longDescription}</div>
+ </div>
+ ),
+ )}
+ </>
+ );
+};
+
+export default Content;

app/(app)/courses/[slug]/[id]/page.tsx

@@ -0,0 +1,13 @@
+import { getServerAuthSession } from "@/server/auth";
+import Content from "./_client";
+
+export const metadata = {
+ title: "Video Course",
+};
+
+export default async function Page() {
+ // Example of grabbing session in case it is needed
+ const session = await getServerAuthSession();
+
+ return <Content session={session} />;
+}

app/(app)/courses/mock.ts

@@ -0,0 +1,130 @@
+// Mock video source (this would typically be a path to a video file)
+const mockVideoSrc = "https://youtu.be/Ln4KSN0rchI?t=12";
+
+// Mock content list
+const mockContentList = [
+ {
+ id: 1,
+ title: "Introduction to React",
+ longDescription:
+ "In this video, we will explore the fundamentals of React, including its component-based architecture, virtual DOM, and how to get started with your first React application. This tutorial guides you through the installation and configuration of essential tools like Node.js, npm, and create-react-app to set up your React development environment.",
+ description: "Learn the basics of React and its core concepts",
+ watched: false,
+ publishedDate: "2023-01-15",
+ author: "John Doe",
+ imageLink: "https://example.com/images/react-introduction.jpg",
+ },
+ {
+ id: 2,
+ title: "Setting Up Your Development Environment",
+ longDescription:
+ "This tutorial guides you through the installation and configuration of essential tools like Node.js, npm, and create-react-app to set up your React development environment.",
+ description:
+ "Install and configure the necessary tools for React development",
+ watched: true,
+ publishedDate: "2023-01-22",
+ author: "Jane Smith",
+ },
+ {
+ id: 3,
+ title: "Components and Props",
+ longDescription:
+ "Dive deep into React's core concepts of components and props. Learn how to create reusable components and pass data between them using props.",
+ description: "Understand the building blocks of React applications",
+ watched: true,
+ publishedDate: "2023-01-29",
+ author: "John Doe",
+ },
+ {
+ id: 4,
+ title: "State and Lifecycle",
+ longDescription:
+ "Explore how to manage component state and lifecycle methods to build dynamic and interactive applications with React.",
+ description: "Manage component state and lifecycle methods",
+ watched: true,
+ publishedDate: "2023-02-05",
+ author: "Jane Smith",
+ },
+ {
+ id: 5,
+ title: "Handling Events",
+ longDescription:
+ "Learn how to handle user interactions in React, including events like clicks, form submissions, and more.",
+ description: "Learn how to handle user interactions in React",
+ watched: true,
+ publishedDate: "2023-02-12",
+ author: "John Doe",
+ },
+ {
+ id: 6,
+ title: "Conditional Rendering",
+ longDescription:
+ "Discover how to display different UI elements based on specific conditions in your React applications.",
+ description: "Display different UI based on conditions",
+ watched: false,
+ publishedDate: "2023-02-19",
+ author: "Jane Smith",
+ },
+ {
+ id: 7,
+ title: "Lists and Keys",
+ longDescription:
+ "Learn the best practices for rendering lists of components in React and how to efficiently manage them with unique keys.",
+ description: "Render multiple components efficiently",
+ watched: false,
+ publishedDate: "2023-02-26",
+ author: "John Doe",
+ },
+ {
+ id: 8,
+ title: "Forms in React",
+ longDescription:
+ "This video covers how to create and manage forms in React applications, including controlled and uncontrolled components.",
+ description: "Create and handle form inputs in React applications",
+ watched: false,
+ publishedDate: "2023-03-05",
+ author: "Jane Smith",
+ },
+ {
+ id: 9,
+ title: "Hooks: useState and useEffect",
+ longDescription:
+ "An introduction to React Hooks, focusing on useState and useEffect to manage state and side effects in functional components.",
+ description: "Understand and use basic React Hooks",
+ watched: false,
+ publishedDate: "2023-03-12",
+ author: "John Doe",
+ },
+ {
+ id: 10,
+ title: "Custom Hooks",
+ longDescription:
+ "Learn how to create custom hooks in React to encapsulate and reuse logic across components.",
+ description: "Create reusable logic with custom Hooks",
+ watched: false,
+ publishedDate: "2023-03-19",
+ author: "Jane Smith",
+ },
+ {
+ id: 11,
+ title: "Context API",
+ longDescription:
+ "Explore the Context API to manage global state in your React applications without the need for prop drilling.",
+ description: "Manage global state in your React application",
+ watched: false,
+ publishedDate: "2023-03-26",
+ author: "John Doe",
+ },
+ {
+ id: 12,
+ title: "React Router",
+ longDescription:
+ "Learn how to implement navigation in your single-page applications using React Router, including dynamic routing and nested routes.",
+ description: "Implement navigation in your single-page application",
+ watched: false,
+ publishedDate: "2023-04-02",
+ author: "Jane Smith",
+ },
+];
+
+export { mockVideoSrc, mockContentList };

utils/flags.ts

@@ -2,6 +2,7 @@ import { posthog } from "posthog-js";
 
 export const FEATURE_FLAGS = {
  FEATURE_FLAG_TEST: "feature-flag-test",
+ COURSE_VIDEO: "course-video",
  JOBS: "jobs",
  // Add more feature flags as needed
 } as const;

app/(app)/courses/[slug]/[id]/_client.tsx

@@ -0,0 +1,131 @@
+"use client";
+import { FEATURE_FLAGS, isFlagEnabled } from "@/utils/flags";
+import { CircleCheck, SquarePlay } from "lucide-react";
+import { type Session } from "next-auth";
+import { notFound } from "next/navigation";
+import { mockContentList } from "../../mock";
+
+interface ContentProps {
+ session: Session | null;
+}
+
+const Content = ({ session }: ContentProps) => {
+ const flagEnabled = isFlagEnabled(FEATURE_FLAGS.COURSE_VIDEO);
+
+ if (!flagEnabled) {
+ notFound();
+ }
+
+ return (
+ <div className="overflow-auto">
+ <div className="w-full divide-x divide-gray-700 lg:grid lg:grid-cols-12">
+ <VideoPlayer />
+ <Sidebar contentList={mockContentList} />
+ </div>
+ <div className="mx-auto max-w-5xl">
+ <ContentList contentList={mockContentList} />
+ </div>
+ </div>
+ );
+};
+
+const VideoPlayer = () => (
+ <div className="col-span-9">
+ <div className="mx-auto w-full max-w-7xl bg-black">
+ <iframe
+ className="aspect-video w-full"
+ src="https://www.youtube.com/embed/oKKG-CpDjrI"
+ title="YouTube video"
+ ></iframe>
+ </div>
+ </div>
+);
+
+interface SidebarProps {
+ contentList: typeof mockContentList;
+}
+
+const Sidebar = ({ contentList }: SidebarProps) => (
+ <div className="col-span-3 flex w-full flex-col overflow-auto">
+ <ul className="divide-y divide-gray-700">
+ {contentList && contentList.length > 0 ? (
+ contentList.map((item, index) => (
+ <SidebarItem key={index} item={item} />
+ ))
+ ) : (
+ <li className="text-center text-gray-500">No content available</li>
+ )}
+ </ul>
+ </div>
+);
+
+interface SidebarItemProps {
+ item: (typeof mockContentList)[0];
+}
+
+const SidebarItem = ({ item }: SidebarItemProps) => (
+ <li className="flex flex-row items-center justify-between px-2 py-2">
+ <div className="flex flex-row items-center">
+ <SquarePlay
+ className="mr-4 h-5 w-5 text-white group-hover:text-white"
+ aria-hidden="true"
+ />
+ <p>{item.title}</p>
+ </div>
+ <CircleCheck
+ className={`h-6 w-6 ${
+ item.watched ? "mr-2 h-5 w-5 text-pink-600" : "mr-2 h-5 w-5 text-white"
+ }`}
+ aria-hidden="true"
+ />
+ </li>
+);
+
+interface ContentListProps {
+ contentList: typeof mockContentList;
+}
+
+const ContentList = ({ contentList }: ContentListProps) => {
+ return (
+ <>
+ {contentList.map(
+ ({
+ id,
+ title,
+ longDescription,
+ description,
+ publishedDate,
+ author,
+ imageLink,
+ }) => (
+ <div key={id} className="mx-auto w-full max-w-7xl py-8">
+ <h2 className="text-3xl font-extrabold tracking-tight text-neutral-800 dark:text-white">
+ {title}
+ </h2>
+ <li key={author} className="flex justify-between gap-x-6 py-5">
+ <div className="flex min-w-0 gap-x-4">
+ <img
+ alt=""
+ src={imageLink}
+ className="h-12 w-12 flex-none rounded-full bg-gray-50"
+ />
+ <div className="min-w-0 flex-auto">
+ <p className="text-sm font-semibold leading-6 text-neutral-800 dark:text-white">
+ {author}
+ </p>
+ <p className="mt-1 truncate text-xs leading-5 text-gray-500">
+ {publishedDate}
+ </p>
+ </div>
+ </div>
+ </li>
+ <div>{description}</div>
+ <div>{longDescription}</div>
+ </div>
+ ),
+ )}
+ </>
+ );
+};
+
+export default Content;

app/(app)/courses/[slug]/[id]/page.tsx

@@ -0,0 +1,13 @@
+import { getServerAuthSession } from "@/server/auth";
+import Content from "./_client";
+
+export const metadata = {
+ title: "Video Course",
+};
+
+export default async function Page() {
+ // Example of grabbing session in case it is needed
+ const session = await getServerAuthSession();
+
+ return <Content session={session} />;
+}

app/(app)/courses/mock.ts

@@ -0,0 +1,130 @@
+// Mock video source (this would typically be a path to a video file)
+const mockVideoSrc = "https://youtu.be/Ln4KSN0rchI?t=12";
+
+// Mock content list
+const mockContentList = [
+ {
+ id: 1,
+ title: "Introduction to React",
+ longDescription:
+ "In this video, we will explore the fundamentals of React, including its component-based architecture, virtual DOM, and how to get started with your first React application. This tutorial guides you through the installation and configuration of essential tools like Node.js, npm, and create-react-app to set up your React development environment.",
+ description: "Learn the basics of React and its core concepts",
+ watched: false,
+ publishedDate: "2023-01-15",
+ author: "John Doe",
+ imageLink: "https://example.com/images/react-introduction.jpg",
+ },
+ {
+ id: 2,
+ title: "Setting Up Your Development Environment",
+ longDescription:
+ "This tutorial guides you through the installation and configuration of essential tools like Node.js, npm, and create-react-app to set up your React development environment.",
+ description:
+ "Install and configure the necessary tools for React development",
+ watched: true,
+ publishedDate: "2023-01-22",
+ author: "Jane Smith",
+ },
+ {
+ id: 3,
+ title: "Components and Props",
+ longDescription:
+ "Dive deep into React's core concepts of components and props. Learn how to create reusable components and pass data between them using props.",
+ description: "Understand the building blocks of React applications",
+ watched: true,
+ publishedDate: "2023-01-29",
+ author: "John Doe",
+ },
+ {
+ id: 4,
+ title: "State and Lifecycle",
+ longDescription:
+ "Explore how to manage component state and lifecycle methods to build dynamic and interactive applications with React.",
+ description: "Manage component state and lifecycle methods",
+ watched: true,
+ publishedDate: "2023-02-05",
+ author: "Jane Smith",
+ },
+ {
+ id: 5,
+ title: "Handling Events",
+ longDescription:
+ "Learn how to handle user interactions in React, including events like clicks, form submissions, and more.",
+ description: "Learn how to handle user interactions in React",
+ watched: true,
+ publishedDate: "2023-02-12",
+ author: "John Doe",
+ },
+ {
+ id: 6,
+ title: "Conditional Rendering",
+ longDescription:
+ "Discover how to display different UI elements based on specific conditions in your React applications.",
+ description: "Display different UI based on conditions",
+ watched: false,
+ publishedDate: "2023-02-19",
+ author: "Jane Smith",
+ },
+ {
+ id: 7,
+ title: "Lists and Keys",
+ longDescription:
+ "Learn the best practices for rendering lists of components in React and how to efficiently manage them with unique keys.",
+ description: "Render multiple components efficiently",
+ watched: false,
+ publishedDate: "2023-02-26",
+ author: "John Doe",
+ },
+ {
+ id: 8,
+ title: "Forms in React",
+ longDescription:
+ "This video covers how to create and manage forms in React applications, including controlled and uncontrolled components.",
+ description: "Create and handle form inputs in React applications",
+ watched: false,
+ publishedDate: "2023-03-05",
+ author: "Jane Smith",
+ },
+ {
+ id: 9,
+ title: "Hooks: useState and useEffect",
+ longDescription:
+ "An introduction to React Hooks, focusing on useState and useEffect to manage state and side effects in functional components.",
+ description: "Understand and use basic React Hooks",
+ watched: false,
+ publishedDate: "2023-03-12",
+ author: "John Doe",
+ },
+ {
+ id: 10,
+ title: "Custom Hooks",
+ longDescription:
+ "Learn how to create custom hooks in React to encapsulate and reuse logic across components.",
+ description: "Create reusable logic with custom Hooks",
+ watched: false,
+ publishedDate: "2023-03-19",
+ author: "Jane Smith",
+ },
+ {
+ id: 11,
+ title: "Context API",
+ longDescription:
+ "Explore the Context API to manage global state in your React applications without the need for prop drilling.",
+ description: "Manage global state in your React application",
+ watched: false,
+ publishedDate: "2023-03-26",
+ author: "John Doe",
+ },
+ {
+ id: 12,
+ title: "React Router",
+ longDescription:
+ "Learn how to implement navigation in your single-page applications using React Router, including dynamic routing and nested routes.",
+ description: "Implement navigation in your single-page application",
+ watched: false,
+ publishedDate: "2023-04-02",
+ author: "Jane Smith",
+ },
+];
+
+export { mockVideoSrc, mockContentList };

utils/flags.ts

@@ -2,6 +2,7 @@ import { posthog } from "posthog-js";
 
 export const FEATURE_FLAGS = {
  FEATURE_FLAG_TEST: "feature-flag-test",
+ COURSE_VIDEO: "course-video",
  JOBS: "jobs",
  // Add more feature flags as needed
 } as const;

app/(app)/courses/[slug]/[id]/_client.tsx

@@ -0,0 +1,131 @@
+"use client";
+import { FEATURE_FLAGS, isFlagEnabled } from "@/utils/flags";
+import { CircleCheck, SquarePlay } from "lucide-react";
+import { type Session } from "next-auth";
+import { notFound } from "next/navigation";
+import { mockContentList } from "../../mock";
+
+interface ContentProps {
+ session: Session | null;
+}
+
+const Content = ({ session }: ContentProps) => {
+ const flagEnabled = isFlagEnabled(FEATURE_FLAGS.COURSE_VIDEO);
+
+ if (!flagEnabled) {
+ notFound();
+ }
+
+ return (
+ <div className="overflow-auto">
+ <div className="w-full divide-x divide-gray-700 lg:grid lg:grid-cols-12">
+ <VideoPlayer />
+ <Sidebar contentList={mockContentList} />
+ </div>
+ <div className="mx-auto max-w-5xl">
+ <ContentList contentList={mockContentList} />
+ </div>
+ </div>
+ );
+};
+
+const VideoPlayer = () => (
+ <div className="col-span-9">
+ <div className="mx-auto w-full max-w-7xl bg-black">
+ <iframe
+ className="aspect-video w-full"
+ src="https://www.youtube.com/embed/oKKG-CpDjrI"
+ title="YouTube video"
+ ></iframe>
+ </div>
+ </div>
+);
+
+interface SidebarProps {
+ contentList: typeof mockContentList;
+}
+
+const Sidebar = ({ contentList }: SidebarProps) => (
+ <div className="col-span-3 flex w-full flex-col overflow-auto">
+ <ul className="divide-y divide-gray-700">
+ {contentList && contentList.length > 0 ? (
+ contentList.map((item, index) => (
+ <SidebarItem key={index} item={item} />
+ ))
+ ) : (
+ <li className="text-center text-gray-500">No content available</li>
+ )}
+ </ul>
+ </div>
+);
+
+interface SidebarItemProps {
+ item: (typeof mockContentList)[0];
+}
+
+const SidebarItem = ({ item }: SidebarItemProps) => (
+ <li className="flex flex-row items-center justify-between px-2 py-2">
+ <div className="flex flex-row items-center">
+ <SquarePlay
+ className="mr-4 h-5 w-5 text-white group-hover:text-white"
+ aria-hidden="true"
+ />
+ <p>{item.title}</p>
+ </div>
+ <CircleCheck
+ className={`h-6 w-6 ${
+ item.watched ? "mr-2 h-5 w-5 text-pink-600" : "mr-2 h-5 w-5 text-white"
+ }`}
+ aria-hidden="true"
+ />
+ </li>
+);
+
+interface ContentListProps {
+ contentList: typeof mockContentList;
+}
+
+const ContentList = ({ contentList }: ContentListProps) => {
+ return (
+ <>
+ {contentList.map(
+ ({
+ id,
+ title,
+ longDescription,
+ description,
+ publishedDate,
+ author,
+ imageLink,
+ }) => (
+ <div key={id} className="mx-auto w-full max-w-7xl py-8">
+ <h2 className="text-3xl font-extrabold tracking-tight text-neutral-800 dark:text-white">
+ {title}
+ </h2>
+ <li key={author} className="flex justify-between gap-x-6 py-5">
+ <div className="flex min-w-0 gap-x-4">
+ <img
+ alt=""
+ src={imageLink}
+ className="h-12 w-12 flex-none rounded-full bg-gray-50"
+ />
+ <div className="min-w-0 flex-auto">
+ <p className="text-sm font-semibold leading-6 text-neutral-800 dark:text-white">
+ {author}
+ </p>
+ <p className="mt-1 truncate text-xs leading-5 text-gray-500">
+ {publishedDate}
+ </p>
+ </div>
+ </div>
+ </li>
+ <div>{description}</div>
+ <div>{longDescription}</div>
+ </div>
+ ),
+ )}
+ </>
+ );
+};
+
+export default Content;

app/(app)/courses/[slug]/[id]/page.tsx

@@ -0,0 +1,13 @@
+import { getServerAuthSession } from "@/server/auth";
+import Content from "./_client";
+
+export const metadata = {
+ title: "Video Course",
+};
+
+export default async function Page() {
+ // Example of grabbing session in case it is needed
+ const session = await getServerAuthSession();
+
+ return <Content session={session} />;
+}

app/(app)/courses/mock.ts

@@ -0,0 +1,130 @@
+// Mock video source (this would typically be a path to a video file)
+const mockVideoSrc = "https://youtu.be/Ln4KSN0rchI?t=12";
+
+// Mock content list
+const mockContentList = [
+ {
+ id: 1,
+ title: "Introduction to React",
+ longDescription:
+ "In this video, we will explore the fundamentals of React, including its component-based architecture, virtual DOM, and how to get started with your first React application. This tutorial guides you through the installation and configuration of essential tools like Node.js, npm, and create-react-app to set up your React development environment.",
+ description: "Learn the basics of React and its core concepts",
+ watched: false,
+ publishedDate: "2023-01-15",
+ author: "John Doe",
+ imageLink: "https://example.com/images/react-introduction.jpg",
+ },
+ {
+ id: 2,
+ title: "Setting Up Your Development Environment",
+ longDescription:
+ "This tutorial guides you through the installation and configuration of essential tools like Node.js, npm, and create-react-app to set up your React development environment.",
+ description:
+ "Install and configure the necessary tools for React development",
+ watched: true,
+ publishedDate: "2023-01-22",
+ author: "Jane Smith",
+ },
+ {
+ id: 3,
+ title: "Components and Props",
+ longDescription:
+ "Dive deep into React's core concepts of components and props. Learn how to create reusable components and pass data between them using props.",
+ description: "Understand the building blocks of React applications",
+ watched: true,
+ publishedDate: "2023-01-29",
+ author: "John Doe",
+ },
+ {
+ id: 4,
+ title: "State and Lifecycle",
+ longDescription:
+ "Explore how to manage component state and lifecycle methods to build dynamic and interactive applications with React.",
+ description: "Manage component state and lifecycle methods",
+ watched: true,
+ publishedDate: "2023-02-05",
+ author: "Jane Smith",
+ },
+ {
+ id: 5,
+ title: "Handling Events",
+ longDescription:
+ "Learn how to handle user interactions in React, including events like clicks, form submissions, and more.",
+ description: "Learn how to handle user interactions in React",
+ watched: true,
+ publishedDate: "2023-02-12",
+ author: "John Doe",
+ },
+ {
+ id: 6,
+ title: "Conditional Rendering",
+ longDescription:
+ "Discover how to display different UI elements based on specific conditions in your React applications.",
+ description: "Display different UI based on conditions",
+ watched: false,
+ publishedDate: "2023-02-19",
+ author: "Jane Smith",
+ },
+ {
+ id: 7,
+ title: "Lists and Keys",
+ longDescription:
+ "Learn the best practices for rendering lists of components in React and how to efficiently manage them with unique keys.",
+ description: "Render multiple components efficiently",
+ watched: false,
+ publishedDate: "2023-02-26",
+ author: "John Doe",
+ },
+ {
+ id: 8,
+ title: "Forms in React",
+ longDescription:
+ "This video covers how to create and manage forms in React applications, including controlled and uncontrolled components.",
+ description: "Create and handle form inputs in React applications",
+ watched: false,
+ publishedDate: "2023-03-05",
+ author: "Jane Smith",
+ },
+ {
+ id: 9,
+ title: "Hooks: useState and useEffect",
+ longDescription:
+ "An introduction to React Hooks, focusing on useState and useEffect to manage state and side effects in functional components.",
+ description: "Understand and use basic React Hooks",
+ watched: false,
+ publishedDate: "2023-03-12",
+ author: "John Doe",
+ },
+ {
+ id: 10,
+ title: "Custom Hooks",
+ longDescription:
+ "Learn how to create custom hooks in React to encapsulate and reuse logic across components.",
+ description: "Create reusable logic with custom Hooks",
+ watched: false,
+ publishedDate: "2023-03-19",
+ author: "Jane Smith",
+ },
+ {
+ id: 11,
+ title: "Context API",
+ longDescription:
+ "Explore the Context API to manage global state in your React applications without the need for prop drilling.",
+ description: "Manage global state in your React application",
+ watched: false,
+ publishedDate: "2023-03-26",
+ author: "John Doe",
+ },
+ {
+ id: 12,
+ title: "React Router",
+ longDescription:
+ "Learn how to implement navigation in your single-page applications using React Router, including dynamic routing and nested routes.",
+ description: "Implement navigation in your single-page application",
+ watched: false,
+ publishedDate: "2023-04-02",
+ author: "Jane Smith",
+ },
+];
+
+export { mockVideoSrc, mockContentList };

utils/flags.ts

@@ -2,6 +2,7 @@ import { posthog } from "posthog-js";
 
 export const FEATURE_FLAGS = {
  FEATURE_FLAG_TEST: "feature-flag-test",
+ COURSE_VIDEO: "course-video",
  JOBS: "jobs",
  // Add more feature flags as needed
 } as const;

app/(app)/courses/[slug]/[id]/_client.tsx

@@ -0,0 +1,131 @@
+"use client";
+import { FEATURE_FLAGS, isFlagEnabled } from "@/utils/flags";
+import { CircleCheck, SquarePlay } from "lucide-react";
+import { type Session } from "next-auth";
+import { notFound } from "next/navigation";
+import { mockContentList } from "../../mock";
+
+interface ContentProps {
+ session: Session | null;
+}
+
+const Content = ({ session }: ContentProps) => {
+ const flagEnabled = isFlagEnabled(FEATURE_FLAGS.COURSE_VIDEO);
+
+ if (!flagEnabled) {
+ notFound();
+ }
+
+ return (
+ <div className="overflow-auto">
+ <div className="w-full divide-x divide-gray-700 lg:grid lg:grid-cols-12">
+ <VideoPlayer />
+ <Sidebar contentList={mockContentList} />
+ </div>
+ <div className="mx-auto max-w-5xl">
+ <ContentList contentList={mockContentList} />
+ </div>
+ </div>
+ );
+};
+
+const VideoPlayer = () => (
+ <div className="col-span-9">
+ <div className="mx-auto w-full max-w-7xl bg-black">
+ <iframe
+ className="aspect-video w-full"
+ src="https://www.youtube.com/embed/oKKG-CpDjrI"
+ title="YouTube video"
+ ></iframe>
+ </div>
+ </div>
+);
+
+interface SidebarProps {
+ contentList: typeof mockContentList;
+}
+
+const Sidebar = ({ contentList }: SidebarProps) => (
+ <div className="col-span-3 flex w-full flex-col overflow-auto">
+ <ul className="divide-y divide-gray-700">
+ {contentList && contentList.length > 0 ? (
+ contentList.map((item, index) => (
+ <SidebarItem key={index} item={item} />
+ ))
+ ) : (
+ <li className="text-center text-gray-500">No content available</li>
+ )}
+ </ul>
+ </div>
+);
+
+interface SidebarItemProps {
+ item: (typeof mockContentList)[0];
+}
+
+const SidebarItem = ({ item }: SidebarItemProps) => (
+ <li className="flex flex-row items-center justify-between px-2 py-2">
+ <div className="flex flex-row items-center">
+ <SquarePlay
+ className="mr-4 h-5 w-5 text-white group-hover:text-white"
+ aria-hidden="true"
+ />
+ <p>{item.title}</p>
+ </div>
+ <CircleCheck
+ className={`h-6 w-6 ${
+ item.watched ? "mr-2 h-5 w-5 text-pink-600" : "mr-2 h-5 w-5 text-white"
+ }`}
+ aria-hidden="true"
+ />
+ </li>
+);
+
+interface ContentListProps {
+ contentList: typeof mockContentList;
+}
+
+const ContentList = ({ contentList }: ContentListProps) => {
+ return (
+ <>
+ {contentList.map(
+ ({
+ id,
+ title,
+ longDescription,
+ description,
+ publishedDate,
+ author,
+ imageLink,
+ }) => (
+ <div key={id} className="mx-auto w-full max-w-7xl py-8">
+ <h2 className="text-3xl font-extrabold tracking-tight text-neutral-800 dark:text-white">
+ {title}
+ </h2>
+ <li key={author} className="flex justify-between gap-x-6 py-5">
+ <div className="flex min-w-0 gap-x-4">
+ <img
+ alt=""
+ src={imageLink}
+ className="h-12 w-12 flex-none rounded-full bg-gray-50"
+ />
+ <div className="min-w-0 flex-auto">
+ <p className="text-sm font-semibold leading-6 text-neutral-800 dark:text-white">
+ {author}
+ </p>
+ <p className="mt-1 truncate text-xs leading-5 text-gray-500">
+ {publishedDate}
+ </p>
+ </div>
+ </div>
+ </li>
+ <div>{description}</div>
+ <div>{longDescription}</div>
+ </div>
+ ),
+ )}
+ </>
+ );
+};
+
+export default Content;

app/(app)/courses/[slug]/[id]/page.tsx

@@ -0,0 +1,13 @@
+import { getServerAuthSession } from "@/server/auth";
+import Content from "./_client";
+
+export const metadata = {
+ title: "Video Course",
+};
+
+export default async function Page() {
+ // Example of grabbing session in case it is needed
+ const session = await getServerAuthSession();
+
+ return <Content session={session} />;
+}

app/(app)/courses/mock.ts

@@ -0,0 +1,130 @@
+// Mock video source (this would typically be a path to a video file)
+const mockVideoSrc = "https://youtu.be/Ln4KSN0rchI?t=12";
+
+// Mock content list
+const mockContentList = [
+ {
+ id: 1,
+ title: "Introduction to React",
+ longDescription:
+ "In this video, we will explore the fundamentals of React, including its component-based architecture, virtual DOM, and how to get started with your first React application. This tutorial guides you through the installation and configuration of essential tools like Node.js, npm, and create-react-app to set up your React development environment.",
+ description: "Learn the basics of React and its core concepts",
+ watched: false,
+ publishedDate: "2023-01-15",
+ author: "John Doe",
+ imageLink: "https://example.com/images/react-introduction.jpg",
+ },
+ {
+ id: 2,
+ title: "Setting Up Your Development Environment",
+ longDescription:
+ "This tutorial guides you through the installation and configuration of essential tools like Node.js, npm, and create-react-app to set up your React development environment.",
+ description:
+ "Install and configure the necessary tools for React development",
+ watched: true,
+ publishedDate: "2023-01-22",
+ author: "Jane Smith",
+ },
+ {
+ id: 3,
+ title: "Components and Props",
+ longDescription:
+ "Dive deep into React's core concepts of components and props. Learn how to create reusable components and pass data between them using props.",
+ description: "Understand the building blocks of React applications",
+ watched: true,
+ publishedDate: "2023-01-29",
+ author: "John Doe",
+ },
+ {
+ id: 4,
+ title: "State and Lifecycle",
+ longDescription:
+ "Explore how to manage component state and lifecycle methods to build dynamic and interactive applications with React.",
+ description: "Manage component state and lifecycle methods",
+ watched: true,
+ publishedDate: "2023-02-05",
+ author: "Jane Smith",
+ },
+ {
+ id: 5,
+ title: "Handling Events",
+ longDescription:
+ "Learn how to handle user interactions in React, including events like clicks, form submissions, and more.",
+ description: "Learn how to handle user interactions in React",
+ watched: true,
+ publishedDate: "2023-02-12",
+ author: "John Doe",
+ },
+ {
+ id: 6,
+ title: "Conditional Rendering",
+ longDescription:
+ "Discover how to display different UI elements based on specific conditions in your React applications.",
+ description: "Display different UI based on conditions",
+ watched: false,
+ publishedDate: "2023-02-19",
+ author: "Jane Smith",
+ },
+ {
+ id: 7,
+ title: "Lists and Keys",
+ longDescription:
+ "Learn the best practices for rendering lists of components in React and how to efficiently manage them with unique keys.",
+ description: "Render multiple components efficiently",
+ watched: false,
+ publishedDate: "2023-02-26",
+ author: "John Doe",
+ },
+ {
+ id: 8,
+ title: "Forms in React",
+ longDescription:
+ "This video covers how to create and manage forms in React applications, including controlled and uncontrolled components.",
+ description: "Create and handle form inputs in React applications",
+ watched: false,
+ publishedDate: "2023-03-05",
+ author: "Jane Smith",
+ },
+ {
+ id: 9,
+ title: "Hooks: useState and useEffect",
+ longDescription:
+ "An introduction to React Hooks, focusing on useState and useEffect to manage state and side effects in functional components.",
+ description: "Understand and use basic React Hooks",
+ watched: false,
+ publishedDate: "2023-03-12",
+ author: "John Doe",
+ },
+ {
+ id: 10,
+ title: "Custom Hooks",
+ longDescription:
+ "Learn how to create custom hooks in React to encapsulate and reuse logic across components.",
+ description: "Create reusable logic with custom Hooks",
+ watched: false,
+ publishedDate: "2023-03-19",
+ author: "Jane Smith",
+ },
+ {
+ id: 11,
+ title: "Context API",
+ longDescription:
+ "Explore the Context API to manage global state in your React applications without the need for prop drilling.",
+ description: "Manage global state in your React application",
+ watched: false,
+ publishedDate: "2023-03-26",
+ author: "John Doe",
+ },
+ {
+ id: 12,
+ title: "React Router",
+ longDescription:
+ "Learn how to implement navigation in your single-page applications using React Router, including dynamic routing and nested routes.",
+ description: "Implement navigation in your single-page application",
+ watched: false,
+ publishedDate: "2023-04-02",
+ author: "Jane Smith",
+ },
+];
+
+export { mockVideoSrc, mockContentList };

utils/flags.ts

@@ -2,6 +2,7 @@ import { posthog } from "posthog-js";
 
 export const FEATURE_FLAGS = {
  FEATURE_FLAG_TEST: "feature-flag-test",
+ COURSE_VIDEO: "course-video",
  JOBS: "jobs",
  // Add more feature flags as needed
 } as const;

app/(app)/courses/[slug]/[id]/_client.tsx

@@ -0,0 +1,131 @@
+"use client";
+import { FEATURE_FLAGS, isFlagEnabled } from "@/utils/flags";
+import { CircleCheck, SquarePlay } from "lucide-react";
+import { type Session } from "next-auth";
+import { notFound } from "next/navigation";
+import { mockContentList } from "../../mock";
+
+interface ContentProps {
+ session: Session | null;
+}
+
+const Content = ({ session }: ContentProps) => {
+ const flagEnabled = isFlagEnabled(FEATURE_FLAGS.COURSE_VIDEO);
+
+ if (!flagEnabled) {
+ notFound();
+ }
+
+ return (
+ <div className="overflow-auto">
+ <div className="w-full divide-x divide-gray-700 lg:grid lg:grid-cols-12">
+ <VideoPlayer />
+ <Sidebar contentList={mockContentList} />
+ </div>
+ <div className="mx-auto max-w-5xl">
+ <ContentList contentList={mockContentList} />
+ </div>
+ </div>
+ );
+};
+
+const VideoPlayer = () => (
+ <div className="col-span-9">
+ <div className="mx-auto w-full max-w-7xl bg-black">
+ <iframe
+ className="aspect-video w-full"
+ src="https://www.youtube.com/embed/oKKG-CpDjrI"
+ title="YouTube video"
+ ></iframe>
+ </div>
+ </div>
+);
+
+interface SidebarProps {
+ contentList: typeof mockContentList;
+}
+
+const Sidebar = ({ contentList }: SidebarProps) => (
+ <div className="col-span-3 flex w-full flex-col overflow-auto">
+ <ul className="divide-y divide-gray-700">
+ {contentList && contentList.length > 0 ? (
+ contentList.map((item, index) => (
+ <SidebarItem key={index} item={item} />
+ ))
+ ) : (
+ <li className="text-center text-gray-500">No content available</li>
+ )}
+ </ul>
+ </div>
+);
+
+interface SidebarItemProps {
+ item: (typeof mockContentList)[0];
+}
+
+const SidebarItem = ({ item }: SidebarItemProps) => (
+ <li className="flex flex-row items-center justify-between px-2 py-2">
+ <div className="flex flex-row items-center">
+ <SquarePlay
+ className="mr-4 h-5 w-5 text-white group-hover:text-white"
+ aria-hidden="true"
+ />
+ <p>{item.title}</p>
+ </div>
+ <CircleCheck
+ className={`h-6 w-6 ${
+ item.watched ? "mr-2 h-5 w-5 text-pink-600" : "mr-2 h-5 w-5 text-white"
+ }`}
+ aria-hidden="true"
+ />
+ </li>
+);
+
+interface ContentListProps {
+ contentList: typeof mockContentList;
+}
+
+const ContentList = ({ contentList }: ContentListProps) => {
+ return (
+ <>
+ {contentList.map(
+ ({
+ id,
+ title,
+ longDescription,
+ description,
+ publishedDate,
+ author,
+ imageLink,
+ }) => (
+ <div key={id} className="mx-auto w-full max-w-7xl py-8">
+ <h2 className="text-3xl font-extrabold tracking-tight text-neutral-800 dark:text-white">
+ {title}
+ </h2>
+ <li key={author} className="flex justify-between gap-x-6 py-5">
+ <div className="flex min-w-0 gap-x-4">
+ <img
+ alt=""
+ src={imageLink}
+ className="h-12 w-12 flex-none rounded-full bg-gray-50"
+ />
+ <div className="min-w-0 flex-auto">
+ <p className="text-sm font-semibold leading-6 text-neutral-800 dark:text-white">
+ {author}
+ </p>
+ <p className="mt-1 truncate text-xs leading-5 text-gray-500">
+ {publishedDate}
+ </p>
+ </div>
+ </div>
+ </li>
+ <div>{description}</div>
+ <div>{longDescription}</div>
+ </div>
+ ),
+ )}
+ </>
+ );
+};
+
+export default Content;

app/(app)/courses/[slug]/[id]/page.tsx

@@ -0,0 +1,13 @@
+import { getServerAuthSession } from "@/server/auth";
+import Content from "./_client";
+
+export const metadata = {
+ title: "Video Course",
+};
+
+export default async function Page() {
+ // Example of grabbing session in case it is needed
+ const session = await getServerAuthSession();
+
+ return <Content session={session} />;
+}

app/(app)/courses/mock.ts

@@ -0,0 +1,130 @@
+// Mock video source (this would typically be a path to a video file)
+const mockVideoSrc = "https://youtu.be/Ln4KSN0rchI?t=12";
+
+// Mock content list
+const mockContentList = [
+ {
+ id: 1,
+ title: "Introduction to React",
+ longDescription:
+ "In this video, we will explore the fundamentals of React, including its component-based architecture, virtual DOM, and how to get started with your first React application. This tutorial guides you through the installation and configuration of essential tools like Node.js, npm, and create-react-app to set up your React development environment.",
+ description: "Learn the basics of React and its core concepts",
+ watched: false,
+ publishedDate: "2023-01-15",
+ author: "John Doe",
+ imageLink: "https://example.com/images/react-introduction.jpg",
+ },
+ {
+ id: 2,
+ title: "Setting Up Your Development Environment",
+ longDescription:
+ "This tutorial guides you through the installation and configuration of essential tools like Node.js, npm, and create-react-app to set up your React development environment.",
+ description:
+ "Install and configure the necessary tools for React development",
+ watched: true,
+ publishedDate: "2023-01-22",
+ author: "Jane Smith",
+ },
+ {
+ id: 3,
+ title: "Components and Props",
+ longDescription:
+ "Dive deep into React's core concepts of components and props. Learn how to create reusable components and pass data between them using props.",
+ description: "Understand the building blocks of React applications",
+ watched: true,
+ publishedDate: "2023-01-29",
+ author: "John Doe",
+ },
+ {
+ id: 4,
+ title: "State and Lifecycle",
+ longDescription:
+ "Explore how to manage component state and lifecycle methods to build dynamic and interactive applications with React.",
+ description: "Manage component state and lifecycle methods",
+ watched: true,
+ publishedDate: "2023-02-05",
+ author: "Jane Smith",
+ },
+ {
+ id: 5,
+ title: "Handling Events",
+ longDescription:
+ "Learn how to handle user interactions in React, including events like clicks, form submissions, and more.",
+ description: "Learn how to handle user interactions in React",
+ watched: true,
+ publishedDate: "2023-02-12",
+ author: "John Doe",
+ },
+ {
+ id: 6,
+ title: "Conditional Rendering",
+ longDescription:
+ "Discover how to display different UI elements based on specific conditions in your React applications.",
+ description: "Display different UI based on conditions",
+ watched: false,
+ publishedDate: "2023-02-19",
+ author: "Jane Smith",
+ },
+ {
+ id: 7,
+ title: "Lists and Keys",
+ longDescription:
+ "Learn the best practices for rendering lists of components in React and how to efficiently manage them with unique keys.",
+ description: "Render multiple components efficiently",
+ watched: false,
+ publishedDate: "2023-02-26",
+ author: "John Doe",
+ },
+ {
+ id: 8,
+ title: "Forms in React",
+ longDescription:
+ "This video covers how to create and manage forms in React applications, including controlled and uncontrolled components.",
+ description: "Create and handle form inputs in React applications",
+ watched: false,
+ publishedDate: "2023-03-05",
+ author: "Jane Smith",
+ },
+ {
+ id: 9,
+ title: "Hooks: useState and useEffect",
+ longDescription:
+ "An introduction to React Hooks, focusing on useState and useEffect to manage state and side effects in functional components.",
+ description: "Understand and use basic React Hooks",
+ watched: false,
+ publishedDate: "2023-03-12",
+ author: "John Doe",
+ },
+ {
+ id: 10,
+ title: "Custom Hooks",
+ longDescription:
+ "Learn how to create custom hooks in React to encapsulate and reuse logic across components.",
+ description: "Create reusable logic with custom Hooks",
+ watched: false,
+ publishedDate: "2023-03-19",
+ author: "Jane Smith",
+ },
+ {
+ id: 11,
+ title: "Context API",
+ longDescription:
+ "Explore the Context API to manage global state in your React applications without the need for prop drilling.",
+ description: "Manage global state in your React application",
+ watched: false,
+ publishedDate: "2023-03-26",
+ author: "John Doe",
+ },
+ {
+ id: 12,
+ title: "React Router",
+ longDescription:
+ "Learn how to implement navigation in your single-page applications using React Router, including dynamic routing and nested routes.",
+ description: "Implement navigation in your single-page application",
+ watched: false,
+ publishedDate: "2023-04-02",
+ author: "Jane Smith",
+ },
+];
+
+export { mockVideoSrc, mockContentList };

utils/flags.ts

@@ -2,6 +2,7 @@ import { posthog } from "posthog-js";
 
 export const FEATURE_FLAGS = {
  FEATURE_FLAG_TEST: "feature-flag-test",
+ COURSE_VIDEO: "course-video",
  JOBS: "jobs",
  // Add more feature flags as needed
 } as const;

app/(app)/courses/[slug]/[id]/_client.tsx

@@ -0,0 +1,131 @@
+"use client";
+import { FEATURE_FLAGS, isFlagEnabled } from "@/utils/flags";
+import { CircleCheck, SquarePlay } from "lucide-react";
+import { type Session } from "next-auth";
+import { notFound } from "next/navigation";
+import { mockContentList } from "../../mock";
+
+interface ContentProps {
+ session: Session | null;
+}
+
+const Content = ({ session }: ContentProps) => {
+ const flagEnabled = isFlagEnabled(FEATURE_FLAGS.COURSE_VIDEO);
+
+ if (!flagEnabled) {
+ notFound();
+ }
+
+ return (
+ <div className="overflow-auto">
+ <div className="w-full divide-x divide-gray-700 lg:grid lg:grid-cols-12">
+ <VideoPlayer />
+ <Sidebar contentList={mockContentList} />
+ </div>
+ <div className="mx-auto max-w-5xl">
+ <ContentList contentList={mockContentList} />
+ </div>
+ </div>
+ );
+};
+
+const VideoPlayer = () => (
+ <div className="col-span-9">
+ <div className="mx-auto w-full max-w-7xl bg-black">
+ <iframe
+ className="aspect-video w-full"
+ src="https://www.youtube.com/embed/oKKG-CpDjrI"
+ title="YouTube video"
+ ></iframe>
+ </div>
+ </div>
+);
+
+interface SidebarProps {
+ contentList: typeof mockContentList;
+}
+
+const Sidebar = ({ contentList }: SidebarProps) => (
+ <div className="col-span-3 flex w-full flex-col overflow-auto">
+ <ul className="divide-y divide-gray-700">
+ {contentList && contentList.length > 0 ? (
+ contentList.map((item, index) => (
+ <SidebarItem key={index} item={item} />
+ ))
+ ) : (
+ <li className="text-center text-gray-500">No content available</li>
+ )}
+ </ul>
+ </div>
+);
+
+interface SidebarItemProps {
+ item: (typeof mockContentList)[0];
+}
+
+const SidebarItem = ({ item }: SidebarItemProps) => (
+ <li className="flex flex-row items-center justify-between px-2 py-2">
+ <div className="flex flex-row items-center">
+ <SquarePlay
+ className="mr-4 h-5 w-5 text-white group-hover:text-white"
+ aria-hidden="true"
+ />
+ <p>{item.title}</p>
+ </div>
+ <CircleCheck
+ className={`h-6 w-6 ${
+ item.watched ? "mr-2 h-5 w-5 text-pink-600" : "mr-2 h-5 w-5 text-white"
+ }`}
+ aria-hidden="true"
+ />
+ </li>
+);
+
+interface ContentListProps {
+ contentList: typeof mockContentList;
+}
+
+const ContentList = ({ contentList }: ContentListProps) => {
+ return (
+ <>
+ {contentList.map(
+ ({
+ id,
+ title,
+ longDescription,
+ description,
+ publishedDate,
+ author,
+ imageLink,
+ }) => (
+ <div key={id} className="mx-auto w-full max-w-7xl py-8">
+ <h2 className="text-3xl font-extrabold tracking-tight text-neutral-800 dark:text-white">
+ {title}
+ </h2>
+ <li key={author} className="flex justify-between gap-x-6 py-5">
+ <div className="flex min-w-0 gap-x-4">
+ <img
+ alt=""
+ src={imageLink}
+ className="h-12 w-12 flex-none rounded-full bg-gray-50"
+ />
+ <div className="min-w-0 flex-auto">
+ <p className="text-sm font-semibold leading-6 text-neutral-800 dark:text-white">
+ {author}
+ </p>
+ <p className="mt-1 truncate text-xs leading-5 text-gray-500">
+ {publishedDate}
+ </p>
+ </div>
+ </div>
+ </li>
+ <div>{description}</div>
+ <div>{longDescription}</div>
+ </div>
+ ),
+ )}
+ </>
+ );
+};
+
+export default Content;

app/(app)/courses/[slug]/[id]/page.tsx

@@ -0,0 +1,13 @@
+import { getServerAuthSession } from "@/server/auth";
+import Content from "./_client";
+
+export const metadata = {
+ title: "Video Course",
+};
+
+export default async function Page() {
+ // Example of grabbing session in case it is needed
+ const session = await getServerAuthSession();
+
+ return <Content session={session} />;
+}

app/(app)/courses/mock.ts

@@ -0,0 +1,130 @@
+// Mock video source (this would typically be a path to a video file)
+const mockVideoSrc = "https://youtu.be/Ln4KSN0rchI?t=12";
+
+// Mock content list
+const mockContentList = [
+ {
+ id: 1,
+ title: "Introduction to React",
+ longDescription:
+ "In this video, we will explore the fundamentals of React, including its component-based architecture, virtual DOM, and how to get started with your first React application. This tutorial guides you through the installation and configuration of essential tools like Node.js, npm, and create-react-app to set up your React development environment.",
+ description: "Learn the basics of React and its core concepts",
+ watched: false,
+ publishedDate: "2023-01-15",
+ author: "John Doe",
+ imageLink: "https://example.com/images/react-introduction.jpg",
+ },
+ {
+ id: 2,
+ title: "Setting Up Your Development Environment",
+ longDescription:
+ "This tutorial guides you through the installation and configuration of essential tools like Node.js, npm, and create-react-app to set up your React development environment.",
+ description:
+ "Install and configure the necessary tools for React development",
+ watched: true,
+ publishedDate: "2023-01-22",
+ author: "Jane Smith",
+ },
+ {
+ id: 3,
+ title: "Components and Props",
+ longDescription:
+ "Dive deep into React's core concepts of components and props. Learn how to create reusable components and pass data between them using props.",
+ description: "Understand the building blocks of React applications",
+ watched: true,
+ publishedDate: "2023-01-29",
+ author: "John Doe",
+ },
+ {
+ id: 4,
+ title: "State and Lifecycle",
+ longDescription:
+ "Explore how to manage component state and lifecycle methods to build dynamic and interactive applications with React.",
+ description: "Manage component state and lifecycle methods",
+ watched: true,
+ publishedDate: "2023-02-05",
+ author: "Jane Smith",
+ },
+ {
+ id: 5,
+ title: "Handling Events",
+ longDescription:
+ "Learn how to handle user interactions in React, including events like clicks, form submissions, and more.",
+ description: "Learn how to handle user interactions in React",
+ watched: true,
+ publishedDate: "2023-02-12",
+ author: "John Doe",
+ },
+ {
+ id: 6,
+ title: "Conditional Rendering",
+ longDescription:
+ "Discover how to display different UI elements based on specific conditions in your React applications.",
+ description: "Display different UI based on conditions",
+ watched: false,
+ publishedDate: "2023-02-19",
+ author: "Jane Smith",
+ },
+ {
+ id: 7,
+ title: "Lists and Keys",
+ longDescription:
+ "Learn the best practices for rendering lists of components in React and how to efficiently manage them with unique keys.",
+ description: "Render multiple components efficiently",
+ watched: false,
+ publishedDate: "2023-02-26",
+ author: "John Doe",
+ },
+ {
+ id: 8,
+ title: "Forms in React",
+ longDescription:
+ "This video covers how to create and manage forms in React applications, including controlled and uncontrolled components.",
+ description: "Create and handle form inputs in React applications",
+ watched: false,
+ publishedDate: "2023-03-05",
+ author: "Jane Smith",
+ },
+ {
+ id: 9,
+ title: "Hooks: useState and useEffect",
+ longDescription:
+ "An introduction to React Hooks, focusing on useState and useEffect to manage state and side effects in functional components.",
+ description: "Understand and use basic React Hooks",
+ watched: false,
+ publishedDate: "2023-03-12",
+ author: "John Doe",
+ },
+ {
+ id: 10,
+ title: "Custom Hooks",
+ longDescription:
+ "Learn how to create custom hooks in React to encapsulate and reuse logic across components.",
+ description: "Create reusable logic with custom Hooks",
+ watched: false,
+ publishedDate: "2023-03-19",
+ author: "Jane Smith",
+ },
+ {
+ id: 11,
+ title: "Context API",
+ longDescription:
+ "Explore the Context API to manage global state in your React applications without the need for prop drilling.",
+ description: "Manage global state in your React application",
+ watched: false,
+ publishedDate: "2023-03-26",
+ author: "John Doe",
+ },
+ {
+ id: 12,
+ title: "React Router",
+ longDescription:
+ "Learn how to implement navigation in your single-page applications using React Router, including dynamic routing and nested routes.",
+ description: "Implement navigation in your single-page application",
+ watched: false,
+ publishedDate: "2023-04-02",
+ author: "Jane Smith",
+ },
+];
+
+export { mockVideoSrc, mockContentList };

utils/flags.ts

@@ -2,6 +2,7 @@ import { posthog } from "posthog-js";
 
 export const FEATURE_FLAGS = {
  FEATURE_FLAG_TEST: "feature-flag-test",
+ COURSE_VIDEO: "course-video",
  JOBS: "jobs",
  // Add more feature flags as needed
 } as const;

app/(app)/courses/[slug]/[id]/_client.tsx

@@ -0,0 +1,131 @@
+"use client";
+import { FEATURE_FLAGS, isFlagEnabled } from "@/utils/flags";
+import { CircleCheck, SquarePlay } from "lucide-react";
+import { type Session } from "next-auth";
+import { notFound } from "next/navigation";
+import { mockContentList } from "../../mock";
+
+interface ContentProps {
+ session: Session | null;
+}
+
+const Content = ({ session }: ContentProps) => {
+ const flagEnabled = isFlagEnabled(FEATURE_FLAGS.COURSE_VIDEO);
+
+ if (!flagEnabled) {
+ notFound();
+ }
+
+ return (
+ <div className="overflow-auto">
+ <div className="w-full divide-x divide-gray-700 lg:grid lg:grid-cols-12">
+ <VideoPlayer />
+ <Sidebar contentList={mockContentList} />
+ </div>
+ <div className="mx-auto max-w-5xl">
+ <ContentList contentList={mockContentList} />
+ </div>
+ </div>
+ );
+};
+
+const VideoPlayer = () => (
+ <div className="col-span-9">
+ <div className="mx-auto w-full max-w-7xl bg-black">
+ <iframe
+ className="aspect-video w-full"
+ src="https://www.youtube.com/embed/oKKG-CpDjrI"
+ title="YouTube video"
+ ></iframe>
+ </div>
+ </div>
+);
+
+interface SidebarProps {
+ contentList: typeof mockContentList;
+}
+
+const Sidebar = ({ contentList }: SidebarProps) => (
+ <div className="col-span-3 flex w-full flex-col overflow-auto">
+ <ul className="divide-y divide-gray-700">
+ {contentList && contentList.length > 0 ? (
+ contentList.map((item, index) => (
+ <SidebarItem key={index} item={item} />
+ ))
+ ) : (
+ <li className="text-center text-gray-500">No content available</li>
+ )}
+ </ul>
+ </div>
+);
+
+interface SidebarItemProps {
+ item: (typeof mockContentList)[0];
+}
+
+const SidebarItem = ({ item }: SidebarItemProps) => (
+ <li className="flex flex-row items-center justify-between px-2 py-2">
+ <div className="flex flex-row items-center">
+ <SquarePlay
+ className="mr-4 h-5 w-5 text-white group-hover:text-white"
+ aria-hidden="true"
+ />
+ <p>{item.title}</p>
+ </div>
+ <CircleCheck
+ className={`h-6 w-6 ${
+ item.watched ? "mr-2 h-5 w-5 text-pink-600" : "mr-2 h-5 w-5 text-white"
+ }`}
+ aria-hidden="true"
+ />
+ </li>
+);
+
+interface ContentListProps {
+ contentList: typeof mockContentList;
+}
+
+const ContentList = ({ contentList }: ContentListProps) => {
+ return (
+ <>
+ {contentList.map(
+ ({
+ id,
+ title,
+ longDescription,
+ description,
+ publishedDate,
+ author,
+ imageLink,
+ }) => (
+ <div key={id} className="mx-auto w-full max-w-7xl py-8">
+ <h2 className="text-3xl font-extrabold tracking-tight text-neutral-800 dark:text-white">
+ {title}
+ </h2>
+ <li key={author} className="flex justify-between gap-x-6 py-5">
+ <div className="flex min-w-0 gap-x-4">
+ <img
+ alt=""
+ src={imageLink}
+ className="h-12 w-12 flex-none rounded-full bg-gray-50"
+ />
+ <div className="min-w-0 flex-auto">
+ <p className="text-sm font-semibold leading-6 text-neutral-800 dark:text-white">
+ {author}
+ </p>
+ <p className="mt-1 truncate text-xs leading-5 text-gray-500">
+ {publishedDate}
+ </p>
+ </div>
+ </div>
+ </li>
+ <div>{description}</div>
+ <div>{longDescription}</div>
+ </div>
+ ),
+ )}
+ </>
+ );
+};
+
+export default Content;

app/(app)/courses/[slug]/[id]/page.tsx

@@ -0,0 +1,13 @@
+import { getServerAuthSession } from "@/server/auth";
+import Content from "./_client";
+
+export const metadata = {
+ title: "Video Course",
+};
+
+export default async function Page() {
+ // Example of grabbing session in case it is needed
+ const session = await getServerAuthSession();
+
+ return <Content session={session} />;
+}

app/(app)/courses/mock.ts

@@ -0,0 +1,130 @@
+// Mock video source (this would typically be a path to a video file)
+const mockVideoSrc = "https://youtu.be/Ln4KSN0rchI?t=12";
+
+// Mock content list
+const mockContentList = [
+ {
+ id: 1,
+ title: "Introduction to React",
+ longDescription:
+ "In this video, we will explore the fundamentals of React, including its component-based architecture, virtual DOM, and how to get started with your first React application. This tutorial guides you through the installation and configuration of essential tools like Node.js, npm, and create-react-app to set up your React development environment.",
+ description: "Learn the basics of React and its core concepts",
+ watched: false,
+ publishedDate: "2023-01-15",
+ author: "John Doe",
+ imageLink: "https://example.com/images/react-introduction.jpg",
+ },
+ {
+ id: 2,
+ title: "Setting Up Your Development Environment",
+ longDescription:
+ "This tutorial guides you through the installation and configuration of essential tools like Node.js, npm, and create-react-app to set up your React development environment.",
+ description:
+ "Install and configure the necessary tools for React development",
+ watched: true,
+ publishedDate: "2023-01-22",
+ author: "Jane Smith",
+ },
+ {
+ id: 3,
+ title: "Components and Props",
+ longDescription:
+ "Dive deep into React's core concepts of components and props. Learn how to create reusable components and pass data between them using props.",
+ description: "Understand the building blocks of React applications",
+ watched: true,
+ publishedDate: "2023-01-29",
+ author: "John Doe",
+ },
+ {
+ id: 4,
+ title: "State and Lifecycle",
+ longDescription:
+ "Explore how to manage component state and lifecycle methods to build dynamic and interactive applications with React.",
+ description: "Manage component state and lifecycle methods",
+ watched: true,
+ publishedDate: "2023-02-05",
+ author: "Jane Smith",
+ },
+ {
+ id: 5,
+ title: "Handling Events",
+ longDescription:
+ "Learn how to handle user interactions in React, including events like clicks, form submissions, and more.",
+ description: "Learn how to handle user interactions in React",
+ watched: true,
+ publishedDate: "2023-02-12",
+ author: "John Doe",
+ },
+ {
+ id: 6,
+ title: "Conditional Rendering",
+ longDescription:
+ "Discover how to display different UI elements based on specific conditions in your React applications.",
+ description: "Display different UI based on conditions",
+ watched: false,
+ publishedDate: "2023-02-19",
+ author: "Jane Smith",
+ },
+ {
+ id: 7,
+ title: "Lists and Keys",
+ longDescription:
+ "Learn the best practices for rendering lists of components in React and how to efficiently manage them with unique keys.",
+ description: "Render multiple components efficiently",
+ watched: false,
+ publishedDate: "2023-02-26",
+ author: "John Doe",
+ },
+ {
+ id: 8,
+ title: "Forms in React",
+ longDescription:
+ "This video covers how to create and manage forms in React applications, including controlled and uncontrolled components.",
+ description: "Create and handle form inputs in React applications",
+ watched: false,
+ publishedDate: "2023-03-05",
+ author: "Jane Smith",
+ },
+ {
+ id: 9,
+ title: "Hooks: useState and useEffect",
+ longDescription:
+ "An introduction to React Hooks, focusing on useState and useEffect to manage state and side effects in functional components.",
+ description: "Understand and use basic React Hooks",
+ watched: false,
+ publishedDate: "2023-03-12",
+ author: "John Doe",
+ },
+ {
+ id: 10,
+ title: "Custom Hooks",
+ longDescription:
+ "Learn how to create custom hooks in React to encapsulate and reuse logic across components.",
+ description: "Create reusable logic with custom Hooks",
+ watched: false,
+ publishedDate: "2023-03-19",
+ author: "Jane Smith",
+ },
+ {
+ id: 11,
+ title: "Context API",
+ longDescription:
+ "Explore the Context API to manage global state in your React applications without the need for prop drilling.",
+ description: "Manage global state in your React application",
+ watched: false,
+ publishedDate: "2023-03-26",
+ author: "John Doe",
+ },
+ {
+ id: 12,
+ title: "React Router",
+ longDescription:
+ "Learn how to implement navigation in your single-page applications using React Router, including dynamic routing and nested routes.",
+ description: "Implement navigation in your single-page application",
+ watched: false,
+ publishedDate: "2023-04-02",
+ author: "Jane Smith",
+ },
+];
+
+export { mockVideoSrc, mockContentList };

utils/flags.ts

@@ -2,6 +2,7 @@ import { posthog } from "posthog-js";
 
 export const FEATURE_FLAGS = {
  FEATURE_FLAG_TEST: "feature-flag-test",
+ COURSE_VIDEO: "course-video",
  JOBS: "jobs",
  // Add more feature flags as needed
 } as const;