Information Bar Version 1.1

widget.css

@import url('https://fonts.googleapis.com/css2?family={font_name}&display=swap');

:root {
  	--background-color: {{background_color}};
    --accent-color: {{accent_color}};
    --text-color: {{text_color}};
    --text-accent-color: {{text_accent_color}};
    --icon-color: {{icon_color}};
  	--spacer-width: {{spacer_width}}px;
  	--spacer-margin: {{spacer_margin}}px;
  	--widget-padding: {{widget_padding}}px;
  	--font-size: {{font_size}}px;
    --train-color: {{train_color}};
  	--train-height: {{train_height}}px;
}

/* Layout */
body {
	margin: 0;
}

.main-container {
  	font-family: '{font_name}', cursive !important;
  	background-color: var(--background-color);
  	padding: var(--widget-padding);
  	height: calc(100% - var(--train-height));
  	font-size: var(--font-size) !important;
  	display: flex;
  	align-items: center;
  	justify-content: space-between;
  	box-sizing: border-box;
}

.component {
	width: max-content;
  	margin: 0px var(--spacer-margin);
  	text-align: center;
}

.latest-container {
  	flex-grow: 4;
}

.spacer {
	height: 100%;
  	width: var(--spacer-width);
  	background-color: var(--accent-color);
}

.train-bar {
	background-color: var(--train-color);
  	height: var(--train-height);
    transition-duration: .9s;
    transition-property: width;
    transition-timing-function: linear;
}

/* Small Things */
.accent {
	color: var(--text-accent-color);
}

.text {
	color: var(--text-color);
}

.fas {
	color: var(--icon-color) !important;
}

widget.html

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.13.0/css/all.css">

<div class="main-container">
	<div class="stats-container component">
      	<span class="text">0 <i class="fas fa-heart"></i></span>
  	</div>
  	<div class="spacer"></div>
  	<div class="latest-container component">
      	<span class="text">...</span>  
  	</div>
  	<div class="spacer"></div>
  	<div class="train-container component">
      	<span class="text train">0</span>
  	</div>
</div>
<div class="train-bar"></div>

widget.js

// Variables
let settings = {
  	"global": {
    	"internal_clock": 1000,
      	"stats_clock": 60000
    },
	"stats": {
    	"refresh_rate": 5 // Seconds
    }
};
let state = {
	"stats": {
    	"followers": {
        	"enabled": false,
          	"count": 0,
          	"icon": "heart"
        },
      	"subs": {
        	"enabled": false,
          	"count": 0,
          	"icon": "heart"
        },
      	"viewers": {
        	"enabled": false,
          	"count": 0,
          	"icon": "heart"
        }
    },
  	"latest": {
    	"follower": {
        	"enabled": false,
          	"name": "",
          	"icon": "person",
          	"empty": ""
        },
      	"subscriber": {
        	"enabled": false,
          	"name": "",
          	"amount": 0,
          	"icon": "person",
          	"empty": ""
        },
      	"donation": {
        	"enabled": false,
          	"name": "",
          	"amount": 0,
          	"icon": "person",
          	"empty": ""
        },
      	"cheer": {
        	"enabled": false,
          	"name": "",
          	"amount": 0,
          	"icon": "person",
          	"empty": ""
        }
    },
  	"train": {
    	"type": "follower-latest",
      	"duration": 30, // Seconds
      	"width": 0,
      	"count": 0
    }
};
let channelName = '';
let stats_keys;
let stats_pos = 0;
let stats_width = 0;
let latest_keys;
let latest_pos = 0;
let currency = '';

