trending: format video duration

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",

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}
 					/>
 					<p className="text-small rounded-md z-10 absolute bottom-5 right-5 bg-content2 p-1">
-						{video.duration}
+						{formatDuration(video.duration)}
 					</p>
 				</CardBody>
 				<Divider />
@@ -39,7 +40,7 @@ export const VideoCard: Component<{ data: TrendingVideo }> = ({
 							</p>
 
 							<p className="text-small tracking-tight text-default-400">
-								Views: {formatNumber(video.views)}
+								Views: {formatViewCount(video.views)}
 							</p>
 						</div>
 					</div>

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;

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;

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"