From b388aab250e2283b2ea4aa76f28e434fa9e4e36a Mon Sep 17 00:00:00 2001
From: Scott Lamb <slamb@slamb.org>
Date: Fri, 13 Aug 2021 08:49:22 -0700
Subject: [PATCH] better error message for live view on iOS (#121)

---
 CHANGELOG.md          |  1 +
 ui/src/Live/index.tsx | 17 +++++++++++++++++
 2 files changed, 18 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 0a4fdbe..cf54bb4 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -14,6 +14,7 @@ Each release is tagged in Git and on the Docker repository
     workaround, so anamorphic videos looked correct on Chrome but slightly
     stretched on Firefox. Now both live streams and playback are fully correct
     on all browsers.
+*   UI: better error message on browsers where live view is unsupported.
 
 ## `v0.6.4` (2021-06-28)
 
diff --git a/ui/src/Live/index.tsx b/ui/src/Live/index.tsx
index 03f04b4..c35a691 100644
--- a/ui/src/Live/index.tsx
+++ b/ui/src/Live/index.tsx
@@ -2,6 +2,8 @@
 // Copyright (C) 2021 The Moonfire NVR Authors; see AUTHORS and LICENSE.txt.
 // SPDX-License-Identifier: GPL-v3.0-or-later WITH GPL-3.0-linking-exception
 
+import Container from "@material-ui/core/Container";
+import ErrorIcon from "@material-ui/icons/Error";
 import { Camera } from "../types";
 import LiveCamera from "./LiveCamera";
 import Multiview from "./Multiview";
@@ -12,6 +14,21 @@ export interface LiveProps {
 }
 
 const Live = ({ cameras, layoutIndex }: LiveProps) => {
+  if ("MediaSource" in window === false) {
+    return (
+      <Container>
+        <ErrorIcon
+          sx={{
+            float: "left",
+            color: "secondary.main",
+            marginRight: "1em",
+          }}
+        />
+        Live view doesn't work yet on your browser. See{" "}
+        <a href="https://github.com/scottlamb/moonfire-nvr/issues/121">#121</a>.
+      </Container>
+    );
+  }
   return (
     <Multiview
       layoutIndex={layoutIndex}