From ed0b14e88fe848b57797fe1292c3f4f54652d53f Mon Sep 17 00:00:00 2001
From: Simon Hamp <simon.hamp@me.com>
Date: Thu, 23 Jul 2026 20:09:04 +0100
Subject: [PATCH 1/3] Skip course video intro/outro after first play per
 session

Show the branded intro (first 9s) once per session: the first video a
user plays runs in full, then every later video that session starts at
9s and stops 10s before the end.

A session flag on LessonShow drives whether to skip; a new courseVideo
Alpine component uses the Vimeo Player SDK to detect the first play,
mark the session, and pause at duration-10s for the outro.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 app/Livewire/Customer/Course/LessonShow.php   | 23 ++++-
 package-lock.json                             |  2 +-
 resources/js/alpine/courseVideo.js            | 83 +++++++++++++++++++
 resources/js/app.js                           |  2 +
 .../customer/course/lesson-show.blade.php     |  4 +-
 tests/Feature/CourseContentTest.php           | 65 +++++++++++++++
 6 files changed, 175 insertions(+), 4 deletions(-)
 create mode 100644 resources/js/alpine/courseVideo.js

diff --git a/app/Livewire/Customer/Course/LessonShow.php b/app/Livewire/Customer/Course/LessonShow.php
index 6f563945..0a249f29 100644
--- a/app/Livewire/Customer/Course/LessonShow.php
+++ b/app/Livewire/Customer/Course/LessonShow.php
@@ -9,13 +9,22 @@
 use Illuminate\Database\Eloquent\Collection;
 use Livewire\Attributes\Computed;
 use Livewire\Attributes\Layout;
+use Livewire\Attributes\Renderless;
 use Livewire\Component;
 
 #[Layout('components.layouts.dashboard')]
 class LessonShow extends Component
 {
+    public const INTRO_SECONDS = 9;
+
+    public const OUTRO_SECONDS = 10;
+
+    private const VIDEO_PLAYED_SESSION_KEY = 'course_video_played';
+
     public CourseLesson $lesson;
 
+    public bool $skipIntroOutro = false;
+
     public function mount(CourseLesson $lesson): void
     {
         $this->lesson = $lesson->load('module.course');
@@ -25,6 +34,14 @@ public function mount(CourseLesson $lesson): void
         if (! $this->lesson->is_free && ! $this->hasPurchased && ! $this->isAdmin) {
             abort(403, 'You need Pro access to view this lesson.');
         }
+
+        $this->skipIntroOutro = session()->has(self::VIDEO_PLAYED_SESSION_KEY);
+    }
+
+    #[Renderless]
+    public function markVideoPlayed(): void
+    {
+        session()->put(self::VIDEO_PLAYED_SESSION_KEY, true);
     }
 
     #[Computed]
@@ -117,8 +134,10 @@ public function toggleComplete(): void
 
     public function render()
     {
-        return view('livewire.customer.course.lesson-show')
-            ->title($this->lesson->title);
+        return view('livewire.customer.course.lesson-show', [
+            'introSkipSeconds' => self::INTRO_SECONDS,
+            'outroSkipSeconds' => self::OUTRO_SECONDS,
+        ])->title($this->lesson->title);
     }
 
     private function orderedLessons()
diff --git a/package-lock.json b/package-lock.json
index f9b0a34f..bb6d8b7d 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,5 +1,5 @@
 {
-    "name": "nativephp.com",
+    "name": "bright-duck",
     "lockfileVersion": 3,
     "requires": true,
     "packages": {
diff --git a/resources/js/alpine/courseVideo.js b/resources/js/alpine/courseVideo.js
new file mode 100644
index 00000000..e8758ff1
--- /dev/null
+++ b/resources/js/alpine/courseVideo.js
@@ -0,0 +1,83 @@
+const VIMEO_SDK_URL = 'https://player.vimeo.com/api/player.js'
+
+let sdkPromise = null
+
+function loadVimeoSdk() {
+    if (window.Vimeo?.Player) {
+        return Promise.resolve()
+    }
+
+    if (!sdkPromise) {
+        sdkPromise = new Promise((resolve, reject) => {
+            const script = document.createElement('script')
+            script.src = VIMEO_SDK_URL
+            script.async = true
+            script.onload = resolve
+            script.onerror = () =>
+                reject(new Error('Unable to load the Vimeo player SDK'))
+            document.head.appendChild(script)
+        })
+    }
+
+    return sdkPromise
+}
+
+export default (options = {}) => ({
+    skip: options.skip ?? false,
+    introSeconds: options.introSeconds ?? 9,
+    outroSeconds: options.outroSeconds ?? 10,
+    player: null,
+    marked: false,
+
+    init() {
+        loadVimeoSdk()
+            .then(() => this.setupPlayer())
+            .catch(() => {})
+    },
+
+    setupPlayer() {
+        if (!window.Vimeo?.Player) {
+            return
+        }
+
+        this.player = new window.Vimeo.Player(this.$el)
+
+        this.player.on('play', () => this.rememberFirstPlay())
+
+        if (this.skip) {
+            this.skipOutro()
+        }
+    },
+
+    rememberFirstPlay() {
+        if (this.skip || this.marked) {
+            return
+        }
+
+        this.marked = true
+        this.$wire.markVideoPlayed()
+    },
+
+    skipOutro() {
+        this.player
+            .getDuration()
+            .then((duration) => {
+                const cutoff = duration - this.outroSeconds
+
+                if (cutoff <= this.introSeconds) {
+                    return
+                }
+
+                this.player.on('timeupdate', ({ seconds }) => {
+                    if (seconds >= cutoff) {
+                        this.player.pause().catch(() => {})
+                    }
+                })
+            })
+            .catch(() => {})
+    },
+
+    destroy() {
+        this.player?.unload().catch(() => {})
+    },
+})
diff --git a/resources/js/app.js b/resources/js/app.js
index dfb5cda0..12430840 100644
--- a/resources/js/app.js
+++ b/resources/js/app.js
@@ -8,6 +8,7 @@ import {
 } from '../../vendor/livewire/livewire/dist/livewire.esm.js'
 import codeBlock from './alpine/codeBlock.js'
 import copyMarkdown from './alpine/copyMarkdown.js'
+import courseVideo from './alpine/courseVideo.js'
 import sidebarGroup from './alpine/sidebarGroup.js'
 import docsearch from '@docsearch/js'
 import Atropos from 'atropos'
@@ -63,6 +64,7 @@ window.gsap = gsap
 // Alpine
 Alpine.data('codeBlock', codeBlock)
 Alpine.data('copyMarkdown', copyMarkdown)
+Alpine.data('courseVideo', courseVideo)
 Alpine.data('sidebarGroup', sidebarGroup)
 Alpine.magic('refAll', (el) => {
     return (refName) => {
diff --git a/resources/views/livewire/customer/course/lesson-show.blade.php b/resources/views/livewire/customer/course/lesson-show.blade.php
index 30a47ce2..73a94b68 100644
--- a/resources/views/livewire/customer/course/lesson-show.blade.php
+++ b/resources/views/livewire/customer/course/lesson-show.blade.php
@@ -3,7 +3,9 @@
     <div class="w-full rounded-lg overflow-hidden bg-black aspect-video flex items-center justify-center relative">
         @if ($lesson->vimeo_id)
             <iframe
-                src="https://player.vimeo.com/video/{{ $lesson->vimeo_id }}?badge=0&autopause=0&player_id=0&app_id=58479"
+                wire:ignore
+                x-data="courseVideo({ skip: @js($skipIntroOutro), introSeconds: {{ $introSkipSeconds }}, outroSeconds: {{ $outroSkipSeconds }} })"
+                src="https://player.vimeo.com/video/{{ $lesson->vimeo_id }}?badge=0&autopause=0&player_id=0&app_id=58479{{ $skipIntroOutro ? '#t=' . $introSkipSeconds . 's' : '' }}"
                 class="absolute inset-0 w-full h-full"
                 frameborder="0"
                 allow="autoplay; fullscreen; picture-in-picture; clipboard-write; encrypted-media"
diff --git a/tests/Feature/CourseContentTest.php b/tests/Feature/CourseContentTest.php
index 4cfca403..d8d1d160 100644
--- a/tests/Feature/CourseContentTest.php
+++ b/tests/Feature/CourseContentTest.php
@@ -393,4 +393,69 @@ public function module_has_lessons_relationship(): void
 
         $this->assertTrue($module->lessons->contains($lesson));
     }
+
+    #[Test]
+    public function first_video_in_a_session_plays_the_intro_in_full(): void
+    {
+        $lesson = $this->publishedVideoLesson('111111');
+
+        Livewire::actingAs(User::factory()->create())
+            ->test(LessonShow::class, ['lesson' => $lesson])
+            ->assertSet('skipIntroOutro', false)
+            ->assertDontSee('#t=9s', false);
+    }
+
+    #[Test]
+    public function playing_a_video_records_it_in_the_session(): void
+    {
+        $lesson = $this->publishedVideoLesson('222222');
+
+        Livewire::actingAs(User::factory()->create())
+            ->test(LessonShow::class, ['lesson' => $lesson])
+            ->call('markVideoPlayed');
+
+        $this->assertTrue(session()->has('course_video_played'));
+    }
+
+    #[Test]
+    public function subsequent_videos_skip_the_intro_and_outro(): void
+    {
+        session()->put('course_video_played', true);
+
+        $lesson = $this->publishedVideoLesson('333333');
+
+        Livewire::actingAs(User::factory()->create())
+            ->test(LessonShow::class, ['lesson' => $lesson])
+            ->assertSet('skipIntroOutro', true)
+            ->assertSee('#t=9s', false);
+    }
+
+    #[Test]
+    public function playing_the_first_video_makes_later_videos_in_the_session_skip(): void
+    {
+        $user = User::factory()->create();
+        $firstLesson = $this->publishedVideoLesson('444444');
+        $secondLesson = $this->publishedVideoLesson('555555');
+
+        Livewire::actingAs($user)
+            ->test(LessonShow::class, ['lesson' => $firstLesson])
+            ->assertSet('skipIntroOutro', false)
+            ->call('markVideoPlayed');
+
+        Livewire::actingAs($user)
+            ->test(LessonShow::class, ['lesson' => $secondLesson])
+            ->assertSet('skipIntroOutro', true)
+            ->assertSee('#t=9s', false);
+    }
+
+    private function publishedVideoLesson(string $vimeoId): CourseLesson
+    {
+        $course = Course::factory()->published()->create();
+        $module = CourseModule::factory()->published()->free()->create(['course_id' => $course->id]);
+
+        return CourseLesson::factory()->published()->free()->create([
+            'course_module_id' => $module->id,
+            'vimeo_id' => $vimeoId,
+        ]);
+    }
 }

From f401547148e567a3bb085129abf8788f7cbffab0 Mon Sep 17 00:00:00 2001
From: Simon Hamp <simon.hamp@me.com>
Date: Thu, 23 Jul 2026 23:40:46 +0100
Subject: [PATCH 2/3] Add course outline sidebar and refine course/lesson UI

- Add a right-hand course outline column on the lesson page (matching the
  left nav width) and drop the module titles from the sidebar Masterclass group
- Rename "Draft" content pills to "Coming Soon"
- Hide the "content coming soon" banner once a playable video is shown
- Remove Free/Pro pills and completion dots from the outline and index list
- Show draft lessons to everyone as Coming Soon, clickable only by admins;
  skip inaccessible lessons in prev/next and count only published lessons
  toward progress
- Right-align the Next button; strike through completed lessons in the
  outline and add a hover title to clipped lesson names

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 app/Livewire/Customer/Course/Index.php        |  16 +-
 app/Livewire/Customer/Course/LessonShow.php   |  27 +-
 .../components/layouts/dashboard.blade.php    |  12 -
 .../views/livewire/customer/course.blade.php  |  57 ++--
 .../customer/course/lesson-show.blade.php     | 221 ++++++++-------
 tests/Feature/CourseContentTest.php           | 255 +++++++++++++++++-
 tests/Feature/DashboardLayoutTest.php         |  20 ++
 7 files changed, 438 insertions(+), 170 deletions(-)

diff --git a/app/Livewire/Customer/Course/Index.php b/app/Livewire/Customer/Course/Index.php
index adcc496e..dafbb52d 100644
--- a/app/Livewire/Customer/Course/Index.php
+++ b/app/Livewire/Customer/Course/Index.php
@@ -29,9 +29,7 @@ public function course(): ?Course
             ->with(['modules' => function ($query) {
                 $query->when(! $this->isAdmin, fn ($query) => $query->where('is_published', true))
                     ->orderBy('sort_order')
-                    ->with(['lessons' => function ($query) {
-                        $query->when(! $this->isAdmin, fn ($query) => $query->where('is_published', true))->orderBy('sort_order');
-                    }]);
+                    ->with(['lessons' => fn ($query) => $query->orderBy('sort_order')]);
             }])
             ->first();
     }
@@ -94,6 +92,14 @@ public function completedLessonIds(): array
             ->all();
     }
 
+    #[Computed]
+    public function hasVideoLessons(): bool
+    {
+        return (bool) $this->course?->modules
+            ->flatMap(fn ($module) => $module->lessons)
+            ->contains(fn ($lesson) => filled($lesson->vimeo_id) && ($lesson->is_published || $this->isAdmin));
+    }
+
     #[Computed]
     public function totalLessons(): int
     {
@@ -101,7 +107,9 @@ public function totalLessons(): int
             return 0;
         }
 
-        return $this->course->modules->sum(fn ($module) => $module->lessons->count());
+        return $this->course->modules->sum(
+            fn ($module) => $module->lessons->filter(fn ($lesson) => $lesson->is_published)->count()
+        );
     }
 
     #[Computed]
diff --git a/app/Livewire/Customer/Course/LessonShow.php b/app/Livewire/Customer/Course/LessonShow.php
index 0a249f29..3ba16426 100644
--- a/app/Livewire/Customer/Course/LessonShow.php
+++ b/app/Livewire/Customer/Course/LessonShow.php
@@ -6,7 +6,6 @@
 use App\Models\CourseLesson;
 use App\Models\LessonProgress;
 use App\Models\Product;
-use Illuminate\Database\Eloquent\Collection;
 use Livewire\Attributes\Computed;
 use Livewire\Attributes\Layout;
 use Livewire\Attributes\Renderless;
@@ -56,9 +55,7 @@ public function course(): Course
         return $this->lesson->module->course->load(['modules' => function ($query) {
             $query->when(! $this->isAdmin, fn ($query) => $query->where('is_published', true))
                 ->orderBy('sort_order')
-                ->with(['lessons' => function ($query) {
-                    $query->when(! $this->isAdmin, fn ($query) => $query->where('is_published', true))->orderBy('sort_order');
-                }]);
+                ->with(['lessons' => fn ($query) => $query->orderBy('sort_order')]);
         }]);
     }
 
