From 987349ff7547d9a804095671cb60df3f4b220b15 Mon Sep 17 00:00:00 2001
From: "renovate[bot]" <29139614+renovate[bot]@users.noreply.github.com>
Date: Tue, 28 Apr 2026 12:05:56 -0400
Subject: [PATCH 01/10] Update dependency sharp to v0.34.5 (#2707)

* Update dependency sharp to v0.34.5

* update yarn

---------

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
Co-authored-by: shankar ambady <ambady@mit.edu>
---
 frontends/main/package.json |   2 +-
 yarn.lock                   | 296 +-----------------------------------
 2 files changed, 5 insertions(+), 293 deletions(-)

diff --git a/frontends/main/package.json b/frontends/main/package.json
index acccf5759c..fe1573debd 100644
--- a/frontends/main/package.json
+++ b/frontends/main/package.json
@@ -63,7 +63,7 @@
     "react-hotkeys-hook": "^5.2.1",
     "react-markdown": "^10.0.0",
     "react-slick": "^0.31.0",
-    "sharp": "0.34.4",
+    "sharp": "0.34.5",
     "slick-carousel": "^1.8.1",
     "tiny-invariant": "^1.3.3",
     "video.js": "^8.23.7",
diff --git a/yarn.lock b/yarn.lock
index 7db1909227..0ccbbdd1d4 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2035,15 +2035,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@emnapi/runtime@npm:^1.5.0":
-  version: 1.7.0
-  resolution: "@emnapi/runtime@npm:1.7.0"
-  dependencies:
-    tslib: "npm:^2.4.0"
-  checksum: 10/4dc726eb42fe2c7777fd32090f3e5e006c630e1a732538139caa18daf586e883e81c562cd69b0622db16e76bb572a2dde30711494edcee4a34059b62f5f46267
-  languageName: node
-  linkType: hard
-
 "@emnapi/wasi-threads@npm:1.0.2":
   version: 1.0.2
   resolution: "@emnapi/wasi-threads@npm:1.0.2"
@@ -2620,18 +2611,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@img/sharp-darwin-arm64@npm:0.34.4":
-  version: 0.34.4
-  resolution: "@img/sharp-darwin-arm64@npm:0.34.4"
-  dependencies:
-    "@img/sharp-libvips-darwin-arm64": "npm:1.2.3"
-  dependenciesMeta:
-    "@img/sharp-libvips-darwin-arm64":
-      optional: true
-  conditions: os=darwin & cpu=arm64
-  languageName: node
-  linkType: hard
-
 "@img/sharp-darwin-arm64@npm:0.34.5":
   version: 0.34.5
   resolution: "@img/sharp-darwin-arm64@npm:0.34.5"
@@ -2644,18 +2623,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@img/sharp-darwin-x64@npm:0.34.4":
-  version: 0.34.4
-  resolution: "@img/sharp-darwin-x64@npm:0.34.4"
-  dependencies:
-    "@img/sharp-libvips-darwin-x64": "npm:1.2.3"
-  dependenciesMeta:
-    "@img/sharp-libvips-darwin-x64":
-      optional: true
-  conditions: os=darwin & cpu=x64
-  languageName: node
-  linkType: hard
-
 "@img/sharp-darwin-x64@npm:0.34.5":
   version: 0.34.5
   resolution: "@img/sharp-darwin-x64@npm:0.34.5"
@@ -2668,13 +2635,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@img/sharp-libvips-darwin-arm64@npm:1.2.3":
-  version: 1.2.3
-  resolution: "@img/sharp-libvips-darwin-arm64@npm:1.2.3"
-  conditions: os=darwin & cpu=arm64
-  languageName: node
-  linkType: hard
-
 "@img/sharp-libvips-darwin-arm64@npm:1.2.4":
   version: 1.2.4
   resolution: "@img/sharp-libvips-darwin-arm64@npm:1.2.4"
@@ -2682,13 +2642,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@img/sharp-libvips-darwin-x64@npm:1.2.3":
-  version: 1.2.3
-  resolution: "@img/sharp-libvips-darwin-x64@npm:1.2.3"
-  conditions: os=darwin & cpu=x64
-  languageName: node
-  linkType: hard
-
 "@img/sharp-libvips-darwin-x64@npm:1.2.4":
   version: 1.2.4
   resolution: "@img/sharp-libvips-darwin-x64@npm:1.2.4"
@@ -2696,13 +2649,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@img/sharp-libvips-linux-arm64@npm:1.2.3":
-  version: 1.2.3
-  resolution: "@img/sharp-libvips-linux-arm64@npm:1.2.3"
-  conditions: os=linux & cpu=arm64 & libc=glibc
-  languageName: node
-  linkType: hard
-
 "@img/sharp-libvips-linux-arm64@npm:1.2.4":
   version: 1.2.4
   resolution: "@img/sharp-libvips-linux-arm64@npm:1.2.4"
@@ -2710,13 +2656,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@img/sharp-libvips-linux-arm@npm:1.2.3":
-  version: 1.2.3
-  resolution: "@img/sharp-libvips-linux-arm@npm:1.2.3"
-  conditions: os=linux & cpu=arm & libc=glibc
-  languageName: node
-  linkType: hard
-
 "@img/sharp-libvips-linux-arm@npm:1.2.4":
   version: 1.2.4
   resolution: "@img/sharp-libvips-linux-arm@npm:1.2.4"
@@ -2724,13 +2663,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@img/sharp-libvips-linux-ppc64@npm:1.2.3":
-  version: 1.2.3
-  resolution: "@img/sharp-libvips-linux-ppc64@npm:1.2.3"
-  conditions: os=linux & cpu=ppc64 & libc=glibc
-  languageName: node
-  linkType: hard
-
 "@img/sharp-libvips-linux-ppc64@npm:1.2.4":
   version: 1.2.4
   resolution: "@img/sharp-libvips-linux-ppc64@npm:1.2.4"
@@ -2745,13 +2677,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@img/sharp-libvips-linux-s390x@npm:1.2.3":
-  version: 1.2.3
-  resolution: "@img/sharp-libvips-linux-s390x@npm:1.2.3"
-  conditions: os=linux & cpu=s390x & libc=glibc
-  languageName: node
-  linkType: hard
-
 "@img/sharp-libvips-linux-s390x@npm:1.2.4":
   version: 1.2.4
   resolution: "@img/sharp-libvips-linux-s390x@npm:1.2.4"
@@ -2759,13 +2684,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@img/sharp-libvips-linux-x64@npm:1.2.3":
-  version: 1.2.3
-  resolution: "@img/sharp-libvips-linux-x64@npm:1.2.3"
-  conditions: os=linux & cpu=x64 & libc=glibc
-  languageName: node
-  linkType: hard
-
 "@img/sharp-libvips-linux-x64@npm:1.2.4":
   version: 1.2.4
   resolution: "@img/sharp-libvips-linux-x64@npm:1.2.4"
@@ -2773,13 +2691,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@img/sharp-libvips-linuxmusl-arm64@npm:1.2.3":
-  version: 1.2.3
-  resolution: "@img/sharp-libvips-linuxmusl-arm64@npm:1.2.3"
-  conditions: os=linux & cpu=arm64 & libc=musl
-  languageName: node
-  linkType: hard
-
 "@img/sharp-libvips-linuxmusl-arm64@npm:1.2.4":
   version: 1.2.4
   resolution: "@img/sharp-libvips-linuxmusl-arm64@npm:1.2.4"
@@ -2787,13 +2698,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@img/sharp-libvips-linuxmusl-x64@npm:1.2.3":
-  version: 1.2.3
-  resolution: "@img/sharp-libvips-linuxmusl-x64@npm:1.2.3"
-  conditions: os=linux & cpu=x64 & libc=musl
-  languageName: node
-  linkType: hard
-
 "@img/sharp-libvips-linuxmusl-x64@npm:1.2.4":
   version: 1.2.4
   resolution: "@img/sharp-libvips-linuxmusl-x64@npm:1.2.4"
@@ -2801,18 +2705,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@img/sharp-linux-arm64@npm:0.34.4":
-  version: 0.34.4
-  resolution: "@img/sharp-linux-arm64@npm:0.34.4"
-  dependencies:
-    "@img/sharp-libvips-linux-arm64": "npm:1.2.3"
-  dependenciesMeta:
-    "@img/sharp-libvips-linux-arm64":
-      optional: true
-  conditions: os=linux & cpu=arm64 & libc=glibc
-  languageName: node
-  linkType: hard
-
 "@img/sharp-linux-arm64@npm:0.34.5":
   version: 0.34.5
   resolution: "@img/sharp-linux-arm64@npm:0.34.5"
@@ -2825,18 +2717,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@img/sharp-linux-arm@npm:0.34.4":
-  version: 0.34.4
-  resolution: "@img/sharp-linux-arm@npm:0.34.4"
-  dependencies:
-    "@img/sharp-libvips-linux-arm": "npm:1.2.3"
-  dependenciesMeta:
-    "@img/sharp-libvips-linux-arm":
-      optional: true
-  conditions: os=linux & cpu=arm & libc=glibc
-  languageName: node
-  linkType: hard
-
 "@img/sharp-linux-arm@npm:0.34.5":
   version: 0.34.5
   resolution: "@img/sharp-linux-arm@npm:0.34.5"
@@ -2849,18 +2729,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@img/sharp-linux-ppc64@npm:0.34.4":
-  version: 0.34.4
-  resolution: "@img/sharp-linux-ppc64@npm:0.34.4"
-  dependencies:
-    "@img/sharp-libvips-linux-ppc64": "npm:1.2.3"
-  dependenciesMeta:
-    "@img/sharp-libvips-linux-ppc64":
-      optional: true
-  conditions: os=linux & cpu=ppc64 & libc=glibc
-  languageName: node
-  linkType: hard
-
 "@img/sharp-linux-ppc64@npm:0.34.5":
   version: 0.34.5
   resolution: "@img/sharp-linux-ppc64@npm:0.34.5"
@@ -2885,18 +2753,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@img/sharp-linux-s390x@npm:0.34.4":
-  version: 0.34.4
-  resolution: "@img/sharp-linux-s390x@npm:0.34.4"
-  dependencies:
-    "@img/sharp-libvips-linux-s390x": "npm:1.2.3"
-  dependenciesMeta:
-    "@img/sharp-libvips-linux-s390x":
-      optional: true
-  conditions: os=linux & cpu=s390x & libc=glibc
-  languageName: node
-  linkType: hard
-
 "@img/sharp-linux-s390x@npm:0.34.5":
   version: 0.34.5
   resolution: "@img/sharp-linux-s390x@npm:0.34.5"
@@ -2909,18 +2765,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@img/sharp-linux-x64@npm:0.34.4":
-  version: 0.34.4
-  resolution: "@img/sharp-linux-x64@npm:0.34.4"
-  dependencies:
-    "@img/sharp-libvips-linux-x64": "npm:1.2.3"
-  dependenciesMeta:
-    "@img/sharp-libvips-linux-x64":
-      optional: true
-  conditions: os=linux & cpu=x64 & libc=glibc
-  languageName: node
-  linkType: hard
-
 "@img/sharp-linux-x64@npm:0.34.5":
   version: 0.34.5
   resolution: "@img/sharp-linux-x64@npm:0.34.5"
@@ -2933,18 +2777,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@img/sharp-linuxmusl-arm64@npm:0.34.4":
-  version: 0.34.4
-  resolution: "@img/sharp-linuxmusl-arm64@npm:0.34.4"
-  dependencies:
-    "@img/sharp-libvips-linuxmusl-arm64": "npm:1.2.3"
-  dependenciesMeta:
-    "@img/sharp-libvips-linuxmusl-arm64":
-      optional: true
-  conditions: os=linux & cpu=arm64 & libc=musl
-  languageName: node
-  linkType: hard
-
 "@img/sharp-linuxmusl-arm64@npm:0.34.5":
   version: 0.34.5
   resolution: "@img/sharp-linuxmusl-arm64@npm:0.34.5"
@@ -2957,18 +2789,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@img/sharp-linuxmusl-x64@npm:0.34.4":
-  version: 0.34.4
-  resolution: "@img/sharp-linuxmusl-x64@npm:0.34.4"
-  dependencies:
-    "@img/sharp-libvips-linuxmusl-x64": "npm:1.2.3"
-  dependenciesMeta:
-    "@img/sharp-libvips-linuxmusl-x64":
-      optional: true
-  conditions: os=linux & cpu=x64 & libc=musl
-  languageName: node
-  linkType: hard
-
 "@img/sharp-linuxmusl-x64@npm:0.34.5":
   version: 0.34.5
   resolution: "@img/sharp-linuxmusl-x64@npm:0.34.5"
@@ -2981,15 +2801,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@img/sharp-wasm32@npm:0.34.4":
-  version: 0.34.4
-  resolution: "@img/sharp-wasm32@npm:0.34.4"
-  dependencies:
-    "@emnapi/runtime": "npm:^1.5.0"
-  conditions: cpu=wasm32
-  languageName: node
-  linkType: hard
-
 "@img/sharp-wasm32@npm:0.34.5":
   version: 0.34.5
   resolution: "@img/sharp-wasm32@npm:0.34.5"
@@ -2999,13 +2810,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@img/sharp-win32-arm64@npm:0.34.4":
-  version: 0.34.4
-  resolution: "@img/sharp-win32-arm64@npm:0.34.4"
-  conditions: os=win32 & cpu=arm64
-  languageName: node
-  linkType: hard
-
 "@img/sharp-win32-arm64@npm:0.34.5":
   version: 0.34.5
   resolution: "@img/sharp-win32-arm64@npm:0.34.5"
@@ -3013,13 +2817,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@img/sharp-win32-ia32@npm:0.34.4":
-  version: 0.34.4
-  resolution: "@img/sharp-win32-ia32@npm:0.34.4"
-  conditions: os=win32 & cpu=ia32
-  languageName: node
-  linkType: hard
-
 "@img/sharp-win32-ia32@npm:0.34.5":
   version: 0.34.5
   resolution: "@img/sharp-win32-ia32@npm:0.34.5"
@@ -3027,13 +2824,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@img/sharp-win32-x64@npm:0.34.4":
-  version: 0.34.4
-  resolution: "@img/sharp-win32-x64@npm:0.34.4"
-  conditions: os=win32 & cpu=x64
-  languageName: node
-  linkType: hard
-
 "@img/sharp-win32-x64@npm:0.34.5":
   version: 0.34.5
   resolution: "@img/sharp-win32-x64@npm:0.34.5"
@@ -11225,7 +11015,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"detect-libc@npm:^2.1.0, detect-libc@npm:^2.1.2":
+"detect-libc@npm:^2.1.2":
   version: 2.1.2
   resolution: "detect-libc@npm:2.1.2"
   checksum: 10/b736c8d97d5d46164c0d1bed53eb4e6a3b1d8530d460211e2d52f1c552875e706c58a5376854e4e54f8b828c9cada58c855288c968522eb93ac7696d65970766
@@ -16461,7 +16251,7 @@ __metadata:
     react-hotkeys-hook: "npm:^5.2.1"
     react-markdown: "npm:^10.0.0"
     react-slick: "npm:^0.31.0"
-    sharp: "npm:0.34.4"
+    sharp: "npm:0.34.5"
     slick-carousel: "npm:^1.8.1"
     tiny-invariant: "npm:^1.3.3"
     ts-jest: "npm:^29.2.4"
@@ -20633,7 +20423,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"semver@npm:^7.1.1, semver@npm:^7.3.5, semver@npm:^7.5.3, semver@npm:^7.5.4, semver@npm:^7.6.0, semver@npm:^7.6.3, semver@npm:^7.7.1, semver@npm:^7.7.2":
+"semver@npm:^7.1.1, semver@npm:^7.3.5, semver@npm:^7.5.3, semver@npm:^7.5.4, semver@npm:^7.6.0, semver@npm:^7.6.3, semver@npm:^7.7.1":
   version: 7.7.2
   resolution: "semver@npm:7.7.2"
   bin:
@@ -20717,85 +20507,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"sharp@npm:0.34.4":
-  version: 0.34.4
-  resolution: "sharp@npm:0.34.4"
-  dependencies:
-    "@img/colour": "npm:^1.0.0"
-    "@img/sharp-darwin-arm64": "npm:0.34.4"
-    "@img/sharp-darwin-x64": "npm:0.34.4"
-    "@img/sharp-libvips-darwin-arm64": "npm:1.2.3"
-    "@img/sharp-libvips-darwin-x64": "npm:1.2.3"
-    "@img/sharp-libvips-linux-arm": "npm:1.2.3"
-    "@img/sharp-libvips-linux-arm64": "npm:1.2.3"
-    "@img/sharp-libvips-linux-ppc64": "npm:1.2.3"
-    "@img/sharp-libvips-linux-s390x": "npm:1.2.3"
-    "@img/sharp-libvips-linux-x64": "npm:1.2.3"
-    "@img/sharp-libvips-linuxmusl-arm64": "npm:1.2.3"
-    "@img/sharp-libvips-linuxmusl-x64": "npm:1.2.3"
-    "@img/sharp-linux-arm": "npm:0.34.4"
-    "@img/sharp-linux-arm64": "npm:0.34.4"
-    "@img/sharp-linux-ppc64": "npm:0.34.4"
-    "@img/sharp-linux-s390x": "npm:0.34.4"
-    "@img/sharp-linux-x64": "npm:0.34.4"
-    "@img/sharp-linuxmusl-arm64": "npm:0.34.4"
-    "@img/sharp-linuxmusl-x64": "npm:0.34.4"
-    "@img/sharp-wasm32": "npm:0.34.4"
-    "@img/sharp-win32-arm64": "npm:0.34.4"
-    "@img/sharp-win32-ia32": "npm:0.34.4"
-    "@img/sharp-win32-x64": "npm:0.34.4"
-    detect-libc: "npm:^2.1.0"
-    semver: "npm:^7.7.2"
-  dependenciesMeta:
-    "@img/sharp-darwin-arm64":
-      optional: true
-    "@img/sharp-darwin-x64":
-      optional: true
-    "@img/sharp-libvips-darwin-arm64":
-      optional: true
-    "@img/sharp-libvips-darwin-x64":
-      optional: true
-    "@img/sharp-libvips-linux-arm":
-      optional: true
-    "@img/sharp-libvips-linux-arm64":
-      optional: true
-    "@img/sharp-libvips-linux-ppc64":
-      optional: true
-    "@img/sharp-libvips-linux-s390x":
-      optional: true
-    "@img/sharp-libvips-linux-x64":
-      optional: true
-    "@img/sharp-libvips-linuxmusl-arm64":
-      optional: true
-    "@img/sharp-libvips-linuxmusl-x64":
-      optional: true
-    "@img/sharp-linux-arm":
-      optional: true
-    "@img/sharp-linux-arm64":
-      optional: true
-    "@img/sharp-linux-ppc64":
-      optional: true
-    "@img/sharp-linux-s390x":
-      optional: true
-    "@img/sharp-linux-x64":
-      optional: true
-    "@img/sharp-linuxmusl-arm64":
-      optional: true
-    "@img/sharp-linuxmusl-x64":
-      optional: true
-    "@img/sharp-wasm32":
-      optional: true
-    "@img/sharp-win32-arm64":
-      optional: true
-    "@img/sharp-win32-ia32":
-      optional: true
-    "@img/sharp-win32-x64":
-      optional: true
-  checksum: 10/8e6268e3b0fba7704291684e63c2829963a5ec311d8a8ebbcd32d750c4efb0b01594d925d289ccb5ac0ac373df40fedf5a05a8f331470db799b9c78c48923cba
-  languageName: node
-  linkType: hard
-
-"sharp@npm:^0.34.4":
+"sharp@npm:0.34.5, sharp@npm:^0.34.4":
   version: 0.34.5
   resolution: "sharp@npm:0.34.5"
   dependencies:

From 9d0dd1645b67b3850e462a77b333fc3fd069863d Mon Sep 17 00:00:00 2001
From: "pre-commit-ci[bot]"
 <66853113+pre-commit-ci[bot]@users.noreply.github.com>
Date: Tue, 28 Apr 2026 12:11:06 -0400
Subject: [PATCH 02/10] [pre-commit.ci] pre-commit autoupdate (#2973)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* [pre-commit.ci] pre-commit autoupdate

updates:
- [github.com/scop/pre-commit-shfmt: v3.12.0-2 → v3.13.1-1](https://github.com/scop/pre-commit-shfmt/compare/v3.12.0-2...v3.13.1-1)
- [github.com/astral-sh/ruff-pre-commit: v0.15.1 → v0.15.12](https://github.com/astral-sh/ruff-pre-commit/compare/v0.15.1...v0.15.12)

* fix lint

---------

Co-authored-by: pre-commit-ci[bot] <66853113+pre-commit-ci[bot]@users.noreply.github.com>
Co-authored-by: shankar ambady <ambady@mit.edu>
---
 .pre-commit-config.yaml           | 4 ++--
 learning_resources/etl/openedx.py | 7 ++++---
 2 files changed, 6 insertions(+), 5 deletions(-)

diff --git a/.pre-commit-config.yaml b/.pre-commit-config.yaml
index 3026d93278..fb9b5cd8df 100644
--- a/.pre-commit-config.yaml
+++ b/.pre-commit-config.yaml
@@ -53,7 +53,7 @@ repos:
         pass_filenames: false
         always_run: true
   - repo: https://github.com/scop/pre-commit-shfmt
-    rev: v3.12.0-2
+    rev: v3.13.1-1
     hooks:
       - id: shfmt
   - repo: https://github.com/adrienverge/yamllint.git
@@ -90,7 +90,7 @@ repos:
           - "config/keycloak/realms/ol-local-realm.json"
         additional_dependencies: ["gibberish-detector"]
   - repo: https://github.com/astral-sh/ruff-pre-commit
-    rev: "v0.15.1"
+    rev: "v0.15.12"
     hooks:
       - id: ruff-format
       - id: ruff
diff --git a/learning_resources/etl/openedx.py b/learning_resources/etl/openedx.py
index 2f5f574dce..cebd2c2bc4 100644
--- a/learning_resources/etl/openedx.py
+++ b/learning_resources/etl/openedx.py
@@ -378,9 +378,10 @@ def _transform_course_commitment(course_run) -> CommitmentConfig:
     )
     if min_effort or max_effort:
         return CommitmentConfig(
-            commitment=f"{commit_str_prefix}{max_effort or min_effort} hour{
-                's' if max_effort > 1 else ''
-            }/week",
+            commitment=(
+                f"{commit_str_prefix}{max_effort or min_effort} "
+                f"hour{'s' if max_effort > 1 else ''}/week"
+            ),
             min_weekly_hours=min(min_effort, max_effort),
             max_weekly_hours=max(min_effort, max_effort),
         )

From 4f366cf30e9e6372767927600ca49bcd0da86bfd Mon Sep 17 00:00:00 2001
From: Shankar Ambady <shanbady@gmail.com>
Date: Tue, 28 Apr 2026 13:17:44 -0400
Subject: [PATCH 03/10] flaky test test_learning_resources_serializer (#3252)

* order by position and id

* add migration

* adding pytest repeat plugin

* moving pytest-repeat to dev dependency
---
 ...alter_learningresourcerelationship_options.py | 16 ++++++++++++++++
 learning_resources/models.py                     |  8 +++++---
 pyproject.toml                                   |  1 +
 uv.lock                                          | 14 ++++++++++++++
 4 files changed, 36 insertions(+), 3 deletions(-)
 create mode 100644 learning_resources/migrations/0113_alter_learningresourcerelationship_options.py

diff --git a/learning_resources/migrations/0113_alter_learningresourcerelationship_options.py b/learning_resources/migrations/0113_alter_learningresourcerelationship_options.py
new file mode 100644
index 0000000000..39184191d3
--- /dev/null
+++ b/learning_resources/migrations/0113_alter_learningresourcerelationship_options.py
@@ -0,0 +1,16 @@
+# Generated by Django 4.2.30 on 2026-04-27 16:16
+
+from django.db import migrations
+
+
+class Migration(migrations.Migration):
+    dependencies = [
+        ("learning_resources", "0112_contentfile_youtube_id"),
+    ]
+
+    operations = [
+        migrations.AlterModelOptions(
+            name="learningresourcerelationship",
+            options={"ordering": ["position", "id"]},
+        ),
+    ]
diff --git a/learning_resources/models.py b/learning_resources/models.py
index c830f41701..58993ffee5 100644
--- a/learning_resources/models.py
+++ b/learning_resources/models.py
@@ -664,7 +664,9 @@ def children_for_serialization(self):
         if hasattr(self, "_children"):
             return self._children
         return list(
-            self.children.order_by("position").select_related("child", "child__image")
+            self.children.order_by("position", "id").select_related(
+                "child", "child__image"
+            )
         )
 
     def first_child_relationship_for_serialization(self):
@@ -1012,7 +1014,7 @@ class LearningResourceRelationshipQuerySet(TimestampedModelQuerySet):
 
     def for_serialization(self):
         """Prefetch related objects used by API serializers"""
-        return self.select_related("child", "child__image").order_by("position")
+        return self.select_related("child", "child__image").order_by("position", "id")
 
 
 class LearningResourceRelationship(TimestampedModel):
@@ -1038,7 +1040,7 @@ class LearningResourceRelationship(TimestampedModel):
     objects = LearningResourceRelationshipQuerySet.as_manager()
 
     class Meta:
-        ordering = ["position"]
+        ordering = ["position", "id"]
 
 
 class ContentFileQuerySet(TimestampedModelQuerySet):
diff --git a/pyproject.toml b/pyproject.toml
index 10b1bab7fb..2bafe84139 100644
--- a/pyproject.toml
+++ b/pyproject.toml
@@ -136,6 +136,7 @@ dev = [
     "pytest-env>=1.0.0,<2",
     "pytest-freezegun>=0.4.2,<0.5",
     "pytest-mock>=3.10.0,<4",
+    "pytest-repeat>=0.9.4",
     "responses>=0.25.0,<0.26",
     "ruff==0.14.14",
     "safety>=3.0.0,<4",
diff --git a/uv.lock b/uv.lock
index dc5222734e..001d7183cf 100644
--- a/uv.lock
+++ b/uv.lock
@@ -2616,6 +2616,7 @@ dev = [
     { name = "pytest-env" },
     { name = "pytest-freezegun" },
     { name = "pytest-mock" },
+    { name = "pytest-repeat" },
     { name = "pytest-xdist", extra = ["psutil"] },
     { name = "responses" },
     { name = "ruff" },
@@ -2755,6 +2756,7 @@ dev = [
     { name = "pytest-env", specifier = ">=1.0.0,<2" },
     { name = "pytest-freezegun", specifier = ">=0.4.2,<0.5" },
     { name = "pytest-mock", specifier = ">=3.10.0,<4" },
+    { name = "pytest-repeat", specifier = ">=0.9.4" },
     { name = "pytest-xdist", extras = ["psutil"], specifier = ">=3.6.1,<4" },
     { name = "responses", specifier = ">=0.25.0,<0.26" },
     { name = "ruff", specifier = "==0.14.14" },
@@ -4070,6 +4072,18 @@ wheels = [
     { url = "https://files.pythonhosted.org/packages/5a/cc/06253936f4a7fa2e0f48dfe6d851d9c56df896a9ab09ac019d70b760619c/pytest_mock-3.15.1-py3-none-any.whl", hash = "sha256:0a25e2eb88fe5168d535041d09a4529a188176ae608a6d249ee65abc0949630d", size = 10095, upload-time = "2025-09-16T16:37:25.734Z" },
 ]
 
+[[package]]
+name = "pytest-repeat"
+version = "0.9.4"
+source = { registry = "https://pypi.org/simple" }
+dependencies = [
+    { name = "pytest" },
+]
+sdist = { url = "https://files.pythonhosted.org/packages/80/d4/69e9dbb9b8266df0b157c72be32083403c412990af15c7c15f7a3fd1b142/pytest_repeat-0.9.4.tar.gz", hash = "sha256:d92ac14dfaa6ffcfe6917e5d16f0c9bc82380c135b03c2a5f412d2637f224485", size = 6488, upload-time = "2025-04-07T14:59:53.077Z" }
+wheels = [
+    { url = "https://files.pythonhosted.org/packages/73/d4/8b706b81b07b43081bd68a2c0359fe895b74bf664b20aca8005d2bb3be71/pytest_repeat-0.9.4-py3-none-any.whl", hash = "sha256:c1738b4e412a6f3b3b9e0b8b29fcd7a423e50f87381ad9307ef6f5a8601139f3", size = 4180, upload-time = "2025-04-07T14:59:51.492Z" },
+]
+
 [[package]]
 name = "pytest-xdist"
 version = "3.8.0"

From 701da1fb29bae286afaa0da8b8369182a691fe99 Mon Sep 17 00:00:00 2001
From: Carey P Gumaer <gumaerc@mit.edu>
Date: Tue, 28 Apr 2026 13:31:06 -0400
Subject: [PATCH 04/10] dashboard b2c series certificate display (#3256)

* add context menu and series certificate button to program as course card

Co-authored-by: Copilot <copilot@github.com>

* don't need double program enrollment status

* Also display certificate link button on program dashboard page

Co-authored-by: Copilot <copilot@github.com>

* add tests

* remove some code duplication

Co-authored-by: Copilot <copilot@github.com>

* correct program as course card context menu behavior

Co-authored-by: Copilot <copilot@github.com>

* add tests for context menu in program as course card

* fix type check

* address sentry feedback about trailing slashes

Co-authored-by: Copilot <copilot@github.com>

* don't show the unenroll option on crogram cards for verified enrollments

Co-authored-by: Copilot <copilot@github.com>

* Only specify necessary style overrides on cert button

* open program cert links in the same tab

Co-authored-by: Copilot <copilot@github.com>

* use api cert link in tests too

---------

Co-authored-by: Copilot <copilot@github.com>
---
 .../EnrollmentDisplay.test.tsx                |  98 ++++++++++
 .../CoursewareDisplay/EnrollmentDisplay.tsx   |  36 +++-
 .../ProgramAsCourseCard.test.tsx              | 172 ++++++++++++++++++
 .../CoursewareDisplay/ProgramAsCourseCard.tsx | 147 ++++++++++++++-
 4 files changed, 435 insertions(+), 18 deletions(-)

diff --git a/frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/EnrollmentDisplay.test.tsx b/frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/EnrollmentDisplay.test.tsx
index 1ff5215871..324f84033e 100644
--- a/frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/EnrollmentDisplay.test.tsx
+++ b/frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/EnrollmentDisplay.test.tsx
@@ -2291,5 +2291,103 @@ describe("EnrollmentDisplay", () => {
       expect(cards[1]).toHaveTextContent(courseA.title)
       expect(cards[2]).toHaveTextContent(courseB.title)
     })
+
+    test("displays certificate button when program enrollment has a certificate", async () => {
+      const mitxOnlineUser = mitxonline.factories.user.user()
+      setMockResponse.get(mitxonline.urls.userMe.get(), mitxOnlineUser)
+
+      const certUuid = "test-program-cert-uuid"
+      const program = mitxonline.factories.programs.program({
+        id: 456,
+        title: "Program With Certificate",
+        courses: [10, 11],
+      })
+      const programEnrollment =
+        mitxonline.factories.enrollment.programEnrollmentV3({
+          program: {
+            id: program.id,
+            title: program.title,
+            live: program.live,
+            program_type: program.program_type,
+            readable_id: program.readable_id,
+          },
+          certificate: {
+            uuid: certUuid,
+            link: `/certificate/program/${certUuid}/`,
+          },
+        })
+      const courses = mitxonline.factories.courses.courses({ count: 2 })
+
+      mockedUseFeatureFlagEnabled.mockReturnValue(true)
+      setMockResponse.get(mitxonline.urls.enrollment.enrollmentsListV3(), [])
+      setMockResponse.get(
+        mitxonline.urls.programEnrollments.enrollmentsListV3(),
+        [programEnrollment],
+      )
+      setMockResponse.get(mitxonline.urls.programs.programDetail(456), program)
+      setMockResponse.get(
+        mitxonline.urls.courses.coursesList({
+          id: program.courses,
+          page_size: program.courses.length,
+        }),
+        courses,
+      )
+
+      renderWithProviders(<EnrollmentDisplay programId={456} />)
+
+      await screen.findByText("Program With Certificate")
+      const certButton = screen.getByRole("link", { name: "Certificate" })
+      const expectedCertHref = programEnrollment.certificate?.link?.replace(
+        /\/$/,
+        "",
+      )
+      expect(certButton).toBeInTheDocument()
+      expect(certButton).toHaveAttribute("href", expectedCertHref)
+      expect(certButton).not.toHaveAttribute("target")
+    })
+
+    test("does not display certificate button when program enrollment has no certificate", async () => {
+      const mitxOnlineUser = mitxonline.factories.user.user()
+      setMockResponse.get(mitxonline.urls.userMe.get(), mitxOnlineUser)
+
+      const program = mitxonline.factories.programs.program({
+        id: 457,
+        title: "Program Without Certificate",
+        courses: [12, 13],
+      })
+      const programEnrollment =
+        mitxonline.factories.enrollment.programEnrollmentV3({
+          program: {
+            id: program.id,
+            title: program.title,
+            live: program.live,
+            program_type: program.program_type,
+            readable_id: program.readable_id,
+          },
+          certificate: null,
+        })
+      const courses = mitxonline.factories.courses.courses({ count: 2 })
+
+      mockedUseFeatureFlagEnabled.mockReturnValue(true)
+      setMockResponse.get(mitxonline.urls.enrollment.enrollmentsListV3(), [])
+      setMockResponse.get(
+        mitxonline.urls.programEnrollments.enrollmentsListV3(),
+        [programEnrollment],
+      )
+      setMockResponse.get(mitxonline.urls.programs.programDetail(457), program)
+      setMockResponse.get(
+        mitxonline.urls.courses.coursesList({
+          id: program.courses,
+          page_size: program.courses.length,
+        }),
+        courses,
+      )
+
+      renderWithProviders(<EnrollmentDisplay programId={457} />)
+
+      await screen.findByText("Program Without Certificate")
+      const certButton = screen.queryByRole("link", { name: "Certificate" })
+      expect(certButton).not.toBeInTheDocument()
+    })
   })
 })
diff --git a/frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/EnrollmentDisplay.tsx b/frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/EnrollmentDisplay.tsx
index e89d7a66ed..02a06c2a29 100644
--- a/frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/EnrollmentDisplay.tsx
+++ b/frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/EnrollmentDisplay.tsx
@@ -13,7 +13,7 @@ import {
   styled,
   theme,
 } from "ol-components"
-import { Alert } from "@mitodl/smoot-design"
+import { Alert, ButtonLink } from "@mitodl/smoot-design"
 import { keepPreviousData, useQuery } from "@tanstack/react-query"
 import {
   EnrollmentStatus,
@@ -43,6 +43,7 @@ import { mitxUserQueries } from "api/mitxonline-hooks/user"
 import NotFoundPage from "@/app-pages/ErrorPage/NotFoundPage"
 import { ProgramAsCourseCard } from "./ProgramAsCourseCard"
 import { getIdsFromReqTree } from "@/common/mitxonline"
+import { RiAwardFill } from "@remixicon/react"
 
 const Wrapper = styled.div(({ theme }) => ({
   marginTop: "32px",
@@ -107,6 +108,11 @@ const ShowAllContainer = styled.div(({ theme }) => ({
   },
 }))
 
+export const ProgramCertificateButton = styled(ButtonLink)(({ theme }) => ({
+  color: theme.custom.colors.red,
+  width: "120px",
+}))
+
 const alphabeticalSort = (a: CourseRunEnrollmentV3, b: CourseRunEnrollmentV3) =>
   a.run.course.title.localeCompare(b.run.course.title)
 
@@ -550,6 +556,8 @@ const ProgramEnrollmentDisplay: React.FC<ProgramEnrollmentDisplayProps> = ({
       programEnrollmentsById,
     )
 
+  const programCertificateUrl = programEnrollment?.certificate?.link ?? null
+
   if (isLoading) {
     return (
       <Stack direction="column">
@@ -578,14 +586,26 @@ const ProgramEnrollmentDisplay: React.FC<ProgramEnrollmentDisplayProps> = ({
         <Typography component="h1" variant="h3" paddingBottom="32px">
           {program?.title}
         </Typography>
-        <Typography variant="body2">
-          You have completed
-          <Typography component="span" variant="subtitle2">
-            {" "}
-            {completedCount} of {totalCount} courses{" "}
+        <Stack direction="row" justifyContent="space-between">
+          <Typography variant="body2">
+            You have completed
+            <Typography component="span" variant="subtitle2">
+              {" "}
+              {completedCount} of {totalCount} courses{" "}
+            </Typography>
+            for this program.
           </Typography>
-          for this program.
-        </Typography>
+          {programCertificateUrl && (
+            <ProgramCertificateButton
+              variant="bordered"
+              size="small"
+              startIcon={<RiAwardFill />}
+              href={programCertificateUrl}
+            >
+              Certificate
+            </ProgramCertificateButton>
+          )}
+        </Stack>
       </Stack>
       {requirementSections.map((section, index) => {
         const { completed: sectionCompleted, total: sectionTotal } =
diff --git a/frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/ProgramAsCourseCard.test.tsx b/frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/ProgramAsCourseCard.test.tsx
index 82bd3becc3..3a501d41cf 100644
--- a/frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/ProgramAsCourseCard.test.tsx
+++ b/frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/ProgramAsCourseCard.test.tsx
@@ -13,6 +13,14 @@ import { ProgramAsCourseCard } from "./ProgramAsCourseCard"
 import { waitFor } from "@testing-library/react"
 import invariant from "tiny-invariant"
 import moment from "moment"
+import NiceModal from "@ebay/nice-modal-react"
+import { useFeatureFlagEnabled } from "posthog-js/react"
+import { UnenrollProgramDialog } from "./DashboardDialogs"
+
+jest.mock("posthog-js/react")
+const mockedUseFeatureFlagEnabled = jest
+  .mocked(useFeatureFlagEnabled)
+  .mockImplementation(() => false)
 
 describe("ProgramAsCourseCard", () => {
   setupLocationMock()
@@ -364,4 +372,168 @@ describe("ProgramAsCourseCard", () => {
       screen.queryByRole("dialog", { name: moduleWithRun.title }),
     ).not.toBeInTheDocument()
   })
+
+  test("displays certificate button when program enrollment has a certificate", async () => {
+    const cardData = setupCardData({ includeProgramEnrollment: true })
+    invariant(cardData.courseProgramEnrollment)
+    const certUuid = "test-certificate-uuid-123"
+    const programEnrollmentWithCert = {
+      ...cardData.courseProgramEnrollment,
+      certificate: {
+        uuid: certUuid,
+        link: `/certificate/program/${certUuid}/`,
+      },
+    }
+
+    renderWithProviders(
+      <ProgramAsCourseCard
+        courseProgram={cardData.courseProgram}
+        moduleCourses={cardData.moduleCourses}
+        moduleEnrollmentsByCourseId={cardData.moduleEnrollmentsByCourseId}
+        courseProgramEnrollment={programEnrollmentWithCert}
+      />,
+    )
+
+    await screen.findByText(cardData.courseProgram.title)
+    const certButton = screen.getByRole("link", { name: "Certificate" })
+    const expectedCertHref = programEnrollmentWithCert.certificate.link.replace(
+      /\/$/,
+      "",
+    )
+    expect(certButton).toBeInTheDocument()
+    expect(certButton).toHaveAttribute("href", expectedCertHref)
+    expect(certButton).not.toHaveAttribute("target")
+  })
+
+  test("does not display certificate button when program enrollment has no certificate", async () => {
+    const cardData = setupCardData({ includeProgramEnrollment: true })
+    invariant(cardData.courseProgramEnrollment)
+    const programEnrollmentNoCert = {
+      ...cardData.courseProgramEnrollment,
+      certificate: null,
+    }
+
+    renderWithProviders(
+      <ProgramAsCourseCard
+        courseProgram={cardData.courseProgram}
+        moduleCourses={cardData.moduleCourses}
+        moduleEnrollmentsByCourseId={cardData.moduleEnrollmentsByCourseId}
+        courseProgramEnrollment={programEnrollmentNoCert}
+      />,
+    )
+
+    await screen.findByText(cardData.courseProgram.title)
+    const certButton = screen.queryByRole("link", { name: "Certificate" })
+    expect(certButton).not.toBeInTheDocument()
+  })
+
+  test("shows legacy details link in context menu when product pages flag is disabled", async () => {
+    mockedUseFeatureFlagEnabled.mockReturnValue(false)
+    const cardData = setupCardData({ includeProgramEnrollment: true })
+
+    renderWithProviders(
+      <ProgramAsCourseCard
+        courseProgram={cardData.courseProgram}
+        moduleCourses={cardData.moduleCourses}
+        moduleEnrollmentsByCourseId={cardData.moduleEnrollmentsByCourseId}
+        courseProgramEnrollment={cardData.courseProgramEnrollment}
+      />,
+    )
+
+    await screen.findByText(cardData.courseProgram.title)
+    const programCard = screen.getByTestId("program-as-course-card")
+    await user.click(within(programCard).getAllByLabelText("More options")[0])
+
+    const detailsLink = await screen.findByRole("menuitem", {
+      name: "View Course Details",
+    })
+    expect(detailsLink).toHaveAttribute(
+      "href",
+      expect.stringContaining(
+        `/programs/${cardData.courseProgram.readable_id}`,
+      ),
+    )
+    expect(detailsLink).toHaveAttribute(
+      "href",
+      expect.stringContaining("ecom-service=true"),
+    )
+  })
+
+  test("shows product-page details link in context menu when product pages flag is enabled", async () => {
+    mockedUseFeatureFlagEnabled.mockReturnValue(true)
+    const cardData = setupCardData({ includeProgramEnrollment: true })
+
+    renderWithProviders(
+      <ProgramAsCourseCard
+        courseProgram={cardData.courseProgram}
+        moduleCourses={cardData.moduleCourses}
+        moduleEnrollmentsByCourseId={cardData.moduleEnrollmentsByCourseId}
+        courseProgramEnrollment={cardData.courseProgramEnrollment}
+      />,
+    )
+
+    await screen.findByText(cardData.courseProgram.title)
+    const programCard = screen.getByTestId("program-as-course-card")
+    await user.click(within(programCard).getAllByLabelText("More options")[0])
+
+    const detailsLink = await screen.findByRole("menuitem", {
+      name: "View Course Details",
+    })
+    expect(detailsLink).toHaveAttribute(
+      "href",
+      `/courses/p/${cardData.courseProgram.readable_id}`,
+    )
+  })
+
+  test("clicking Unenroll menu item opens UnenrollProgramDialog with readable_id", async () => {
+    mockedUseFeatureFlagEnabled.mockReturnValue(false)
+    const cardData = setupCardData({ includeProgramEnrollment: true })
+    invariant(cardData.courseProgramEnrollment)
+    cardData.courseProgramEnrollment.enrollment_mode = "audit"
+    const modalShowSpy = jest.spyOn(NiceModal, "show")
+
+    renderWithProviders(
+      <ProgramAsCourseCard
+        courseProgram={cardData.courseProgram}
+        moduleCourses={cardData.moduleCourses}
+        moduleEnrollmentsByCourseId={cardData.moduleEnrollmentsByCourseId}
+        courseProgramEnrollment={cardData.courseProgramEnrollment}
+      />,
+    )
+
+    await screen.findByText(cardData.courseProgram.title)
+    const programCard = screen.getByTestId("program-as-course-card")
+    await user.click(within(programCard).getAllByLabelText("More options")[0])
+    await user.click(await screen.findByRole("menuitem", { name: "Unenroll" }))
+
+    expect(modalShowSpy).toHaveBeenCalledWith(UnenrollProgramDialog, {
+      title: cardData.courseProgram.title,
+      enrollment: cardData.courseProgram.readable_id,
+    })
+    modalShowSpy.mockRestore()
+  })
+
+  test("does not show Unenroll option in context menu for verified enrollment", async () => {
+    mockedUseFeatureFlagEnabled.mockReturnValue(false)
+    const cardData = setupCardData({ includeProgramEnrollment: true })
+    invariant(cardData.courseProgramEnrollment)
+    cardData.courseProgramEnrollment.enrollment_mode = "verified"
+
+    renderWithProviders(
+      <ProgramAsCourseCard
+        courseProgram={cardData.courseProgram}
+        moduleCourses={cardData.moduleCourses}
+        moduleEnrollmentsByCourseId={cardData.moduleEnrollmentsByCourseId}
+        courseProgramEnrollment={cardData.courseProgramEnrollment}
+      />,
+    )
+
+    await screen.findByText(cardData.courseProgram.title)
+    const programCard = screen.getByTestId("program-as-course-card")
+    await user.click(within(programCard).getAllByLabelText("More options")[0])
+
+    expect(
+      screen.queryByRole("menuitem", { name: "Unenroll" }),
+    ).not.toBeInTheDocument()
+  })
 })
diff --git a/frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/ProgramAsCourseCard.tsx b/frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/ProgramAsCourseCard.tsx
index f3a4cf8d2c..752f47cba3 100644
--- a/frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/ProgramAsCourseCard.tsx
+++ b/frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/ProgramAsCourseCard.tsx
@@ -1,5 +1,13 @@
 import React from "react"
-import { Link, Popover, Stack, Typography, styled } from "ol-components"
+import {
+  Link,
+  Popover,
+  SimpleMenu,
+  SimpleMenuItem,
+  Stack,
+  Typography,
+  styled,
+} from "ol-components"
 import {
   CourseRunEnrollmentV3,
   CourseWithCourseRunsSerializerV2,
@@ -23,7 +31,16 @@ import { formatDate } from "ol-utilities"
 import {
   getIdsFromReqTree,
   isVerifiedEnrollmentMode,
+  mitxonlineLegacyUrl,
 } from "@/common/mitxonline"
+import { ActionButton } from "@mitodl/smoot-design"
+import { RiAwardFill, RiMore2Line } from "@remixicon/react"
+import NiceModal from "@ebay/nice-modal-react"
+import { UnenrollProgramDialog } from "./DashboardDialogs"
+import { ProgramCertificateButton } from "./EnrollmentDisplay"
+import { useFeatureFlagEnabled } from "posthog-js/react"
+import { FeatureFlags } from "@/common/feature_flags"
+import { programPageView } from "@/common/urls"
 
 const ProgramCardRoot = styled.div(({ theme }) => ({
   display: "flex",
@@ -127,6 +144,23 @@ const ProgramCardBody = styled.div({
   borderRadius: "0 0 8px 8px",
 })
 
+const MenuButton = styled(ActionButton)<{
+  status: EnrollmentStatus
+}>(({ theme, status }) => [
+  {
+    marginLeft: "-8px",
+    [theme.breakpoints.down("md")]: {
+      position: "absolute",
+      top: "0",
+      right: "0",
+    },
+  },
+  status !== EnrollmentStatus.Completed &&
+    status !== EnrollmentStatus.Enrolled && {
+      visibility: "hidden",
+    },
+])
+
 const getTimezone = (dateString: string): string => {
   const tz =
     new Date(dateString)
@@ -246,19 +280,65 @@ const getRelativeDateContent = (
   }
 }
 
+const getContextMenuItems = (
+  title: string,
+  resource: ProgramAsCourse,
+  enrollmentMode: string | null | undefined,
+  additionalItems: SimpleMenuItem[] = [],
+  useProductPages = false,
+) => {
+  const menuItems = []
+  const detailsUrl = useProductPages
+    ? programPageView({
+        readable_id: resource.readable_id,
+        display_mode: "course",
+      })
+    : mitxonlineLegacyUrl(`/programs/${resource.readable_id}`)
+
+  const courseMenuItems = []
+
+  if (detailsUrl) {
+    courseMenuItems.push({
+      className: "dashboard-card-menu-item",
+      key: "view-course-details",
+      label: "View Course Details",
+      href: detailsUrl,
+    })
+  }
+
+  if (enrollmentMode && !isVerifiedEnrollmentMode(enrollmentMode)) {
+    courseMenuItems.push({
+      className: "dashboard-card-menu-item",
+      key: "unenroll",
+      label: "Unenroll",
+      onClick: () => {
+        NiceModal.show(UnenrollProgramDialog, {
+          title,
+          enrollment: resource.readable_id,
+        })
+      },
+    })
+  }
+
+  menuItems.push(...courseMenuItems)
+  return [...menuItems, ...additionalItems]
+}
+
+interface ProgramAsCourse {
+  id: number
+  readable_id: string
+  title?: string | null
+  start_date?: string | null
+  end_date?: string | null
+  courses?: number[]
+  req_tree?: V2ProgramRequirement[]
+}
+
 interface ProgramAsCourseCardProps {
   /**
    * The courselike program to display.
    */
-  courseProgram: {
-    id: number
-    readable_id: string
-    title?: string | null
-    start_date?: string | null
-    end_date?: string | null
-    courses?: number[]
-    req_tree?: V2ProgramRequirement[]
-  }
+  courseProgram: ProgramAsCourse
   /**
    * child courses of the program. These correspond to nodes in the req_tree.
    */
@@ -289,6 +369,7 @@ interface ProgramAsCourseCardProps {
     enrollment_mode?: string | null
   }
   Component?: React.ElementType
+  contextMenuItems?: SimpleMenuItem[]
   className?: string
 }
 
@@ -313,8 +394,12 @@ const ProgramAsCourseCard: React.FC<ProgramAsCourseCardProps> = ({
   courseProgramEnrollment,
   ancestorProgramEnrollment,
   Component,
+  contextMenuItems = [],
   className,
 }) => {
+  const useProductPages = useFeatureFlagEnabled(
+    FeatureFlags.MitxOnlineProductPages,
+  )
   const moduleRequirementSection = courseProgram?.req_tree?.find(
     (node) => node.data.node_type === "operator",
   )
@@ -384,6 +469,35 @@ const ProgramAsCourseCard: React.FC<ProgramAsCourseCardProps> = ({
     ancestorProgramEnrollment?.enrollment_mode,
   ].some(isVerifiedEnrollmentMode)
 
+  const programCertificateUrl =
+    courseProgramEnrollment?.certificate?.link ?? null
+
+  // Build context menu
+  const menuItems = getContextMenuItems(
+    courseProgram.title ?? "",
+    courseProgram,
+    courseProgramEnrollment?.enrollment_mode,
+    contextMenuItems,
+    useProductPages ?? false,
+  )
+
+  const contextMenu = (
+    <SimpleMenu
+      items={menuItems}
+      trigger={
+        <MenuButton
+          size="small"
+          variant="text"
+          aria-label="More options"
+          status={programEnrollmentStatus}
+          hidden={menuItems.length === 0}
+        >
+          <RiMore2Line />
+        </MenuButton>
+      }
+    />
+  )
+
   return (
     <ProgramCardRoot
       as={Component}
@@ -438,6 +552,19 @@ const ProgramAsCourseCard: React.FC<ProgramAsCourseCardProps> = ({
           </StatusContainer>
           <Typography variant="subtitle2">{courseProgram?.title}</Typography>
         </ProgramCardHeaderInner>
+        <>
+          {programCertificateUrl && (
+            <ProgramCertificateButton
+              variant="bordered"
+              size="small"
+              startIcon={<RiAwardFill />}
+              href={programCertificateUrl}
+            >
+              Certificate
+            </ProgramCertificateButton>
+          )}
+          {contextMenu}
+        </>
       </ProgramCardHeaderOuter>
       <ProgramCardSubHeader>
         <ProgramCardSubHeaderText variant="subtitle3">

From b902d6b32a12a9355a771a1f29bdd261a6da27b8 Mon Sep 17 00:00:00 2001
From: Anastasia Beglova <abeglova@mit.edu>
Date: Tue, 28 Apr 2026 14:55:23 -0400
Subject: [PATCH 05/10] do not promote ocw page contentfiles to resources
 (#3261)

---
 learning_resources/etl/loaders.py      |  3 +-
 learning_resources/etl/loaders_test.py | 49 ++++++++++++++++++++++++++
 2 files changed, 51 insertions(+), 1 deletion(-)

diff --git a/learning_resources/etl/loaders.py b/learning_resources/etl/loaders.py
index d1c6fe01a5..1fe7a9d4b1 100644
--- a/learning_resources/etl/loaders.py
+++ b/learning_resources/etl/loaders.py
@@ -10,6 +10,7 @@
 from django.db.models import Q
 
 from learning_resources.constants import (
+    CONTENT_TYPE_PAGE,
     OCW_COURSE_CONTENT_CATEGORY_MAPPING,
     VIDEO_CONTENT_CATEGORIES,
     LearningResourceDelivery,
@@ -1034,7 +1035,7 @@ def load_learning_materials(
         learning_material_tags = set(
             content_file.content_tags.values_list("name", flat=True)
         ) & set(OCW_COURSE_CONTENT_CATEGORY_MAPPING.keys())
-        if learning_material_tags:
+        if content_file.content_type != CONTENT_TYPE_PAGE and learning_material_tags:
             material_ids.append(
                 load_learning_material(course_run, content_file, learning_material_tags)
             )
diff --git a/learning_resources/etl/loaders_test.py b/learning_resources/etl/loaders_test.py
index 8649bd7c25..ebbc30d4f9 100644
--- a/learning_resources/etl/loaders_test.py
+++ b/learning_resources/etl/loaders_test.py
@@ -12,6 +12,8 @@
 from django.forms.models import model_to_dict
 
 from learning_resources.constants import (
+    CONTENT_TYPE_FILE,
+    CONTENT_TYPE_PAGE,
     CURRENCY_USD,
     Availability,
     LearningResourceDelivery,
@@ -3005,12 +3007,14 @@ def test_load_learning_materials(mocker):
     learning_material_content_file = ContentFileFactory.create(
         run=ocw_course.learning_resource.runs.first(),
         content_tags=[relevant_content_tag],
+        content_type=CONTENT_TYPE_FILE,
     )
 
     other_content_file = ContentFileFactory.create(
         run=ocw_course.learning_resource.runs.first(),
         content_tags=[irrelevant_content_tag],
         direct_learning_resource=no_longer_relevant_resource,
+        content_type=CONTENT_TYPE_FILE,
     )
 
     mock_index = mocker.patch("learning_resources.etl.loaders.update_index")
@@ -3052,6 +3056,51 @@ def test_load_learning_materials(mocker):
     assert no_longer_relevant_resource.published is False
 
 
+@pytest.mark.django_db
+def test_load_learning_materials_demotes_page_content_files(mocker):
+    """
+    Page content files should not be promoted to learning resources.
+    If a page content file was previously promoted (has direct_learning_resource),
+    load_learning_materials should unpublish that resource and clear the link.
+    """
+    ocw = LearningResourcePlatformFactory.create(code=PlatformType.ocw.name)
+    ocw_course = CourseFactory.create(
+        platform=ocw.code,
+        learning_resource__is_course=True,
+    )
+    relevant_content_tag = LearningResourceContentTagFactory.create(
+        name="Programming Assignments"
+    )
+    previously_promoted_resource = LearningResourceFactory.create(published=True)
+
+    page_content_file = ContentFileFactory.create(
+        run=ocw_course.learning_resource.runs.first(),
+        content_tags=[relevant_content_tag],
+        direct_learning_resource=previously_promoted_resource,
+        content_type=CONTENT_TYPE_PAGE,
+    )
+
+    mock_index = mocker.patch("learning_resources.etl.loaders.update_index")
+
+    loaders.load_learning_materials(
+        course_run=ocw_course.learning_resource.runs.first(),
+        content_file_ids=[page_content_file.id],
+    )
+
+    previously_promoted_resource.refresh_from_db()
+    assert previously_promoted_resource.published is False
+
+    page_content_file.refresh_from_db()
+    assert page_content_file.direct_learning_resource is None
+
+    mock_index.assert_called_once_with(
+        previously_promoted_resource, newly_created=False
+    )
+
+    # No learning materials should be linked to the course
+    assert ocw_course.learning_resource.children.count() == 0
+
+
 @pytest.mark.django_db
 @pytest.mark.parametrize("learning_material_exists", [True, False])
 def test_load_learning_material(mocker, learning_material_exists):

From a2d56045523e18437925b4e71cd397a2cbb493de Mon Sep 17 00:00:00 2001
From: Matt Bertrand <mrbertrand@gmail.com>
Date: Tue, 28 Apr 2026 15:00:09 -0400
Subject: [PATCH 06/10] MITxOnline program published status should consider
 include_in_learn_catalog (#3250)

---
 learning_resources/etl/mitxonline.py      |   6 +-
 learning_resources/etl/mitxonline_test.py |  32 ++++++
 test_json/mitxonline_programs.json        | 124 +++++++++++++++++++++-
 3 files changed, 157 insertions(+), 5 deletions(-)

diff --git a/learning_resources/etl/mitxonline.py b/learning_resources/etl/mitxonline.py
index 541dd881cc..f4a69d2c28 100644
--- a/learning_resources/etl/mitxonline.py
+++ b/learning_resources/etl/mitxonline.py
@@ -647,8 +647,10 @@ def transform_programs(programs: list[dict]) -> Iterator[dict]:
             "image": _transform_image(program),
             "availability": program.get("availability"),
             "published": bool(
-                has_product_page and parse_page_attribute(program, "live")
-            ),  # a program is only considered published if it has a page url
+                has_product_page
+                and parse_page_attribute(program, "live")
+                and parse_page_attribute(program, "include_in_learn_catalog")
+            ),
             "format": [Format.asynchronous.name],
             "pace": pace,
             "runs": [run],
diff --git a/learning_resources/etl/mitxonline_test.py b/learning_resources/etl/mitxonline_test.py
index fb80a1cfde..ebbe5320a2 100644
--- a/learning_resources/etl/mitxonline_test.py
+++ b/learning_resources/etl/mitxonline_test.py
@@ -654,6 +654,9 @@ def test_mitxonline_transform_programs(
                 "published": bool(
                     program_data.get("page", {}).get("page_url", None) is not None
                     and program_data.get("page", {}).get("live", None)
+                    and program_data.get("page", {}).get(
+                        "include_in_learn_catalog", False
+                    )
                 ),
                 "url": expected_program_url,
                 "availability": program_data["availability"],
@@ -875,6 +878,35 @@ def test_mitxonline_transform_courses_not_in_catalog(
     assert result[0]["published"] is bool(include_in_learn_catalog)
 
 
+@pytest.mark.parametrize("include_in_learn_catalog", [True, False, None])
+def test_mitxonline_transform_programs_not_in_catalog(
+    mock_mitxonline_programs_data,
+    mock_mitxonline_courses_data,
+    settings,
+    mocker,
+    include_in_learn_catalog,
+):
+    """Program published mirrors bool(include_in_learn_catalog) when other publish conditions are met."""
+    set_up_topics(is_mitx=True)
+    settings.MITX_ONLINE_COURSES_API_URL = "http://localhost/test/courses/api"
+    mock_now = datetime(2023, 1, 1, tzinfo=UTC)
+    mocker.patch("learning_resources.etl.mitxonline.now_in_utc", return_value=mock_now)
+    mocker.patch(
+        "learning_resources.etl.mitxonline._fetch_data",
+        return_value=mock_mitxonline_courses_data["results"],
+    )
+
+    # Use only the first program and set include_in_learn_catalog to True/False/None
+    program = mock_mitxonline_programs_data["results"][0]
+    program["page"]["include_in_learn_catalog"] = include_in_learn_catalog
+    # Ensure all other publish conditions are met
+    program["page"]["page_url"] = "/programs/test-program/"
+    program["page"]["live"] = True
+
+    result = list(transform_programs([program]))
+    assert result[0]["published"] is bool(include_in_learn_catalog)
+
+
 @pytest.mark.django_db
 @pytest.mark.parametrize(
     ("start_dt", "enrollment_dt", "expected_dt"),
diff --git a/test_json/mitxonline_programs.json b/test_json/mitxonline_programs.json
index b24d7aef60..03769d1daa 100644
--- a/test_json/mitxonline_programs.json
+++ b/test_json/mitxonline_programs.json
@@ -1,5 +1,5 @@
 {
-  "count": 9,
+  "count": 2,
   "next": null,
   "previous": null,
   "results": [
@@ -83,7 +83,8 @@
         "page_url": "/programs/program-v1:MITxT+18.03x/",
         "financial_assistance_form_url": "",
         "description": "\u003Cp data-block-key=\"38wzq\"\u003EScientists and engineers understand the world through differential equations. You can too.\u003C/p\u003E",
-        "live": false,
+        "live": true,
+        "include_in_learn_catalog": true,
         "length": "14 weeks",
         "effort": "7 hrs/wk",
         "price": "$175"
@@ -97,7 +98,7 @@
           "name": "Mathematics"
         }
       ],
-      "live": false,
+      "live": true,
       "topics": [
         {
           "name": "Mathematics"
@@ -118,6 +119,123 @@
         { "mode_slug": "verified" },
         { "mode_slug": "audit" }
       ]
+    },
+    {
+      "title": "8.02x Electricity and Magnetism",
+      "readable_id": "program-v1:MITxT+8.02x",
+      "id": 6,
+      "courses": [81, 82, 83],
+      "requirements": {
+        "required": [81, 82, 83],
+        "electives": []
+      },
+      "req_tree": [
+        {
+          "data": {
+            "node_type": "program_root",
+            "operator": null,
+            "operator_value": null,
+            "program": 6,
+            "course": null,
+            "title": "",
+            "elective_flag": false
+          },
+          "id": 46,
+          "children": [
+            {
+              "data": {
+                "node_type": "operator",
+                "operator": "all_of",
+                "operator_value": null,
+                "program": 6,
+                "course": null,
+                "title": "Required Courses",
+                "elective_flag": false
+              },
+              "id": 47,
+              "children": [
+                {
+                  "data": {
+                    "node_type": "course",
+                    "operator": null,
+                    "operator_value": null,
+                    "program": 6,
+                    "course": 81,
+                    "title": null,
+                    "elective_flag": false
+                  },
+                  "id": 48
+                },
+                {
+                  "data": {
+                    "node_type": "course",
+                    "operator": null,
+                    "operator_value": null,
+                    "program": 6,
+                    "course": 82,
+                    "title": null,
+                    "elective_flag": false
+                  },
+                  "id": 49
+                },
+                {
+                  "data": {
+                    "node_type": "course",
+                    "operator": null,
+                    "operator_value": null,
+                    "program": 6,
+                    "course": 83,
+                    "title": null,
+                    "elective_flag": false
+                  },
+                  "id": 50
+                }
+              ]
+            }
+          ]
+        }
+      ],
+      "page": {
+        "feature_image_src": "/static/images/mitx-labs.png",
+        "page_url": "/programs/program-v1:MITxT+8.02x/",
+        "financial_assistance_form_url": "",
+        "description": "\u003Cp data-block-key=\"2f4sq\"\u003EExplore the core ideas of electricity and magnetism through theory and practical examples.\u003C/p\u003E",
+        "live": true,
+        "include_in_learn_catalog": false,
+        "length": "10 weeks",
+        "effort": "6 hrs/wk",
+        "price": "$149"
+      },
+      "min_price": 990,
+      "max_price": 1990,
+      "program_type": "Series",
+      "certificate_type": "Certificate of Completion",
+      "departments": [
+        {
+          "name": "Physics"
+        }
+      ],
+      "live": true,
+      "topics": [
+        {
+          "name": "Physics"
+        }
+      ],
+      "availability": "dated",
+      "start_date": "2025-09-15T00:00:00Z",
+      "end_date": "2025-12-01T00:00:00Z",
+      "enrollment_start": "2025-08-01T00:00:00Z",
+      "enrollment_end": "2025-10-15T00:00:00Z",
+      "duration": "9-10 weeks",
+      "min_weeks": 9,
+      "max_weeks": 10,
+      "time_commitment": "4-6 hrs/wk",
+      "min_weekly_hours": "4",
+      "max_weekly_hours": "6",
+      "enrollment_modes": [
+        { "mode_slug": "verified" },
+        { "mode_slug": "audit" }
+      ]
     }
   ]
 }

From 421d2583f55084a071689a680142c07e0188ff22 Mon Sep 17 00:00:00 2001
From: James Kachel <james@jkachel.com>
Date: Tue, 28 Apr 2026 15:07:16 -0500
Subject: [PATCH 07/10] Add support for dynamically displaying the How You'll
 Learn cards (#3198)

* Rough-in the toggleable HYL cards

* Refactor the HYL section to take the page object and figure out the cards from there; update where this gets called

* finally figure out how to run fmt/lint/typecheck

* Fixing tests

* Fix hasOwnProperty, unknown cast, and React key in HowYoullLearnSection

Agent-Logs-Url: https://github.com/mitodl/mit-learn/sessions/ed6a7a47-f467-48eb-be2a-464691b2fe77

Co-authored-by: jkachel <945611+jkachel@users.noreply.github.com>

* Use explicit === true check for hyl_choice field values

Agent-Logs-Url: https://github.com/mitodl/mit-learn/sessions/ed6a7a47-f467-48eb-be2a-464691b2fe77

Co-authored-by: jkachel <945611+jkachel@users.noreply.github.com>

* Update section component to work with the new version of the API

* Update MITx Online API client

* other place referenced the API client

* fix typing issues

* fmt fix

* fix other unrelated typing issue

* Update frontends/main/src/app-pages/ProductPages/HowYoullLearnSection.tsx

Co-authored-by: Chris Chudzicki <christopher.chudzicki@gmail.com>

---------

Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com>
Co-authored-by: jkachel <945611+jkachel@users.noreply.github.com>
Co-authored-by: Chris Chudzicki <christopher.chudzicki@gmail.com>
---
 frontends/api/package.json                    |  2 +-
 .../test-utils/factories/enrollment.ts        |  6 +-
 .../mitxonline/test-utils/factories/orders.ts |  1 +
 .../mitxonline/test-utils/factories/pages.ts  | 52 +++++++++++
 frontends/main/package.json                   |  2 +-
 .../DashboardDialogs.test.tsx                 |  2 +-
 .../src/app-pages/ProductPages/CoursePage.tsx |  4 +-
 .../ProductPages/HowYoullLearnSection.tsx     | 91 +++++++++++--------
 .../ProductPages/ProgramAsCoursePage.tsx      |  4 +-
 .../app-pages/ProductPages/ProgramPage.tsx    |  4 +-
 yarn.lock                                     | 12 +--
 11 files changed, 124 insertions(+), 56 deletions(-)

diff --git a/frontends/api/package.json b/frontends/api/package.json
index 2bbe941af1..0745ec8f54 100644
--- a/frontends/api/package.json
+++ b/frontends/api/package.json
@@ -29,7 +29,7 @@
     "ol-test-utilities": "0.0.0"
   },
   "dependencies": {
-    "@mitodl/mitxonline-api-axios": "^2026.3.26",
+    "@mitodl/mitxonline-api-axios": "^2026.4.23",
     "@tanstack/react-query": "^5.66.0",
     "axios": "^1.12.2",
     "tiny-invariant": "^1.3.3"
diff --git a/frontends/api/src/mitxonline/test-utils/factories/enrollment.ts b/frontends/api/src/mitxonline/test-utils/factories/enrollment.ts
index 1357679be5..b3d9baca88 100644
--- a/frontends/api/src/mitxonline/test-utils/factories/enrollment.ts
+++ b/frontends/api/src/mitxonline/test-utils/factories/enrollment.ts
@@ -88,7 +88,11 @@ const programEnrollmentV3: PartialFactory<V3UserProgramEnrollment> = (
           link: `/certificate/program/${faker.string.uuid()}/`,
         }
       : null,
-    enrollment_mode: faker.helpers.arrayElement(["audit", "verified", null]),
+    enrollment_mode: faker.helpers.arrayElement([
+      "audit",
+      "verified",
+      undefined,
+    ]),
     program: program,
   }
   return mergeOverrides<V3UserProgramEnrollment>(defaults, overrides)
diff --git a/frontends/api/src/mitxonline/test-utils/factories/orders.ts b/frontends/api/src/mitxonline/test-utils/factories/orders.ts
index dbab4806d3..89e5b66d9d 100644
--- a/frontends/api/src/mitxonline/test-utils/factories/orders.ts
+++ b/frontends/api/src/mitxonline/test-utils/factories/orders.ts
@@ -13,6 +13,7 @@ const transactionLine = (
   total_paid: faker.commerce.price({ min: 50, max: 500 }),
   discount: "0.00",
   price: faker.commerce.price({ min: 50, max: 500 }),
+  content_type: "",
   ...overrides,
 })
 
diff --git a/frontends/api/src/mitxonline/test-utils/factories/pages.ts b/frontends/api/src/mitxonline/test-utils/factories/pages.ts
index 6cba1acc51..e14b61a6ec 100644
--- a/frontends/api/src/mitxonline/test-utils/factories/pages.ts
+++ b/frontends/api/src/mitxonline/test-utils/factories/pages.ts
@@ -164,6 +164,32 @@ const coursePageItem: PartialFactory<CoursePageItem> = (override) => {
     ],
     video_url: faker.internet.url(),
     what_you_learn: makeHTMLList(5),
+    how_youll_learn: [
+      {
+        key: "learn_by_doing",
+        icon: "IconComputerBulb",
+        title: "Learn by doing",
+        text: "Apply what you learn with interactive exercises, projects, and real-world case studies.",
+      },
+      {
+        key: "realworld_learning",
+        icon: "IconConnectedPeople",
+        title: "Real-world learning",
+        text: "Engage with real-world scenarios and examples to understand how concepts apply in practice.",
+      },
+      {
+        key: "learn_from_others",
+        icon: "IconConnectedPeople",
+        title: "Learn from others",
+        text: "Collaborate with peers and learn from their perspectives through group projects and discussions.",
+      },
+      {
+        key: "learn_on_demand",
+        icon: "IconComputerBulb",
+        title: "Learn on demand",
+        text: "Access course materials anytime, anywhere, and learn at your own pace.",
+      },
+    ],
   }
   return mergeOverrides<CoursePageItem>(defaults, override)
 }
@@ -215,6 +241,32 @@ const programPageItem: PartialFactory<ProgramPageItem> = (override) => {
     faq_url: faker.internet.url(),
     about: makeHTMLParagraph(3),
     what_you_learn: makeHTMLList(5),
+    how_youll_learn: [
+      {
+        key: "learn_by_doing",
+        icon: "IconComputerBulb",
+        title: "Learn by doing",
+        text: "Apply what you learn with interactive exercises, projects, and real-world case studies.",
+      },
+      {
+        key: "realworld_learning",
+        icon: "IconConnectedPeople",
+        title: "Real-world learning",
+        text: "Engage with real-world scenarios and examples to understand how concepts apply in practice.",
+      },
+      {
+        key: "learn_from_others",
+        icon: "IconConnectedPeople",
+        title: "Learn from others",
+        text: "Collaborate with peers and learn from their perspectives through group projects and discussions.",
+      },
+      {
+        key: "learn_on_demand",
+        icon: "IconComputerBulb",
+        title: "Learn on demand",
+        text: "Access course materials anytime, anywhere, and learn at your own pace.",
+      },
+    ],
     feature_image: featureImage(),
     video_url: faker.datatype.boolean() ? faker.internet.url() : null,
     faculty_section_title: "Meet your instructors",
diff --git a/frontends/main/package.json b/frontends/main/package.json
index fe1573debd..08db6eefc2 100644
--- a/frontends/main/package.json
+++ b/frontends/main/package.json
@@ -14,7 +14,7 @@
     "@emotion/styled": "^11.11.0",
     "@floating-ui/react": "^0.27.16",
     "@mitodl/course-search-utils": "^3.5.2",
-    "@mitodl/mitxonline-api-axios": "^2026.3.26",
+    "@mitodl/mitxonline-api-axios": "^2026.4.23",
     "@mitodl/smoot-design": "^6.24.0",
     "@mui/material": "^6.4.5",
     "@mui/material-nextjs": "^6.4.3",
diff --git a/frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/DashboardDialogs.test.tsx b/frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/DashboardDialogs.test.tsx
index 93687b1aff..db06027cb0 100644
--- a/frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/DashboardDialogs.test.tsx
+++ b/frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/DashboardDialogs.test.tsx
@@ -157,7 +157,7 @@ describe("UnenrollProgramDialog", () => {
 
     const programEnrollment =
       mitxonline.factories.enrollment.programEnrollmentV3({
-        enrollment_mode: enrollmentMode,
+        enrollment_mode: enrollmentMode ? enrollmentMode : undefined,
         program: { display_mode: displayMode } as never,
       })
 
diff --git a/frontends/main/src/app-pages/ProductPages/CoursePage.tsx b/frontends/main/src/app-pages/ProductPages/CoursePage.tsx
index d814ffbb86..0d64142ebf 100644
--- a/frontends/main/src/app-pages/ProductPages/CoursePage.tsx
+++ b/frontends/main/src/app-pages/ProductPages/CoursePage.tsx
@@ -16,7 +16,7 @@ import RawHTML from "./RawHTML"
 import AboutSection from "./AboutSection"
 import ProductPageTemplate from "./ProductPageTemplate"
 import WhatYoullLearnSection from "./WhatYoullLearnSection"
-import HowYoullLearnSection, { DEFAULT_HOW_DATA } from "./HowYoullLearnSection"
+import HowYoullLearnSection from "./HowYoullLearnSection"
 import { DEFAULT_RESOURCE_IMG } from "ol-utilities"
 import { isVerifiedEnrollmentMode } from "@/common/mitxonline"
 import { useFeatureFlagsLoaded } from "@/common/useFeatureFlagsLoaded"
@@ -98,7 +98,7 @@ const CoursePage: React.FC<CoursePageProps> = ({ readableId }) => {
       {page.what_you_learn ? (
         <WhatYoullLearnSection html={page.what_you_learn} />
       ) : null}
-      <HowYoullLearnSection data={DEFAULT_HOW_DATA} />
+      <HowYoullLearnSection page={page} />
       {page.prerequisites ? (
         <PrerequisitesSection aria-labelledby={HeadingIds.Prereqs}>
           <Typography variant="h4" component="h2" id={HeadingIds.Prereqs}>
diff --git a/frontends/main/src/app-pages/ProductPages/HowYoullLearnSection.tsx b/frontends/main/src/app-pages/ProductPages/HowYoullLearnSection.tsx
index a87adf9c72..4129b916f2 100644
--- a/frontends/main/src/app-pages/ProductPages/HowYoullLearnSection.tsx
+++ b/frontends/main/src/app-pages/ProductPages/HowYoullLearnSection.tsx
@@ -9,6 +9,11 @@ import IconCertificate from "@/public/images/product/icon_certificate.png"
 import IconComputerBulb from "@/public/images/product/icon_computer_lightbulb.png"
 import IconConnectedPeople from "@/public/images/product/icon_connected_people.png"
 
+import type {
+  CoursePageItem,
+  ProgramPageItem,
+} from "@mitodl/mitxonline-api-axios/v2"
+
 const HowYoullLearnRoot = styled.section(({ theme }) => ({
   display: "flex",
   flexDirection: "column",
@@ -49,7 +54,7 @@ const HowYoullLearnHeader = styled.div({
   alignItems: "center",
 })
 
-const HowYoullLearnIcon = styled(Image)({
+const HowYoullLearnIconImage = styled(Image)({
   width: "80px",
   height: "50px",
   flexShrink: 0,
@@ -69,64 +74,70 @@ const HowYoullLearnDescription = styled.p(({ theme }) => ({
   },
 }))
 
-type HowYoullLearnItemData = {
-  icon: typeof IconComputerBulb
-  title: string
-  text: string
-}
+const HowYoullLearnIcon: React.FC<{
+  src: string
+  width: number
+  height: number
+  alt: string
+}> = ({ src, width, height, alt }) => {
+  let iconSrc: typeof IconBrains | null = null
+  switch (src) {
+    case "IconBrains":
+      iconSrc = IconBrains
+      break
+    case "IconCertificate":
+      iconSrc = IconCertificate
+      break
+    case "IconComputerBulb":
+      iconSrc = IconComputerBulb
+      break
+    case "IconConnectedPeople":
+      iconSrc = IconConnectedPeople
+      break
+    default:
+      console.warn(`Unknown how_youll_learn icon: ${src}`)
+  }
 
-// Placeholder data — will be replaced by API-driven content.
-const DEFAULT_HOW_DATA: HowYoullLearnItemData[] = [
-  {
-    icon: IconConnectedPeople,
-    title: "Real-World Learning",
-    text: "Learn from MIT faculty and experts who ground their teaching in real-world cases rather than mathematical models, making the material approachable for all.",
-  },
-  {
-    icon: IconBrains,
-    title: "Practical Application",
-    text: "Apply your new knowledge with hands-on, practical exercises drawn from healthcare, sports, finance, sustainability, and more.",
-  },
-  {
-    icon: IconComputerBulb,
-    title: "AI-Enabled Support",
-    text: "Deepen your understanding of the course material and get help on assignments from AskTIM, the AI assistant built by MIT researchers.",
-  },
-  {
-    icon: IconCertificate,
-    title: "Stackable Credentials",
-    text: "Earn an MIT Open Learning certificate at each milestone—module, course, and program—demonstrating your AI expertise. Available in paid courses only.",
-  },
-]
+  return (
+    iconSrc && (
+      <HowYoullLearnIconImage
+        src={iconSrc}
+        width={width}
+        height={height}
+        alt={alt}
+      />
+    )
+  )
+}
 
 const HowYoullLearnSection: React.FC<{
-  data: HowYoullLearnItemData[]
-}> = ({ data }) => {
-  return (
+  page: CoursePageItem | ProgramPageItem
+}> = ({ page }) => {
+  const filteredOptions = page.how_youll_learn ?? []
+
+  return filteredOptions.length > 0 ? (
     <HowYoullLearnRoot aria-labelledby={HeadingIds.How}>
       <Typography variant="h4" component="h2" id={HeadingIds.How}>
         How you'll learn
       </Typography>
       <HowYoullLearnGrid>
-        {data.map((item, index) => (
-          <HowYoullLearnItem key={index}>
+        {filteredOptions.map((option) => (
+          <HowYoullLearnItem key={option.key}>
             <HowYoullLearnHeader>
               <HowYoullLearnIcon
-                src={item.icon}
+                src={option.icon}
                 width={80}
                 height={50}
                 alt=""
               />
-              <HowYoullLearnTitle>{item.title}</HowYoullLearnTitle>
+              <HowYoullLearnTitle>{option.title}</HowYoullLearnTitle>
             </HowYoullLearnHeader>
-            <HowYoullLearnDescription>{item.text}</HowYoullLearnDescription>
+            <HowYoullLearnDescription>{option.text}</HowYoullLearnDescription>
           </HowYoullLearnItem>
         ))}
       </HowYoullLearnGrid>
     </HowYoullLearnRoot>
-  )
+  ) : null
 }
 
 export default HowYoullLearnSection
-export { DEFAULT_HOW_DATA }
-export type { HowYoullLearnItemData }
diff --git a/frontends/main/src/app-pages/ProductPages/ProgramAsCoursePage.tsx b/frontends/main/src/app-pages/ProductPages/ProgramAsCoursePage.tsx
index 24cd3b1059..4bc11cd387 100644
--- a/frontends/main/src/app-pages/ProductPages/ProgramAsCoursePage.tsx
+++ b/frontends/main/src/app-pages/ProductPages/ProgramAsCoursePage.tsx
@@ -21,7 +21,7 @@ import UnstyledRawHTML from "@/components/UnstyledRawHTML/UnstyledRawHTML"
 import AboutSection from "./AboutSection"
 import ProductPageTemplate from "./ProductPageTemplate"
 import WhatYoullLearnSection from "./WhatYoullLearnSection"
-import HowYoullLearnSection, { DEFAULT_HOW_DATA } from "./HowYoullLearnSection"
+import HowYoullLearnSection from "./HowYoullLearnSection"
 import { DEFAULT_RESOURCE_IMG, pluralize } from "ol-utilities"
 import { useFeatureFlagsLoaded } from "@/common/useFeatureFlagsLoaded"
 import ProgramAsCourseInfoBox from "./InfoBoxProgramAsCourse"
@@ -312,7 +312,7 @@ const ProgramAsCoursePage: React.FC<ProgramAsCoursePageProps> = ({
         childPrograms={childPrograms.data?.results}
         isLoading={dataLoading}
       />
-      <HowYoullLearnSection data={DEFAULT_HOW_DATA} />
+      <HowYoullLearnSection page={page} />
       {page.prerequisites ? (
         <PrerequisitesSection aria-labelledby={HeadingIds.Prereqs}>
           <Typography variant="h4" component="h2" id={HeadingIds.Prereqs}>
diff --git a/frontends/main/src/app-pages/ProductPages/ProgramPage.tsx b/frontends/main/src/app-pages/ProductPages/ProgramPage.tsx
index 4d380f7f10..946c9e4c4f 100644
--- a/frontends/main/src/app-pages/ProductPages/ProgramPage.tsx
+++ b/frontends/main/src/app-pages/ProductPages/ProgramPage.tsx
@@ -21,7 +21,7 @@ import UnstyledRawHTML from "@/components/UnstyledRawHTML/UnstyledRawHTML"
 import AboutSection from "./AboutSection"
 import ProductPageTemplate from "./ProductPageTemplate"
 import WhatYoullLearnSection from "./WhatYoullLearnSection"
-import HowYoullLearnSection, { DEFAULT_HOW_DATA } from "./HowYoullLearnSection"
+import HowYoullLearnSection from "./HowYoullLearnSection"
 import type {
   V2ProgramDetail,
   CourseWithCourseRunsSerializerV2,
@@ -311,7 +311,7 @@ const ProgramPage: React.FC<ProgramPageProps> = ({ readableId }) => {
         // Use skeleton as fallback for loading OR error
         isLoading={dataLoading}
       />
-      <HowYoullLearnSection data={DEFAULT_HOW_DATA} />
+      <HowYoullLearnSection page={page} />
       {page.prerequisites ? (
         <PrerequisitesSection aria-labelledby={HeadingIds.Prereqs}>
           <Typography variant="h4" component="h2" id={HeadingIds.Prereqs}>
diff --git a/yarn.lock b/yarn.lock
index 0ccbbdd1d4..538f02720b 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3332,13 +3332,13 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@mitodl/mitxonline-api-axios@npm:^2026.3.26":
-  version: 2026.3.26
-  resolution: "@mitodl/mitxonline-api-axios@npm:2026.3.26"
+"@mitodl/mitxonline-api-axios@npm:^2026.4.23":
+  version: 2026.4.23
+  resolution: "@mitodl/mitxonline-api-axios@npm:2026.4.23"
   dependencies:
     "@types/node": "npm:^20.11.19"
     axios: "npm:^1.6.5"
-  checksum: 10/66d36280b62505ea4510db2376cf1887ade17286aa17b840d120dc88a48817097e9d194cd2a54c3479535d457031883f6b420995ee8909d9afb3debb3b520ab9
+  checksum: 10/9580cb496742649450c0567b8b4be6ad19082af9d3ea1c2cd1f9dcec1c87746c8370c8af984b5012660d6e9a52f36dded227115da635a8efb7634df952499a25
   languageName: node
   linkType: hard
 
@@ -8939,7 +8939,7 @@ __metadata:
   resolution: "api@workspace:frontends/api"
   dependencies:
     "@faker-js/faker": "npm:^10.0.0"
-    "@mitodl/mitxonline-api-axios": "npm:^2026.3.26"
+    "@mitodl/mitxonline-api-axios": "npm:^2026.4.23"
     "@tanstack/react-query": "npm:^5.66.0"
     "@testing-library/react": "npm:^16.3.0"
     axios: "npm:^1.12.2"
@@ -16184,7 +16184,7 @@ __metadata:
     "@floating-ui/react": "npm:^0.27.16"
     "@happy-dom/jest-environment": "npm:^20.1.0"
     "@mitodl/course-search-utils": "npm:^3.5.2"
-    "@mitodl/mitxonline-api-axios": "npm:^2026.3.26"
+    "@mitodl/mitxonline-api-axios": "npm:^2026.4.23"
     "@mitodl/smoot-design": "npm:^6.24.0"
     "@mui/material": "npm:^6.4.5"
     "@mui/material-nextjs": "npm:^6.4.3"

From fec4f8f96c0fdeae54bbc8d9bcdd8be3c7441d44 Mon Sep 17 00:00:00 2001
From: Ahtesham Quraish <ahtesham-quraish@users.noreply.github.com>
Date: Wed, 29 Apr 2026 13:46:37 +0500
Subject: [PATCH 08/10] fix: improvements in podcast player and removal of
 video player from drawer  (#3241)

* fix: improvements in video and podcast series page




---------


Co-authored-by: Ahtesham Quraish <ahtesham.quraish@192.168.10.13>
---
 .../PodcastPage/PodcastDetailPage.test.tsx    |  1 +
 .../PodcastPage/PodcastDetailPage.tsx         | 45 ++++++++++++------
 .../app-pages/PodcastPage/PodcastPlayer.tsx   | 29 ++++++++----
 frontends/main/src/app/styled.tsx             |  5 +-
 frontends/main/src/common/urls.ts             |  3 ++
 .../CallToActionSection.test.tsx              |  4 +-
 .../CallToActionSection.tsx                   | 46 ++++++++++---------
 .../LearningResourceExpanded.test.tsx         | 15 ------
 .../components/Breadcrumbs/Breadcrumbs.tsx    |  1 +
 frontends/ol-components/src/index.ts          |  3 ++
 10 files changed, 87 insertions(+), 65 deletions(-)

diff --git a/frontends/main/src/app-pages/PodcastPage/PodcastDetailPage.test.tsx b/frontends/main/src/app-pages/PodcastPage/PodcastDetailPage.test.tsx
index fa52961957..e982f30fdd 100644
--- a/frontends/main/src/app-pages/PodcastPage/PodcastDetailPage.test.tsx
+++ b/frontends/main/src/app-pages/PodcastPage/PodcastDetailPage.test.tsx
@@ -23,6 +23,7 @@ jest.mock(
 
 jest.mock("./PodcastPlayer", () => ({
   __esModule: true,
+  PLAYER_HEIGHT: { desktop: 104, mobile: 220 },
   default: jest.fn(
     ({ track }: { track: { title: string; podcastName: string } }) => (
       <div data-testid="podcast-player">
diff --git a/frontends/main/src/app-pages/PodcastPage/PodcastDetailPage.tsx b/frontends/main/src/app-pages/PodcastPage/PodcastDetailPage.tsx
index 713b87e218..0b1bcc9810 100644
--- a/frontends/main/src/app-pages/PodcastPage/PodcastDetailPage.tsx
+++ b/frontends/main/src/app-pages/PodcastPage/PodcastDetailPage.tsx
@@ -1,10 +1,11 @@
 "use client"
 
-import React, { useState } from "react"
-import { Breadcrumbs, Typography, styled } from "ol-components"
-import { ButtonLink, Button, ActionButton } from "@mitodl/smoot-design"
+import React, { useState, useEffect } from "react"
+import { Breadcrumbs, Typography, styled, useMediaQuery } from "ol-components"
+import type { Theme } from "ol-components"
+import { Button, ActionButton } from "@mitodl/smoot-design"
 import { RiPlayFill } from "@remixicon/react"
-import PodcastPlayer from "./PodcastPlayer"
+import PodcastPlayer, { PLAYER_HEIGHT } from "./PodcastPlayer"
 import type { PodcastTrack } from "./PodcastPlayer"
 import {
   useLearningResourcesDetail,
@@ -205,7 +206,7 @@ const EpisodeTitleLink = styled.span(({ theme }) => ({
   lineHeight: "26px",
 }))
 
-const StyledButton = styled(ButtonLink)(({ theme }) => ({
+const StyledButton = styled(Button)(({ theme }) => ({
   [theme.breakpoints.down("sm")]: {
     width: "100%",
   },
@@ -361,6 +362,7 @@ export const PodcastDetailPage: React.FC<PodcastDetailPageProps> = ({
   )
   const flagsLoaded = useFeatureFlagsLoaded()
   const id = Number(podcastId)
+  const isMobile = useMediaQuery((theme: Theme) => theme.breakpoints.down("sm"))
   const [playingEpisode, setPlayingEpisode] = useState<LearningResource | null>(
     null,
   )
@@ -411,8 +413,6 @@ export const PodcastDetailPage: React.FC<PodcastDetailPageProps> = ({
     ? formatDate(latestEpisode.last_modified, "MMM D")
     : null
 
-  const subscribeUrl = podcast?.apple_podcasts_url ?? podcast?.rss_url
-
   const getEpisodeAudioUrl = (episode: LearningResource): string | null => {
     if (episode.resource_type !== "podcast_episode") return null
 
@@ -428,9 +428,6 @@ export const PodcastDetailPage: React.FC<PodcastDetailPageProps> = ({
     setPlayingEpisode(episode)
   }
 
-  if (!showPodcastDetailPage) {
-    return flagsLoaded ? notFound() : null
-  }
   const currentTrack: PodcastTrack | null = playingEpisode
     ? (() => {
         const audioUrl = getEpisodeAudioUrl(playingEpisode)
@@ -444,6 +441,27 @@ export const PodcastDetailPage: React.FC<PodcastDetailPageProps> = ({
       })()
     : null
 
+  // When the player is active, shrink the page layout so the footer is
+  // visible above the fixed player bar.
+  useEffect(() => {
+    const root = document.documentElement
+
+    if (currentTrack) {
+      const height = isMobile ? PLAYER_HEIGHT.mobile : PLAYER_HEIGHT.desktop
+      root.style.setProperty("--mit-player-height", `${height}px`)
+    } else {
+      root.style.removeProperty("--mit-player-height")
+    }
+
+    return () => {
+      root.style.removeProperty("--mit-player-height")
+    }
+  }, [currentTrack, isMobile])
+
+  if (!showPodcastDetailPage) {
+    return flagsLoaded ? notFound() : null
+  }
+
   return (
     <>
       <PageSection>
@@ -495,13 +513,12 @@ export const PodcastDetailPage: React.FC<PodcastDetailPageProps> = ({
                     </LatestEpisodeLine>
                   )}
 
-                  {subscribeUrl && (
+                  {latestEpisode && (
                     <StyledButton
-                      href={subscribeUrl}
-                      target="_blank"
-                      rel="noopener noreferrer"
+                      onClick={() => handlePlayClick(latestEpisode)}
                       variant="primary"
                       startIcon={<RiPlayFill />}
+                      disabled={!getEpisodeAudioUrl(latestEpisode)}
                     >
                       Play Latest Episode
                     </StyledButton>
diff --git a/frontends/main/src/app-pages/PodcastPage/PodcastPlayer.tsx b/frontends/main/src/app-pages/PodcastPage/PodcastPlayer.tsx
index 70a2a30e1b..ec5cd6597b 100644
--- a/frontends/main/src/app-pages/PodcastPage/PodcastPlayer.tsx
+++ b/frontends/main/src/app-pages/PodcastPage/PodcastPlayer.tsx
@@ -12,6 +12,9 @@ import {
 
 // ─── Types ────────────────────────────────────────────────────────────────────
 
+/** Height of the fixed player bar. Used by the page to add compensating bottom padding. */
+export const PLAYER_HEIGHT = { desktop: 104, mobile: 220 }
+
 export type PodcastTrack = {
   audioUrl: string
   title: string
@@ -33,12 +36,12 @@ const PlayerShell = styled.div(({ theme }) => ({
   right: 0,
   zIndex: theme.zIndex.appBar + 10,
   display: "grid",
-  gridTemplateColumns: "220px 1px auto minmax(0, 1fr) auto auto",
+  gridTemplateColumns: "390px 1px auto minmax(0, 1fr) auto auto",
   gridTemplateAreas: '"track divider controls progress speed close"',
   alignItems: "center",
   gap: "24px",
-  padding: "16px 32px",
-  background: "linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%)",
+  padding: "32px",
+  background: theme.custom.colors.white,
   borderTop: `2px solid ${theme.custom.colors.mitRed}`,
   boxShadow: "0 -4px 16px rgba(0,0,0,0.12)",
   [theme.breakpoints.down("sm")]: {
@@ -116,8 +119,8 @@ const PlayPauseButton = styled.button(({ theme }) => ({
   color: theme.custom.colors.mitRed,
   "&:hover": { opacity: 0.8 },
   "& svg": {
-    width: "40px",
-    height: "40px",
+    width: "64px",
+    height: "64px",
   },
   [theme.breakpoints.down("sm")]: {
     "& svg": {
@@ -139,6 +142,8 @@ const TrackTitle = styled(Typography)(({ theme }) => ({
   overflow: "hidden",
   textOverflow: "ellipsis",
   whiteSpace: "nowrap",
+  fontSize: "18px",
+  lineHeight: "26px",
   color: theme.custom.colors.black,
   [theme.breakpoints.down("sm")]: {
     display: "-webkit-box",
@@ -148,6 +153,10 @@ const TrackTitle = styled(Typography)(({ theme }) => ({
   },
 }))
 
+const PodcastName = styled(Typography)(({ theme }) => ({
+  color: theme.custom.colors.silverGrayDark,
+}))
+
 const ProgressWrapper = styled.div(({ theme }) => ({
   gridArea: "progress",
   display: "flex",
@@ -164,8 +173,8 @@ const ProgressRange = styled.input<{ percent: number }>(
     appearance: "none",
     WebkitAppearance: "none",
     flex: 1,
-    height: "6px",
-    borderRadius: "3px",
+    height: "12px",
+    borderRadius: "6px",
     cursor: "pointer",
     outline: "none",
     border: "none",
@@ -196,7 +205,7 @@ const SpeedButton = styled.button(({ theme }) => ({
   border: `1px solid ${theme.custom.colors.silverGrayLight}`,
   backgroundColor: theme.custom.colors.lightGray1,
   borderRadius: "4px",
-  padding: "2px 8px",
+  padding: "4px 12px",
   cursor: "pointer",
   ...theme.typography.body3,
   color: theme.custom.colors.darkGray2,
@@ -367,9 +376,9 @@ const PodcastPlayer = ({
 
       <PlayerShell>
         <TrackInfo>
-          <Typography variant="body3" sx={{ color: "text.secondary" }}>
+          <PodcastName variant="body1" sx={{ color: "text.secondary" }}>
             {track.podcastName}
-          </Typography>
+          </PodcastName>
           <TrackTitle variant="subtitle2">{track.title}</TrackTitle>
         </TrackInfo>
 
diff --git a/frontends/main/src/app/styled.tsx b/frontends/main/src/app/styled.tsx
index fe5143a9bb..1799b686fb 100644
--- a/frontends/main/src/app/styled.tsx
+++ b/frontends/main/src/app/styled.tsx
@@ -11,11 +11,12 @@ import { styled, HEADER_HEIGHT, HEADER_HEIGHT_MD } from "ol-components"
 export const PageWrapper = styled.div(({ theme }) => ({
   display: "flex",
   flexDirection: "column",
-  height: `calc(100vh - ${HEADER_HEIGHT}px)`,
+  minHeight: `calc(100vh - ${HEADER_HEIGHT}px)`,
   marginTop: HEADER_HEIGHT,
+  paddingBottom: "var(--mit-player-height, 0px)",
   [theme.breakpoints.down("md")]: {
     marginTop: HEADER_HEIGHT_MD,
-    height: `calc(100vh - ${HEADER_HEIGHT_MD}px)`,
+    minHeight: `calc(100vh - ${HEADER_HEIGHT_MD}px)`,
   },
 }))
 
diff --git a/frontends/main/src/common/urls.ts b/frontends/main/src/common/urls.ts
index c4ba42b412..815eec1462 100644
--- a/frontends/main/src/common/urls.ts
+++ b/frontends/main/src/common/urls.ts
@@ -221,6 +221,9 @@ export const coursePageView = (readableId: string) =>
 export const VIDEO_PLAYLIST_PAGE_VIEW = "/video-playlist/[id]"
 export const videoPlaylistPageView = (id: string) =>
   generatePath(VIDEO_PLAYLIST_PAGE_VIEW, { id })
+export const PODCAST_PAGE_VIEW = "/podcast/[id]"
+export const podcastPageView = (id: string) =>
+  generatePath(PODCAST_PAGE_VIEW, { id })
 export const VIDEO_DETAIL_PAGE_VIEW = "/video-playlist/detail/[videoId]"
 export const videoDetailPageView = (videoId: number, playlistId: number) => {
   const params = new URLSearchParams({ playlist: String(playlistId) })
diff --git a/frontends/main/src/page-components/LearningResourceExpanded/CallToActionSection.test.tsx b/frontends/main/src/page-components/LearningResourceExpanded/CallToActionSection.test.tsx
index cceeea53e2..350af37be6 100644
--- a/frontends/main/src/page-components/LearningResourceExpanded/CallToActionSection.test.tsx
+++ b/frontends/main/src/page-components/LearningResourceExpanded/CallToActionSection.test.tsx
@@ -54,7 +54,7 @@ describe("CallToActionSection", () => {
         resourceType: ResourceTypeEnum.Video,
         platform: PlatformEnum.Youtube,
         resourceCategory: "Lecture Video",
-        expectedText: "Learn More",
+        expectedText: "Watch Video",
       },
       {
         resourceType: ResourceTypeEnum.Video,
@@ -66,7 +66,7 @@ describe("CallToActionSection", () => {
         resourceType: ResourceTypeEnum.VideoPlaylist,
         platform: PlatformEnum.Youtube,
         resourceCategory: "Video Playlist",
-        expectedText: "Learn More",
+        expectedText: "Watch Video",
       },
       {
         resourceType: ResourceTypeEnum.Podcast,
diff --git a/frontends/main/src/page-components/LearningResourceExpanded/CallToActionSection.tsx b/frontends/main/src/page-components/LearningResourceExpanded/CallToActionSection.tsx
index dcbbcd5e89..e931fe7a11 100644
--- a/frontends/main/src/page-components/LearningResourceExpanded/CallToActionSection.tsx
+++ b/frontends/main/src/page-components/LearningResourceExpanded/CallToActionSection.tsx
@@ -21,17 +21,16 @@ import type { LearningResource } from "api"
 import {
   RiBookmarkFill,
   RiBookmarkLine,
-  RiExternalLinkLine,
   RiFacebookFill,
   RiLink,
   RiLinkedinFill,
+  RiExternalLinkLine,
   RiMenuAddLine,
   RiShareLine,
   RiTwitterXLine,
 } from "@remixicon/react"
 import type { User } from "api/hooks/user"
 import { PostHogEvents } from "@/common/constants"
-import VideoFrame from "./VideoFrame"
 import { kebabCase } from "lodash"
 import {
   FACEBOOK_SHARE_BASE_URL,
@@ -41,6 +40,7 @@ import {
   programPageView,
   videoDetailPageView,
   videoPlaylistPageView,
+  podcastPageView,
 } from "@/common/urls"
 import { DisplayModeEnum } from "@mitodl/mitxonline-api-axios/v2"
 import { FeatureFlags } from "@/common/feature_flags"
@@ -213,22 +213,7 @@ const ImageSection: React.FC<{
   config: ImageConfig
 }> = ({ resource, config }) => {
   const aspect = config.width / config.height
-  const youtubeId =
-    resource?.resource_type === "video"
-      ? resource.content_files?.[0]?.youtube_id
-      : null
-  const youtubeUrl = youtubeId
-    ? `https://www.youtube.com/watch?v=${youtubeId}`
-    : resource?.resource_type === "video" &&
-        resource?.platform?.code === PlatformEnum.Youtube
-      ? resource.url
-      : null
-
-  if (resource && youtubeUrl) {
-    return (
-      <VideoFrame src={youtubeUrl} title={resource.title} aspect={aspect} />
-    )
-  } else if (resource) {
+  if (resource) {
     const imageUrl =
       resource.image?.url ||
       resourceContentFilesImageSrc(resource) ||
@@ -272,12 +257,13 @@ const getCallToActionText = (resource: LearningResource): string => {
   const listenToPodcast = "Listen to Podcast"
   const viewArticle = "View Article"
   const learnMore = "Learn More"
+  const watchVideos = "Watch Video"
   const callsToAction = {
     [ResourceTypeEnum.Course]: learnMore,
     [ResourceTypeEnum.Program]: learnMore,
     [ResourceTypeEnum.LearningPath]: learnMore,
-    [ResourceTypeEnum.Video]: learnMore,
-    [ResourceTypeEnum.VideoPlaylist]: learnMore,
+    [ResourceTypeEnum.Video]: watchVideos,
+    [ResourceTypeEnum.VideoPlaylist]: watchVideos,
     [ResourceTypeEnum.Podcast]: listenToPodcast,
     [ResourceTypeEnum.PodcastEpisode]: listenToPodcast,
     [ResourceTypeEnum.Document]: learnMore,
@@ -325,7 +311,12 @@ const getResourceUrl = (
   {
     mitxonlineProductPages,
     showVideoPlaylistPage,
-  }: { mitxonlineProductPages?: boolean; showVideoPlaylistPage?: boolean },
+    showPodcastPage,
+  }: {
+    mitxonlineProductPages?: boolean
+    showVideoPlaylistPage?: boolean
+    showPodcastPage?: boolean
+  },
 ) => {
   if (
     mitxonlineProductPages &&
@@ -361,6 +352,12 @@ const getResourceUrl = (
       return videoDetailPageView(resource.id, Number(resource.playlists[0]))
     }
   }
+
+  if (showPodcastPage) {
+    if (resource.resource_type === ResourceTypeEnum.Podcast) {
+      return podcastPageView(resource.id.toString())
+    }
+  }
   return resource.url
 }
 
@@ -394,6 +391,7 @@ const CallToActionSection = ({
   const showVideoPlaylistPage = useFeatureFlagEnabled(
     FeatureFlags.VideoPlaylistPage,
   )
+  const showPodcastPage = useFeatureFlagEnabled(FeatureFlags.PodcastDetailPage)
 
   if (hide) {
     return null
@@ -420,7 +418,11 @@ const CallToActionSection = ({
   const shareLabel = "Share"
   const socialIconSize = 18
   const url = appendUtmParams(
-    getResourceUrl(resource, { mitxonlineProductPages, showVideoPlaylistPage }),
+    getResourceUrl(resource, {
+      mitxonlineProductPages,
+      showVideoPlaylistPage,
+      showPodcastPage,
+    }),
     resource.title,
   )
 
diff --git a/frontends/main/src/page-components/LearningResourceExpanded/LearningResourceExpanded.test.tsx b/frontends/main/src/page-components/LearningResourceExpanded/LearningResourceExpanded.test.tsx
index 3c71a76a93..a4cf4988d2 100644
--- a/frontends/main/src/page-components/LearningResourceExpanded/LearningResourceExpanded.test.tsx
+++ b/frontends/main/src/page-components/LearningResourceExpanded/LearningResourceExpanded.test.tsx
@@ -104,21 +104,6 @@ describe("Learning Resource Expanded", () => {
     },
   )
 
-  test("Renders card and title for youtube videos", () => {
-    const resource = factories.learningResources.resource({
-      resource_type: ResourceTypeEnum.Video,
-      platform: { code: "youtube" },
-    })
-
-    setup({ resource })
-
-    const embedlyCard = screen.getByTestId("embedly-card")
-    invariant(embedlyCard)
-    expect(embedlyCard).toHaveAttribute("href", resource.url)
-
-    screen.getByText(resource.title)
-  })
-
   test("Sets lang attribute on title and description", () => {
     const resource = factories.learningResources.resource({
       resource_type: ResourceTypeEnum.Course,
diff --git a/frontends/ol-components/src/components/Breadcrumbs/Breadcrumbs.tsx b/frontends/ol-components/src/components/Breadcrumbs/Breadcrumbs.tsx
index 51e82b9cae..75dd17b206 100644
--- a/frontends/ol-components/src/components/Breadcrumbs/Breadcrumbs.tsx
+++ b/frontends/ol-components/src/components/Breadcrumbs/Breadcrumbs.tsx
@@ -33,6 +33,7 @@ const BreadcrumbText = styled.span({
 const Separator = styled(RiArrowRightSLine)({
   width: "16px",
   height: "16px",
+  margin: "0 4px",
 })
 
 const LightSeparator = styled(Separator)({
diff --git a/frontends/ol-components/src/index.ts b/frontends/ol-components/src/index.ts
index aa55efebd2..ec662ecd58 100644
--- a/frontends/ol-components/src/index.ts
+++ b/frontends/ol-components/src/index.ts
@@ -180,6 +180,9 @@ export {
 
 export { AppRouterCacheProvider as NextJsAppRouterCacheProvider } from "@mui/material-nextjs/v15-appRouter"
 
+export { default as useMediaQuery } from "@mui/material/useMediaQuery"
+export type { Theme } from "@mui/material/styles"
+
 // /**
 //  * @deprecated Please use component from @mitodl/smoot-design instead
 //  */

From fe0b9d4fca412ca5a3f5b519e4b9f7e5d92cc2d0 Mon Sep 17 00:00:00 2001
From: Ahtesham Quraish <ahtesham-quraish@users.noreply.github.com>
Date: Wed, 29 Apr 2026 17:47:41 +0500
Subject: [PATCH 09/10] feat: implement the video series page design (#3258)

* Add series detail page design



---------

Co-authored-by: Ahtesham Quraish <ahtesham.quraish@192.168.10.13>
---
 .../VideoPlaylistCollectionPage/MetaRow.tsx   |  45 ++
 .../SeriesNavBar.tsx                          |  90 +++
 .../TopicChips.tsx                            |  32 ++
 .../UpNextSection.tsx                         |  32 ++
 .../VideoDetailPage.tsx                       |  59 +-
 .../VideoDetailPageRouter.test.tsx            |  80 +++
 .../VideoDetailPageRouter.tsx                 |  52 ++
 .../VideoSeriesDetailPage.styled.ts           | 371 ++++++++++++
 .../VideoSeriesDetailPage.test.tsx            | 542 ++++++++++++++++++
 .../VideoSeriesDetailPage.tsx                 | 297 ++++++++++
 .../shared.styled.ts                          |  42 ++
 .../useSeriesNavigation.ts                    |  57 ++
 .../app/video-playlist/detail/[id]/page.tsx   |   4 +-
 13 files changed, 1653 insertions(+), 50 deletions(-)
 create mode 100644 frontends/main/src/app-pages/VideoPlaylistCollectionPage/MetaRow.tsx
 create mode 100644 frontends/main/src/app-pages/VideoPlaylistCollectionPage/SeriesNavBar.tsx
 create mode 100644 frontends/main/src/app-pages/VideoPlaylistCollectionPage/TopicChips.tsx
 create mode 100644 frontends/main/src/app-pages/VideoPlaylistCollectionPage/UpNextSection.tsx
 create mode 100644 frontends/main/src/app-pages/VideoPlaylistCollectionPage/VideoDetailPageRouter.test.tsx
 create mode 100644 frontends/main/src/app-pages/VideoPlaylistCollectionPage/VideoDetailPageRouter.tsx
 create mode 100644 frontends/main/src/app-pages/VideoPlaylistCollectionPage/VideoSeriesDetailPage.styled.ts
 create mode 100644 frontends/main/src/app-pages/VideoPlaylistCollectionPage/VideoSeriesDetailPage.test.tsx
 create mode 100644 frontends/main/src/app-pages/VideoPlaylistCollectionPage/VideoSeriesDetailPage.tsx
 create mode 100644 frontends/main/src/app-pages/VideoPlaylistCollectionPage/shared.styled.ts
 create mode 100644 frontends/main/src/app-pages/VideoPlaylistCollectionPage/useSeriesNavigation.ts

diff --git a/frontends/main/src/app-pages/VideoPlaylistCollectionPage/MetaRow.tsx b/frontends/main/src/app-pages/VideoPlaylistCollectionPage/MetaRow.tsx
new file mode 100644
index 0000000000..46efa2dfb1
--- /dev/null
+++ b/frontends/main/src/app-pages/VideoPlaylistCollectionPage/MetaRow.tsx
@@ -0,0 +1,45 @@
+import React from "react"
+import { theme, useMediaQuery } from "ol-components"
+import * as Styled from "./VideoSeriesDetailPage.styled"
+
+type MetaRowProps = {
+  metaParts: string[]
+  instructorNames: string | null
+  departmentName: string | null
+  duration: string | null
+  term: string | null
+}
+
+const MetaRow: React.FC<MetaRowProps> = ({
+  metaParts,
+  instructorNames,
+  departmentName,
+  duration,
+  term,
+}) => {
+  const isMobile = useMediaQuery(theme.breakpoints.down("sm"))
+
+  if (isMobile) {
+    if (!instructorNames && !departmentName && !duration && !term) return null
+    return (
+      <Styled.MetaRow>
+        {instructorNames && (
+          <Styled.MetaInstructorLine>
+            {instructorNames}
+          </Styled.MetaInstructorLine>
+        )}
+        {departmentName && <div>{departmentName}</div>}
+        {(duration || term) && (
+          <Styled.StyledDuration>
+            {[duration, term].filter(Boolean).join(" · ")}
+          </Styled.StyledDuration>
+        )}
+      </Styled.MetaRow>
+    )
+  }
+
+  if (metaParts.length === 0) return null
+  return <Styled.MetaRow>{metaParts.join(" · ")}</Styled.MetaRow>
+}
+
+export default MetaRow
diff --git a/frontends/main/src/app-pages/VideoPlaylistCollectionPage/SeriesNavBar.tsx b/frontends/main/src/app-pages/VideoPlaylistCollectionPage/SeriesNavBar.tsx
new file mode 100644
index 0000000000..bf8696b04e
--- /dev/null
+++ b/frontends/main/src/app-pages/VideoPlaylistCollectionPage/SeriesNavBar.tsx
@@ -0,0 +1,90 @@
+import React from "react"
+import { Skeleton } from "ol-components"
+import { RiArrowLeftLine, RiArrowRightLine } from "@remixicon/react"
+import type { VideoResource } from "api/v1"
+import type { SeriesNavigation } from "./useSeriesNavigation"
+import * as Styled from "./VideoSeriesDetailPage.styled"
+
+type SeriesNavBarProps = {
+  playlistId: number
+  playlistLabel: string
+  videoId: number
+  isLoading: boolean
+} & Pick<
+  SeriesNavigation,
+  | "videoItems"
+  | "currentIndex"
+  | "videoPosition"
+  | "prevVideo"
+  | "nextVideo"
+  | "getVideoHref"
+>
+
+const SeriesNavBar: React.FC<SeriesNavBarProps> = ({
+  playlistId,
+  playlistLabel,
+  videoId,
+  isLoading,
+  videoItems,
+  currentIndex,
+  videoPosition,
+  prevVideo,
+  nextVideo,
+  getVideoHref,
+}) => {
+  return (
+    <Styled.SeriesNavBar>
+      {/* Top row: series title + video position */}
+      <Styled.SeriesNavTopRow>
+        <Styled.SeriesNavTitle href={`/video-playlist/${playlistId}`}>
+          {isLoading ? <Skeleton width={200} height={20} /> : playlistLabel}
+        </Styled.SeriesNavTitle>
+        {!isLoading && videoPosition !== null && videoItems.length > 0 && (
+          <Styled.VideoPositionLabel>
+            Video {videoPosition} of {videoItems.length}
+          </Styled.VideoPositionLabel>
+        )}
+      </Styled.SeriesNavTopRow>
+
+      {/* Segmented progress bar */}
+      {!isLoading && videoItems.length > 0 && (
+        <Styled.ProgressBarRow>
+          {videoItems.map((item: VideoResource, i: number) => (
+            <Styled.ProgressSegment
+              key={item.id}
+              $active={item.id === videoId}
+              $done={currentIndex >= 0 && i < currentIndex}
+            />
+          ))}
+        </Styled.ProgressBarRow>
+      )}
+
+      {/* Bottom row: prev / next text links */}
+      <Styled.SeriesNavBottomRow>
+        {prevVideo ? (
+          <Styled.NavLink href={getVideoHref(prevVideo)}>
+            <Styled.NavArrowIcon>
+              <RiArrowLeftLine size={16} />
+            </Styled.NavArrowIcon>
+            <Styled.NavLinkText>Previous: {prevVideo.title}</Styled.NavLinkText>
+          </Styled.NavLink>
+        ) : (
+          <span />
+        )}
+        {nextVideo && (
+          <Styled.NavLink
+            href={getVideoHref(nextVideo)}
+            style={{ justifyContent: "flex-end" }}
+          >
+            <Styled.NavLinkText>Next: {nextVideo.title}</Styled.NavLinkText>
+            <Styled.NavArrowIcon>
+              <RiArrowRightLine size={16} />
+            </Styled.NavArrowIcon>
+          </Styled.NavLink>
+        )}
+      </Styled.SeriesNavBottomRow>
+    </Styled.SeriesNavBar>
+  )
+}
+
+export default SeriesNavBar
diff --git a/frontends/main/src/app-pages/VideoPlaylistCollectionPage/TopicChips.tsx b/frontends/main/src/app-pages/VideoPlaylistCollectionPage/TopicChips.tsx
new file mode 100644
index 0000000000..93f3dcb890
--- /dev/null
+++ b/frontends/main/src/app-pages/VideoPlaylistCollectionPage/TopicChips.tsx
@@ -0,0 +1,32 @@
+import React from "react"
+import type { LearningResourceTopic } from "api/v1"
+import * as Styled from "./VideoSeriesDetailPage.styled"
+
+type TopicChipsProps = {
+  topics: LearningResourceTopic[]
+}
+
+const TopicChips: React.FC<TopicChipsProps> = ({ topics }) => {
+  if (topics.length === 0) return null
+
+  return (
+    <>
+      <Styled.SectionDivider />
+      <Styled.VideoSeriesSectionHeading>
+        Video Series
+      </Styled.VideoSeriesSectionHeading>
+      <Styled.TopicChipsRow>
+        {topics.map((topic) => (
+          <Styled.TopicChip
+            key={topic.id}
+            href={`/search?topic=${encodeURIComponent(topic.name ?? "")}`}
+          >
+            {topic.name}
+          </Styled.TopicChip>
+        ))}
+      </Styled.TopicChipsRow>
+    </>
+  )
+}
+
+export default TopicChips
diff --git a/frontends/main/src/app-pages/VideoPlaylistCollectionPage/UpNextSection.tsx b/frontends/main/src/app-pages/VideoPlaylistCollectionPage/UpNextSection.tsx
new file mode 100644
index 0000000000..44b3a9b9fd
--- /dev/null
+++ b/frontends/main/src/app-pages/VideoPlaylistCollectionPage/UpNextSection.tsx
@@ -0,0 +1,32 @@
+import React from "react"
+import { RiPlayFill } from "@remixicon/react"
+import type { VideoResource } from "api/v1"
+import * as Styled from "./VideoSeriesDetailPage.styled"
+
+type UpNextSectionProps = {
+  nextVideo: VideoResource
+  getVideoHref: (v: VideoResource) => string
+}
+
+const UpNextSection: React.FC<UpNextSectionProps> = ({
+  nextVideo,
+  getVideoHref,
+}) => {
+  return (
+    <Styled.UpNextSection>
+      <Styled.UpNextLeft>
+        <Styled.UpNextLabel>Up Next</Styled.UpNextLabel>
+        <Styled.UpNextTitle>{nextVideo.title}</Styled.UpNextTitle>
+      </Styled.UpNextLeft>
+      <Styled.StyledButtonLink
+        href={getVideoHref(nextVideo)}
+        variant="primary"
+        startIcon={<RiPlayFill size={16} />}
+      >
+        Continue
+      </Styled.StyledButtonLink>
+    </Styled.UpNextSection>
+  )
+}
+
+export default UpNextSection
diff --git a/frontends/main/src/app-pages/VideoPlaylistCollectionPage/VideoDetailPage.tsx b/frontends/main/src/app-pages/VideoPlaylistCollectionPage/VideoDetailPage.tsx
index 539c96c204..e1c1918d8c 100644
--- a/frontends/main/src/app-pages/VideoPlaylistCollectionPage/VideoDetailPage.tsx
+++ b/frontends/main/src/app-pages/VideoPlaylistCollectionPage/VideoDetailPage.tsx
@@ -5,14 +5,19 @@ import Link from "next/link"
 import dynamic from "next/dynamic"
 import Image from "next/image"
 import { useFeatureFlagEnabled } from "posthog-js/react"
-import { Typography, styled, theme, Skeleton, Breadcrumbs } from "ol-components"
+import { Typography, styled, theme, Skeleton } from "ol-components"
 import VideoContainer from "./VideoContainer"
 import { RiShareForwardFill, RiPlayCircleFill } from "@remixicon/react"
+import {
+  SkipLinksNav,
+  SkipLink,
+  StyledBreadcrumbs,
+  NoVideoMessage,
+} from "./shared.styled"
 import { useQuery } from "@tanstack/react-query"
 import {
   useLearningResourcesDetail,
   learningResourceQueries,
-  videoPlaylistQueries,
 } from "api/hooks/learningResources"
 import type { VideoResource, VideoPlaylistResource } from "api/v1"
 import { VideoResourceResourceTypeEnum } from "api/v1"
@@ -37,33 +42,6 @@ const PageWrapper = styled.div({
   minHeight: "100vh",
 })
 
-const SkipLinksNav = styled.nav({
-  position: "absolute",
-  top: 0,
-  left: 0,
-  zIndex: 1000,
-})
-
-const SkipLink = styled.a(({ theme }) => ({
-  position: "absolute",
-  left: "-9999px",
-  top: "auto",
-  width: 1,
-  height: 1,
-  overflow: "hidden",
-  backgroundColor: theme.custom.colors.white,
-  color: theme.custom.colors.black,
-  padding: "8px 12px",
-  border: `2px solid ${theme.custom.colors.red}`,
-  textDecoration: "none",
-  "&:focus": {
-    left: "16px",
-    top: "16px",
-    width: "auto",
-    height: "auto",
-  },
-}))
-
 const BreadcrumbBar = styled.div(({ theme }) => ({
   padding: "32px 0 16px 0",
   borderBottom: `2px solid ${theme.custom.colors.red}`,
@@ -72,10 +50,6 @@ const BreadcrumbBar = styled.div(({ theme }) => ({
   },
 }))
 
-const StyledBreadcrumbs = styled(Breadcrumbs)(() => ({
-  "& > span > span": { paddingBottom: 0, paddingLeft: "4px" },
-}))
-
 const PlayIcon = styled(RiPlayCircleFill)({
   width: 36,
   height: 36,
@@ -152,16 +126,6 @@ const PlayerWrapper = styled.div(({ theme }) => ({
   },
 }))
 
-const NoVideoMessage = styled.div({
-  position: "absolute",
-  inset: 0,
-  display: "flex",
-  alignItems: "center",
-  justifyContent: "center",
-  color: "rgba(255,255,255,0.5)",
-  fontSize: 14,
-})
-
 const DescriptionText = styled(Typography)(({ theme }) => ({
   ...theme.typography.body1,
   color: theme.custom.colors.darkGray2,
@@ -390,11 +354,15 @@ const ScreenReaderOnly = styled.span({
 type VideoDetailPageProps = {
   videoId: number
   playlistId: number | null
+  playlistData?: VideoPlaylistResource
+  playlistLoading: boolean
 }
 
 const VideoDetailPage: React.FC<VideoDetailPageProps> = ({
   videoId,
   playlistId,
+  playlistData,
+  playlistLoading,
 }) => {
   const [shareOpen, setShareOpen] = useState(false)
   const shareButtonRef = useRef<HTMLButtonElement>(null)
@@ -403,11 +371,6 @@ const VideoDetailPage: React.FC<VideoDetailPageProps> = ({
   const { data: resource, isLoading: videoLoading } =
     useLearningResourcesDetail(videoId)
 
-  const { data: playlistData, isLoading: playlistLoading } = useQuery({
-    ...videoPlaylistQueries.detail(playlistId ?? 0),
-    enabled: !!playlistId,
-  })
-
   const { data: playlistItems, isLoading: itemsLoading } = useQuery({
     ...learningResourceQueries.items(playlistId ?? 0, {
       learning_resource_id: playlistId ?? 0,
diff --git a/frontends/main/src/app-pages/VideoPlaylistCollectionPage/VideoDetailPageRouter.test.tsx b/frontends/main/src/app-pages/VideoPlaylistCollectionPage/VideoDetailPageRouter.test.tsx
new file mode 100644
index 0000000000..5297e3b3f0
--- /dev/null
+++ b/frontends/main/src/app-pages/VideoPlaylistCollectionPage/VideoDetailPageRouter.test.tsx
@@ -0,0 +1,80 @@
+import React from "react"
+import { setMockResponse, factories } from "api/test-utils"
+import { renderWithProviders, screen } from "@/test-utils"
+import VideoDetailPageRouter from "./VideoDetailPageRouter"
+
+jest.mock("next-nprogress-bar", () => ({
+  useRouter: () => ({}),
+}))
+
+// Stub out the two leaf pages so we can assert which one is rendered
+// without needing to satisfy all their own data dependencies.
+jest.mock("./VideoSeriesDetailPage", () => ({
+  __esModule: true,
+  default: () => <div data-testid="video-series-detail-page" />,
+}))
+
+jest.mock("./VideoDetailPage", () => ({
+  __esModule: true,
+  default: () => <div data-testid="video-detail-page" />,
+}))
+
+const makeOcwPlaylist = () =>
+  factories.learningResources.videoPlaylist({
+    offered_by: { code: "ocw", name: "OCW", channel_url: null },
+  })
+
+const makeNonOcwPlaylist = () =>
+  factories.learningResources.videoPlaylist({
+    offered_by: { code: "xpro", name: "xPRO", channel_url: null },
+  })
+
+const setupPlaylistApi = (
+  playlist: ReturnType<typeof factories.learningResources.videoPlaylist>,
+) => {
+  setMockResponse.get(
+    expect.stringContaining(`/api/v1/video_playlists/${playlist.id}/`),
+    playlist,
+  )
+}
+
+describe("VideoDetailPageRouter", () => {
+  describe("routing by offered_by.code", () => {
+    test("renders VideoSeriesDetailPage for an OCW playlist", async () => {
+      const playlist = makeOcwPlaylist()
+      setupPlaylistApi(playlist)
+
+      renderWithProviders(
+        <VideoDetailPageRouter videoId={1} playlistId={playlist.id} />,
+      )
+
+      await screen.findByTestId("video-series-detail-page")
+      expect(screen.queryByTestId("video-detail-page")).not.toBeInTheDocument()
+    })
+
+    test("renders VideoDetailPage for a non-OCW playlist", async () => {
+      const playlist = makeNonOcwPlaylist()
+      setupPlaylistApi(playlist)
+
+      renderWithProviders(
+        <VideoDetailPageRouter videoId={1} playlistId={playlist.id} />,
+      )
+
+      await screen.findByTestId("video-detail-page")
+      expect(
+        screen.queryByTestId("video-series-detail-page"),
+      ).not.toBeInTheDocument()
+    })
+
+    test("renders VideoDetailPage when no playlistId is provided", async () => {
+      renderWithProviders(
+        <VideoDetailPageRouter videoId={1} playlistId={null} />,
+      )
+
+      await screen.findByTestId("video-detail-page")
+      expect(
+        screen.queryByTestId("video-series-detail-page"),
+      ).not.toBeInTheDocument()
+    })
+  })
+})
diff --git a/frontends/main/src/app-pages/VideoPlaylistCollectionPage/VideoDetailPageRouter.tsx b/frontends/main/src/app-pages/VideoPlaylistCollectionPage/VideoDetailPageRouter.tsx
new file mode 100644
index 0000000000..fcb13f0f78
--- /dev/null
+++ b/frontends/main/src/app-pages/VideoPlaylistCollectionPage/VideoDetailPageRouter.tsx
@@ -0,0 +1,52 @@
+"use client"
+
+import React from "react"
+import { useQuery } from "@tanstack/react-query"
+import { videoPlaylistQueries } from "api/hooks/learningResources"
+import { isOcwPlaylist } from "@/common/utils"
+import VideoDetailPage from "./VideoDetailPage"
+import VideoSeriesDetailPage from "./VideoSeriesDetailPage"
+import { LoadingSpinner } from "ol-components"
+
+type VideoDetailPageRouterProps = {
+  videoId: number
+  playlistId: number | null
+}
+
+const VideoDetailPageRouter: React.FC<VideoDetailPageRouterProps> = ({
+  videoId,
+  playlistId,
+}) => {
+  const { data: playlist, isLoading: playlistLoading } = useQuery({
+    ...videoPlaylistQueries.detail(playlistId ?? 0),
+    enabled: playlistId !== null,
+  })
+
+  if (playlistId !== null && playlistLoading) {
+    return <LoadingSpinner loading={playlistLoading} />
+  }
+
+  const isOcw = isOcwPlaylist(playlist)
+
+  if (isOcw) {
+    return (
+      <VideoSeriesDetailPage
+        videoId={videoId}
+        playlistId={playlistId}
+        playlistData={playlist}
+        playlistLoading={playlistLoading}
+      />
+    )
+  }
+
+  return (
+    <VideoDetailPage
+      videoId={videoId}
+      playlistId={playlistId}
+      playlistData={playlist}
+      playlistLoading={playlistLoading}
+    />
+  )
+}
+
+export default VideoDetailPageRouter
diff --git a/frontends/main/src/app-pages/VideoPlaylistCollectionPage/VideoSeriesDetailPage.styled.ts b/frontends/main/src/app-pages/VideoPlaylistCollectionPage/VideoSeriesDetailPage.styled.ts
new file mode 100644
index 0000000000..7cd30b54d9
--- /dev/null
+++ b/frontends/main/src/app-pages/VideoPlaylistCollectionPage/VideoSeriesDetailPage.styled.ts
@@ -0,0 +1,371 @@
+import Link from "next/link"
+import { Typography, styled, theme } from "ol-components"
+import { ButtonLink } from "@mitodl/smoot-design"
+import VideoContainer from "./VideoContainer"
+export {
+  SkipLinksNav,
+  SkipLink,
+  StyledBreadcrumbs,
+  NoVideoMessage,
+} from "./shared.styled"
+
+export const PageWrapper = styled.div({
+  backgroundColor: theme.custom.colors.lightGray1,
+  minHeight: "100vh",
+})
+
+export const BreadcrumbBar = styled.div(({ theme }) => ({
+  padding: "20px 0 4px 0",
+  borderBottom: `2px solid ${theme.custom.colors.red}`,
+  [theme.breakpoints.down("sm")]: {
+    padding: "16px 0 0 0",
+  },
+}))
+
+// ── Series navigation bar ──
+
+export const SeriesNavBar = styled.div(({ theme }) => ({
+  borderBottom: `1px solid ${theme.custom.colors.lightGray2}`,
+}))
+
+export const SeriesNavTopRow = styled(VideoContainer)(({ theme }) => ({
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "space-between",
+  padding: "56px 0 12px !important",
+  gap: "16px",
+  [theme.breakpoints.down("lg")]: {
+    padding: "32px 16px 12px !important",
+  },
+}))
+
+export const SeriesNavTitle = styled(Link)(({ theme }) => ({
+  ...theme.typography.body3,
+  color: theme.custom.colors.darkRed,
+  fontWeight: theme.typography.fontWeightMedium,
+  overflow: "hidden",
+  textOverflow: "ellipsis",
+  whiteSpace: "nowrap",
+  textDecoration: "none",
+  flexShrink: 1,
+  minWidth: 0,
+  "&:hover": { color: theme.custom.colors.red },
+  [theme.breakpoints.down("sm")]: {
+    ...theme.typography.body3,
+    fontWeight: theme.typography.fontWeightMedium,
+  },
+}))
+
+export const VideoPositionLabel = styled(Typography)(({ theme }) => ({
+  ...theme.typography.body3,
+  color: theme.custom.colors.darkGray2,
+  whiteSpace: "nowrap",
+  flexShrink: 0,
+  [theme.breakpoints.down("sm")]: {
+    ...theme.typography.body3,
+    fontWeight: theme.typography.fontWeightMedium,
+  },
+}))
+
+export const ProgressBarRow = styled(VideoContainer)(({ theme }) => ({
+  display: "flex",
+  gap: "3px",
+  padding: "0 0 0 0 !important",
+  [theme.breakpoints.down("lg")]: {
+    padding: "0 16px !important",
+  },
+}))
+
+export const ProgressSegment = styled.div<{ $active: boolean; $done: boolean }>(
+  ({ theme, $active, $done }) => ({
+    flex: 1,
+    height: "4px",
+    borderRadius: "2px",
+    backgroundColor: $active
+      ? theme.custom.colors.darkGray1
+      : $done
+        ? theme.custom.colors.darkRed
+        : theme.custom.colors.lightGray2,
+  }),
+)
+
+export const SeriesNavBottomRow = styled(VideoContainer)(({ theme }) => ({
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "space-between",
+  padding: "16px 0 16px !important",
+  [theme.breakpoints.down("lg")]: {
+    padding: "16px 16px 16px !important",
+    flexDirection: "column",
+    alignItems: "flex-start",
+    gap: "16px",
+  },
+}))
+
+export const NavLink = styled(Link)(({ theme }) => ({
+  display: "flex",
+  alignItems: "center",
+  gap: "6px",
+  ...theme.typography.body3,
+  color: theme.custom.colors.darkRed,
+  textDecoration: "none",
+  maxWidth: "45%",
+  minWidth: 0,
+  flexShrink: 1,
+  "&:hover": { color: theme.custom.colors.red },
+  [theme.breakpoints.down("sm")]: {
+    maxWidth: "100%",
+  },
+}))
+
+export const StyledButtonLink = styled(ButtonLink)(({ theme }) => ({
+  marginTop: "8px",
+  [theme.breakpoints.down("sm")]: {
+    marginLeft: "24px",
+    marginTop: "0",
+  },
+}))
+
+export const NavLinkText = styled.span({
+  overflow: "hidden",
+  textOverflow: "ellipsis",
+  whiteSpace: "nowrap",
+  minWidth: 0,
+})
+
+export const NavArrowIcon = styled.span({
+  flexShrink: 0,
+  display: "flex",
+  alignItems: "center",
+})
+
+export const ContentArea = styled.div(({ theme }) => ({
+  padding: "40px 0 80px",
+  [theme.breakpoints.down("sm")]: {
+    padding: "32px 0 80px",
+  },
+}))
+
+export const InstitutionLabel = styled.span(({ theme }) => ({
+  display: "block",
+  ...theme.typography.body2,
+  fontWeight: theme.typography.fontWeightBold,
+  color: theme.custom.colors.silverGrayDark,
+  textTransform: "uppercase",
+  marginBottom: "16px",
+  lineHeight: "26px",
+  [theme.breakpoints.down("sm")]: {
+    ...theme.typography.body3,
+    lineHeight: "22px",
+    marginBottom: "8px",
+  },
+}))
+
+export const VideoTitle = styled.h1(({ theme }) => ({
+  ...theme.typography.h2,
+  fontWeight: theme.typography.fontWeightBold,
+  color: theme.custom.colors.black,
+  margin: "0 0 40px",
+  "&:focus": { outline: "none" },
+  fontSize: "44px",
+  fontStyle: "normal",
+  lineHeight: "120%",
+  letterSpacing: "-0.88px",
+  [theme.breakpoints.down("sm")]: {
+    ...theme.typography.h3,
+    margin: "0 0 14px",
+    letterSpacing: "inherit",
+  },
+}))
+
+export const PlayerWrapper = styled.div(({ theme }) => ({
+  width: "100%",
+  aspectRatio: "16/9",
+  backgroundColor: "#000",
+  overflow: "hidden",
+  position: "relative",
+  borderBottom: `3px solid ${theme.custom.colors.darkGray2}`,
+  [theme.breakpoints.down("sm")]: {
+    marginTop: "0",
+  },
+  ".video-js, .vjs-tech": {
+    width: "100% !important",
+    height: "100% !important",
+    position: "absolute",
+    top: 0,
+    left: 0,
+  },
+  ".vjs-big-play-button": {
+    width: "92px !important",
+    height: "92px !important",
+    lineHeight: "92px !important",
+    borderRadius: "50% !important",
+    backgroundColor: "#d8daddb3 !important",
+    border: "none !important",
+    fontSize: "4em !important",
+    marginTop: "-1.25em !important",
+    marginLeft: "-1.18em !important",
+    [theme.breakpoints.down("sm")]: {
+      width: "68px !important",
+      height: "68px !important",
+      lineHeight: "68px !important",
+      marginLeft: "-1em !important",
+      marginTop: "-.7em !important",
+    },
+  },
+
+  ".vjs-icon-placeholder": {
+    border: "none !important",
+  },
+
+  "& .vjs-big-play-button": {
+    opacity: 1,
+    transform: "scale(1)",
+    transition: "opacity 0.3s ease, transform 0.3s ease",
+  },
+  "&:hover .vjs-big-play-button": {
+    opacity: 0.75,
+    transform: "scale(1.12)",
+  },
+}))
+
+// ── UP NEXT section ──
+
+export const UpNextSection = styled.div(({ theme }) => ({
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "space-between",
+  gap: "16px",
+  padding: "16px 32px",
+  marginBottom: "32px",
+  [theme.breakpoints.down("sm")]: {
+    flexDirection: "column",
+    alignItems: "flex-start",
+    gap: "12px",
+    padding: "16px 0",
+  },
+}))
+
+export const UpNextLeft = styled.div(({ theme }) => ({
+  display: "flex",
+  flexDirection: "column",
+  gap: "4px",
+  minWidth: 0,
+  [theme.breakpoints.down("sm")]: {
+    paddingLeft: "24px",
+  },
+}))
+
+export const UpNextLabel = styled(Typography)(({ theme }) => ({
+  ...theme.typography.body1,
+  fontWeight: theme.typography.fontWeightBold,
+  color: theme.custom.colors.silverGrayDark,
+  textTransform: "uppercase",
+  lineHeight: "150%",
+  [theme.breakpoints.down("sm")]: {
+    ...theme.typography.body2,
+    lineHeight: "22px",
+  },
+}))
+
+export const UpNextTitle = styled(Typography)(({ theme }) => ({
+  ...theme.typography.body1,
+  fontWeight: theme.typography.fontWeightMedium,
+  color: theme.custom.colors.darkGray2,
+  lineHeight: "24px",
+  overflow: "hidden",
+  display: "-webkit-box",
+  WebkitLineClamp: 2,
+  WebkitBoxOrient: "vertical",
+}))
+
+export const MetaRow = styled.div(({ theme }) => ({
+  ...theme.typography.body2,
+  color: theme.custom.colors.darkGray1,
+  marginBottom: "40px",
+  lineHeight: "1.8",
+  [theme.breakpoints.down("sm")]: {
+    marginBottom: "32px",
+  },
+}))
+
+export const MetaInstructorLine = styled.div(({ theme }) => ({
+  fontWeight: theme.typography.fontWeightBold,
+  color: theme.custom.colors.darkGray2,
+}))
+
+export const StyledDuration = styled.div(({ theme }) => ({
+  ...theme.typography.body2,
+  color: theme.custom.colors.silverGrayDark,
+  [theme.breakpoints.down("sm")]: {
+    marginTop: "4px",
+  },
+}))
+
+export const DescriptionText = styled(Typography)(({ theme }) => ({
+  ...theme.typography.body2,
+  color: theme.custom.colors.darkGray2,
+  marginBottom: "16px",
+  lineHeight: "22px",
+  [theme.breakpoints.down("sm")]: {
+    ...theme.typography.body2,
+    lineHeight: "22px",
+    marginBottom: "24px",
+  },
+}))
+
+export const SectionDivider = styled.div(({ theme }) => ({
+  borderTop: `1px solid ${theme.custom.colors.lightGray2}`,
+  margin: "32px 0",
+}))
+
+// ── VIDEO SERIES section (topic chips) ──
+
+export const VideoSeriesSectionHeading = styled(Typography)(({ theme }) => ({
+  ...theme.typography.body3,
+  fontWeight: theme.typography.fontWeightBold,
+  color: theme.custom.colors.black,
+  textTransform: "uppercase",
+  letterSpacing: "1.92px",
+  marginBottom: "16px",
+}))
+
+export const TopicChipsRow = styled.div({
+  display: "flex",
+  flexWrap: "wrap",
+  gap: "8px",
+})
+
+export const TopicChip = styled(Link)(({ theme }) => ({
+  display: "inline-flex",
+  alignItems: "center",
+  padding: "8px 16px",
+  border: `1px solid ${theme.custom.colors.silverGrayLight}`,
+  color: theme.custom.colors.darkRed,
+  textDecoration: "none",
+  ...theme.typography.body3,
+  lineHeight: "12px",
+  fontWeight: theme.typography.fontWeightMedium,
+  "&:hover": {
+    backgroundColor: theme.custom.colors.silverGrayLight,
+    color: theme.custom.colors.red,
+  },
+}))
+
+export const ThumbnailWrapper = styled.div({
+  position: "relative",
+  width: "100%",
+  height: "100%",
+})
+
+export const ScreenReaderOnly = styled.span({
+  position: "absolute",
+  width: 1,
+  height: 1,
+  padding: 0,
+  margin: -1,
+  overflow: "hidden",
+  clip: "rect(0, 0, 0, 0)",
+  whiteSpace: "nowrap",
+  border: 0,
+})
diff --git a/frontends/main/src/app-pages/VideoPlaylistCollectionPage/VideoSeriesDetailPage.test.tsx b/frontends/main/src/app-pages/VideoPlaylistCollectionPage/VideoSeriesDetailPage.test.tsx
new file mode 100644
index 0000000000..766bd1afaa
--- /dev/null
+++ b/frontends/main/src/app-pages/VideoPlaylistCollectionPage/VideoSeriesDetailPage.test.tsx
@@ -0,0 +1,542 @@
+import React from "react"
+import { setMockResponse, urls, factories } from "api/test-utils"
+import { renderWithProviders, screen } from "@/test-utils"
+import { notFound } from "next/navigation"
+import { useFeatureFlagEnabled } from "posthog-js/react"
+import { useFeatureFlagsLoaded } from "@/common/useFeatureFlagsLoaded"
+import VideoSeriesDetailPage from "./VideoSeriesDetailPage"
+import { ResourceTypeEnum } from "api/v1"
+import type { VideoResource, VideoPlaylistResource } from "api/v1"
+
+jest.mock("posthog-js/react")
+const mockedUseFeatureFlagEnabled = jest.mocked(useFeatureFlagEnabled)
+jest.mock("@/common/useFeatureFlagsLoaded")
+const mockedUseFeatureFlagsLoaded = jest.mocked(useFeatureFlagsLoaded)
+
+jest.mock("next-nprogress-bar", () => ({
+  useRouter: () => ({}),
+}))
+
+// Stub VideoJsPlayer to avoid loading video.js in the test environment
+jest.mock("./VideoJsPlayer", () => ({
+  __esModule: true,
+  default: (props: { ariaLabel?: string }) => (
+    <div data-testid="video-js-player" aria-label={props.ariaLabel} />
+  ),
+}))
+
+// ── Factories ────────────────────────────────────────────────────────────────
+
+const makeVideo = (overrides: Partial<VideoResource> = {}): VideoResource =>
+  factories.learningResources.video({
+    resource_type: ResourceTypeEnum.Video,
+    ...overrides,
+  }) as VideoResource
+
+const makePlaylist = (
+  overrides: Partial<VideoPlaylistResource> = {},
+): VideoPlaylistResource =>
+  factories.learningResources.videoPlaylist(overrides) as VideoPlaylistResource
+
+// ── API helpers ───────────────────────────────────────────────────────────────
+
+const setupVideoApi = (video: VideoResource) => {
+  setMockResponse.get(urls.learningResources.details({ id: video.id }), video)
+}
+
+const setupItemsApi = (playlistId: number, items: VideoResource[]) => {
+  setMockResponse.get(urls.learningResources.items({ id: playlistId }), {
+    count: items.length,
+    next: null,
+    previous: null,
+    results: items.map((item, i) => ({
+      id: i + 1,
+      child: item.id,
+      parent: playlistId,
+      position: i + 1,
+      resource: item,
+    })),
+  })
+}
+
+// ── Default render helper ────────────────────────────────────────────────────
+
+type RenderOptions = {
+  video?: VideoResource
+  playlistId?: number | null
+  playlistData?: VideoPlaylistResource
+  playlistLoading?: boolean
+  playlistItems?: VideoResource[]
+}
+
+const renderPage = ({
+  video = makeVideo(),
+  playlistId = null,
+  playlistData = undefined,
+  playlistLoading = false,
+  playlistItems = [],
+}: RenderOptions = {}) => {
+  setupVideoApi(video)
+  if (playlistId) {
+    setupItemsApi(playlistId, playlistItems)
+  }
+
+  return renderWithProviders(
+    <VideoSeriesDetailPage
+      videoId={video.id}
+      playlistId={playlistId}
+      playlistData={playlistData}
+      playlistLoading={playlistLoading}
+    />,
+  )
+}
+
+// ── Tests ────────────────────────────────────────────────────────────────────
+
+describe("VideoSeriesDetailPage", () => {
+  beforeEach(() => {
+    jest.clearAllMocks()
+    mockedUseFeatureFlagEnabled.mockReturnValue(true)
+    mockedUseFeatureFlagsLoaded.mockReturnValue(true)
+  })
+
+  describe("feature-flag gating", () => {
+    test("calls notFound when VideoPlaylistPage flag is disabled and flags are loaded", () => {
+      mockedUseFeatureFlagEnabled.mockReturnValue(false)
+      mockedUseFeatureFlagsLoaded.mockReturnValue(true)
+
+      renderPage()
+
+      expect(notFound).toHaveBeenCalled()
+    })
+
+    test("does not call notFound when the flag is enabled", () => {
+      renderPage()
+      expect(notFound).not.toHaveBeenCalled()
+    })
+
+    test("does not call notFound when the flag is undefined and flags are not yet loaded", () => {
+      mockedUseFeatureFlagEnabled.mockReturnValue(undefined)
+      mockedUseFeatureFlagsLoaded.mockReturnValue(false)
+
+      renderPage()
+
+      expect(notFound).not.toHaveBeenCalled()
+    })
+  })
+
+  describe("video title and institution label", () => {
+    test("renders the video title once data is loaded", async () => {
+      const video = makeVideo({ title: "Introduction to Machine Learning" })
+      renderPage({ video })
+
+      await screen.findByRole("heading", {
+        name: "Introduction to Machine Learning",
+      })
+    })
+
+    test("renders the institution label from the video department", async () => {
+      const video = makeVideo({
+        departments: [
+          factories.learningResources.department({
+            department_id: "eecs",
+            name: "Electrical Engineering and Computer Science",
+          }),
+        ],
+      })
+      renderPage({ video })
+
+      await screen.findByText("ELECTRICAL ENGINEERING AND COMPUTER SCIENCE")
+    })
+
+    test("renders the institution label from offered_by when no department", async () => {
+      const playlist = makePlaylist({
+        offered_by: {
+          code: "ocw",
+          name: "MIT OpenCourseWare",
+          channel_url: null,
+        },
+      })
+      const video = makeVideo({ departments: [] })
+      renderPage({ video, playlistId: playlist.id, playlistData: playlist })
+
+      await screen.findByText("MIT OPENCOURSEWARE")
+    })
+  })
+
+  describe("breadcrumbs", () => {
+    test("renders a home breadcrumb link", async () => {
+      const video = makeVideo()
+      renderPage({ video })
+
+      await screen.findByRole("heading", { name: video.title })
+      const homeLink = screen.getByRole("link", { name: "Home" })
+      expect(homeLink).toBeInTheDocument()
+    })
+
+    test("includes a playlist breadcrumb when playlistId is provided", async () => {
+      const playlist = makePlaylist({ title: "Neural Networks Series" })
+      const video = makeVideo()
+      renderPage({
+        video,
+        playlistId: playlist.id,
+        playlistData: playlist,
+        playlistItems: [video],
+      })
+
+      await screen.findByRole("heading", { name: video.title })
+      // Both the breadcrumb and the SeriesNavBar link point to the playlist page
+      const playlistLinks = screen.getAllByRole("link", {
+        name: "Neural Networks Series",
+      })
+      expect(playlistLinks.length).toBeGreaterThanOrEqual(1)
+      expect(playlistLinks[0]).toHaveAttribute(
+        "href",
+        `/video-playlist/${playlist.id}`,
+      )
+    })
+
+    test("does not include a playlist breadcrumb when no playlistId", async () => {
+      const playlist = makePlaylist({ title: "Neural Networks Series" })
+      const video = makeVideo()
+      renderPage({ video, playlistData: playlist, playlistId: null })
+
+      await screen.findByRole("heading", { name: video.title })
+      expect(
+        screen.queryByRole("link", { name: "Neural Networks Series" }),
+      ).not.toBeInTheDocument()
+    })
+  })
+
+  describe("series nav bar", () => {
+    test("renders the series nav bar when playlistId is provided", async () => {
+      const playlist = makePlaylist({ title: "Intro to AI" })
+      const video = makeVideo()
+      renderPage({
+        video,
+        playlistId: playlist.id,
+        playlistData: playlist,
+        playlistItems: [video],
+      })
+
+      await screen.findByRole("link", { name: "Intro to AI" })
+    })
+
+    test("does not render the series nav bar when no playlistId", async () => {
+      const playlist = makePlaylist({ title: "Intro to AI" })
+      const video = makeVideo()
+      renderPage({ video, playlistData: playlist, playlistId: null })
+
+      await screen.findByRole("heading", { name: video.title })
+      expect(
+        screen.queryByRole("link", { name: "Intro to AI" }),
+      ).not.toBeInTheDocument()
+    })
+
+    test("renders video position label when part of a playlist", async () => {
+      const playlist = makePlaylist({ title: "ML Basics" })
+      const [first, second, third] = [
+        makeVideo({ title: "Lecture 1" }),
+        makeVideo({ title: "Lecture 2" }),
+        makeVideo({ title: "Lecture 3" }),
+      ]
+      renderPage({
+        video: second,
+        playlistId: playlist.id,
+        playlistData: playlist,
+        playlistItems: [first, second, third],
+      })
+
+      await screen.findByText("Video 2 of 3")
+    })
+
+    test("renders a Previous link pointing to the prev video", async () => {
+      const playlist = makePlaylist()
+      const prev = makeVideo({ title: "Part 1" })
+      const current = makeVideo({ title: "Part 2" })
+      renderPage({
+        video: current,
+        playlistId: playlist.id,
+        playlistData: playlist,
+        playlistItems: [prev, current],
+      })
+
+      const prevLink = await screen.findByRole("link", {
+        name: /Previous: Part 1/i,
+      })
+      expect(prevLink).toHaveAttribute(
+        "href",
+        `/video-playlist/detail/${prev.id}?playlist=${playlist.id}`,
+      )
+    })
+
+    test("renders a Next link pointing to the next video", async () => {
+      const playlist = makePlaylist()
+      const current = makeVideo({ title: "Part 1" })
+      const next = makeVideo({ title: "Part 2" })
+      renderPage({
+        video: current,
+        playlistId: playlist.id,
+        playlistData: playlist,
+        playlistItems: [current, next],
+      })
+
+      const nextLink = await screen.findByRole("link", {
+        name: /Next: Part 2/i,
+      })
+      expect(nextLink).toHaveAttribute(
+        "href",
+        `/video-playlist/detail/${next.id}?playlist=${playlist.id}`,
+      )
+    })
+
+    test("does not render a Previous link for the first video in a playlist", async () => {
+      const playlist = makePlaylist()
+      const first = makeVideo({ title: "First Video" })
+      const second = makeVideo()
+      renderPage({
+        video: first,
+        playlistId: playlist.id,
+        playlistData: playlist,
+        playlistItems: [first, second],
+      })
+
+      await screen.findByText(/Video 1 of 2/)
+      expect(
+        screen.queryByRole("link", { name: /Previous/i }),
+      ).not.toBeInTheDocument()
+    })
+
+    test("does not render a Next link for the last video in a playlist", async () => {
+      const playlist = makePlaylist()
+      const first = makeVideo()
+      const last = makeVideo({ title: "Last Video" })
+      renderPage({
+        video: last,
+        playlistId: playlist.id,
+        playlistData: playlist,
+        playlistItems: [first, last],
+      })
+
+      await screen.findByText(/Video 2 of 2/)
+      expect(
+        screen.queryByRole("link", { name: /Next/i }),
+      ).not.toBeInTheDocument()
+    })
+  })
+
+  describe("Up Next section", () => {
+    test("renders Up Next with a Continue button when there is a next video", async () => {
+      const playlist = makePlaylist()
+      const current = makeVideo({ title: "Episode 1" })
+      const next = makeVideo({ title: "Episode 2" })
+      renderPage({
+        video: current,
+        playlistId: playlist.id,
+        playlistData: playlist,
+        playlistItems: [current, next],
+      })
+
+      await screen.findByText("Up Next")
+      expect(screen.getByText("Episode 2")).toBeInTheDocument()
+      expect(
+        screen.getByRole("link", { name: /Continue/i }),
+      ).toBeInTheDocument()
+    })
+
+    test("does not render Up Next section when the current video is the last", async () => {
+      const playlist = makePlaylist()
+      const first = makeVideo()
+      const last = makeVideo({ title: "Final Episode" })
+      renderPage({
+        video: last,
+        playlistId: playlist.id,
+        playlistData: playlist,
+        playlistItems: [first, last],
+      })
+
+      await screen.findByRole("heading", { name: last.title })
+      expect(screen.queryByText("Up Next")).not.toBeInTheDocument()
+    })
+
+    test("does not render Up Next section when there is no playlist", async () => {
+      const video = makeVideo()
+      renderPage({ video })
+
+      await screen.findByRole("heading", { name: video.title })
+      expect(screen.queryByText("Up Next")).not.toBeInTheDocument()
+    })
+  })
+
+  describe("description", () => {
+    test("renders the video description when present", async () => {
+      const video = makeVideo({
+        description: "A deep dive into transformer architecture.",
+      })
+      renderPage({ video })
+
+      await screen.findByText("A deep dive into transformer architecture.")
+    })
+
+    test("renders an accessible description placeholder when description is absent", async () => {
+      const video = makeVideo({ description: "", title: "My Video" })
+      renderPage({ video })
+
+      await screen.findByRole("heading", { name: "My Video" })
+      // When description is absent the component renders a screen-reader-only
+      // element in its place so aria-describedby still resolves
+      const descEl = document.getElementById("video-description")
+      expect(descEl).toBeInTheDocument()
+      expect(descEl?.textContent).toContain("My Video")
+    })
+  })
+
+  describe("topic chips", () => {
+    test("renders topic chip links for each topic", async () => {
+      const video = makeVideo({
+        topics: [
+          { id: 1, name: "Machine Learning", parent: 10, channel_url: null },
+          { id: 2, name: "Statistics", parent: 11, channel_url: null },
+        ],
+      })
+      renderPage({ video })
+
+      const mlChip = await screen.findByRole("link", {
+        name: "Machine Learning",
+      })
+      const statsChip = screen.getByRole("link", { name: "Statistics" })
+      expect(mlChip).toHaveAttribute("href", "/search?topic=Machine%20Learning")
+      expect(statsChip).toHaveAttribute("href", "/search?topic=Statistics")
+    })
+
+    test("renders the Video Series heading when topics are present", async () => {
+      const video = makeVideo({
+        topics: [{ id: 1, name: "Robotics", parent: 5, channel_url: null }],
+      })
+      renderPage({ video })
+
+      await screen.findByText("Video Series")
+    })
+
+    test("does not render the Video Series section when there are no topics", async () => {
+      const video = makeVideo({ topics: [] })
+      renderPage({ video })
+
+      await screen.findByRole("heading", { name: video.title })
+      expect(screen.queryByText("Video Series")).not.toBeInTheDocument()
+    })
+  })
+
+  describe("video player", () => {
+    test("renders the video player when a streaming URL is present", async () => {
+      const video = makeVideo({
+        video: {
+          id: 1,
+          caption_urls: [],
+          streaming_url: "https://www.youtube.com/watch?v=abc123",
+          duration: "120",
+          cover_image_url: null,
+        },
+      })
+      renderPage({ video })
+
+      await screen.findByTestId("video-js-player")
+    })
+
+    test("renders a fallback image when there is no video source but an image exists", async () => {
+      const video = makeVideo({
+        video: {
+          id: 1,
+          caption_urls: [],
+          streaming_url: null,
+          duration: "",
+          cover_image_url: null,
+        },
+        url: null,
+        image: factories.learningResources.image({
+          url: "https://example.com/thumb.jpg",
+          alt: "thumbnail",
+          description: "",
+        }),
+      })
+      renderPage({ video })
+
+      await screen.findByRole("heading", { name: video.title })
+      const img = await screen.findByAltText(/Video thumbnail for/)
+      expect(img).toBeInTheDocument()
+    })
+
+    test("renders 'No playable source' message when there is no source and no image", async () => {
+      const video = makeVideo({
+        video: {
+          id: 1,
+          caption_urls: [],
+          streaming_url: null,
+          duration: "",
+          cover_image_url: null,
+        },
+        url: null,
+        image: null,
+      })
+      renderPage({ video })
+
+      // The visible NoVideoMessage div should be present
+      await screen.findByRole("alert")
+      const alert = screen.getByRole("alert")
+      expect(alert).toHaveTextContent(
+        "No playable source available for this video.",
+      )
+    })
+  })
+
+  describe("loading state", () => {
+    test("shows a loading status message while video data is loading", async () => {
+      const video = makeVideo()
+      // Mock the API but use an unresolved promise to keep the query in loading
+      setMockResponse.get(
+        urls.learningResources.details({ id: video.id }),
+        new Promise(() => {}), // never resolves → stays loading
+      )
+
+      renderWithProviders(
+        <VideoSeriesDetailPage
+          videoId={video.id}
+          playlistId={null}
+          playlistLoading={false}
+        />,
+      )
+
+      // The ScreenReaderOnly status span should show the loading message
+      const statusEl = document.querySelector(
+        "[role='status'][aria-atomic='true']",
+      )
+      expect(statusEl).toHaveTextContent("Loading video details and player")
+    })
+
+    test("shows loaded status message once data arrives", async () => {
+      const video = makeVideo()
+      renderPage({ video })
+
+      await screen.findByRole("heading", { name: video.title })
+      const statusEl = document.querySelector(
+        "[role='status'][aria-atomic='true']",
+      )
+      expect(statusEl).toHaveTextContent("Video details loaded")
+    })
+  })
+
+  describe("skip links", () => {
+    test("renders skip-to-main-content and skip-to-player links", async () => {
+      const video = makeVideo()
+      renderPage({ video })
+
+      await screen.findByRole("heading", { name: video.title })
+      expect(
+        screen.getByRole("link", { name: "Skip to main content" }),
+      ).toHaveAttribute("href", "#video-detail-main")
+      expect(
+        screen.getByRole("link", { name: "Skip to video player" }),
+      ).toHaveAttribute("href", "#video-player-region")
+    })
+  })
+})
diff --git a/frontends/main/src/app-pages/VideoPlaylistCollectionPage/VideoSeriesDetailPage.tsx b/frontends/main/src/app-pages/VideoPlaylistCollectionPage/VideoSeriesDetailPage.tsx
new file mode 100644
index 0000000000..a9b0bf201a
--- /dev/null
+++ b/frontends/main/src/app-pages/VideoPlaylistCollectionPage/VideoSeriesDetailPage.tsx
@@ -0,0 +1,297 @@
+"use client"
+
+import React, { useEffect, useMemo, useRef } from "react"
+import dynamic from "next/dynamic"
+import Image from "next/image"
+import { useFeatureFlagEnabled } from "posthog-js/react"
+import { Skeleton } from "ol-components"
+import VideoContainer from "./VideoContainer"
+import { useLearningResourcesDetail } from "api/hooks/learningResources"
+import type { VideoResource, VideoPlaylistResource } from "api/v1"
+import { formatDurationClockTime } from "ol-utilities"
+import { resolveVideoSources } from "./videoSources"
+import type { VideoJsPlayerProps } from "./VideoJsPlayer"
+import { FeatureFlags } from "@/common/feature_flags"
+import { useFeatureFlagsLoaded } from "@/common/useFeatureFlagsLoaded"
+import { notFound } from "next/navigation"
+import { useSeriesNavigation } from "./useSeriesNavigation"
+import SeriesNavBar from "./SeriesNavBar"
+import UpNextSection from "./UpNextSection"
+import MetaRow from "./MetaRow"
+import TopicChips from "./TopicChips"
+import * as Styled from "./VideoSeriesDetailPage.styled"
+
+const VideoJsPlayer = dynamic<VideoJsPlayerProps>(
+  () => import("./VideoJsPlayer"),
+  { ssr: false },
+)
+
+type VideoSeriesDetailPageProps = {
+  videoId: number
+  playlistId: number | null
+  playlistData?: VideoPlaylistResource
+  playlistLoading: boolean
+}
+
+const VideoSeriesDetailPage: React.FC<VideoSeriesDetailPageProps> = ({
+  videoId,
+  playlistId,
+  playlistData,
+  playlistLoading,
+}) => {
+  const titleRef = useRef<HTMLHeadingElement>(null)
+
+  const { data: resource, isLoading: videoLoading } =
+    useLearningResourcesDetail(videoId)
+
+  const showVideoPlaylistPage = useFeatureFlagEnabled(
+    FeatureFlags.VideoPlaylistPage,
+  )
+  const flagsLoaded = useFeatureFlagsLoaded()
+
+  const playlist = playlistData as VideoPlaylistResource | undefined
+  const video = resource as VideoResource | undefined
+
+  const {
+    prevVideo,
+    nextVideo,
+    videoPosition,
+    videoItems,
+    currentIndex,
+    itemsLoading,
+    getVideoHref,
+  } = useSeriesNavigation(videoId, playlistId)
+
+  const sources = useMemo(
+    () =>
+      video ? resolveVideoSources(video.video?.streaming_url, video.url) : [],
+    [video],
+  )
+
+  const duration = video?.video?.duration
+    ? formatDurationClockTime(video.video.duration)
+    : null
+
+  const topics = video?.topics ?? []
+  const playlistLabel = playlist?.title || "Video Collection"
+
+  // Meta: instructors, department, duration, term
+  const run = video?.runs?.[0]
+  const instructorNames =
+    run?.instructors
+      ?.map((i) => i.full_name)
+      .filter(Boolean)
+      .join(", ") ?? null
+  const departmentName = video?.departments?.[0]?.name ?? null
+  const term =
+    run?.semester && run?.year
+      ? `${run.semester} ${run.year}`
+      : run?.semester || (run?.year ? String(run.year) : null)
+  const metaParts = [instructorNames, departmentName, duration, term].filter(
+    Boolean,
+  ) as string[]
+
+  const institutionLabel =
+    video?.departments?.[0]?.name?.toUpperCase() ??
+    playlist?.offered_by?.name?.toUpperCase() ??
+    null
+
+  const isLoading = videoLoading || (!!playlistId && playlistLoading)
+
+  const videoTitleLabel = video?.title?.trim() || "Untitled video"
+  const durationLabel = duration || "Unknown duration"
+  const topicNamesLabel =
+    topics
+      .map((t) => t.name)
+      .filter(Boolean)
+      .join(" · ") || "No topics listed"
+  const videoThumbnailAlt = `Video thumbnail for ${videoTitleLabel}. Duration: ${durationLabel}. Topics: ${topicNamesLabel}`
+  const loadingStatusMessage = isLoading
+    ? "Loading video details and player"
+    : "Video details loaded"
+
+  useEffect(() => {
+    if (!isLoading) {
+      titleRef.current?.focus()
+    }
+  }, [isLoading, videoId])
+
+  if (!showVideoPlaylistPage) {
+    return flagsLoaded ? notFound() : null
+  }
+
+  return (
+    <Styled.PageWrapper>
+      <Styled.SkipLinksNav aria-label="Skip links">
+        <Styled.SkipLink href="#video-detail-main">
+          Skip to main content
+        </Styled.SkipLink>
+        <Styled.SkipLink href="#video-player-region">
+          Skip to video player
+        </Styled.SkipLink>
+      </Styled.SkipLinksNav>
+
+      <Styled.ScreenReaderOnly
+        role="status"
+        aria-live="polite"
+        aria-atomic="true"
+      >
+        {loadingStatusMessage}
+      </Styled.ScreenReaderOnly>
+
+      {/* Breadcrumbs */}
+      <Styled.BreadcrumbBar>
+        <VideoContainer>
+          <Styled.StyledBreadcrumbs
+            variant="light"
+            ancestors={[
+              { href: "/", label: "Home" },
+              ...(playlist && playlistId
+                ? [
+                    {
+                      href: `/video-playlist/${playlistId}`,
+                      label: playlistLabel,
+                    },
+                  ]
+                : []),
+            ]}
+            current={video?.title}
+          />
+        </VideoContainer>
+      </Styled.BreadcrumbBar>
+
+      {/* Series navigation bar */}
+      {playlistId && (
+        <SeriesNavBar
+          playlistId={playlistId}
+          playlistLabel={playlistLabel}
+          videoId={videoId}
+          isLoading={isLoading}
+          videoItems={videoItems}
+          currentIndex={currentIndex}
+          videoPosition={videoPosition}
+          prevVideo={prevVideo}
+          nextVideo={nextVideo}
+          getVideoHref={getVideoHref}
+        />
+      )}
+
+      <Styled.ContentArea id="video-detail-main" tabIndex={-1}>
+        <VideoContainer>
+          {/* Institution / category label */}
+          {isLoading ? (
+            <Skeleton width={280} height={16} style={{ marginBottom: 8 }} />
+          ) : institutionLabel ? (
+            <Styled.InstitutionLabel>
+              {institutionLabel}
+            </Styled.InstitutionLabel>
+          ) : null}
+
+          {/* Video title */}
+          {isLoading ? (
+            <Skeleton
+              variant="text"
+              width="70%"
+              height={52}
+              style={{ marginBottom: 12 }}
+            />
+          ) : (
+            <Styled.VideoTitle ref={titleRef} tabIndex={-1}>
+              {video?.title}
+            </Styled.VideoTitle>
+          )}
+
+          {/* Video player */}
+          <Styled.PlayerWrapper
+            id="video-player-region"
+            tabIndex={-1}
+            role="region"
+            aria-label={`Video player for ${videoTitleLabel}`}
+            aria-describedby="video-description"
+          >
+            {isLoading ? (
+              <div
+                role="status"
+                aria-live="polite"
+                aria-label="Loading video player"
+              >
+                <Skeleton variant="rectangular" width="100%" height="100%" />
+              </div>
+            ) : sources.length > 0 ? (
+              <VideoJsPlayer
+                key={videoId}
+                sources={sources}
+                poster={
+                  sources[0]?.type === "video/youtube"
+                    ? undefined
+                    : (video?.video?.cover_image_url ??
+                      video?.image?.url ??
+                      undefined)
+                }
+                autoplay={false}
+                controls
+                fluid={false}
+                ariaLabel={`Video: ${videoTitleLabel}`}
+                ariaDescribedBy="video-description"
+              />
+            ) : video?.image?.url ? (
+              <Styled.ThumbnailWrapper>
+                <Image
+                  src={video.image.url}
+                  alt={videoThumbnailAlt}
+                  fill
+                  sizes="100vw"
+                  style={{ objectFit: "cover" }}
+                />
+              </Styled.ThumbnailWrapper>
+            ) : (
+              <>
+                <Styled.ScreenReaderOnly role="alert" aria-live="polite">
+                  No playable source available for this video.
+                </Styled.ScreenReaderOnly>
+                <Styled.NoVideoMessage>
+                  No playable source available for this video.
+                </Styled.NoVideoMessage>
+              </>
+            )}
+          </Styled.PlayerWrapper>
+
+          {/* UP NEXT */}
+          {!itemsLoading && nextVideo && (
+            <UpNextSection nextVideo={nextVideo} getVideoHref={getVideoHref} />
+          )}
+
+          {/* Meta row */}
+          {!isLoading && (
+            <MetaRow
+              metaParts={metaParts}
+              instructorNames={instructorNames}
+              departmentName={departmentName}
+              duration={duration}
+              term={term}
+            />
+          )}
+
+          {/* Description */}
+          {!isLoading && video?.description && (
+            <Styled.DescriptionText id="video-description">
+              {video.description}
+            </Styled.DescriptionText>
+          )}
+
+          {!isLoading && !video?.description && (
+            <Styled.ScreenReaderOnly id="video-description">
+              {videoTitleLabel}. Duration: {durationLabel}. Topics:{" "}
+              {topicNamesLabel}.
+            </Styled.ScreenReaderOnly>
+          )}
+
+          {/* Topic chips */}
+          {!isLoading && <TopicChips topics={topics} />}
+        </VideoContainer>
+      </Styled.ContentArea>
+    </Styled.PageWrapper>
+  )
+}
+
+export default VideoSeriesDetailPage
diff --git a/frontends/main/src/app-pages/VideoPlaylistCollectionPage/shared.styled.ts b/frontends/main/src/app-pages/VideoPlaylistCollectionPage/shared.styled.ts
new file mode 100644
index 0000000000..1570aaafc3
--- /dev/null
+++ b/frontends/main/src/app-pages/VideoPlaylistCollectionPage/shared.styled.ts
@@ -0,0 +1,42 @@
+import { styled, Breadcrumbs } from "ol-components"
+
+export const SkipLinksNav = styled.nav({
+  position: "absolute",
+  top: 0,
+  left: 0,
+  zIndex: 1000,
+})
+
+export const SkipLink = styled.a(({ theme }) => ({
+  position: "absolute",
+  left: "-9999px",
+  top: "auto",
+  width: 1,
+  height: 1,
+  overflow: "hidden",
+  backgroundColor: theme.custom.colors.white,
+  color: theme.custom.colors.black,
+  padding: "8px 12px",
+  border: `2px solid ${theme.custom.colors.red}`,
+  textDecoration: "none",
+  "&:focus": {
+    left: "16px",
+    top: "16px",
+    width: "auto",
+    height: "auto",
+  },
+}))
+
+export const StyledBreadcrumbs = styled(Breadcrumbs)(() => ({
+  "& > span > span": { paddingBottom: 0, paddingLeft: "4px" },
+}))
+
+export const NoVideoMessage = styled.div({
+  position: "absolute",
+  inset: 0,
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  color: "rgba(255,255,255,0.5)",
+  fontSize: 14,
+})
diff --git a/frontends/main/src/app-pages/VideoPlaylistCollectionPage/useSeriesNavigation.ts b/frontends/main/src/app-pages/VideoPlaylistCollectionPage/useSeriesNavigation.ts
new file mode 100644
index 0000000000..8b9bba8c7a
--- /dev/null
+++ b/frontends/main/src/app-pages/VideoPlaylistCollectionPage/useSeriesNavigation.ts
@@ -0,0 +1,57 @@
+import { useMemo } from "react"
+import { useQuery } from "@tanstack/react-query"
+import { learningResourceQueries } from "api/hooks/learningResources"
+import type { VideoResource } from "api/v1"
+import { VideoResourceResourceTypeEnum } from "api/v1"
+
+export type SeriesNavigation = {
+  videoItems: VideoResource[]
+  currentIndex: number
+  prevVideo: VideoResource | null
+  nextVideo: VideoResource | null
+  videoPosition: number | null
+  itemsLoading: boolean
+  getVideoHref: (v: VideoResource) => string
+}
+
+export function useSeriesNavigation(
+  videoId: number,
+  playlistId: number | null,
+): SeriesNavigation {
+  const { data: playlistItems, isLoading: itemsLoading } = useQuery({
+    ...learningResourceQueries.items(playlistId ?? 0, {
+      learning_resource_id: playlistId ?? 0,
+    }),
+    enabled: !!playlistId,
+  })
+
+  const videoItems = useMemo(
+    () =>
+      (playlistItems ?? []).filter(
+        (item): item is VideoResource =>
+          item.resource_type === VideoResourceResourceTypeEnum.Video,
+      ),
+    [playlistItems],
+  )
+
+  const currentIndex = videoItems.findIndex((item) => item.id === videoId)
+  const prevVideo = currentIndex > 0 ? videoItems[currentIndex - 1] : null
+  const nextVideo =
+    currentIndex >= 0 && currentIndex < videoItems.length - 1
+      ? videoItems[currentIndex + 1]
+      : null
+  const videoPosition = currentIndex >= 0 ? currentIndex + 1 : null
+
+  const getVideoHref = (v: VideoResource) =>
+    `/video-playlist/detail/${v.id}?playlist=${playlistId}`
+
+  return {
+    videoItems,
+    currentIndex,
+    prevVideo,
+    nextVideo,
+    videoPosition,
+    itemsLoading,
+    getVideoHref,
+  }
+}
diff --git a/frontends/main/src/app/video-playlist/detail/[id]/page.tsx b/frontends/main/src/app/video-playlist/detail/[id]/page.tsx
index 4fc4f127c8..f9825bfa7d 100644
--- a/frontends/main/src/app/video-playlist/detail/[id]/page.tsx
+++ b/frontends/main/src/app/video-playlist/detail/[id]/page.tsx
@@ -7,7 +7,7 @@ import {
   videoPlaylistQueries,
 } from "api/hooks/learningResources"
 import { getQueryClient } from "@/app/getQueryClient"
-import VideoDetailPage from "@/app-pages/VideoPlaylistCollectionPage/VideoDetailPage"
+import VideoDetailPageRouter from "@/app-pages/VideoPlaylistCollectionPage/VideoDetailPageRouter"
 import { notFound } from "next/navigation"
 
 export const metadata: Metadata = standardizeMetadata({
@@ -60,7 +60,7 @@ const Page: React.FC<PageProps<"/video-playlist/detail/[id]">> = async ({
 
   return (
     <HydrationBoundary state={dehydrate(queryClient)}>
-      <VideoDetailPage videoId={videoId} playlistId={playlistId} />
+      <VideoDetailPageRouter videoId={videoId} playlistId={playlistId} />
     </HydrationBoundary>
   )
 }

From d4deeb014b7a54f73a7eb0a4dcbc88e0fddb999a Mon Sep 17 00:00:00 2001
From: Doof <mitx-devops@mit.edu>
Date: Wed, 29 Apr 2026 12:50:20 +0000
Subject: [PATCH 10/10] Release 0.65.2

---
 RELEASE.rst      | 13 +++++++++++++
 main/settings.py |  2 +-
 2 files changed, 14 insertions(+), 1 deletion(-)

diff --git a/RELEASE.rst b/RELEASE.rst
index e7c6025532..8000229039 100644
--- a/RELEASE.rst
+++ b/RELEASE.rst
@@ -1,6 +1,19 @@
 Release Notes
 =============
 
+Version 0.65.2
+--------------
+
+- feat: implement the video series page design (#3258)
+- fix: improvements in podcast player and removal of video player from drawer  (#3241)
+- Add support for dynamically displaying the How You'll Learn cards (#3198)
+- MITxOnline program published status should consider include_in_learn_catalog (#3250)
+- do not promote ocw page contentfiles to resources (#3261)
+- dashboard b2c series certificate display (#3256)
+- flaky test test_learning_resources_serializer (#3252)
+- [pre-commit.ci] pre-commit autoupdate (#2973)
+- Update dependency sharp to v0.34.5 (#2707)
+
 Version 0.65.0 (Released April 28, 2026)
 --------------
 
diff --git a/main/settings.py b/main/settings.py
index 2d36ae984d..b0f609c9bd 100644
--- a/main/settings.py
+++ b/main/settings.py
@@ -35,7 +35,7 @@
 from main.settings_pluggy import *  # noqa: F403
 from openapi.settings_spectacular import open_spectacular_settings
 
-VERSION = "0.65.0"
+VERSION = "0.65.2"
 
 log = logging.getLogger()