use rpc and dataloader for fetching video thumbnails

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

@@ -17,7 +17,7 @@ import {
 	useUploadingContext,
 } from "@/app/(org)/dashboard/caps/UploadingContext";
 import { UpgradeModal } from "@/components/UpgradeModal";
-import { imageUrlQuery } from "@/components/VideoThumbnail";
+import { ThumbnailRequest } from "@/lib/ThumbnailRequest";
 
 export const UploadCapButton = ({
 	size = "md",
@@ -495,7 +495,9 @@ async function legacyUploadCap(
 				xhr.onload = () => {
 					if (xhr.status >= 200 && xhr.status < 300) {
 						resolve();
-						queryClient.refetchQueries(imageUrlQuery(uploadId));
+						queryClient.refetchQueries({
+							queryKey: ThumbnailRequest.queryKey(uploadId),
+						});
 					} else {
 						reject(
 							new Error(`Screenshot upload failed with status ${xhr.status}`),

apps/web/components/VideoThumbnail.tsx

@@ -1,14 +1,17 @@
 import { LogoSpinner } from "@cap/ui";
-import { queryOptions, useQuery } from "@tanstack/react-query";
+import type { Video } from "@cap/web-domain";
 import clsx from "clsx";
+import { Effect } from "effect";
 import moment from "moment";
 import Image from "next/image";
 import { memo, useEffect, useRef } from "react";
+import { useEffectQuery } from "@/lib/EffectRuntime";
+import { ThumbnailRequest } from "@/lib/ThumbnailRequest";
 
 export type ImageLoadingStatus = "loading" | "success" | "error";
 
 interface VideoThumbnailProps {
-	videoId: string;
+	videoId: Video.VideoId;
 	alt: string;
 	imageClass?: string;
 	objectFit?: string;
@@ -45,17 +48,17 @@ function generateRandomGrayScaleColor() {
 	return `rgb(${grayScaleValue}, ${grayScaleValue}, ${grayScaleValue})`;
 }
 
-export const imageUrlQuery = (videoId: string) =>
-	queryOptions({
-		queryKey: ["thumbnail", videoId],
-		queryFn: async () => {
-			const response = await fetch(`/api/thumbnail?videoId=${videoId}`);
-			if (response.ok) {
-				const data = await response.json();
-				return data.screen;
-			} else throw new Error("Failed to fetch pre-signed URLs");
-		},
+export const useThumnailQuery = (videoId: Video.VideoId) => {
+	return useEffectQuery({
+		queryKey: ThumbnailRequest.queryKey(videoId),
+		queryFn: Effect.fn(function* () {
+			return yield* Effect.request(
+				new ThumbnailRequest.ThumbnailRequest({ videoId }),
+				yield* ThumbnailRequest.DataLoaderResolver,
+			);
+		}),
 	});
+};
 
 export const VideoThumbnail: React.FC<VideoThumbnailProps> = memo(
 	({
@@ -68,7 +71,7 @@ export const VideoThumbnail: React.FC<VideoThumbnailProps> = memo(
 		imageStatus,
 		setImageStatus,
 	}) => {
-		const imageUrl = useQuery(imageUrlQuery(videoId));
+		const thumbnailUrl = useThumnailQuery(videoId);
 		const imageRef = useRef<HTMLImageElement>(null);
 
 		const randomGradient = `linear-gradient(to right, ${generateRandomGrayScaleColor()}, ${generateRandomGrayScaleColor()})`;
@@ -87,26 +90,21 @@ export const VideoThumbnail: React.FC<VideoThumbnailProps> = memo(
 				)}
 			>
 				<div className="flex absolute inset-0 z-10 justify-center items-center">
-					{imageUrl.isError || imageStatus === "error" ? (
+					{thumbnailUrl.isError || imageStatus === "error" ? (
 						<div
 							className="w-full h-full"
 							style={{ backgroundImage: randomGradient }}
 						/>
 					) : (
-						(imageUrl.isPending || imageStatus === "loading") && (
+						(thumbnailUrl.isPending || imageStatus === "loading") && (
 							<LogoSpinner className="w-5 h-auto animate-spin md:w-8" />
 						)
 					)}
 				</div>
-				{videoDuration && (
-					<p className="text-white leading-0 px-2 left-3 rounded-full backdrop-blur-sm absolute z-10 bottom-3 bg-black/50 text-[11px]">
-						{formatDuration(videoDuration)}
-					</p>
-				)}
-				{imageUrl.data && (
+				{thumbnailUrl.data && (
 					<Image
 						ref={imageRef}
-						src={imageUrl.data}
+						src={thumbnailUrl.data}
 						fill={true}
 						sizes="(max-width: 768px) 100vw, 33vw"
 						alt={alt}
@@ -121,6 +119,11 @@ export const VideoThumbnail: React.FC<VideoThumbnailProps> = memo(
 						onError={() => setImageStatus("error")}
 					/>
 				)}
+				{videoDuration && (
+					<p className="text-white leading-0 px-2 left-3 rounded-full backdrop-blur-sm absolute z-10 bottom-3 bg-black/50 text-[11px]">
+						{formatDuration(videoDuration)}
+					</p>
+				)}
 			</div>
 		);
 	},

apps/web/lib/EffectRuntime.ts

@@ -5,8 +5,13 @@ import {
 	makeUseEffectQuery,
 } from "./effect-react-query";
 import { Rpc } from "./Rpcs";
+import { ThumbnailRequest } from "./ThumbnailRequest";
 
-const RuntimeLayer = Layer.mergeAll(Rpc.Default, FetchHttpClient.layer);
+export const RuntimeLayer = Layer.mergeAll(
+	ThumbnailRequest.DataLoaderResolver.Default,
+	Rpc.Default,
+	FetchHttpClient.layer,
+);
 
 export type RuntimeLayer = typeof RuntimeLayer;
 

apps/web/lib/ThumbnailRequest.ts

@@ -0,0 +1,54 @@
+import type { Video } from "@cap/web-domain";
+import { dataLoader } from "@effect/experimental/RequestResolver";
+import { Effect, Request, RequestResolver } from "effect";
+import type { NonEmptyArray } from "effect/Array";
+import { Rpc } from "@/lib/Rpcs";
+
+export namespace ThumbnailRequest {
+	export const queryKey = (videoId: string) => ["thumbnail", videoId] as const;
+
+	export class ThumbnailRequest extends Request.Class<
+		string,
+		unknown,
+		{ videoId: Video.VideoId }
+	> {}
+
+	export class DataLoaderResolver extends Effect.Service<DataLoaderResolver>()(
+		"ThumbnailRequest/DataLoaderResolver",
+		{
+			scoped: Effect.gen(function* () {
+				const rpc = yield* Rpc;
+
+				const requestResolver = RequestResolver.makeBatched(
+					(requests: NonEmptyArray<ThumbnailRequest>) => {
+						return rpc.VideosGetThumbnails(requests.map((r) => r.videoId)).pipe(
+							Effect.flatMap(
+								// biome-ignore lint/suspicious/useIterableCallbackReturn: effect
+								Effect.forEach((result, index) =>
+									Effect.matchEffect(Effect.flatten(result), {
+										onSuccess: (v) => Request.succeed(requests[index]!, v),
+										onFailure: (e) => Request.fail(requests[index]!, e),
+									}),
+								),
+							),
+							Effect.catchAll((error) =>
+								Effect.forEach(
+									requests,
+									(request) => Request.fail(request, error),
+									{
+										discard: true,
+									},
+								),
+							),
+						);
+					},
+				);
+
+				return yield* dataLoader(requestResolver, {
+					window: "10 millis",
+				});
+			}),
+			dependencies: [Rpc.Default],
+		},
+	) {}
+}

apps/web/package.json

@@ -28,6 +28,7 @@
 		"@deepgram/sdk": "^3.3.4",
 		"@dub/analytics": "^0.0.27",
 		"@effect/cluster": "^0.50.4",
+		"@effect/experimental": "^0.56.0",
 		"@effect/opentelemetry": "^0.58.0",
 		"@effect/platform": "^0.92.1",
 		"@effect/platform-node": "^0.98.3",

apps/web/utils/helpers.ts

@@ -1,4 +1,4 @@
-import { buildEnv, serverEnv } from "@cap/env";
+import { buildEnv } from "@cap/env";
 import { type ClassValue, clsx } from "clsx";
 import type { ReadonlyHeaders } from "next/dist/server/web/spec-extension/adapters/headers";
 import type { NextRequest } from "next/server";

packages/web-backend/src/Videos/VideosRpcs.ts

@@ -1,5 +1,5 @@
 import { InternalError, Video } from "@cap/web-domain";
-import { Effect } from "effect";
+import { Effect, Exit, Schema, Unify } from "effect";
 
 import { provideOptionalAuth } from "../Auth.ts";
 import { Videos } from "./index.ts";
@@ -43,6 +43,33 @@ export const VideosRpcsLive = Video.VideoRpcs.toLayer(
 						S3Error: () => new InternalError({ type: "s3" }),
 					}),
 				),
+
+			VideosGetThumbnails: (videoIds) =>
+				Effect.all(
+					videoIds.map((id) =>
+						videos.getThumbnailURL(id).pipe(
+							Effect.catchTags({
+								DatabaseError: () => new InternalError({ type: "database" }),
+								S3Error: () => new InternalError({ type: "s3" }),
+							}),
+							Effect.matchEffect({
+								onSuccess: (v) => Effect.succeed(Exit.succeed(v)),
+								onFailure: (e) =>
+									Schema.is(InternalError)(e)
+										? Effect.fail(e)
+										: Effect.succeed(Exit.fail(e)),
+							}),
+							Effect.map((v) => Unify.unify(v)),
+						),
+					),
+					{ concurrency: 10 },
+				).pipe(
+					provideOptionalAuth,
+					Effect.catchTags({
+						DatabaseError: () => new InternalError({ type: "database" }),
+						UnknownException: () => new InternalError({ type: "unknown" }),
+					}),
+				),
 		};
 	}),
 );

packages/web-backend/src/Videos/index.ts

@@ -160,6 +160,38 @@ export class Videos extends Effect.Service<Videos>()("Videos", {
 					Effect.transposeOption,
 				);
 			}),
+
+			getThumbnailURL: Effect.fn("Videos.getThumbnailURL")(function* (
+				videoId: Video.VideoId,
+			) {
+				const videoOpt = yield* repo
+					.getById(videoId)
+					.pipe(Policy.withPublicPolicy(policy.canView(videoId)));
+
+				return yield* videoOpt.pipe(
+					Effect.transposeMapOption(
+						Effect.fn(function* ([video]) {
+							const [bucket] = yield* S3Buckets.getBucketAccess(video.bucketId);
+
+							const listResponse = yield* bucket.listObjects({
+								prefix: `${video.ownerId}/${video.id}/`,
+							});
+							const contents = listResponse.Contents || [];
+
+							const thumbnailKey = contents.find((item) =>
+								item.Key?.endsWith("screen-capture.jpg"),
+							)?.Key;
+
+							if (!thumbnailKey) return Option.none();
+
+							return Option.some(
+								yield* bucket.getSignedObjectUrl(thumbnailKey),
+							);
+						}),
+					),
+					Effect.map(Option.flatten),
+				);
+			}),
 		};
 	}),
 	dependencies: [

packages/web-domain/src/Policy.ts

@@ -1,7 +1,7 @@
 // shoutout https://lucas-barake.github.io/building-a-composable-policy-system/
 
 import { HttpApiSchema } from "@effect/platform";
-import { type Brand, Context, Data, Effect, type Option, Schema } from "effect";
+import { Context, Data, Effect, type Option, Schema } from "effect";
 import type { NonEmptyReadonlyArray } from "effect/Array";
 import { CurrentUser } from "./Authentication.ts";
 

packages/web-domain/src/Video.ts

@@ -169,4 +169,21 @@ export class VideoRpcs extends RpcGroup.make(
 			VerifyVideoPasswordError,
 		),
 	}),
+	Rpc.make("VideosGetThumbnails", {
+		payload: Schema.Array(VideoId).pipe(
+			Schema.filter((a) => a.length <= 50 || "Maximum of 50 videos at a time"),
+		),
+		success: Schema.Array(
+			Schema.Exit({
+				success: Schema.Option(Schema.String),
+				failure: Schema.Union(
+					NotFoundError,
+					PolicyDeniedError,
+					VerifyVideoPasswordError,
+				),
+				defect: Schema.Unknown,
+			}),
+		),
+		error: InternalError,
+	}),
 ) {}