MEETING = {
html: `
`,
init: (el) => new Proxy({
scene: null,
enabled: false,
active: false,
//$overlay: $overlay = el.querySelector('#overlay'),
//
install(opts){
this.scene = opts.scene
window.meeting.buttons.push(`🧑🤝🧑 meeting
`)
document.body.appendChild( el )
},
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.collapsed = !MEETING.collapsed,
install: (opts) => {
document.body.appendChild(el)
document.dispatchEvent( new CustomEvent("MEETING:ready", {detail: opts}) )
}
},{
get(data,k,v){ return data[k] },
set(data,k,v){
data[k] = v
switch( k ){
case "css": document.head.innerHTML += v; break;
}
},
})
}
// reactify component!
document.addEventListener('XRFMENU:ready', (opts) => {
opts = opts.detail
$meeting = document.createElement('div')
$meeting.innerHTML = MEETING.html
MEETING = MEETING.init($meeting)
MEETING.install(opts)
})
// alpine component for displaying meetings
MEETING.css = `
`