// Start everything!
function start() {
  	// Generate stats_keys variable
  	stats_keys = Object.keys(state.stats);
  	latest_keys = Object.keys(state.latest);
  
  	// Setup train
  	$('.train').html(state.train.count);
  	$('.train-bar').width(state.train.width + "%");
  
  	// Start Train Clock
  	setInterval(function() {
    	// Calculate minus width
     	state.train.width -= settings.global.internal_clock / (state.train.duration * 1000) * 100
    
    	// Update bar
      	if (state.train.width < 0) {
        	state.train.width = 0;
          	state.train.count = 0;
          	$('.train').html(state.train.count);
        }
      	$('.train-bar').width(state.train.width + "%");
    }, settings.global.internal_clock);
  
  	// Live Viewers/Followers Refresh
  	if (state.stats.viewers) {
    	setInterval(function() {
            // Viewers
            fetch(`https://decapi.me/twitch/viewercount/${channelName}`).then(response => response.text()).then(data => {
              	if (!data.includes('offline')) {
                	state.stats.viewers.count = data;
                } else {
                	state.stats.viewers.count = 0;
                }
            });
        }, settings.global.stats_clock);	
    }
  
  	// Start refresh clock
  	setInterval(function() {
      	// Stats
      	// fadeOut current
      	$('.stats-container').fadeOut(function() {
        	// Update to new text and fadeIn
          	$('.stats-container').html('<span class="text">' + state.stats[stats_keys[stats_pos]].count + ' <i class="fas fa-' + state.stats[stats_keys[stats_pos]].icon + '"></i></span>')
        	$('.stats-container').width('initial');
          	// Calculate width
          	if (stats_width < $('.stats-container').width()) {
            	stats_width = $('.stats-container').width();
            } else {
            	$('.stats-container').width(stats_width);
            }
          	$('.stats-container').fadeIn();
        
        	stats_pos++;
            if (stats_pos == stats_keys.length) {
                stats_pos = 0;
            }
        });
      
      	// Latest
      	// Variables
      	let latestObject = state.latest[latest_keys[latest_pos]];
      	let latestType = latest_keys[latest_pos];
      
      	// fadeOut Current
      	$('.latest-container').fadeOut(function() {
        	// Genereate html
          	let text = "";
          	text += "<span class='text'>";
          	
          	// Check if empty
          	if (latestObject.name == "") {
            	text += latestObject.empty + " <i class='fas fa-" + latestObject.icon + "'></i>";
            } else {
                // Check type
                switch (latestType) {
                    case 'follower':
                        text += latestObject.name + " <i class='fas fa-" + latestObject.icon + "'></i>";
                    break;
                    case 'subscriber':
						text += latestObject.name + " <span class='accent'>" + latestObject.amount + " " + ((latestObject.amount > 1) ? "Months" : "Month") + "</span> <i class='fas fa-" + latestObject.icon + "'></i>";
                    break;
                    case 'donation':
						text += latestObject.name + " <span class='accent'>" + currency + latestObject.amount.toFixed(2) + "</span> <i class='fas fa-" + latestObject.icon + "'></i>";
                    break;
                    case 'cheer':
						text += latestObject.name + " <span class='accent'>" + latestObject.amount + " " + ((latestObject.amount > 1) ? "Bits" : "Bit") + "</span> <i class='fas fa-" + latestObject.icon + "'></i>";
                    break;
                }
            }
          
          	text += "</span>";
          
          	// Update
          	$('.latest-container').html(text);
          	// Fade in
          	$('.latest-container').fadeIn();
        
        	latest_pos++;
            if (latest_pos == latest_keys.length) {
                latest_pos = 0;
            }
        });
    }, settings.stats.refresh_rate * 1000);
}

