improve: duration formatting (#912)

* improve duration formatting

* Update auto-imports.d.ts

Author: ameer2468

apps/web/app/(org)/dashboard/_components/Navbar/SpacesList.tsx

@@ -342,7 +342,7 @@ const SpacesList = ({ toggleMobileNav }: { toggleMobileNav?: () => void }) => {
 						? `Are you sure you want to delete the space "${pendingDeleteSpace.name}"? This action cannot be undone.`
 						: ""
 				}
-				confirmLabel="Delete"
+				confirmLabel={removing ? "Deleting..." : "Delete"}
 				cancelLabel="Cancel"
 				loading={removing}
 				onConfirm={confirmRemoveSpace}

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

@@ -19,7 +19,6 @@ 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";
@@ -105,23 +104,6 @@ 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);
@@ -399,19 +381,14 @@ export const CapCard = ({
 							icon={<FontAwesomeIcon icon={faVideo} />}
 							title="Delete Cap"
 							description={`Are you sure you want to delete the cap "${cap.name}"? This action cannot be undone.`}
-							confirmLabel="Delete"
+							confirmLabel={deleteMutation.isPending ? "Deleting..." : "Delete"}
 							cancelLabel="Cancel"
 							loading={deleteMutation.isPending}
 							onConfirm={() => deleteMutation.mutate()}
 							onCancel={() => setConfirmOpen(false)}
 						/>
 					</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(
@@ -452,6 +429,7 @@ export const CapCard = ({
 					href={`/s/${cap.id}`}
 				>
 					<VideoThumbnail
+						videoDuration={cap.metadata?.duration}
 						imageClass={clsx(
 							anyCapSelected
 								? "opacity-50"

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

@@ -3,9 +3,7 @@ import type { Folder } from "@cap/web-domain";
 import { faTrash } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { Fit, Layout, useRive } from "@rive-app/react-canvas";
-import { useMutation } from "@tanstack/react-query";
 import clsx from "clsx";
-import { Effect } from "effect";
 import Link from "next/link";
 import { useRouter } from "next/navigation";
 import { useEffect, useRef, useState } from "react";
@@ -382,6 +380,7 @@ const FolderCard = ({
 					icon={<FontAwesomeIcon icon={faTrash} />}
 					onConfirm={() => deleteFolder.mutate(id)}
 					onCancel={() => setConfirmDeleteFolderOpen(false)}
+					confirmLabel={deleteFolder.isPending ? "Deleting..." : "Delete"}
 					title="Delete Folder"
 					description={`Are you sure you want to delete the folder "${name}"? This action cannot be undone.`}
 				/>

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

@@ -84,7 +84,7 @@ export const SelectedCapsBar = ({
 							} cap${
 								selectedCaps.length === 1 ? "" : "s"
 							}? This action cannot be undone.`}
-							confirmLabel="Delete"
+							confirmLabel={isDeleting ? "Deleting..." : "Delete"}
 							cancelLabel="Cancel"
 							confirmVariant="dark"
 							loading={isDeleting}

apps/web/app/(org)/dashboard/settings/organization/components/CustomDomain.tsx

@@ -72,7 +72,7 @@ export function CustomDomain() {
 				icon={<FontAwesomeIcon icon={faGlobe} />}
 				description={`Are you sure you want to remove this custom domain: ${orgCustomDomain}?`}
 				onConfirm={handleRemoveDomain}
-				confirmLabel="Remove"
+				confirmLabel={removeDomainMutation.isPending ? "Removing..." : "Remove"}
 				cancelLabel="Cancel"
 				loading={removeDomainMutation.isPending}
 				onCancel={() => setConfirmOpen(false)}

apps/web/app/(org)/dashboard/settings/organization/components/MembersCard.tsx

@@ -130,6 +130,7 @@ export const MembersCard = ({
          from your organization? this action cannot be undone.`
 						: ""
 				}
+				confirmLabel={removing ? "Removing..." : "Remove"}
 				cancelLabel="Cancel"
 				loading={removing}
 				onConfirm={confirmRemoveMember}

apps/web/app/(org)/dashboard/spaces/browse/page.tsx

@@ -231,7 +231,7 @@ export default function BrowseSpacesPage() {
 						? `Are you sure you want to delete the space "${pendingDeleteSpace?.name || "selected"}"? This action cannot be undone.`
 						: "Are you sure you want to delete this space? This action cannot be undone."
 				}
-				confirmLabel="Delete"
+				confirmLabel={removing ? "Deleting..." : "Delete"}
 				cancelLabel="Cancel"
 				loading={removing}
 				onConfirm={confirmRemoveSpace}

apps/web/components/VideoThumbnail.tsx

@@ -1,6 +1,7 @@
 import { LogoSpinner } from "@cap/ui";
 import { useQuery } from "@tanstack/react-query";
 import clsx from "clsx";
+import moment from "moment";
 import Image from "next/image";
 import { memo, useEffect, useRef, useState } from "react";
 import { useUploadingContext } from "@/app/(org)/dashboard/caps/UploadingContext";
@@ -12,8 +13,28 @@ interface VideoThumbnailProps {
 	imageClass?: string;
 	objectFit?: string;
 	containerClass?: string;
+	videoDuration?: string;
 }
 
+const formatDuration = (duration: string) => {
+	const durationMs = parseFloat(duration);
+	const momentDuration = moment.duration(durationMs, "milliseconds");
+
+	const totalHours = Math.floor(momentDuration.asHours());
+	const totalMinutes = Math.floor(momentDuration.asMinutes());
+	const remainingSeconds = Math.ceil(momentDuration.asSeconds() % 60); // Use ceil to avoid 0 secs
+
+	if (totalHours > 0) {
+		return `${totalHours} hr${totalHours > 1 ? "s" : ""}`;
+	} else if (totalMinutes > 0) {
+		return `${totalMinutes} min${totalMinutes > 1 ? "s" : ""}`;
+	} else if (remainingSeconds > 0) {
+		return `${remainingSeconds} sec${remainingSeconds !== 1 ? "s" : ""}`;
+	} else {
+		return "< 1 sec"; // For very short durations
+	}
+};
+
 function generateRandomGrayScaleColor() {
 	const minGrayScaleValue = 190;
 	const maxGrayScaleValue = 235;
@@ -31,6 +52,7 @@ export const VideoThumbnail: React.FC<VideoThumbnailProps> = memo(
 		imageClass,
 		objectFit = "cover",
 		containerClass,
+		videoDuration,
 	}) => {
 		const imageUrl = useQuery({
 			queryKey: ["thumbnail", userId, videoId],
@@ -86,6 +108,11 @@ export const VideoThumbnail: React.FC<VideoThumbnailProps> = memo(
 						)
 					)}
 				</div>
+				{videoDuration && Number(videoDuration) > 0 && (
+					<p className="text-white leading-0 px-2 left-3 rounded-full backdrop-blur-sm absolute z-10 bottom-3 bg-black/50 text-[11px]">
+						{formatDuration(videoDuration)}
+					</p>
+				)}
 				{imageUrl.data && (
 					<Image
 						ref={imageRef}

packages/ui-solid/src/auto-imports.d.ts

@@ -3,7 +3,6 @@
 // @ts-nocheck
 // noinspection JSUnusedGlobalSymbols
 // Generated by unplugin-auto-import
-// biome-ignore lint: disable
 export {};
 declare global {
 	const IconCapArrows: typeof import("~icons/cap/arrows.jsx")["default"];