111 lines
3.5 KiB
JavaScript
111 lines
3.5 KiB
JavaScript
(function() {
|
|
|
|
"use strict";
|
|
|
|
// Consts
|
|
// /////////////////////////////////////////////////////////////////////////
|
|
var EVENT_BRIDGE_OPEN_MESSAGE = "eventBridgeOpen",
|
|
UPDATE_UI = "update_ui",
|
|
LISTEN_TOGGLE = "listen_toggle",
|
|
BAN = "ban",
|
|
MUTE = "mute",
|
|
EVENTBRIDGE_SETUP_DELAY = 200;
|
|
|
|
// Components
|
|
// /////////////////////////////////////////////////////////////////////////
|
|
Vue.component('user', {
|
|
props: {
|
|
user: { type: Object}
|
|
},
|
|
methods: {
|
|
listenToggle(){
|
|
EventBridge.emitWebEvent(JSON.stringify({
|
|
type: LISTEN_TOGGLE,
|
|
value: this.user
|
|
}));
|
|
},
|
|
ban(){
|
|
EventBridge.emitWebEvent(JSON.stringify({
|
|
type: BAN,
|
|
value: this.user
|
|
}));
|
|
},
|
|
mute(){
|
|
EventBridge.emitWebEvent(JSON.stringify({
|
|
type: MUTE,
|
|
value: this.user
|
|
}));
|
|
}
|
|
},
|
|
template:`
|
|
<table>
|
|
<tr>
|
|
<td>{{ user.userName }}</td>
|
|
<td>{{ user.avgAudioLevel }}</td>
|
|
<td>{{ user.avgAudioLoudness }}</td>
|
|
</tr>
|
|
<tr>
|
|
<td><button class="btn-sm mt-1 mr-1" v-bind:class="{ 'btn-primary': !user.isToggled, 'btn-warning': user.isToggled }" v-on:click="listenToggle()">Listen Toggle</button></td>
|
|
<td><button class="btn-sm btn-primary mt-1 mr-1" v-on:click="mute()">Mute</button></td>
|
|
<td><button class="btn-sm btn-primary mt-1 mr-1" v-on:click="ban()">Ban</button></td>
|
|
</tr>
|
|
</table>
|
|
`
|
|
})
|
|
|
|
// App
|
|
// /////////////////////////////////////////////////////////////////////////
|
|
var app = new Vue({
|
|
el: '#app',
|
|
data: {
|
|
settings: {
|
|
ui: {
|
|
currentDance: false,
|
|
danceList: false
|
|
}
|
|
}
|
|
}
|
|
});
|
|
|
|
// Procedural
|
|
// /////////////////////////////////////////////////////////////////////////
|
|
function onScriptEventReceived(message) {
|
|
var data;
|
|
try {
|
|
data = JSON.parse(message);
|
|
switch (data.type) {
|
|
case UPDATE_UI:
|
|
app.settings = data.value;
|
|
break;
|
|
default:
|
|
}
|
|
} catch (e) {
|
|
console.log(e)
|
|
return;
|
|
}
|
|
}
|
|
|
|
function onLoad() {
|
|
|
|
// Initial button active state is communicated via URL parameter.
|
|
// isActive = location.search.replace("?active=", "") === "true";
|
|
|
|
setTimeout(function () {
|
|
// Open the EventBridge to communicate with the main script.
|
|
// Allow time for EventBridge to become ready.
|
|
EventBridge.scriptEventReceived.connect(onScriptEventReceived);
|
|
EventBridge.emitWebEvent(JSON.stringify({
|
|
type: EVENT_BRIDGE_OPEN_MESSAGE
|
|
}));
|
|
EventBridge.emitWebEvent(JSON.stringify({
|
|
type: SET_ACTIVE_MESSAGE,
|
|
value: true
|
|
}));
|
|
}, EVENTBRIDGE_SETUP_DELAY);
|
|
}
|
|
|
|
// App
|
|
// /////////////////////////////////////////////////////////////////////////
|
|
onLoad();
|
|
|
|
}());
|