// On widget load, setup settings/state etc
window.addEventListener('onWidgetLoad', function(obj) {
  	console.log('ON WIDGET LOAD')
  	console.log(obj)
	// Variables
  	let fieldData = obj.detail.fieldData;
  	currency = obj.detail.currency.symbol;
  	if (channelName == '') {
    	channelName = obj.detail.channel.username;
    }
  	state.train.duration = fieldData.train_length;
  	state.train.type = fieldData.train_type;
  	
  	// Update settings
  	settings.stats.refresh_rate = fieldData.stats_refresh_rate;
  
  	// Stats
  	if (fieldData.stats_toggle_followers == "true") {
    	state.stats.followers.enabled = true;
      	state.stats.followers.icon = fieldData.followers_icon;
      	// Followers
        state.stats.followers.count= obj.detail.session.data["follower-total"].count;
    } else {
    	delete state.stats.followers;
    }
  	if (fieldData.stats_toggle_subs == "true") {
    	state.stats.subs.enabled = true;
      	state.stats.subs.icon = fieldData.subs_icon;
      	state.stats.subs.count = obj.detail.session.data["subscriber-total"].count;
    } else {
    	delete state.stats.subs;
    }
  	if (fieldData.stats_toggle_viewers == "true") {
    	state.stats.viewers.enabled = true;
      	state.stats.viewers.icon = fieldData.viewers_icon;
      	// Update live viewers
      	fetch(`https://decapi.me/twitch/viewercount/${channelName}`).then(response => response.text()).then(data => {
            if (!data.includes('offline')) {
            	state.stats.viewers.count = data;
            } else {
                state.stats.viewers.count = 0;
            }
        });
    } else {
    	delete state.stats.viewers;
    }
  	
  	// Latest
  	if (fieldData.latest_toggle_follower == "true") {
    	state.latest.follower.empty = fieldData.latest_follower_empty;
      	state.latest.follower.enabled = true;
      	state.latest.follower.icon = fieldData.followers_icon;
      	
      	if (obj.detail.session.data["follower-latest"].name != "") {
        	state.latest.follower.name = obj.detail.session.data["follower-latest"].name;
        }
    } else {
    	delete state.latest.follower;
    }
  	if (fieldData.latest_toggle_donation == "true") {
    	state.latest.donation.empty = fieldData.latest_donation_empty;
      	state.latest.donation.enabled = true;
      	state.latest.donation.icon = fieldData.donation_icon;
      
      	if (obj.detail.session.data["tip-latest"].name != "") {
        	state.latest.donation.name = obj.detail.session.data["tip-latest"].name;
          	state.latest.donation.amount = obj.detail.session.data["tip-latest"].amount;
        }
    } else {
    	delete state.latest.donation;
    }
  	if (fieldData.latest_toggle_cheer == "true") {
    	state.latest.cheer.empty = fieldData.latest_cheer_empty;
      	state.latest.cheer.enabled = true;
      	state.latest.cheer.icon = fieldData.cheer_icon;
      
      	if (obj.detail.session.data["cheer-latest"].name != "") {
        	state.latest.cheer.name = obj.detail.session.data["cheer-latest"].name;
          	state.latest.cheer.amount = obj.detail.session.data["cheer-latest"].amount;
        }
    } else {
    	delete state.latest.cheer;
    }
  	if (fieldData.latest_toggle_subscriber == "true") {
    	state.latest.subscriber.empty = fieldData.latest_subscriber_empty;
      	state.latest.subscriber.enabled = true;
      	state.latest.subscriber.icon = fieldData.subs_icon;
      
      	if (obj.detail.session.data["subscriber-latest"].name != "") {
        	state.latest.subscriber.name = obj.detail.session.data["subscriber-latest"].name;
          	state.latest.subscriber.amount = obj.detail.session.data["subscriber-latest"].amount;
        }
    } else {
    	delete state.latest.subscriber;
    }
  	// Start Everything!
  	start();
});

// On session update
window.addEventListener('onSessionUpdate', function(obj) {
  	console.log('ON SESSION UPDATE')
  	console.log(obj)
  
  	// Stats - Subs
  	if (state.stats.subs) {
    	state.stats.subs.count = obj.detail.session["subscriber-total"].count;
    }
	
  	// Latest - Donation
  	if (state.latest.donation) {
    	state.latest.donation.name = obj.detail.session["tip-latest"].name;
      	state.latest.donation.amount = obj.detail.session["tip-latest"].amount;
    }
  
  	// Latest - Cheer
  	if (state.latest.cheer) {
    	state.latest.cheer.name = obj.detail.session["cheer-latest"].name;
      	state.latest.cheer.amount = obj.detail.session["cheer-latest"].amount;
    }
  
  	// Latest - Subscriber
  	if (state.latest.subscriber) {
    	state.latest.subscriber.name = obj.detail.session["subscriber-latest"].name;
      	state.latest.subscriber.amount = obj.detail.session["subscriber-latest"].amount;
    }
  
  	// Latest - Follower
  	if (state.latest.follower) {
    	state.latest.follower.name = obj.detail.session["follower-latest"].name;
    }
  
  	// Follower Count
  	if (state.stats.followers){
      	state.stats.followers.count=obj.detail.session["follower-total"].count;
    }
});

// On new event received
window.addEventListener('onEventReceived', function(obj) {
	if (obj.detail.listener == state.train.type) {
    	state.train.width = 100;
      	state.train.count++;
      	$('.train').html(state.train.count);
    }
});

widget.json

