@@ -292,7 +292,7 @@ export const CapCard = ({
292
292
onDragStart = { handleDragStart }
293
293
onDragEnd = { handleDragEnd }
294
294
className = { clsx (
295
- "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" ,
295
+ "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 z-10 " ,
296
296
isSelected
297
297
? "!border-blue-10"
298
298
: anyCapSelected
@@ -314,7 +314,7 @@ export const CapCard = ({
314
314
: isDropdownOpen
315
315
? "opacity-100"
316
316
: "opacity-0 group-hover:opacity-100" ,
317
- "top-2 right-2 flex-col gap-2 z-[20] " ,
317
+ "top-2 right-2 flex-col gap-2 z-20 " ,
318
318
) }
319
319
>
320
320
< CapCardButton
@@ -363,7 +363,7 @@ export const CapCard = ({
363
363
e . stopPropagation ( ) ;
364
364
handleDownload ( ) ;
365
365
} }
366
- disabled = { downloadMutation . isPending }
366
+ disabled = { downloadMutation . isPending || cap . hasActiveUpload }
367
367
className = "delay-25"
368
368
icon = { ( ) => {
369
369
return downloadMutation . isPending ? (
@@ -421,7 +421,7 @@ export const CapCard = ({
421
421
error : "Failed to duplicate cap" ,
422
422
} ) ;
423
423
} }
424
- disabled = { duplicateMutation . isPending }
424
+ disabled = { duplicateMutation . isPending || cap . hasActiveUpload }
425
425
className = "flex gap-2 items-center rounded-lg"
426
426
>
427
427
< FontAwesomeIcon className = "size-3" icon = { faCopy } />
@@ -503,26 +503,53 @@ export const CapCard = ({
503
503
anyCapSelected && "cursor-pointer pointer-events-none" ,
504
504
) }
505
505
onClick = { ( e ) => {
506
- if ( isDeleting ) {
507
- e . preventDefault ( ) ;
508
- }
506
+ if ( isDeleting ) e . preventDefault ( ) ;
509
507
} }
510
508
href = { `/s/${ cap . id } ` }
511
509
>
512
- < VideoThumbnail
513
- videoDuration = { cap . duration }
514
- imageClass = { clsx (
515
- anyCapSelected
516
- ? "opacity-50"
517
- : isDropdownOpen
518
- ? "opacity-30"
519
- : "group-hover:opacity-30" ,
520
- "transition-opacity duration-200" ,
521
- uploadProgress && "opacity-30" ,
522
- ) }
523
- videoId = { cap . id }
524
- alt = { `${ cap . name } Thumbnail` }
525
- />
510
+ { uploadProgress ? (
511
+ < div className = "overflow-hidden relative mx-auto w-full h-full rounded-t-xl border-b border-gray-3 aspect-video bg-black z-0" >
512
+ < div className = "flex absolute inset-0 z-50 justify-center items-center rounded-t-xl" >
513
+ { uploadProgress . status === "failed" ? (
514
+ < div className = "flex flex-col items-center" >
515
+ < div className = "flex justify-center items-center mb-2 w-8 h-8 bg-red-500 rounded-full" >
516
+ < FontAwesomeIcon
517
+ icon = { faVideo }
518
+ className = "text-white size-3"
519
+ />
520
+ </ div >
521
+ < p className = "text-[13px] text-center text-white" >
522
+ Upload failed
523
+ </ p >
524
+ </ div >
525
+ ) : (
526
+ < div className = "relative size-20 md:size-16" >
527
+ < ProgressCircle
528
+ progressTextClassName = "md:!text-[11px]"
529
+ subTextClassName = "!mt-0 md:!text-[7px] !text-[10px] mb-1"
530
+ className = "md:scale-[1.5] scale-[1.2]"
531
+ progress = { uploadProgress . progress }
532
+ />
533
+ </ div >
534
+ ) }
535
+ </ div >
536
+ </ div >
537
+ ) : (
538
+ < VideoThumbnail
539
+ videoDuration = { cap . duration }
540
+ imageClass = { clsx (
541
+ anyCapSelected
542
+ ? "opacity-50"
543
+ : isDropdownOpen
544
+ ? "opacity-30"
545
+ : "group-hover:opacity-30" ,
546
+ "transition-opacity duration-200" ,
547
+ // uploadProgress && "opacity-30",
548
+ ) }
549
+ videoId = { cap . id }
550
+ alt = { `${ cap . name } Thumbnail` }
551
+ />
552
+ ) }
526
553
</ Link >
527
554
{ uploadProgress && (
528
555
< div className = "flex absolute inset-0 z-50 justify-center items-center bg-black rounded-t-xl" >
0 commit comments