@@ -70,17 +67,6 @@ public function hasPurchased(): bool
         return $product && $product->isOwnedBy(auth()->user());
     }
 
-    /**
-     * @return Collection<int, CourseLesson>
-     */
-    #[Computed]
-    public function moduleLessons(): Collection
-    {
-        return $this->lesson->module->lessons()
-            ->when(! $this->isAdmin, fn ($query) => $query->where('is_published', true))
-            ->get();
-    }
-
     #[Computed]
     public function completedLessonIds(): array
     {
@@ -142,6 +128,15 @@ public function render()
 
     private function orderedLessons()
     {
-        return $this->course->modules->flatMap(fn ($m) => $m->lessons);
+        return $this->course->modules
+            ->flatMap(fn ($module) => $module->lessons)
+            ->filter(fn (CourseLesson $lesson) => $this->canNavigateTo($lesson))
+            ->values();
+    }
+
+    private function canNavigateTo(CourseLesson $lesson): bool
+    {
+        return ($lesson->is_published || $this->isAdmin)
+            && ($lesson->is_free || $this->hasPurchased || $this->isAdmin);
     }
 }
diff --git a/resources/views/components/layouts/dashboard.blade.php b/resources/views/components/layouts/dashboard.blade.php
index aebf5397..ae2f5548 100644
--- a/resources/views/components/layouts/dashboard.blade.php
+++ b/resources/views/components/layouts/dashboard.blade.php
@@ -186,22 +186,10 @@ class="min-h-screen bg-white font-poppins antialiased dark:bg-zinc-900 dark:text
                 @endfeature
 
                 @feature(App\Features\ShowMasterclass::class)
-                    @php
-                        $sidebarCourse = \App\Models\Course::where('is_published', true)
-                            ->with(['modules' => fn ($q) => $q->where('is_published', true)->orderBy('sort_order')])
-                            ->first();
-                    @endphp
                     <flux:sidebar.group expandable :expanded="false" heading="Masterclass" class="mt-4 grid" x-data="sidebarGroup('masterclass')">
                         <flux:sidebar.item icon="device-phone-mobile" href="{{ route('customer.course.index') }}" :current="request()->routeIs('customer.course.*')">
                             Mobile
                         </flux:sidebar.item>
-                        @if($sidebarCourse)
-                            @foreach($sidebarCourse->modules as $sidebarModule)
-                                <flux:sidebar.item class="!pl-8 !text-xs">
-                                    {{ $sidebarModule->title }}
-                                </flux:sidebar.item>
-                            @endforeach
-                        @endif
                     </flux:sidebar.group>
                 @endfeature
             </flux:sidebar.nav>
