fix: honor organization branding in embedded videos

Author: richiemcilroy

apps/web/__tests__/unit/embed-video-playback-chrome.test.ts

@@ -19,6 +19,10 @@ import {
 	vi,
 } from "vitest";
 import { EmbedVideo } from "@/app/embed/[videoId]/_components/EmbedVideo";
+import {
+	getSharePageBranding,
+	type SharePageBrandingInput,
+} from "@/lib/share-branding";
 
 vi.mock("@cap/env", () => ({ NODE_ENV: "test" }));
 
@@ -107,6 +111,7 @@ const createProps = (
 	source: EmbedVideoProps["data"]["source"],
 ): EmbedVideoProps => ({
 	comments: [],
+	branding: { type: "cap" },
 	data: {
 		id: "video-id" as EmbedVideoProps["data"]["id"],
 		ownerId: "owner-id" as EmbedVideoProps["data"]["ownerId"],
@@ -226,3 +231,149 @@ describe("EmbedVideo playback chrome", () => {
 		});
 	});
 });
+
+const organizationIconUrl =
+	"https://example.com/organization.png" as NonNullable<
+		SharePageBrandingInput["organizationIconUrl"]
+	>;
+const shareableLinkIconUrl =
+	"https://example.com/shareable-link.png" as NonNullable<
+		SharePageBrandingInput["shareableLinkIconUrl"]
+	>;
+
+const brandingCases: {
+	name: string;
+	input: SharePageBrandingInput;
+	expected: "cap" | "custom" | null;
+	imageUrl?: string;
+}[] = [
+	{
+		name: "hidden Pro branding",
+		input: {
+			owner: { isPro: true },
+			orgSettings: { hideShareableLinkCapLogo: true },
+		},
+		expected: null,
+	},
+	{
+		name: "custom organization logo with Cap branding hidden",
+		input: {
+			owner: { isPro: true },
+			orgSettings: {
+				hideShareableLinkCapLogo: true,
+				shareableLinkUseOrganizationIcon: true,
+			},
+			organizationIconUrl,
+			shareableLinkIconUrl,
+			organizationName: "Acme",
+		},
+		expected: "custom",
+		imageUrl: organizationIconUrl,
+	},
+	{
+		name: "custom shareable link logo",
+		input: {
+			owner: { isPro: true },
+			organizationIconUrl,
+			shareableLinkIconUrl,
+			organizationName: "Acme",
+		},
+		expected: "custom",
+		imageUrl: shareableLinkIconUrl,
+	},
+	{
+		name: "free owner with saved Pro branding preferences",
+		input: {
+			owner: { isPro: false },
+			orgSettings: {
+				hideShareableLinkCapLogo: true,
+				shareableLinkUseOrganizationIcon: true,
+			},
+			organizationIconUrl,
+		},
+		expected: "cap",
+	},
+	{
+		name: "default Pro branding",
+		input: { owner: { isPro: true } },
+		expected: "cap",
+	},
+	{
+		name: "hidden branding with a missing organization logo",
+		input: {
+			owner: { isPro: true },
+			orgSettings: {
+				hideShareableLinkCapLogo: true,
+				shareableLinkUseOrganizationIcon: true,
+			},
+			shareableLinkIconUrl,
+		},
+		expected: null,
+	},
+];
+
+describe.each([
+	{ type: "desktopMP4" } as const,
+	{ type: "MediaConvert" } as const,
+])("EmbedVideo $type organization branding", (source) => {
+	beforeAll(() => {
+		actEnvironment.IS_REACT_ACT_ENVIRONMENT = true;
+	});
+	afterAll(() => {
+		delete actEnvironment.IS_REACT_ACT_ENVIRONMENT;
+	});
+
+	it.each(brandingCases)(
+		"honors $name before and after playback",
+		async ({ input, expected, imageUrl }) => {
+			const container = document.createElement("div");
+			const root = createRoot(container);
+			const props = {
+				...createProps(source),
+				branding: getSharePageBranding(input),
+			};
+			await act(async () => {
+				root.render(createElement(EmbedVideo, props));
+			});
+
+			const expectBranding = () => {
+				expect(container.textContent).toContain("Test video");
+				expect(
+					Boolean(container.querySelector('[aria-label="Powered by Cap"]')),
+				).toBe(expected === "cap");
+				expect(Boolean(container.querySelector("[data-cap-logo]"))).toBe(
+					expected === "cap",
+				);
+				const logo = container.querySelector("img");
+				if (expected === "custom") {
+					expect(logo?.getAttribute("src")).toBe(imageUrl);
+					expect(logo?.getAttribute("alt")).toBe("Acme logo");
+					expect(logo?.closest("a, button")).toBeNull();
+				} else {
+					expect(logo).toBeNull();
+				}
+			};
+			expectBranding();
+			const video = container.querySelector("video");
+			for (const event of ["pause", "ended"]) {
+				await act(async () => {
+					video?.dispatchEvent(new Event("play"));
+				});
+				expectChromeHidden(container);
+				expect(container.querySelector("img")).toBeNull();
+				await act(async () => {
+					video?.dispatchEvent(new Event(event));
+				});
+				expectBranding();
+			}
+			await act(async () => {
+				root.render(createElement(EmbedVideo, { ...props, minimal: true }));
+			});
+			expectChromeHidden(container);
+			expect(container.querySelector("img")).toBeNull();
+			await act(async () => {
+				root.unmount();
+			});
+		},
+	);
+});

