Add HLS.js support to VideoPlayer component

package.json

@@ -47,6 +47,7 @@
     "autoprefixer": "^10.4.19",
     "globals": "^15.14.0",
     "happy-dom": "^16.7.0",
+    "hls.js": "^1.5.20",
     "postcss": "^8.5.1",
     "storybook": "^8.2.7",
     "tailwindcss": "^3.4.17",

src/components/TimeDotMarker.tsx → src/components/atoms/TimeDotMarker.tsx

@@ -1,4 +1,4 @@
-import { useLens } from "components/TimelineContext";
+import { useLens } from "context/TimelineContext";
 
 export function TimeDotMarker({
   timestampMilliseconds,

src/components/TimeSegmentMarker.tsx → src/components/atoms/TimeSegmentMarker.tsx

@@ -1,4 +1,4 @@
-import { useLens } from "./TimelineContext";
+import { useLens } from "../../context/TimelineContext";
 
 export default function TimeSegmentMarker({
   startMilliseconds,

src/components/TimeTable.tsx → src/components/molecules/TimeTable.tsx

@@ -1,6 +1,5 @@
-import React from "react";
 import type { Section } from "types";
-import TimeLink from "./atoms/TimeLink";
+import TimeLink from "../atoms/TimeLink";
 
 function TimeTable({
   rows,

src/components/TimelineControls.tsx → src/components/molecules/TimelineControls.tsx

@@ -1,6 +1,6 @@
-import { useLens } from "components/TimelineContext";
-import TimelineLegend from "components/TimelineLegend";
 import Button from "components/atoms/Button";
+import TimelineLegend from "components/atoms/TimelineLegend";
+import { useLens } from "context/TimelineContext";
 
 export type TimelineControlsProps = {
   followPlayback: boolean;
@@ -18,11 +18,11 @@ export default function TimelineControls({
   };
 
   const handleZoomIn = () => {
-    lens.zoomIn();
+    lens.zoomIn(0.5);
   };
 
   const handleZoomOut = () => {
-    lens.zoomOut();
+    lens.zoomOut(0.5);
   };
 
   return (

src/components/TimelineElement.tsx → src/components/molecules/TimelineElement.tsx

@@ -1,10 +1,10 @@
 import type { TimelineItem } from "utils/timeline";
-import { TimeDotMarker } from "./TimeDotMarker";
-import TimeSegmentMarker from "./TimeSegmentMarker";
+import { TimeDotMarker } from "../atoms/TimeDotMarker";
+import TimeSegmentMarker from "../atoms/TimeSegmentMarker";
 import {
   type TimelineElementType,
   timelineElementTypeColors,
-} from "./TimelineLegend";
+} from "../atoms/TimelineLegend";
 
 interface TimelineElementProps {
   content: TimelineItem<TimelineElementType>;

src/components/TimestampedEventLog.tsx → src/components/molecules/TimestampedEventLog.tsx

@@ -1,7 +1,7 @@
 import { createRef } from "react";
 import type { LogEvent } from "types";
-import useScrollToNearestElementToTime from "../hooks/useScrollToNearestElementToTime";
-import TimeLink from "./atoms/TimeLink";
+import useScrollToNearestElementToTime from "../../hooks/useScrollToNearestElementToTime";
+import TimeLink from "../atoms/TimeLink";
 
 interface TimestampedEventLogProps<T extends LogEvent> {
   log: T[];

src/components/VideoPlayer.tsx → src/components/molecules/VideoPlayer.tsx

@@ -1,6 +1,7 @@
-import VideoPlayerControls from "components/VideoPlayerControls";
-import VideoPlayerProgressBar from "components/VideoPlayerProgressBar";
-import { forwardRef, useImperativeHandle, useState } from "react";
+import VideoPlayerControls from "components/atoms/VideoPlayerControls";
+import VideoPlayerProgressBar from "components/atoms/VideoPlayerProgressBar";
+import Hls from "hls.js";
+import { forwardRef, useEffect, useImperativeHandle, useState } from "react";
 
 interface VideoPlayerProps {
   videoUrl: string;
@@ -16,6 +17,16 @@ export default forwardRef<VideoPlayerRef, VideoPlayerProps>(
   function VideoPlayer({ videoUrl, onTimeUpdate, onEnd }, ref) {
     const [video, setVideo] = useState<HTMLVideoElement | null>(null);
 
+    useEffect(() => {
+      if (!video) {
+        return;
+      }
+
+      const hls = new Hls();
+      hls.loadSource(videoUrl);
+      hls.attachMedia(video);
+    }, [video, videoUrl]);
+
     const timeUpdate = () => {
       if (video) {
         onTimeUpdate?.(video.currentTime * 1000);
@@ -42,16 +53,28 @@ export default forwardRef<VideoPlayerRef, VideoPlayerProps>(
       }
     };
 
+    if (!Hls.isSupported()) {
+      return (
+        <div>
+          <h1>HLS is not supported</h1>
+          <p>
+            HLS is not supported in this browser. Please try a different browser
+            to view this content.
+          </p>
+        </div>
+      );
+    }
+
     return (
       <>
+        {/* biome-ignore lint/a11y/useMediaCaption: <explanation> */}
         <video
           ref={setVideo}
           className="w-full"
           onTimeUpdate={timeUpdate}
           onEnded={onEnd}
           onError={console.error}
         >
-          <source type="video/mp4" src={videoUrl} />
           Your browser does not support the video tag.
         </video>
 

src/components/Timeline.tsx → src/components/organisms/Timeline.tsx

@@ -1,10 +1,10 @@
-import TimeSegmentMarker from "components/TimeSegmentMarker";
-import { useLens } from "components/TimelineContext";
-import TimelineElement from "components/TimelineElement";
+import TimeSegmentMarker from "components/atoms/TimeSegmentMarker";
 import {
   type TimelineElementType,
   timelineElementTypeColors,
-} from "components/TimelineLegend";
+} from "components/atoms/TimelineLegend";
+import TimelineElement from "components/molecules/TimelineElement";
+import { useLens } from "context/TimelineContext";
 import { useEffect, useRef, useState } from "react";
 import type { VideoMetadata } from "types";
 import { createTimeline, generateKey } from "utils/timeline";
@@ -156,12 +156,12 @@
   };
 
   return (
     <div
       className="relative h-16 cursor-pointer select-none overflow-hidden rounded bg-gray-200 dark:bg-gray-600"
       ref={containerRef}
       onMouseDown={handleDragStart}
       onClick={handleContainerClick}
     >
       {elements.map((content) => (
         <TimelineElement key={generateKey(content)} content={content} />
       ))}

src/components/pages/VideoSelectionPage.tsx

@@ -1,13 +1,15 @@
-import EditableTimestampedEventLog from "components/EditableTimestampedEventLog";
-import TimeTable from "components/TimeTable";
-import Timeline from "components/Timeline";
-import { TimelineProvider } from "components/TimelineContext";
-import TimelineControls from "components/TimelineControls";
-import TimestampedEventLog from "components/TimestampedEventLog";
-import VideoPlayer, { type VideoPlayerRef } from "components/VideoPlayer";
-import Viewport from "components/Viewport";
 import Heading from "components/atoms/Heading";
+import EditableTimestampedEventLog from "components/molecules/EditableTimestampedEventLog";
+import TimeTable from "components/molecules/TimeTable";
+import TimelineControls from "components/molecules/TimelineControls";
+import TimestampedEventLog from "components/molecules/TimestampedEventLog";
+import VideoPlayer, {
+  type VideoPlayerRef,
+} from "components/molecules/VideoPlayer";
+import Viewport from "components/molecules/Viewport";
 import Sidebar from "components/organisms/Sidebar";
+import Timeline from "components/organisms/Timeline";
+import { TimelineProvider } from "context/TimelineContext";
 import rawContent from "data.json";
 import useKeyboardShortcuts from "hooks/useKeyboardShortcuts";
 import { useRef, useState } from "react";

src/data.json

@@ -1,6 +1,6 @@
 {
   "title": "Coding Livestream 1",
-  "video_url": "/ep131.mp4",
+  "video_url": "https://bitdash-a.akamaihd.net/content/sintel/hls/playlist.m3u8",
   "length": "PT56M35S",
   "transcript": [
     {