make cap selection bar appear faster, fix weird hover of thumbnails (#1054)

Author: ameer2468

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

@@ -288,11 +288,11 @@ export const CapCard = ({
 				onDragStart={handleDragStart}
 				onDragEnd={handleDragEnd}
 				className={clsx(
-					"flex relative transition-colors duration-200 flex-col gap-4 w-full h-full rounded-xl cursor-default bg-gray-1 border border-gray-3 group border-px",
+					"flex relative overflow-hidden transition-colors duration-200 flex-col gap-4 w-full h-full rounded-xl cursor-default bg-gray-1 border border-gray-3 group",
 					isSelected
-						? "!border-blue-10 border-px"
+						? "!border-blue-10"
 						: anyCapSelected
-							? "border-blue-10 border-px hover:border-blue-10"
+							? "border-blue-10 hover:border-blue-10"
 							: "hover:border-blue-10",
 					isDragging && "opacity-50",
 					isOwner && !anyCapSelected && "cursor-grab active:cursor-grabbing",

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

@@ -44,9 +44,9 @@ export const SelectedCapsBar = ({
 						transition: { duration: 0.2 },
 					}}
 					transition={{
-						opacity: { duration: 0.3, ease: "easeOut" },
-						y: { type: "spring", damping: 15, stiffness: 200 },
-						scale: { type: "spring", damping: 15, stiffness: 200 },
+						opacity: { duration: 0.2, ease: "easeOut" },
+						y: { type: "spring", damping: 15, stiffness: 300 },
+						scale: { type: "spring", damping: 15, stiffness: 300 },
 					}}
 				>
 					<div className="flex gap-1 text-sm font-medium text-gray-10">

apps/web/components/VideoThumbnail.tsx

@@ -85,7 +85,7 @@ export const VideoThumbnail: React.FC<VideoThumbnailProps> = memo(
 		>("loading");
 
 		useEffect(() => {
-			if (imageRef.current?.complete && imageRef.current.naturalWidth != 0) {
+			if (imageRef.current?.complete && imageRef.current.naturalWidth !== 0) {
 				setImageStatus("success");
 			}
 		}, []);
@@ -124,7 +124,7 @@ export const VideoThumbnail: React.FC<VideoThumbnailProps> = memo(
 						key={videoId}
 						style={{ objectFit: objectFit as any }}
 						className={clsx(
-							"w-full h-full",
+							"w-full h-full rounded-t-xl",
 							imageClass,
 							imageStatus === "loading" && "opacity-0",
 						)}