GH-753: [LanguagesV2] Third Page

apps/languagesv2/languages-v2-web/src/App.tsx

@@ -2,8 +2,10 @@ import React from 'react';
 import './App.css';
 import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
 import Home from './pages/Home';
-import Quiz from './pages/Quiz';
 import Nav from './pages/Nav';
+import Quiz from './pages/Quiz';
+import Video from './pages/Video';
+
 
 function App() {
   return (
@@ -14,6 +16,7 @@ function App() {
           <Routes>
             <Route path="/" element={<Home />} />
             <Route path="/quiz" element={<Quiz />} />
+            <Route path="/video/:language" element={<Video />} />
           </Routes>
         </div>
       </div>

apps/languagesv2/languages-v2-web/src/pages/Home.tsx

@@ -3,7 +3,7 @@ import { Link } from 'react-router-dom';
 
 function Home() {
   return (
-    <div className="w-full p-6 space-y-8">
+    <div className="w-full pt-24 space-y-4">
       {/* Header Section */}
       <header className="text-left">
         <h1 className="text-5xl font-bold mb-2 text-blue-700">Languages</h1>
@@ -14,43 +14,58 @@ function Home() {
       <section className="bg-white shadow-md rounded-lg p-6 transition-transform transform hover:scale-105 hover:bg-blue-50">
         <h2 className="text-3xl font-semibold mb-4 text-blue-700">English 🇬🇧</h2>
         <p className="text-md text-gray-700 mb-6">Master English with our engaging quizzes and exercises. Unlock the full potential of your language skills and take your communication to the next level!</p>
-        <div className="mb-8">
+        <div className="mb-8 space-x-4">
           <Link
             to="/quiz?language=English"
             className="inline-block bg-blue-600 text-white px-6 py-3 rounded-full font-semibold text-center hover:bg-blue-800 shadow-lg">
             🚀 Start Your English Adventure Now!
           </Link>
+          <Link
+            to="/video/English"
+            className="inline-block bg-blue-400 text-white px-6 py-3 rounded-full font-semibold text-center hover:bg-blue-600 shadow-lg">
+            🎥 Watch English Videos
+          </Link>
         </div>
       </section>
 
       {/* Vietnamese Section */}
       <section className="bg-white shadow-md rounded-lg p-6 transition-transform transform hover:scale-105 hover:bg-green-50">
         <h2 className="text-3xl font-semibold mb-4 text-green-700">Vietnamese 🇻🇳</h2>
         <p className="text-md text-gray-700 mb-6">Discover the beauty of the Vietnamese language through fun and immersive quizzes. Let’s explore the culture and language together!</p>
-        <div className="mb-8">
+        <div className="mb-8 space-x-4">
           <Link
             to="/quiz?language=Vietnamese"
             className="inline-block bg-green-600 text-white px-6 py-3 rounded-full font-semibold text-center hover:bg-green-800 shadow-lg">
             🌟 Start Vietnamese Quiz and Uncover the Magic!
           </Link>
+          <Link
+            to="/video/Vietnamese"
+            className="inline-block bg-green-400 text-white px-6 py-3 rounded-full font-semibold text-center hover:bg-green-600 shadow-lg">
+            🎥 Watch Vietnamese Videos
+          </Link>
         </div>
       </section>
 
       {/* Chinese Section */}
       <section className="bg-white shadow-md rounded-lg p-6 transition-transform transform hover:scale-105 hover:bg-red-50">
         <h2 className="text-3xl font-semibold mb-4 text-red-700">Chinese 🇨🇳</h2>
         <p className="text-md text-gray-700 mb-6">Begin your Mandarin Chinese journey with fun, engaging quizzes. Unlock the wonders of the Chinese language and culture!</p>
-        <div className="mb-8">
+        <div className="mb-8 space-x-4">
           <Link
             to="/quiz?language=Chinese"
             className="inline-block bg-red-600 text-white px-6 py-3 rounded-full font-semibold text-center hover:bg-red-800 shadow-lg">
             🐉 Start Chinese Quiz and Begin Your Journey!
           </Link>
+          <Link
+            to="/video/Chinese"
+            className="inline-block bg-red-400 text-white px-6 py-3 rounded-full font-semibold text-center hover:bg-red-600 shadow-lg">
+            🎥 Watch Chinese Videos
+          </Link>
         </div>
       </section>
 
       {/* Footer Section */}
-      <footer className="text-center text-gray-600 mt-12">
+      <footer className="text-center text-gray-600 mt-16">
         <p className="text-lg">Happy learning! Stay consistent, stay curious. 🚀 Let every quiz be a new adventure!</p>
       </footer>
     </div>

apps/languagesv2/languages-v2-web/src/pages/Video.tsx

@@ -0,0 +1,111 @@
+import React, { useState, useRef } from 'react';
+import { useParams } from 'react-router-dom';
+
+type VideoData = {
+  [key: string]: { title: string; url: string }[];
+};
+
+function Video() {
+  const { language } = useParams<{ language: string }>();
+  const [currentIndex, setCurrentIndex] = useState(0);
+  const videoRef = useRef<HTMLIFrameElement>(null);
+
+  const videoData: VideoData = {
+    English: [
+      {
+        title: 'Gotye - Somebody That I Used To Know (feat. Kimbra)',
+        url: 'https://www.youtube.com/embed/8UVNT4wvIGY?si=0ZDLyY8p4nvbSpaB&controls=0',
+      },
+      {
+        title: 'MPOSSIBLE! [or NOT?] – Learn English Conversation in 4 Hours',
+        url: 'https://www.youtube.com/embed/8FzY7cgKOmI?si=uADlutuyhPhXBkSc&controls=0',
+      },
+    ],
+    Vietnamese: [
+      {
+        title: 'Vietnamese Phrases You Need at the Station',
+        url: 'https://www.youtube.com/embed/0E50Kk0DNJk?si=U3dGZ77CUHb9VPoJ&controls=0',
+      },
+      {
+        title: 'Learn Vietnamese in 2 Hours - Beginners Guide',
+        url: 'https://www.youtube.com/embed/UvmzrMWD8_Y?si=e-DJH7gp00bS0yjZ&controls=0',
+      },
+    ],
+    Chinese: [
+      {
+        title: '340 Chinese Words You\'ll Use Every Day - Basic Vocabulary #74',
+        url: 'https://www.youtube.com/embed/40UHvFIJU6U?si=71k8LZKXJmu5oJAO&controls=0',
+      },
+      {
+        title: 'Listening Practice - Naming Culture in China',
+        url: 'https://www.youtube.com/embed/BCqjc388ExM?si=WDi8obbQM_fPEC22&controls=0',
+      },
+    ],
+  };
+
+  const handlePlay = () => {
+    if (videoRef.current) {
+      const iframeWindow = videoRef.current.contentWindow;
+      iframeWindow?.postMessage('{"event":"command","func":"playVideo","args":""}', '*');
+    }
+  };
+
+  const handlePause = () => {
+    if (videoRef.current) {
+      const iframeWindow = videoRef.current.contentWindow;
+      iframeWindow?.postMessage('{"event":"command","func":"pauseVideo","args":""}', '*');
+    }
+  };
+
+  const handleNext = () => {
+    setCurrentIndex((prevIndex) => (prevIndex + 1) % videoData[language as string].length);
+  };
+
+  const currentVideo = videoData[language as string]?.[currentIndex];
+
+  return (
+    <div className="w-full p-16 space-y-24 bg-gradient-to-br from-blue-50 to-indigo-100">
+      {/* Video Section */}
+      {currentVideo && (
+        <section className="space-y-6">
+          <div className="bg-white shadow-xl rounded-lg p-6 transform hover:scale-105 transition-transform duration-300">
+            <h2 className="text-3xl font-semibold mb-4 text-indigo-700">{currentVideo.title}</h2>
+            <div className="relative pb-[56.25%]">
+              <iframe
+                ref={videoRef}
+                title={currentVideo.title}
+                src={`${currentVideo.url}&enablejsapi=1`}
+                frameBorder="0"
+                allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+                allowFullScreen
+                className="absolute top-0 left-0 w-full h-full rounded-lg shadow-md"
+              ></iframe>
+            </div>
+            <div className="flex space-x-4 mt-6 justify-center">
+              <button
+                onClick={handlePlay}
+                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"
+              >
+                ▶ Play
+              </button>
+              <button
+                onClick={handlePause}
+                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"
+              >
+                ⏸ Pause
+              </button>
+              <button
+                onClick={handleNext}
+                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"
+              >
+                ⏭ Next
+              </button>
+            </div>
+          </div>
+        </section>
+      )}
+    </div>
+  );
+}
+
+export default Video;