Skip to content

Commit 696a695

Browse files
ameer2468ameer2468
authored
web: re-arrange cap card buttons, share page show owner, and more... (#1156)
* update positioning of some buttons, show video owner on share page, and more * Update CapCard.tsx * Update CapCard.tsx * correct data * make sure to show folders only created by the user himself * Update CapCardButton.tsx * Update ShareHeader.tsx
1 parent cd2e001 commit 696a695

File tree

6 files changed

+156
-89
lines changed

6 files changed

+156
-89
lines changed

‎apps/web/app/(org)/dashboard/caps/Caps.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -266,7 +266,7 @@ export const Caps = ({
266266
[data, isUploading, uploadingCapId],
267267
);
268268

269-
if (count === 0) return <EmptyCapState />;
269+
if (count === 0 && folders.length === 0) return <EmptyCapState />;
270270

271271
return (
272272
<div className="flex relative flex-col w-full h-full">

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

Lines changed: 89 additions & 64 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@ import {
1818
faGear,
1919
faLink,
2020
faLock,
21+
faShare,
2122
faTrash,
2223
faUnlock,
2324
faVideo,
@@ -42,6 +43,7 @@ import {
4243
} from "@/components/VideoThumbnail";
4344
import { useEffectMutation } from "@/lib/EffectRuntime";
4445
import { withRpc } from "@/lib/Rpcs";
46+
import { usePublicEnv } from "@/utils/public-env";
4547
import { PasswordDialog } from "../PasswordDialog";
4648
import { SettingsDialog } from "../SettingsDialog";
4749
import { SharingDialog } from "../SharingDialog";
@@ -121,6 +123,8 @@ export const CapCard = ({
121123
const [passwordProtected, setPasswordProtected] = useState(
122124
cap.hasPassword || false,
123125
);
126+
const { webUrl } = usePublicEnv();
127+
124128
const [copyPressed, setCopyPressed] = useState(false);
125129
const [isDragging, setIsDragging] = useState(false);
126130
const [isSettingsDialogOpen, setIsSettingsDialogOpen] = useState(false);
@@ -345,82 +349,82 @@ export const CapCard = ({
345349
"top-2 right-2 flex-col gap-2 z-[51]",
346350
)}
347351
>
348-
{isOwner ? (
349-
<CapCardButton
350-
tooltipContent="Settings"
351-
onClick={(e) => {
352-
e.stopPropagation();
353-
setIsSettingsDialogOpen(true);
354-
}}
355-
className="delay-0"
356-
icon={() => {
357-
return <FontAwesomeIcon className="size-4" icon={faGear} />;
358-
}}
359-
/>
360-
) : (
361-
<CapCardButton
362-
tooltipContent="Download Cap"
363-
onClick={(e) => {
364-
e.stopPropagation();
365-
handleDownload();
366-
}}
367-
className="delay-0"
368-
icon={() => (
369-
<FontAwesomeIcon className="size-4" icon={faDownload} />
370-
)}
371-
/>
372-
)}
373352
<CapCardButton
374-
tooltipContent="Copy link"
353+
tooltipContent="Share"
375354
onClick={(e) => {
376355
e.stopPropagation();
377-
handleCopy(
378-
buildEnv.NEXT_PUBLIC_IS_CAP &&
379-
NODE_ENV === "production" &&
380-
customDomain &&
381-
domainVerified
382-
? `https://${customDomain}/s/${cap.id}`
383-
: buildEnv.NEXT_PUBLIC_IS_CAP && NODE_ENV === "production"
384-
? `https://cap.link/${cap.id}`
385-
: `${location.origin}/s/${cap.id}`,
386-
);
356+
setIsSharingDialogOpen(true);
387357
}}
388358
className="delay-0"
389-
icon={() => {
390-
return !copyPressed ? (
391-
<FontAwesomeIcon
392-
className="text-gray-12 size-4"
393-
icon={faLink}
394-
/>
395-
) : (
396-
<svg
397-
xmlns="http://www.w3.org/2000/svg"
398-
width="24"
399-
height="24"
400-
viewBox="0 0 24 24"
401-
fill="none"
402-
stroke="currentColor"
403-
strokeWidth="2"
404-
strokeLinecap="round"
405-
strokeLinejoin="round"
406-
className="text-gray-12 size-5 svgpathanimation"
407-
>
408-
<path d="M20 6 9 17l-5-5" />
409-
</svg>
410-
);
359+
icon={<FontAwesomeIcon icon={faShare} />}
360+
/>
361+
362+
<CapCardButton
363+
tooltipContent="Download Cap"
364+
onClick={(e) => {
365+
e.stopPropagation();
366+
handleDownload();
411367
}}
368+
className="delay-0"
369+
icon={<FontAwesomeIcon icon={faDownload} />}
412370
/>
413371

372+
{!isOwner && (
373+
<CapCardButton
374+
tooltipContent="Copy link"
375+
onClick={(e) => {
376+
e.stopPropagation();
377+
handleCopy(
378+
NODE_ENV === "development"
379+
? `${webUrl}/s/${cap.id}`
380+
: buildEnv.NEXT_PUBLIC_IS_CAP &&
381+
customDomain &&
382+
domainVerified
383+
? `https://${customDomain}/s/${cap.id}`
384+
: buildEnv.NEXT_PUBLIC_IS_CAP &&
385+
!customDomain &&
386+
!domainVerified
387+
? `https://cap.link/${cap.id}`
388+
: `${webUrl}/s/${cap.id}`,
389+
);
390+
}}
391+
className="delay-0"
392+
icon={
393+
<>
394+
{!copyPressed ? (
395+
<FontAwesomeIcon
396+
className="text-gray-12 size-4"
397+
icon={faLink}
398+
/>
399+
) : (
400+
<svg
401+
xmlns="http://www.w3.org/2000/svg"
402+
width="24"
403+
height="24"
404+
viewBox="0 0 24 24"
405+
fill="none"
406+
stroke="currentColor"
407+
strokeWidth="2"
408+
strokeLinecap="round"
409+
strokeLinejoin="round"
410+
className="text-gray-12 size-5 svgpathanimation"
411+
>
412+
<path d="M20 6 9 17l-5-5" />
413+
</svg>
414+
)}
415+
</>
416+
}
417+
/>
418+
)}
419+
414420
{isOwner && (
415421
<DropdownMenu modal={false} onOpenChange={setIsDropdownOpen}>
416422
<DropdownMenuTrigger asChild suppressHydrationWarning>
417423
<div>
418424
<CapCardButton
419425
tooltipContent="More options"
420426
className="delay-75"
421-
icon={() => (
422-
<FontAwesomeIcon className="size-4" icon={faEllipsis} />
423-
)}
427+
icon={<FontAwesomeIcon icon={faEllipsis} />}
424428
/>
425429
</div>
426430
</DropdownMenuTrigger>
@@ -432,12 +436,33 @@ export const CapCard = ({
432436
<DropdownMenuItem
433437
onClick={(e) => {
434438
e.stopPropagation();
435-
handleDownload();
439+
setIsSettingsDialogOpen(true);
440+
}}
441+
className="flex gap-2 items-center rounded-lg"
442+
>
443+
<FontAwesomeIcon className="size-3" icon={faGear} />
444+
<p className="text-sm text-gray-12">Settings</p>
445+
</DropdownMenuItem>
446+
<DropdownMenuItem
447+
onClick={(e) => {
448+
e.stopPropagation();
449+
handleCopy(
450+
buildEnv.NEXT_PUBLIC_IS_CAP &&
451+
NODE_ENV === "production" &&
452+
customDomain &&
453+
domainVerified
454+
? `https://${customDomain}/s/${cap.id}`
455+
: buildEnv.NEXT_PUBLIC_IS_CAP &&
456+
NODE_ENV === "production"
457+
? `https://cap.link/${cap.id}`
458+
: `${location.origin}/s/${cap.id}`,
459+
);
460+
toast.success("Link copied to clipboard");
436461
}}
437462
className="flex gap-2 items-center rounded-lg"
438463
>
439-
<FontAwesomeIcon className="size-3" icon={faDownload} />
440-
<p className="text-sm text-gray-12">Download</p>
464+
<FontAwesomeIcon className="size-3" icon={faLink} />
465+
<p className="text-sm text-gray-12">Copy link</p>
441466
</DropdownMenuItem>
442467
<DropdownMenuItem
443468
onClick={() => {

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

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,15 +2,16 @@
22

33
import { Button } from "@cap/ui";
44
import clsx from "clsx";
5-
import type { MouseEvent, ReactNode } from "react";
5+
import type { MouseEvent } from "react";
6+
import React from "react";
67
import { Tooltip } from "@/components/Tooltip";
78

89
interface CapCardButtonProps {
910
tooltipContent: string;
1011
onClick?: (e: MouseEvent) => void;
1112
disabled?: boolean;
1213
className: string;
13-
icon: () => ReactNode;
14+
icon: React.JSX.Element;
1415
asChild?: boolean;
1516
}
1617

@@ -36,7 +37,9 @@ export const CapCardButton = ({
3637
size="sm"
3738
aria-label={tooltipContent}
3839
>
39-
{icon()}
40+
{React.cloneElement(icon, {
41+
className: clsx(icon.props.className, "size-3.5"),
42+
})}
4043
</Button>
4144
</Tooltip>
4245
);

‎apps/web/app/(org)/dashboard/caps/page.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -227,6 +227,7 @@ export default async function CapsPage(props: PageProps<"/dashboard/caps">) {
227227
.where(
228228
and(
229229
eq(folders.organizationId, user.activeOrganizationId),
230+
eq(folders.createdById, user.id),
230231
isNull(folders.parentId),
231232
isNull(folders.spaceId),
232233
),

0 commit comments

Comments
 (0)