Merge pull request #51 from boostcamp-2020/feat/UpdateThumbnail

[FE] Crop 이후 Thumbnail Update 구현

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/store/crop/actions.ts

@@ -1,4 +1,5 @@
 import { CROP_START, CROP_CANCEL, CROP_CONFIRM, CROP } from '../actionTypes';
+import { CropAction } from '../currentVideo/actions';
 
 export const cropStart = () => ({
   type: typeof CROP_START,
@@ -24,12 +25,8 @@ export type CropConfirmAction = {
   type: typeof CROP_CONFIRM;
 };
 
-export type Crop = {
-  type: typeof CROP;
-};
-
-export type CropAction =
+export type CropStoreAction =
   | CropStartAction
   | CropCancelAction
   | CropConfirmAction
-  | Crop;
+  | CropAction;

client/src/store/crop/reducer.ts

@@ -1,5 +1,5 @@
 import { CROP_START, CROP_CANCEL, CROP_CONFIRM, CROP } from '../actionTypes';
-import { CropAction } from './actions';
+import { CropStoreAction } from './actions';
 
 export interface CropState {
   isCrop: boolean;
@@ -13,7 +13,7 @@ const initialState: CropState = {
 
 export default (
   state: CropState = initialState,
-  action: CropAction
+  action: CropStoreAction
 ): CropState => {
   switch (action.type) {
     case CROP_START:

client/src/store/crop/sagas.ts

@@ -0,0 +1,25 @@
+import { put, call, takeLatest } from 'redux-saga/effects';
+
+import video from '@/video/video';
+import webglController from '@/webgl/webglController';
+import { setThumbnails } from '../currentVideo/actions';
+import { CROP, error } from '../actionTypes';
+
+function* updateThumbnails(action) {
+  try {
+    const thumbnails: string[] = yield call(
+      video.makeThumbnails,
+      action.payload.start,
+      action.payload.end
+    );
+    yield call(webglController.main);
+    yield put(setThumbnails(thumbnails));
+  } catch (err) {
+    console.log(err);
+    yield put(error());
+  }
+}
+
+export default function* CropThumbnail() {
+  yield takeLatest(CROP, updateThumbnails);
+}

client/src/store/currentVideo/actions.ts

@@ -51,7 +51,7 @@ export type SetThumbnailsAction = {
   };
 };
 
-type CropAction = {
+export type CropAction = {
   type: typeof CROP;
   payload: {
     start: number;

client/src/store/sagas.ts

@@ -1,11 +1,12 @@
 import { all, call, takeEvery } from 'redux-saga/effects';
 import { watchSetVideo, deleteSrc } from '@/store/originalVideo/sagas';
+import CropThumbnail from '@/store/crop/sagas';
 import { RESET } from './actionTypes';
 
 function* watchReset() {
   yield takeEvery(RESET, deleteSrc);
 }
 
 export default function* rootSaga() {
-  yield all([watchSetVideo(), watchReset()]);
+  yield all([watchSetVideo(), watchReset(), CropThumbnail()]);
 }

client/src/store/selectors.ts

@@ -40,3 +40,12 @@ export const getCropState = (state: RootState) => {
     isCropConfirm,
   };
 };
+export const getIsCropAndDuration = (state: RootState) => {
+  const { isCrop } = state.crop;
+  const { length } = state.originalVideo;
+
+  return {
+    isCrop,
+    duration: length,
+  };
+};

client/src/video/video.tsx

@@ -65,7 +65,8 @@ class Video {
             secs -= gap;
             images[count] = image;
           }
-          this.thumbnails = images;
+          if (start === 0 && end === this.video.duration)
+            this.thumbnails = images;
           resolve(images);
         })();
       } catch (err) {