Merge pull request #52 from boostcamp-2020/dev

[COMMON] 3주차 데모 버전

client/src/App.tsx

@@ -1,25 +1,13 @@
 import React from 'react';
-import { useSelector } from 'react-redux';
 
-import TimeLine from '@/components/organisms/TimeLine';
+import EditPage from '@/pages/Edit';
 import GlobalStyle from '@/theme/globalStyle';
-import Header from '@/components/organisms/Header';
-import Tools from '@/components/organisms/Tools';
-import VideoContainer from '@/components/organisms/VideoContainer';
-import Loading from '@/components/atoms/Loading';
-import { getMessage } from '@/store/selectors';
 
 const App: React.FC = () => {
-  const message = useSelector(getMessage);
-
   return (
     <>
       <GlobalStyle />
-      {message && <Loading message={message} />}
-      <Header />
-      <VideoContainer />
-      <Tools />
-      <TimeLine />
+      <EditPage />
     </>
   );
 };

client/src/components/atoms/FileInput/FileInput.tsx

@@ -1,24 +1,52 @@
 import React from 'react';
-import styled from 'styled-components';
+import styled, { keyframes } from 'styled-components';
 
 import color from '@/theme/colors';
 
+const slide = keyframes`
+  from {
+    transform: translate(0, -50px) rotate(90deg);
+    opacity: 0;
+  }
+  to {
+    transform: translate(0, 0) rotate(0deg);
+    opacity: 1;
+  }
+`;
+
 const StyledDiv = styled.div`
   position: absolute;
   display: flex;
+  flex-direction: column;
   justify-content: center;
   border-radius: 5px;
-  padding: 5px 16px;
   top: 2rem;
   right: 0;
-  background-color: ${color.GRAY};
-  box-shadow: 1px 1px 2px 1px ${color.WHITE};
+  border: 1px solid ${color.BORDER};
+  background-color: ${color.BLACK};
+  box-shadow: 1px 1px 2px 1px ${color.BORDER};
+  animation: ${slide} 0.4s -0.1s ease-out;
+  transform-origin: center center;
+  width: 5rem;
 `;
 
-const StyledLabel = styled.label`
+const FromLocal = styled.label`
   color: ${color.WHITE};
   font-size: 12px;
+  text-align: center;
   cursor: pointer;
+  padding: 5px 16px;
+  transition: 0.7s;
+  border-radius: 5px 5px 0 0;
+
+  &:hover {
+    background-color: ${color.GRAY};
+  }
+`;
+
+const FromServer = styled(FromLocal)`
+  border-top: 1px solid ${color.BORDER};
+  border-radius: 0 0 5px 5px;
 `;
 
 const StyledInput = styled.input`
