import React from 'react';
import './App.css';
import {ZoomMtg} from '@zoomus/websdk';
 import {Stream} from './Stream'
import {MainMenu} from './MainMenu';
import { Provider } from 'mobx-react';
import { MainMenuStore } from './stores/MainMenuStore';
import 'bootstrap/dist/css/bootstrap.css';
import { Footer } from './Footer';

function App() {
  return (
    <div className="container">
    <Provider>
      <Stream/>

    </Provider>
    </div>
  )
}

export default App;

___________________________________________________________
import { Component } from "react";
import React from "react";
import {ZoomMtg} from '@zoomus/websdk';
const zoomMeeting = document.getElementById("zmmtg-root")


export class Stream extends Component<{},{meetingLaunched: boolean}> {

    constructor(props) {
        super(props);
        this.state = { meetingLaunched : false};
        this.turnItOff();
    }
     turnItOn = () => {
        if (zoomMeeting != null) {
        zoomMeeting.style.display = 'flex'
        zoomMeeting.style.height = '100%'
        zoomMeeting.style.width = '100%'
        zoomMeeting.style.position = 'fixed'
        zoomMeeting.style.zIndex = '1'
        zoomMeeting.style.backgroundColor = 'blue'
        }
      }

    turnItOff = () => {

        if (zoomMeeting != null) {

        zoomMeeting.style.display = 'none'
        zoomMeeting.style.height = '0px'
        zoomMeeting.style.width = '0px'
        zoomMeeting.style.position = 'relative'
        zoomMeeting.style.backgroundColor = 'black'
        zoomMeeting.style.zIndex = '1'
        }
      }

 joinZoomMeeting = () => {
    this.setState({meetingLaunched: !this.state.meetingLaunched})
    console.log('checkSystemRequirements');
    console.log(JSON.stringify(ZoomMtg.checkSystemRequirements()));
    ZoomMtg.generateSignature({
      meetingNumber: meetConfig.meetingNumber,
      apiKey: meetConfig.apiKey,
      apiSecret: meetConfig.apiSecret,
      role: meetConfig.role,
      success(res) {
        console.log('signature', res.result);
        ZoomMtg.init({
          leaveUrl: meetConfig.leaveUrl,
          success() {
            console.log("Sucess")
            ZoomMtg.join(
              {
                meetingNumber: meetConfig.meetingNumber,
                userName: meetConfig.userName,
                signature: res.result,
                apiKey: meetConfig.apiKey,
                passWord: meetConfig.passWord,
                success() {
                  console.log('join meeting success');
                },
                error(respo) {
                  console.log(respo);
                }
              }
            );
          },
          error(response) {
            console.log(response);
          }
        });
      }
    })
  };

  render() {
      if (!this.state.meetingLaunched) {
          this.turnItOff();
      } else {
          this.turnItOn();
      }
      console.log("Rendering.")
      if (zoomMeeting != null) {
    zoomMeeting.style.height = '500px';
    zoomMeeting.style.width = '200px';
    zoomMeeting.style.position = 'relative';
    zoomMeeting.style.zIndex = '1';
    }
    return (
        <>
        {!this.state.meetingLaunched ?

            <button className="launchButton" onClick={this.joinZoomMeeting}>Launch Meeting</button>
        :
            <div id="zmmtg-root"></div>
        }
    </>
    )
}

componentDidMount() {
    console.log("Before mounting.")
    setTimeout(() => {
        ZoomMtg.setZoomJSLib('https://source.zoom.us/1.7.7/lib', '/av');
            ZoomMtg.preLoadWasm();
      ZoomMtg.prepareJssdk();
    }, 6000);
    console.log("After mounting.")
  }


}