WIP
This commit is contained in:
parent
232971098b
commit
1b0878bdc5
46
twitch/customOverlay.js
Normal file
46
twitch/customOverlay.js
Normal file
@ -0,0 +1,46 @@
|
||||
(function() {
|
||||
|
||||
|
||||
function sendData(tpe, data) {
|
||||
$.panelsocketserver.sendJSONToAll(JSON.stringify({
|
||||
'eventFamily': 'overlay',
|
||||
'eventType': tpe,
|
||||
'data': data
|
||||
}));
|
||||
}
|
||||
|
||||
$.bind('command', function(event) {
|
||||
|
||||
const sender = "" + event.getSender().toLowerCase(),
|
||||
command = event.getCommand(),
|
||||
argsString = "" + event.getArguments().trim(),
|
||||
args = event.getArgs(),
|
||||
action = args[0],
|
||||
value = args[1];
|
||||
|
||||
if (command.equalsIgnoreCase('overlay')) {
|
||||
if (!action) {
|
||||
$.say($.whisperPrefix(sender) + $.lang.get('customOverlay.help', ' Use "!overlay [follow | subscribe | donation | timer] value" to set overlay data.'));
|
||||
} else if (action.equalsIgnoreCase('follow')) {
|
||||
sendData(action, value);
|
||||
} else if (action.equalsIgnoreCase('subscribe')) {
|
||||
sendData(action, value);
|
||||
} else if (action.equalsIgnoreCase('donation')) {
|
||||
sendData(action, value);
|
||||
} else if (action.equalsIgnoreCase('timer')) {
|
||||
sendData(action, new Date(Date.now().getTime()+value*1000*60));
|
||||
} else {
|
||||
$.say($.whisperPrefix(sender) + $.lang.get('customOverlay.help'));
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
$.bind('initReady', function() {
|
||||
$.registerChatSubcommand('overlay', 'follow', 2);
|
||||
$.registerChatSubcommand('overlay', 'subscribe', 2);
|
||||
$.registerChatSubcommand('overlay', 'donation', 2);
|
||||
$.registerChatSubcommand('overlay', 'timer', 2);
|
||||
});
|
||||
|
||||
|
||||
})();
|
@ -3,7 +3,7 @@
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<title>PlampBot Song Requests</title>
|
||||
<title>Overlay</title>
|
||||
|
||||
<!-- Load CSS for Chart.js -->
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.css" />
|
||||
@ -13,23 +13,14 @@
|
||||
|
||||
<!-- Main body -->
|
||||
<body>
|
||||
<div class="main-alert">
|
||||
<!-- Where the gif gets played. -->
|
||||
<div id="alert"></div>
|
||||
<div class="main">
|
||||
</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>
|
||||
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
|
||||
<!-- Load jQuery UI -->
|
||||
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"></script>
|
||||
<script src="https://code.jquery.com/ui/1.13.1/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>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
|
||||
<!-- Load Reconnecting socket -->
|
||||
<script src="/common/reconnecting-websocket/reconnectingWS.min.js"></script>
|
||||
<!-- Load Bot config file -->
|
||||
|
@ -1,16 +1,11 @@
|
||||
$(function () {
|
||||
var webSocket = getWebSocket(),
|
||||
queryMap = getQueryMap(),
|
||||
isDebug = localStorage.getItem('phantombot_follow_debug') === 'true' || false;
|
||||
isDebug = localStorage.getItem('phantombot_overlay_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.
|
||||
const getWebSocket = () => {
|
||||
let socketUri = ((window.location.protocol === 'https:' ? 'wss://' : 'ws://') + window.location.host + '/ws/overlay'), // URI of the socket.
|
||||
reconnectInterval = 5000; // How often in milliseconds we should try reconnecting.
|
||||
|
||||
return new ReconnectingWebSocket(socketUri, null, {
|
||||
@ -18,141 +13,54 @@ $(function () {
|
||||
});
|
||||
}
|
||||
|
||||
/*
|
||||
* @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.
|
||||
const getQueryMap = () => {
|
||||
let queryString = window.location.search,
|
||||
queryParts = queryString.substring(1).split('&'),
|
||||
queryMap = new Map();
|
||||
|
||||
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);
|
||||
}
|
||||
for (let part in queryParts) {
|
||||
let key = part.substring(0, part.indexOf('=')),
|
||||
value = part.substring(part.indexOf('=') + 1, part.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);
|
||||
}
|
||||
const 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.toggleDebug = (toggle) => {
|
||||
localStorage.setItem('phantombot_overlay_debug', toggle.toString());
|
||||
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;
|
||||
}
|
||||
}
|
||||
const getOrElse = (option, def) => queryMap.has(option) ? queryMap.get(option): 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) {
|
||||
const handleSocketMessage = (e)=>{
|
||||
try {
|
||||
let rawMessage = e.data,
|
||||
message = JSON.parse(rawMessage);
|
||||
message = JSON.parse(rawMessage);
|
||||
|
||||
printDebug('[MESSAGE] ' + rawMessage);
|
||||
if(!message.hasOwnProperty('eventFamily') || message['eventFamily'] != 'overlay' ||
|
||||
!message.hasOwnProperty('eventType') || !message.hasOwnProperty['data'])
|
||||
return;
|
||||
|
||||
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);
|
||||
}
|
||||
if(message['eventType'] == 'follow') {
|
||||
console.log("New Follow !! ", message['data'])
|
||||
} else if(message['eventType'] == 'subscribe') {
|
||||
console.log("New Sub !! ", message['data'])
|
||||
} else if(message['eventType'] == 'donation') {
|
||||
console.log("New dono !! ", message['data'])
|
||||
} else if(message['eventType'] == 'timer') {
|
||||
console.log("New timer !! ", message['data'])
|
||||
}
|
||||
|
||||
} catch (ex) {
|
||||
printDebug('Failed to parse socket message [' + e.data + ']: ' + e.stack);
|
||||
console.log(ex)
|
||||
}
|
||||
};
|
||||
|
||||
// Handle processing the queue.
|
||||
setInterval(handleQueue, 5e2);
|
||||
socket.addFamilyHandler("overlay", handleSocketMessage);
|
||||
|
||||
|
||||
});
|
Loading…
x
Reference in New Issue
Block a user