diff --git a/src/features/video-metadata/formatEmbedUrl.ts b/src/features/video-metadata/formatEmbedUrl.ts index a9f6fb5..9cd9266 100644 --- a/src/features/video-metadata/formatEmbedUrl.ts +++ b/src/features/video-metadata/formatEmbedUrl.ts @@ -1,4 +1,4 @@ -import { formatTimeFromSeconds } from "../../util/timeFormatter"; +import { convertTimeFromSeconds } from "../../util/timeFormatter"; import type { VideoMetadata } from "./type"; export function formatUrlFromYouTubeMetadata(metadata: VideoMetadata) { @@ -6,5 +6,6 @@ export function formatUrlFromYouTubeMetadata(metadata: VideoMetadata) { } export function formatUrlFromTwitchMetadata(metadata: VideoMetadata) { - return `https://player.twitch.tv/?video=${metadata.id}&parent=${window.location.hostname}&time=${formatTimeFromSeconds(metadata.seconds ?? 0)}&autoplay=false`; + const time = convertTimeFromSeconds(metadata.seconds ?? 0); + return `https://player.twitch.tv/?video=${metadata.id}&parent=${window.location.hostname}&time=${time.hours}h${time.minutes}m${time.seconds}s&autoplay=false`; } diff --git a/src/features/video-metadata/parseUrl.ts b/src/features/video-metadata/parseUrl.ts index 0a1de7b..a3ee92d 100644 --- a/src/features/video-metadata/parseUrl.ts +++ b/src/features/video-metadata/parseUrl.ts @@ -50,6 +50,6 @@ export function parseUrlToTwitchMetadata(url: string): VideoMetadata { return { type: "tw", id: match[0].slice(1, match[0].length - 1), - seconds: time !== null ? parseTimeToSeconds(time) : 0, + seconds: time !== null ? parseTimeToSeconds(time, /(\d+)h(\d+)m(\d+)s/) : 0, }; } diff --git a/src/features/video-player/TwitchVideoViewer.tsx b/src/features/video-player/TwitchVideoViewer.tsx index 0b9d2a4..060b9a9 100644 --- a/src/features/video-player/TwitchVideoViewer.tsx +++ b/src/features/video-player/TwitchVideoViewer.tsx @@ -1,6 +1,6 @@ import { TwitchPlayer, type TwitchPlayerInstance } from "react-twitch-embed"; import type { VideoMetadata } from "../video-metadata/type"; -import { formatTimeFromSeconds } from "../../util/timeFormatter"; +import { convertTimeFromSeconds } from "../../util/timeFormatter"; type Props = { metadata: VideoMetadata; @@ -17,11 +17,13 @@ export function TwitchVideoViewer(props: Props) { }, 1000); } + const time = convertTimeFromSeconds(props.metadata.seconds ?? 0); + return ( time.toString().padStart(2, "0"); + + return `${toPadding(time.hours)}:${toPadding(time.minutes)}:${toPadding(time.seconds)}`; } function handleTimeChange(event: ChangeEvent): void { - const arr = event.currentTarget.value.split(":"); - if (arr.length !== 3) { - return; - } - - const hours = Number.parseInt(arr[0], 10) ?? 0; - const minutes = Number.parseInt(arr[1], 10); - const seconds = Number.parseInt(arr[2], 10); + const seconds = parseTimeToSeconds( + event.currentTarget.value, + /(\d+):(\d+):(\d+)/, + ); - const isContainNaN = - Number.isNaN(hours) || Number.isNaN(minutes) || Number.isNaN(seconds); - const isOvered = minutes >= 60 || seconds >= 60; - if (isContainNaN || isOvered) { + if (!seconds) { return; } - setSeconds(hours * 3600 + minutes * 60 + seconds); + setSeconds(seconds); } return ( diff --git a/src/util/timeFormatter.ts b/src/util/timeFormatter.ts index 9761811..1f81d61 100644 --- a/src/util/timeFormatter.ts +++ b/src/util/timeFormatter.ts @@ -1,16 +1,15 @@ -export const formatTimeFromSeconds = (seconds: number) => { +export const convertTimeFromSeconds = (seconds: number) => { const hours = Math.floor(seconds / 3600); const minutes = Math.floor((seconds % 3600) / 60); const remainingSeconds = seconds % 60; - return `${hours}h${minutes}m${remainingSeconds}s`; + return { hours, minutes, seconds: remainingSeconds }; }; -export const parseTimeToSeconds = (time: string) => { - const timeRegex = /(\d+)h(\d+)m(\d+)s/; - const match = time.match(timeRegex); +export const parseTimeToSeconds = (time: string, regex: RegExp) => { + const match = time.match(regex); - if (!match) { + if (match?.length !== 4) { throw new Error("Invalid time format"); } @@ -18,5 +17,12 @@ export const parseTimeToSeconds = (time: string) => { const minutes = Number.parseInt(match[2], 10); const seconds = Number.parseInt(match[3], 10); + const isContainNaN = + Number.isNaN(hours) || Number.isNaN(minutes) || Number.isNaN(seconds); + const isOvered = minutes >= 60 || seconds >= 60; + if (isContainNaN || isOvered) { + throw new Error("Invalid time format"); + } + return hours * 3600 + minutes * 60 + seconds; };