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
3 changed files with 68 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
web/overlay/index.html
View File

@@ -4,9 +4,6 @@
<head> <head>
<title>Overlay</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" />
<!-- Load our styles --> <!-- Load our styles -->
<link rel="stylesheet" href="styles.css"/> <link rel="stylesheet" href="styles.css"/>
</head> </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 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 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>
<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> </div>
<!-- jQuery --> <!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<!-- Load jQuery UI --> <!-- Load jQuery UI -->
<script src="https://code.jquery.com/ui/1.13.1/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.9.3/Chart.min.js"></script>
<!-- Load Reconnecting socket --> <!-- Load Reconnecting socket -->
<script src="/common/reconnecting-websocket/reconnectingWS.min.js"></script> <script src="/common/reconnecting-websocket/reconnectingWS.min.js"></script>
<!-- Load Bot config file --> <!-- Load Bot config file -->

67
web/overlay/index.js
View File

@@ -3,6 +3,8 @@ $(function () {
var lastFollow = '-', var lastFollow = '-',
lastSub = '-', lastSub = '-',
lastDonator = '-', lastDonator = '-',
countFollow = 0,
countSub = 0,
timer = '-'; timer = '-';
const getQueryMap = () => { const getQueryMap = () => {
@@ -10,7 +12,7 @@ $(function () {
queryParts = queryString.substring(1).split('&'), queryParts = queryString.substring(1).split('&'),
queryMap = new Map(); queryMap = new Map();
for (let part in queryParts) { for (let part of queryParts) {
let key = part.substring(0, part.indexOf('=')), let key = part.substring(0, part.indexOf('=')),
value = part.substring(part.indexOf('=') + 1, part.length); value = part.substring(part.indexOf('=') + 1, part.length);
if (key.length > 0 && value.length > 0) queryMap.set(key, value); if (key.length > 0 && value.length > 0) queryMap.set(key, value);
@@ -18,15 +20,29 @@ $(function () {
return queryMap; return queryMap;
} }
const queryMap = getQueryMap(); 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 = () => { const refreshUI = () => {
if(queryMap.single){ $("#all").hide(); $("#single").show(); } if(queryMap.getOrElse('single',false)){
else{ $("#all").show(); $("#single").hide(); } $('#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); $('#follow').text(lastFollow);
$('#subscribe').text(lastSub); $('#subscribe').text(lastSub);
$('#donate').text(lastDonator); $('#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)=>{ const handleSocketMessage = (e)=>{
@@ -41,8 +57,10 @@ $(function () {
console.log(message.eventType, message.data) console.log(message.eventType, message.data)
if(message.eventType == 'follow') { if(message.eventType == 'follow') {
lastFollow = message.data || lastFollow; lastFollow = message.data || lastFollow;
countFollow++;
} else if(message.eventType == 'subscribe') { } else if(message.eventType == 'subscribe') {
lastSub = message.data || lastSub; lastSub = message.data || lastSub;
countSub++;
} else if(message.eventType == 'donation') { } else if(message.eventType == 'donation') {
lastDonator = message.data || lastDonator; lastDonator = message.data || lastDonator;
} else if(message.eventType == 'timer') { } else if(message.eventType == 'timer') {
@@ -54,26 +72,33 @@ $(function () {
} }
}; };
socket.addFamilyHandler("overlay", handleSocketMessage);
$(document).ready(async ()=>{ $(document).ready(async ()=>{
if(socket){ refreshUI();
while(socket.getReadyState() === 0){ try{
await new Promise(r => setTimeout(r, 500)); socket.addFamilyHandler("overlay", handleSocketMessage);
if(socket){
while(socket.getReadyState() === 0){
await new Promise(r => setTimeout(r, 500));
}
socket.getDBValue("get_current_stream_info_lastFollow", 'streamInfo', 'lastFollow', (response)=>{
if(response.streamInfo) lastFollow = response.streamInfo || lastFollow;
refreshUI();
})
socket.getDBValue("get_current_stream_info_lastSub", 'streamInfo', 'lastSub', (response)=>{
if(response.streamInfo) lastSub = response.streamInfo || lastSub;
refreshUI();
})
socket.getDBValue("get_current_stream_info_lastDonator", 'streamInfo', 'lastDonator', (response)=>{
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))
})
} }
socket.getDBValue("get_current_stream_info_lastFollow", 'streamInfo', 'lastFollow', (response)=>{ }catch(e) {console.log(e)}
if(response.streamInfo) lastFollow = response.streamInfo || lastFollow;
refreshUI();
})
socket.getDBValue("get_current_stream_info_lastSub", 'streamInfo', 'lastSub', (response)=>{
if(response.streamInfo) lastSub = response.streamInfo || lastSub;
refreshUI();
})
socket.getDBValue("get_current_stream_info_lastDonator", 'streamInfo', 'lastDonator', (response)=>{
if(response.streamInfo) lastDonator = response.streamInfo || lastDonator;
refreshUI();
})
}
}) })
}); });

14
web/overlay/styles.css
View File

@@ -68,6 +68,20 @@
.pointer { .pointer {
cursor: 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 { img {
object-fit:cover; object-fit:cover;
background-color: var(--nord3); background-color: var(--nord3);