From 5be832666551f248b1e585ad1e69c6ccc82fbc0a Mon Sep 17 00:00:00 2001 From: SoYoung210 Date: Wed, 25 Mar 2020 13:06:27 +0900 Subject: [PATCH 01/13] [WIP] Add animation at PlayerTitle --- components/player/index.tsx | 13 ++++++++++++- 1 file changed, 12 insertions(+), 1 deletion(-) diff --git a/components/player/index.tsx b/components/player/index.tsx index 1bf97d8..d8bd39c 100644 --- a/components/player/index.tsx +++ b/components/player/index.tsx @@ -1,3 +1,4 @@ +import { keyframes } from '@emotion/core' import styled from '@emotion/styled' import { FetchStatusCode } from 'api' import { RootState } from 'features' @@ -17,6 +18,16 @@ import { PlayerController } from './PlayerController' interface Props {} +const hide = keyframes` + from { + height: 100%; + } + + to { + height: 0; + } +` + const PlayerTitle = styled.h2` width: 100%; font-style: normal; @@ -24,8 +35,8 @@ const PlayerTitle = styled.h2` font-size: 20px; line-height: 29px; text-align: center; - color: #ffffff; + animation: ${hide} 2s linear infinite; ` export const Player: React.FC = () => { From 0864f6ac37b5a755be2acf05a634bc76dd0876b1 Mon Sep 17 00:00:00 2001 From: SoYoung210 Date: Wed, 25 Mar 2020 13:24:13 +0900 Subject: [PATCH 02/13] Fix height animation --- components/player/index.tsx | 11 ++++++----- 1 file changed, 6 insertions(+), 5 deletions(-) diff --git a/components/player/index.tsx b/components/player/index.tsx index d8bd39c..453e243 100644 --- a/components/player/index.tsx +++ b/components/player/index.tsx @@ -19,24 +19,25 @@ import { PlayerController } from './PlayerController' interface Props {} const hide = keyframes` - from { - height: 100%; + 0% { + max-height: 500px; } - to { - height: 0; + 100% { + max-height: 0; } ` const PlayerTitle = styled.h2` width: 100%; + overflow: hidden; font-style: normal; font-weight: bold; font-size: 20px; line-height: 29px; text-align: center; color: #ffffff; - animation: ${hide} 2s linear infinite; + animation: ${hide} 1s ease-out both 1; ` export const Player: React.FC = () => { From b0ffbb5c42f33875bea84cce0653ac4639db84db Mon Sep 17 00:00:00 2001 From: SoYoung210 Date: Mon, 30 Mar 2020 12:57:33 +0900 Subject: [PATCH 03/13] Add hide keyframes at PlayerButton --- components/player/PlayerButton.tsx | 48 ++++++++++++++++++++++-------- 1 file changed, 36 insertions(+), 12 deletions(-) diff --git a/components/player/PlayerButton.tsx b/components/player/PlayerButton.tsx index 8b555ae..fe324e3 100644 --- a/components/player/PlayerButton.tsx +++ b/components/player/PlayerButton.tsx @@ -1,3 +1,4 @@ +import { keyframes } from '@emotion/core' import styled from '@emotion/styled' import { FlexWrapper } from 'components/common/FlexWrapper' import { RootState } from 'features' @@ -5,10 +6,29 @@ import { playerActions, playerSelectors, PlayerTime } from 'features/playerSlice import React from 'react' import { useDispatch, useSelector } from 'react-redux' +// TODO: Move common Component +const hide = keyframes` + 0% { + opacity: 1; + max-height: 500px; + } + + 100% { + opacity: 0; + max-height: 0; + } +` + +const HideWrapper = styled.div` + animation: ${hide} 1s ease-out both 1; + overflow: hidden; +` + const PlayButton = styled<'div', {isPlaying: boolean}>('div')` margin: 0 10px 0 10px; width: 24px; height: 24px; + /* animation: ${hide} 1s ease-out both 1; */ background-size: contain; align-self: center; background-image: url(${({ isPlaying }) => isPlaying ? '/images/pause.svg' : '/images/play.svg'}); @@ -17,6 +37,7 @@ const PlayButton = styled<'div', {isPlaying: boolean}>('div')` const ForwardButton = styled.div` width: 30px; height: 30px; + /* animation: ${hide} 1s ease-out both 1; */ background-size: contain; margin-right: auto; background-image: url('/images/forward.svg'); @@ -26,6 +47,7 @@ const BackwardButton = styled.div` width: 30px; height: 30px; background-size: contain; + animation: ${hide} 1s ease-out both 1; margin-left: auto; background-image: url('/images/backward.svg'); ` @@ -39,17 +61,19 @@ export const PlayerButton = () => { const { toggle, requestUpdateCurrentTime } = playerActions return ( - - dispatch(requestUpdateCurrentTime(current-5))} - /> - dispatch(toggle()) } - /> - dispatch(requestUpdateCurrentTime(current+5))} - /> - + + + dispatch(requestUpdateCurrentTime(current-5))} + /> + dispatch(toggle()) } + /> + dispatch(requestUpdateCurrentTime(current+5))} + /> + + ) } From 4a6f876b1221b004787ea79530e907ec1856126b Mon Sep 17 00:00:00 2001 From: SoYoung210 Date: Mon, 30 Mar 2020 13:09:02 +0900 Subject: [PATCH 04/13] Add wheelEvent Listner --- components/player/index.tsx | 37 +++++++++++++++++++++++-------------- 1 file changed, 23 insertions(+), 14 deletions(-) diff --git a/components/player/index.tsx b/components/player/index.tsx index 453e243..de97618 100644 --- a/components/player/index.tsx +++ b/components/player/index.tsx @@ -9,7 +9,7 @@ import { playerActions, } from 'features/playerSlice' import { useFetchWithStore } from 'hooks/useFetch' -import React from 'react' +import React, { useEffect } from 'react' import { useSelector } from 'react-redux' import { renderByFetchState } from 'utils/renderUtils' @@ -18,6 +18,8 @@ import { PlayerController } from './PlayerController' interface Props {} +const COMMENT_WRAPPER = 'commentWrapper' + const hide = keyframes` 0% { max-height: 500px; @@ -51,6 +53,11 @@ export const Player: React.FC = () => { movieSelectors.currentComments, ) + // TODO: Move to custom hook + const handleWheel = (e: React.WheelEvent) => { + console.log(e.deltaY) + } + useFetchWithStore(fetchState, () => playerActions.fetch(1)) const renderView = () => { @@ -59,20 +66,22 @@ export const Player: React.FC = () => { {title} - { - currentComment.map((comment: Comment) => { - const { kind, contents, time, id } = comment +
+ { + currentComment.map((comment: Comment) => { + const { kind, contents, time, id } = comment - return ( - - ) - }) - } + return ( + + ) + }) + } +
) } From d26d871a9d5ea9af97bbcb40f92e19d4927f61ed Mon Sep 17 00:00:00 2001 From: SoYoung210 Date: Mon, 30 Mar 2020 13:21:51 +0900 Subject: [PATCH 05/13] Add requestAnimationFrame --- components/player/PlayerButton.tsx | 2 -- components/player/index.tsx | 30 +++++++++++++++++++++++++----- 2 files changed, 25 insertions(+), 7 deletions(-) diff --git a/components/player/PlayerButton.tsx b/components/player/PlayerButton.tsx index fe324e3..5da92a3 100644 --- a/components/player/PlayerButton.tsx +++ b/components/player/PlayerButton.tsx @@ -28,7 +28,6 @@ const PlayButton = styled<'div', {isPlaying: boolean}>('div')` margin: 0 10px 0 10px; width: 24px; height: 24px; - /* animation: ${hide} 1s ease-out both 1; */ background-size: contain; align-self: center; background-image: url(${({ isPlaying }) => isPlaying ? '/images/pause.svg' : '/images/play.svg'}); @@ -37,7 +36,6 @@ const PlayButton = styled<'div', {isPlaying: boolean}>('div')` const ForwardButton = styled.div` width: 30px; height: 30px; - /* animation: ${hide} 1s ease-out both 1; */ background-size: contain; margin-right: auto; background-image: url('/images/forward.svg'); diff --git a/components/player/index.tsx b/components/player/index.tsx index de97618..ae04bf8 100644 --- a/components/player/index.tsx +++ b/components/player/index.tsx @@ -9,7 +9,7 @@ import { playerActions, } from 'features/playerSlice' import { useFetchWithStore } from 'hooks/useFetch' -import React, { useEffect } from 'react' +import React, { useState } from 'react' import { useSelector } from 'react-redux' import { renderByFetchState } from 'utils/renderUtils' @@ -30,7 +30,17 @@ const hide = keyframes` } ` -const PlayerTitle = styled.h2` +const show = keyframes` + 0% { + max-height: 0; + } + + 100% { + max-height: 500px; + } +` + +const PlayerTitle = styled<'h2', {isVisible: boolean}>('h2')` width: 100%; overflow: hidden; font-style: normal; @@ -39,10 +49,11 @@ const PlayerTitle = styled.h2` line-height: 29px; text-align: center; color: #ffffff; - animation: ${hide} 1s ease-out both 1; + animation: ${({ isVisible }) => isVisible ? show : hide} 1s ease-out both 1; ` export const Player: React.FC = () => { + const [isVisible, setIsVisible] = useState(true) const fetchState = useSelector( movieSelectors.movieFetchState, ) @@ -55,7 +66,16 @@ export const Player: React.FC = () => { // TODO: Move to custom hook const handleWheel = (e: React.WheelEvent) => { - console.log(e.deltaY) + if (e.deltaY >= 0) { + // setIsVisible(false) + requestAnimationFrame(() => setIsVisible(false)) + + return + // requestAnimationFrame(() => setIsVisible(false)) + } + requestAnimationFrame(() => setIsVisible(true)) + // setIsVisible(true) + // requestAnimationFrame(() => setIsVisible(true)) } useFetchWithStore(fetchState, () => playerActions.fetch(1)) @@ -64,7 +84,7 @@ export const Player: React.FC = () => { return ( <> - {title} + {title}
{ From 17e028c995be186fcad2db0be4f6e692035686d4 Mon Sep 17 00:00:00 2001 From: soso Date: Sun, 5 Apr 2020 22:33:12 +0900 Subject: [PATCH 06/13] Add mockData --- __tests__/mockData/comment.ts | 54 +++++++++++++++++++++++++++++++++++ 1 file changed, 54 insertions(+) diff --git a/__tests__/mockData/comment.ts b/__tests__/mockData/comment.ts index ac8516a..e8300c8 100644 --- a/__tests__/mockData/comment.ts +++ b/__tests__/mockData/comment.ts @@ -48,6 +48,60 @@ export const playerCommentsMockData: MockDataType = { ], time: 7, }, + { + id: 'test4', + kind: COMMENT_TYPE.ACTION_DIRECTOR, + contents: [ + '방황하였으며, 우리의 얼마나 심장은 불어 청춘의 이상의 투명하되 것이다. 가슴이 따뜻한 작고 힘있다. 얼음이 무엇을 천고에 쓸쓸하랴? 같으며,설레는 거친 새 장식하는 희망의 얼음과 것 같으며, 설레는 거친 새장식하는 희망의 얼음과 것 같으며, 설레는 거친 새 장식하는 희망의', + '가슴이 따뜻한 작고 힘있다.', + ], + time: 9, + }, + { + id: 'test5', + kind: COMMENT_TYPE.ACTION_DIRECTOR, + contents: [ + '방황하였으며, 우리의 얼마나 심장은 불어 청춘의 이상의 투명하되 것이다. 가슴이 따뜻한 작고 힘있다. 얼음이 무엇을 천고에 쓸쓸하랴? 같으며,설레는 거친 새 장식하는 희망의 얼음과 것 같으며, 설레는 거친 새장식하는 희망의 얼음과 것 같으며, 설레는 거친 새 장식하는 희망의', + '가슴이 따뜻한 작고 힘있다.', + ], + time: 11, + }, + { + id: 'test6', + kind: COMMENT_TYPE.ACTION_DIRECTOR, + contents: [ + '방황하였으며, 우리의 얼마나 심장은 불어 청춘의 이상의 투명하되 것이다. 가슴이 따뜻한 작고 힘있다. 얼음이 무엇을 천고에 쓸쓸하랴? 같으며,설레는 거친 새 장식하는 희망의 얼음과 것 같으며, 설레는 거친 새장식하는 희망의 얼음과 것 같으며, 설레는 거친 새 장식하는 희망의', + '가슴이 따뜻한 작고 힘있다.', + ], + time: 12, + }, + { + id: 'test7', + kind: COMMENT_TYPE.ACTION_DIRECTOR, + contents: [ + '방황하였으며, 우리의 얼마나 심장은 불어 청춘의 이상의 투명하되 것이다. 가슴이 따뜻한 작고 힘있다. 얼음이 무엇을 천고에 쓸쓸하랴? 같으며,설레는 거친 새 장식하는 희망의 얼음과 것 같으며, 설레는 거친 새장식하는 희망의 얼음과 것 같으며, 설레는 거친 새 장식하는 희망의', + '가슴이 따뜻한 작고 힘있다.', + ], + time: 13, + }, + { + id: 'test8', + kind: COMMENT_TYPE.ACTION_DIRECTOR, + contents: [ + '방황하였으며, 우리의 얼마나 심장은 불어 청춘의 이상의 투명하되 것이다. 가슴이 따뜻한 작고 힘있다. 얼음이 무엇을 천고에 쓸쓸하랴? 같으며,설레는 거친 새 장식하는 희망의 얼음과 것 같으며, 설레는 거친 새장식하는 희망의 얼음과 것 같으며, 설레는 거친 새 장식하는 희망의', + '가슴이 따뜻한 작고 힘있다.', + ], + time: 14, + }, + { + id: 'test9', + kind: COMMENT_TYPE.ACTION_DIRECTOR, + contents: [ + '방황하였으며, 우리의 얼마나 심장은 불어 청춘의 이상의 투명하되 것이다. 가슴이 따뜻한 작고 힘있다. 얼음이 무엇을 천고에 쓸쓸하랴? 같으며,설레는 거친 새 장식하는 희망의 얼음과 것 같으며, 설레는 거친 새장식하는 희망의 얼음과 것 같으며, 설레는 거친 새 장식하는 희망의', + '가슴이 따뜻한 작고 힘있다.', + ], + time: 15, + }, ], }, } From 76b4fedee6c1320cf7eb0c692ebd9f50baa8797d Mon Sep 17 00:00:00 2001 From: soso Date: Sun, 5 Apr 2020 22:33:22 +0900 Subject: [PATCH 07/13] Add header sicky css --- components/player/PlayerController.tsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/components/player/PlayerController.tsx b/components/player/PlayerController.tsx index 74f2890..445796e 100644 --- a/components/player/PlayerController.tsx +++ b/components/player/PlayerController.tsx @@ -9,11 +9,13 @@ interface Props { } const PlayerTop = styled.div` - position: relative; + position: sticky; + top: 0; margin-bottom: 16px; padding: 24px 0; background: rgba(0, 0, 0, 0.7); border-radius: 0px 0px 25px 25px; + z-index: 10; ` const CloseButton = styled.span` From 616c26c0ac5a64cd5ec4911fad850be7886a7b69 Mon Sep 17 00:00:00 2001 From: soso Date: Sun, 5 Apr 2020 22:33:42 +0900 Subject: [PATCH 08/13] Add scroll event listner --- components/player/index.tsx | 35 +++++++++++++++++++++-------------- 1 file changed, 21 insertions(+), 14 deletions(-) diff --git a/components/player/index.tsx b/components/player/index.tsx index ae04bf8..4f5dff4 100644 --- a/components/player/index.tsx +++ b/components/player/index.tsx @@ -9,7 +9,7 @@ import { playerActions, } from 'features/playerSlice' import { useFetchWithStore } from 'hooks/useFetch' -import React, { useState } from 'react' +import React, { useCallback, useEffect, useState } from 'react' import { useSelector } from 'react-redux' import { renderByFetchState } from 'utils/renderUtils' @@ -65,18 +65,25 @@ export const Player: React.FC = () => { ) // TODO: Move to custom hook - const handleWheel = (e: React.WheelEvent) => { - if (e.deltaY >= 0) { - // setIsVisible(false) - requestAnimationFrame(() => setIsVisible(false)) - - return - // requestAnimationFrame(() => setIsVisible(false)) - } - requestAnimationFrame(() => setIsVisible(true)) - // setIsVisible(true) - // requestAnimationFrame(() => setIsVisible(true)) - } + const handleWheel = useCallback( + (e: WheelEvent) => { + if (e.deltaY > 0 && isVisible) { + return setIsVisible(false) + } + + if (e.deltaY < 0 && !isVisible) { + return setIsVisible(true) + } + }, + [isVisible], + ) + + useEffect(() => { + window.addEventListener('wheel', handleWheel) + + return (() => window.removeEventListener('wheel', handleWheel)) + }, [handleWheel]) + useFetchWithStore(fetchState, () => playerActions.fetch(1)) @@ -86,7 +93,7 @@ export const Player: React.FC = () => { {title} -
+
{ currentComment.map((comment: Comment) => { const { kind, contents, time, id } = comment From 6a596feee6725991a04fdcdbbf4a420999c96a9b Mon Sep 17 00:00:00 2001 From: soso Date: Sun, 5 Apr 2020 22:48:56 +0900 Subject: [PATCH 09/13] [WIP] Fix animation --- components/player/PlayerButton.tsx | 41 +++++++++++++++++++++++++----- components/player/index.tsx | 3 ++- 2 files changed, 36 insertions(+), 8 deletions(-) diff --git a/components/player/PlayerButton.tsx b/components/player/PlayerButton.tsx index 5da92a3..26c38cc 100644 --- a/components/player/PlayerButton.tsx +++ b/components/player/PlayerButton.tsx @@ -3,24 +3,32 @@ import styled from '@emotion/styled' import { FlexWrapper } from 'components/common/FlexWrapper' import { RootState } from 'features' import { playerActions, playerSelectors, PlayerTime } from 'features/playerSlice' -import React from 'react' +import React, { useCallback, useEffect, useState } from 'react' import { useDispatch, useSelector } from 'react-redux' // TODO: Move common Component const hide = keyframes` 0% { - opacity: 1; max-height: 500px; } 100% { - opacity: 0; max-height: 0; } ` -const HideWrapper = styled.div` - animation: ${hide} 1s ease-out both 1; +const show = keyframes` + 0% { + max-height: 0; + } + + 100% { + max-height: 500px; + } +` + +const HideWrapper = styled<'div', {isVisible: boolean}>('div')` + animation: ${({ isVisible }) => isVisible ? show : hide} 0.7s ease-in-out forwards 1; overflow: hidden; ` @@ -45,7 +53,6 @@ const BackwardButton = styled.div` width: 30px; height: 30px; background-size: contain; - animation: ${hide} 1s ease-out both 1; margin-left: auto; background-image: url('/images/backward.svg'); ` @@ -57,9 +64,29 @@ export const PlayerButton = () => { ) const { current } = useSelector(playerSelectors.times) const { toggle, requestUpdateCurrentTime } = playerActions + const [isVisible, setIsVisible] = useState(true) + + // TODO: Move to custom hook + const handleWheel = useCallback( + (e: WheelEvent) => { + if (e.deltaY > 0 && isVisible) { + return setIsVisible(false) + } + + if (e.deltaY < 0 && !isVisible) { + return setIsVisible(true) + } + }, + [isVisible], + ) + useEffect(() => { + window.addEventListener('wheel', handleWheel) + + return (() => window.removeEventListener('wheel', handleWheel)) + }, [handleWheel]) return ( - + dispatch(requestUpdateCurrentTime(current-5))} diff --git a/components/player/index.tsx b/components/player/index.tsx index 4f5dff4..c2ffc6b 100644 --- a/components/player/index.tsx +++ b/components/player/index.tsx @@ -11,6 +11,7 @@ import { import { useFetchWithStore } from 'hooks/useFetch' import React, { useCallback, useEffect, useState } from 'react' import { useSelector } from 'react-redux' +import { useScroll } from 'react-use-gesture' import { renderByFetchState } from 'utils/renderUtils' import { Comments } from './Comments' @@ -49,7 +50,7 @@ const PlayerTitle = styled<'h2', {isVisible: boolean}>('h2')` line-height: 29px; text-align: center; color: #ffffff; - animation: ${({ isVisible }) => isVisible ? show : hide} 1s ease-out both 1; + animation: ${({ isVisible }) => isVisible ? show : hide} 1s ease-in-out forwards 1; ` export const Player: React.FC = () => { From cde00e65485436bc7918f810b6cb3dfd88bc7393 Mon Sep 17 00:00:00 2001 From: SoYoung210 Date: Mon, 20 Apr 2020 13:11:34 +0900 Subject: [PATCH 10/13] Add useWheel custom hook --- components/player/PlayerButton.tsx | 6 ++---- components/player/index.tsx | 10 ++-------- hooks/useWheel.ts | 13 +++++++++++++ 3 files changed, 17 insertions(+), 12 deletions(-) create mode 100644 hooks/useWheel.ts diff --git a/components/player/PlayerButton.tsx b/components/player/PlayerButton.tsx index 26c38cc..8096355 100644 --- a/components/player/PlayerButton.tsx +++ b/components/player/PlayerButton.tsx @@ -3,6 +3,7 @@ import styled from '@emotion/styled' import { FlexWrapper } from 'components/common/FlexWrapper' import { RootState } from 'features' import { playerActions, playerSelectors, PlayerTime } from 'features/playerSlice' +import { useWheel } from 'hooks/useWheel' import React, { useCallback, useEffect, useState } from 'react' import { useDispatch, useSelector } from 'react-redux' @@ -79,11 +80,8 @@ export const PlayerButton = () => { }, [isVisible], ) - useEffect(() => { - window.addEventListener('wheel', handleWheel) - return (() => window.removeEventListener('wheel', handleWheel)) - }, [handleWheel]) + useWheel({ handleWheel }) return ( diff --git a/components/player/index.tsx b/components/player/index.tsx index c2ffc6b..516e24f 100644 --- a/components/player/index.tsx +++ b/components/player/index.tsx @@ -9,9 +9,9 @@ import { playerActions, } from 'features/playerSlice' import { useFetchWithStore } from 'hooks/useFetch' +import { useWheel } from 'hooks/useWheel' import React, { useCallback, useEffect, useState } from 'react' import { useSelector } from 'react-redux' -import { useScroll } from 'react-use-gesture' import { renderByFetchState } from 'utils/renderUtils' import { Comments } from './Comments' @@ -78,13 +78,7 @@ export const Player: React.FC = () => { }, [isVisible], ) - - useEffect(() => { - window.addEventListener('wheel', handleWheel) - - return (() => window.removeEventListener('wheel', handleWheel)) - }, [handleWheel]) - + useWheel({ handleWheel }) useFetchWithStore(fetchState, () => playerActions.fetch(1)) diff --git a/hooks/useWheel.ts b/hooks/useWheel.ts new file mode 100644 index 0000000..363cf10 --- /dev/null +++ b/hooks/useWheel.ts @@ -0,0 +1,13 @@ +import { useEffect } from 'react' + +interface Params { + handleWheel: (params?: any) => void; +} + +export const useWheel = ({ handleWheel }: Params) => { + useEffect(() => { + window.addEventListener('wheel', handleWheel) + + return (() => window.removeEventListener('wheel', handleWheel)) + }, [handleWheel]) +} From e4ea4127f7d8dbc17f3b5045280461006159cddf Mon Sep 17 00:00:00 2001 From: SoYoung210 Date: Mon, 20 Apr 2020 13:19:36 +0900 Subject: [PATCH 11/13] Move handleWheel to custom hook --- components/player/PlayerButton.tsx | 17 +---------------- components/player/index.tsx | 17 +---------------- hooks/useWheel.ts | 20 ++++++++++++++++++-- 3 files changed, 20 insertions(+), 34 deletions(-) diff --git a/components/player/PlayerButton.tsx b/components/player/PlayerButton.tsx index 8096355..9946357 100644 --- a/components/player/PlayerButton.tsx +++ b/components/player/PlayerButton.tsx @@ -65,23 +65,8 @@ export const PlayerButton = () => { ) const { current } = useSelector(playerSelectors.times) const { toggle, requestUpdateCurrentTime } = playerActions - const [isVisible, setIsVisible] = useState(true) - // TODO: Move to custom hook - const handleWheel = useCallback( - (e: WheelEvent) => { - if (e.deltaY > 0 && isVisible) { - return setIsVisible(false) - } - - if (e.deltaY < 0 && !isVisible) { - return setIsVisible(true) - } - }, - [isVisible], - ) - - useWheel({ handleWheel }) + const { isVisible } = useWheel() return ( diff --git a/components/player/index.tsx b/components/player/index.tsx index 516e24f..c9371f3 100644 --- a/components/player/index.tsx +++ b/components/player/index.tsx @@ -54,7 +54,6 @@ const PlayerTitle = styled<'h2', {isVisible: boolean}>('h2')` ` export const Player: React.FC = () => { - const [isVisible, setIsVisible] = useState(true) const fetchState = useSelector( movieSelectors.movieFetchState, ) @@ -64,21 +63,7 @@ export const Player: React.FC = () => { const currentComment = useSelector( movieSelectors.currentComments, ) - - // TODO: Move to custom hook - const handleWheel = useCallback( - (e: WheelEvent) => { - if (e.deltaY > 0 && isVisible) { - return setIsVisible(false) - } - - if (e.deltaY < 0 && !isVisible) { - return setIsVisible(true) - } - }, - [isVisible], - ) - useWheel({ handleWheel }) + const { isVisible } = useWheel() useFetchWithStore(fetchState, () => playerActions.fetch(1)) diff --git a/hooks/useWheel.ts b/hooks/useWheel.ts index 363cf10..b68877d 100644 --- a/hooks/useWheel.ts +++ b/hooks/useWheel.ts @@ -1,13 +1,29 @@ -import { useEffect } from 'react' +import { useCallback, useEffect, useState } from 'react' interface Params { handleWheel: (params?: any) => void; } -export const useWheel = ({ handleWheel }: Params) => { +export const useWheel = () => { + const [isVisible, setIsVisible] = useState(true) + const handleWheel = useCallback( + (e: WheelEvent) => { + if (e.deltaY > 0 && isVisible) { + return setIsVisible(false) + } + + if (e.deltaY < 0 && !isVisible) { + return setIsVisible(true) + } + }, + [isVisible], + ) + useEffect(() => { window.addEventListener('wheel', handleWheel) return (() => window.removeEventListener('wheel', handleWheel)) }, [handleWheel]) + + return { isVisible, setIsVisible } } From b69d2d55746fff87ace85424c29b55793a93b16a Mon Sep 17 00:00:00 2001 From: SoYoung210 Date: Mon, 20 Apr 2020 13:20:12 +0900 Subject: [PATCH 12/13] Remove unused import --- components/player/PlayerButton.tsx | 2 +- components/player/index.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/components/player/PlayerButton.tsx b/components/player/PlayerButton.tsx index 9946357..a4e4696 100644 --- a/components/player/PlayerButton.tsx +++ b/components/player/PlayerButton.tsx @@ -4,7 +4,7 @@ import { FlexWrapper } from 'components/common/FlexWrapper' import { RootState } from 'features' import { playerActions, playerSelectors, PlayerTime } from 'features/playerSlice' import { useWheel } from 'hooks/useWheel' -import React, { useCallback, useEffect, useState } from 'react' +import React from 'react' import { useDispatch, useSelector } from 'react-redux' // TODO: Move common Component diff --git a/components/player/index.tsx b/components/player/index.tsx index c9371f3..ceeb426 100644 --- a/components/player/index.tsx +++ b/components/player/index.tsx @@ -10,7 +10,7 @@ import { } from 'features/playerSlice' import { useFetchWithStore } from 'hooks/useFetch' import { useWheel } from 'hooks/useWheel' -import React, { useCallback, useEffect, useState } from 'react' +import React from 'react' import { useSelector } from 'react-redux' import { renderByFetchState } from 'utils/renderUtils' From 438a911ef6e2b2eb9836e12dc41a8a186e36d9c2 Mon Sep 17 00:00:00 2001 From: soso Date: Sun, 3 May 2020 16:09:00 +0900 Subject: [PATCH 13/13] Extract HideWrapper to common component --- components/common/HideWrapper.tsx | 43 ++++++++++++++++++++++++++++++ components/player/PlayerButton.tsx | 33 ++--------------------- components/player/index.tsx | 31 ++++----------------- 3 files changed, 50 insertions(+), 57 deletions(-) create mode 100644 components/common/HideWrapper.tsx diff --git a/components/common/HideWrapper.tsx b/components/common/HideWrapper.tsx new file mode 100644 index 0000000..978607c --- /dev/null +++ b/components/common/HideWrapper.tsx @@ -0,0 +1,43 @@ +import { keyframes } from '@emotion/core' +import styled from '@emotion/styled' +import { useWheel } from 'hooks/useWheel' +import React from 'react' + +const hide = keyframes` + 0% { + max-height: 500px; + } + + 100% { + max-height: 0; + } +` + +const show = keyframes` + 0% { + max-height: 0; + } + + 100% { + max-height: 500px; + } +` + +const Container = styled<'div', {isVisible: boolean}>('div')` + animation: ${({ isVisible }) => isVisible ? show : hide} 0.7s ease-in-out forwards 1; + overflow: hidden; +` + +interface Props { + children: React.ReactNode; +} + +export const HideWrapper = ({ children }: Props) => { + const { isVisible } = useWheel() + + return ( + + { children } + + ) +} diff --git a/components/player/PlayerButton.tsx b/components/player/PlayerButton.tsx index a4e4696..f3ddb9c 100644 --- a/components/player/PlayerButton.tsx +++ b/components/player/PlayerButton.tsx @@ -1,38 +1,11 @@ -import { keyframes } from '@emotion/core' import styled from '@emotion/styled' import { FlexWrapper } from 'components/common/FlexWrapper' +import { HideWrapper } from 'components/common/HideWrapper' import { RootState } from 'features' import { playerActions, playerSelectors, PlayerTime } from 'features/playerSlice' -import { useWheel } from 'hooks/useWheel' import React from 'react' import { useDispatch, useSelector } from 'react-redux' -// TODO: Move common Component -const hide = keyframes` - 0% { - max-height: 500px; - } - - 100% { - max-height: 0; - } -` - -const show = keyframes` - 0% { - max-height: 0; - } - - 100% { - max-height: 500px; - } -` - -const HideWrapper = styled<'div', {isVisible: boolean}>('div')` - animation: ${({ isVisible }) => isVisible ? show : hide} 0.7s ease-in-out forwards 1; - overflow: hidden; -` - const PlayButton = styled<'div', {isPlaying: boolean}>('div')` margin: 0 10px 0 10px; width: 24px; @@ -66,10 +39,8 @@ export const PlayerButton = () => { const { current } = useSelector(playerSelectors.times) const { toggle, requestUpdateCurrentTime } = playerActions - const { isVisible } = useWheel() - return ( - + dispatch(requestUpdateCurrentTime(current-5))} diff --git a/components/player/index.tsx b/components/player/index.tsx index ceeb426..e5ac3ad 100644 --- a/components/player/index.tsx +++ b/components/player/index.tsx @@ -1,6 +1,6 @@ -import { keyframes } from '@emotion/core' import styled from '@emotion/styled' import { FetchStatusCode } from 'api' +import { HideWrapper } from 'components/common/HideWrapper' import { RootState } from 'features' import { Comment, @@ -9,7 +9,6 @@ import { playerActions, } from 'features/playerSlice' import { useFetchWithStore } from 'hooks/useFetch' -import { useWheel } from 'hooks/useWheel' import React from 'react' import { useSelector } from 'react-redux' import { renderByFetchState } from 'utils/renderUtils' @@ -21,27 +20,7 @@ interface Props {} const COMMENT_WRAPPER = 'commentWrapper' -const hide = keyframes` - 0% { - max-height: 500px; - } - - 100% { - max-height: 0; - } -` - -const show = keyframes` - 0% { - max-height: 0; - } - - 100% { - max-height: 500px; - } -` - -const PlayerTitle = styled<'h2', {isVisible: boolean}>('h2')` +const PlayerTitle = styled.h2` width: 100%; overflow: hidden; font-style: normal; @@ -50,7 +29,6 @@ const PlayerTitle = styled<'h2', {isVisible: boolean}>('h2')` line-height: 29px; text-align: center; color: #ffffff; - animation: ${({ isVisible }) => isVisible ? show : hide} 1s ease-in-out forwards 1; ` export const Player: React.FC = () => { @@ -63,7 +41,6 @@ export const Player: React.FC = () => { const currentComment = useSelector( movieSelectors.currentComments, ) - const { isVisible } = useWheel() useFetchWithStore(fetchState, () => playerActions.fetch(1)) @@ -71,7 +48,9 @@ export const Player: React.FC = () => { return ( <> - {title} + + {title} +
{