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 1 commit
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
4 changes: 3 additions & 1 deletion frontend/src/features/songs/components/VoteInterface.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,10 +22,12 @@ const VoteInterface = () => {

const { user } = useAuthContext();

const voteTimeText = toPlayingTimeText(partStartTime, partStartTime + interval);
const voteTimeText = interval ? toPlayingTimeText(partStartTime, partStartTime + interval) : '';

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 Down
10 changes: 8 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 @@ import type { PropsWithChildren } from 'react';

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,12 +25,17 @@ export const VoteInterfaceProvider = ({
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) {
Expand Down Expand Up @@ -62,6 +67,7 @@ export const VoteInterfaceProvider = ({
};

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);
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 : 6)}px;
height: 16px;

-webkit-appearance: none;
Expand Down