From d4b1bf0813ab66d1b07b42853a80166474de88fa Mon Sep 17 00:00:00 2001
From: Yared Yemane <yaredyemane1@gmail.com>
Date: Wed, 8 Apr 2026 02:18:15 -0700
Subject: [PATCH] show intro video preview in review step

Render intro video preview in Step 4 Review & publish so users can verify Vimeo/file playback before publishing instead of seeing only the URL text.

Made-with: Cursor
---
 .../content-management/AddNewPracticePage.tsx | 24 +++++++++++++++++++
 1 file changed, 24 insertions(+)

diff --git a/src/pages/content-management/AddNewPracticePage.tsx b/src/pages/content-management/AddNewPracticePage.tsx
index 5010e87..9f28cb9 100644
--- a/src/pages/content-management/AddNewPracticePage.tsx
+++ b/src/pages/content-management/AddNewPracticePage.tsx
@@ -856,6 +856,30 @@ export function AddNewPracticePage() {
                   {introVideoUrl.trim() || "—"}
                 </span>
               </div>
+              {introVideoPreview ? (
+                <div className="bg-grayScale-50/50 px-6 py-4">
+                  <span className="text-sm text-grayScale-500">Intro video preview</span>
+                  <div className="mt-2 rounded-lg border border-grayScale-200 bg-white p-3">
+                    {introVideoPreview.kind === "vimeo" ? (
+                      <div className="overflow-hidden rounded-lg border border-grayScale-200 bg-black">
+                        <iframe
+                          src={introVideoPreview.url}
+                          title="Intro video preview"
+                          className="aspect-video w-full"
+                          allow="autoplay; fullscreen; picture-in-picture"
+                          allowFullScreen
+                        />
+                      </div>
+                    ) : (
+                      <video
+                        controls
+                        src={introVideoPreview.url}
+                        className="aspect-video w-full rounded-lg border border-grayScale-200 bg-black"
+                      />
+                    )}
+                  </div>
+                </div>
+              ) : null}
               <div className="flex justify-between bg-grayScale-50/50 px-6 py-3.5">
                 <span className="text-sm text-grayScale-500">Passing Score</span>
                 <span className="text-sm font-medium text-grayScale-900">{passingScore}%</span>