Pass and use fallback duration in players

Author: richiemcilroy

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

@@ -68,7 +68,9 @@ export const EmbedVideo = forwardRef<
 		useImperativeHandle(ref, () => videoRef.current as HTMLVideoElement);
 
 		const [transcriptData, setTranscriptData] = useState<TranscriptEntry[]>([]);
-		const [longestDuration, setLongestDuration] = useState<number>(0);
+		const [longestDuration, setLongestDuration] = useState<number>(
+			data.duration ?? 0,
+		);
 		const [isPlaying, setIsPlaying] = useState(false);
 		const [subtitleUrl, setSubtitleUrl] = useState<string | null>(null);
 		const [chaptersUrl, setChaptersUrl] = useState<string | null>(null);
@@ -191,6 +193,7 @@ export const EmbedVideo = forwardRef<
 							mediaPlayerClassName="w-full h-full"
 							videoSrc={videoSrc}
 							rawFallbackSrc={rawFallbackSrc}
+							duration={data.duration}
 							chaptersSrc={chaptersUrl || ""}
 							captionsSrc={subtitleUrl || ""}
 							videoRef={videoRef}
@@ -202,6 +205,7 @@ export const EmbedVideo = forwardRef<
 							videoId={data.id}
 							mediaPlayerClassName="w-full h-full"
 							videoSrc={videoSrc}
+							duration={data.duration}
 							chaptersSrc={chaptersUrl || ""}
 							captionsSrc={subtitleUrl || ""}
 							videoRef={videoRef}

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

