Fixing overlay
This commit is contained in:
44
web/overlay/index.html
Normal file
44
web/overlay/index.html
Normal file
@@ -0,0 +1,44 @@
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<title>PlampBot Song Requests</title>
|
||||
|
||||
<!-- Load CSS for Chart.js -->
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.css" />
|
||||
<!-- Load our styles -->
|
||||
<link rel="stylesheet" href="styles.css"/>
|
||||
</head>
|
||||
|
||||
<!-- Main body -->
|
||||
<body>
|
||||
<div class="main-alert">
|
||||
<!-- Where the gif gets played. -->
|
||||
<div id="alert"></div>
|
||||
</div>
|
||||
<div class="main-text-alert">
|
||||
<!-- Where the custom gif text is displayed. -->
|
||||
<div id="alert-text"></div>
|
||||
</div>
|
||||
|
||||
<!-- jQuery -->
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
|
||||
<!-- Load jQuery UI -->
|
||||
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"></script>
|
||||
<!-- Load Chart.js -->
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.js"></script>
|
||||
<!-- Load chartjs-plugin-datalabels -->
|
||||
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@0.6.0/dist/chartjs-plugin-datalabels.min.js"></script>
|
||||
<!-- Load Reconnecting socket -->
|
||||
<script src="/common/reconnecting-websocket/reconnectingWS.min.js"></script>
|
||||
<!-- Load Bot config file -->
|
||||
<script src="/common/js/wsConfig.js"></script>
|
||||
|
||||
<!-- Load functions copied out of panel dir, since can't directly read panel dir (http auth problem) -->
|
||||
<script src="/custom/js/socketWrapper.js"></script>
|
||||
|
||||
<!-- Load our script -->
|
||||
<script src="index.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
158
web/overlay/index.js
Normal file
158
web/overlay/index.js
Normal file
@@ -0,0 +1,158 @@
|
||||
$(function () {
|
||||
var webSocket = getWebSocket(),
|
||||
queryMap = getQueryMap(),
|
||||
isDebug = localStorage.getItem('phantombot_follow_debug') === 'true' || false;
|
||||
queue = [];
|
||||
|
||||
/*
|
||||
* @function Gets a new instance of the websocket.
|
||||
*
|
||||
* @return {ReconnectingWebSocket}
|
||||
*/
|
||||
function getWebSocket() {
|
||||
let socketUri = ((window.location.protocol === 'https:' ? 'wss://' : 'ws://') + window.location.host + '/ws/followpolls'), // URI of the socket.
|
||||
reconnectInterval = 5000; // How often in milliseconds we should try reconnecting.
|
||||
|
||||
return new ReconnectingWebSocket(socketUri, null, {
|
||||
reconnectInterval: reconnectInterval
|
||||
});
|
||||
}
|
||||
|
||||
/*
|
||||
* @function Parses the query params in the URL and puts them into a map.
|
||||
*
|
||||
* @return {Map}
|
||||
*/
|
||||
function getQueryMap() {
|
||||
let queryString = window.location.search, // Query string that starts with ?
|
||||
queryParts = queryString.substr(1).split('&'), // Split at each &, which is a new query.
|
||||
queryMap = new Map(); // Create a new map for save our keys and values.
|
||||
|
||||
for (let i = 0; i < queryParts.length; i++) {
|
||||
let key = queryParts[i].substr(0, queryParts[i].indexOf('=')),
|
||||
value = queryParts[i].substr(queryParts[i].indexOf('=') + 1, queryParts[i].length);
|
||||
|
||||
if (key.length > 0 && value.length > 0) {
|
||||
queryMap.set(key, value);
|
||||
}
|
||||
}
|
||||
|
||||
return queryMap;
|
||||
}
|
||||
|
||||
/*
|
||||
* @function Prints debug logs.
|
||||
*
|
||||
* @param {String} message
|
||||
*/
|
||||
function printDebug(message, force) {
|
||||
if (isDebug || force) {
|
||||
console.log('%c[PhantomBot Log]', 'color: #6441a5; font-weight: 900;', message);
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
* @function Toggles the debug mode.
|
||||
*
|
||||
* @param {String} toggle
|
||||
*/
|
||||
window.toggleDebug = function (toggle) {
|
||||
localStorage.setItem('phantombot_follow_debug', toggle.toString());
|
||||
|
||||
// Refresh the page.
|
||||
window.location.reload();
|
||||
}
|
||||
|
||||
/*
|
||||
* @function Checks if the query map has the option, if not, returns default.
|
||||
*
|
||||
* @param {String} option
|
||||
* @param {String} def
|
||||
* @return {String}
|
||||
*/
|
||||
function getOptionSetting(option, def) {
|
||||
if (queryMap.has(option)) {
|
||||
return queryMap.get(option);
|
||||
} else {
|
||||
return def;
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
* @function Sends a message to the socket
|
||||
*
|
||||
* @param {String} message
|
||||
*/
|
||||
function sendToSocket(message) {
|
||||
try {
|
||||
webSocket.send(JSON.stringify(message));
|
||||
} catch (ex) {
|
||||
printDebug('Failed to send a message to the socket: ' + ex.stack);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
function sleep(ms) {
|
||||
return new Promise(resolve => setTimeout(resolve, ms));
|
||||
}
|
||||
|
||||
/*
|
||||
* @event Called once the socket opens.
|
||||
*/
|
||||
webSocket.onopen = function () {
|
||||
printDebug('Successfully connected to the socket.', true);
|
||||
// Authenticate with the socket.
|
||||
sendToSocket({
|
||||
authenticate: getAuth()
|
||||
});
|
||||
};
|
||||
|
||||
/*
|
||||
* @event Called when the socket closes.
|
||||
*/
|
||||
webSocket.onclose = function () {
|
||||
printDebug('Disconnected from the socket.', true);
|
||||
};
|
||||
|
||||
/*
|
||||
* @event Called when we get a message.
|
||||
*
|
||||
* @param {Object} e
|
||||
*/
|
||||
webSocket.onmessage = function (e) {
|
||||
try {
|
||||
let rawMessage = e.data,
|
||||
message = JSON.parse(rawMessage);
|
||||
|
||||
printDebug('[MESSAGE] ' + rawMessage);
|
||||
|
||||
if (message.query_id === undefined) {
|
||||
// Check for our auth result.
|
||||
if (message.authresult !== undefined) {
|
||||
if (message.authresult === 'true') {
|
||||
printDebug('Successfully authenticated with the socket.', true);
|
||||
// Handle this.
|
||||
handleBrowserInteraction()
|
||||
} else {
|
||||
printDebug('Failed to authenticate with the socket.', true);
|
||||
}
|
||||
} else
|
||||
|
||||
// Queue all events and process them one at-a-time.
|
||||
if (message.alert_image !== undefined || message.audio_panel_hook !== undefined) {
|
||||
queue.push(message);
|
||||
}
|
||||
|
||||
// Message cannot be handled error.
|
||||
else {
|
||||
printDebug('Failed to process message from socket: ' + rawMessage);
|
||||
}
|
||||
}
|
||||
} catch (ex) {
|
||||
printDebug('Failed to parse socket message [' + e.data + ']: ' + e.stack);
|
||||
}
|
||||
};
|
||||
|
||||
// Handle processing the queue.
|
||||
setInterval(handleQueue, 5e2);
|
||||
});
|
||||
Reference in New Issue
Block a user