added new requirements and fix UI bugs

src/modules/admin/components/courses/LessonsPreview.jsx

@@ -129,8 +129,17 @@ export function PreviewVideo({ url, thumb }) {
     );
 }
 
-export function PreviewBlock({ block }) {
+// onWatchProgress(percent, { blockId, blockType }) — only meaningful for video/audio
+// blocks; optional, undefined in admin preview mode (only the client reader passes it,
+// for watch_percent/watch_video/listen_audio tracking). PreviewBlock (not VideoBlock/
+// AudioBlock themselves) attaches the block's own id/type to each call, since a lesson
+// can have several blocks of the same type and watch_video/listen_audio need to know
+// which specific one just reported progress.
+export function PreviewBlock({ block, onWatchProgress }) {
     const { id, type, content } = block;
+    const withBlockMeta = onWatchProgress
+        ? (percent) => onWatchProgress(percent, { blockId: id, blockType: type })
+        : undefined;
 
     switch (type) {
         case "text":
@@ -140,11 +149,11 @@ export function PreviewBlock({ block }) {
         case "text-image":
             return <TextImageBlock blockId={id} content={content} readOnly />;
         case "video":
-            return <VideoBlock content={content} readOnly />;
+            return <VideoBlock content={content} readOnly onWatchProgress={withBlockMeta} />;
         case "text-video":
             return <TextVideoBlock blockId={id} content={content} readOnly />;
         case "audio":
-            return <AudioBlock content={content} />;
+            return <AudioBlock content={content} onWatchProgress={withBlockMeta} />;
         case "code":
             return <CodeBlock content={content} />;
         case "markdown":
@@ -158,7 +167,7 @@ export function PreviewBlock({ block }) {
 // PhotoProvider wraps ALL blocks so images across the whole lesson share
 // one lightbox session — users can swipe between them naturally.
 
-export function PreviewContent({ lesson, blocks, empty = "No content yet.", showHeader = true }) {
+export function PreviewContent({ lesson, blocks, empty = "No content yet.", showHeader = true, onWatchProgress }) {
     return (
         <PhotoProvider
             speed={() => 300}
@@ -185,7 +194,7 @@ export function PreviewContent({ lesson, blocks, empty = "No content yet.", show
                 <div className="space-y-4 sm:space-y-5">
                     {blocks.map((block) => (
                         <div key={block.id}>
-                            <PreviewBlock block={block} />
+                            <PreviewBlock block={block} onWatchProgress={onWatchProgress} />
                         </div>
                     ))}
                 </div>