diff --git a/package.json b/package.json index 50165a1..779b2bb 100644 --- a/package.json +++ b/package.json @@ -14,6 +14,7 @@ "@tanstack/react-query": "^5.27.5", "framer-motion": "^11.0.12", "ky": "^1.2.2", + "luxon": "^3.4.4", "next": "14.1.3", "next-pwa": "^5.6.0", "react": "^18", @@ -25,6 +26,7 @@ "devDependencies": { "@tanstack/react-query-devtools": "^5.27.8", "@trivago/prettier-plugin-sort-imports": "^4.3.0", + "@types/luxon": "^3.4.2", "@types/next-pwa": "^5.6.9", "@types/node": "^20", "@types/react": "^18", diff --git a/src/app/trending/VideoCard.tsx b/src/app/trending/VideoCard.tsx index add1bae..b0d1290 100644 --- a/src/app/trending/VideoCard.tsx +++ b/src/app/trending/VideoCard.tsx @@ -4,7 +4,8 @@ import { Card, CardFooter, CardBody } from "@nextui-org/card"; import { Image } from "@nextui-org/image"; import { Divider } from "@nextui-org/divider"; import Link from "next/link"; -import formatNumber from "@/utils/formatNumbers"; +import formatViewCount from "@/utils/formatViewCount"; +import formatDuration from "@/utils/formatDuration"; export const VideoCard: Component<{ data: TrendingVideo }> = ({ data: video @@ -21,7 +22,7 @@ export const VideoCard: Component<{ data: TrendingVideo }> = ({ width={600} />

- {video.duration} + {formatDuration(video.duration)}

@@ -39,7 +40,7 @@ export const VideoCard: Component<{ data: TrendingVideo }> = ({

- Views: {formatNumber(video.views)} + Views: {formatViewCount(video.views)}

diff --git a/src/utils/formatDuration.ts b/src/utils/formatDuration.ts new file mode 100644 index 0000000..388b288 --- /dev/null +++ b/src/utils/formatDuration.ts @@ -0,0 +1,9 @@ +import { Duration } from "luxon"; + +const formatDuration = (ms: number): string => { + if (ms / (60 * 60 * 1000) >= 1) + return Duration.fromMillis(ms).toFormat("HH:mm:ss"); + else return Duration.fromMillis(ms).toFormat("mm:ss"); +}; + +export default formatDuration; diff --git a/src/utils/formatNumbers.ts b/src/utils/formatViewCount.ts similarity index 81% rename from src/utils/formatNumbers.ts rename to src/utils/formatViewCount.ts index 5a486e7..036f76d 100644 --- a/src/utils/formatNumbers.ts +++ b/src/utils/formatViewCount.ts @@ -1,4 +1,4 @@ -const formatNumber = (num: number): string => { +const formatViewCount = (num: number): string => { // Nine Zeroes for Billions return Math.abs(num) >= 1.0e9 ? (Math.abs(num) / 1.0e9).toPrecision(3) + "B" @@ -11,4 +11,4 @@ const formatNumber = (num: number): string => { : Math.abs(num).toString(); }; -export default formatNumber; +export default formatViewCount; diff --git a/yarn.lock b/yarn.lock index ad3ffc6..7eddb01 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3023,6 +3023,11 @@ resolved "https://registry.yarnpkg.com/@types/json5/-/json5-0.0.29.tgz#ee28707ae94e11d2b827bcbe5270bcea7f3e71ee" integrity sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ== +"@types/luxon@^3.4.2": + version "3.4.2" + resolved "https://registry.yarnpkg.com/@types/luxon/-/luxon-3.4.2.tgz#e4fc7214a420173cea47739c33cdf10874694db7" + integrity sha512-TifLZlFudklWlMBfhubvgqTXRzLDI5pCbGa4P8a3wPyUQSW+1xQ5eDsreP9DWHX3tjq1ke96uYG/nwundroWcA== + "@types/minimatch@*": version "5.1.2" resolved "https://registry.yarnpkg.com/@types/minimatch/-/minimatch-5.1.2.tgz#07508b45797cb81ec3f273011b054cd0755eddca" @@ -5113,6 +5118,11 @@ lru-cache@^6.0.0: resolved "https://registry.yarnpkg.com/lru-cache/-/lru-cache-10.2.0.tgz#0bd445ca57363465900f4d1f9bd8db343a4d95c3" integrity sha512-2bIM8x+VAf6JT4bKAljS1qUWgMsqZRPGJS6FSahIMPVvctcNhyVp7AJu7quxOW9jwkryBReKZY5tY5JYv2n/7Q== +luxon@^3.4.4: + version "3.4.4" + resolved "https://registry.yarnpkg.com/luxon/-/luxon-3.4.4.tgz#cf20dc27dc532ba41a169c43fdcc0063601577af" + integrity sha512-zobTr7akeGHnv7eBOXcRgMeCP6+uyYsczwmeRCauvpvaAltgNyTbLH/+VaEAPUeWBT+1GuNmz4wC/6jtQzbbVA== + magic-string@^0.25.0, magic-string@^0.25.7: version "0.25.9" resolved "https://registry.yarnpkg.com/magic-string/-/magic-string-0.25.9.tgz#de7f9faf91ef8a1c91d02c2e5314c8277dbcdd1c"