diff --git a/resources/views/livewire/customer/course.blade.php b/resources/views/livewire/customer/course.blade.php
index 24bc8498..e9b1ac7c 100644
--- a/resources/views/livewire/customer/course.blade.php
+++ b/resources/views/livewire/customer/course.blade.php
@@ -22,21 +22,23 @@ class="h-2 rounded-full bg-emerald-500 transition-all"
                 </div>
             @endif
 
-            <div class="mb-6 rounded-lg border border-violet-200 bg-violet-50 p-6 dark:border-violet-700/50 dark:bg-violet-900/20">
-                <div class="flex items-start gap-4">
-                    <div class="shrink-0 text-violet-600 dark:text-violet-400">
-                        <x-heroicon-s-sparkles class="size-6" />
-                    </div>
-                    <div>
-                        <h3 class="font-medium text-violet-900 dark:text-violet-100">
-                            You're in! Course content is coming soon.
-                        </h3>
-                        <p class="mt-1 text-sm text-violet-700 dark:text-violet-300">
-                            We're recording the lessons now. You'll have full access to all modules and lessons as soon as they're published.
-                        </p>
+            @unless ($this->hasVideoLessons)
+                <div class="mb-6 rounded-lg border border-violet-200 bg-violet-50 p-6 dark:border-violet-700/50 dark:bg-violet-900/20">
+                    <div class="flex items-start gap-4">
+                        <div class="shrink-0 text-violet-600 dark:text-violet-400">
+                            <x-heroicon-s-sparkles class="size-6" />
+                        </div>
+                        <div>
+                            <h3 class="font-medium text-violet-900 dark:text-violet-100">
+                                You're in! Course content is coming soon.
+                            </h3>
+                            <p class="mt-1 text-sm text-violet-700 dark:text-violet-300">
+                                We're recording the lessons now. You'll have full access to all modules and lessons as soon as they're published.
+                            </p>
+                        </div>
                     </div>
                 </div>
-            </div>
+            @endunless
 
             {{-- Modules --}}
             <div class="space-y-4">
@@ -49,13 +51,8 @@ class="h-2 rounded-full bg-emerald-500 transition-all"
                             <div class="flex-1 min-w-0">
                                 <div class="flex items-center gap-2">
                                     <flux:heading size="sm">{{ $module->title }}</flux:heading>
-                                    @if ($module->is_free)
-                                        <flux:badge variant="pill" color="emerald" size="sm">Free</flux:badge>
-                                    @else
-                                        <flux:badge variant="pill" color="violet" size="sm">Pro</flux:badge>
-                                    @endif
                                     @if (! $module->is_published)
-                                        <flux:badge variant="pill" color="amber" size="sm">Draft</flux:badge>
+                                        <flux:badge variant="pill" color="amber" size="sm">Coming Soon</flux:badge>
                                     @endif
                                 </div>
                                 @if ($module->description)
@@ -68,21 +65,21 @@ class="h-2 rounded-full bg-emerald-500 transition-all"
                             <div class="border-t border-zinc-200 dark:border-white/10">
                                 @foreach ($module->lessons as $lesson)
                                     @php
-                                        $isCompleted = in_array($lesson->id, $this->completedLessonIds);
+                                        $isDraft = ! $lesson->is_published;
+                                        $isClickable = $this->isAdmin || ! $isDraft;
                                     @endphp
                                     <div wire:key="lesson-{{ $lesson->id }}" class="flex items-center gap-3 px-4 py-3 {{ !$loop->last ? 'border-b border-zinc-100 dark:border-white/5' : '' }}">
-                                        <div class="flex size-6 shrink-0 items-center justify-center rounded-full border {{ $isCompleted ? 'bg-emerald-100 border-emerald-300 dark:bg-emerald-900/50 dark:border-emerald-600' : 'border-zinc-300 dark:border-white/10' }}">
-                                            @if ($isCompleted)
-                                                <svg class="size-3 text-emerald-600 dark:text-emerald-400" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/></svg>
-                                            @endif
-                                        </div>
                                         <div class="flex-1 min-w-0">
-                                            <a href="{{ route('customer.course.lesson', $lesson) }}" wire:navigate class="text-sm font-medium hover:text-emerald-600 dark:hover:text-emerald-400 transition-colors">
-                                                {{ $lesson->title }}
-                                            </a>
+                                            @if ($isClickable)
+                                                <a href="{{ route('customer.course.lesson', $lesson) }}" wire:navigate class="text-sm font-medium hover:text-emerald-600 dark:hover:text-emerald-400 transition-colors">
+                                                    {{ $lesson->title }}
+                                                </a>
+                                            @else
+                                                <span class="text-sm font-medium text-zinc-400 dark:text-zinc-500">{{ $lesson->title }}</span>
+                                            @endif
                                         </div>
-                                        @if (! $lesson->is_published)
-                                            <flux:badge variant="pill" color="amber" size="sm">Draft</flux:badge>
+                                        @if ($isDraft)
+                                            <flux:badge variant="pill" color="amber" size="sm">Coming Soon</flux:badge>
                                         @endif
                                         @if ($lesson->duration_in_seconds)
                                             <flux:text class="text-xs shrink-0">{{ gmdate('i:s', $lesson->duration_in_seconds) }}</flux:text>
diff --git a/resources/views/livewire/customer/course/lesson-show.blade.php b/resources/views/livewire/customer/course/lesson-show.blade.php
index 73a94b68..fe0ed130 100644
--- a/resources/views/livewire/customer/course/lesson-show.blade.php
+++ b/resources/views/livewire/customer/course/lesson-show.blade.php
@@ -1,119 +1,136 @@
-<div>
-    {{-- Video area — full width --}}
-    <div class="w-full rounded-lg overflow-hidden bg-black aspect-video flex items-center justify-center relative">
-        @if ($lesson->vimeo_id)
-            <iframe
-                wire:ignore
-                x-data="courseVideo({ skip: @js($skipIntroOutro), introSeconds: {{ $introSkipSeconds }}, outroSeconds: {{ $outroSkipSeconds }} })"
-                src="https://player.vimeo.com/video/{{ $lesson->vimeo_id }}?badge=0&autopause=0&player_id=0&app_id=58479{{ $skipIntroOutro ? '#t=' . $introSkipSeconds . 's' : '' }}"
-                class="absolute inset-0 w-full h-full"
-                frameborder="0"
-                allow="autoplay; fullscreen; picture-in-picture; clipboard-write; encrypted-media"
-                allowfullscreen
-            ></iframe>
-        @else
-            <div class="text-center">
-                <div class="mx-auto flex size-20 items-center justify-center rounded-full bg-white/5 border border-white/10 mb-4">
-                    <svg class="size-8 text-zinc-400 ml-1" fill="currentColor" viewBox="0 0 24 24"><path d="M5.25 5.653c0-.856.917-1.398 1.667-.986l11.54 6.347a1.125 1.125 0 0 1 0 1.972l-11.54 6.347a1.125 1.125 0 0 1-1.667-.986V5.653Z"/></svg>
+<div class="flex flex-col gap-8 lg:flex-row lg:items-start">
+    {{-- Main column --}}
+    <div class="min-w-0 flex-1">
+        {{-- Video area --}}
+        <div class="w-full rounded-lg overflow-hidden bg-black aspect-video flex items-center justify-center relative">
+            @if ($lesson->vimeo_id)
+                <iframe
+                    wire:ignore
+                    x-data="courseVideo({ skip: @js($skipIntroOutro), introSeconds: {{ $introSkipSeconds }}, outroSeconds: {{ $outroSkipSeconds }} })"
+                    src="https://player.vimeo.com/video/{{ $lesson->vimeo_id }}?badge=0&autopause=0&player_id=0&app_id=58479{{ $skipIntroOutro ? '#t=' . $introSkipSeconds . 's' : '' }}"
+                    class="absolute inset-0 w-full h-full"
+                    frameborder="0"
+                    allow="autoplay; fullscreen; picture-in-picture; clipboard-write; encrypted-media"
+                    allowfullscreen
+                ></iframe>
+            @else
+                <div class="text-center">
+                    <div class="mx-auto flex size-20 items-center justify-center rounded-full bg-white/5 border border-white/10 mb-4">
+                        <svg class="size-8 text-zinc-400 ml-1" fill="currentColor" viewBox="0 0 24 24"><path d="M5.25 5.653c0-.856.917-1.398 1.667-.986l11.54 6.347a1.125 1.125 0 0 1 0 1.972l-11.54 6.347a1.125 1.125 0 0 1-1.667-.986V5.653Z"/></svg>
+                    </div>
+                    <p class="text-sm text-zinc-500">Video coming soon</p>
                 </div>
-                <p class="text-sm text-zinc-500">Video coming soon</p>
-            </div>
-        @endif
-    </div>
+            @endif
+        </div>
 
