From c04240c44479c8b664ed0d01fa794241e9936e3d Mon Sep 17 00:00:00 2001
From: Ahtesham Quraish <ahtesham.quraish@A006-01455.local>
Date: Mon, 23 Feb 2026 14:49:58 +0500
Subject: [PATCH 1/6] fix: add support for mp4 videos

---
 .../ProductPages/ProductPageTemplate.tsx      |  1 -
 .../node/MediaEmbed/MediaEmbedNodeView.tsx    | 27 +++++++++++++------
 .../node/MediaEmbed/MediaEmbedViewer.tsx      | 19 ++++++++++++-
 .../extensions/node/MediaEmbed/lib.ts         | 17 ++++++++++++
 4 files changed, 54 insertions(+), 10 deletions(-)

diff --git a/frontends/main/src/app-pages/ProductPages/ProductPageTemplate.tsx b/frontends/main/src/app-pages/ProductPages/ProductPageTemplate.tsx
index 7b7e89396f..6e3c7647d3 100644
--- a/frontends/main/src/app-pages/ProductPages/ProductPageTemplate.tsx
+++ b/frontends/main/src/app-pages/ProductPages/ProductPageTemplate.tsx
@@ -91,7 +91,6 @@ const MainCol = styled.div({
   minWidth: 0,
   display: "flex",
   flexDirection: "column",
-  minWidth: 0,
 })
 
 const SectionsWrapper = styled.div(({ theme }) => ({
diff --git a/frontends/main/src/page-components/TiptapEditor/extensions/node/MediaEmbed/MediaEmbedNodeView.tsx b/frontends/main/src/page-components/TiptapEditor/extensions/node/MediaEmbed/MediaEmbedNodeView.tsx
index 2ac8ff89d9..6d3e1a6f61 100644
--- a/frontends/main/src/page-components/TiptapEditor/extensions/node/MediaEmbed/MediaEmbedNodeView.tsx
+++ b/frontends/main/src/page-components/TiptapEditor/extensions/node/MediaEmbed/MediaEmbedNodeView.tsx
@@ -5,6 +5,7 @@ import { FullWidth, WideWidth, DefaultWidth } from "./Icons"
 import { RiCloseLargeLine } from "@remixicon/react"
 import { ActionButton } from "@mitodl/smoot-design"
 import { EditableCaption } from "../shared/EditableCaption"
+import { isVideoUrl } from "./lib"
 
 const StyledNodeViewWrapper = styled(NodeViewWrapper, {
   shouldForwardProp: (prop) =>
@@ -123,7 +124,16 @@ const MediaContainer = styled.div(({ theme }) => ({
     display: "block",
   },
 
-  ".layout-full & iframe": {
+  video: {
+    width: "100%",
+    height: "100%",
+    borderRadius: "6px",
+    display: "block",
+    objectFit: "contain",
+    backgroundColor: "#000",
+  },
+
+  ".layout-full & iframe, .layout-full & video": {
     borderRadius: 0,
   },
   ".ProseMirror-selectednode .layout-wide &": {
@@ -216,13 +226,14 @@ export const MediaEmbedNodeView = ({
       )}
 
       <MediaContainer>
-        <iframe
-          src={src}
-          frameBorder="0"
-          allowFullScreen
-          title={caption}
-          inert={editable}
-        />
+        {isVideoUrl(src) ? (
+          <video src={src} controls title={caption}>
+            <track kind="captions" />
+            Your browser does not support the video tag.
+          </video>
+        ) : (
+          <iframe src={src} frameBorder="0" allowFullScreen title={caption} />
+        )}
       </MediaContainer>
 
       <EditableCaption
diff --git a/frontends/main/src/page-components/TiptapEditor/extensions/node/MediaEmbed/MediaEmbedViewer.tsx b/frontends/main/src/page-components/TiptapEditor/extensions/node/MediaEmbed/MediaEmbedViewer.tsx
index 9e36d8ac54..410dc2efc8 100644
--- a/frontends/main/src/page-components/TiptapEditor/extensions/node/MediaEmbed/MediaEmbedViewer.tsx
+++ b/frontends/main/src/page-components/TiptapEditor/extensions/node/MediaEmbed/MediaEmbedViewer.tsx
@@ -1,6 +1,7 @@
 import React from "react"
 import styled from "@emotion/styled"
 import { EditableCaption } from "../shared/EditableCaption"
+import { isVideoUrl } from "./lib"
 
 const StyledWrapper = styled.div({
   position: "relative",
@@ -35,6 +36,15 @@ const MediaContainer = styled.div({
     borderRadius: "6px",
     display: "block",
   },
+
+  video: {
+    width: "100%",
+    height: "100%",
+    borderRadius: "6px",
+    display: "block",
+    objectFit: "contain",
+    backgroundColor: "#000",
+  },
 })
 
 interface MediaEmbedNode {
@@ -53,7 +63,14 @@ export const MediaEmbedViewer = ({ node }: { node?: MediaEmbedNode }) => {
   return (
     <StyledWrapper className={`layout-${layout}`}>
       <MediaContainer>
-        <iframe src={src} frameBorder="0" allowFullScreen title={caption} />
+        {isVideoUrl(src) ? (
+          <video src={src} controls title={caption}>
+            <track kind="captions" />
+            Your browser does not support the video tag.
+          </video>
+        ) : (
+          <iframe src={src} frameBorder="0" allowFullScreen title={caption} />
+        )}
       </MediaContainer>
 
       <EditableCaption
diff --git a/frontends/main/src/page-components/TiptapEditor/extensions/node/MediaEmbed/lib.ts b/frontends/main/src/page-components/TiptapEditor/extensions/node/MediaEmbed/lib.ts
index 5a7e8dbe2d..d43b1fe8bd 100644
--- a/frontends/main/src/page-components/TiptapEditor/extensions/node/MediaEmbed/lib.ts
+++ b/frontends/main/src/page-components/TiptapEditor/extensions/node/MediaEmbed/lib.ts
@@ -1,3 +1,12 @@
+export function isVideoUrl(url: string): boolean {
+  try {
+    const parsed = new URL(url)
+    return parsed.pathname.toLowerCase().endsWith(".mp4")
+  } catch {
+    return false
+  }
+}
+
 export function convertToEmbedUrl(url: string): string | null {
   let parsed: URL
 
@@ -9,6 +18,14 @@ export function convertToEmbedUrl(url: string): string | null {
 
   const hostname = parsed.hostname.replace("www.", "")
 
+  // --- MIT LEARN MP4 VIDEOS ---
+  if (
+    hostname === "learn.mit.edu" &&
+    parsed.pathname.toLowerCase().endsWith(".mp4")
+  ) {
+    return url // Return the URL as-is for video element
+  }
+
   // --- YOUTUBE WATCH ---
   if (hostname === "youtube.com" && parsed.pathname === "/watch") {
     const videoId = parsed.searchParams.get("v")

From 2ffae08b65e9009f08ab1dcb2ec6fb4b22473bc4 Mon Sep 17 00:00:00 2001
From: Ahtesham Quraish <ahtesham.quraish@A006-01455.local>
Date: Tue, 24 Feb 2026 14:13:24 +0500
Subject: [PATCH 2/6] add support for cloudfront

---
 .../LearningResource/LearningResourceNode.tsx |  3 +-
 .../node/MediaEmbed/MediaDisplay.tsx          | 61 +++++++++++++++++++
 .../node/MediaEmbed/MediaEmbedNodeView.tsx    | 50 +--------------
 .../node/MediaEmbed/MediaEmbedViewer.tsx      | 36 +----------
 .../extensions/node/MediaEmbed/lib.ts         | 33 +++++++++-
 5 files changed, 96 insertions(+), 87 deletions(-)
 create mode 100644 frontends/main/src/page-components/TiptapEditor/extensions/node/MediaEmbed/MediaDisplay.tsx

diff --git a/frontends/main/src/page-components/TiptapEditor/extensions/node/LearningResource/LearningResourceNode.tsx b/frontends/main/src/page-components/TiptapEditor/extensions/node/LearningResource/LearningResourceNode.tsx
index 7846752fd2..904ffec220 100644
--- a/frontends/main/src/page-components/TiptapEditor/extensions/node/LearningResource/LearningResourceNode.tsx
+++ b/frontends/main/src/page-components/TiptapEditor/extensions/node/LearningResource/LearningResourceNode.tsx
@@ -19,13 +19,12 @@ declare module "@tiptap/core" {
 
 const NodeWrapper = styled(NodeViewWrapper)({
   position: "relative",
-  marginBottom: "20px",
   cursor: "pointer",
 })
 
 const StyledLearningResourceCard = styled(ResourceCard)(({ theme }) => ({
   position: "relative",
-
+  marginBottom: "20px",
   ".ProseMirror-selectednode &": {
     borderColor: theme.custom.colors.red,
     userSelect: "none",
diff --git a/frontends/main/src/page-components/TiptapEditor/extensions/node/MediaEmbed/MediaDisplay.tsx b/frontends/main/src/page-components/TiptapEditor/extensions/node/MediaEmbed/MediaDisplay.tsx
new file mode 100644
index 0000000000..26dbacc411
--- /dev/null
+++ b/frontends/main/src/page-components/TiptapEditor/extensions/node/MediaEmbed/MediaDisplay.tsx
@@ -0,0 +1,61 @@
+import React from "react"
+import styled from "@emotion/styled"
+import { isVideoUrl } from "./lib"
+
+const MediaContainer = styled.div(({ theme }) => ({
+  position: "relative",
+  width: "100%",
+  aspectRatio: "16 / 9",
+  overflow: "hidden",
+
+  iframe: {
+    width: "100%",
+    height: "100%",
+    borderRadius: "6px",
+    display: "block",
+  },
+
+  video: {
+    width: "100%",
+    height: "100%",
+    borderRadius: "6px",
+    display: "block",
+    objectFit: "contain",
+    backgroundColor: "#000",
+  },
+
+  ".layout-full & iframe, .layout-full & video": {
+    borderRadius: 0,
+  },
+  ".ProseMirror-selectednode .layout-wide &": {
+    border: `1px solid ${theme.custom.colors.red}`,
+    padding: "8px",
+    borderRadius: "10px",
+  },
+  ".ProseMirror-selectednode .layout-full &": {
+    border: `1px solid ${theme.custom.colors.red}`,
+    padding: "8px 0",
+    borderWidth: "1px 0",
+  },
+}))
+
+interface MediaDisplayProps {
+  src: string
+  caption?: string
+}
+
+export const MediaDisplay = ({ src, caption }: MediaDisplayProps) => {
+  return (
+    <MediaContainer>
+      {isVideoUrl(src) ? (
+        <video src={src} controls title={caption}>
+          {/* Empty track required by jsx-a11y/media-has-caption */}
+          <track kind="captions" />
+          Your browser does not support the video tag.
+        </video>
+      ) : (
+        <iframe src={src} frameBorder="0" allowFullScreen title={caption} />
+      )}
+    </MediaContainer>
+  )
+}
diff --git a/frontends/main/src/page-components/TiptapEditor/extensions/node/MediaEmbed/MediaEmbedNodeView.tsx b/frontends/main/src/page-components/TiptapEditor/extensions/node/MediaEmbed/MediaEmbedNodeView.tsx
index 6d3e1a6f61..3e54241190 100644
--- a/frontends/main/src/page-components/TiptapEditor/extensions/node/MediaEmbed/MediaEmbedNodeView.tsx
+++ b/frontends/main/src/page-components/TiptapEditor/extensions/node/MediaEmbed/MediaEmbedNodeView.tsx
@@ -5,7 +5,7 @@ import { FullWidth, WideWidth, DefaultWidth } from "./Icons"
 import { RiCloseLargeLine } from "@remixicon/react"
 import { ActionButton } from "@mitodl/smoot-design"
 import { EditableCaption } from "../shared/EditableCaption"
-import { isVideoUrl } from "./lib"
+import { MediaDisplay } from "./MediaDisplay"
 
 const StyledNodeViewWrapper = styled(NodeViewWrapper, {
   shouldForwardProp: (prop) =>
@@ -111,43 +111,6 @@ const MediaLayoutToolbar = styled.div({
   },
 })
 
-const MediaContainer = styled.div(({ theme }) => ({
-  position: "relative",
-  width: "100%",
-  aspectRatio: "16 / 9",
-  overflow: "hidden",
-
-  iframe: {
-    width: "100%",
-    height: "100%",
-    borderRadius: "6px",
-    display: "block",
-  },
-
-  video: {
-    width: "100%",
-    height: "100%",
-    borderRadius: "6px",
-    display: "block",
-    objectFit: "contain",
-    backgroundColor: "#000",
-  },
-
-  ".layout-full & iframe, .layout-full & video": {
-    borderRadius: 0,
-  },
-  ".ProseMirror-selectednode .layout-wide &": {
-    border: `1px solid ${theme.custom.colors.red}`,
-    padding: "8px",
-    borderRadius: "10px",
-  },
-  ".ProseMirror-selectednode .layout-full &": {
-    border: `1px solid ${theme.custom.colors.red}`,
-    padding: "8px 0",
-    borderWidth: "1px 0",
-  },
-}))
-
 interface MediaEmbedNodeProps {
   node: NodeViewProps["node"]
   editor: NodeViewProps["editor"]
@@ -225,16 +188,7 @@ export const MediaEmbedNodeView = ({
         </MediaLayoutToolbar>
       )}
 
-      <MediaContainer>
-        {isVideoUrl(src) ? (
-          <video src={src} controls title={caption}>
-            <track kind="captions" />
-            Your browser does not support the video tag.
-          </video>
-        ) : (
-          <iframe src={src} frameBorder="0" allowFullScreen title={caption} />
-        )}
-      </MediaContainer>
+      <MediaDisplay src={src} caption={caption} />
 
       <EditableCaption
         caption={caption}
diff --git a/frontends/main/src/page-components/TiptapEditor/extensions/node/MediaEmbed/MediaEmbedViewer.tsx b/frontends/main/src/page-components/TiptapEditor/extensions/node/MediaEmbed/MediaEmbedViewer.tsx
index 410dc2efc8..180aa1a5b0 100644
--- a/frontends/main/src/page-components/TiptapEditor/extensions/node/MediaEmbed/MediaEmbedViewer.tsx
+++ b/frontends/main/src/page-components/TiptapEditor/extensions/node/MediaEmbed/MediaEmbedViewer.tsx
@@ -1,7 +1,7 @@
 import React from "react"
 import styled from "@emotion/styled"
 import { EditableCaption } from "../shared/EditableCaption"
-import { isVideoUrl } from "./lib"
+import { MediaDisplay } from "./MediaDisplay"
 
 const StyledWrapper = styled.div({
   position: "relative",
@@ -24,29 +24,6 @@ const StyledWrapper = styled.div({
   },
 })
 
-const MediaContainer = styled.div({
-  position: "relative",
-  width: "100%",
-  aspectRatio: "16 / 9",
-  overflow: "hidden",
-
-  iframe: {
-    width: "100%",
-    height: "100%",
-    borderRadius: "6px",
-    display: "block",
-  },
-
-  video: {
-    width: "100%",
-    height: "100%",
-    borderRadius: "6px",
-    display: "block",
-    objectFit: "contain",
-    backgroundColor: "#000",
-  },
-})
-
 interface MediaEmbedNode {
   attrs: {
     src?: string
@@ -62,16 +39,7 @@ export const MediaEmbedViewer = ({ node }: { node?: MediaEmbedNode }) => {
 
   return (
     <StyledWrapper className={`layout-${layout}`}>
-      <MediaContainer>
-        {isVideoUrl(src) ? (
-          <video src={src} controls title={caption}>
-            <track kind="captions" />
-            Your browser does not support the video tag.
-          </video>
-        ) : (
-          <iframe src={src} frameBorder="0" allowFullScreen title={caption} />
-        )}
-      </MediaContainer>
+      <MediaDisplay src={src} caption={caption} />
 
       <EditableCaption
         caption={caption}
diff --git a/frontends/main/src/page-components/TiptapEditor/extensions/node/MediaEmbed/lib.ts b/frontends/main/src/page-components/TiptapEditor/extensions/node/MediaEmbed/lib.ts
index d43b1fe8bd..ec44e1d57e 100644
--- a/frontends/main/src/page-components/TiptapEditor/extensions/node/MediaEmbed/lib.ts
+++ b/frontends/main/src/page-components/TiptapEditor/extensions/node/MediaEmbed/lib.ts
@@ -1,7 +1,10 @@
 export function isVideoUrl(url: string): boolean {
   try {
     const parsed = new URL(url)
-    return parsed.pathname.toLowerCase().endsWith(".mp4")
+    return (
+      parsed.pathname.toLowerCase().endsWith(".mp4") ||
+      parsed.pathname.toLowerCase().endsWith(".m3u8")
+    )
   } catch {
     return false
   }
@@ -15,17 +18,41 @@ export function convertToEmbedUrl(url: string): string | null {
   } catch {
     return null // not a valid URL
   }
-
   const hostname = parsed.hostname.replace("www.", "")
 
+  // Helper to ensure URL has protocol
+  const ensureProtocol = (urlOrHost: string) => {
+    return urlOrHost.startsWith("http") ? urlOrHost : `https://${urlOrHost}`
+  }
+
   // --- MIT LEARN MP4 VIDEOS ---
   if (
-    hostname === "learn.mit.edu" &&
+    hostname ===
+      new URL(
+        ensureProtocol(
+          process.env.NEXT_PUBLIC_ORIGIN || "https://learn.mit.edu",
+        ),
+      ).hostname.replace("www.", "") &&
     parsed.pathname.toLowerCase().endsWith(".mp4")
   ) {
     return url // Return the URL as-is for video element
   }
 
+  // --- CLOUDFRONT M3U8 VIDEOS ---
+
+  if (
+    hostname ===
+      new URL(
+        ensureProtocol(
+          process.env.NEXT_PUBLIC_CLOUDFRONT_DOMAIN ||
+            "https://d3tsb3m56iwvoq.cloudfront.net",
+        ),
+      ).hostname.replace("www.", "") &&
+    parsed.pathname.toLowerCase().endsWith(".m3u8")
+  ) {
+    return url // Return the URL as-is for video element
+  }
+
   // --- YOUTUBE WATCH ---
   if (hostname === "youtube.com" && parsed.pathname === "/watch") {
     const videoId = parsed.searchParams.get("v")

From d1d6977bd6d9df49082a0accaf73e192618332e3 Mon Sep 17 00:00:00 2001
From: Ahtesham Quraish <ahtesham.quraish@A006-01455.local>
Date: Thu, 26 Feb 2026 22:27:15 +0500
Subject: [PATCH 3/6] added package of video

---
 frontends/main/package.json |   2 +
 yarn.lock                   | 229 ++++++++++++++++++++++++++++++++++--
 2 files changed, 224 insertions(+), 7 deletions(-)

diff --git a/frontends/main/package.json b/frontends/main/package.json
index 7a4aa92817..4817890415 100644
--- a/frontends/main/package.json
+++ b/frontends/main/package.json
@@ -40,6 +40,7 @@
     "@tiptap/react": "^3.13.0",
     "@tiptap/starter-kit": "^3.13.0",
     "@tiptap/static-renderer": "^3.13.0",
+    "@types/video.js": "^7.3.58",
     "api": "workspace:*",
     "classnames": "^2.5.1",
     "formik": "^2.4.6",
@@ -62,6 +63,7 @@
     "sharp": "0.34.4",
     "slick-carousel": "^1.8.1",
     "tiny-invariant": "^1.3.3",
+    "video.js": "8.23.7",
     "yup": "^1.4.0"
   },
   "devDependencies": {
diff --git a/yarn.lock b/yarn.lock
index b98444a3b2..63ff83ff91 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1718,6 +1718,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/runtime@npm:^7.11.2, @babel/runtime@npm:^7.28.4":
+  version: 7.28.6
+  resolution: "@babel/runtime@npm:7.28.6"
+  checksum: 10/fbcd439cb74d4a681958eb064c509829e3f46d8a4bfaaf441baa81bb6733d1e680bccc676c813883d7741bcaada1d0d04b15aa320ef280b5734e2192b50decf9
+  languageName: node
+  linkType: hard
+
 "@babel/runtime@npm:^7.12.5, @babel/runtime@npm:^7.18.3, @babel/runtime@npm:^7.20.13, @babel/runtime@npm:^7.24.4, @babel/runtime@npm:^7.26.0, @babel/runtime@npm:^7.26.10, @babel/runtime@npm:^7.5.5, @babel/runtime@npm:^7.8.7":
   version: 7.28.3
   resolution: "@babel/runtime@npm:7.28.3"
@@ -1725,13 +1732,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/runtime@npm:^7.28.4":
-  version: 7.28.6
-  resolution: "@babel/runtime@npm:7.28.6"
-  checksum: 10/fbcd439cb74d4a681958eb064c509829e3f46d8a4bfaaf441baa81bb6733d1e680bccc676c813883d7741bcaada1d0d04b15aa320ef280b5734e2192b50decf9
-  languageName: node
-  linkType: hard
-
 "@babel/template@npm:^7.25.7, @babel/template@npm:^7.3.3":
   version: 7.25.7
   resolution: "@babel/template@npm:7.25.7"
@@ -7635,6 +7635,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/video.js@npm:^7.3.58":
+  version: 7.3.58
+  resolution: "@types/video.js@npm:7.3.58"
+  checksum: 10/1e34e0914529d358ae6463ce57d0910a736fb018e1d7462ae83ab7b7e065d251e2ed6c4631fefa09c8857382f2daffa3e7081202d52625ddba3a1fba86bf6816
+  languageName: node
+  linkType: hard
+
 "@types/whatwg-mimetype@npm:^3.0.2":
   version: 3.0.2
   resolution: "@types/whatwg-mimetype@npm:3.0.2"
@@ -8311,6 +8318,45 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@videojs/http-streaming@npm:^3.17.3, @videojs/http-streaming@npm:^3.17.4":
+  version: 3.17.4
+  resolution: "@videojs/http-streaming@npm:3.17.4"
+  dependencies:
+    "@babel/runtime": "npm:^7.12.5"
+    "@videojs/vhs-utils": "npm:^4.1.1"
+    aes-decrypter: "npm:^4.0.2"
+    global: "npm:^4.4.0"
+    m3u8-parser: "npm:^7.2.0"
+    mpd-parser: "npm:^1.3.1"
+    mux.js: "npm:7.1.0"
+    video.js: "npm:^7 || ^8"
+  peerDependencies:
+    video.js: ^8.19.0
+  checksum: 10/9ee755ebecd204085b8e1bb302a68faafbadac2f888e28c61bf7b96f91ebdc0d2614668e274d958fc80549ed29c2540bdf6ebee3c890c596bec41c943899be2f
+  languageName: node
+  linkType: hard
+
+"@videojs/vhs-utils@npm:^4.0.0, @videojs/vhs-utils@npm:^4.1.1":
+  version: 4.1.1
+  resolution: "@videojs/vhs-utils@npm:4.1.1"
+  dependencies:
+    "@babel/runtime": "npm:^7.12.5"
+    global: "npm:^4.4.0"
+  checksum: 10/060b9e95aa75ed480bb597c2051b5ba362a9e1cfa5fdf6a51671bc00c8afe3ceee61ce2006157af40429799857d6637b72e5b9aeb7c20f6c999bd823715962b9
+  languageName: node
+  linkType: hard
+
+"@videojs/xhr@npm:2.7.0":
+  version: 2.7.0
+  resolution: "@videojs/xhr@npm:2.7.0"
+  dependencies:
+    "@babel/runtime": "npm:^7.5.5"
+    global: "npm:~4.4.0"
+    is-function: "npm:^1.0.1"
+  checksum: 10/7da65adc9f9317c1dcf81e1d8504f06cd8bde675241da5b8fcb385e90d9f8b2d0efdd10f520105d055f75340b7b8413f251b6ef1676638c0cd979181a5380d9d
+  languageName: node
+  linkType: hard
+
 "@vitest/expect@npm:2.0.5":
   version: 2.0.5
   resolution: "@vitest/expect@npm:2.0.5"
@@ -8573,6 +8619,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@xmldom/xmldom@npm:^0.8.3":
+  version: 0.8.11
+  resolution: "@xmldom/xmldom@npm:0.8.11"
+  checksum: 10/f6d6ffdf71cf19d9b3c10e978fad40d2f85453bf5b2aa05be8aa0c5ad13f84690c3153316729213cc652d06ec12c605ddb0aa03886f1d73d51b974b4105d31e3
+  languageName: node
+  linkType: hard
+
 "@xtuc/ieee754@npm:^1.2.0":
   version: 1.2.0
   resolution: "@xtuc/ieee754@npm:1.2.0"
@@ -8682,6 +8735,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"aes-decrypter@npm:^4.0.2":
+  version: 4.0.2
+  resolution: "aes-decrypter@npm:4.0.2"
+  dependencies:
+    "@babel/runtime": "npm:^7.12.5"
+    "@videojs/vhs-utils": "npm:^4.1.1"
+    global: "npm:^4.4.0"
+    pkcs7: "npm:^1.0.4"
+  checksum: 10/89f0f90fe728e5df9408f1a2bd5bc3afbaf475b2b871cbcbc9e034e392ef5b579d689c71af3479099347cb40113c4f7272d6f4666bf996abb43b06dece960452
+  languageName: node
+  linkType: hard
+
 "agent-base@npm:6":
   version: 6.0.2
   resolution: "agent-base@npm:6.0.2"
@@ -11069,6 +11134,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"dom-walk@npm:^0.1.0":
+  version: 0.1.2
+  resolution: "dom-walk@npm:0.1.2"
+  checksum: 10/19eb0ce9c6de39d5e231530685248545d9cd2bd97b2cb3486e0bfc0f2a393a9addddfd5557463a932b52fdfcf68ad2a619020cd2c74a5fe46fbecaa8e80872f3
+  languageName: node
+  linkType: hard
+
 "domain-browser@npm:^4.22.0":
   version: 4.23.0
   resolution: "domain-browser@npm:4.23.0"
@@ -13241,6 +13313,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"global@npm:4.4.0, global@npm:^4.3.1, global@npm:^4.4.0, global@npm:~4.4.0":
+  version: 4.4.0
+  resolution: "global@npm:4.4.0"
+  dependencies:
+    min-document: "npm:^2.19.0"
+    process: "npm:^0.11.10"
+  checksum: 10/9c057557c8f5a5bcfbeb9378ba4fe2255d04679452be504608dd5f13b54edf79f7be1db1031ea06a4ec6edd3b9f5f17d2d172fb47e6c69dae57fd84b7e72b77f
+  languageName: node
+  linkType: hard
+
 "globals@npm:16.4.0":
   version: 16.4.0
   resolution: "globals@npm:16.4.0"
@@ -14285,6 +14367,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"is-function@npm:^1.0.1":
+  version: 1.0.2
+  resolution: "is-function@npm:1.0.2"
+  checksum: 10/7d564562e07b4b51359547d3ccc10fb93bb392fd1b8177ae2601ee4982a0ece86d952323fc172a9000743a3971f09689495ab78a1d49a9b14fc97a7e28521dc0
+  languageName: node
+  linkType: hard
+
 "is-generator-fn@npm:^2.0.0":
   version: 2.1.0
   resolution: "is-generator-fn@npm:2.1.0"
@@ -15985,6 +16074,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"m3u8-parser@npm:^7.2.0":
+  version: 7.2.0
+  resolution: "m3u8-parser@npm:7.2.0"
+  dependencies:
+    "@babel/runtime": "npm:^7.12.5"
+    "@videojs/vhs-utils": "npm:^4.1.1"
+    global: "npm:^4.4.0"
+  checksum: 10/323a8bfb1670e9bccaac83b3215ae617149b686ac9d470830f91f399f8232d903b7288356377cb2a94680f2d31066be76693abdd6ba540ec3cfa8de1e75e21f8
+  languageName: node
+  linkType: hard
+
 "magic-string@npm:0.30.8":
   version: 0.30.8
   resolution: "magic-string@npm:0.30.8"
@@ -16050,6 +16150,7 @@ __metadata:
     "@types/react-dom": "npm:^19.2.3"
     "@types/react-slick": "npm:^0.23.13"
     "@types/slick-carousel": "npm:^1"
+    "@types/video.js": "npm:^7.3.58"
     api: "workspace:*"
     classnames: "npm:^2.5.1"
     eslint: "npm:8.57.1"
@@ -16082,6 +16183,7 @@ __metadata:
     tiny-invariant: "npm:^1.3.3"
     ts-jest: "npm:^29.2.4"
     typescript: "npm:^5.5.4"
+    video.js: "npm:8.23.7"
     yup: "npm:^1.4.0"
   languageName: unknown
   linkType: soft
@@ -16843,6 +16945,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"min-document@npm:^2.19.0":
+  version: 2.19.2
+  resolution: "min-document@npm:2.19.2"
+  dependencies:
+    dom-walk: "npm:^0.1.0"
+  checksum: 10/9c98ea950451ac3292762fdc7a076ef2d365d795280a2a9357a5d1a17d80c44ecab2354ad507432411c1605515731259b41ce97b87f0b7126e1dfe610b2674ae
+  languageName: node
+  linkType: hard
+
 "min-indent@npm:^1.0.0, min-indent@npm:^1.0.1":
   version: 1.0.1
   resolution: "min-indent@npm:1.0.1"
@@ -17047,6 +17158,20 @@ __metadata:
   languageName: node
   linkType: hard
 
+"mpd-parser@npm:^1.3.1":
+  version: 1.3.1
+  resolution: "mpd-parser@npm:1.3.1"
+  dependencies:
+    "@babel/runtime": "npm:^7.12.5"
+    "@videojs/vhs-utils": "npm:^4.0.0"
+    "@xmldom/xmldom": "npm:^0.8.3"
+    global: "npm:^4.4.0"
+  bin:
+    mpd-to-m3u8-json: bin/parse.js
+  checksum: 10/eaffe86a791449072faf5d0a47a06690acca79014868c8e1dee28947f6280a12a9cfcad3eb8fc7f722eea4afd2a9d324788da6efea63b2bef3c9bc561332b6fd
+  languageName: node
+  linkType: hard
+
 "mri@npm:^1.1.0":
   version: 1.2.0
   resolution: "mri@npm:1.2.0"
@@ -17068,6 +17193,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"mux.js@npm:7.1.0, mux.js@npm:^7.0.1":
+  version: 7.1.0
+  resolution: "mux.js@npm:7.1.0"
+  dependencies:
+    "@babel/runtime": "npm:^7.11.2"
+    global: "npm:^4.4.0"
+  bin:
+    muxjs-transmux: bin/transmux.js
+  checksum: 10/843edc7c18b6c3366281cfea786d7d9b36d5a3c42c463c18aed9f8ac15bdd5b84b4e1e025371b047be778cc54fd83b3f447da8a624ccd7529a310d3a65e7b99e
+  languageName: node
+  linkType: hard
+
 "nanoid@npm:^3.3.11, nanoid@npm:^3.3.6, nanoid@npm:^3.3.8":
   version: 3.3.11
   resolution: "nanoid@npm:3.3.11"
@@ -18081,6 +18218,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"pkcs7@npm:^1.0.4":
+  version: 1.0.4
+  resolution: "pkcs7@npm:1.0.4"
+  dependencies:
+    "@babel/runtime": "npm:^7.5.5"
+  bin:
+    pkcs7: bin/cli.js
+  checksum: 10/faf9c0230bb3461c36d39b054d71e95f347302cc762574ddb53e4e7c288d3442931d29a4527b5a6059b59ae4470104df102f9173a85c57611907a71cc64ff5e9
+  languageName: node
+  linkType: hard
+
 "pkg-dir@npm:^4.1.0, pkg-dir@npm:^4.2.0":
   version: 4.2.0
   resolution: "pkg-dir@npm:4.2.0"
@@ -22880,6 +23028,73 @@ __metadata:
   languageName: node
   linkType: hard
 
+"video.js@npm:8.23.7":
+  version: 8.23.7
+  resolution: "video.js@npm:8.23.7"
+  dependencies:
+    "@babel/runtime": "npm:^7.28.4"
+    "@videojs/http-streaming": "npm:^3.17.3"
+    "@videojs/vhs-utils": "npm:^4.1.1"
+    "@videojs/xhr": "npm:2.7.0"
+    aes-decrypter: "npm:^4.0.2"
+    global: "npm:4.4.0"
+    m3u8-parser: "npm:^7.2.0"
+    mpd-parser: "npm:^1.3.1"
+    mux.js: "npm:^7.0.1"
+    videojs-contrib-quality-levels: "npm:4.1.0"
+    videojs-font: "npm:4.2.0"
+    videojs-vtt.js: "npm:0.15.5"
+  checksum: 10/62859ac85ab5bf186cbaf3c0538d9c62aed7bc900150ba88f0a466f3414d73b01ca57895723773ad7f43a666e9b676336c1af90e4d9786ca45e4d7ccff181049
+  languageName: node
+  linkType: hard
+
+"video.js@npm:^7 || ^8":
+  version: 8.23.8
+  resolution: "video.js@npm:8.23.8"
+  dependencies:
+    "@babel/runtime": "npm:^7.28.4"
+    "@videojs/http-streaming": "npm:^3.17.4"
+    "@videojs/vhs-utils": "npm:^4.1.1"
+    "@videojs/xhr": "npm:2.7.0"
+    aes-decrypter: "npm:^4.0.2"
+    global: "npm:4.4.0"
+    m3u8-parser: "npm:^7.2.0"
+    mpd-parser: "npm:^1.3.1"
+    mux.js: "npm:^7.0.1"
+    videojs-contrib-quality-levels: "npm:4.1.0"
+    videojs-font: "npm:4.2.0"
+    videojs-vtt.js: "npm:0.15.5"
+  checksum: 10/a3501b82690e12f725574e0a4545c5bf32434f72b4902a10214f0dcab5566b8dcee05f0608f7df42bb9824bb9ea5f3503f62123571c76b3e7c1743488923d14e
+  languageName: node
+  linkType: hard
+
+"videojs-contrib-quality-levels@npm:4.1.0":
+  version: 4.1.0
+  resolution: "videojs-contrib-quality-levels@npm:4.1.0"
+  dependencies:
+    global: "npm:^4.4.0"
+  peerDependencies:
+    video.js: ^8
+  checksum: 10/e8948607b77cfaef2e45d6d3b12b4585f81887cc8ae645bd1dedef1c39657156e0eaae444074089c0a287f820928b4825dd0c9f133e2be5dee0e6c894bf340b2
+  languageName: node
+  linkType: hard
+
+"videojs-font@npm:4.2.0":
+  version: 4.2.0
+  resolution: "videojs-font@npm:4.2.0"
+  checksum: 10/38b966e228a44873f24c6d3d045629ed25e5bc3160245682901019304d13854a7bca49a91a96b88f37ce839c6ee7d6026fce34054cb391cbbcc5627bef2cc4f2
+  languageName: node
+  linkType: hard
+
+"videojs-vtt.js@npm:0.15.5":
+  version: 0.15.5
+  resolution: "videojs-vtt.js@npm:0.15.5"
+  dependencies:
+    global: "npm:^4.3.1"
+  checksum: 10/87028a40aabf447a2726a4c991ab131fac897cce41d9aef3b34519363811d8c74376f9bf9d37a1769d8739fba9b20bf9a381633d0349560fcda4f0b713d2a1b9
+  languageName: node
+  linkType: hard
+
 "vite-compatible-readable-stream@npm:^3.6.1":
   version: 3.6.1
   resolution: "vite-compatible-readable-stream@npm:3.6.1"

From 7c29a91b81686a3ea86a1f72cce08e183068c9e2 Mon Sep 17 00:00:00 2001
From: Ahtesham Quraish <ahtesham.quraish@192.168.10.13>
Date: Fri, 27 Feb 2026 16:03:48 +0500
Subject: [PATCH 4/6] address review

---
 .../node/MediaEmbed/MediaDisplay.tsx          | 19 ++--
 .../node/MediaEmbed/VideoJsPlayer.tsx         | 98 ++++++++++++++++++-
 .../extensions/node/MediaEmbed/lib.ts         | 22 +----
 3 files changed, 109 insertions(+), 30 deletions(-)

diff --git a/frontends/main/src/page-components/TiptapEditor/extensions/node/MediaEmbed/MediaDisplay.tsx b/frontends/main/src/page-components/TiptapEditor/extensions/node/MediaEmbed/MediaDisplay.tsx
index 86560a0714..56cd9fb39c 100644
--- a/frontends/main/src/page-components/TiptapEditor/extensions/node/MediaEmbed/MediaDisplay.tsx
+++ b/frontends/main/src/page-components/TiptapEditor/extensions/node/MediaEmbed/MediaDisplay.tsx
@@ -1,6 +1,6 @@
 import React from "react"
 import styled from "@emotion/styled"
-import { isVideoUrl, isHlsVideo } from "./lib"
+import { isVideoUrl } from "./lib"
 import { VideoJsPlayer } from "./VideoJsPlayer"
 
 const MediaContainer = styled.div(({ theme }) => ({
@@ -56,16 +56,15 @@ export const MediaDisplay = ({ src, caption }: MediaDisplayProps) => {
   return (
     <MediaContainer>
       {isVideoUrl(src) ? (
-        isHlsVideo(src) ? (
-          <VideoJsPlayer src={src} caption={caption} />
-        ) : (
-          // eslint-disable-next-line jsx-a11y/media-has-caption
-          <video src={src} controls title={caption}>
-            Your browser does not support the video tag.
-          </video>
-        )
+        <VideoJsPlayer src={src} caption={caption} />
       ) : (
-        <iframe src={src} frameBorder="0" allowFullScreen title={caption} />
+        <iframe
+          src={src}
+          frameBorder="0"
+          allowFullScreen
+          title={caption}
+          inert={true}
+        />
       )}
     </MediaContainer>
   )
diff --git a/frontends/main/src/page-components/TiptapEditor/extensions/node/MediaEmbed/VideoJsPlayer.tsx b/frontends/main/src/page-components/TiptapEditor/extensions/node/MediaEmbed/VideoJsPlayer.tsx
index 7d04ec4f68..7483099d65 100644
--- a/frontends/main/src/page-components/TiptapEditor/extensions/node/MediaEmbed/VideoJsPlayer.tsx
+++ b/frontends/main/src/page-components/TiptapEditor/extensions/node/MediaEmbed/VideoJsPlayer.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useRef } from "react"
+import React, { useEffect, useRef, useState } from "react"
 import videojs from "video.js"
 import type Player from "video.js/dist/types/player"
 import "video.js/dist/video-js.css"
@@ -8,12 +8,88 @@ interface VideoJsPlayerProps {
   caption?: string
 }
 
+const getVideoType = (url: string): string => {
+  const lowerUrl = url.toLowerCase()
+  if (lowerUrl.endsWith(".m3u8")) {
+    return "application/x-mpegURL"
+  }
+  if (lowerUrl.endsWith(".mp4")) {
+    return "video/mp4"
+  }
+  // Default to mp4 for other cases
+  return "video/mp4"
+}
+
+const deriveMediaUrls = (
+  m3u8Url: string,
+): { subtitlesUrl: string; posterUrl: string } | null => {
+  try {
+    // Extract directory and filename
+    const lastSlashIndex = m3u8Url.lastIndexOf("/")
+    if (lastSlashIndex === -1) return null
+
+    const directory = m3u8Url.substring(0, lastSlashIndex)
+    const filename = m3u8Url.substring(lastSlashIndex + 1)
+
+    // Extract base name (remove .5M.m3u8 or similar pattern)
+    // Pattern: video_HLS1.5M.m3u8 -> video_HLS1
+    const baseMatch = filename.match(/^(.+?)(?:\.\d+[MK])?\.m3u8$/)
+    if (!baseMatch) return null
+
+    const baseName = baseMatch[1]
+
+    return {
+      subtitlesUrl: `${directory}/${baseName}.srt`,
+      posterUrl: `${directory}/${baseName}_cover.jpeg`,
+    }
+  } catch {
+    return null
+  }
+}
+
+const checkUrlExists = async (url: string): Promise<boolean> => {
+  try {
+    const response = await fetch(url, { method: "HEAD" })
+    return response.ok
+  } catch {
+    return false
+  }
+}
+
 export const VideoJsPlayer: React.FC<VideoJsPlayerProps> = ({
   src,
   caption,
 }) => {
   const videoRef = useRef<HTMLDivElement>(null)
   const playerRef = useRef<Player | null>(null)
+  const [posterUrl, setPosterUrl] = useState<string | undefined>()
+  const [subtitlesUrl, setSubtitlesUrl] = useState<string | undefined>()
+
+  // Check for related media files (poster and subtitles) for m3u8 videos
+  useEffect(() => {
+    const loadRelatedMedia = async () => {
+      if (!src.toLowerCase().endsWith(".m3u8")) {
+        return
+      }
+
+      const derivedUrls = deriveMediaUrls(src)
+      if (!derivedUrls) return
+      console.log("Derived URLs:", derivedUrls)
+      // Check if poster exists
+      const posterExists = await checkUrlExists(derivedUrls.posterUrl)
+      if (posterExists) {
+        setPosterUrl(derivedUrls.posterUrl)
+      }
+
+      // Check if subtitles exist
+      const subtitlesExist = await checkUrlExists(derivedUrls.subtitlesUrl)
+      if (subtitlesExist) {
+        setSubtitlesUrl(derivedUrls.subtitlesUrl)
+      }
+    }
+
+    loadRelatedMedia()
+  }, [src])
 
   useEffect(() => {
     // Make sure Video.js player is only initialized once
@@ -27,7 +103,9 @@ export const VideoJsPlayer: React.FC<VideoJsPlayerProps> = ({
         controls: true,
         responsive: true,
         fluid: true,
+        aspectRatio: "16:9",
         preload: "auto",
+        poster: posterUrl,
         html5: {
           vhs: {
             // Enable HLS.js integration
@@ -37,18 +115,32 @@ export const VideoJsPlayer: React.FC<VideoJsPlayerProps> = ({
         sources: [
           {
             src,
-            type: "application/x-mpegURL",
+            type: getVideoType(src),
           },
         ],
       }))
 
+      // Add subtitles track if available
+      if (subtitlesUrl) {
+        player.addRemoteTextTrack(
+          {
+            kind: "captions",
+            src: subtitlesUrl,
+            srclang: "en",
+            label: "English",
+            default: true,
+          },
+          false,
+        )
+      }
+
       // Error handling
       player.on("error", () => {
         const error = player.error()
         console.error("Video.js error:", error)
       })
     }
-  }, [src])
+  }, [src, posterUrl, subtitlesUrl])
 
   // Dispose the Video.js player when the component unmounts
   useEffect(() => {
diff --git a/frontends/main/src/page-components/TiptapEditor/extensions/node/MediaEmbed/lib.ts b/frontends/main/src/page-components/TiptapEditor/extensions/node/MediaEmbed/lib.ts
index 3d607a9c81..008c183552 100644
--- a/frontends/main/src/page-components/TiptapEditor/extensions/node/MediaEmbed/lib.ts
+++ b/frontends/main/src/page-components/TiptapEditor/extensions/node/MediaEmbed/lib.ts
@@ -10,15 +10,6 @@ export function isVideoUrl(url: string): boolean {
   }
 }
 
-export function isHlsVideo(url: string): boolean {
-  try {
-    const parsed = new URL(url)
-    return parsed.pathname.toLowerCase().endsWith(".m3u8")
-  } catch {
-    return false
-  }
-}
-
 export function convertToEmbedUrl(url: string): string | null {
   let parsed: URL
 
@@ -32,9 +23,7 @@ export function convertToEmbedUrl(url: string): string | null {
   // --- MIT LEARN MP4 VIDEOS ---
   if (
     hostname ===
-      new URL(process.env.NEXT_PUBLIC_ORIGIN || "https://learn.mit.edu")
-        .hostname &&
-    parsed.pathname.toLowerCase().endsWith(".mp4")
+    new URL(process.env.NEXT_PUBLIC_ORIGIN || "https://learn.mit.edu").hostname
   ) {
     return url // Return the URL as-is for video element
   }
@@ -43,11 +32,10 @@ export function convertToEmbedUrl(url: string): string | null {
 
   if (
     hostname ===
-      new URL(
-        process.env.NEXT_PUBLIC_CLOUDFRONT_DOMAIN ||
-          "https://d3tsb3m56iwvoq.cloudfront.net",
-      ).hostname &&
-    parsed.pathname.toLowerCase().endsWith(".m3u8")
+    new URL(
+      process.env.NEXT_PUBLIC_CLOUDFRONT_DOMAIN ||
+        "https://d3tsb3m56iwvoq.cloudfront.net",
+    ).hostname
   ) {
     return url // Return the URL as-is for video element
   }

From 65e0f370b1e5b6d505eb7d873899af052156b6a0 Mon Sep 17 00:00:00 2001
From: Ahtesham Quraish <ahtesham.quraish@192.168.10.13>
Date: Fri, 27 Feb 2026 18:00:55 +0500
Subject: [PATCH 5/6] fix cors issue

---
 .../node/MediaEmbed/VideoJsPlayer.test.tsx    |  9 +++
 .../node/MediaEmbed/VideoJsPlayer.tsx         | 81 +++++++------------
 2 files changed, 40 insertions(+), 50 deletions(-)

diff --git a/frontends/main/src/page-components/TiptapEditor/extensions/node/MediaEmbed/VideoJsPlayer.test.tsx b/frontends/main/src/page-components/TiptapEditor/extensions/node/MediaEmbed/VideoJsPlayer.test.tsx
index efb9017dce..392bf8ec93 100644
--- a/frontends/main/src/page-components/TiptapEditor/extensions/node/MediaEmbed/VideoJsPlayer.test.tsx
+++ b/frontends/main/src/page-components/TiptapEditor/extensions/node/MediaEmbed/VideoJsPlayer.test.tsx
@@ -8,6 +8,15 @@ jest.mock("video.js", () => {
     on: jest.fn(),
     isDisposed: jest.fn(() => false),
     error: jest.fn(),
+    ready: jest.fn((callback) => {
+      // Call the callback immediately in tests
+      callback()
+    }),
+    addRemoteTextTrack: jest.fn(),
+    textTracks: jest.fn(() => ({
+      length: 0,
+      tracks_: [],
+    })),
   }
 
   const mockFn = jest.fn(() => mockPlayer)
diff --git a/frontends/main/src/page-components/TiptapEditor/extensions/node/MediaEmbed/VideoJsPlayer.tsx b/frontends/main/src/page-components/TiptapEditor/extensions/node/MediaEmbed/VideoJsPlayer.tsx
index 7483099d65..e50cb356b1 100644
--- a/frontends/main/src/page-components/TiptapEditor/extensions/node/MediaEmbed/VideoJsPlayer.tsx
+++ b/frontends/main/src/page-components/TiptapEditor/extensions/node/MediaEmbed/VideoJsPlayer.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useRef, useState } from "react"
+import React, { useEffect, useRef } from "react"
 import videojs from "video.js"
 import type Player from "video.js/dist/types/player"
 import "video.js/dist/video-js.css"
@@ -47,49 +47,19 @@ const deriveMediaUrls = (
   }
 }
 
-const checkUrlExists = async (url: string): Promise<boolean> => {
-  try {
-    const response = await fetch(url, { method: "HEAD" })
-    return response.ok
-  } catch {
-    return false
-  }
-}
-
 export const VideoJsPlayer: React.FC<VideoJsPlayerProps> = ({
   src,
   caption,
 }) => {
   const videoRef = useRef<HTMLDivElement>(null)
   const playerRef = useRef<Player | null>(null)
-  const [posterUrl, setPosterUrl] = useState<string | undefined>()
-  const [subtitlesUrl, setSubtitlesUrl] = useState<string | undefined>()
 
-  // Check for related media files (poster and subtitles) for m3u8 videos
-  useEffect(() => {
-    const loadRelatedMedia = async () => {
-      if (!src.toLowerCase().endsWith(".m3u8")) {
-        return
-      }
-
-      const derivedUrls = deriveMediaUrls(src)
-      if (!derivedUrls) return
-      console.log("Derived URLs:", derivedUrls)
-      // Check if poster exists
-      const posterExists = await checkUrlExists(derivedUrls.posterUrl)
-      if (posterExists) {
-        setPosterUrl(derivedUrls.posterUrl)
-      }
-
-      // Check if subtitles exist
-      const subtitlesExist = await checkUrlExists(derivedUrls.subtitlesUrl)
-      if (subtitlesExist) {
-        setSubtitlesUrl(derivedUrls.subtitlesUrl)
-      }
-    }
-
-    loadRelatedMedia()
-  }, [src])
+  // Derive poster and subtitles URLs synchronously for m3u8 videos
+  const derivedUrls = src.toLowerCase().endsWith(".m3u8")
+    ? deriveMediaUrls(src)
+    : null
+  const posterUrl = derivedUrls?.posterUrl
+  const subtitlesUrl = derivedUrls?.subtitlesUrl
 
   useEffect(() => {
     // Make sure Video.js player is only initialized once
@@ -120,19 +90,30 @@ export const VideoJsPlayer: React.FC<VideoJsPlayerProps> = ({
         ],
       }))
 
-      // Add subtitles track if available
-      if (subtitlesUrl) {
-        player.addRemoteTextTrack(
-          {
-            kind: "captions",
-            src: subtitlesUrl,
-            srclang: "en",
-            label: "English",
-            default: true,
-          },
-          false,
-        )
-      }
+      // Wait for player to be ready before adding text tracks
+      player.ready(() => {
+        // Add subtitles track if available
+        if (subtitlesUrl) {
+          player.addRemoteTextTrack(
+            {
+              kind: "captions",
+              src: subtitlesUrl,
+              srclang: "en",
+              label: "English",
+              default: true,
+            },
+            false,
+          )
+          // Force the track to show immediately to trigger loading
+          const textTracks = player.textTracks()
+          for (let i = 0; i < textTracks.length; i++) {
+            const track = textTracks.tracks_[i]
+            if (track) {
+              track.mode = "showing"
+            }
+          }
+        }
+      })
 
       // Error handling
       player.on("error", () => {

From 982f5085f43693a2d483f1b6bd2d2345560c8949 Mon Sep 17 00:00:00 2001
From: Ahtesham Quraish <ahtesham.quraish@192.168.10.13>
Date: Fri, 27 Feb 2026 18:37:41 +0500
Subject: [PATCH 6/6] fix the track issue in case srt error

---
 .../node/MediaEmbed/VideoJsPlayer.tsx         | 22 ++++++++++++++-----
 1 file changed, 17 insertions(+), 5 deletions(-)

diff --git a/frontends/main/src/page-components/TiptapEditor/extensions/node/MediaEmbed/VideoJsPlayer.tsx b/frontends/main/src/page-components/TiptapEditor/extensions/node/MediaEmbed/VideoJsPlayer.tsx
index e50cb356b1..887bb83fa8 100644
--- a/frontends/main/src/page-components/TiptapEditor/extensions/node/MediaEmbed/VideoJsPlayer.tsx
+++ b/frontends/main/src/page-components/TiptapEditor/extensions/node/MediaEmbed/VideoJsPlayer.tsx
@@ -100,16 +100,28 @@ export const VideoJsPlayer: React.FC<VideoJsPlayerProps> = ({
               src: subtitlesUrl,
               srclang: "en",
               label: "English",
-              default: true,
+              default: false,
             },
             false,
           )
-          // Force the track to show immediately to trigger loading
+
+          // Get the track that was just added
           const textTracks = player.textTracks()
-          for (let i = 0; i < textTracks.length; i++) {
-            const track = textTracks.tracks_[i]
+          const lastTrackIndex = textTracks.length - 1
+          if (lastTrackIndex >= 0) {
+            const track = textTracks.tracks_[lastTrackIndex]
             if (track) {
-              track.mode = "showing"
+              // Handle track loading errors silently
+              track.addEventListener("error", () => {
+                console.warn("Subtitle track failed to load:", subtitlesUrl)
+                // Hide the track on error to prevent error messages from displaying
+                track.mode = "disabled"
+              })
+
+              // Only show the track if it loads successfully
+              track.addEventListener("load", () => {
+                track.mode = "showing"
+              })
             }
           }
         }