Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Feat/#479 킬링파트 등록 시 구간 선택을 토글 형식으로 변경 #482

Closed
wants to merge 5 commits into from
Closed

Feat/#479 킬링파트 등록 시 구간 선택을 토글 형식으로 변경 #482

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
a7c7a78
chore: 사용하지 않는 interval Input 삭제
ukkodeveloper Sep 28, 2023
5cda5c3
feat: interval에 null 타입 추가 후 적용
ukkodeveloper Sep 28, 2023
35843b1
feat: 구간이 선택되어있지 않은 경우 등록 버튼 disabled 처리
ukkodeveloper Sep 28, 2023
a45c321
feat: 등록 구간 범위 변경 시 구간 시작점으로 이동
ukkodeveloper Sep 28, 2023
a1e960e
style: style lint 적용
ukkodeveloper Sep 28, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
37 changes: 0 additions & 37 deletions frontend/src/features/songs/components/IntervalInput.stories.tsx
View file
Open in desktop

This file was deleted.

155 changes: 0 additions & 155 deletions frontend/src/features/songs/components/IntervalInput.tsx
View file
Open in desktop

This file was deleted.

27 changes: 19 additions & 8 deletions frontend/src/features/songs/components/VoteInterface.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,16 +16,16 @@ const VoteInterface = () => {
const { showToast } = useToastContext();
const { interval, partStartTime, songId, songVideoId } = useVoteInterfaceContext();
const { videoPlayer } = useVideoPlayerContext();

const { createKillingPart } = usePostKillingPart();
const { isOpen, openModal, closeModal } = useModal();

const { user } = useAuthContext();

const voteTimeText = toPlayingTimeText(partStartTime, partStartTime + interval);

const voteTimeText = interval ? toPlayingTimeText(partStartTime, partStartTime + interval) : '';
const isDisabledSummit = interval === null;
const submitKillingPart = async () => {
if (!interval) return;
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💬 개행좀 부탁드려도 될까요?😭 22

videoPlayer.current?.pauseVideo();

await createKillingPart(songId, { startSecond: partStartTime, length: interval });
openModal();
};
Expand All @@ -46,9 +46,15 @@ const VoteInterface = () => {
<Spacing direction="vertical" size={24} />
<VideoSlider />
<Spacing direction="vertical" size={16} />
<Register type="button" onClick={submitKillingPart}>
<Register type="button" onClick={submitKillingPart} disabled={isDisabledSummit}>
등록
</Register>
{isDisabledSummit && (
<>
<Spacing direction="vertical" size={8} />
<Information>킬링파트 구간 선택 후 등록이 가능합니다.</Information>
</>
)}

<Modal isOpen={isOpen} closeModal={closeModal}>
<ModalTitle>
Expand Down Expand Up @@ -90,15 +96,16 @@ const RegisterTitle = styled.p`
`;

const Register = styled.button`
cursor: pointer;
cursor: ${({ disabled }) => (disabled ? 'not-allowed' : 'pointer')};
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

globalStyle로 가면 좋을 것 같네요!

button {
  cursor: pointer;
  background: none;
  border: 0;

  &:disabled {
    cursor: not-allowed;
  }
}


width: 100%;
height: 36px;

font-weight: 700;
color: ${({ theme: { color } }) => color.white};
color: ${({ theme: { color }, disabled }) => (disabled ? color.disabled : color.white)};

background-color: ${({ theme: { color } }) => color.primary};
background-color: ${({ theme: { color }, disabled }) =>
disabled ? color.disabledBackground : color.primary};
border: none;
border-radius: 10px;
`;
Expand Down Expand Up @@ -150,3 +157,7 @@ const ButtonContainer = styled.div`
const Warning = styled.div`
color: ${({ theme: { color } }) => color.subText};
`;

const Information = styled.p`
color: ${({ theme: { color } }) => color.primary};
`;
11 changes: 9 additions & 2 deletions frontend/src/features/songs/components/VoteInterfaceProvider.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@

interface VoteInterfaceContextProps extends VoteInterfaceProviderProps {
partStartTime: number;
interval: KillingPartInterval;
interval: KillingPartInterval | null;
// NOTE: Why both setState and eventHandler have same naming convention?
updatePartStartTime: (timeUnit: string, value: number) => void;
updateKillingPartInterval: React.MouseEventHandler<HTMLButtonElement>;
Expand All @@ -25,19 +25,25 @@
songId,
songVideoId,
}: PropsWithChildren<VoteInterfaceProviderProps>) => {
const [interval, setInterval] = useState<KillingPartInterval>(10);
const [interval, setInterval] = useState<KillingPartInterval | null>(10);
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

KILLING_PART_INTERVAL.TEN
작업하시는 김에 상수화 수정해주시면 감사합니당🙇‍♂️

const [partStartTime, setPartStartTime] = useState(0);
const { videoPlayer } = useVideoPlayerContext();

const updateKillingPartInterval: React.MouseEventHandler<HTMLButtonElement> = (e) => {
const newInterval = Number(e.currentTarget.dataset['interval']) as KillingPartInterval;
if (newInterval === interval) {
setInterval(null);
return;
}

const partEndTime = partStartTime + newInterval;

if (partEndTime > videoLength) {
const overflowedSeconds = partEndTime - videoLength;
setPartStartTime(partStartTime - overflowedSeconds);
}

videoPlayer.current?.seekTo(partStartTime, true);
setInterval(newInterval);
};

Expand All @@ -62,12 +68,13 @@
};

useEffect(() => {
if (!interval) return;
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💬 개행좀 부탁드려도 될까요?😭

const timer = window.setInterval(() => {
videoPlayer.current?.seekTo(partStartTime, true);
}, interval * 1000);

return () => window.clearInterval(timer);
}, [videoPlayer.current, partStartTime, interval]);

Check warning on line 77 in frontend/src/features/songs/components/VoteInterfaceProvider.tsx

View workflow job for this annotation

GitHub Actions / test 

React Hook useEffect has a missing dependency: 'videoPlayer'. Either include it or remove the dependency array. Mutable values like 'videoPlayer.current' aren't valid dependencies because mutating them doesn't re-render the component

return (
<VoteInterfaceContext.Provider
Expand Down
15 changes: 9 additions & 6 deletions frontend/src/features/youtube/components/VideoSlider.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,9 +8,12 @@ const VideoSlider = () => {
const { interval, partStartTime, videoLength, updatePartStartTime } = useVoteInterfaceContext();
const { videoPlayer } = useVideoPlayerContext();

const partEndTime = partStartTime + interval;
const partStartTimeText = toMinSecText(partStartTime);
const partEndTimeText = toMinSecText(partEndTime);
const partStartTimeText = interval ? toMinSecText(partStartTime) : toMinSecText(0);
Copy link
Collaborator

@cruelladevil cruelladevil Sep 30, 2023 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💬 partStartTimeText는 toMinSecText(partStartTime)로 고정적이면 좋을 것 같은데 어떻게 생각하시나용

Kapture 2023-10-01 at 01 31 36

const partEndTimeText = interval
? toMinSecText(partStartTime + interval)
: toMinSecText(videoLength);

const maxPlayingTime = interval ? videoLength - interval : videoLength;

const changeTime: ChangeEventHandler<HTMLInputElement> = ({
currentTarget: { valueAsNumber: currentSelectedTime },
Expand Down Expand Up @@ -40,7 +43,7 @@ const VideoSlider = () => {
onTouchEnd={seekToTime}
onMouseUp={seekToTime}
min={0}
max={videoLength - interval}
max={maxPlayingTime}
step={1}
interval={interval}
/>
Expand Down Expand Up @@ -86,7 +89,7 @@ export const PartEndTime = styled.span`
font-weight: 700;
`;

const Slider = styled.input<{ interval: number }>`
const Slider = styled.input<{ interval: number | null }>`
cursor: pointer;

width: 100%;
Expand All @@ -99,7 +102,7 @@ const Slider = styled.input<{ interval: number }>`
position: relative;
top: -4px;

width: ${({ interval }) => interval * 6}px;
width: ${({ interval }) => (interval ? interval * 6 : 2)}px;
height: 16px;

-webkit-appearance: none;
Expand Down
3 changes: 2 additions & 1 deletion frontend/src/pages/LoginPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -109,11 +109,12 @@ const PlatformName = styled.div`
display: flex;
align-items: center;
justify-content: center;
text-align: center;

width: 400px;
height: 60px;

text-align: center;

border-radius: 12px;

@media (max-width: ${({ theme }) => theme.breakPoints.xs}) {
Expand Down
Loading