-    {{-- Lesson info --}}
-    <div class="mt-6">
-        <div class="flex items-start justify-between gap-4 flex-wrap">
-            <div>
-                <div class="flex items-center gap-2 mb-2">
-                    @if ($lesson->is_free)
-                        <flux:badge variant="pill" color="emerald" size="sm">Free</flux:badge>
-                    @else
-                        <flux:badge variant="pill" color="violet" size="sm">Pro</flux:badge>
-                    @endif
-                    @if (! $lesson->is_published)
-                        <flux:badge variant="pill" color="amber" size="sm">Draft</flux:badge>
+        {{-- Lesson info --}}
+        <div class="mt-6">
+            <div class="flex items-start justify-between gap-4 flex-wrap">
+                <div>
+                    <div class="flex items-center gap-2 mb-2">
+                        @if ($lesson->is_free)
+                            <flux:badge variant="pill" color="emerald" size="sm">Free</flux:badge>
+                        @else
+                            <flux:badge variant="pill" color="violet" size="sm">Pro</flux:badge>
+                        @endif
+                        @if (! $lesson->is_published)
+                            <flux:badge variant="pill" color="amber" size="sm">Coming Soon</flux:badge>
+                        @endif
+                        <flux:text class="text-xs">{{ $lesson->module->title }}</flux:text>
+                    </div>
+                    <flux:heading size="lg">{{ $lesson->title }}</flux:heading>
+                    @if ($lesson->description)
+                        <flux:text class="mt-2 max-w-2xl">{{ $lesson->description }}</flux:text>
                     @endif
-                    <flux:text class="text-xs">{{ $lesson->module->title }}</flux:text>
                 </div>
-                <flux:heading size="lg">{{ $lesson->title }}</flux:heading>
-                @if ($lesson->description)
-                    <flux:text class="mt-2 max-w-2xl">{{ $lesson->description }}</flux:text>
-                @endif
+
+                <button
+                    wire:click="toggleComplete"
+                    class="shrink-0 flex items-center gap-2 rounded-lg px-4 py-2 text-sm font-semibold transition-all {{ $this->isComplete ? 'bg-emerald-100 text-emerald-700 border border-emerald-200 hover:bg-emerald-200 dark:bg-emerald-900/30 dark:text-emerald-400 dark:border-emerald-700 dark:hover:bg-emerald-900/50' : 'bg-zinc-100 text-zinc-600 border border-zinc-200 hover:bg-zinc-200 dark:bg-white/5 dark:text-zinc-400 dark:border-white/10 dark:hover:bg-white/10' }}"
+                >
+                    @if ($this->isComplete)
+                        <svg class="size-4" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/></svg>
+                        Completed
+                    @else
+                        <svg class="size-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/></svg>
+                        Mark Complete
+                    @endif
+                </button>
             </div>
 
-            <button
-                wire:click="toggleComplete"
-                class="shrink-0 flex items-center gap-2 rounded-lg px-4 py-2 text-sm font-semibold transition-all {{ $this->isComplete ? 'bg-emerald-100 text-emerald-700 border border-emerald-200 hover:bg-emerald-200 dark:bg-emerald-900/30 dark:text-emerald-400 dark:border-emerald-700 dark:hover:bg-emerald-900/50' : 'bg-zinc-100 text-zinc-600 border border-zinc-200 hover:bg-zinc-200 dark:bg-white/5 dark:text-zinc-400 dark:border-white/10 dark:hover:bg-white/10' }}"
-            >
-                @if ($this->isComplete)
-                    <svg class="size-4" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/></svg>
-                    Completed
-                @else
-                    <svg class="size-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/></svg>
-                    Mark Complete
+            {{-- Prev / Next nav --}}
+            <div class="flex items-center gap-3 mt-6 pt-6 border-t border-zinc-200 dark:border-white/10">
+                @if ($this->previousLesson)
+                    <a href="{{ route('customer.course.lesson', $this->previousLesson) }}" wire:navigate class="flex items-center gap-2 rounded-lg bg-zinc-100 border border-zinc-200 px-4 py-2 text-sm text-zinc-600 hover:bg-zinc-200 transition-colors dark:bg-white/5 dark:border-white/10 dark:text-zinc-400 dark:hover:bg-white/10">
+                        <svg class="size-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M15.75 19.5 8.25 12l7.5-7.5"/></svg>
+                        Previous
+                    </a>
                 @endif
-            </button>
-        </div>
-
-        {{-- Prev / Next nav --}}
-        <div class="flex items-center gap-3 mt-6 pt-6 border-t border-zinc-200 dark:border-white/10">
-            @if ($this->previousLesson)
-                <a href="{{ route('customer.course.lesson', $this->previousLesson) }}" wire:navigate class="flex items-center gap-2 rounded-lg bg-zinc-100 border border-zinc-200 px-4 py-2 text-sm text-zinc-600 hover:bg-zinc-200 transition-colors dark:bg-white/5 dark:border-white/10 dark:text-zinc-400 dark:hover:bg-white/10">
-                    <svg class="size-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M15.75 19.5 8.25 12l7.5-7.5"/></svg>
-                    Previous
-                </a>
-            @endif
-            @if ($this->nextLesson)
-                <a href="{{ route('customer.course.lesson', $this->nextLesson) }}" wire:navigate class="flex items-center gap-2 rounded-lg bg-zinc-100 border border-zinc-200 px-4 py-2 text-sm text-zinc-600 hover:bg-zinc-200 transition-colors dark:bg-white/5 dark:border-white/10 dark:text-zinc-400 dark:hover:bg-white/10">
-                    Next
-                    <svg class="size-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="m8.25 4.5 7.5 7.5-7.5 7.5"/></svg>
-                </a>
-            @endif
+                @if ($this->nextLesson)
+                    <a href="{{ route('customer.course.lesson', $this->nextLesson) }}" wire:navigate class="ml-auto flex items-center gap-2 rounded-lg bg-zinc-100 border border-zinc-200 px-4 py-2 text-sm text-zinc-600 hover:bg-zinc-200 transition-colors dark:bg-white/5 dark:border-white/10 dark:text-zinc-400 dark:hover:bg-white/10">
+                        Next
+                        <svg class="size-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="m8.25 4.5 7.5 7.5-7.5 7.5"/></svg>
+                    </a>
+                @endif
+            </div>
         </div>
     </div>
 
-    {{-- Other lessons in this module --}}
-    @if ($this->moduleLessons->count() > 1)
-        <div class="mt-8 rounded-lg border border-zinc-200 bg-white dark:border-white/10 dark:bg-white/5">
+    {{-- Course outline --}}
+    <aside class="w-full shrink-0 lg:sticky lg:top-6 lg:w-64">
+        <div class="rounded-lg border border-zinc-200 bg-white dark:border-white/10 dark:bg-white/5">
             <div class="p-4 border-b border-zinc-200 dark:border-white/10">
-                <flux:heading size="sm">{{ $lesson->module->title }}</flux:heading>
+                <flux:heading size="sm">Course outline</flux:heading>
             </div>
-            @foreach ($this->moduleLessons as $moduleLesson)
-                @php
-                    $isCurrent = $moduleLesson->id === $lesson->id;
-                    $isLessonComplete = in_array($moduleLesson->id, $this->completedLessonIds);
-                    $canAccess = $moduleLesson->is_free || $this->hasPurchased || $this->isAdmin;
-                @endphp
-                @if ($canAccess)
-                    <a
-                        href="{{ route('customer.course.lesson', $moduleLesson) }}"
-                        wire:navigate
-                        wire:key="module-lesson-{{ $moduleLesson->id }}"
-                        class="flex items-center gap-3 px-4 py-3 text-sm transition-colors {{ $isCurrent ? 'bg-emerald-50 text-emerald-700 dark:bg-emerald-900/20 dark:text-emerald-300' : 'text-zinc-600 hover:bg-zinc-50 dark:text-zinc-400 dark:hover:bg-white/5' }} {{ !$loop->last ? 'border-b border-zinc-100 dark:border-white/5' : '' }}"
-                    >
-                        <div class="flex size-6 shrink-0 items-center justify-center rounded-full border {{ $isLessonComplete ? 'bg-emerald-100 border-emerald-300 dark:bg-emerald-900/50 dark:border-emerald-600' : ($isCurrent ? 'border-emerald-400 dark:border-emerald-600' : 'border-zinc-300 dark:border-white/10') }}">
-                            @if ($isLessonComplete)
-                                <svg class="size-3 text-emerald-600 dark:text-emerald-400" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/></svg>
-                            @elseif ($isCurrent)
-                                <div class="size-2 rounded-full bg-emerald-500"></div>
+            <div class="max-h-[calc(100dvh-9rem)] overflow-y-auto py-2">
+                @foreach ($this->course->modules as $outlineModule)
+                    <div wire:key="outline-module-{{ $outlineModule->id }}" class="{{ ! $loop->first ? 'mt-1 border-t border-zinc-100 pt-1 dark:border-white/5' : '' }}">
+                        <div class="flex items-center gap-2 px-4 pt-2 pb-1">
+                            <flux:text class="text-xs font-semibold uppercase tracking-wide text-zinc-500 dark:text-zinc-400">{{ $outlineModule->title }}</flux:text>
+                            @if (! $outlineModule->is_published)
+                                <flux:badge variant="pill" color="amber" size="sm">Coming Soon</flux:badge>
                             @endif
                         </div>
