fix: add support for mp4 videos

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": {

frontends/main/src/page-components/TiptapEditor/extensions/node/MediaEmbed/MediaDisplay.tsx

@@ -0,0 +1,71 @@
+import React from "react"
+import styled from "@emotion/styled"
+import { isVideoUrl } from "./lib"
+import { VideoJsPlayer } from "./VideoJsPlayer"
+
+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",
+  },
+
+  // Video.js player styling
+  ".video-js": {
+    width: "100%",
+    height: "100%",
+    borderRadius: "6px",
+  },
+
+  ".layout-full & iframe, .layout-full & video, .layout-full & .video-js": {
+    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) ? (
+        <VideoJsPlayer src={src} caption={caption} />
+      ) : (
+        <iframe
+          src={src}
+          frameBorder="0"
+          allowFullScreen
+          title={caption}
+          inert={true}
+        />
+      )}
+    </MediaContainer>
+  )
+}

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 { MediaDisplay } from "./MediaDisplay"
 
 const StyledNodeViewWrapper = styled(NodeViewWrapper, {
   shouldForwardProp: (prop) =>
@@ -110,34 +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",
-  },
-
-  ".layout-full & iframe": {
-    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"]
@@ -215,15 +188,7 @@ export const MediaEmbedNodeView = ({
         </MediaLayoutToolbar>
       )}
 
-      <MediaContainer>
-        <iframe
-          src={src}
-          frameBorder="0"
-          allowFullScreen
-          title={caption}
-          inert={editable}
-        />
-      </MediaContainer>
+      <MediaDisplay src={src} caption={caption} />
 
       <EditableCaption
         caption={caption}

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 { MediaDisplay } from "./MediaDisplay"
 
 const StyledWrapper = styled.div({
   position: "relative",
@@ -23,20 +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",
-  },
-})
-
 interface MediaEmbedNode {
   attrs: {
     src?: string
@@ -52,9 +39,7 @@ export const MediaEmbedViewer = ({ node }: { node?: MediaEmbedNode }) => {
 
   return (
     <StyledWrapper className={`layout-${layout}`}>
-      <MediaContainer>
-        <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/VideoJsPlayer.test.tsx

@@ -0,0 +1,169 @@
+import React from "react"
+import { render, screen } from "@testing-library/react"
+
+// Mock video.js with all functionality inline
+jest.mock("video.js", () => {
+  const mockPlayer = {
+    dispose: jest.fn(),
+    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)
+
+  return Object.assign(mockFn, {
+    browser: {
+      IS_SAFARI: false,
+    },
+  })
+})
+
+jest.mock("video.js/dist/video-js.css", () => ({}))
+
+// Import component and videojs
+import { VideoJsPlayer } from "./VideoJsPlayer"
+import videojs from "video.js"
+
+// Type the mocked videojs
+const mockedVideojs = videojs as jest.MockedFunction<typeof videojs>
+
+describe("VideoJsPlayer", () => {
+  const defaultProps = {
+    src: "https://example.cloudfront.net/video.m3u8",
+    caption: "Test Video",
+  }
+
+  beforeEach(() => {
+    jest.clearAllMocks()
+  })
+
+  it("renders a video player container", () => {
+    render(<VideoJsPlayer {...defaultProps} />)
+    const container = screen.getByTitle(defaultProps.caption)
+    expect(container).toBeInTheDocument()
+  })
+
+  it("initializes video.js player with correct options", () => {
+    render(<VideoJsPlayer {...defaultProps} />)
+
+    expect(mockedVideojs).toHaveBeenCalledWith(
+      expect.any(HTMLElement),
+      expect.objectContaining({
+        controls: true,
+        responsive: true,
+        fluid: true,
+        preload: "auto",
+      }),
+    )
+  })
+
+  it("sets HLS source correctly", () => {
+    render(<VideoJsPlayer {...defaultProps} />)
+
+    const [[, options]] = mockedVideojs.mock.calls
+    expect(options.sources).toEqual([
+      {
+        src: defaultProps.src,
+        type: "application/x-mpegURL",
+      },
+    ])
+  })
+
+  it("registers error handler", () => {
+    render(<VideoJsPlayer {...defaultProps} />)
+
+    const mockPlayer = mockedVideojs.mock.results[0].value
+    expect(mockPlayer.on).toHaveBeenCalledWith("error", expect.any(Function))
+  })
+
+  it("handles player errors by logging", () => {
+    const consoleSpy = jest.spyOn(console, "error").mockImplementation()
+    const error = { code: 4, message: "Network error" }
+
+    render(<VideoJsPlayer {...defaultProps} />)
+
+    const mockPlayer = mockedVideojs.mock.results[0].value
+    mockPlayer.error.mockReturnValue(error)
+
+    // Trigger the error handler
+    const errorHandler = mockPlayer.on.mock.calls.find(
+      ([event]: [string]) => event === "error",
+    )?.[1]
+    errorHandler?.()
+
+    expect(consoleSpy).toHaveBeenCalledWith("Video.js error:", error)
+    consoleSpy.mockRestore()
+  })
+
+  it("disposes player on unmount", () => {
+    const { unmount } = render(<VideoJsPlayer {...defaultProps} />)
+
+    const mockPlayer = mockedVideojs.mock.results[0].value
+
+    unmount()
+
+    expect(mockPlayer.isDisposed).toHaveBeenCalled()
+    expect(mockPlayer.dispose).toHaveBeenCalled()
+  })
+
+  it("does not dispose if already disposed", () => {
+    const { unmount } = render(<VideoJsPlayer {...defaultProps} />)
+
+    const mockPlayer = mockedVideojs.mock.results[0].value
+    mockPlayer.isDisposed.mockReturnValue(true)
+
+    unmount()
+
+    expect(mockPlayer.isDisposed).toHaveBeenCalled()
+    expect(mockPlayer.dispose).not.toHaveBeenCalled()
+  })
+
+  it("initializes player only once", () => {
+    const { rerender } = render(<VideoJsPlayer {...defaultProps} />)
+
+    expect(mockedVideojs).toHaveBeenCalledTimes(1)
+
+    rerender(<VideoJsPlayer {...defaultProps} />)
+
+    expect(mockedVideojs).toHaveBeenCalledTimes(1)
+  })
+
+  it("does not reinitialize when src changes", () => {
+    const { rerender } = render(<VideoJsPlayer {...defaultProps} />)
+
+    expect(mockedVideojs).toHaveBeenCalledTimes(1)
+
+    const newSrc = "https://example.cloudfront.net/new-video.m3u8"
+    rerender(<VideoJsPlayer src={newSrc} caption={defaultProps.caption} />)
+
+    // Player is not reinitialized when src changes because playerRef.current exists
+    // To change video source, the player would need to be updated via player.src()
+    expect(mockedVideojs).toHaveBeenCalledTimes(1)
+  })
+
+  it("applies correct CSS classes to video element", () => {
+    render(<VideoJsPlayer {...defaultProps} />)
+
+    const videoElement = mockedVideojs.mock.calls[0][0] as HTMLElement
+    expect(videoElement.classList.contains("vjs-big-play-centered")).toBe(true)
+  })
+
+  it("sets container with data-vjs-player attribute", () => {
+    render(<VideoJsPlayer {...defaultProps} />)
+
+    const titleElement = screen.getByTitle(defaultProps.caption)
+    const playerContainer = titleElement.parentElement
+    expect(playerContainer).toHaveAttribute("data-vjs-player")
+    expect(playerContainer).toHaveStyle({ width: "100%", height: "100%" })
+  })
+})