Use react lazy to break js files into smaller chunks & remove videojs in favor of hls.js (#10431)

* Use dynamic imports to reduce initial load times

Remove videojs

* Convert to using hls.js instead of videojs

* Improve mobile controls experience

* Cleanup

* Ensure playback rate stays teh same when source changes

* Use webp for latest camera image

* Switch to hls.js on error

* Don't rerun error if hls already tried

* Fix error checking

* also check for media decode error to fallback to HLS

---------

Co-authored-by: Josh Hawkins <32435876+hawkeye217@users.noreply.github.com>

web/src/pages/UIPlayground.tsx

@@ -23,6 +23,7 @@ import {
   SelectValue,
 } from "@/components/ui/select";
 import BirdseyeLivePlayer from "@/components/player/BirdseyeLivePlayer";
+import HlsVideoPlayer from "@/components/player/HlsVideoPlayer";
 
 // Color data
 const colors = [
@@ -157,6 +158,8 @@ function UIPlayground() {
     timestampSpread: 15,
   });
 
+  const videoRef = useRef<HTMLVideoElement | null>(null);
+
   const possibleZoomLevels = [
     { segmentDuration: 60, timestampSpread: 15 },
     { segmentDuration: 30, timestampSpread: 5 },
@@ -290,6 +293,14 @@ function UIPlayground() {
             </div>
           </div>
 
+          <div className="absolute left-96 top-96 bottom-96 right-96">
+            <HlsVideoPlayer
+              className="size-full"
+              videoRef={videoRef}
+              currentSource="http://localhost:5173/vod/side_cam/start/1710345600/end/1710349200/master.m3u8"
+            />
+          </div>
+
           <div className="w-[55px] md:w-[100px] overflow-y-auto no-scrollbar">
             {!isEventsReviewTimeline && (
               <MotionReviewTimeline