-                        <span class="{{ $isCurrent ? 'font-medium' : '' }}">{{ $moduleLesson->title }}</span>
-                        @if (! $moduleLesson->is_published)
-                            <flux:badge variant="pill" color="amber" size="sm">Draft</flux:badge>
-                        @endif
-                        @if ($moduleLesson->duration_in_seconds)
-                            <span class="ml-auto text-xs text-zinc-400 dark:text-zinc-500">{{ gmdate('i:s', $moduleLesson->duration_in_seconds) }}</span>
-                        @endif
-                    </a>
-                @else
-                    <div wire:key="module-lesson-{{ $moduleLesson->id }}" class="flex items-center gap-3 px-4 py-3 text-sm text-zinc-400 dark:text-zinc-600 {{ !$loop->last ? 'border-b border-zinc-100 dark:border-white/5' : '' }}">
-                        <x-heroicon-m-lock-closed class="size-4 shrink-0" />
-                        <span>{{ $moduleLesson->title }}</span>
+                        @foreach ($outlineModule->lessons as $outlineLesson)
+                            @php
+                                $isCurrent = $outlineLesson->id === $lesson->id;
+                                $isDraft = ! $outlineLesson->is_published;
+                                $isLessonComplete = in_array($outlineLesson->id, $this->completedLessonIds);
+                                $canAccess = $outlineLesson->is_free || $this->hasPurchased || $this->isAdmin;
+                                $isClickable = $this->isAdmin || (! $isDraft && $canAccess);
+                                $isLocked = ! $isClickable && ! $isDraft;
+                            @endphp
+                            @if ($isClickable)
+                                <a
+                                    href="{{ route('customer.course.lesson', $outlineLesson) }}"
+                                    wire:navigate
+                                    wire:key="outline-lesson-{{ $outlineLesson->id }}"
+                                    @if ($isCurrent) aria-current="page" @endif
+                                    class="flex items-center gap-3 px-4 py-2 text-sm transition-colors {{ $isCurrent ? 'bg-emerald-50 text-emerald-700 dark:bg-emerald-900/20 dark:text-emerald-300' : 'text-zinc-600 hover:bg-zinc-50 dark:text-zinc-400 dark:hover:bg-white/5' }}"
+                                >
+                                    <span class="min-w-0 flex-1 truncate {{ $isCurrent ? 'font-medium' : '' }} {{ $isLessonComplete ? 'line-through' : '' }}" title="{{ $outlineLesson->title }}">{{ $outlineLesson->title }}</span>
+                                    @if ($isDraft)
+                                        <flux:badge variant="pill" color="amber" size="sm">Coming Soon</flux:badge>
+                                    @endif
+                                    @if ($outlineLesson->duration_in_seconds)
+                                        <span class="shrink-0 text-xs text-zinc-400 dark:text-zinc-500">{{ gmdate('i:s', $outlineLesson->duration_in_seconds) }}</span>
+                                    @endif
+                                </a>
+                            @else
+                                <div wire:key="outline-lesson-{{ $outlineLesson->id }}" class="flex items-center gap-3 px-4 py-2 text-sm text-zinc-400 dark:text-zinc-600">
+                                    @if ($isLocked)
+                                        <x-heroicon-m-lock-closed class="size-4 shrink-0" />
+                                    @endif
+                                    <span class="min-w-0 flex-1 truncate {{ $isLessonComplete ? 'line-through' : '' }}" title="{{ $outlineLesson->title }}">{{ $outlineLesson->title }}</span>
+                                    @if ($isDraft)
+                                        <flux:badge variant="pill" color="amber" size="sm">Coming Soon</flux:badge>
+                                    @endif
+                                </div>
+                            @endif
+                        @endforeach
                     </div>
-                @endif
-            @endforeach
+                @endforeach
+            </div>
         </div>
-    @endif
+    </aside>
 </div>
diff --git a/tests/Feature/CourseContentTest.php b/tests/Feature/CourseContentTest.php
index d8d1d160..fa8bfb62 100644
--- a/tests/Feature/CourseContentTest.php
+++ b/tests/Feature/CourseContentTest.php
@@ -301,11 +301,11 @@ public function admin_sees_unpublished_course_content_in_dashboard(): void
             ->test(Index::class)
             ->assertSee('Hidden Module')
             ->assertSee('Hidden Lesson')
-            ->assertSee('Draft');
+            ->assertSee('Coming Soon');
     }
 
     #[Test]
-    public function non_admin_owner_does_not_see_unpublished_content_in_dashboard(): void
+    public function non_admin_owner_sees_draft_lessons_as_coming_soon_but_not_unpublished_modules(): void
     {
         $user = User::factory()->create();
         $product = Product::where('slug', 'nativephp-masterclass')->first();
@@ -319,9 +319,9 @@ public function non_admin_owner_does_not_see_unpublished_content_in_dashboard():
             'course_id' => $course->id,
             'title' => 'Live Module',
         ]);
