Support URL timestamp seek and copy-at-time

Author: richiemcilroy

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

@@ -3,6 +3,7 @@
 import type { comments as commentsSchema } from "@cap/database/schema";
 import type { ImageUpload, Video } from "@cap/web-domain";
 import { useQuery } from "@tanstack/react-query";
+import { useSearchParams } from "next/navigation";
 import {
 	startTransition,
 	use,
@@ -349,6 +350,9 @@ export const Share = ({
 
 	const aiLoading = shouldShowLoading();
 
+	const searchParams = useSearchParams();
+	const initialSeekDone = useRef(false);
+
 	const handleSeek = useCallback((time: number) => {
 		const v =
 			playerRef.current ??
@@ -386,6 +390,41 @@ export const Share = ({
 		}, 3000);
 	}, []);
 
+	useEffect(() => {
+		if (initialSeekDone.current) return;
+		const tParam = searchParams.get("t");
+		if (!tParam) return;
+		const t = parseInt(tParam, 10);
+		if (!Number.isFinite(t) || t < 0) return;
+
+		const v =
+			playerRef.current ??
+			(document.querySelector("video") as HTMLVideoElement | null);
+		if (v) {
+			initialSeekDone.current = true;
+			handleSeek(t);
+			return;
+		}
+
+		const interval = setInterval(() => {
+			const el =
+				playerRef.current ??
+				(document.querySelector("video") as HTMLVideoElement | null);
+			if (el) {
+				clearInterval(interval);
+				initialSeekDone.current = true;
+				handleSeek(t);
+			}
+		}, 200);
+
+		const timeout = setTimeout(() => clearInterval(interval), 10000);
+
+		return () => {
+			clearInterval(interval);
+			clearTimeout(timeout);
+		};
+	}, [searchParams, handleSeek]);
+
 	const handleOptimisticComment = useCallback(
 		(comment: CommentType) => {
 			startTransition(() => {

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

@@ -8,10 +8,10 @@ import {
 	faLock,
 } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { Check, Copy, Globe2 } from "lucide-react";
+import { Check, Clock, Copy, Globe2 } from "lucide-react";
 import moment from "moment";
 import { useRouter } from "next/navigation";
-import { useEffect, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import { toast } from "sonner";
 import { editTitle } from "@/actions/videos/edit-title";
 import { useDashboardContext } from "@/app/(org)/dashboard/Contexts";
@@ -58,6 +58,23 @@ export const ShareHeader = ({
 	const [upgradeModalOpen, setUpgradeModalOpen] = useState(false);
 	const [isSharingDialogOpen, setIsSharingDialogOpen] = useState(false);
 	const [linkCopied, setLinkCopied] = useState(false);
+	const [showCopyOptions, setShowCopyOptions] = useState(false);
+	const [capturedTime, setCapturedTime] = useState(0);
+	const copyOptionsRef = useRef<HTMLDivElement>(null);
+
+	useEffect(() => {
+		if (!showCopyOptions) return;
+		const handler = (e: MouseEvent) => {
+			if (
+				copyOptionsRef.current &&
+				!copyOptionsRef.current.contains(e.target as Node)
+			) {
+				setShowCopyOptions(false);
+			}
+		};
+		document.addEventListener("mousedown", handler);
+		return () => document.removeEventListener("mousedown", handler);
+	}, [showCopyOptions]);
 
 	const contextData = useDashboardContext();
 	const contextSharedSpaces = contextData?.sharedSpaces || null;
@@ -130,6 +147,39 @@ export const ShareHeader = ({
 		}
 	};
 
+	const formatTimestamp = (seconds: number): string => {
+		const h = Math.floor(seconds / 3600);
+		const m = Math.floor((seconds % 3600) / 60);
+		const s = seconds % 60;
+		if (h > 0)
+			return `${h}:${String(m).padStart(2, "0")}:${String(s).padStart(2, "0")}`;
+		return `${m}:${String(s).padStart(2, "0")}`;
+	};
+
+	const handleCopyClick = () => {
+		const video = document.querySelector("video");
+		const currentTime = video ? Math.floor(video.currentTime) : 0;
+
+		if (currentTime > 3) {
+			setCapturedTime(currentTime);
+			setShowCopyOptions(true);
+		} else {
+			navigator.clipboard.writeText(getVideoLink());
+			setLinkCopied(true);
+			setTimeout(() => setLinkCopied(false), 2000);
+		}
+	};
+
+	const handleCopyLink = (withTimestamp: boolean) => {
+		const link = withTimestamp
+			? `${getVideoLink()}?t=${capturedTime}`
+			: getVideoLink();
+		navigator.clipboard.writeText(link);
+		setShowCopyOptions(false);
+		setLinkCopied(true);
+		setTimeout(() => setLinkCopied(false), 2000);
+	};
+
 	const handleSharingUpdated = () => {
 		refresh();
 	};
@@ -268,23 +318,36 @@ export const ShareHeader = ({
 											icon={faLock}
 										/>
 									)}
-									<Button
-										variant="white"
-										onClick={() => {
-											navigator.clipboard.writeText(getVideoLink());
-											setLinkCopied(true);
-											setTimeout(() => {
-												setLinkCopied(false);
-											}, 2000);
-										}}
-									>
-										{getDisplayLink()}
-										{linkCopied ? (
-											<Check className="ml-2 w-4 h-4 svgpathanimation" />
-										) : (
-											<Copy className="ml-2 w-4 h-4" />
+									<div className="relative" ref={copyOptionsRef}>
+										<Button variant="white" onClick={handleCopyClick}>
+											{getDisplayLink()}
+											{linkCopied ? (
+												<Check className="ml-2 w-4 h-4 svgpathanimation" />
+											) : (
+												<Copy className="ml-2 w-4 h-4" />
+											)}
+										</Button>
+										{showCopyOptions && (
+											<div className="absolute right-0 top-full z-50 mt-1 min-w-full w-max overflow-hidden rounded-lg border border-gray-6 bg-white shadow-lg">
+												<button
+													type="button"
+													className="flex w-full items-center gap-2 px-3 py-2 text-sm text-gray-12 transition-colors hover:bg-gray-3"
+													onClick={() => handleCopyLink(false)}
+												>
+													<Copy className="w-3.5 h-3.5 shrink-0" />
+													Copy link
+												</button>
+												<button
+													type="button"
+													className="flex w-full items-center gap-2 px-3 py-2 text-sm text-gray-12 transition-colors hover:bg-gray-3"
+													onClick={() => handleCopyLink(true)}
+												>
+													<Clock className="w-3.5 h-3.5 shrink-0" />
+													Copy link at {formatTimestamp(capturedTime)}
+												</button>
+											</div>
 										)}
-									</Button>
+									</div>
 								</div>
 								{userIsOwnerAndNotPro && (
 									<button