Skip to content

Commit c89451b

Browse files
richiemcilroyrichiemcilroy
committed
Add isOwner prop for analytics and UI controls
1 parent f47cde1 commit c89451b

5 files changed

Lines changed: 86 additions & 41 deletions

File tree

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

Lines changed: 51 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@ interface CapCardAnalyticsProps {
1818
totalComments: number;
1919
isLoadingAnalytics: boolean;
2020
totalReactions: number;
21+
isOwner?: boolean;
2122
}
2223

2324
export const CapCardAnalytics = Object.assign(
@@ -27,53 +28,66 @@ export const CapCardAnalytics = Object.assign(
2728
totalComments,
2829
totalReactions,
2930
isLoadingAnalytics,
31+
isOwner = true,
3032
}: CapCardAnalyticsProps) =>
3133
isLoadingAnalytics ? (
3234
<CapCardAnalytics.Skeleton />
3335
) : (
3436
<Shell>
35-
<Tooltip
36-
content="View analytics"
37-
className="bg-gray-12 text-gray-1 border-gray-11 shadow-lg"
38-
delayDuration={100}
39-
>
40-
<Link
41-
href={`/dashboard/analytics?capId=${capId}`}
42-
className="inline-flex cursor-pointer"
37+
<div className="flex flex-wrap gap-4 items-center">
38+
<Tooltip
39+
content="View analytics"
40+
className="bg-gray-12 text-gray-1 border-gray-11 shadow-lg"
41+
delayDuration={100}
4342
>
44-
<IconItem icon={faEye}>
45-
<span className="text-sm text-gray-12">{displayCount}</span>
46-
</IconItem>
47-
</Link>
48-
</Tooltip>
49-
<Tooltip
50-
content="View analytics"
51-
className="bg-gray-12 text-gray-1 border-gray-11 shadow-lg"
52-
delayDuration={100}
53-
>
54-
<Link
55-
href={`/dashboard/analytics?capId=${capId}`}
56-
className="inline-flex cursor-pointer"
43+
<Link
44+
href={`/dashboard/analytics?capId=${capId}`}
45+
className="inline-flex cursor-pointer"
46+
>
47+
<IconItem icon={faEye}>
48+
<span className="text-sm text-gray-12">{displayCount}</span>
49+
</IconItem>
50+
</Link>
51+
</Tooltip>
52+
<Tooltip
53+
content="View analytics"
54+
className="bg-gray-12 text-gray-1 border-gray-11 shadow-lg"
55+
delayDuration={100}
5756
>
58-
<IconItem icon={faComment}>
59-
<span className="text-sm text-gray-12">{totalComments}</span>
60-
</IconItem>
61-
</Link>
62-
</Tooltip>
63-
<Tooltip
64-
content="View analytics"
65-
className="bg-gray-12 text-gray-1 border-gray-11 shadow-lg"
66-
delayDuration={100}
67-
>
57+
<Link
58+
href={`/dashboard/analytics?capId=${capId}`}
59+
className="inline-flex cursor-pointer"
60+
>
61+
<IconItem icon={faComment}>
62+
<span className="text-sm text-gray-12">{totalComments}</span>
63+
</IconItem>
64+
</Link>
65+
</Tooltip>
66+
<Tooltip
67+
content="View analytics"
68+
className="bg-gray-12 text-gray-1 border-gray-11 shadow-lg"
69+
delayDuration={100}
70+
>
71+
<Link
72+
href={`/dashboard/analytics?capId=${capId}`}
73+
className="inline-flex cursor-pointer"
74+
>
75+
<IconItem icon={faSmile}>
76+
<span className="text-sm text-gray-12">{totalReactions}</span>
77+
</IconItem>
78+
</Link>
79+
</Tooltip>
80+
</div>
81+
{isOwner && (
6882
<Link
6983
href={`/dashboard/analytics?capId=${capId}`}
70-
className="inline-flex cursor-pointer"
84+
target="_blank"
85+
rel="noopener noreferrer"
86+
className="text-xs text-blue-600 hover:underline"
7187
>
72-
<IconItem icon={faSmile}>
73-
<span className="text-sm text-gray-12">{totalReactions}</span>
74-
</IconItem>
88+
View analytics
7589
</Link>
76-
</Tooltip>
90+
)}
7791
</Shell>
7892
),
7993
{
@@ -88,7 +102,7 @@ export const CapCardAnalytics = Object.assign(
88102
);
89103

90104
const Shell = (props: PropsWithChildren) => (
91-
<div className="flex flex-wrap gap-4 items-center text-sm text-gray-60">
105+
<div className="flex flex-wrap gap-4 items-center justify-between text-sm text-gray-60">
92106
{props.children}
93107
</div>
94108
);

‎apps/web/app/s/[videoId]/_components/ShareHeader.tsx‎

Lines changed: 27 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,11 @@ import type { videos } from "@cap/database/schema";
44
import { buildEnv, NODE_ENV } from "@cap/env";
55
import { Button } from "@cap/ui";
66
import { type ImageUpload, User } from "@cap/web-domain";
7-
import { faChevronDown, faLock } from "@fortawesome/free-solid-svg-icons";
7+
import {
8+
faChartSimple,
9+
faChevronDown,
10+
faLock,
11+
} from "@fortawesome/free-solid-svg-icons";
812
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
913
import { Check, Copy, Globe2 } from "lucide-react";
1014
import moment from "moment";
@@ -17,6 +21,7 @@ import { SharingDialog } from "@/app/(org)/dashboard/caps/components/SharingDial
1721
import type { Spaces } from "@/app/(org)/dashboard/dashboard-data";
1822
import { useCurrentUser } from "@/app/Layout/AuthContext";
1923
import { SignedImageUrl } from "@/components/SignedImageUrl";
24+
import { Tooltip } from "@/components/Tooltip";
2025
import { UpgradeModal } from "@/components/UpgradeModal";
2126
import { usePublicEnv } from "@/utils/public-env";
2227
import type { VideoData } from "../types";
@@ -292,7 +297,27 @@ export const ShareHeader = ({
292297
)}
293298
</div>
294299
{user !== null && (
295-
<div className="hidden md:flex">
300+
<div className="hidden md:flex gap-2">
301+
{isOwner && (
302+
<Tooltip
303+
content="View analytics"
304+
className="bg-gray-12 text-gray-1 border-gray-11 shadow-lg"
305+
delayDuration={100}
306+
>
307+
<Button
308+
variant="gray"
309+
className="rounded-full flex items-center justify-center"
310+
onClick={() => {
311+
push(`/dashboard/analytics?capId=${data.id}`);
312+
}}
313+
>
314+
<FontAwesomeIcon
315+
className="size-4 text-gray-12"
316+
icon={faChartSimple}
317+
/>
318+
</Button>
319+
</Tooltip>
320+
)}
296321
<Button
297322
onClick={() => {
298323
push("/dashboard/caps?page=1");

‎apps/web/app/s/[videoId]/_components/Sidebar.tsx‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -83,9 +83,9 @@ export const Sidebar = forwardRef<{ scrollToBottom: () => void }, SidebarProps>(
8383
) => {
8484
const user = useCurrentUser();
8585

86+
const isOwner = Boolean(user?.id === data.owner.id);
8687
const isOwnerOrMember = Boolean(
87-
user?.id === data.owner.id ||
88-
(user && data.organizationMembers?.includes(user.id)),
88+
isOwner || (user && data.organizationMembers?.includes(user.id)),
8989
);
9090

9191
const defaultTab = !(
@@ -156,6 +156,7 @@ export const Sidebar = forwardRef<{ scrollToBottom: () => void }, SidebarProps>(
156156
setOptimisticComments={setOptimisticComments}
157157
handleCommentSuccess={handleCommentSuccess}
158158
isOwnerOrMember={isOwnerOrMember}
159+
isOwner={isOwner}
159160
onSeek={onSeek}
160161
videoId={data.id}
161162
/>

‎apps/web/app/s/[videoId]/_components/tabs/Activity/Analytics.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ const Analytics = (props: {
1010
views: MaybePromise<number>;
1111
comments: CommentType[];
1212
isLoadingAnalytics: boolean;
13+
isOwner: boolean;
1314
}) => {
1415
const [views, setViews] = useState(
1516
props.views instanceof Promise ? use(props.views) : props.views,
@@ -46,6 +47,7 @@ const Analytics = (props: {
4647
displayCount={views}
4748
totalComments={totalComments}
4849
totalReactions={totalReactions}
50+
isOwner={props.isOwner}
4951
/>
5052
);
5153
};

‎apps/web/app/s/[videoId]/_components/tabs/Activity/index.tsx‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,7 @@ interface ActivityProps {
2020
optimisticComments: CommentType[];
2121
setOptimisticComments: (newComment: CommentType) => void;
2222
isOwnerOrMember: boolean;
23+
isOwner: boolean;
2324
commentsDisabled: boolean;
2425
}
2526

@@ -29,6 +30,7 @@ export const Activity = Object.assign(
2930
{
3031
videoId,
3132
isOwnerOrMember,
33+
isOwner,
3234
comments,
3335
handleCommentSuccess,
3436
optimisticComments,
@@ -48,6 +50,7 @@ export const Activity = Object.assign(
4850
views={props.views}
4951
comments={comments}
5052
isLoadingAnalytics={false}
53+
isOwner={isOwner}
5154
/>
5255
</Suspense>
5356
}

0 commit comments

Comments
 (0)