-        CourseLesson::factory()->create([
+        $draftLesson = CourseLesson::factory()->create([
             'course_module_id' => $liveModule->id,
-            'title' => 'Hidden Lesson',
+            'title' => 'Draft Lesson',
         ]);
         CourseModule::factory()->create([
             'course_id' => $course->id,
@@ -331,7 +331,9 @@ public function non_admin_owner_does_not_see_unpublished_content_in_dashboard():
         Livewire::actingAs($user)
             ->test(Index::class)
             ->assertSee('Live Module')
-            ->assertDontSee('Hidden Lesson')
+            ->assertSee('Draft Lesson')
+            ->assertSee('Coming Soon')
+            ->assertDontSee(route('customer.course.lesson', $draftLesson), false)
             ->assertDontSee('Hidden Module');
     }
 
@@ -352,7 +354,7 @@ public function admin_can_view_unpublished_pro_lesson_without_purchase(): void
         Livewire::actingAs($admin)
             ->test(LessonShow::class, ['lesson' => $lesson])
             ->assertSee('Hidden Pro Lesson')
-            ->assertSee('Draft');
+            ->assertSee('Coming Soon');
     }
 
     #[Test]
@@ -448,6 +450,247 @@ public function playing_the_first_video_makes_later_videos_in_the_session_skip()
             ->assertSee('#t=9s', false);
     }
 
+    #[Test]
+    public function lesson_page_shows_the_full_course_outline(): void
+    {
+        $user = User::factory()->create();
+        $product = Product::where('slug', 'nativephp-masterclass')->first();
+        ProductLicense::factory()->create([
+            'user_id' => $user->id,
+            'product_id' => $product->id,
+        ]);
+
+        $course = Course::factory()->published()->create();
+        $currentModule = CourseModule::factory()->published()->create([
+            'course_id' => $course->id,
+            'title' => 'Getting Started',
+            'sort_order' => 1,
+        ]);
+        $otherModule = CourseModule::factory()->published()->create([
+            'course_id' => $course->id,
+            'title' => 'Going Deeper',
+            'sort_order' => 2,
+        ]);
+        $currentLesson = CourseLesson::factory()->published()->create([
+            'course_module_id' => $currentModule->id,
+            'title' => 'Intro Lesson',
+        ]);
+        CourseLesson::factory()->published()->create([
+            'course_module_id' => $otherModule->id,
+            'title' => 'Advanced Lesson',
+        ]);
+
+        Livewire::actingAs($user)
+            ->test(LessonShow::class, ['lesson' => $currentLesson])
+            ->assertSee('Course outline')
+            ->assertSee('Getting Started')
+            ->assertSee('Going Deeper')
+            ->assertSee('Advanced Lesson');
+    }
+
+    #[Test]
+    public function coming_soon_banner_shows_when_no_lessons_have_videos(): void
+    {
+        $user = User::factory()->create();
+        $product = Product::where('slug', 'nativephp-masterclass')->first();
+        ProductLicense::factory()->create([
+            'user_id' => $user->id,
+            'product_id' => $product->id,
+        ]);
+
+        $course = Course::factory()->published()->create();
+        $module = CourseModule::factory()->published()->create(['course_id' => $course->id]);
+        CourseLesson::factory()->published()->create([
+            'course_module_id' => $module->id,
+            'vimeo_id' => null,
+        ]);
+
+        Livewire::actingAs($user)
+            ->test(Index::class)
+            ->assertSee('recording the lessons now');
+    }
+
+    #[Test]
+    public function coming_soon_banner_is_hidden_when_a_lesson_has_a_video(): void
+    {
+        $user = User::factory()->create();
+        $product = Product::where('slug', 'nativephp-masterclass')->first();
+        ProductLicense::factory()->create([
+            'user_id' => $user->id,
+            'product_id' => $product->id,
+        ]);
+
+        $course = Course::factory()->published()->create();
+        $module = CourseModule::factory()->published()->create(['course_id' => $course->id]);
+        CourseLesson::factory()->published()->create([
+            'course_module_id' => $module->id,
+            'vimeo_id' => '123456',
+        ]);
+
+        Livewire::actingAs($user)
+            ->test(Index::class)
+            ->assertDontSee('recording the lessons now');
+    }
+
+    #[Test]
+    public function course_module_list_does_not_show_free_or_pro_pills(): void
+    {
+        $user = User::factory()->create();
+        $product = Product::where('slug', 'nativephp-masterclass')->first();
+        ProductLicense::factory()->create([
+            'user_id' => $user->id,
+            'product_id' => $product->id,
+        ]);
+
+        $course = Course::factory()->published()->create();
+        CourseModule::factory()->published()->free()->create([
+            'course_id' => $course->id,
+            'title' => 'Starter Module',
+            'description' => null,
+        ]);
+        CourseModule::factory()->published()->create([
+            'course_id' => $course->id,
+            'title' => 'Advanced Module',
+            'description' => null,
+        ]);
+
+        Livewire::actingAs($user)
+            ->test(Index::class)
+            ->assertSee('Starter Module')
+            ->assertSee('Advanced Module')
+            ->assertDontSee('Free')
+            ->assertDontSee('Pro');
+    }
+
+    #[Test]
+    public function draft_lessons_show_in_the_outline_as_coming_soon_but_are_not_clickable_for_non_admins(): void
+    {
+        $user = User::factory()->create();
+        $product = Product::where('slug', 'nativephp-masterclass')->first();
+        ProductLicense::factory()->create([
+            'user_id' => $user->id,
+            'product_id' => $product->id,
+        ]);
+
+        $course = Course::factory()->published()->create();
+        $module = CourseModule::factory()->published()->create(['course_id' => $course->id]);
+        $currentLesson = CourseLesson::factory()->published()->create([
+            'course_module_id' => $module->id,
+            'title' => 'Current Lesson',
+        ]);
+        $draftLesson = CourseLesson::factory()->create([
+            'course_module_id' => $module->id,
+            'title' => 'Draft Lesson',
+        ]);
+
+        Livewire::actingAs($user)
+            ->test(LessonShow::class, ['lesson' => $currentLesson])
+            ->assertSee('Draft Lesson')
+            ->assertSee('Coming Soon')
+            ->assertDontSee(route('customer.course.lesson', $draftLesson), false);
+    }
+
+    #[Test]
+    public function draft_lessons_are_clickable_in_the_outline_for_admins(): void
+    {
+        config(['filament.users' => ['admin@test.com']]);
+        $admin = User::factory()->create(['email' => 'admin@test.com']);
+
+        $course = Course::factory()->published()->create();
+        $module = CourseModule::factory()->published()->create(['course_id' => $course->id]);
+        $currentLesson = CourseLesson::factory()->published()->create([
+            'course_module_id' => $module->id,
+            'title' => 'Current Lesson',
+        ]);
+        $draftLesson = CourseLesson::factory()->create([
+            'course_module_id' => $module->id,
+            'title' => 'Draft Lesson',
+        ]);
+
+        Livewire::actingAs($admin)
+            ->test(LessonShow::class, ['lesson' => $currentLesson])
+            ->assertSee('Draft Lesson')
+            ->assertSee('Coming Soon')
+            ->assertSee(route('customer.course.lesson', $draftLesson), false);
+    }
+
+    #[Test]
+    public function draft_video_lessons_do_not_hide_the_coming_soon_banner_for_non_admins(): void
+    {
+        $user = User::factory()->create();
+        $product = Product::where('slug', 'nativephp-masterclass')->first();
+        ProductLicense::factory()->create([
+            'user_id' => $user->id,
+            'product_id' => $product->id,
+        ]);
+
+        $course = Course::factory()->published()->create();
+        $module = CourseModule::factory()->published()->create(['course_id' => $course->id]);
+        CourseLesson::factory()->create([
+            'course_module_id' => $module->id,
+            'vimeo_id' => '123456',
+        ]);
+
+        Livewire::actingAs($user)
+            ->test(Index::class)
+            ->assertSee('recording the lessons now');
+    }
+
+    #[Test]
+    public function completed_lessons_are_struck_through_in_the_outline(): void
+    {
+        $user = User::factory()->create();
+        $product = Product::where('slug', 'nativephp-masterclass')->first();
+        ProductLicense::factory()->create([
+            'user_id' => $user->id,
+            'product_id' => $product->id,
+        ]);
+
+        $course = Course::factory()->published()->create();
+        $module = CourseModule::factory()->published()->create(['course_id' => $course->id]);
+        $currentLesson = CourseLesson::factory()->published()->create([
+            'course_module_id' => $module->id,
+            'title' => 'Current Lesson',
+        ]);
+        $doneLesson = CourseLesson::factory()->published()->create([
+            'course_module_id' => $module->id,
+            'title' => 'Done Lesson',
+        ]);
+        LessonProgress::create([
+            'user_id' => $user->id,
+            'course_lesson_id' => $doneLesson->id,
+            'completed_at' => now(),
+        ]);
+
+        Livewire::actingAs($user)
+            ->test(LessonShow::class, ['lesson' => $currentLesson])
+            ->assertSee('Done Lesson')
+            ->assertSeeHtml('line-through');
+    }
+
+    #[Test]
+    public function outline_lesson_titles_have_a_hover_title_attribute_and_are_not_struck_through_when_incomplete(): void
+    {
+        $user = User::factory()->create();
+        $product = Product::where('slug', 'nativephp-masterclass')->first();
+        ProductLicense::factory()->create([
+            'user_id' => $user->id,
+            'product_id' => $product->id,
+        ]);
+
+        $course = Course::factory()->published()->create();
+        $module = CourseModule::factory()->published()->create(['course_id' => $course->id]);
+        $lesson = CourseLesson::factory()->published()->create([
+            'course_module_id' => $module->id,
+            'title' => 'Hover For Full Title',
+        ]);
+
+        Livewire::actingAs($user)
+            ->test(LessonShow::class, ['lesson' => $lesson])
+            ->assertSeeHtml('title="Hover For Full Title"')
+            ->assertDontSeeHtml('line-through');
+    }
+
     private function publishedVideoLesson(string $vimeoId): CourseLesson
     {
         $course = Course::factory()->published()->create();
diff --git a/tests/Feature/DashboardLayoutTest.php b/tests/Feature/DashboardLayoutTest.php
index 2fc507a1..72cc1746 100644
--- a/tests/Feature/DashboardLayoutTest.php
+++ b/tests/Feature/DashboardLayoutTest.php
@@ -6,6 +6,8 @@
 use App\Features\ShowMasterclass;
 use App\Features\ShowPlugins;
 use App\Livewire\Customer\Dashboard;
+use App\Models\Course;
+use App\Models\CourseModule;
 use App\Models\License;
 use App\Models\Product;
 use App\Models\ProductLicense;
@@ -266,4 +268,22 @@ public function test_dashboard_hides_masterclass_countdown_for_course_owner(): v
             ->assertOk()
             ->assertDontSee('Lock in early bird pricing');
     }
+
+    public function test_sidebar_masterclass_group_does_not_list_module_titles(): void
+    {
+        Feature::define(ShowMasterclass::class, true);
+
+        $user = User::factory()->create();
+        $course = Course::factory()->published()->create();
+        CourseModule::factory()->published()->create([
+            'course_id' => $course->id,
+            'title' => 'Sidebar Should Not List This Module',
+        ]);
+
+        $response = $this->withoutVite()->actingAs($user)->get('/dashboard');
+
+        $response->assertOk();
+        $response->assertSee('Masterclass');
+        $response->assertDontSee('Sidebar Should Not List This Module');
+    }
 }

From 456b6badb9f691bab2e04a45c24dd62e8615edde Mon Sep 17 00:00:00 2001
From: Simon Hamp <simon.hamp@me.com>
Date: Fri, 24 Jul 2026 13:39:19 +0100
Subject: [PATCH 3/3] Fix course video skip and add markdown lesson notes

- Fix the intro/outro skip: the Vimeo player was held on a reactive Alpine
  property, whose proxy broke the SDK's WeakMap lookups ("Unknown player").
  Keep the player in a closure and let the SDK build the iframe; the intro
  skip moves to setCurrentTime
- Toggle play/pause with the space bar anywhere on the lesson page
- Add markdown lesson notes: a MarkdownEditor field in the admin (like blog
  articles) plus a notes column, rendered beneath the Prev/Next row via
  CommonMark in a fixed-width left-aligned column
- Hide unpublished modules from non-admins and block access to their
  lessons; label unpublished modules "Draft"
