Reactify MSE player component (#9163)

* make mse a functional component with react hooks

* iOS 17 fixes

* birdseye mse

* remove debug

* fix test

web/src/components/player/BirdseyeLivePlayer.tsx

@@ -2,6 +2,7 @@ import WebRtcPlayer from "./WebRTCPlayer";
 import { BirdseyeConfig } from "@/types/frigateConfig";
 import ActivityIndicator from "../ui/activity-indicator";
 import JSMpegPlayer from "./JSMpegPlayer";
+import MSEPlayer from "./MsePlayer";
 
 type LivePlayerProps = {
   birdseyeConfig: BirdseyeConfig;
@@ -19,7 +20,20 @@ export default function BirdseyeLivePlayer({
       </div>
     );
   } else if (liveMode == "mse") {
-    return <div className="max-w-5xl">Not yet implemented</div>;
+    if ("MediaSource" in window || "ManagedMediaSource" in window) {
+      return (
+        <div className="max-w-5xl">
+          <MSEPlayer camera="birdseye" />
+        </div>
+      );
+    } else {
+      return (
+        <div className="w-5xl text-center text-sm">
+          MSE is only supported on iOS 17.1+. You'll need to update if available
+          or use jsmpeg / webRTC streams. See the docs for more info.
+        </div>
+      );
+    }
   } else if (liveMode == "jsmpeg") {
     return (
       <div className={`max-w-[${birdseyeConfig.width}px]`}>