added new requirements and fix UI bugs

src/components/generic/Blocks/Client/VideoBlock.jsx

@@ -159,9 +159,13 @@ function SettingsPanel({ speed, onSpeed, onClose }) {
 //
 // content shape: { asset_id, url, storage_provider, thumbnail_url? }
 
-export function VideoBlock({ content }) {
+// onWatchProgress(percent) — optional, called (throttled) as playback advances and
+// immediately at 100% on end. Backing the watch_percent completion requirement type;
+// harmless/unused when the lesson isn't configured for it (caller just won't pass it).
+export function VideoBlock({ content, onWatchProgress }) {
     const wrapRef = useRef(null);
     const vidRef  = useRef(null);
+    const lastReportRef = useRef(0);
 
     // ── Stream state ──────────────────────────────────────────────────────────
     const [blobUrl,      setBlobUrl]      = useState(null);
@@ -266,10 +270,23 @@ export function VideoBlock({ content }) {
 
         const onTimeUpdate = () => {
             setCurrentTime(v.currentTime);
-            if (v.duration) setProgress((v.currentTime / v.duration) * 100);
+            if (v.duration) {
+                const pct = (v.currentTime / v.duration) * 100;
+                setProgress(pct);
+                if (onWatchProgress) {
+                    const now = Date.now();
+                    if (now - lastReportRef.current > 3000) {
+                        lastReportRef.current = now;
+                        onWatchProgress(pct);
+                    }
+                }
+            }
         };
         const onLoaded   = () => setTotalDuration(v.duration);
-        const onEnded    = () => { setPlaying(false); setOverlayVisible(false); setEnded(true); };
+        const onEnded    = () => {
+            setPlaying(false); setOverlayVisible(false); setEnded(true);
+            onWatchProgress?.(100);
+        };
         const onWaiting  = () => setBuffering(true);
         const onCanPlay  = () => setBuffering(false);
         const onProgress = () => {