Skip to content

Instantly share code, notes, and snippets.

@Coocla33

Coocla33/widget.css

Created May 24, 2020 12:12
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save Coocla33/bdaf00292ec1aaf27a313412fb9d8512 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save Coocla33/bdaf00292ec1aaf27a313412fb9d8512 to your computer and use it in GitHub Desktop.
Download ZIP
Stream HUD Youtube
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'>" + currency + latestObject.amount.toFixed(2) + "</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["subscriber-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["sponsor-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["subscriber-latest"].name != "") {
state.latest.follower.name = obj.detail.session.data["subscriber-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["superchat-latest"].name != "") {
state.latest.cheer.name = obj.detail.session.data["superchat-latest"].name;
state.latest.cheer.amount = obj.detail.session.data["superchat-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["sponsor-latest"].name != "") {
state.latest.subscriber.name = obj.detail.session.data["sponsor-latest"].name;
state.latest.subscriber.amount = obj.detail.session.data["sponsor-latest"].amount;
}
} else {
delete state.latest.subscriber;
}
// Start Everything!
start();
console.log(state);
});
// 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["sponsor-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["superchat-latest"].name;
state.latest.cheer.amount = obj.detail.session["superchat-latest"].amount;
}
// Latest - Subscriber
if (state.latest.subscriber) {
state.latest.subscriber.name = obj.detail.session["sponsor-latest"].name;
state.latest.subscriber.amount = obj.detail.session["sponsor-latest"].amount;
}
// Latest - Follower
if (state.latest.follower) {
state.latest.follower.name = obj.detail.session["subscriber-latest"].name;
}
// Follower Count
if (state.stats.followers){
state.stats.followers.count=obj.detail.session["subscriber-total"].count;
}
});
// On new event received
window.addEventListener('onEventReceived', function(obj) {
console.log(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": {
"subscriber-latest": "Subscriber",
"sponsor-latest": "Sponsor"
},
"value": "subscriber-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 Subscribers Stats?",
"options": {
"true": "Enable",
"false": "Disable"
},
"value": "true",
"group": "Subscribers"
},
"followers_icon": {
"type": "text",
"label": "Subscribers Icon",
"value": "heart",
"group": "Subscribers"
},
"stats_toggle_subs": {
"type": "dropdown",
"label": "Enable Sponsors Stats?",
"options": {
"true": "Enable",
"false": "Disable"
},
"value": "true",
"group": "Sponsors"
},
"subs_icon": {
"type": "text",
"label": "Sponsors Icon",
"value": "crown",
"group": "Sponsors"
},
"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 Subscriber?",
"options": {
"true": "Enable",
"false": "Disable"
},
"value": "false",
"group": "Subscribers"
},
"latest_follower_empty": {
"type": "text",
"label": "Latest Subscriber Empty",
"value": "No Subscribers",
"group": "Subscribers"
},
"latest_toggle_subscriber": {
"type": "dropdown",
"label": "Enable Latest Sponsor?",
"options": {
"true": "Enable",
"false": "Disable"
},
"value": "false",
"group": "Sponsors"
},
"latest_subscriber_empty": {
"type": "text",
"label": "Latest Sponsor Empty",
"value": "No Sponsors",
"group": "Sponsors"
},
"latest_toggle_cheer": {
"type": "dropdown",
"label": "Enable Latest Superchat?",
"options": {
"true": "Enable",
"false": "Disable"
},
"value": "false",
"group": "Superchats"
},
"latest_cheer_empty": {
"type": "text",
"label": "Latest Superchats Empty",
"value": "No Superchats",
"group": "Superchats"
},
"latest_toggle_donation": {
"type": "dropdown",
"label": "Enable Latest Donation?",
"options": {
"true": "Enable",
"false": "Disable"
},
"value": "false",
"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": "Superchat Icon",
"value": "money-bill",
"group": "Superchats"
},
"widgetName":{
"type":"hidden",
"value":"Rotating information bar"
},
"widgetAuthor":{
"type":"hidden",
"value":"Coocla33"
}
}
Copy link

ghost commented May 24, 2020

wait this is the youtube one im stupid

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment