Add anonymous view notifications for non-logged-in viewers

apps/web/app/(org)/dashboard/_components/Notifications/Filter.ts

@@ -16,12 +16,14 @@ export const FilterLabels: Record<FilterType, string> = {
 	reply: "Replies",
 	view: "Views",
 	reaction: "Reactions",
+	anon_view: "Views",
 };
 
 export const matchNotificationFilter = (
 	filter: FilterType,
 	type: NotificationType,
 ): boolean => {
 	if (filter === "all") return true;
+	if (filter === "view") return type === "view" || type === "anon_view";
 	return type === filter;
 };

apps/web/app/(org)/dashboard/_components/Notifications/NotificationItem.tsx

@@ -19,7 +19,7 @@ const descriptionMap: Record<NotificationType, string> = {
 	reply: `replied to your comment`,
 	view: `viewed your video`,
 	reaction: `reacted to your video`,
-	// mention: `mentioned you in a comment`,
+	anon_view: `viewed your video`,
 };
 
 export const NotificationItem = ({
@@ -36,6 +36,11 @@ export const NotificationItem = ({
 		}
 	};
 
+	const isAnonView = notification.type === "anon_view";
+	const displayName = isAnonView
+		? notification.anonName
+		: notification.author.name;
+
 	return (
 		<Link
 			href={link}
@@ -45,30 +50,39 @@ export const NotificationItem = ({
 				className,
 			)}
 		>
-			{/* Avatar */}
 			<div className="relative flex-shrink-0">
-				<SignedImageUrl
-					image={notification.author.avatar as ImageUpload.ImageUrl | null}
-					name={notification.author.name}
-					className="relative flex-shrink-0 size-7"
-					letterClass="text-sm"
-				/>
+				{isAnonView ? (
+					<div className="relative flex-shrink-0 size-7 rounded-full bg-gray-3 flex items-center justify-center text-sm">
+						🐾
+					</div>
+				) : (
+					<SignedImageUrl
+						image={notification.author.avatar as ImageUpload.ImageUrl | null}
+						name={notification.author.name}
+						className="relative flex-shrink-0 size-7"
+						letterClass="text-sm"
+					/>
+				)}
 				{notification.readAt === null && (
 					<div className="absolute top-0 right-0 size-2.5 rounded-full bg-red-500 border-2 border-gray-1"></div>
 				)}
 			</div>
 
-			{/* Content */}
 			<div className="flex flex-col flex-1 justify-center">
 				<div className="flex gap-1 items-center">
 					<span className="font-medium text-gray-12 text-[13px]">
-						{notification.author.name}
+						{displayName}
 					</span>
 					<span className="text-gray-10 text-[13px]">
 						{descriptionMap[notification.type]}
 					</span>
 				</div>
 
+				{isAnonView && notification.location && (
+					<p className="text-[13px] leading-4 text-gray-11">
+						{notification.location}
+					</p>
+				)}
 				{(notification.type === "comment" || notification.type === "reply") && (
 					<p className="mb-2 text-[13px] h-fit italic leading-4 text-gray-11 line-clamp-2">
 						{notification.comment.content}
@@ -79,15 +93,15 @@ export const NotificationItem = ({
 				</p>
 			</div>
 
-			{/* Icon */}
 			<div className="flex flex-shrink-0 items-center mt-1">
 				{notification.type === "comment" && (
 					<FontAwesomeIcon icon={faComment} className="text-gray-10 size-4" />
 				)}
 				{notification.type === "reply" && (
 					<FontAwesomeIcon icon={faReply} className="text-gray-10 size-4" />
 				)}
-				{notification.type === "view" && (
+				{(notification.type === "view" ||
+					notification.type === "anon_view") && (
 					<FontAwesomeIcon icon={faEye} className="text-gray-10 size-4" />
 				)}
 				{notification.type === "reaction" && (
@@ -104,9 +118,9 @@ function getLink(notification: APINotification) {
 			return `/s/${notification.videoId}/?reply=${notification.comment.id}`;
 		case "comment":
 		case "reaction":
-			// case "mention":
 			return `/s/${notification.videoId}/?comment=${notification.comment.id}`;
-		default:
+		case "view":
+		case "anon_view":
 			return `/s/${notification.videoId}`;
 	}
 }

apps/web/app/api/analytics/track/route.ts

@@ -4,6 +4,8 @@ import { Effect, Option } from "effect";
 import type { NextRequest } from "next/server";
 import UAParser from "ua-parser-js";
 
+import { getAnonymousName } from "@/lib/anonymous-names";
+import { createAnonymousViewNotification } from "@/lib/Notification";
 import { runPromise } from "@/lib/server";
 
 interface TrackPayload {
@@ -100,6 +102,22 @@ export async function POST(request: NextRequest) {
 					user_id: userId,
 				},
 			]);
+
+			if (!userId) {
+				const anonName = getAnonymousName(sessionId);
+				const locationParts = [city, country].filter(Boolean);
+				const location =
+					locationParts.length > 0 ? locationParts.join(", ") : null;
+
+				yield* Effect.tryPromise(() =>
+					createAnonymousViewNotification({
+						videoId: body.videoId,
+						sessionId,
+						anonName,
+						location,
+					}),
+				).pipe(Effect.catchAll(() => Effect.void));
+			}
 		}).pipe(provideOptionalAuth),
 	);
 

apps/web/app/api/notifications/route.ts

@@ -6,22 +6,9 @@ import { ImageUploads } from "@cap/web-backend";
 import { and, desc, eq, isNull, sql } from "drizzle-orm";
 import { Effect } from "effect";
 import { NextResponse } from "next/server";
-import { z } from "zod";
-import type { NotificationType } from "@/lib/Notification";
 import { runPromise } from "@/lib/server";
 import { jsonExtractString } from "@/utils/sql";
 
-const _notificationDataSchema = z.object({
-	authorId: z.string(),
-	content: z.string().optional(),
-	videoId: z.string(),
-});
-
-type NotificationsKeys = (typeof notifications.$inferSelect)["type"];
-type NotificationsKeysWithReplies =
-	| Exclude<`${NotificationsKeys}s`, "replys">
-	| "replies";
-
 export const dynamic = "force-dynamic";
 
 export async function GET() {
@@ -78,26 +65,41 @@ export async function GET() {
 			)
 			.groupBy(notifications.type);
 
-		const formattedCountResults: Record<NotificationType, number> = {
+		const formattedCountResults: Record<string, number> = {
 			view: 0,
 			comment: 0,
 			reply: 0,
 			reaction: 0,
-			// recordings: 0,
-			// mentions: 0,
 		};
 
-		countResults.forEach(({ type, count }) => {
-			formattedCountResults[type] = Number(count);
-		});
+		for (const { type, count } of countResults) {
+			if (type === "anon_view") {
+				formattedCountResults.view =
+					(formattedCountResults.view ?? 0) + Number(count);
+			} else {
+				formattedCountResults[type] =
+					(formattedCountResults[type] ?? 0) + Number(count);
+			}
+		}
 
 		const formattedNotifications = await Effect.gen(function* () {
 			const imageUploads = yield* ImageUploads;
 
 			return yield* Effect.all(
 				notificationsWithAuthors.map(({ notification, author }) =>
 					Effect.gen(function* () {
-						// all notifications currently require an author
+						if (notification.type === "anon_view") {
+							return APINotification.parse({
+								id: notification.id,
+								type: "anon_view",
+								readAt: notification.readAt,
+								videoId: notification.data.videoId,
+								createdAt: notification.createdAt,
+								anonName: notification.data.anonName ?? "Anonymous Viewer",
+								location: notification.data.location ?? null,
+							});
+						}
+
 						if (!author) return null;
 
 						const resolvedAvatar = author.avatar

apps/web/lib/Notification.ts

@@ -9,6 +9,7 @@ import { type Comment, Video } from "@cap/web-domain";
 import { and, eq, sql } from "drizzle-orm";
 import { revalidatePath } from "next/cache";
 import type { UserPreferences } from "@/app/(org)/dashboard/dashboard-data";
+import { getSessionHash } from "@/lib/anonymous-names";
 
 export type NotificationType = Notification["type"];
 
@@ -18,16 +19,16 @@ type NotificationSpecificData = DistributiveOmit<
 	keyof NotificationBase
 >;
 
-// Replaces author object with authorId since we query for that info.
-// If we add more notifications this would probably be better done manually
-// Type is weird since we need to operate on each member of the NotificationSpecificData union
-type CreateNotificationInput<D = NotificationSpecificData> =
-	D extends NotificationSpecificData
-		? D["author"] extends never
-			? D
-			: Omit<D, "author"> & { authorId: string } & {
-					parentCommentId?: Comment.CommentId;
-				}
+type AuthoredNotificationData = Exclude<
+	NotificationSpecificData,
+	{ type: "anon_view" }
+>;
+
+type CreateNotificationInput<D = AuthoredNotificationData> =
+	D extends AuthoredNotificationData
+		? Omit<D, "author"> & { authorId: string } & {
+				parentCommentId?: Comment.CommentId;
+			}
 		: never;
 
 export async function createNotification(
@@ -217,3 +218,69 @@ export async function createNotification(
 		throw error;
 	}
 }
+
+export async function createAnonymousViewNotification({
+	videoId,
+	sessionId,
+	anonName,
+	location,
+}: {
+	videoId: string;
+	sessionId: string;
+	anonName: string;
+	location: string | null;
+}) {
+	try {
+		const sessionHash = getSessionHash(sessionId);
+
+		const [videoExists] = await db()
+			.select({ id: videos.id, ownerId: videos.ownerId })
+			.from(videos)
+			.where(eq(videos.id, Video.VideoId.make(videoId)))
+			.limit(1);
+
+		if (!videoExists) return;
+
+		const [ownerResult] = await db()
+			.select({
+				id: users.id,
+				activeOrganizationId: users.activeOrganizationId,
+				preferences: users.preferences,
+			})
+			.from(users)
+			.where(eq(users.id, videoExists.ownerId))
+			.limit(1);
+
+		if (!ownerResult?.activeOrganizationId) return;
+
+		const preferences = ownerResult.preferences as UserPreferences;
+		if (preferences?.notifications?.pauseViews) return;
+
+		const [existing] = await db()
+			.select({ id: notifications.id })
+			.from(notifications)
+			.where(
+				and(
+					eq(notifications.type, "anon_view"),
+					eq(notifications.recipientId, ownerResult.id),
+					sql`JSON_EXTRACT(${notifications.data}, '$.videoId') = ${videoId}`,
+					sql`JSON_EXTRACT(${notifications.data}, '$.sessionHash') = ${sessionHash}`,
+				),
+			)
+			.limit(1);
+
+		if (existing) return;
+
+		await db().insert(notifications).values({
+			id: nanoId(),
+			orgId: ownerResult.activeOrganizationId,
+			recipientId: ownerResult.id,
+			type: "anon_view",
+			data: { videoId, sessionHash, anonName, location },
+		});
+
+		revalidatePath("/dashboard");
+	} catch (error) {
+		console.error("Error creating anonymous view notification:", error);
+	}
+}

apps/web/lib/anonymous-names.ts

@@ -0,0 +1,53 @@
+const ANIMALS = [
+	"Walrus",
+	"Capybara",
+	"Narwhal",
+	"Quokka",
+	"Axolotl",
+	"Pangolin",
+	"Okapi",
+	"Platypus",
+	"Wombat",
+	"Chinchilla",
+	"Manatee",
+	"Flamingo",
+	"Hedgehog",
+	"Otter",
+	"Puffin",
+	"Raccoon",
+	"Sloth",
+	"Chameleon",
+	"Penguin",
+	"Koala",
+	"Red Panda",
+	"Seahorse",
+	"Toucan",
+	"Lemur",
+	"Armadillo",
+	"Alpaca",
+	"Meerkat",
+	"Ibex",
+	"Tapir",
+	"Kiwi",
+	"Gecko",
+	"Bison",
+] as const;
+
+function hashSessionId(sessionId: string): number {
+	let hash = 0;
+	for (let i = 0; i < sessionId.length; i++) {
+		const char = sessionId.charCodeAt(i);
+		hash = (hash << 5) - hash + char;
+		hash |= 0;
+	}
+	return hash >>> 0;
+}
+
+export function getAnonymousName(sessionId: string): string {
+	const index = hashSessionId(sessionId) % ANIMALS.length;
+	return `Anonymous ${ANIMALS[index]}`;
+}
+
+export function getSessionHash(sessionId: string): string {
+	return hashSessionId(sessionId).toString(36);
+}