fix: add progress UI to YouTube upload dialog and fix realtime delivery

- Show inline progress bar with percentage in upload dialog instead of
  closing immediately after starting upload
- Dialog now has 4 states: form, in-progress, complete, error
- Use realtime events (useFrappeEventListener) for instant progress
  updates with fallback 5s polling for reliability
- Remove doctype/docname scoping from publish_realtime calls so events
  reach the site room that useFrappeEventListener listens on
- Switch YouTube job queue from "long" to "default" (no long worker in
  Procfile)
- Remove duplicate import requests in youtube.py

Co-Authored-By: Claude Opus 4.6 <[email protected]>

Author: NagariaHussain

frontend/src/components/review/YouTubeUploadDialog.tsx

@@ -13,6 +13,7 @@ import { Button } from "@/components/ui/button"
 import { Input } from "@/components/ui/input"
 import { Label } from "@/components/ui/label"
 import { Textarea } from "@/components/ui/textarea"
+import { Progress } from "@/components/ui/progress"
 import {
   Select,
   SelectContent,
@@ -26,6 +27,11 @@ interface YouTubeUploadDialogProps {
   onOpenChange: (open: boolean) => void
   assetName: string
   fileName: string
+  uploadStatus: string
+  uploadStage: string
+  uploadPercent: number
+  uploadError: string
+  uploadVideoUrl: string
   onUploadStarted: () => void
 }
 
@@ -34,6 +40,11 @@ export function YouTubeUploadDialog({
   onOpenChange,
   assetName,
   fileName,
+  uploadStatus,
+  uploadStage,
+  uploadPercent,
+  uploadError,
+  uploadVideoUrl,
   onUploadStarted,
 }: YouTubeUploadDialogProps) {
   const [title, setTitle] = useState(fileName.replace(/\.[^/.]+$/, ""))
@@ -51,6 +62,9 @@ export function YouTubeUploadDialog({
   )
 
   const isConnected = statusData?.message?.connected
+  const isInProgress = uploadStatus === "Queued" || uploadStatus === "Uploading"
+  const isComplete = uploadStatus === "Complete"
+  const isError = uploadStatus === "Error"
 
   const handleUpload = async () => {
     if (!title.trim()) {
@@ -65,18 +79,24 @@ export function YouTubeUploadDialog({
         description: description.trim(),
         privacy_status: privacyStatus,
       })
-      toast.success("YouTube upload started")
-      onOpenChange(false)
       onUploadStarted()
     } catch (e: unknown) {
       const message = e instanceof Error ? e.message : "Failed to start upload"
       toast.error(message)
     }
   }
 
+  const stageLabel = uploadStage === "downloading"
+    ? "Downloading from storage..."
+    : uploadStage === "uploading"
+      ? "Uploading to YouTube..."
+      : uploadStage === "queued"
+        ? "Queued, waiting to start..."
+        : "Processing..."
+
   return (
-    <Dialog open={open} onOpenChange={onOpenChange}>
-      <DialogContent className="sm:max-w-md">
+    <Dialog open={open} onOpenChange={(v) => { if (!isInProgress) onOpenChange(v) }}>
+      <DialogContent className="sm:max-w-md" onInteractOutside={(e) => { if (isInProgress) e.preventDefault() }}>
         <DialogHeader>
           <DialogTitle>Upload to YouTube</DialogTitle>
           <DialogDescription>
@@ -95,7 +115,6 @@ export function YouTubeUploadDialog({
               variant="outline"
               onClick={() => {
                 onOpenChange(false)
-                // Dispatch event to open settings to youtube tab
                 window.dispatchEvent(
                   new CustomEvent("open-settings", { detail: { tab: "youtube" } })
                 )
@@ -104,6 +123,63 @@ export function YouTubeUploadDialog({
               Open Settings
             </Button>
           </div>
+        ) : isInProgress ? (
+          <div className="py-4 space-y-3">
+            <div className="space-y-2">
+              <div className="flex items-center justify-between text-xs text-muted-foreground">
+                <span>{stageLabel}</span>
+                <span>{uploadPercent}%</span>
+              </div>
+              <Progress value={uploadPercent} className="h-2" />
+            </div>
+            <p className="text-xs text-muted-foreground text-center">
+              You can close this dialog — the upload will continue in the background.
+            </p>
+            <DialogFooter>
+              <Button variant="outline" size="sm" onClick={() => onOpenChange(false)}>
+                Close
+              </Button>
+            </DialogFooter>
+          </div>
+        ) : isComplete ? (
+          <div className="py-4 space-y-3">
+            <div className="flex items-center gap-2 rounded-md border border-border bg-muted/30 px-3 py-2.5">
+              <div className="size-2 rounded-full bg-green-500 shrink-0" />
+              <p className="text-sm font-medium">Upload complete</p>
+            </div>
+            <DialogFooter>
+              {uploadVideoUrl && (
+                <Button variant="outline" size="sm" asChild>
+                  <a href={uploadVideoUrl} target="_blank" rel="noopener noreferrer">
+                    View on YouTube
+                  </a>
+                </Button>
+              )}
+              <Button size="sm" onClick={() => onOpenChange(false)}>
+                Done
+              </Button>
+            </DialogFooter>
+          </div>
+        ) : isError ? (
+          <div className="py-4 space-y-3">
+            <div className="flex items-center gap-2 rounded-md border border-destructive/30 bg-destructive/5 px-3 py-2.5">
+              <div className="size-2 rounded-full bg-destructive shrink-0" />
+              <div className="min-w-0 flex-1">
+                <p className="text-sm font-medium">Upload failed</p>
+                {uploadError && (
+                  <p className="text-xs text-muted-foreground truncate">{uploadError}</p>
+                )}
+              </div>
+            </div>
+            <DialogFooter>
+              <Button variant="outline" size="sm" onClick={() => onOpenChange(false)}>
+                Close
+              </Button>
+              <Button size="sm" onClick={handleUpload} disabled={uploading}>
+                Retry
+              </Button>
+            </DialogFooter>
+          </div>
         ) : (
           <>
             <div className="space-y-4">

frontend/src/pages/ReviewPage.tsx

@@ -1,6 +1,6 @@
 import { useCallback, useEffect, useState } from "react"
 import { useParams, useSearchParams } from "react-router"
-import { useFrappeGetCall, useFrappePostCall, useFrappeAuth } from "frappe-react-sdk"
+import { useFrappeGetCall, useFrappePostCall, useFrappeAuth, useFrappeEventListener } from "frappe-react-sdk"
 import { Spinner } from "@/components/ui/spinner"
 import { ReviewProvider } from "@/contexts/ReviewContext"
 import { useReviewContext } from "@/hooks/useReviewContext"
@@ -165,25 +165,76 @@ function ReviewPageInner({
 
   const proxyStatus = proxyStatusData?.message?.proxy_status || asset.proxy_status || ""
 
-  // YouTube upload polling
-  const [isYouTubePolling, setIsYouTubePolling] = useState(
-    asset.youtube_upload_status === "Queued" || asset.youtube_upload_status === "Uploading"
-  )
+  // YouTube upload — realtime + fallback polling
+  const [youtubeProgress, setYoutubeProgress] = useState<{
+    status: string
+    videoUrl: string
+    percent: number
+    stage: string
+    error: string
+  }>({
+    status: asset.youtube_upload_status || "",
+    videoUrl: asset.youtube_video_url || "",
+    percent: 0,
+    stage: "",
+    error: "",
+  })
+
+  const isYouTubeActive = youtubeProgress.status === "Queued" || youtubeProgress.status === "Uploading"
+
+  // Realtime listener for instant progress
+  useFrappeEventListener<{
+    asset_name: string
+    stage: string
+    percent: number
+    video_url?: string
+    error?: string
+  }>("youtube_upload_progress", useCallback((data) => {
+    if (data.asset_name !== asset.name) return
+    if (data.stage === "complete") {
+      setYoutubeProgress({ status: "Complete", videoUrl: data.video_url || "", percent: 100, stage: "complete", error: "" })
+      mutateReviewData()
+    } else if (data.stage === "error") {
+      setYoutubeProgress((prev) => ({ ...prev, status: "Error", stage: "error", error: data.error || "Upload failed" }))
+      mutateReviewData()
+    } else {
+      setYoutubeProgress((prev) => ({
+        ...prev,
+        status: "Uploading",
+        stage: data.stage,
+        percent: data.percent,
+      }))
+    }
+  }, [asset.name, mutateReviewData]))
 
-  const { data: youtubeStatusData } = useFrappeGetCall<{
+  // Fallback polling in case realtime events don't arrive
+  const { data: youtubeStatusPoll } = useFrappeGetCall<{
     message: { youtube_upload_status: string; youtube_video_id: string; youtube_video_url: string }
   }>(
     "vms.youtube.get_youtube_upload_status",
-    isYouTubePolling ? { asset_name: asset.name } : undefined,
-    isYouTubePolling ? `youtube-status-${asset.name}` : undefined,
-    {
-      revalidateOnFocus: false,
-      refreshInterval: isYouTubePolling ? 5000 : 0,
-    },
+    isYouTubeActive ? { asset_name: asset.name } : undefined,
+    isYouTubeActive ? `youtube-poll-${asset.name}` : undefined,
+    { revalidateOnFocus: false, refreshInterval: isYouTubeActive ? 5000 : 0 },
   )
 
-  const youtubeUploadStatus = youtubeStatusData?.message?.youtube_upload_status || asset.youtube_upload_status || ""
-  const youtubeVideoUrl = youtubeStatusData?.message?.youtube_video_url || asset.youtube_video_url || ""
+  // Sync poll results into state (only if realtime hasn't already updated)
+  useEffect(() => {
+    const polled = youtubeStatusPoll?.message
+    if (!polled) return
+    const pollStatus = polled.youtube_upload_status
+    if (pollStatus === "Complete" && youtubeProgress.status !== "Complete") {
+      setYoutubeProgress({ status: "Complete", videoUrl: polled.youtube_video_url || "", percent: 100, stage: "complete", error: "" })
+      mutateReviewData()
+    } else if (pollStatus === "Error" && youtubeProgress.status !== "Error") {
+      setYoutubeProgress((prev) => ({ ...prev, status: "Error", stage: "error", error: "Upload failed" }))
+      mutateReviewData()
+    } else if (pollStatus === "Uploading" && youtubeProgress.status === "Queued") {
+      setYoutubeProgress((prev) => ({ ...prev, status: "Uploading", stage: "uploading" }))
+    }
+  }, [youtubeStatusPoll?.message]) // eslint-disable-line react-hooks/exhaustive-deps
+
+  const youtubeUploadStatus = youtubeProgress.status
+  const youtubeVideoUrl = youtubeProgress.videoUrl
 
   // Stop proxy polling when done
   useEffect(() => {
@@ -195,18 +246,7 @@ function ReviewPageInner({
     }
   }, [proxyStatus])
 
-  // Stop YouTube polling when done
-  useEffect(() => {
-    if (youtubeUploadStatus === "Complete" || youtubeUploadStatus === "Error") {
-      setIsYouTubePolling(false)
-      mutateReviewData()
-      if (youtubeUploadStatus === "Complete") {
-        toast.success("Video uploaded to YouTube!")
-      } else if (youtubeUploadStatus === "Error") {
-        toast.error("YouTube upload failed. You can retry.")
-      }
-    }
-  }, [youtubeUploadStatus, mutateReviewData])
+
 
   const handleGenerateProxy = useCallback(async () => {
     await callGenerateProxy({ asset_name: asset.name })
@@ -274,6 +314,7 @@ function ReviewPageInner({
 
   const handleResetYouTubeUpload = useCallback(async () => {
     await callResetYouTubeUpload({ asset_name: asset.name })
+    setYoutubeProgress({ status: "", videoUrl: "", percent: 0, stage: "", error: "" })
     mutateReviewData()
     setYoutubeDialogOpen(true)
   }, [asset.name, callResetYouTubeUpload, mutateReviewData])
@@ -366,8 +407,13 @@ function ReviewPageInner({
           onOpenChange={setYoutubeDialogOpen}
           assetName={asset.name}
           fileName={asset.file_name}
+          uploadStatus={youtubeUploadStatus}
+          uploadStage={youtubeProgress.stage}
+          uploadPercent={youtubeProgress.percent}
+          uploadError={youtubeProgress.error}
+          uploadVideoUrl={youtubeVideoUrl}
           onUploadStarted={() => {
-            setIsYouTubePolling(true)
+            setYoutubeProgress({ status: "Queued", videoUrl: "", percent: 0, stage: "queued", error: "" })
             mutateReviewData()
           }}
         />

vms/public/frontend/index.html

@@ -9,8 +9,8 @@
     <meta name="apple-mobile-web-app-capable" content="yes" />
     <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
     <title>BWH VMS</title>
-    <script type="module" crossorigin src="/assets/vms/frontend/assets/index-lNBSaCb8.js"></script>
-    <link rel="stylesheet" crossorigin href="/assets/vms/frontend/assets/index-iRNwJROS.css">
+    <script type="module" crossorigin src="/assets/vms/frontend/assets/index-CE69mJ0e.js"></script>
+    <link rel="stylesheet" crossorigin href="/assets/vms/frontend/assets/index-wapHyRJt.css">
   <link rel="manifest" href="/assets/vms/frontend/manifest.webmanifest"></head>
   <body>
     <div id="root"></div>

vms/public/frontend/sw.js

@@ -9,8 +9,8 @@
     <meta name="apple-mobile-web-app-capable" content="yes" />
     <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
     <title>BWH VMS</title>
-    <script type="module" crossorigin src="/assets/vms/frontend/assets/index-lNBSaCb8.js"></script>
-    <link rel="stylesheet" crossorigin href="/assets/vms/frontend/assets/index-iRNwJROS.css">
+    <script type="module" crossorigin src="/assets/vms/frontend/assets/index-CE69mJ0e.js"></script>
+    <link rel="stylesheet" crossorigin href="/assets/vms/frontend/assets/index-wapHyRJt.css">
   <link rel="manifest" href="/assets/vms/frontend/manifest.webmanifest"></head>
   <body>
     <div id="root"></div>