@@ -33,13 +61,14 @@ const FileInput = React.forwardRef<HTMLInputElement, Props>(
   ({ handleChange }, forwardedRef) => {
     return (
       <StyledDiv>
-        <StyledLabel htmlFor="local">내 컴퓨터</StyledLabel>
+        <FromLocal htmlFor="local">로컬</FromLocal>
         <StyledInput
           type="file"
           id="local"
           ref={forwardedRef}
           onChange={handleChange}
         />
+        <FromServer>서버</FromServer>
       </StyledDiv>
     );
   }

client/src/components/atoms/Slider/Slider.tsx

@@ -40,10 +40,10 @@ const Slider: React.FC<Props> = ({ thumbnailRef }) => {
   const time = useSelector(getCurrentTime);
 
   useEffect(() => {
-    const currentTime = video.getCurrentTime();
+    const currentTime = video.get('currentTime');
 
     const width = thumbnailRef.current.clientWidth;
-    const totalDuration = video.getDuration();
+    const totalDuration = video.get('duration');
 
     const movedLocation = totalDuration
       ? (currentTime / totalDuration) * width

client/src/components/molecules/CropLayer/CropLayer.tsx

@@ -1,13 +1,15 @@
-import React, { useState } from 'react';
-import { useSelector } from 'react-redux';
+import React, { useEffect, useState } from 'react';
+import { useDispatch, useSelector, shallowEqual } from 'react-redux';
 import { Range } from 'react-range';
 import styled from 'styled-components';
+
 import color from '@/theme/colors';
 import convertReactStyleToCSS from '@/utils/convert';
+import video from '@/video';
+import { crop } from '@/store/currentVideo/actions';
+import { getStartEnd, getCropState } from '@/store/selectors';
 
-const STEP = 0.1;
 const MIN = 0;
-const MAX = 100;
 
 interface OverlayProps {
   width: number;
@@ -59,7 +61,25 @@ const Thumb = styled.div`
   }
 `;
 
-const CropLayer = ({ positions, setPositions, duration }) => {
+const CropLayer = () => {
+  const MAX = video.get('duration');
+  const STEP = (MAX - MIN) / 1024;
+
+  const { start, end } = useSelector(getStartEnd, shallowEqual);
+  const { isCrop, isCropConfirm } = useSelector(getCropState, shallowEqual);
+
+  const [positions, setPositions] = useState([0, 0]);
+
+  const dispatch = useDispatch();
+
+  useEffect(() => {
+    if (isCrop) setPositions([start, end]);
+  }, [isCrop]);
+
+  useEffect(() => {
+    if (isCropConfirm) dispatch(crop(positions[0], positions[1]));
+  }, [isCropConfirm]);
+
   return (
     <CropLayerDiv>
       <Range
@@ -75,8 +95,8 @@ const CropLayer = ({ positions, setPositions, duration }) => {
             onMouseDown={props.onMouseDown}
             onTouchStart={props.onTouchStart}
           >
-            <Overlay width={positions[0]} direction="left" />
-            <Overlay width={MAX - positions[1]} direction="right" />
+            <Overlay width={(positions[0] / MAX) * 100} direction="left" />
+            <Overlay width={(1 - positions[1] / MAX) * 100} direction="right" />
             <div
               ref={props.ref}
               style={{

client/src/components/molecules/CurrentTime/CurrentTime.tsx

@@ -17,7 +17,7 @@ const StyledDiv = styled.div`
 `;
 
 const CurrentTime: React.FC = () => {
-  const currentTime = () => Math.round(video.getCurrentTime());
+  const currentTime = () => Math.round(video.get('currentTime'));
 
   const [time, setTime] = useState(currentTime());
   const visible = useSelector(getVisible);

client/src/components/molecules/Thumbnail/Thumbnail.tsx

@@ -6,7 +6,7 @@ import { moveTo } from '@/store/currentVideo/actions';
 import Slider from '@/components/atoms/Slider';
 import HoverSlider from '@/components/atoms/HoverSlider';
 import video from '@/video';
-import { getThumbnails } from '@/store/selectors';
+import { getThumbnails, getIsCrop } from '@/store/selectors';
 import CropLayer from '@/components/molecules/CropLayer';
 
 const StyledDiv = styled.div`
@@ -24,8 +24,9 @@ const StyledImg = styled.img`
 
 const Thumbnail: React.FC = () => {
   const thumbnails = useSelector(getThumbnails);
+  const isCrop = useSelector(getIsCrop);
+
   const [time, setTime] = useState(0);
-  const [position, setPosition] = useState([0, 0]);
 
   const dispatch = useDispatch();
 
@@ -47,7 +48,7 @@ const Thumbnail: React.FC = () => {
     const distance = mouseLocation - offset;
 
     const width = thumbnailRef.current.clientWidth;
-    const duration = video.getDuration();
+    const duration = video.get('duration');
 
     const hoverTime = (distance / width) * duration;
 
@@ -71,10 +72,10 @@ const Thumbnail: React.FC = () => {
       onMouseLeave={handleMouseLeave}
       onMouseEnter={handleMouseEnter}
     >
-      <CropLayer positions={position} setPositions={setPosition} />
+      {isCrop && <CropLayer />}
       <HoverSlider hoverSliderRef={hoverSliderRef} hoverTime={time} />
       <Slider thumbnailRef={thumbnailRef} />
-      {thumbnails.map(image => {
+      {(isCrop ? video.getThumbnails() : thumbnails).map(image => {
         return <StyledImg key={image} src={image} alt="" />;
       })}
     </StyledDiv>

client/src/components/molecules/TimeZone/TimeZone.tsx

@@ -1,8 +1,13 @@
 import React from 'react';
-import { useSelector } from 'react-redux';
+import { shallowEqual, useSelector } from 'react-redux';
 import styled from 'styled-components';
 
-import { getDuration } from '@/store/selectors';
+import {
+  getDuration,
+  getStartEnd,
+  getIsCrop,
+  getIsCropAndDuration,
+} from '@/store/selectors';
 import TimeText from '@/components/atoms/TimeText';
 import color from '@/theme/colors';
 
@@ -23,7 +28,8 @@ const InnerDiv = styled.div`
 
 const PART_COUNT = 6;
 
-const getTimes = (duration: number): number[] => {
+const getTimes = ({ start, end }): number[] => {
+  const duration: number = end - start;
   if (!duration) return [];
 
   const times: number[] = [];
@@ -40,8 +46,11 @@ const getTimes = (duration: number): number[] => {
 };
 
 const TimeZone: React.FC = () => {
-  const duration: number = Math.round(useSelector(getDuration));
-  const times: number[] = getTimes(duration);
+  const { isCrop, duration } = useSelector(getIsCropAndDuration, shallowEqual);
+  const { start, end } = useSelector(getStartEnd);
+
+  const parameter = isCrop ? { start: 0, end: duration } : { start, end };
+  const times: number[] = getTimes(parameter);
 
   return (
     <StyledDiv>

client/src/components/molecules/UploadArea/UploadArea.tsx

@@ -8,6 +8,8 @@ import { setVideo } from '@/store/originalVideo/actions';
 import { getName } from '@/store/selectors';
 import { reset } from '@/store/actionTypes';
 
+import webglController from '@/webgl/webglController';
+
 const StyledDiv = styled.div`
   display: flex;
   align-items: center;
@@ -29,11 +31,8 @@ const UploadArea: React.FC = () => {
 
   const handleChange = () => {
     const localFile: File = ref.current?.files[0];
-
-    if (localFile) {
-      const objectURL = URL.createObjectURL(localFile);
-      dispatch(setVideo(localFile, objectURL));
-    } else dispatch(reset());
+    const objectURL = URL.createObjectURL(localFile);
+    dispatch(setVideo(localFile, objectURL));
 
     setVisible(false);
   };