new: add video duration to cards (#902)

* add video duration

* cleanup

Author: ameer2468

apps/web/app/(org)/dashboard/caps/components/CapCard/CapCard.tsx

@@ -19,6 +19,7 @@ import {
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { useMutation } from "@tanstack/react-query";
 import clsx from "clsx";
+import moment from "moment";
 import Link from "next/link";
 import { useRouter } from "next/navigation";
 import { type PropsWithChildren, useState } from "react";
@@ -104,6 +105,23 @@ export const CapCard = ({
 
 	const router = useRouter();
 
+	const formatDuration = (duration: string) => {
+		if (!duration) return "0 secs";
+
+		const momentDuration = moment.duration(duration, "milliseconds");
+		const totalMinutes = Math.floor(momentDuration.asMinutes());
+		const totalHours = Math.floor(momentDuration.asHours());
+		const seconds = momentDuration.seconds();
+
+		if (totalHours > 0) {
+			return "1 hr";
+		} else if (totalMinutes > 0) {
+			return `${totalMinutes} mins`;
+		} else {
+			return `${seconds} secs`;
+		}
+	};
+
 	const downloadMutation = useMutation({
 		mutationFn: async () => {
 			const response = await downloadVideo(cap.id);
@@ -389,6 +407,11 @@ export const CapCard = ({
 						/>
 					</div>
 				)}
+				{cap.metadata?.duration && (
+					<p className="text-white leading-0 px-2 py-px rounded-full backdrop-blur-sm absolute z-10 left-3 top-[112px] bg-black/50 text-[10px]">
+						{formatDuration(cap.metadata.duration as string)}
+					</p>
+				)}
 				{!sharedCapCard && onSelectToggle && (
 					<div
 						className={clsx(