LMS Course Video Player

import React from 'react';
import { VideoPlayerScreen } from '@/components/ui/lms-course-video-player';

export default function Demo() {
  const modules = [
    {
      title: "Start the program",
      items: [
        { type: "video", title: "Welcome to the Google UX Design Certificate", duration: "5 min", active: true },
        { type: "reading", title: "Begin the Google UX Design Certificate", duration: "8 min" },
        { type: "video", title: "Michael: Get started in UX design", duration: "2 min" },
        { type: "video", title: "Introduction to Course 1: Foundations of User Experience Design", duration: "2 min" },
        { type: "reading", title: "Obtain the Google UX Design Certificate", duration: "4 min" },
        { type: "plugin", title: "Commit to completing the program", duration: "10 min" },
        { type: "reading", title: "Helpful resources and tips", duration: "4 min" },
        { type: "reading", title: "Get the latest updates from Google", duration: "4 min" },
        { type: "plugin", title: "Participant entry survey", duration: "10 min" }
      ]
    },
    {
      title: "Get to know user experience design",
      items: []
    },
    {
      title: "Explore jobs in user experience design",
      items: []
    }
  ];

  const breadcrumbs = [
    { label: "Foundations of User Experience (UX) Design", href: "#" },
    { label: "Module 1", href: "#" },
    { label: "Welcome to the Google UX Design Certificate", href: "#" }
  ];

  const transcriptContent = `Companies of all types and sizes rely on user experience designers to help make their technology easier and more enjoyable to use. The demand for user experience designers is so high that a lot of companies can't fill their job openings. Luckily, there are lots of people like you who are interested in starting a career in UX design...`;

  const videoSources = [
    {
      src: "http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4",
      type: "video/mp4",
      label: "360p",
      res: 360
    }
  ];

  return (
    <VideoPlayerScreen
      videoSources={videoSources}
      title="Welcome to the Google UX Design Certificate"
      breadcrumbs={breadcrumbs}
      modules={modules}
      transcriptContent={transcriptContent}
    />
  );
}