<template>
  <div id="app">
   <WebRTC />
   <div id="ui">
   <TopBar @open-task-modal="openTaskModal" />
   <LeftPane />
   <RightPane />
   <TaskModal ref="taskModal" />
   </div>
  </div>
</template>

<script>
import WebRTC from './components/WebRTC.vue'
import TopBar from './components/TopBar.vue'
import LeftPane from "./components/LeftPane.vue"
import RightPane from "./components/RightPane.vue"
import TaskModal from './components/TaskModal.vue'

export default {
  name: 'App',
  components: {
    WebRTC,
    TopBar,
    LeftPane,
    RightPane,
    TaskModal,
  },
  methods: {
    openTaskModal() {
      this.$refs.taskModal.openModal();
    },
  },
  mounted()
  {
    //this.webrtc.load();
  }
}
</script>

<style>
html,body
{
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
}
#app {
  height: 100%;
}
#ui
{
  position:absolute;
  width:100%;
  left:0;
  top:0;
  pointer-events: none;
}
</style>
