73 lines
1.9 KiB
JavaScript
73 lines
1.9 KiB
JavaScript
|
const m = require('mithril')
|
||
|
|
const signal = require('@preact/signals-core')
|
||
|
|
const client = require('./api/client')
|
||
|
|
|
||
|
|
const Menu = {
|
||
|
|
oninit: function(vnode) {
|
||
|
|
this.currentPath = '/'
|
||
|
|
this.disconnected = false
|
||
|
|
this.disconnectedTimeout = null
|
||
|
|
client.registerComponent(this)
|
||
|
|
this.effects = signal.effect()
|
||
|
|
this.onbeforeupdate()
|
||
|
|
},
|
||
|
|
|
||
|
|
ioConnectionChanged(connected) {
|
||
|
|
if (connected) {
|
||
|
|
clearTimeout(this.disconnectedTimeout)
|
||
|
|
this.disconnectedTimeout = null
|
||
|
|
this.disconnected = false
|
||
|
|
} else {
|
||
|
|
this.disconnectedTimeout = setTimeout(() => {
|
||
|
|
this.disconnected = true
|
||
|
|
m.redraw()
|
||
|
|
}, 3000)
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
onremove: function(vnode) {
|
||
|
|
client.unregisterComponent(this)
|
||
|
|
},
|
||
|
|
|
||
|
|
onbeforeupdate: function() {
|
||
|
|
this.currentPath = m.route.get() || '/'
|
||
|
|
},
|
||
|
|
|
||
|
|
isActive: function(path) {
|
||
|
|
return 'icon ' + (this.currentPath === path ? 'active' : '')
|
||
|
|
},
|
||
|
|
|
||
|
|
createLink: function(link, icon, extra = {}) {
|
||
|
|
return m(m.route.Link, {
|
||
|
|
class: this.isActive(link),
|
||
|
|
href: link
|
||
|
|
}, m('i.fal.fa-' + icon, extra))
|
||
|
|
},
|
||
|
|
|
||
|
|
view: function() {
|
||
|
|
return [
|
||
|
|
this.disconnected
|
||
|
|
? m('.disconnected', [
|
||
|
|
m('.top'), m('.left'), m('.right'), m('.bottom'),
|
||
|
|
m('.error', [
|
||
|
|
m('h4', 'Connecting to server...'),
|
||
|
|
m('p', [
|
||
|
|
'If this is taking too long, the server might be down.',
|
||
|
|
m('br'),
|
||
|
|
'Try restarting the stream computer.',
|
||
|
|
]),
|
||
|
|
]),
|
||
|
|
])
|
||
|
|
: null,
|
||
|
|
m('nav.row', [
|
||
|
|
m('h2.logo', m(m.route.Link, { href: '/' }, 'Stream controls')),
|
||
|
|
m('div.filler'),
|
||
|
|
this.createLink('/display', 'display', { class: client.status.serial_running ? 'green' : '' }),
|
||
|
|
this.createLink('/encoder', 'video', { class: client.status.encoder_running ? 'red' : '' }),
|
||
|
|
]),
|
||
|
|
]
|
||
|
|
},
|
||
|
|
}
|
||
|
|
|
||
|
|
module.exports = Menu
|