//
// Copyright 2026 James Pace
//
// This Source Code Form is subject to the terms of the Mozilla Public
// License, v. 2.0. If a copy of the MPL was not distributed with this
// file, You can obtain one at https://mozilla.org/MPL/2.0/.
//
// This Source Code Form is "Incompatible With Secondary Licenses", as
// defined by the Mozilla Public License, v. 2.0.
//
import { AppNav, Footer } from "./components/AppNav.tsx";
import { Container, Row, Col, Image, Card } from "react-bootstrap";
import { WebRTCVideo } from "mediamtx-webrtc-react";

export function Video() {
  const streamName = "image";
  const imageStreamURI =
    "http://" + window.location.hostname + ":8889/" + streamName + "/whep";

  return (
    <div>
      <AppNav />
      <Container className="vert-padded">
        <Card className="padded">
          <Row>
            <Col lg={8}>
              <WebRTCVideo
                url={imageStreamURI}
                controls
                autoPlay
                style={{ width: "100%", maxWidth: "800px" }}
              />
            </Col>
            <Col lg={4}>Showing stream: "{streamName}".</Col>
          </Row>
        </Card>
      </Container>
      <Footer />
    </div>
  );
}
