diff --git a/web/overlay/index.html b/web/overlay/index.html
index 80dc116..41966c8 100644
--- a/web/overlay/index.html
+++ b/web/overlay/index.html
@@ -4,9 +4,6 @@
Overlay
-
-
-
@@ -20,14 +17,18 @@
-
+
+
-
-
diff --git a/web/overlay/index.js b/web/overlay/index.js
index 8251bf7..ebb43a1 100644
--- a/web/overlay/index.js
+++ b/web/overlay/index.js
@@ -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);
+ $('#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,26 +72,33 @@ $(function () {
}
};
- socket.addFamilyHandler("overlay", handleSocketMessage);
$(document).ready(async ()=>{
- if(socket){
- while(socket.getReadyState() === 0){
- await new Promise(r => setTimeout(r, 500));
+ refreshUI();
+ try{
+ 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)=>{
- 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();
- })
- }
+ }catch(e) {console.log(e)}
})
});
\ No newline at end of file
diff --git a/web/overlay/styles.css b/web/overlay/styles.css
index 825e3c6..adb7239 100644
--- a/web/overlay/styles.css
+++ b/web/overlay/styles.css
@@ -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);