Add exports message and default to webrtc on < iOS 17.1 (#12281)

web/src/components/player/BirdseyeLivePlayer.tsx

@@ -41,8 +41,7 @@ export default function BirdseyeLivePlayer({
     } else {
       player = (
         <div className="w-5xl text-center text-sm">
-          MSE is only supported on iOS 17.1+. You'll need to update if available
+          iOS 17.1 or greater is required for this live stream type.
-          or use jsmpeg / webRTC streams. See the docs for more info.
         </div>
       );
     }

web/src/components/player/LivePlayer.tsx

@@ -161,8 +161,7 @@ export default function LivePlayer({
     } else {
       player = (
         <div className="w-5xl text-center text-sm">
-          MSE is only supported on iOS 17.1+. You'll need to update if available
+          iOS 17.1 or greater is required for this live stream type.
-          or use jsmpeg / webRTC streams. See the docs for more info.
         </div>
       );
     }

web/src/pages/Exports.tsx

@@ -15,6 +15,7 @@ import { Input } from "@/components/ui/input";
 import { DeleteClipType, Export } from "@/types/export";
 import axios from "axios";
 import { useCallback, useEffect, useMemo, useState } from "react";
+import { LuFolderX } from "react-icons/lu";
 import useSWR from "swr";
 
 function Exports() {
@@ -128,6 +129,7 @@ function Exports() {
         </DialogContent>
       </Dialog>
 
+      {exports && (
         <div className="flex w-full items-center justify-center p-2">
           <Input
             className="w-full bg-muted md:w-1/3"
@@ -136,9 +138,10 @@ function Exports() {
             onChange={(e) => setSearch(e.target.value)}
           />
         </div>
+      )}
 
       <div className="w-full overflow-hidden">
-        {exports && filteredExports && (
+        {exports && filteredExports && filteredExports.length > 0 ? (
           <div className="scrollbar-container grid size-full gap-2 overflow-y-auto sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
             {Object.values(exports).map((item) => (
               <ExportCard
@@ -155,6 +158,11 @@ function Exports() {
               />
             ))}
           </div>
+        ) : (
+          <div className="absolute left-1/2 top-1/2 flex -translate-x-1/2 -translate-y-1/2 flex-col items-center justify-center text-center">
+            <LuFolderX className="size-16" />
+            No exports found
+          </div>
         )}
       </div>
     </div>

web/src/views/live/DraggableGridLayout.tsx

@@ -81,6 +81,10 @@ export default function DraggableGridLayout({
 
   useEffect(() => {
     if (!cameras) return;
+
+    const mseSupported =
+      "MediaSource" in window || "ManagedMediaSource" in window;
+
     const newPreferredLiveModes = cameras.reduce(
       (acc, camera) => {
         const isRestreamed =
@@ -89,7 +93,11 @@ export default function DraggableGridLayout({
             camera.live.stream_name,
           );
 
+        if (!mseSupported) {
+          acc[camera.name] = isRestreamed ? "webrtc" : "jsmpeg";
+        } else {
           acc[camera.name] = isRestreamed ? "mse" : "jsmpeg";
+        }
         return acc;
       },
       {} as { [key: string]: LivePlayerMode },

web/src/views/live/LiveBirdseyeView.tsx

@@ -96,7 +96,10 @@ export default function LiveBirdseyeView({
       return "jsmpeg";
     }
 
-    if (isSafari) {
+    if (
+      isSafari ||
+      !("MediaSource" in window || "ManagedMediaSource" in window)
+    ) {
       return "webrtc";
     }
 

web/src/views/live/LiveCameraView.tsx

@@ -222,6 +222,10 @@ export default function LiveCameraView({
       return "jsmpeg";
     }
 
+    if (!("MediaSource" in window || "ManagedMediaSource" in window)) {
+      return "webrtc";
+    }
+
     return "mse";
   }, [lowBandwidth, mic, webRTC, isRestreamed]);
 

web/src/views/live/LiveDashboardView.tsx

@@ -112,6 +112,10 @@ export default function LiveDashboardView({
 
   useEffect(() => {
     if (!cameras) return;
+
+    const mseSupported =
+      "MediaSource" in window || "ManagedMediaSource" in window;
+
     const newPreferredLiveModes = cameras.reduce(
       (acc, camera) => {
         const isRestreamed =
@@ -120,7 +124,11 @@ export default function LiveDashboardView({
             camera.live.stream_name,
           );
 
+        if (!mseSupported) {
+          acc[camera.name] = isRestreamed ? "webrtc" : "jsmpeg";
+        } else {
           acc[camera.name] = isRestreamed ? "mse" : "jsmpeg";
+        }
         return acc;
       },
       {} as { [key: string]: LivePlayerMode },