From 1f4ca32e8c19204bf2f8612267195041bd72adc5 Mon Sep 17 00:00:00 2001
From: Josh Hawkins <32435876+hawkeye217@users.noreply.github.com>
Date: Wed, 3 Jul 2024 08:44:25 -0500
Subject: [PATCH] Add exports message and default to webrtc on < iOS 17.1
 (#12281)

---
 .../components/player/BirdseyeLivePlayer.tsx  |  3 +--
 web/src/components/player/LivePlayer.tsx      |  3 +--
 web/src/pages/Exports.tsx                     | 26 ++++++++++++-------
 web/src/views/live/DraggableGridLayout.tsx    | 10 ++++++-
 web/src/views/live/LiveBirdseyeView.tsx       |  5 +++-
 web/src/views/live/LiveCameraView.tsx         |  4 +++
 web/src/views/live/LiveDashboardView.tsx      | 10 ++++++-
 7 files changed, 45 insertions(+), 16 deletions(-)

diff --git a/web/src/components/player/BirdseyeLivePlayer.tsx b/web/src/components/player/BirdseyeLivePlayer.tsx
index 235e14785..07fbcdbfb 100644
--- a/web/src/components/player/BirdseyeLivePlayer.tsx
+++ b/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
-          or use jsmpeg / webRTC streams. See the docs for more info.
+          iOS 17.1 or greater is required for this live stream type.
         </div>
       );
     }
diff --git a/web/src/components/player/LivePlayer.tsx b/web/src/components/player/LivePlayer.tsx
index 1343e8aae..4a5bd8c02 100644
--- a/web/src/components/player/LivePlayer.tsx
+++ b/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
-          or use jsmpeg / webRTC streams. See the docs for more info.
+          iOS 17.1 or greater is required for this live stream type.
         </div>
       );
     }
diff --git a/web/src/pages/Exports.tsx b/web/src/pages/Exports.tsx
index 964a77426..9cf9f4dcc 100644
--- a/web/src/pages/Exports.tsx
+++ b/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,17 +129,19 @@ function Exports() {
         </DialogContent>
       </Dialog>
 
-      <div className="flex w-full items-center justify-center p-2">
-        <Input
-          className="w-full bg-muted md:w-1/3"
-          placeholder="Search"
-          value={search}
-          onChange={(e) => setSearch(e.target.value)}
-        />
-      </div>
+      {exports && (
+        <div className="flex w-full items-center justify-center p-2">
+          <Input
+            className="w-full bg-muted md:w-1/3"
+            placeholder="Search"
+            value={search}
+            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>
diff --git a/web/src/views/live/DraggableGridLayout.tsx b/web/src/views/live/DraggableGridLayout.tsx
index ed3a19e56..b2a5998c9 100644
--- a/web/src/views/live/DraggableGridLayout.tsx
+++ b/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,
           );
 
-        acc[camera.name] = isRestreamed ? "mse" : "jsmpeg";
+        if (!mseSupported) {
+          acc[camera.name] = isRestreamed ? "webrtc" : "jsmpeg";
+        } else {
+          acc[camera.name] = isRestreamed ? "mse" : "jsmpeg";
+        }
         return acc;
       },
       {} as { [key: string]: LivePlayerMode },
diff --git a/web/src/views/live/LiveBirdseyeView.tsx b/web/src/views/live/LiveBirdseyeView.tsx
index 3aec3a223..8f7ebda77 100644
--- a/web/src/views/live/LiveBirdseyeView.tsx
+++ b/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";
     }
 
diff --git a/web/src/views/live/LiveCameraView.tsx b/web/src/views/live/LiveCameraView.tsx
index 1cde98b5d..65581d502 100644
--- a/web/src/views/live/LiveCameraView.tsx
+++ b/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]);
 
diff --git a/web/src/views/live/LiveDashboardView.tsx b/web/src/views/live/LiveDashboardView.tsx
index 0d101ba96..e14ccc4a6 100644
--- a/web/src/views/live/LiveDashboardView.tsx
+++ b/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,
           );
 
-        acc[camera.name] = isRestreamed ? "mse" : "jsmpeg";
+        if (!mseSupported) {
+          acc[camera.name] = isRestreamed ? "webrtc" : "jsmpeg";
+        } else {
+          acc[camera.name] = isRestreamed ? "mse" : "jsmpeg";
+        }
         return acc;
       },
       {} as { [key: string]: LivePlayerMode },