{
  "background_color": {
    "type": "colorpicker",
    "label": "Background Color",
    "value": "rgba(1, 22, 39, 0.5)",
    "group": "Global settings"
  },
  "accent_color": {
    "type": "colorpicker",
    "label": "Accent Color",
    "value": "#ff143f",
    "group": "Global settings"
  },
  "font_name": {
    "type": "googleFont",
    "label": "Font name",
    "group": "Global settings"
  },
  "text_color": {
    "type": "colorpicker",
    "label": "Text Color",
    "value": "#fdfffc",
    "group": "Global settings"
  },
  "text_accent_color": {
    "type": "colorpicker",
    "label": "Text Accent Color",
    "value": "#ff143f",
    "group": "Global settings"
  },
  "font_size": {
    "type": "number",
    "label": "Text Size",
    "value": 16,
    "group": "Global settings"
  },
  "icon_color": {
    "type": "colorpicker",
    "label": "Icon Color",
    "value": "#ff143f",
    "group": "Global settings"
  },
  "train_type": {
    "type": "dropdown",
    "label": "Train Type",
    "options": {
      "follower-latest": "Follow",
      "subscriber-latest": "Subscription"
    },
    "value": "follower-latest",
    "group": "Train settings"
  },
  "train_color": {
    "type": "colorpicker",
    "label": "Train Color",
    "value": "#ff143f",
    "group": "Train settings"
  },
  "train_height": {
    "type": "number",
    "label": "Train Height",
    "value": 8,
    "group": "Train settings"
  },
  "train_length": {
    "type": "number",
    "label": "Train Length In Seconds",
    "value": 30,
    "group": "Train settings"
  },
  "spacer_width": {
    "type": "number",
    "label": "Spacer Width",
    "value": 3,
    "group": "Global settings"
  },
  "spacer_margin": {
    "type": "number",
    "label": "Spacer Margin",
    "value": 8,
    "group": "Global settings"
  },
  "widget_padding": {
    "type": "number",
    "label": "Widget Padding",
    "value": 8,
    "group": "Global settings"
  },
  "stats_refresh_rate": {
    "type": "number",
    "label": "Stats Refresh Rate",
    "value": 10,
    "group": "Global settings"
  },
  "stats_toggle_followers": {
    "type": "dropdown",
    "label": "Enable Follower Stats?",
    "options": {
      "true": "Enable",
      "false": "Disable"
    },
    "value": "true",
    "group": "Followers"
  },
  "followers_icon": {
    "type": "text",
    "label": "Followers Icon",
    "value": "heart",
    "group": "Followers"
  },
  "stats_toggle_subs": {
    "type": "dropdown",
    "label": "Enable Sub Stats?",
    "options": {
      "true": "Enable",
      "false": "Disable"
    },
    "value": "true",
    "group": "Subs"
  },
  "subs_icon": {
    "type": "text",
    "label": "Subs Icon",
    "value": "crown",
    "group": "Subs"
  },
  "stats_toggle_viewers": {
    "type": "dropdown",
    "label": "Enable Viewer Stats? (TWITCH ONLY)",
    "options": {
      "true": "Enable",
      "false": "Disable"
    },
    "value": "false",
    "group": "Viewer count"
  },
  "viewers_icon": {
    "type": "text",
    "label": "Viewers Icon",
    "value": "eye",
    "group": "Viewer count"
  },
  "latest_toggle_follower": {
    "type": "dropdown",
    "label": "Enable Latest Follower?",
    "value": "true",
    "options": {
      "true": "Enable",
      "false": "Disable"
    },
    "group": "Followers"
  },
  "latest_follower_empty": {
    "type": "text",
    "label": "Latest Follower Empty",
    "value": "No Followers",
    "group": "Followers"
  },
  "latest_toggle_subscriber": {
    "type": "dropdown",
    "label": "Enable Latest Subscriber?",
    "value": "true",
    "options": {
      "true": "Enable",
      "false": "Disable"
    },
    "group": "Subs"
  },
  "latest_subscriber_empty": {
    "type": "text",
    "label": "Latest Subscriber Empty",
    "value": "No Subscribers",
    "group": "Subs"
  },
  "latest_toggle_cheer": {
    "type": "dropdown",
    "label": "Enable Latest Cheer?",
    "value": "true",
    "options": {
      "true": "Enable",
      "false": "Disable"
    },
    "group": "Cheers"
  },
  "latest_cheer_empty": {
    "type": "text",
    "label": "Latest Cheer Empty",
    "value": "No Cheers",
    "group": "Cheers"
  },
  "latest_toggle_donation": {
    "type": "dropdown",
    "label": "Enable Latest Donation?",
    "value": "true",
    "options": {
      "true": "Enable",
      "false": "Disable"
    },
    "group": "Tips"
  },
  "latest_donation_empty": {
    "type": "text",
    "label": "Latest Donation Empty",
    "value": "No Donations",
    "group": "Tips"
  },
  "donation_icon": {
  	"type": "text",
    "label": "Donation Icon",
   	"value": "money-bill-wave",
    "group": "Tips"
  },
  "cheer_icon": {
 	"type": "text",
    "label": "Cheer Icon",
    "value": "star",
    "group": "Cheers"
  },
  "widgetName":{
   "type":"hidden",
   "value":"Rotating information bar"
  },
  "widgetAuthor":{
    "type":"hidden",
    "value":"Coocla33"
  }
}