Improve cleanup logic for video and subtitle URLs

Author: richiemcilroy

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

@@ -234,9 +234,7 @@ export function CapVideoPlayer({
 }, retryInterval);
 }, [reloadVideo]);
 
-// Reset state when video source changes
 useEffect(() => {
-resolvedSrc.refetch();
 setVideoLoaded(false);
 setHasError(false);
 isRetryingRef.current = false;
@@ -248,7 +246,7 @@ export function CapVideoPlayer({
 clearTimeout(retryTimeout.current);
 retryTimeout.current = null;
 }
-}, [resolvedSrc.refetch]);
+}, [videoSrc]);
 
 // Track video duration for comment markers
 useEffect(() => {

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

@@ -103,7 +103,6 @@ export const ShareVideo = forwardRef<
 }
 }, [transcriptContent, transcriptError]);
 
-// Handle subtitle URL creation
 useEffect(() => {
 if (
 data.transcriptionStatus === "COMPLETE" &&
@@ -113,51 +112,48 @@ export const ShareVideo = forwardRef<
 const vttContent = formatTranscriptAsVTT(transcriptData);
 const blob = new Blob([vttContent], { type: "text/vtt" });
 const newUrl = URL.createObjectURL(blob);
-
-// Clean up previous URL
-if (subtitleUrl) {
-URL.revokeObjectURL(subtitleUrl);
-}
-
-setSubtitleUrl(newUrl);
+setSubtitleUrl((prev) => {
+if (prev) {
+URL.revokeObjectURL(prev);
+}
+return newUrl;
+});
 
 return () => {
 URL.revokeObjectURL(newUrl);
 };
-} else {
-// Clean up if no longer needed
-if (subtitleUrl) {
-URL.revokeObjectURL(subtitleUrl);
-setSubtitleUrl(null);
-}
 }
-}, [data.transcriptionStatus, transcriptData, subtitleUrl]);
+setSubtitleUrl((prev) => {
+if (prev) {
+URL.revokeObjectURL(prev);
+}
+return null;
+});
+}, [data.transcriptionStatus, transcriptData]);
 
-// Handle chapters URL creation
 useEffect(() => {
 if (chapters?.length > 0) {
 const vttContent = formatChaptersAsVTT(chapters);
 const blob = new Blob([vttContent], { type: "text/vtt" });
 const newUrl = URL.createObjectURL(blob);
-
-// Clean up previous URL
-if (chaptersUrl) {
-URL.revokeObjectURL(chaptersUrl);
-}
-
-setChaptersUrl(newUrl);
+setChaptersUrl((prev) => {
+if (prev) {
+URL.revokeObjectURL(prev);
+}
+return newUrl;
+});
 
 return () => {
 URL.revokeObjectURL(newUrl);
 };
-} else {
-// Clean up if no longer needed
-if (chaptersUrl) {
-URL.revokeObjectURL(chaptersUrl);
-setChaptersUrl(null);
-}
 }
-}, [chapters, chaptersUrl]);
+setChaptersUrl((prev) => {
+if (prev) {
+URL.revokeObjectURL(prev);
+}
+return null;
+});
+}, [chapters]);
 
 const isMp4Source =
 data.source.type === "desktopMP4" || data.source.type === "webMP4";