- Remove the Free/Pro labels from the lesson page

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 .../Resources/CourseLessonResource.php        |  6 ++
 .../LessonsRelationManager.php                |  5 ++
 app/Livewire/Customer/Course/LessonShow.php   |  2 +-
 database/factories/CourseLessonFactory.php    |  1 +
 ...4627_add_notes_to_course_lessons_table.php | 28 ++++++
 resources/js/alpine/courseVideo.js            | 90 +++++++++++++------
 .../views/livewire/customer/course.blade.php  |  2 +-
 .../customer/course/lesson-show.blade.php     | 29 +++---
 tests/Feature/CourseContentTest.php           | 70 +++++++++++++--
 9 files changed, 187 insertions(+), 46 deletions(-)
 create mode 100644 database/migrations/2026_07_24_114627_add_notes_to_course_lessons_table.php

diff --git a/app/Filament/Resources/CourseLessonResource.php b/app/Filament/Resources/CourseLessonResource.php
index 00347fd9..23b49d9e 100644
--- a/app/Filament/Resources/CourseLessonResource.php
+++ b/app/Filament/Resources/CourseLessonResource.php
@@ -49,6 +49,12 @@ public static function form(Schema $schema): Schema
                 Forms\Components\Textarea::make('description')
                     ->rows(3),
 
+                Forms\Components\MarkdownEditor::make('notes')
+                    ->label('Lesson notes')
+                    ->helperText('Markdown — commands, code samples, links, etc. Shown beneath the video.')
+                    ->inlineLabel(false)
+                    ->columnSpanFull(),
+
                 Forms\Components\TextInput::make('vimeo_id')
                     ->label('Vimeo ID')
                     ->maxLength(255),
diff --git a/app/Filament/Resources/CourseModuleResource/RelationManagers/LessonsRelationManager.php b/app/Filament/Resources/CourseModuleResource/RelationManagers/LessonsRelationManager.php
index 743d17d6..128de497 100644
--- a/app/Filament/Resources/CourseModuleResource/RelationManagers/LessonsRelationManager.php
+++ b/app/Filament/Resources/CourseModuleResource/RelationManagers/LessonsRelationManager.php
@@ -34,6 +34,11 @@ public function form(Schema $schema): Schema
                 Forms\Components\Textarea::make('description')
                     ->rows(3),
 
+                Forms\Components\MarkdownEditor::make('notes')
+                    ->label('Lesson notes')
+                    ->helperText('Markdown — commands, code samples, links, etc. Shown beneath the video.')
+                    ->columnSpanFull(),
+
                 Forms\Components\TextInput::make('vimeo_id')
                     ->label('Vimeo ID')
                     ->maxLength(255),