@@ -97,6 +97,7 @@ interface Props {
 	isCaptionLoading?: boolean;
 	hasCaptions?: boolean;
 	canRetryProcessing?: boolean;
+	duration?: number | null;
 }
 
 export function CapVideoPlayer({
@@ -123,6 +124,7 @@ export function CapVideoPlayer({
 	isCaptionLoading = false,
 	hasCaptions = false,
 	canRetryProcessing = false,
+	duration: fallbackDuration,
 }: Props) {
 	const [currentCue, setCurrentCue] = useState<string>("");
 	const [controlsVisible, setControlsVisible] = useState(false);
@@ -134,7 +136,7 @@ export function CapVideoPlayer({
 	const [isMobile, setIsMobile] = useState(false);
 	const [hasError, setHasError] = useState(false);
 	const [isRetryingProcessing, setIsRetryingProcessing] = useState(false);
-	const [duration, setDuration] = useState(0);
+	const [duration, setDuration] = useState(fallbackDuration ?? 0);
 	const queryClient = useQueryClient();
 
 	useEffect(() => {
@@ -185,20 +187,30 @@ export function CapVideoPlayer({
 	}, [videoSrc, rawFallbackSrc]);
 
 	// Track video duration for comment markers
+	useEffect(() => {
+		setDuration(fallbackDuration ?? 0);
+	}, [fallbackDuration]);
+
 	useEffect(() => {
 		const video = videoRef.current;
 		if (!video) return;
 
 		const handleLoadedMetadata = () => {
-			setDuration(video.duration);
+			if (Number.isFinite(video.duration) && video.duration > 0) {
+				setDuration(video.duration);
+			}
 		};
 
+		if (Number.isFinite(video.duration) && video.duration > 0) {
+			setDuration(video.duration);
+		}
+
 		video.addEventListener("loadedmetadata", handleLoadedMetadata);
 
 		return () => {
 			video.removeEventListener("loadedmetadata", handleLoadedMetadata);
 		};
-	}, [videoRef.current]);
+	}, [videoRef]);
 
 	// Track when all data is ready for comment markers
 	const [markersReady, setMarkersReady] = useState(false);
@@ -695,7 +707,7 @@ export function CapVideoPlayer({
 							// enhancedAudioMuted={enhancedAudioMuted}
 							// setEnhancedAudioMuted={setEnhancedAudioMuted}
 						/>
-						<MediaPlayerTime />
+						<MediaPlayerTime fallbackDuration={fallbackDuration} />
 					</div>
 					<div className="flex gap-2 items-center">
 						{!disableCaptions && (

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

@@ -80,6 +80,7 @@ interface Props {
 	isCaptionLoading?: boolean;
 	hasCaptions?: boolean;
 	canRetryProcessing?: boolean;
+	duration?: number | null;
 }
 
 export function HLSVideoPlayer({
@@ -100,6 +101,7 @@ export function HLSVideoPlayer({
 	isCaptionLoading = false,
 	hasCaptions = false,
 	canRetryProcessing = false,
+	duration: fallbackDuration,
 }: Props) {
 	const hlsInstance = useRef<Hls | null>(null);
 	const [currentCue, setCurrentCue] = useState<string>("");
@@ -564,7 +566,7 @@ export function HLSVideoPlayer({
 							// enhancedAudioMuted={enhancedAudioMuted}
 							// setEnhancedAudioMuted={setEnhancedAudioMuted}
 						/>
-						<MediaPlayerTime />
+						<MediaPlayerTime fallbackDuration={fallbackDuration} />
 					</div>
 					<div className="flex gap-2 items-center">
 						{!disableCaptions && (

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

@@ -216,6 +216,7 @@ export const ShareVideo = forwardRef<
 							mediaPlayerClassName="w-full h-full max-w-full max-h-full rounded-xl overflow-visible"
 							videoSrc={videoSrc}
 							rawFallbackSrc={rawFallbackSrc}
+							duration={data.duration}
 							disableCaptions={areCaptionsDisabled ?? false}
 							disableCommentStamps={areCommentStampsDisabled ?? false}
 							disableReactionStamps={areReactionStampsDisabled ?? false}
@@ -247,6 +248,7 @@ export const ShareVideo = forwardRef<
 							videoId={data.id}
 							mediaPlayerClassName="w-full h-full max-w-full max-h-full rounded-xl"
 							videoSrc={videoSrc}
+							duration={data.duration}
 							disableCaptions={areCaptionsDisabled ?? false}
 							chaptersSrc={areChaptersDisabled ? "" : chaptersUrl || ""}
 							captionsSrc={areCaptionsDisabled ? "" : subtitleUrl || ""}

apps/web/app/s/[videoId]/_components/video/media-player.tsx

@@ -2401,10 +2401,17 @@ function MediaPlayerVolume(props: MediaPlayerVolumeProps) {
 interface MediaPlayerTimeProps extends React.ComponentProps<"div"> {
 	variant?: "progress" | "remaining" | "duration";
 	asChild?: boolean;
+	fallbackDuration?: number | null;
 }
 
 function MediaPlayerTime(props: MediaPlayerTimeProps) {
-	const { variant = "progress", asChild, className, ...timeProps } = props;
+	const {
+		variant = "progress",
+		asChild,
+		className,
+		fallbackDuration,
+		...timeProps
+	} = props;
 
 	const context = useMediaPlayerContext("MediaPlayerTime");
 	const mediaCurrentTime = useMediaSelector(
@@ -2413,28 +2420,32 @@ function MediaPlayerTime(props: MediaPlayerTimeProps) {
 	const [, seekableEnd = 0] = useMediaSelector(
 		(state) => state.mediaSeekable ?? [0, 0],
 	);
+	const effectiveDuration =
+		Number.isFinite(fallbackDuration) && (fallbackDuration ?? 0) > 0
+			? Math.max(seekableEnd, fallbackDuration ?? 0)
+			: seekableEnd;
 
 	const times = React.useMemo(() => {
 		if (variant === "remaining") {
 			return {
 				remaining: timeUtils.formatTime(
-					seekableEnd - mediaCurrentTime,
-					seekableEnd,
+					effectiveDuration - mediaCurrentTime,
+					effectiveDuration,
 				),
 			};
 		}
 
 		if (variant === "duration") {
 			return {
-				duration: timeUtils.formatTime(seekableEnd, seekableEnd),
+				duration: timeUtils.formatTime(effectiveDuration, effectiveDuration),
 			};
 		}
 
 		return {
-			current: timeUtils.formatTime(mediaCurrentTime, seekableEnd),
-			duration: timeUtils.formatTime(seekableEnd, seekableEnd),
+			current: timeUtils.formatTime(mediaCurrentTime, effectiveDuration),
+			duration: timeUtils.formatTime(effectiveDuration, effectiveDuration),
 		};
-	}, [variant, mediaCurrentTime, seekableEnd]);
+	}, [variant, mediaCurrentTime, effectiveDuration]);
 
 	const TimePrimitive = asChild ? Slot : "div";