Skip to content

Instantly share code, notes, and snippets.

@Coocla33

Coocla33/widget.css

Last active May 12, 2021 23:41
Show Gist options
  • Save Coocla33/ee7c592219839470bf1e04443905080b to your computer and use it in GitHub Desktop.
Save Coocla33/ee7c592219839470bf1e04443905080b to your computer and use it in GitHub Desktop.
Download ZIP
Information Bar Version 1.1
Raw
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;
}
Raw
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>
Raw
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);
}
});
Raw
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"
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment