時間関連の関数をリファクタリング

takusea · Oct 26, 2024 · 3b75e3f · 3b75e3f
1 parent e970ee5
commit 3b75e3f
Show file tree

Hide file tree

Showing 5 changed files with 34 additions and 28 deletions.
diff --git a/src/features/video-metadata/formatEmbedUrl.ts b/src/features/video-metadata/formatEmbedUrl.ts
@@ -1,10 +1,11 @@
-import { formatTimeFromSeconds } from "../../util/timeFormatter";
+import { convertTimeFromSeconds } from "../../util/timeFormatter";
 import type { VideoMetadata } from "./type";
 
 export function formatUrlFromYouTubeMetadata(metadata: VideoMetadata) {
 	return `https://www.youtube.com/embed/${metadata.id}?start=${metadata.seconds}`;
 }
 
 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
@@ -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
@@ -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 (
 		<TwitchPlayer
 			className="aspect-video rounded-lg overflow-hidden"
 			video={props.metadata.id}
-			time={formatTimeFromSeconds(props.metadata.seconds ?? 0)}
+			time={`${time.hours}h${time.minutes}m${time.seconds}s`}
 			width={"100%"}
 			autoplay={false}
 			allowFullscreen

diff --git a/src/features/video-player/VideoPlayerEditForm.tsx b/src/features/video-player/VideoPlayerEditForm.tsx
@@ -6,6 +6,10 @@ import type { VideoMetadata } from "../video-metadata/type";
 import { TimeField } from "../../components/TimeField";
 import { Label } from "../../components/Label";
 import { Tooltip } from "../../components/Tooltip";
+import {
+	convertTimeFromSeconds,
+	parseTimeToSeconds,
+} from "../../util/timeFormatter";
 
 type Props = {
 	metadata: VideoMetadata;
@@ -21,31 +25,24 @@ export function VideoPlayerEditForm(props: Props) {
 	const [seconds, setSeconds] = useState(props.metadata.seconds);
 
 	function toDisplayTime(seconds: number) {
-		const hours = Math.floor(seconds / 3600);
-		const minutes = Math.floor((seconds % 3600) / 60);
-		const remainingSeconds = seconds % 60;
+		const time = convertTimeFromSeconds(seconds);
 
-		return `${hours.toString().padStart(2, "0")}:${minutes.toString().padStart(2, "0")}:${remainingSeconds.toString().padStart(2, "0")}`;
+		const toPadding = (time: number) => time.toString().padStart(2, "0");
+
+		return `${toPadding(time.hours)}:${toPadding(time.minutes)}:${toPadding(time.seconds)}`;
 	}
 
 	function handleTimeChange(event: ChangeEvent<HTMLInputElement>): 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
@@ -1,22 +1,28 @@
-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");
 	}
 
 	const hours = Number.parseInt(match[1], 10);
 	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;
 };