WatchLiveStreamComponent and update routing for livestreams

Author: Trinh-Tan-Dat

src/App.js

@@ -36,6 +36,8 @@ function App() {
         <Route path="/search" element={<Search />} />
         <Route path="/livestream" element={<Livestream />} />
         <Route path="/watchlivestream" element={<WatchLiveStream />}/>
+        <Route path="/watchlivestream/:streamKey" element={<WatchLiveStream />}/>
+
       </Routes>
     </Router>
     );

src/components/VideoCom/WatchLiveStreamComponent.js

@@ -0,0 +1,66 @@
+import axios from "axios";
+import React, { useEffect, useState } from "react";
+import {  useNavigate } from 'react-router-dom';
+
+function formatTimestamp(timestamp) {
+    const now = new Date();
+    const diff = now.getTime() - timestamp.getTime();
+    
+    // Tính toán số phút, số giờ, số ngày
+    const minutes = Math.floor(diff / (1000 * 60));
+    const hours = Math.floor(diff / (1000 * 60 * 60));
+    const days = Math.floor(diff / (1000 * 60 * 60 * 24));
+    
+    // Định dạng lại thời gian
+    if (minutes < 60) {
+      return `${minutes} phút trước`;
+    } else if (hours < 24) {
+      return `${hours} giờ trước`;
+    } else {
+      return `${days} ngày trước`;
+    }
+  }
+  
+  const WatchLiveStreamComponent = (props) =>
+  {
+    const [widthVideo, setWidthVideo] = useState(props?.wi)
+    useEffect(()=>{
+      setWidthVideo(widthVideo)
+    }, [])
+    const navigate = useNavigate()
+    const handleClick = async ( videoId) => {
+
+        const bodyHis = {
+          userId: localStorage.getItem('userToken'),
+          thumbId: videoId
+        }
+        const formData = new FormData()
+        formData.append('userId', localStorage.getItem('userToken'))
+        formData.append('thumbId', videoId)
+        // try {
+        //   await axios.post(`${process.env.REACT_APP_API_URL}/video/addHistory`, formData);
+        // } catch (error) {
+        //   console.error('Đã xảy ra lỗi:', error);
+        // }
+        navigate(`/watchlivestream/${props?.streamKey}`)
+      };
+      const timestamp = new Date(props?.timestamp);
+      const formattedTime = formatTimestamp(timestamp);
+    return(
+        <div className={`flex w-[405px]`}  onClick={()=>handleClick(props?.videoId)}>
+                    <div className='p-[15px] hover:bg-[#dddddd] bg-white mx-4 my-4 mb-10 drop-shadow-lg rounded-[10px] cursor-pointer peer peer-focus:bg-[#f2f2f2]'>
+                        <img className=' w-[370px] h-[200px] rounded-[20px]' src={props?.img} alt='other'/>
+                        <div className='font-roboto  mr-2  '>
+                            <p className='text-[18px] font-medium text-black mt-3 leading-6'>{props?.title}</p>
+                            <p className='text-[16px] mt-1'>{props?.username}</p>
+                            <div className='flex text-[16px] justify-between'>
+                                <p>{props?.view === undefined? '0':props?.view} views</p>
+                                <p>{formattedTime}</p>
+                            </div>
+                        </div>
+                    </div>                 
+                   
+                </div>
+    )
+}
+export default WatchLiveStreamComponent

src/pages/Home.js

@@ -4,6 +4,7 @@ import { IoMdMenu } from "react-icons/io";
 import VideoComponent from '../components/VideoCom/VideoComponent';
 import Loading from '../components/Loading';
 import ImageLiveStream from '../assets/images/livestream.png';
+import WatchLiveStreamComponent from '../components/VideoCom/WatchLiveStreamComponent';
 const Home = () => {
   const [videoIds, setVideoIds] = useState([]);
   const [values, setValueIds] = useState([]);
@@ -136,15 +137,15 @@ const Home = () => {
       <div className='flex flex-wrap ml-2'>
         {livestreams.length > 0 ? (
           livestreams.map((stream, index) => (
-            <VideoComponent
+            <WatchLiveStreamComponent
               wi={405}
               key={stream.streamKey}
               img={ImageLiveStream}
               title={stream.titleLive}
               username={stream.userName}
               timestamp=""
               view=""
-              videoId={stream.streamKey}
+              streamKey={stream.streamKey}
               userid=""
             />
           ))

src/pages/WatchLiveStream.js

@@ -5,14 +5,15 @@ import { CiShare1 } from "react-icons/ci";
 import CopyButton from "../components/ButtonCustom/CopyButton";
 import ReactPlayer from "react-player";
 import { ToastContainer, toast } from "react-toastify";
-
+import { useParams } from 'react-router-dom';
 const WatchLiveStream = () => {
   const [isStreamLive, setIsStreamLive] = useState(false); // Trạng thái livestream
   const [chatMessages, setChatMessages] = useState([]); // Phải là một mảng
   const [message, setMessage] = useState(""); // Tin nhắn hiện tại
-  const streamUrl = `http://192.168.120.213:13000/hls/2DEKS.m3u8`;
-  const eventCode = "event123"; // Mã sự kiện mặc định
-
+  const { streamKey } = useParams();
+  const streamUrl = `http://192.168.120.213:13000/hls/${streamKey}.m3u8`;
+  const eventCode = streamKey; // Mã sự kiện mặc định
+  console.log(streamKey + "asddas");
   // Kiểm tra trạng thái livestream
   const checkStreamStatus = async () => {
     try {
@@ -27,7 +28,7 @@ const WatchLiveStream = () => {
   // Lấy danh sách tin nhắn từ API
   const fetchChatMessages = async () => {
     try {
-      const response = await fetch(`${process.env.REACT_APP_API_CHAT}/chat/event123`);
+      const response = await fetch(`${process.env.REACT_APP_API_CHAT}/chat/${streamKey}`);
 
       // Kiểm tra nếu không phải là JSON hợp lệ, có thể là HTML do lỗi
       const text = await response.text(); // Đọc phản hồi dưới dạng văn bản