apps/web/app/embed/[videoId]/_components/EmbedVideo.tsx

@@ -7,6 +7,7 @@ import { Avatar, Logo } from "@cap/ui";
 import type { ViewerSettings } from "@cap/web-backend";
 import { AnimatePresence, motion } from "framer-motion";
 import { useTranscript } from "hooks/use-transcript";
+import Image from "next/image";
 import {
 	forwardRef,
 	useEffect,
@@ -27,6 +28,7 @@ import {
 	parseVTT,
 	type TranscriptEntry,
 } from "@/app/s/[videoId]/_components/utils/transcript-utils";
+import type { SharePageBranding } from "@/lib/share-branding";
 import { usePlayerJsReceiver } from "./use-player-js-receiver";
 
 declare global {
@@ -53,6 +55,7 @@ export const EmbedVideo = forwardRef<
 		data: Omit<typeof videos.$inferSelect, "password"> & {
 			hasActiveUpload: boolean | undefined;
 		};
+		branding: SharePageBranding | null;
 		user: typeof userSelectProps | null;
 		comments: CommentWithAuthor[];
 		chapters?: { title: string; start: number }[];
@@ -68,6 +71,7 @@ export const EmbedVideo = forwardRef<
 	(
 		{
 			data,
+			branding,
 			user: _user,
 			comments: _comments,
 			chapters = [],
@@ -339,23 +343,42 @@ export const EmbedVideo = forwardRef<
 										</div>
 									</div>
 								</motion.div>
-								<motion.button
-									initial={{ opacity: 0, y: 10 }}
-									animate={{ opacity: 1, y: 0 }}
-									exit={{ opacity: 0, y: 10 }}
-									transition={{ duration: 0.3, delay: 0.1 }}
-									onClick={(e) => {
-										e.stopPropagation();
-										window.open("https://cap.so", "_blank");
-									}}
-									className="hidden z-10 gap-2 items-center px-3 py-2 text-sm rounded-full border backdrop-blur-sm transition-colors duration-200 sm:flex border-white/10 w-fit text-white/80 hover:text-white bg-black/50"
-									aria-label="Powered by Cap"
-								>
-									<span className="text-xs md:text-sm text-white/80">
-										Powered by
-									</span>
-									<Logo className="w-auto h-4" white={true} />
-								</motion.button>
+								{branding?.type === "custom" ? (
+									<motion.div
+										initial={{ opacity: 0, y: 10 }}
+										animate={{ opacity: 1, y: 0 }}
+										exit={{ opacity: 0, y: 10 }}
+										transition={{ duration: 0.3, delay: 0.1 }}
+										className="w-fit rounded-lg border border-white/10 bg-black/50 px-3 py-2 backdrop-blur-sm"
+									>
+										<Image
+											src={branding.imageUrl}
+											alt={`${branding.name} logo`}
+											width={160}
+											height={32}
+											unoptimized
+											className="h-8 w-auto max-w-40 object-contain"
+										/>
+									</motion.div>
+								) : branding?.type === "cap" ? (
+									<motion.button
+										initial={{ opacity: 0, y: 10 }}
+										animate={{ opacity: 1, y: 0 }}
+										exit={{ opacity: 0, y: 10 }}
+										transition={{ duration: 0.3, delay: 0.1 }}
+										onClick={(e) => {
+											e.stopPropagation();
+											window.open("https://cap.so", "_blank");
+										}}
+										className="hidden z-10 gap-2 items-center px-3 py-2 text-sm rounded-full border backdrop-blur-sm transition-colors duration-200 sm:flex border-white/10 w-fit text-white/80 hover:text-white bg-black/50"
+										aria-label="Powered by Cap"
+									>
+										<span className="text-xs md:text-sm text-white/80">
+											Powered by
+										</span>
+										<Logo className="w-auto h-4" white={true} />
+									</motion.button>
+								) : null}
 							</div>
 						)}
 					</AnimatePresence>

apps/web/app/embed/[videoId]/page.tsx

@@ -15,6 +15,7 @@ import { buildEnv } from "@cap/env";
 import { Logo } from "@cap/ui";
 import { userIsPro } from "@cap/utils";
 import {
+	ImageUploads,
 	provideOptionalAuth,
 	resolveEffectiveVideoRules,
 	Videos,
@@ -27,6 +28,7 @@ import type { Metadata } from "next";
 import Link from "next/link";
 import { notFound } from "next/navigation";
 import * as EffectRuntime from "@/lib/server";
+import { getSharePageBranding } from "@/lib/share-branding";
 import { buildShareVideoMetadata } from "@/lib/share-video-metadata";
 import { isVideoOverShareableLinkLimit } from "@/lib/shareable-link-quota";
 import { transcribeVideo } from "@/lib/transcribe";
@@ -146,6 +148,9 @@ export default async function EmbedVideoPage(
 						organizationId: sharedVideos.organizationId,
 					},
 					orgSettings: organizations.settings,
+					organizationName: organizations.name,
+					organizationIconUrl: organizations.iconUrl,
+					shareableLinkIconUrl: organizations.shareableLinkIconUrl,
 					hasActiveUpload:
 						sql`${videoUploads.videoId} IS NOT NULL AND ${videos.isScreenshot} = false`.mapWith(
 							Boolean,
@@ -204,6 +209,9 @@ async function EmbedContent({
 		sharedOrganization: { organizationId: Organisation.OrganisationId } | null;
 		hasActiveUpload: boolean | undefined;
 		orgSettings?: (typeof organizations.$inferSelect)["settings"] | null;
+		organizationName: (typeof organizations.$inferSelect)["name"] | null;
+		organizationIconUrl: (typeof organizations.$inferSelect)["iconUrl"];
+		shareableLinkIconUrl: (typeof organizations.$inferSelect)["shareableLinkIconUrl"];
 	};
 	autoplay: boolean;
 	startTime: number | null;
@@ -347,9 +355,34 @@ async function EmbedContent({
 		.where(eq(users.id, video.ownerId))
 		.limit(1);
 
+	const branding = await Effect.gen(function* () {
+		const brandingInput = {
+			owner: { isPro: ownerIsProUser },
+			orgSettings: video.orgSettings,
+			organizationName: video.organizationName,
+		};
+		const icon = video.orgSettings?.shareableLinkUseOrganizationIcon
+			? video.organizationIconUrl
+			: video.shareableLinkIconUrl;
+
+		if (!ownerIsProUser || !icon || minimal) {
+			return getSharePageBranding(brandingInput);
+		}
+
+		const imageUploads = yield* ImageUploads;
+		const imageUrl = yield* imageUploads.resolveImageUrl(icon);
+
+		return getSharePageBranding({
+			...brandingInput,
+			organizationIconUrl: imageUrl,
+			shareableLinkIconUrl: imageUrl,
+		});
+	}).pipe(EffectRuntime.runPromise);
+
 	return (
 		<EmbedVideo
 			data={video}
+			branding={branding}
 			user={user}
 			comments={commentsQuery}
 			chapters={