Add playback status badge to video players

Author: richiemcilroy

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

@@ -51,6 +51,7 @@ export const EmbedVideo = forwardRef<
 		chapters?: { title: string; start: number }[];
 		ownerName?: string | null;
 		autoplay?: boolean;
+		showPlaybackStatusBadge?: boolean;
 	}
 >(
 	(
@@ -61,6 +62,7 @@ export const EmbedVideo = forwardRef<
 			chapters = [],
 			ownerName,
 			autoplay: _autoplay = false,
+			showPlaybackStatusBadge = false,
 		},
 		ref,
 	) => {
@@ -194,6 +196,7 @@ export const EmbedVideo = forwardRef<
 							videoSrc={videoSrc}
 							rawFallbackSrc={rawFallbackSrc}
 							duration={data.duration}
+							showPlaybackStatusBadge={showPlaybackStatusBadge}
 							chaptersSrc={chaptersUrl || ""}
 							captionsSrc={subtitleUrl || ""}
 							videoRef={videoRef}

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

@@ -287,6 +287,7 @@ async function EmbedContent({
 			chapters={initialAiData?.chapters || []}
 			ownerName={videoOwner[0]?.name || null}
 			autoplay={autoplay}
+			showPlaybackStatusBadge={user?.id === video.ownerId}
 		/>
 	);
 }

apps/web/app/s/[videoId]/Share.tsx

@@ -440,6 +440,7 @@ export const Share = ({
 									chapters={aiData?.chapters || []}
 									aiGenerationStatus={aiData?.aiGenerationStatus}
 									canRetryProcessing={viewerId === data.owner.id}
+									showPlaybackStatusBadge={viewerId === data.owner.id}
 									ref={playerRef}
 								/>
 							</div>

apps/web/app/s/[videoId]/_components/CapVideoPlayer.tsx

@@ -8,7 +8,7 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { skipToken, useQuery, useQueryClient } from "@tanstack/react-query";
 import clsx from "clsx";
 import { AnimatePresence, motion } from "framer-motion";
-import { AlertTriangleIcon } from "lucide-react";
+import { AlertTriangleIcon, InfoIcon } from "lucide-react";
 import { useCallback, useEffect, useRef, useState } from "react";
 import { toast } from "sonner";
 import { retryVideoProcessing } from "@/actions/video/retry-processing";
@@ -24,7 +24,6 @@ import {
 	type ResolvedPlaybackSource,
 	resolvePlaybackSource,
 } from "./playback-source";
-
 import {
 	MediaPlayer,
 	MediaPlayerCaptions,
@@ -44,6 +43,7 @@ import {
 	MediaPlayerVolume,
 	MediaPlayerVolumeIndicator,
 } from "./video/media-player";
+import { Tooltip, TooltipContent, TooltipTrigger } from "./video/tooltip";
 
 const { circumference } = getProgressCircleConfig();
 
@@ -98,6 +98,7 @@ interface Props {
 	hasCaptions?: boolean;
 	canRetryProcessing?: boolean;
 	duration?: number | null;
+	showPlaybackStatusBadge?: boolean;
 }
 
 export function CapVideoPlayer({
@@ -125,6 +126,7 @@ export function CapVideoPlayer({
 	hasCaptions = false,
 	canRetryProcessing = false,
 	duration: fallbackDuration,
+	showPlaybackStatusBadge = false,
 }: Props) {
 	const [currentCue, setCurrentCue] = useState<string>("");
 	const [controlsVisible, setControlsVisible] = useState(false);
@@ -461,11 +463,16 @@ export function CapVideoPlayer({
 		(!resolvedSrc.isSuccess || Boolean(resolvedSrc.data));
 	const showPlaybackResolutionError =
 		hasError && !uploadProgress && !resolvedSrc.data && !resolvedSrc.isPending;
-	const showRawPlaybackBadge = resolvedSrc.data?.type === "raw";
+	const showRawPlaybackBadge =
+		showPlaybackStatusBadge && resolvedSrc.data?.type === "raw";
 	const rawPlaybackBadgeLabel =
 		uploadProgressRaw?.status === "error"
-			? "Previewing original upload"
-			: "Processing for best quality...";
+			? "Original upload"
+			: "Optimizing video";
+	const rawPlaybackBadgeDescription =
+		uploadProgressRaw?.status === "error"
+			? "The processed version is unavailable right now, so this page is playing the original uploaded file instead."
+			: "This page is temporarily playing the original uploaded file while Cap finishes processing the optimized version for smoother playback and broader compatibility.";
 	const blockPlaybackControls =
 		(!videoLoaded && hasActiveProgress) || showUploadFailureOverlay;
 
@@ -520,9 +527,25 @@ export function CapVideoPlayer({
 				</div>
 			</div>
 			{showRawPlaybackBadge && (
-				<div className="absolute top-3 left-3 bg-black/60 text-white text-xs px-2 py-1 rounded-full backdrop-blur-sm z-10">
-					{rawPlaybackBadgeLabel}
-				</div>
+				<Tooltip>
+					<TooltipTrigger asChild>
+						<button
+							type="button"
+							className="absolute top-3 left-3 z-10 inline-flex items-center gap-1 rounded-full border border-white/10 bg-black/55 px-2 py-0.5 text-[11px] font-medium text-white/90 backdrop-blur-sm transition-colors hover:bg-black/70"
+							aria-label={rawPlaybackBadgeDescription}
+						>
+							<InfoIcon className="size-3" />
+							<span>{rawPlaybackBadgeLabel}</span>
+						</button>
+					</TooltipTrigger>
+					<TooltipContent
+						side="bottom"
+						align="start"
+						className="max-w-[260px] border border-white/10 bg-black/90 px-3 py-2 text-xs leading-relaxed text-white shadow-xl"
+					>
+						{rawPlaybackBadgeDescription}
+					</TooltipContent>
+				</Tooltip>
 			)}
 			{resolvedSrc.data && (
 				<MediaPlayerVideo

apps/web/app/s/[videoId]/_components/ShareVideo.tsx

@@ -43,6 +43,7 @@ export const ShareVideo = forwardRef<
 		areReactionStampsDisabled?: boolean;
 		aiGenerationStatus?: AiGenerationStatus | null;
 		canRetryProcessing?: boolean;
+		showPlaybackStatusBadge?: boolean;
 	}
 >(
 	(
@@ -55,6 +56,7 @@ export const ShareVideo = forwardRef<
 			areCommentStampsDisabled,
 			areReactionStampsDisabled,
 			canRetryProcessing,
+			showPlaybackStatusBadge = false,
 		},
 		ref,
 	) => {
@@ -217,6 +219,7 @@ export const ShareVideo = forwardRef<
 							videoSrc={videoSrc}
 							rawFallbackSrc={rawFallbackSrc}
 							duration={data.duration}
+							showPlaybackStatusBadge={showPlaybackStatusBadge}
 							disableCaptions={areCaptionsDisabled ?? false}
 							disableCommentStamps={areCommentStampsDisabled ?? false}
 							disableReactionStamps={areReactionStampsDisabled ?? false}