import { h, render, Component } from "preact";
import Header from "./Header";
import {
  Container,
  Card,
  CardHeader,
  CardContent,
  Typography,
} from "@material-ui/core";
const rambleDemoWebm = new URL("../static/video/ramble_demo/ramble.webm", import.meta.url);
const rambleDemoMp4 = new URL("../static/video/ramble_demo/ramble.mp4", import.meta.url);

class Ramble extends Component {
  render() {
    return (
      <span>
        <Header />
        <p />
        <Container maxWidth="md">
          <Card>
            <CardHeader title="Ramble" />
            <CardContent>
              <Typography variant="p">
                Ramble was a web project I created during my master's degree to
                create a startup. In this project, I was the CTO and built a
                website that allowed users to stream their podcasts live and
                accept call-ins in a similar vein to talk shows! I learnt the
                entire javascript web development stack from React to audio
                streaming to DevOps in order to make it a reality.
              </Typography>
              <p />
              <Typography variant="p">
                It also had chatroom functionality with the ability to
                re-stream to audiences much like other apps that came out in
                the time since, such as Clubhouse.
              </Typography>
              <p />
              <Typography variant="p">
                During the project's lifespan of just under two years, I mostly
                worked on creating the streaming functionality of the project
                and managing how the project was designed to function behind
                the hood when it was deployed. I learned a ton about how web
                deployment works during this time allowing me to work on web
                development modules in the Games Academy at Falmouth University
                today.
              </Typography>
              <p />
              <Typography variant="p">
                Here's a demo of the project I took before we moved on.
              </Typography>
              <p />
              <div>
                <video controls loop muted autoPlay={true} style={{
                  width: "100%",
                  height: "auto",
                  objectFit: "cover",
                }}>
                  <source src={rambleDemoMp4} type="video/mp4" />
                  <source src={rambleDemoWebm} type="video/webm" />
                </video>
              </div>
            </CardContent>
          </Card>
        </Container>
      </span>
    );
  }
}

export default Ramble;