moonfire-nvr/ui/src/Live/index.tsx

// This file is part of Moonfire NVR, a security camera network video recorder.
// 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 "@mui/material/Container";
import ErrorIcon from "@mui/icons-material/Error";
import { Camera } from "../types";
import LiveCamera from "./LiveCamera";
import Multiview, { MultiviewChooser } from "./Multiview";
import { FrameProps } from "../App";
import { useSearchParams } from "react-router-dom";
import { useState } from "react";

export interface LiveProps {
  cameras: Camera[];
  Frame: (props: FrameProps) => JSX.Element;
}

const Live = ({ cameras, Frame }: LiveProps) => {
  const [searchParams, setSearchParams] = useSearchParams();

  const [multiviewLayoutIndex, setMultiviewLayoutIndex] = useState(
    Number.parseInt(searchParams.get("layout") || "0", 10)
  );

  if ("MediaSource" in window === false) {
    return (
      <Frame>
        <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>
      </Frame>
    );
  }
  return (
    <Frame
      activityMenuPart={
        <MultiviewChooser
          layoutIndex={multiviewLayoutIndex}
          onChoice={(value) => {
            setMultiviewLayoutIndex(value);
            setSearchParams({ layout: value.toString() });
          }}
        />
      }
    >
      <Multiview
        layoutIndex={multiviewLayoutIndex}
        cameras={cameras}
        renderCamera={(camera: Camera | null, chooser: JSX.Element) => (
          <LiveCamera camera={camera} chooser={chooser} />
        )}
      />
    </Frame>
  );
};

export default Live;