add support for cloudfront

Author: Ahtesham Quraish

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",

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>
+  )
+}

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}

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}

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")