Merge pull request #48 from boostcampaitech3/feat/47

[Feat] Modify NavBar and PeoplePanel
boostcampaitech3 · Jun 4, 2022 · 0d2f7a0 · 0d2f7a0
2 parents 4580e56 + d7be22c
commit 0d2f7a0
Show file tree

Hide file tree

Showing 4 changed files with 83 additions and 48 deletions.
diff --git a/serving/frontend/src/App.js b/serving/frontend/src/App.js
@@ -1,18 +1,15 @@
 /* eslint-disable */
-// import "antd/dist/antd.css";
 import './App.css';
 import { BrowserRouter, Routes, Route } from 'react-router-dom';
-import { Message, NavBar } from './components';
-import { UploadVideo, SelectPerson, SelectVideo, SelectVideoTmp } from './pages';
+import { NavBar } from './components';
+import { UploadVideo, SelectPerson, SelectVideo } from './pages';
 
 
 function App() {
   return (
-    <div className="App">
-      {/* NavBar, Message는 어디에다가 둬야 하지? */}
+    <div className="App" style={{paddingTop: "50px"}}>
       <BrowserRouter>
         <NavBar />
-        {/*<Message />*/}
         <Routes>
           <Route path="/" element={<UploadVideo />} />
           <Route path="/select-person" element={<SelectPerson />} />

diff --git a/serving/frontend/src/components/NavBar.js b/serving/frontend/src/components/NavBar.js
@@ -1,22 +1,30 @@
 import styled from "styled-components";
+import { Link } from 'react-router-dom';
 
-const StyledNavBar = styled.nav`
-  display: flex;
-  background: #0279C1;
-  width: 100%;
-  height: 50px;
-  color: white;
-  justify-content: center;
-  align-items: center;
-  position: 'fixed';
-`;
 
 function NavBar() {
+
     return (
         <StyledNavBar>
-            <span style={{fontSize: '20px', fontWeight: 'bold'}}>예능 하이라이트 <span style={{backgroundColor: 'white', color: '#0279C1', borderRadius: '2.5px'}}>#눈#사람</span> 에서 생성하세요!</span>
+            <Link to="/" style={{color: "white", fontSize: '20px', fontWeight: 'bold'}}>
+                예능 하이라이트 <span style={{padding: "0.5px", backgroundColor: 'white', color: '#0279C1', borderRadius: '2.5px'}}>#눈#사람</span> 에서 생성하세요!
+            </Link>
         </StyledNavBar>
     );
 }
 
 export default NavBar;
+
+const StyledNavBar = styled.nav`
+  display: flex;
+  background: #0279C1;
+  width: 100%;
+  height: 50px;
+  justify-content: center;
+  align-items: center;
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  z-index: 1;
+`;
diff --git a/serving/frontend/src/components/PeoplePanel.js b/serving/frontend/src/components/PeoplePanel.js
@@ -1,9 +1,10 @@
-import { Spin, Checkbox, Avatar, Image } from 'antd';
+import { Spin, Checkbox, Avatar, Image, Modal } from 'antd';
 import axios from 'axios';
 import { useState } from 'react';
 import styled from "styled-components";
 import { useNavigate } from 'react-router-dom';
 
+
 const STORAGE = "https://storage.googleapis.com/snowman-bucket/";
 
 function PeoplePanel(props) {
@@ -44,7 +45,7 @@ function PeoplePanel(props) {
 
     const getHighlight = async(res) => {
         await axios.post(
-            "http://101.101.218.23:30001/timeline-highlight", res // 101.101.218.23
+            "http://118.67.130.53:30001/timeline-highlight", res // 101.101.218.23
         ).then((response) => {
             console.log(response);
             setLoading(false);
@@ -53,13 +54,11 @@ function PeoplePanel(props) {
     };
 
     const personSelect = async () => {
-        // e.preventDefault();
-        setLoading(true);
 
         const FaceTimeline = () => {
             return axios({
                 method:"post",
-                url : "http://101.101.218.23:30001/timeline-face", // 101.101.218.23
+                url : "http://118.67.130.53:30001/timeline-face", // 101.101.218.23
                 data : {"face": checkedList, "id":props.id}
             });
         };
@@ -72,31 +71,45 @@ function PeoplePanel(props) {
             });
         };
 
-        console.log('checkedList', checkedList);
-
-        await axios.all([FaceTimeline(), LaughTimeline()])
-        .then(axios.spread(function (face_timeline, laugh_timeline) {
-            var res = { ...face_timeline.data};
-            res["laugh"] = laugh_timeline.data.laugh;
-            res["people_img"] = props.people
-            getHighlight(res);
-            console.log(res);
-        })).catch((error) => {
-            console.log("Failure :(");
-        });
+        if (checkedList.length) {
+            setLoading(true);
+
+            console.log('checkedList', checkedList);
+
+            await axios.all([FaceTimeline(), LaughTimeline()])
+            .then(axios.spread(function (face_timeline, laugh_timeline) {
+                var res = { ...face_timeline.data};
+                res["laugh"] = laugh_timeline.data.laugh;
+                res["people_img"] = props.people
+                getHighlight(res);
+                console.log(res);
+            })).catch((error) => {
+                console.log("Failure :(");
+            });
+        } else {
+            Modal.error({
+                title: "선택한 인물이 없습니다.",
+                content: "쇼츠를 추출할 인물을 선택해주세요.",
+                centered: true,
+                maskClosable: true,
+            });
+        }
     };
 
     return (
         <StyledPanel>
-            <Spin spinning={loading} size="large" tip="Making shorts...">
-            <div>
-                <Checkbox.Group style={{width: "100%"}} value={checkedList} onChange={onChange}>
-                    {render(props.people)}
-                </Checkbox.Group>
-            </div>
-            <StyledButton onClick={personSelect}>
+            <Spin spinning={loading} 
+                style={{position: "absolute", top: "50%", transform: "translateY(-50%)"}} 
+                size="large" 
+                tip="Making shorts...">
+                <div style={{maxHeight: props.height, overflow: "auto"}}>
+                    <Checkbox.Group style={{width: "100%"}} value={checkedList} onChange={onChange}>
+                        {render(props.people)}
+                    </Checkbox.Group>
+                </div>
+                <StyledButton onClick={personSelect}>
                     인물 선택 완료!
-            </StyledButton>
+                </StyledButton>
             </Spin>
         </StyledPanel>
     );

diff --git a/serving/frontend/src/pages/SelectPerson.js b/serving/frontend/src/pages/SelectPerson.js
@@ -1,14 +1,31 @@
 import { useLocation } from 'react-router-dom';
-import { useEffect, useState } from 'react';
-import axios from 'axios';
+import { useEffect, useState, useRef } from 'react';
 import styled from "styled-components";
 import { PeoplePanel } from '../components';
 
 
 function SelectPerson() {
+
     const location = useLocation();
     console.log(location.state);
-
+
+    const ref = useRef();
+    const [height, setHeight] = useState();
+    const [loaded, setLoaded] = useState(false);
+
+    const getVideoHeight = () => {
+        if (ref.current) {
+            setHeight(ref.current.clientHeight);
+        }
+    };
+    useEffect(() => {
+        getVideoHeight();
+    }, [loaded]);
+
+    useEffect(() => {
+        window.addEventListener("resize", getVideoHeight);
+    }, []);
+
     return (
         <div style={{padding: "20px"}}>
             <div style={{width: "75%", 
@@ -19,13 +36,13 @@ function SelectPerson() {
                 paddingTop: "30px",
                 fontSize: "25px"}}>인물을 선택하세요.</div>
             <StyledArea>
-                <div style={{flexGrow: "1", marginRight: "20px"}}>
-                    <video width="100%" controls>
+                <div style={{flexGrow: "1", marginRight: "25px"}}>
+                    <video ref={ref} width="100%" onLoadedData={() => {setLoaded(true)}} controls>
                         <source src={location.state.video}></source>
                     </video>
                 </div>
                 <div style={{flexGrow: "1"}}>
-                    <PeoplePanel people={location.state.people_img} id={location.state.id} id_laughter={location.state.id_laughter} />
+                    <PeoplePanel height={height} people={location.state.people_img} id={location.state.id} id_laughter={location.state.id_laughter} />
                 </div>
             </StyledArea>
         </div>