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-07 03:50:03 +01:00
parent d124d0e63b
commit f5590fed71
Signed by: sora
GPG Key ID: A362EA0491E2EEA0
3 changed files with 68 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
web/overlay/index.html
View File

@ -4,9 +4,6 @@
<head>
<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" />
<!-- Load our styles -->
<link rel="stylesheet" href="styles.css"/>
</head>
@ -20,14 +17,18 @@
<div class="col-3 m-2 card"><div class="position-absolute">Last Sub:</div><div id="subscribe" class="text-center fs-1 fw-bolder">-</div></div>
<div class="col-3 m-2 card"><div class="position-absolute">Last Donation:</div><div id="donate" class="text-center fs-1 fw-bolder">-</div></div>
</div>
<div id="single"></div>
<div id="goal" class="col-12 row m-auto ">
<div class="col-1"></div>
<div class="col-3 m-2 card no-border "><div class="position-absolute index-100">Follow Goal:</div><div id="cfollow" class="text-center fs-1 fw-bolder index-100">-</div></div>
<div class="col-3 m-2 card no-border "><div class="position-absolute index-100">Sub Goal:</div><div id="csubscribe" class="text-center fs-1 fw-bolder index-100">-</div></div>
</div>
<div id="timer"></div>
</div>
<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<!-- Load jQuery UI -->
<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.9.3/Chart.min.js"></script>
<!-- Load Reconnecting socket -->
<script src="/common/reconnecting-websocket/reconnectingWS.min.js"></script>
<!-- Load Bot config file -->

35
web/overlay/index.js
View File

@ -3,6 +3,8 @@ $(function () {
var lastFollow = '-',
lastSub = '-',
lastDonator = '-',
countFollow = 0,
countSub = 0,
timer = '-';
const getQueryMap = () => {
@ -10,7 +12,7 @@ $(function () {
queryParts = queryString.substring(1).split('&'),
queryMap = new Map();
for (let part in queryParts) {
for (let part of 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);
@ -18,15 +20,29 @@ $(function () {
return queryMap;
}
const queryMap = getQueryMap();
const getOrElse = (option, def) => queryMap.has(option) ? queryMap.get(option): def;
Map.prototype.getOrElse = (option, def) => queryMap.has(option) ? queryMap.get(option): def;
const refreshUI = () => {
if(queryMap.single){ $("#all").hide(); $("#single").show(); }
else{ $("#all").show(); $("#single").hide(); }
if(queryMap.getOrElse('single',false)){
$('#all').show(); $('#timer').hide(); $('#goal').hide();
$('#follow').parent().closest('div').hide(); $('#subscribe').parent().closest('div').hide(); $('#donate').parent().closest('div').hide();
if(queryMap.getOrElse('follow',false)) $('#follow').parent().closest('div').show();
if(queryMap.getOrElse('subscribe',false)) $('#subscribe').parent().closest('div').show();
if(queryMap.getOrElse('donate',false)) $('#donate').parent().closest('div').show();
}else if(queryMap.getOrElse('goal',false)){
$('#all').hide(); $('#timer').hide(); $('#goal').show();
$('#cfollow').parent().closest('div').hide(); $('#csubscribe').parent().closest('div').hide();
if(queryMap.getOrElse('follow',false)) $('#cfollow').parent().closest('div').show();
if(queryMap.getOrElse('subscribe',false)) $('#csubscribe').parent().closest('div').show();
}
$('#follow').text(lastFollow);
$('#subscribe').text(lastSub);
$('#donate').text(lastDonator);
$('#cfollow').parent().closest('div').progressbar({ value : 5.0/parseInt(queryMap.getOrElse('follow',9999))*100 });
$('#csubscribe').parent().closest('div').progressbar({ value : 5.0/parseInt(queryMap.getOrElse('subscribe',9999))*100});
$('#cfollow').text(`${countFollow} / ${queryMap.getOrElse('follow',9999)}`);
$('#csubscribe').text(`${countSubscribe} / ${queryMap.getOrElse('subscribe',9999)}`);
}
const handleSocketMessage = (e)=>{
@ -41,8 +57,10 @@ $(function () {
console.log(message.eventType, message.data)
if(message.eventType == 'follow') {
lastFollow = message.data || lastFollow;
countFollow++;
} else if(message.eventType == 'subscribe') {
lastSub = message.data || lastSub;
countSub++;
} else if(message.eventType == 'donation') {
lastDonator = message.data || lastDonator;
} else if(message.eventType == 'timer') {
@ -54,9 +72,11 @@ $(function () {
}
};
socket.addFamilyHandler("overlay", handleSocketMessage);
$(document).ready(async ()=>{
refreshUI();
try{
socket.addFamilyHandler("overlay", handleSocketMessage);
if(socket){
while(socket.getReadyState() === 0){
await new Promise(r => setTimeout(r, 500));
@ -73,7 +93,12 @@ $(function () {
if(response.streamInfo) lastDonator = response.streamInfo || lastDonator;
refreshUI();
})
socket.getDBValue('get_current_stream_info_counts', 'panelData', 'stream', (e)=>{
console.log(e)
console.log(JSON.parse(e.panelData))
})
}
}catch(e) {console.log(e)}
})
});

14
web/overlay/styles.css
View File

@ -68,6 +68,20 @@
.pointer {
cursor: pointer;
}
.ui-progressbar-value {
height:100%;
position:absolute;
background-color: var(--blue);
border-radius: 0.25rem;
z-index: 0;
left:0;
}
.no-border {
border:none!important;
}
img {
object-fit:cover;
background-color: var(--nord3);