diff --git a/app/Livewire/Customer/Course/LessonShow.php b/app/Livewire/Customer/Course/LessonShow.php
index 3ba16426..6ce0e012 100644
--- a/app/Livewire/Customer/Course/LessonShow.php
+++ b/app/Livewire/Customer/Course/LessonShow.php
@@ -28,7 +28,7 @@ public function mount(CourseLesson $lesson): void
     {
         $this->lesson = $lesson->load('module.course');
 
-        abort_unless($this->lesson->is_published || $this->isAdmin, 404);
+        abort_unless($this->isAdmin || ($this->lesson->is_published && $this->lesson->module->is_published), 404);
 
         if (! $this->lesson->is_free && ! $this->hasPurchased && ! $this->isAdmin) {
             abort(403, 'You need Pro access to view this lesson.');
diff --git a/database/factories/CourseLessonFactory.php b/database/factories/CourseLessonFactory.php
index 1470212d..3d3376e9 100644
--- a/database/factories/CourseLessonFactory.php
+++ b/database/factories/CourseLessonFactory.php
@@ -23,6 +23,7 @@ public function definition(): array
             'title' => $title,
             'slug' => Str::slug($title),
             'description' => fake()->paragraph(),
+            'notes' => null,
             'vimeo_id' => null,
             'duration_in_seconds' => fake()->numberBetween(60, 1800),
             'is_free' => false,
diff --git a/database/migrations/2026_07_24_114627_add_notes_to_course_lessons_table.php b/database/migrations/2026_07_24_114627_add_notes_to_course_lessons_table.php
new file mode 100644
index 00000000..c99d3419
--- /dev/null
+++ b/database/migrations/2026_07_24_114627_add_notes_to_course_lessons_table.php
@@ -0,0 +1,28 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+return new class extends Migration
+{
+    /**
+     * Run the migrations.
+     */
+    public function up(): void
+    {
+        Schema::table('course_lessons', function (Blueprint $table) {
+            $table->text('notes')->nullable()->after('description');
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     */
+    public function down(): void
+    {
+        Schema::table('course_lessons', function (Blueprint $table) {
+            $table->dropColumn('notes');
+        });
+    }
+};
diff --git a/resources/js/alpine/courseVideo.js b/resources/js/alpine/courseVideo.js
index e8758ff1..3e3df442 100644
--- a/resources/js/alpine/courseVideo.js
+++ b/resources/js/alpine/courseVideo.js
@@ -23,11 +23,12 @@ function loadVimeoSdk() {
 }
 
 export default (options = {}) => ({
+    videoId: options.videoId,
     skip: options.skip ?? false,
     introSeconds: options.introSeconds ?? 9,
     outroSeconds: options.outroSeconds ?? 10,
-    player: null,
     marked: false,
+    cleanup: null,
 
     init() {
         loadVimeoSdk()
@@ -36,16 +37,74 @@ export default (options = {}) => ({
     },
 
     setupPlayer() {
-        if (!window.Vimeo?.Player) {
+        if (!window.Vimeo?.Player || !this.videoId) {
             return
         }
 
-        this.player = new window.Vimeo.Player(this.$el)
+        // Keep the player in a plain closure variable, never a reactive Alpine
+        // property: the SDK keys its ready-promise and event registry off the raw
+        // instance via WeakMaps, and an Alpine proxy breaks every lookup
+        // ("Unknown player. Probably unloaded.").
+        const player = new window.Vimeo.Player(this.$el, {
+            id: Number(this.videoId),
+            autopause: false,
+            badge: false,
+        })
 
-        this.player.on('play', () => this.rememberFirstPlay())
+        player.on('play', () => this.rememberFirstPlay())
 
         if (this.skip) {
-            this.skipOutro()
+            player.on('loaded', () =>
+                player.setCurrentTime(this.introSeconds).catch(() => {}),
+            )
+            player
+                .getDuration()
+                .then((duration) => {
+                    const cutoff = duration - this.outroSeconds
+
+                    if (cutoff <= this.introSeconds) {
+                        return
+                    }
+
+                    player.on('timeupdate', ({ seconds }) => {
+                        if (seconds >= cutoff) {
+                            player.pause().catch(() => {})
+                        }
+                    })
+                })
+                .catch(() => {})
+        }
+
+        // Toggle play/pause with the space bar anywhere on the page. When the
+        // Vimeo iframe itself is focused the keydown fires inside it (and Vimeo
+        // handles space natively), so this never double-fires.
+        const onKeydown = (e) => {
+            if (e.code !== 'Space' || e.repeat) {
+                return
+            }
+
+            const tag = e.target?.tagName
+            if (
+                e.target?.isContentEditable ||
+                tag === 'INPUT' ||
+                tag === 'TEXTAREA' ||
+                tag === 'SELECT' ||
+                tag === 'BUTTON'
+            ) {
+                return
+            }
+
+            e.preventDefault()
+            player
+                .getPaused()
+                .then((paused) => (paused ? player.play() : player.pause()))
+                .catch(() => {})
+        }
+        window.addEventListener('keydown', onKeydown)
+
+        this.cleanup = () => {
+            window.removeEventListener('keydown', onKeydown)
+            player.destroy().catch(() => {})
         }
     },
 
@@ -58,26 +117,7 @@ export default (options = {}) => ({
         this.$wire.markVideoPlayed()
     },
 
-    skipOutro() {
-        this.player
-            .getDuration()
-            .then((duration) => {
-                const cutoff = duration - this.outroSeconds
-
-                if (cutoff <= this.introSeconds) {
-                    return
-                }
-
-                this.player.on('timeupdate', ({ seconds }) => {
-                    if (seconds >= cutoff) {
-                        this.player.pause().catch(() => {})
-                    }
-                })
-            })
-            .catch(() => {})
-    },
-
     destroy() {
-        this.player?.unload().catch(() => {})
+        this.cleanup?.()
     },
 })
diff --git a/resources/views/livewire/customer/course.blade.php b/resources/views/livewire/customer/course.blade.php
index e9b1ac7c..6ad2a3fb 100644
--- a/resources/views/livewire/customer/course.blade.php
+++ b/resources/views/livewire/customer/course.blade.php
@@ -52,7 +52,7 @@ class="h-2 rounded-full bg-emerald-500 transition-all"
                                 <div class="flex items-center gap-2">
                                     <flux:heading size="sm">{{ $module->title }}</flux:heading>
                                     @if (! $module->is_published)
-                                        <flux:badge variant="pill" color="amber" size="sm">Coming Soon</flux:badge>
+                                        <flux:badge variant="pill" color="amber" size="sm">Draft</flux:badge>
                                     @endif
                                 </div>
                                 @if ($module->description)
diff --git a/resources/views/livewire/customer/course/lesson-show.blade.php b/resources/views/livewire/customer/course/lesson-show.blade.php
index fe0ed130..f54d04f1 100644
--- a/resources/views/livewire/customer/course/lesson-show.blade.php
+++ b/resources/views/livewire/customer/course/lesson-show.blade.php
@@ -4,15 +4,11 @@
         {{-- Video area --}}
         <div class="w-full rounded-lg overflow-hidden bg-black aspect-video flex items-center justify-center relative">
             @if ($lesson->vimeo_id)
-                <iframe
+                <div
                     wire:ignore
-                    x-data="courseVideo({ skip: @js($skipIntroOutro), introSeconds: {{ $introSkipSeconds }}, outroSeconds: {{ $outroSkipSeconds }} })"
-                    src="https://player.vimeo.com/video/{{ $lesson->vimeo_id }}?badge=0&autopause=0&player_id=0&app_id=58479{{ $skipIntroOutro ? '#t=' . $introSkipSeconds . 's' : '' }}"
-                    class="absolute inset-0 w-full h-full"
-                    frameborder="0"
-                    allow="autoplay; fullscreen; picture-in-picture; clipboard-write; encrypted-media"
-                    allowfullscreen
-                ></iframe>
+                    x-data="courseVideo({ videoId: '{{ $lesson->vimeo_id }}', skip: @js($skipIntroOutro), introSeconds: {{ $introSkipSeconds }}, outroSeconds: {{ $outroSkipSeconds }} })"
+                    class="absolute inset-0 [&_iframe]:absolute [&_iframe]:inset-0 [&_iframe]:h-full [&_iframe]:w-full"
+                ></div>
             @else
                 <div class="text-center">
                     <div class="mx-auto flex size-20 items-center justify-center rounded-full bg-white/5 border border-white/10 mb-4">
@@ -28,15 +24,13 @@ class="absolute inset-0 w-full h-full"
             <div class="flex items-start justify-between gap-4 flex-wrap">
                 <div>
                     <div class="flex items-center gap-2 mb-2">
-                        @if ($lesson->is_free)
-                            <flux:badge variant="pill" color="emerald" size="sm">Free</flux:badge>
-                        @else
-                            <flux:badge variant="pill" color="violet" size="sm">Pro</flux:badge>
-                        @endif
                         @if (! $lesson->is_published)
                             <flux:badge variant="pill" color="amber" size="sm">Coming Soon</flux:badge>
                         @endif
                         <flux:text class="text-xs">{{ $lesson->module->title }}</flux:text>
+                        @if (! $lesson->module->is_published)
+                            <flux:badge variant="pill" color="amber" size="sm">Draft</flux:badge>
+                        @endif
                     </div>
                     <flux:heading size="lg">{{ $lesson->title }}</flux:heading>
                     @if ($lesson->description)
@@ -73,6 +67,13 @@ class="shrink-0 flex items-center gap-2 rounded-lg px-4 py-2 text-sm font-semibo
                     </a>
                 @endif
             </div>
+
+            {{-- Lesson notes --}}
+            @if ($lesson->notes)
+                <div class="prose prose-sm mt-8 max-w-2xl dark:prose-invert">
+                    {!! App\Support\CommonMark\CommonMark::convertToHtml($lesson->notes) !!}
+                </div>
+            @endif
         </div>
     </div>
 
@@ -88,7 +89,7 @@ class="shrink-0 flex items-center gap-2 rounded-lg px-4 py-2 text-sm font-semibo
                         <div class="flex items-center gap-2 px-4 pt-2 pb-1">
                             <flux:text class="text-xs font-semibold uppercase tracking-wide text-zinc-500 dark:text-zinc-400">{{ $outlineModule->title }}</flux:text>
                             @if (! $outlineModule->is_published)
-                                <flux:badge variant="pill" color="amber" size="sm">Coming Soon</flux:badge>
+                                <flux:badge variant="pill" color="amber" size="sm">Draft</flux:badge>
                             @endif
                         </div>
                         @foreach ($outlineModule->lessons as $outlineLesson)
diff --git a/tests/Feature/CourseContentTest.php b/tests/Feature/CourseContentTest.php
index fa8bfb62..4c3b7365 100644
--- a/tests/Feature/CourseContentTest.php
+++ b/tests/Feature/CourseContentTest.php
@@ -301,7 +301,8 @@ public function admin_sees_unpublished_course_content_in_dashboard(): void
             ->test(Index::class)
             ->assertSee('Hidden Module')
             ->assertSee('Hidden Lesson')
-            ->assertSee('Coming Soon');
+            ->assertSee('Coming Soon')
+            ->assertSee('Draft');
     }
 
     #[Test]
@@ -354,7 +355,8 @@ public function admin_can_view_unpublished_pro_lesson_without_purchase(): void
         Livewire::actingAs($admin)
             ->test(LessonShow::class, ['lesson' => $lesson])
             ->assertSee('Hidden Pro Lesson')
-            ->assertSee('Coming Soon');
+            ->assertSee('Coming Soon')
+            ->assertSee('Draft');
     }
 
     #[Test]
@@ -404,7 +406,7 @@ public function first_video_in_a_session_plays_the_intro_in_full(): void
         Livewire::actingAs(User::factory()->create())
             ->test(LessonShow::class, ['lesson' => $lesson])
             ->assertSet('skipIntroOutro', false)
-            ->assertDontSee('#t=9s', false);
+            ->assertSee('skip: false', false);
     }
 
     #[Test]
@@ -429,7 +431,7 @@ public function subsequent_videos_skip_the_intro_and_outro(): void
         Livewire::actingAs(User::factory()->create())
             ->test(LessonShow::class, ['lesson' => $lesson])
             ->assertSet('skipIntroOutro', true)
-            ->assertSee('#t=9s', false);
+            ->assertSee('skip: true', false);
     }
 
     #[Test]
@@ -447,7 +449,7 @@ public function playing_the_first_video_makes_later_videos_in_the_session_skip()
         Livewire::actingAs($user)
             ->test(LessonShow::class, ['lesson' => $secondLesson])
             ->assertSet('skipIntroOutro', true)
-            ->assertSee('#t=9s', false);
+            ->assertSee('skip: true', false);
     }
 
     #[Test]
@@ -691,6 +693,64 @@ public function outline_lesson_titles_have_a_hover_title_attribute_and_are_not_s
             ->assertDontSeeHtml('line-through');
     }
 
+    #[Test]
+    public function lessons_in_an_unpublished_module_are_not_accessible_to_non_admins(): void
+    {
+        $user = User::factory()->create();
+        $product = Product::where('slug', 'nativephp-masterclass')->first();
+        ProductLicense::factory()->create([
+            'user_id' => $user->id,
+            'product_id' => $product->id,
+        ]);
+
+        $course = Course::factory()->published()->create();
+        $module = CourseModule::factory()->create(['course_id' => $course->id]);
+        $lesson = CourseLesson::factory()->published()->free()->create([
+            'course_module_id' => $module->id,
+        ]);
+
+        Livewire::actingAs($user)
+            ->test(LessonShow::class, ['lesson' => $lesson])
+            ->assertNotFound();
+    }
+
+    #[Test]
+    public function admins_can_access_lessons_in_unpublished_modules(): void
+    {
+        config(['filament.users' => ['admin@test.com']]);
+        $admin = User::factory()->create(['email' => 'admin@test.com']);
+
+        $course = Course::factory()->published()->create();
+        $module = CourseModule::factory()->create(['course_id' => $course->id]);
+        $lesson = CourseLesson::factory()->published()->create([
+            'course_module_id' => $module->id,
+            'title' => 'Locked Away Lesson',
+        ]);
+
+        Livewire::actingAs($admin)
+            ->test(LessonShow::class, ['lesson' => $lesson])
+            ->assertOk()
+            ->assertSee('Locked Away Lesson');
+    }
+
+    #[Test]
+    public function lesson_notes_are_rendered_as_markdown(): void
+    {
+        $user = User::factory()->create();
+
+        $course = Course::factory()->published()->create();
+        $module = CourseModule::factory()->published()->free()->create(['course_id' => $course->id]);
+        $lesson = CourseLesson::factory()->published()->free()->create([
+            'course_module_id' => $module->id,
+            'notes' => 'Run `php artisan migrate` then read [the docs](https://nativephp.com).',
+        ]);
+
+        Livewire::actingAs($user)
+            ->test(LessonShow::class, ['lesson' => $lesson])
+            ->assertSee('<code>php artisan migrate</code>', false)
+            ->assertSee('href="https://nativephp.com"', false);
+    }
+
     private function publishedVideoLesson(string $vimeoId): CourseLesson
     {
         $course = Course::factory()->published()->create();