1+ import React , { useState , useRef } from 'react' ;
2+ import { useParams } from 'react-router-dom' ;
3+
4+ type VideoData = {
5+ [ key : string ] : { title : string ; url : string } [ ] ;
6+ } ;
7+
8+ function Video ( ) {
9+ const { language } = useParams < { language : string } > ( ) ;
10+ const [ currentIndex , setCurrentIndex ] = useState ( 0 ) ;
11+ const videoRef = useRef < HTMLIFrameElement > ( null ) ;
12+
13+ const videoData : VideoData = {
14+ English : [
15+ {
16+ title : 'Gotye - Somebody That I Used To Know (feat. Kimbra)' ,
17+ url : 'https://www.youtube.com/embed/8UVNT4wvIGY?si=0ZDLyY8p4nvbSpaB&controls=0' ,
18+ } ,
19+ {
20+ title : 'MPOSSIBLE! [or NOT?] – Learn English Conversation in 4 Hours' ,
21+ url : 'https://www.youtube.com/embed/8FzY7cgKOmI?si=uADlutuyhPhXBkSc&controls=0' ,
22+ } ,
23+ ] ,
24+ Vietnamese : [
25+ {
26+ title : 'Vietnamese Phrases You Need at the Station' ,
27+ url : 'https://www.youtube.com/embed/0E50Kk0DNJk?si=U3dGZ77CUHb9VPoJ&controls=0' ,
28+ } ,
29+ {
30+ title : 'Learn Vietnamese in 2 Hours - Beginners Guide' ,
31+ url : 'https://www.youtube.com/embed/UvmzrMWD8_Y?si=e-DJH7gp00bS0yjZ&controls=0' ,
32+ } ,
33+ ] ,
34+ Chinese : [
35+ {
36+ title : '340 Chinese Words You\'ll Use Every Day - Basic Vocabulary #74' ,
37+ url : 'https://www.youtube.com/embed/40UHvFIJU6U?si=71k8LZKXJmu5oJAO&controls=0' ,
38+ } ,
39+ {
40+ title : 'Listening Practice - Naming Culture in China' ,
41+ url : 'https://www.youtube.com/embed/BCqjc388ExM?si=WDi8obbQM_fPEC22&controls=0' ,
42+ } ,
43+ ] ,
44+ } ;
45+
46+ const handlePlay = ( ) => {
47+ if ( videoRef . current ) {
48+ const iframeWindow = videoRef . current . contentWindow ;
49+ iframeWindow ?. postMessage ( '{"event":"command","func":"playVideo","args":""}' , '*' ) ;
50+ }
51+ } ;
52+
53+ const handlePause = ( ) => {
54+ if ( videoRef . current ) {
55+ const iframeWindow = videoRef . current . contentWindow ;
56+ iframeWindow ?. postMessage ( '{"event":"command","func":"pauseVideo","args":""}' , '*' ) ;
57+ }
58+ } ;
59+
60+ const handleNext = ( ) => {
61+ setCurrentIndex ( ( prevIndex ) => ( prevIndex + 1 ) % videoData [ language as string ] . length ) ;
62+ } ;
63+
64+ const currentVideo = videoData [ language as string ] ?. [ currentIndex ] ;
65+
66+ return (
67+ < div className = "w-full p-16 space-y-24 bg-gradient-to-br from-blue-50 to-indigo-100" >
68+ { /* Video Section */ }
69+ { currentVideo && (
70+ < section className = "space-y-6" >
71+ < div className = "bg-white shadow-xl rounded-lg p-6 transform hover:scale-105 transition-transform duration-300" >
72+ < h2 className = "text-3xl font-semibold mb-4 text-indigo-700" > { currentVideo . title } </ h2 >
73+ < div className = "relative pb-[56.25%]" >
74+ < iframe
75+ ref = { videoRef }
76+ title = { currentVideo . title }
77+ src = { `${ currentVideo . url } }
78+ frameBorder = "0"
79+ allow = "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
80+ allowFullScreen
81+ className = "absolute top-0 left-0 w-full h-full rounded-lg shadow-md"
82+ > </ iframe >
83+ </ div >
84+ < div className = "flex space-x-4 mt-6 justify-center" >
85+ < button
86+ onClick = { handlePlay }
87+ className = "px-6 py-3 bg-indigo-500 text-white font-bold rounded-full shadow-md hover:bg-indigo-600 transform hover:scale-105 transition-transform duration-200"
88+ >
89+ ▶ Play
90+ </ button >
91+ < button
92+ onClick = { handlePause }
93+ className = "px-6 py-3 bg-yellow-500 text-white font-bold rounded-full shadow-md hover:bg-yellow-600 transform hover:scale-105 transition-transform duration-200"
94+ >
95+ ⏸ Pause
96+ </ button >
97+ < button
98+ onClick = { handleNext }
99+ className = "px-6 py-3 bg-green-500 text-white font-bold rounded-full shadow-md hover:bg-green-600 transform hover:scale-105 transition-transform duration-200"
100+ >
101+ ⏭ Next
102+ </ button >
103+ </ div >
104+ </ div >
105+ </ section >
106+ ) }
107+ </ div >
108+ ) ;
109+ }
110+
111+ export default Video ;
0 commit comments