Video Tutorials

1'use client';
2
3import { useState } from 'react';
4import {
5  VideoPlayer,
6  VideoPlaylist,
7  VideoTranscript,
8  type VideoItem,
9  type TranscriptCue,
10} from '@/components/video';
11
12// Example video data
13const gettingStartedVideos: VideoItem[] = [
14  {
15    id: 'intro-to-platform',
16    title: 'Introduction to the Platform',
17    description: 'A comprehensive overview of the trading platform',
18    duration: 420, // 7 minutes
19    thumbnail: '/thumbnails/intro.jpg',
20    sources: [
21      { src: '/videos/intro.mp4', type: 'video/mp4' },
22      { src: '/videos/intro.webm', type: 'video/webm' },
23    ],
24    chapters: [
25      { id: 'ch1', title: 'Welcome', startTime: 0 },
26      { id: 'ch2', title: 'Dashboard Overview', startTime: 60 },
27      { id: 'ch3', title: 'Navigation', startTime: 180 },
28      { id: 'ch4', title: 'Key Features', startTime: 300 },
29    ],
30    captions: [
31      { src: '/captions/intro-en.vtt', language: 'en', label: 'English', default: true },
32    ],
33    category: 'Getting Started',
34  },
35  {
36    id: 'first-trade',
37    title: 'Placing Your First Trade',
38    description: 'Step-by-step guide to executing your first trade',
39    duration: 600, // 10 minutes
40    thumbnail: '/thumbnails/first-trade.jpg',
41    sources: [
42      { src: '/videos/first-trade.mp4', type: 'video/mp4' },
43    ],
44    chapters: [
45      { id: 'ch1', title: 'Finding an Instrument', startTime: 0 },
46      { id: 'ch2', title: 'Analysing the Chart', startTime: 120 },
47      { id: 'ch3', title: 'Setting Entry & Exit', startTime: 300 },
48      { id: 'ch4', title: 'Confirming the Trade', startTime: 480 },
49    ],
50    category: 'Getting Started',
51  },
52  {
53    id: 'risk-management',
54    title: 'Understanding Risk Management',
55    description: 'Learn how to protect your capital with proper risk management',
56    duration: 480, // 8 minutes
57    thumbnail: '/thumbnails/risk.jpg',
58    sources: [
59      { src: '/videos/risk-management.mp4', type: 'video/mp4' },
60    ],
61    category: 'Getting Started',
62  },
63];
64
65// Example transcript cues
66const introTranscript: TranscriptCue[] = [
67  {
68    id: 'cue-1',
69    startTime: 0,
70    endTime: 5,
71    text: 'Welcome to the trading platform tutorial series.',
72    speaker: 'Narrator',
73  },
74  {
75    id: 'cue-2',
76    startTime: 5,
77    endTime: 12,
78    text: 'In this video, we will give you a comprehensive overview of the platform.',
79    speaker: 'Narrator',
80  },
81  {
82    id: 'cue-3',
83    startTime: 60,
84    endTime: 68,
85    text: 'Let me start by showing you the main dashboard.',
86    speaker: 'Narrator',
87  },
88  // ... more cues
89];
90
91export default function VideoTutorialsDemo() {
92  const [currentVideo, setCurrentVideo] = useState(gettingStartedVideos[0]);
93  const [currentTime, setCurrentTime] = useState(0);
94
95  return (
96    <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
97      {/* Main video player */}
98      <div className="lg:col-span-2 space-y-4">
99        <VideoPlayer
100          sources={currentVideo.sources}
101          title={currentVideo.title}
102          poster={currentVideo.thumbnail}
103          chapters={currentVideo.chapters}
104          captions={currentVideo.captions}
105          videoId={currentVideo.id}
106          onProgress={(progress) => setCurrentTime(progress.currentTime)}
107          onEnded={() => {
108            // Auto-play next video logic
109            const currentIndex = gettingStartedVideos.findIndex(
110              (v) => v.id === currentVideo.id
111            );
112            if (currentIndex < gettingStartedVideos.length - 1) {
113              setCurrentVideo(gettingStartedVideos[currentIndex + 1]);
114            }
115          }}
116        />
117
118        {/* Transcript below the video */}
119        {currentVideo.transcript && (
120          <VideoTranscript
121            cues={currentVideo.transcript}
122            currentTime={currentTime}
123            onSeek={(time) => {
124              // In real implementation, you would seek the video
125              console.log('Seek to:', time);
126            }}
127            showSpeakers
128            searchable
129          />
130        )}
131      </div>
132
133      {/* Playlist sidebar */}
134      <div className="lg:col-span-1">
135        <VideoPlaylist
136          videos={gettingStartedVideos}
137          currentVideoId={currentVideo.id}
138          onVideoSelect={setCurrentVideo}
139          autoPlayNext
140          collapsible
141        />
142      </div>
143    </div>
144  );
145}