MEETING = {
html: `
`,
init: (el) => new Proxy({
scene: null,
visible: false,
//$overlay: $overlay = el.querySelector('#overlay'),
//
install(opts){
this.scene = opts.scene
document.body.appendChild( el )
document.dispatchEvent( new CustomEvent("MEETING:ready", {detail: opts}) )
},
start(){
this.scene.addEventListener('meeting.peer.add', () => console.log("$meeting.peer.add") )
this.scene.addEventListener('meeting.peer.remove', () => console.log("$meeting.peer.remove") )
},
toggle: () => MEETING.visible = !MEETING.visible,
},{
get(data,k,v){ return data[k] },
set(data,k,v){
data[k] = v
switch( k ){
case "visible": el.style.display = data.visible ? 'block' : 'none'
}
},
})
}
// reactify component!
document.addEventListener('XRFMENU:ready', (opts) => {
opts = opts.detail
XRFMENU.buttons = ([`🧑🤝🧑 meeting
`])
.concat(XRFMENU.buttons)
document.head.innerHTML += MEETING.css
$meeting = document.createElement('div')
$meeting.innerHTML = MEETING.html
MEETING = MEETING.init($meeting)
MEETING.install(opts)
})
// alpine component for displaying meetings
MEETING.css = `
`