sora/phantombot-plugins
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

WIP

Browse Source
This commit is contained in:
choelzl
2022-02-06 19:14:55 +01:00
parent 232971098b
commit 1b0878bdc5
4 changed files with 85 additions and 140 deletions
Download Patch File Download Diff File Expand all files Collapse all files

46
twitch/customOverlay.js Normal file
View 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);
});
})();

0
web/js/sockerWrapper.js → web/js/socketWrapper.js
View File

19
web/overlay/index.html
View File

@@ -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 -->

156
web/overlay/index.js
View 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);
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);
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'])
}
// 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);
console.log(ex)
}
};
// Handle processing the queue.
setInterval(handleQueue, 5e2);
socket.addFamilyHandler("overlay", handleSocketMessage);
});