Upload Loading

src/App.tsx

@@ -27,7 +27,7 @@ function App() {
                 <Routes>
                     <Route path="/" element={<HomePage/>}/>
                     <Route path="/upload" element={<LivePage/>}/>
-                    <Route path="/view" element={<ViewPage/>}/>
+                    <Route path="/view/:video" element={<ViewPage/>}/>
                 </Routes>
             </BrowserRouter>
         </>

src/components/Band.tsx

@@ -2,16 +2,17 @@ import BandItem, {BandItemType} from "./BandItem.tsx";
 
 interface Props {
     title: string
-    band: BandItemType[]
+    videoList?: { count:number, list: BandItemType[] }
 }
 
-const Band = ({title, band}: Props) => {
+const Band = ({title, videoList}: Props) => {
+    console.log(videoList)
     return(
         <div className="p-6">
             <span className="text-2xl font-bold mb-2">{title}</span>
             <div className="flex flex-row gap-4 w-full overflow-x-scroll mb-4">
-                {band.map((item, index) => {
-                    return <BandItem key={index} title={item.title} />
+                {videoList?.list?.map((item, index) => {
+                    return <BandItem key={index} title={item.name} date={item.created_at} />
                 })}
             </div>
         </div>

src/components/BandItem.tsx

@@ -1,23 +1,30 @@
-import {Link} from "react-router-dom";
+import {useNavigate} from "react-router-dom";
 import thumbnail from "../assets/thumbnail.png";
 
 interface Props {
     title: string
+    date: string
 }
 
 export interface BandItemType{
-    title: string
+    name: string
+    created_at: string
 }
 
-const BandItem = ({ title }:Props) => {
+
+const BandItem = ({ title, date }:Props) => {
+    const navigate = useNavigate()
+    const onClick = () => {
+        navigate(`/view/${title}`)
+    }
     return (
-        <Link to="/view" >
-            <div className="rounded-xl w-[12rem] overflow-hidden">
+        <button onClick={onClick} >
+            <div className="rounded-xl w-[12rem] overflow-hidden text-left">
                 <img src={thumbnail} alt="thumbnail"/>
-                <div>{title}</div>
-                <span>FURIPOTER</span>
+                <div className="font-bold truncate">{title}</div>
+                <span className="text-[14px]">{date}</span>
             </div>
-        </Link>
+        </button>
     )
 }
 export default BandItem

src/components/Header.tsx

@@ -1,7 +1,7 @@
 import { MdOutlineExitToApp } from "react-icons/md";
 import {useNavigate} from "react-router-dom";
 
-const Header = ({title}:{title:string}) => {
+const Header = ({title}:{title?:string}) => {
     const navigate = useNavigate()
     const onClick = () => {
         navigate(-1)

src/index.css

@@ -39,3 +39,36 @@ html, body, #root {
 .gradient{
   background: linear-gradient(180deg, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0) 100%);
 }
+
+.loader {
+ width: 100px;
+ height: 100px;
+ background: linear-gradient(
+         165deg,
+         rgba(255, 255, 255, 1) 0%,
+         rgb(220, 220, 220) 40%,
+         rgb(170, 170, 170) 98%,
+         rgb(10, 10, 10) 100%
+ );
+ border-radius: 50%;
+ position: relative;
+}
+
+.loader:before {
+  position: absolute;
+  content: "";
+  width: 100%;
+  height: 100%;
+  border-radius: 100%;
+  border-bottom: 0 solid #ffffff05;
+  box-shadow: 0 -10px 20px 20px #ffffff40 inset,
+  0 -5px 15px 10px #ffffff50 inset, 0 -2px 5px #ffffff80 inset,
+  0 -3px 2px #ffffffbb inset, 0 2px 0px #ffffff, 0 2px 3px #ffffff,
+  0 5px 5px #ffffff90, 0 10px 15px #ffffff60, 0 10px 20px 20px #ffffff40;
+  filter: blur(3px);
+  animation: 2s rotate linear infinite;
+}
+
+@keyframes rotate {
+  100% { transform: rotate(360deg) }
+}

src/pages/HomePage.tsx

@@ -1,29 +1,45 @@
 import { useNavigate} from "react-router-dom";
 import Band from "../components/Band.tsx";
 import Footer from "../components/Footer.tsx";
+import {useEffect, useState} from "react";
+import {BandItemType} from "../components/BandItem.tsx";
 
-const hot10 = [
-    {title: '[LIVE] FURIOSA AI 해커톤 현장'},
-    {title: '[단독] 퓨리포터 등장'},
-    {title: '[긴급] 세상에 지금이 몇시지'},
-    {title: '여긴 어디 나는 누구'}
-]
+const HomePage = () => {
+    const navigate = useNavigate();
+    const [videoList, setVideoList] = useState<{ count:number, list: BandItemType[] } | undefined>(undefined);
+    const url = 'http://13.209.86.34:5002/api/video_list';
 
+    useEffect(() => {
+        // Fetch data when the component mounts
+        const fetchData = async () => {
+            try {
+                const response = await fetch(url);
+                if (!response.ok) {
+                    throw new Error('Network response was not ok');
+                }
+                const data = await response.json();
+                setVideoList(data);
+            } catch (error) {
+                console.error('Error fetching data:', error);
+                // Handle error as needed (e.g., show an error message to the user)
+            }
+        };
 
-const HomePage = () => {
-    const navigate = useNavigate()
+        fetchData();
+    }, [url]); // Dependency array to ensure the effect runs only once on mount
 
     const onClick = () => {
-        navigate('/upload')
-    }
+        navigate('/upload');
+    };
+
     return(
         <>
             <div className="flex flex-col justify-between h-full w-full bg-black">
                 <div>
                     <div className="mb-[1rem] p-6">
                         <span className="text-[#E21401] text-3xl font-bold ">AI Blur</span>
                     </div>
-                    <Band title='HOT 10' band={hot10}/>
+                    <Band title='HOT 10' videoList={videoList}/>
                 </div>
                 <div className="flex items-center flex-col w-full">
                     <div className="flex w-full px-6 my-2">

src/pages/LivePage.tsx

@@ -1,6 +1,7 @@
-import {useRef, useEffect} from "react";
+import {useRef, useEffect, useState} from "react";
 import Header from "../components/Header.tsx";
 import { IoMdCloudUpload } from "react-icons/io";
+import {useNavigate} from "react-router-dom";
 
 const CONSTRAINTS = {
     video: true,
@@ -12,6 +13,8 @@ const LivePage = () => {
     // const [isLiveOn, setIsLiveOn] = useState(false);
     const liveRef = useRef<HTMLVideoElement>(null);
     const mediaRecorderRef = useRef<MediaRecorder | null>(null);
+    const [isLoading, setIsLoading] = useState(false);
+    const navigate = useNavigate()
     // const chunks: Blob[] = [];
 
     // let sequence = 0
@@ -103,10 +106,14 @@ const LivePage = () => {
     const handleFileChange = () => {
         const file = fileInputRef?.current?.files?.[0];
 
+        console.log(file)
+
         if (file) {
+            setIsLoading(true)
+
             const formData = new FormData();
             formData.append("video", file);
-            formData.append('file_name', 'people_test.mp4');
+            formData.append('file_name', file?.name);
 
             // 여기서 formData를 서버로 전송하거나, axios 등을 사용하여 업로드합니다.
             // 아래는 fetch를 사용한 예제입니다.
@@ -120,7 +127,11 @@ const LivePage = () => {
                 })
                 .catch((error) => {
                     console.error("Upload error:", error);
-                });
+                })
+                .finally(()=>{
+                    setIsLoading(false);
+                    navigate(`/view/${file?.name}`)
+                })
         }
     }
 
@@ -133,9 +144,19 @@ const LivePage = () => {
                 {/*    <button className="p-[2px] bg-white rounded-3xl" onClick={onClick}> {isLiveOn ?  <FaCircleStop color="#E21401" size="48"/> : <FaRecordVinyl color="#E21401" size="48"/>} </button>*/}
                 {/*</div>*/}
                 <div className="h-full flex flex-col justify-center items-center backdrop-blur">
-                    <label htmlFor="file" className="font-bold">블러처리 할 파일을 등록해주세요.</label>
-                    <label htmlFor="file" ><IoMdCloudUpload color="#FFFFFF" size="72" /></label>
-                    <input id="file" type="file" className="hidden" ref={fileInputRef} onChange={handleFileChange}/>
+                    {isLoading ?
+                        <>
+                            <span className="font-bold">블러를 입히는 중 입니다. 잠시만 기다려주세요.</span>
+                            <br/>
+                            <span className="loader"></span>
+                        </>
+                        :
+                        <>
+                            <label htmlFor="file" className="font-bold">블러처리 할 파일을 등록해주세요.</label>
+                            <label htmlFor="file" ><IoMdCloudUpload color="#FFFFFF" size="72" /></label>
+                            <input id="file" type="file" className="hidden" ref={fileInputRef} onChange={handleFileChange}/>
+                        </>
+                    }
                 </div>
             </div>
         </>

src/pages/ViewPage.tsx

@@ -1,9 +1,11 @@
 import React, { useRef, useEffect } from 'react';
 import Header from "../components/Header.tsx";
+import {useParams} from "react-router-dom";
 
 const ViewPage: React.FC = () => {
 
     const videoRef = useRef<HTMLVideoElement | null>(null);
+    const {video} = useParams();
 
     useEffect(() => {
         // 비디오 주소
@@ -28,7 +30,7 @@ const ViewPage: React.FC = () => {
                 Your browser does not support the video tag.
             </video>
             <div className="fixed top-0 left-0 w-full">
-                <Header />
+                <Header title={video} />
             </div>
         </>
     );