feat: add sequential progression and video watch lesson completion

Gate student content by completion order, track per-video watch progress
with seek enforcement, and auto-complete lessons at the configured
threshold. Show ring progress in the lesson header, keep watch progress
on rewatch, and sync progression locks client-side so the next item
unlocks after completion.

apps/dashboard/src/lib/features/course/components/lesson/constants.ts

@@ -39,6 +39,8 @@ export const tabs: MaterialTab[] = [
   }
 ];
 
+export const SETTINGS_TAB_VALUE = 'settings';
+
 export function orderedTabs(tabs: MaterialTab[], settingTabs?: Tabs[]) {
   if (!Array.isArray(settingTabs)) return tabs;
 

apps/dashboard/src/lib/features/course/components/lesson/content-list.svelte

@@ -200,7 +200,10 @@
   }
 
   function isLockedForStudent(item: ContentDndItem, isStudent: boolean) {
-    return isStudent && (item.isUnlocked ?? true) === false;
+    if (!isStudent) return false;
+    if ((item.isUnlocked ?? true) === false) return true;
+
+    return item.accessible === false;
   }
 
   function getItemLockKey(item: ContentDndItem) {

apps/dashboard/src/lib/features/course/components/lesson/content-navigation-actions.svelte

@@ -6,6 +6,7 @@
   import { CircleCheckIcon } from '$features/ui/icons';
   import { Button } from '@cio/ui/base/button';
   import * as Tooltip from '@cio/ui/base/tooltip';
+  import { PercentRingProgress } from '@cio/ui/custom/percent-ring-progress';
   import { isOrgStudent } from '$lib/utils/store/app';
   import { t } from '$lib/utils/functions/translations';
   import { courseApi, lessonApi } from '$features/course/api';
@@ -14,6 +15,7 @@
   import { snackbar } from '$features/ui/snackbar/store';
   import type { CourseContentItem } from '$features/course/utils/types';
   import { openCourseCompletionModal } from '$features/course/store/course-completion-modal';
+  import { updateLessonCompletionInCourseContent } from '$features/course/utils/content-completion';
 
   interface Props {
     lessonId?: string;
@@ -63,8 +65,54 @@
   const showMarkComplete = $derived(!!lessonId && !exerciseId);
 
   const currentLessonItem = $derived(lessonId ? lessonItems.find((l) => l.id === lessonId) : null);
-  const isLessonLocked = $derived($isOrgStudent && currentLessonItem && !(currentLessonItem.isUnlocked ?? false));
-  const isMarkCompleteDisabled = $derived(isMarkingComplete || isLessonLocked || isLessonComplete);
+  const isTeacherLocked = $derived($isOrgStudent && currentLessonItem && !(currentLessonItem.isUnlocked ?? false));
+  const isProgressionLocked = $derived($isOrgStudent && currentLessonItem?.accessible === false && !isTeacherLocked);
+  const isVideoWatchLesson = $derived.by(() => {
+    if (!lessonId) return false;
+
+    return (
+      lessonApi.lesson?.completionPolicy === 'video_watch' || currentLessonItem?.completionPolicy === 'video_watch'
+    );
+  });
+  const watchedPercent = $derived.by(() => {
+    const progress = lessonApi.lesson?.watchProgress;
+    if (progress?.isComplete) return 100;
+
+    if (typeof progress?.watchedPercent === 'number') {
+      return progress.watchedPercent;
+    }
+
+    const durationSeconds = progress?.durationSeconds;
+    if (durationSeconds && durationSeconds > 0) {
+      return Math.min(100, ((progress?.watchedSeconds ?? 0) / durationSeconds) * 100);
+    }
+
+    return 0;
+  });
+
+  const watchedPercentDisplay = $derived(Math.round(watchedPercent));
+
+  const watchVideosRequired = $derived(lessonApi.lesson?.watchProgress?.videosRequired ?? 0);
+  const watchVideosComplete = $derived(lessonApi.lesson?.watchProgress?.videosComplete ?? 0);
+  const isLessonLocked = $derived(isTeacherLocked || isProgressionLocked);
+  const isVideoWatchComplete = $derived(isVideoWatchLesson && (lessonApi.lesson?.watchProgress?.isComplete ?? false));
+  const showVideoWatchCompleteState = $derived(isVideoWatchComplete || (isVideoWatchLesson && isLessonComplete));
+  const isMarkCompleteDisabled = $derived(
+    isMarkingComplete || isLessonLocked || isLessonComplete || isVideoWatchLesson
+  );
+  const showWatchProgress = $derived(
+    !!lessonId && $isOrgStudent && isVideoWatchLesson && !showVideoWatchCompleteState && !isLessonLocked
+  );
+
+  const watchProgressTooltip = $derived(
+    watchVideosRequired > 1
+      ? t.get('course.navItem.lessons.watch_progress.videos_complete', {
+          complete: watchVideosComplete,
+          required: watchVideosRequired,
+          percent: watchedPercentDisplay
+        })
+      : t.get('course.navItem.lessons.watch_progress.status', { percent: watchedPercentDisplay })
+  );
 
   async function markLessonComplete(currentLessonId: string) {
     isMarkingComplete = true;
@@ -99,31 +147,7 @@
   function updateCourseContentCompletion(currentLessonId: string, isComplete: boolean) {
     if (!courseApi.course?.content) return;
 
-    if (courseApi.course.content.grouped) {
-      courseApi.course = {
-        ...courseApi.course,
-        content: {
-          ...courseApi.course.content,
-          sections: courseApi.course.content.sections.map((section) => ({
-            ...section,
-            items: section.items.map((item) =>
-              item.type === ContentType.Lesson && item.id === currentLessonId ? { ...item, isComplete } : item
-            )
-          }))
-        }
-      };
-      return;
-    }
-
-    courseApi.course = {
-      ...courseApi.course,
-      content: {
-        ...courseApi.course.content,
-        items: courseApi.course.content.items.map((item) =>
-          item.type === ContentType.Lesson && item.id === currentLessonId ? { ...item, isComplete } : item
-        )
-      }
-    };
+    courseApi.course = updateLessonCompletionInCourseContent(courseApi.course, currentLessonId, isComplete);
   }
 
   const INTERACTIVE_TAGS = new Set(['INPUT', 'TEXTAREA', 'SELECT']);
@@ -145,20 +169,31 @@
 <svelte:window onkeydown={handleKeydown} />
 
 <div class="flex items-center gap-2">
-  {#if showMarkComplete && lessonId}
-    <Button
-      size="sm"
-      variant="secondary"
-      onclick={() => markLessonComplete(lessonId)}
-      loading={isMarkingComplete}
-      disabled={isMarkCompleteDisabled}
-    >
-      <CircleCheckIcon size={14} filled={isLessonComplete} />
-      <span class="text-xs">{$t('course.navItem.lessons.mark_as')} {$t('course.navItem.lessons.complete')}</span>
-    </Button>
-  {/if}
-
   <Tooltip.Provider>
+    {#if showWatchProgress}
+      <Tooltip.Root>
+        <Tooltip.Trigger>
+          <span class="inline-flex shrink-0" aria-label={watchProgressTooltip}>
+            <PercentRingProgress value={watchedPercent} size="small" />
+          </span>
+        </Tooltip.Trigger>
+        <Tooltip.Content side="bottom" sideOffset={4}>
+          {watchProgressTooltip}
+        </Tooltip.Content>
+      </Tooltip.Root>
+    {:else if showMarkComplete && lessonId && !isLessonLocked && (showVideoWatchCompleteState || !isVideoWatchLesson)}
+      <Button
+        size="sm"
+        variant="secondary"
+        onclick={() => markLessonComplete(lessonId)}
+        loading={isMarkingComplete}
+        disabled={isMarkCompleteDisabled || showVideoWatchCompleteState}
+      >
+        <CircleCheckIcon size={14} filled={isLessonComplete || showVideoWatchCompleteState} />
+        <span class="text-xs">{$t('course.navItem.lessons.mark_as')} {$t('course.navItem.lessons.complete')}</span>
+      </Button>
+    {/if}
+
     <div class="flex items-center gap-1">
       <Tooltip.Root>
         <Tooltip.Trigger>

apps/dashboard/src/lib/features/course/components/lesson/content-section-list.svelte

@@ -366,7 +366,10 @@
   }
 
   function isLockedForStudent(item: ContentDndItem) {
-    return isStudentView && (item.isUnlocked ?? true) === false;
+    if (!isStudentView) return false;
+    if ((item.isUnlocked ?? true) === false) return true;
+
+    return item.accessible === false;
   }
 
   function getItemLockKey(item: ContentDndItem) {

apps/dashboard/src/lib/features/course/components/lesson/index.ts

@@ -9,3 +9,4 @@ export { default as Video } from './video/video.svelte';
 export { default as Document } from './document/document.svelte';
 export { default as AddVideoModal } from './video/add-video-modal.svelte';
 export { default as AddDocumentModal } from './document/add-document-modal.svelte';
+export { default as LessonSettingsTab } from './lesson-settings-tab.svelte';

apps/dashboard/src/lib/features/course/components/lesson/lesson-page-edit-header.svelte

@@ -79,7 +79,7 @@
 
   {#if mode === MODES.edit && !$isOrgStudent}
     <RoleBasedSecurity allowedRoles={[1, 2]}>
-      <div class="flex items-center gap-2">
+      <div class="flex flex-wrap items-center justify-end gap-2">
         <IconButton onclick={onToggleLock} aria-label={lockLabel} title={lockLabel}>
           {#if isUnlocked}
             <UnlockIcon size={18} />

apps/dashboard/src/lib/features/course/components/lesson/lesson-settings-tab.svelte

@@ -0,0 +1,183 @@
+<script lang="ts">
+  import { lessonApi } from '$features/course/api';
+  import { InputField } from '@cio/ui/custom/input-field';
+  import { Checkbox } from '@cio/ui/base/checkbox';
+  import * as Field from '@cio/ui/base/field';
+  import * as Select from '@cio/ui/base/select';
+  import { t } from '$lib/utils/functions/translations';
+  import { getVideoTitle, isHlsUploadVideo, type LessonVideo } from './video/video-card-utils';
+
+  type LessonCompletionPolicy = 'manual' | 'video_watch' | 'none';
+
+  const completionPolicy = $derived(lessonApi.lesson?.completionPolicy ?? 'manual');
+  const videoWatchThreshold = $derived(lessonApi.lesson?.videoWatchThreshold ?? 95);
+  const videos = $derived(lessonApi.lesson?.videos ?? []);
+
+  const enforceableVideos = $derived(
+    videos
+      .map((video, index) => ({ video, index }))
+      .filter(({ video }) => video.type === 'upload' && Boolean(video.assetId))
+  );
+
+  const showWatchVideosError = $derived(
+    completionPolicy === 'video_watch' &&
+      enforceableVideos.length > 0 &&
+      !enforceableVideos.some(({ video }) => video.watchEnforced)
+  );
+
+  function policyTriggerLabel(policy: LessonCompletionPolicy): string {
+    if (policy === 'video_watch') return t.get('course.navItem.lessons.completion_policy.video_watch_label');
+    if (policy === 'none') return t.get('course.navItem.lessons.completion_policy.none_label');
+
+    return t.get('course.navItem.lessons.completion_policy.manual_label');
+  }
+
+  function handleCompletionPolicyChange(value: string) {
+    if (value !== 'manual' && value !== 'video_watch' && value !== 'none') return;
+
+    lessonApi.updateLessonState('completionPolicy', value);
+  }
+
+  function handleVideoWatchThresholdChange(event: Event) {
+    const parsed = Number((event.currentTarget as HTMLInputElement).value);
+    if (Number.isNaN(parsed)) return;
+
+    lessonApi.updateLessonState('videoWatchThreshold', parsed);
+  }
+
+  function toggleVideoWatchEnforced(index: number, checked: boolean) {
+    const currentVideos = lessonApi.lesson?.videos;
+    if (!currentVideos) return;
+
+    const updatedVideos = currentVideos.map((video, videoIndex) =>
+      videoIndex === index ? { ...video, watchEnforced: checked } : video
+    );
+
+    lessonApi.updateLessonState('videos', updatedVideos);
+  }
+
+  function isVideoWatchEnforced(video: LessonVideo): boolean {
+    return Boolean(video.watchEnforced);
+  }
+</script>
+
+<div class="p-4">
+  <Field.Group class="w-full max-w-xl">
+    <Field.Set>
+      <Field.Legend>{$t('course.navItem.lessons.settings.progression.heading')}</Field.Legend>
+      <Field.Description>{$t('course.navItem.lessons.settings.progression.intro')}</Field.Description>
+      <Field.Description class="ui:text-muted-foreground">
+        {$t('course.navItem.lessons.settings.progression.students_only_note')}
+      </Field.Description>
+
+      <Field.Group>
+        <Field.Field>
+          <Field.Label for="lesson-completion-policy">
+            {$t('course.navItem.lessons.completion_policy.label')}
+          </Field.Label>
+          <Select.Root type="single" value={completionPolicy} onValueChange={handleCompletionPolicyChange}>
+            <Select.Trigger id="lesson-completion-policy" class="w-full max-w-xs">
+              {policyTriggerLabel(completionPolicy)}
+            </Select.Trigger>
+            <Select.Content class="max-w-sm">
+              <Select.Item value="manual">
+                <div class="flex flex-col items-start gap-0.5">
+                  <span>{$t('course.navItem.lessons.completion_policy.manual_label')}</span>
+                  <span class="ui:text-muted-foreground text-xs">
+                    {$t('course.navItem.lessons.completion_policy.manual_description')}
+                  </span>
+                </div>
+              </Select.Item>
+              <Select.Item value="video_watch">
+                <div class="flex flex-col items-start gap-0.5">
+                  <span>{$t('course.navItem.lessons.completion_policy.video_watch_label')}</span>
+                  <span class="ui:text-muted-foreground text-xs">
+                    {$t('course.navItem.lessons.completion_policy.video_watch_description')}
+                  </span>
+                </div>
+              </Select.Item>
+              <Select.Item value="none">
+                <div class="flex flex-col items-start gap-0.5">
+                  <span>{$t('course.navItem.lessons.completion_policy.none_label')}</span>
+                  <span class="ui:text-muted-foreground text-xs">
+                    {$t('course.navItem.lessons.completion_policy.none_description')}
+                  </span>
+                </div>
+              </Select.Item>
+            </Select.Content>
+          </Select.Root>
+        </Field.Field>
+
+        <div class="space-y-2 text-sm">
+          <p class="font-medium">{$t('course.navItem.lessons.settings.progression.option_guide_heading')}</p>
+          <ul class="ui:text-muted-foreground list-disc space-y-1 pl-5">
+            <li>
+              <span class="ui:text-foreground font-medium">
+                {$t('course.navItem.lessons.completion_policy.manual_label')}:
+              </span>
+              {$t('course.navItem.lessons.completion_policy.manual_description')}
+            </li>
+            <li>
+              <span class="ui:text-foreground font-medium">
+                {$t('course.navItem.lessons.completion_policy.video_watch_label')}:
+              </span>
+              {$t('course.navItem.lessons.completion_policy.video_watch_description')}
+            </li>
+            <li>
+              <span class="ui:text-foreground font-medium">
+                {$t('course.navItem.lessons.completion_policy.none_label')}:
+              </span>
+              {$t('course.navItem.lessons.completion_policy.none_description')}
+            </li>
+          </ul>
+        </div>
+
+        {#if completionPolicy === 'video_watch'}
+          <Field.Field>
+            <InputField
+              type="number"
+              label={$t('course.navItem.lessons.completion_policy.watch_threshold')}
+              value={String(videoWatchThreshold)}
+              onInputChange={handleVideoWatchThresholdChange}
+            />
+          </Field.Field>
+
+          <Field.Field>
+            <Field.Label>{$t('course.navItem.lessons.settings.progression.watch_videos_heading')}</Field.Label>
+            <Field.Description
+              >{$t('course.navItem.lessons.settings.progression.watch_videos_helper')}</Field.Description
+            >
+
+            {#if enforceableVideos.length === 0}
+              <Field.Description
+                >{$t('course.navItem.lessons.settings.progression.watch_videos_empty')}</Field.Description
+              >
+            {:else}
+              <Field.Group class="gap-3">
+                {#each enforceableVideos as { video, index } (video.assetId ?? index)}
+                  <Field.Field orientation="horizontal">
+                    <Checkbox
+                      id={`watch-enforced-${video.assetId}`}
+                      checked={isVideoWatchEnforced(video)}
+                      onCheckedChange={(checked) => toggleVideoWatchEnforced(index, checked === true)}
+                    />
+                    <Field.Label for={`watch-enforced-${video.assetId}`} class="font-normal">
+                      {getVideoTitle(video, index)}
+                      {#if isHlsUploadVideo(video)}
+                        <span class="ui:text-muted-foreground ml-1 text-xs">(HLS)</span>
+                      {/if}
+                    </Field.Label>
+                  </Field.Field>
+                {/each}
+              </Field.Group>
+            {/if}
+
+            {#if showWatchVideosError}
+              <Field.Error>{$t('course.navItem.lessons.settings.progression.watch_videos_required')}</Field.Error>
+            {/if}
+          </Field.Field>
+        {/if}
+      </Field.Group>
+    </Field.Set>
+  </Field.Group>
+</div>

apps/dashboard/src/lib/features/course/components/lesson/video/lesson-video-player.svelte

@@ -7,8 +7,11 @@
   import { t } from '$lib/utils/functions/translations';
   import { sidePanel } from '$features/side-panel';
   import { classroomio } from '$lib/utils/services/api';
+  import { lessonApi } from '$features/course/api';
+  import { snackbar } from '$features/ui/snackbar/store';
   import type { AssetTranscriptPayload } from '$features/media/utils/types';
-  import type { LessonVideo } from './video-card-utils';
+  import { isOrgStudent } from '$lib/utils/store/app';
+  import { resolveWatchEnforcedAssetIds, type LessonVideo } from './video-card-utils';
   import { lessonVideoBus } from './lesson-video-bus.svelte';
   import { TRANSCRIPT_PANEL_ID } from './transcript-panel-definition';
 
@@ -83,9 +86,11 @@
 
   interface Props {
     video: LessonVideo;
+    courseId: string;
+    lessonId: string;
   }
 
-  let { video }: Props = $props();
+  let { video, courseId, lessonId }: Props = $props();
 
   let localTranscript = $state<AssetTranscriptPayload | null>(null);
   let localTranscriptLoading = $state(false);
@@ -310,11 +315,76 @@
     jobPoller.start();
   }
 
+  const isEnforceableUpload = $derived(video.type === 'upload' || isHls);
+
+  const isWatchEnforcedForVideo = $derived.by(() => {
+    const lesson = lessonApi.lesson;
+    if (!lesson || !uploadAssetId || !isEnforceableUpload) return false;
+
+    const enforcedAssetIds = resolveWatchEnforcedAssetIds(lesson.videos, lesson.completionPolicy);
+
+    return enforcedAssetIds.includes(uploadAssetId);
+  });
+
+  const assetWatchProgress = $derived.by(() => {
+    const lesson = lessonApi.lesson;
+    if (!lesson?.watchProgress?.assets || !uploadAssetId) return null;
+
+    return lesson.watchProgress.assets.find((asset) => asset.assetId === uploadAssetId) ?? null;
+  });
+
+  const seekPolicy = $derived.by(() => {
+    const lesson = lessonApi.lesson;
+    if (!$isOrgStudent || !lesson || lesson.completionPolicy !== 'video_watch' || !isWatchEnforcedForVideo) {
+      return undefined;
+    }
+
+    if (assetWatchProgress?.isComplete) {
+      return undefined;
+    }
+
+    return {
+      mode: 'locked_until_complete' as const,
+      watchThresholdPercent: lesson.videoWatchThreshold ?? 95,
+      initialFurthestSeconds: assetWatchProgress?.furthestSeconds ?? 0,
+      pauseOnHidden: true,
+      onProgress: (payload: { positionSeconds: number; playedDeltaSeconds: number; durationSeconds: number }) => {
+        if (!uploadAssetId) return;
+
+        void lessonApi.reportWatchProgress(courseId, lessonId, {
+          ...payload,
+          assetId: uploadAssetId
+        });
+      },
+      onSeekBlocked: () => {
+        snackbar.error('course.navItem.lessons.watch_progress.seek_blocked');
+      }
+    };
+  });
+
+  async function restoreWatchProgress(): Promise<void> {
+    if (!$isOrgStudent || !uploadAssetId) return;
+
+    const cachedAsset = assetWatchProgress;
+    if (cachedAsset?.lastPositionSeconds && cachedAsset.lastPositionSeconds > 0) {
+      pendingResumeSeconds = cachedAsset.lastPositionSeconds;
+      return;
+    }
+
+    const progress = await lessonApi.getWatchProgress(courseId, lessonId);
+    const assetProgress = progress?.assets?.find((asset) => asset.assetId === uploadAssetId);
+    if (assetProgress?.lastPositionSeconds && assetProgress.lastPositionSeconds > 0) {
+      pendingResumeSeconds = assetProgress.lastPositionSeconds;
+    }
+  }
+
   onMount(() => {
     if (lessonVideoBus.assetId === null || lessonVideoBus.assetId === uploadAssetId) {
       syncVideoBus();
     }
 
+    void restoreWatchProgress();
+
     void (async () => {
       await loadTranscript();
       if (!isMounted) return;
@@ -399,9 +469,11 @@
       onSourceLoaded: handleSourceLoaded,
       onBeforeHlsLoad: isHls && uploadAssetId ? () => mintHlsCookie(uploadAssetId) : undefined,
       transcriptPanelControl,
+      loadingLabel: $t('course.navItem.lessons.materials.tabs.video.loading'),
       playbackErrorLabel: $t('course.navItem.lessons.materials.tabs.video.playback_error'),
       playbackReloadLabel: $t('course.navItem.lessons.materials.tabs.video.playback_reload'),
-      onPlaybackReload: handlePlaybackReload
+      onPlaybackReload: handlePlaybackReload,
+      seekPolicy
     }}
   />
 </div>

apps/dashboard/src/lib/features/course/components/lesson/video/lesson-video-simple-card.svelte

@@ -25,6 +25,8 @@
 
   let { video, index, isEditMode, onRemove }: Props = $props();
 
+  let isTranscribingForVideo = $state(false);
+
   const thumbnailUrl = $derived(getVideoThumbnailUrl(video));
   const title = $derived(getVideoTitle(video, index));
   const durationSeconds = $derived(getVideoDurationSeconds(video));
@@ -143,6 +145,7 @@
             {onRemove}
             onThumbnailSaved={(url) => lessonApi.updateLessonVideoThumbnail(index, url)}
             onHlsMetadataUpdated={(metadata) => lessonApi.updateLessonVideoMetadata(index, metadata)}
+            onTranscribingChange={(v) => (isTranscribingForVideo = v)}
             menuPlacement="inline"
           />
         {/if}
@@ -150,6 +153,11 @@
       <p class="ui:text-muted-foreground mt-0.5 line-clamp-1 text-sm leading-snug">
         {channelLine}
       </p>
+      {#if isEditMode && isTranscribingForVideo}
+        <p class="mt-0.5 text-sm leading-snug text-orange-500">
+          {$t('course.navItem.lessons.materials.tabs.video.simple_card.transcription_in_progress')}
+        </p>
+      {/if}
       <p class="ui:text-muted-foreground mt-0.5 line-clamp-1 text-sm leading-snug">{metaLine}</p>
     </div>
   </div>

apps/dashboard/src/lib/features/course/components/lesson/video/video-card-dropdown.svelte

@@ -14,7 +14,7 @@
   import { sidePanel } from '$features/side-panel';
   import { snackbar } from '$features/ui/snackbar/store';
   import { t } from '$lib/utils/functions/translations';
-  import { onDestroy } from 'svelte';
+  import { onDestroy, onMount } from 'svelte';
   import {
     canGenerateHls1080,
     getHls1080Status,
@@ -32,11 +32,19 @@
     onRemove: () => void;
     onThumbnailSaved?: (thumbnailUrl: string) => void;
     onHlsMetadataUpdated?: (metadata: Record<string, unknown>) => void;
+    onTranscribingChange?: (value: boolean) => void;
     /** `inline` aligns with the title row (YouTube-style). `corner` is top-right overlay on the nearest `relative` ancestor. */
     menuPlacement?: 'inline' | 'corner';
   }
 
-  let { video, onRemove, onThumbnailSaved, onHlsMetadataUpdated, menuPlacement = 'inline' }: Props = $props();
+  let {
+    video,
+    onRemove,
+    onThumbnailSaved,
+    onHlsMetadataUpdated,
+    onTranscribingChange,
+    menuPlacement = 'inline'
+  }: Props = $props();
 
   let manageThumbsOpen = $state(false);
   let manageThumbsAsset = $state<OrganizationAsset | null>(null);
@@ -47,6 +55,11 @@
   let hasTranscript = $state(false);
   let hasCheckedTranscript = $state(false);
   let activePoller: JobPoller<MediaJobEnvelope> | null = null;
+
+  function setIsTranscribing(value: boolean) {
+    isTranscribing = value;
+    onTranscribingChange?.(value);
+  }
   let isGenerating1080 = $state(false);
   let sourceFileInput: HTMLInputElement | undefined = $state();
 
@@ -61,6 +74,12 @@
     isHlsUploadVideo(video) && !hasHls1080Rendition(video) && !isGenerating1080 && hls1080Status === 'unavailable'
   );
 
+  onMount(() => {
+    if (canGenerateTranscript) {
+      void ensureTranscriptChecked();
+    }
+  });
+
   onDestroy(() => {
     activePoller?.stop();
   });
@@ -69,8 +88,19 @@
     if (hasCheckedTranscript || !assetId) return;
 
     hasCheckedTranscript = true;
-    const data = await mediaApi.getAssetTranscript(assetId);
-    hasTranscript = !!data?.segments?.length;
+
+    const [transcriptData, runs] = await Promise.all([
+      mediaApi.getAssetTranscript(assetId),
+      jobsApi.getMediaJobsForAsset(assetId)
+    ]);
+
+    hasTranscript = !!transcriptData?.segments?.length;
+
+    const latest = runs?.[0];
+    if (latest && (latest.job.status === 'pending' || latest.job.status === 'running')) {
+      setIsTranscribing(true);
+      void startTranscriptionPoll(assetId);
+    }
   }
 
   async function ensureHlsMetadataChecked() {
@@ -99,13 +129,13 @@
     const latest = runs?.[0];
 
     if (!latest) {
-      isTranscribing = false;
+      setIsTranscribing(false);
 
       return;
     }
 
     if (latest.job.status === 'completed') {
-      isTranscribing = false;
+      setIsTranscribing(false);
       hasTranscript = true;
       snackbar.success('snackbar.media_manager.transcription_completed');
 
@@ -113,7 +143,7 @@
     }
 
     if (latest.job.status === 'failed' || latest.job.status === 'canceled') {
-      isTranscribing = false;
+      setIsTranscribing(false);
 
       return;
     }
@@ -124,7 +154,7 @@
         if (envelope.job.status === 'completed') {
           activePoller?.stop();
           activePoller = null;
-          isTranscribing = false;
+          setIsTranscribing(false);
           hasTranscript = true;
           snackbar.success('snackbar.media_manager.transcription_completed');
         }
@@ -132,7 +162,7 @@
         if (envelope.job.status === 'failed' || envelope.job.status === 'canceled') {
           activePoller?.stop();
           activePoller = null;
-          isTranscribing = false;
+          setIsTranscribing(false);
         }
       }
     });
@@ -143,10 +173,15 @@
     if (!assetId) return;
 
     const ok = await mediaApi.generateTranscript(assetId);
-    if (!ok) return;
 
-    isTranscribing = true;
-    await startTranscriptionPoll(assetId);
+    if (ok) {
+      setIsTranscribing(true);
+      await startTranscriptionPoll(assetId);
+      return;
+    }
+
+    hasCheckedTranscript = false;
+    await ensureTranscriptChecked();
   }
 
   async function handleViewTranscript() {
@@ -231,11 +266,7 @@
     }
   }
 
-  const generateLabel = $derived(
-    isTranscribing
-      ? t.get('course.navItem.lessons.materials.tabs.video.generate_transcript_in_progress')
-      : t.get('course.navItem.lessons.materials.tabs.video.generate_transcript')
-  );
+  const generateLabel = t.get('course.navItem.lessons.materials.tabs.video.generate_transcript');
 
   const generate1080Label = $derived(
     isGenerating1080

apps/dashboard/src/lib/features/course/components/lesson/video/video-card-utils.ts

@@ -168,3 +168,33 @@ export function formatVideoCreatedAt(isoString: string | null | undefined): stri
   if (Number.isNaN(d.getTime())) return null;
   return new Intl.DateTimeFormat('en-US', { dateStyle: 'medium' }).format(d);
 }
+
+export function isEnforceableLessonVideo(video: LessonVideo): boolean {
+  return video.type === 'upload' && Boolean((video as LessonVideo & { assetId?: string }).assetId);
+}
+
+export function resolveWatchEnforcedAssetIds(
+  videos: LessonVideo[] | null | undefined,
+  completionPolicy: string | null | undefined
+): string[] {
+  const lessonVideos = videos ?? [];
+  const flaggedAssetIds = lessonVideos
+    .filter((video) => video.watchEnforced && isEnforceableLessonVideo(video))
+    .map((video) => (video as LessonVideo & { assetId: string }).assetId);
+
+  if (flaggedAssetIds.length > 0) {
+    return Array.from(new Set(flaggedAssetIds));
+  }
+
+  if (completionPolicy !== 'video_watch') {
+    return [];
+  }
+
+  return Array.from(
+    new Set(
+      lessonVideos
+        .filter((video) => isEnforceableLessonVideo(video))
+        .map((video) => (video as LessonVideo & { assetId: string }).assetId)
+    )
+  );
+}

apps/dashboard/src/lib/features/course/components/lesson/video/video.svelte

@@ -13,9 +13,11 @@
 
   interface Props {
     mode?: (typeof MODES)[keyof typeof MODES];
+    courseId: string;
+    lessonId: string;
   }
 
-  let { mode = MODES.view }: Props = $props();
+  let { mode = MODES.view, courseId, lessonId }: Props = $props();
 
   const videos = $derived(lessonApi.lesson?.videos || []);
 
@@ -42,7 +44,7 @@
 
 {#snippet content(video)}
   {#key video.type === 'upload' ? ((video as typeof video & { assetId?: string }).assetId ?? video.link) : video.link}
-    <LessonVideoPlayer {video} />
+    <LessonVideoPlayer {video} {courseId} {lessonId} />
   {/key}
 {/snippet}