Skip to content

Instantly share code, notes, and snippets.

@nabbynz

nabbynz/TagPro_Twitch_Streams.user.js

Last active September 22, 2021 00:27
Show Gist options
  • Save nabbynz/6d87a7cf8b77f8a4ca4ddd1b6dce45ca to your computer and use it in GitHub Desktop.
Save nabbynz/6d87a7cf8b77f8a4ca4ddd1b6dce45ca to your computer and use it in GitHub Desktop.
Download ZIP
TagPro Twitch Streams
Raw
TagPro_Twitch_Streams.user.js
// ==UserScript==
// @name TagPro Twitch Streams
// @description Shows the current TagPro streams from Twitch on the homepage. Updates every 5 mins.
// @version 2.0.0
// @include https://tagpro.koalabeast.com/
// @updateURL https://gist.github.com/nabbynz/6d87a7cf8b77f8a4ca4ddd1b6dce45ca/raw/TagPro_Twitch_Streams.user.js
// @downloadURL https://gist.github.com/nabbynz/6d87a7cf8b77f8a4ca4ddd1b6dce45ca/raw/TagPro_Twitch_Streams.user.js
// @grant GM_getValue
// @grant GM_setValue
// @grant GM_deleteValue
// @grant GM_addStyle
// @author nabby
// ==/UserScript==
console.log('START: ' + GM_info.script.name + ' (v' + GM_info.script.version + ' by ' + GM_info.script.author + ')');
tagpro.ready(function() {
let clearable_Timer;
let startTime = null;
let streamsHistory = GM_getValue('streamsHistory', {});
$('#game-controls').before('<div id="TTS_Streams_Container" style="display:inline-block; position:relative; width:100%; margin:30px 0; border:2px ridge #666; border-radius:8px; background:linear-gradient(160deg, #b3b3b3, #162021);">' +
' <div id="TTS_Header" style="text-align:center; margin:5px 0 0px; color:#f4f5bf; text-shadow:1px 1px 1px #404040;">Twitch Streams...</div>' +
' <span id="TTS_ShowHistory" style="position:absolute; top:5px; left:5px; color:#fff; text-shadow:1px 1px 1px #333; font-size:10px; cursor:pointer;" title="Previous Streams">&hellip;</span>' +
' <div id="TTS_History" style="position:absolute; top:20px; left:5px; color:#eee; font-size:11px; background:#222; padding:15px 5px; border:1px ridge #cbccb4; border-radius:3px; box-shadow:2px 2px 5px #111; overflow-y:auto; max-height:120px; z-index:1; display:none;" ></div>' +
' <span id="TTS_Timer" style="position:absolute; top:5px; right:5px; color:#ccc; text-shadow:1px 1px 1px #333; font-size:10px; font-style:italic;" title="Updating in..."></span>' +
' <div id="TTS_Streams_List" style="display:flex; flex-flow:row wrap; justify-content:space-around; margin:0 auto; padding:10px; overflow-y:auto; overflow-x:none; max-height:340px;"></div>' +
'</div>');
$('body').append('<div id="TTS_Modal" style="position:absolute; top:5px; left:50%; translate: -50% 0%; background:black; z-index:1000; display:none;"></div>');
$('#TTS_Modal').append('<iframe id="TTS_Frame" src="about:blank" width="800" height="450" allowfullscreen="true" style="box-shadow:0 0 20px 10px black;"></iframe>');
$('#TTS_Modal').append('<div id="TTS_Buttons" style="position:absolute; display:flex; flex-flow:row nowrap; top:5px; right:5px; font-size:11px; text-align:center; font-weight:bold; text-shadow:1px 1px 1px #555; opacity:0.35; z-index:2;"></div>');
$('#TTS_Buttons').append('<div class="TTS_Button" data-type="minimize" style="">-</div>');
$('#TTS_Buttons').append('<div class="TTS_Button" data-type="size" data-width="320px" data-height="180px">320</div>');
$('#TTS_Buttons').append('<div class="TTS_Button" data-type="size" data-width="480px" data-height="270px">480</div>');
$('#TTS_Buttons').append('<div class="TTS_Button" data-type="size" data-width="800px" data-height="450px" style="color:#4bf14b;">800</div>');
$('#TTS_Buttons').append('<div class="TTS_Button" data-type="size" data-width="1024px" data-height="576px">1024</div>');
$('#TTS_Buttons').append('<div class="TTS_Button" data-type="size" data-width="1280px" data-height="720px">1280</div>');
$('#TTS_Buttons').append('<div class="TTS_Button" data-type="size" data-width="1600px" data-height="900px">1600</div>');
$('#TTS_Buttons').append('<div class="TTS_Button" data-type="size" data-width="1920px" data-height="920px">1920</div>');
$('#TTS_Buttons').append('<div class="TTS_Button TTS_Close" data-type="close" style="margin:0px 2px 0 8px; background:rgba(255,128,0,0.5); font-weight:bold; color:orangered;">X</div>');
let showTimer = function(start = true) {
if (start) {
clearable_Timer = setInterval(function() {
const time = Math.max(300 - Math.round((Date.now() - startTime) / 1000), 0); //don't show negative times
$('#TTS_Timer').text(tagpro.helpers.timeFromSeconds(time, true));
}, 1000);
} else {
clearInterval(clearable_Timer);
}
};
let updateHistory = function() {
$('#TTS_History').empty();
if (Object.keys(streamsHistory).length) {
const msToKeepHistory = 1000 * 60 * 60 * 24 * 7; //eg: 1000*60*60*24 = 24 hours, 1000*60*60*24*7 = 7 days
let saveHistory = false;
for (let entry in streamsHistory) {
const startDateMs = new Date(streamsHistory[entry].startDate).getTime();
if (startDateMs < Date.now() - msToKeepHistory) {
delete streamsHistory[entry];
saveHistory = true;
} else {
$('#TTS_History').append('<div class="TTS_HistoryEntry" data-sortby="' + startDateMs + '" title="' + streamsHistory[entry].userDisplayName + '\n' + streamsHistory[entry].title + '\nStarted: ' + new Date(streamsHistory[entry].startDate).toLocaleString() + '" data-streamer="' + streamsHistory[entry].username + '">' +
' <span style="display:inline-block; width:120px; text-align:right; color:#e4a773; font-style:italic;">' + new Date(streamsHistory[entry].startDate).toLocaleString() + '</span>' +
' <span class="TTS_HistoryName" style="margin:0 5px;">' + streamsHistory[entry].userDisplayName + '</span>' +
' <span style="color:#ccc;">&quot;' + streamsHistory[entry].title + '&quot;' + '</span>' +
'</div>');
}
}
$('#TTS_History').find('.TTS_HistoryEntry').sort(function(a, b) {
return ($(b).data('sortby') - $(a).data('sortby'));
}).appendTo( $('#TTS_History') );
if (saveHistory) {
GM_setValue('streamsHistory', streamsHistory);
if (!Object.keys(streamsHistory).length) {
$('#TTS_History').empty();
$('#TTS_History').append('<div class="TTS_HistoryEntry">No History</div>');
}
}
} else {
if (!Object.keys(streamsHistory).length) {
$('#TTS_History').append('<div class="TTS_HistoryEntry">No History</div>');
}
}
};
let updateStreams = function() {
startTime = Date.now();
$('#TTS_Streams_List').fadeTo(500, 0, function() {
$.ajax({
dataType: "json",
url: document.location.origin + '/streams.json'
}).done(function(data) {
$('#TTS_Streams_List').empty();
if (Object.keys(data).length) {
let saveHistory = false;
for (let item in data) {
$('#TTS_Streams_List').append('<div class="TTS_Stream" data-streamer="' + data[item].username + '" style="background-image:url(' + data[item].thumbnailUrl + '?ts=' + Date.now() + ');" title="' + data[item].userDisplayName + '\n' + data[item].title + '\nStarted: ' + new Date(data[item].startDate).toLocaleString() + '\nViewers: ' + data[item].viewers + '">' +
'<div class="TTS_StreamName">' + data[item].userDisplayName + '</div>');
if (!streamsHistory.hasOwnProperty(data[item].id)) {
streamsHistory[data[item].id] = data[item];
saveHistory = true;
}
}
if (saveHistory) {
GM_setValue('streamsHistory', streamsHistory);
}
} else {
$('#TTS_Streams_List').append('<div style="text-shadow:1px 1px 1px black; color:white; font-size:14px; font-style:italic; font-weight:normal;">No TagPro streams were found.</div>');
}
$('#TTS_Streams_List').css('opacity', '1');
updateHistory();
}).fail(function(data) {
console.log('TagPro Twitch Streams:: Failed to GET streams JSON data');
});
});
};
//event listeners...
$('#TTS_Streams_Container').on('click', '.TTS_Stream, .TTS_HistoryEntry', function() {
const streamer = this.dataset.streamer;
if (streamer) {
$('#TTS_Modal').fadeIn(400, function() {
$('#TTS_Frame').attr('src', 'https://player.twitch.tv/?channel=' + streamer + '&parent=tagpro.koalabeast.com');
});
}
});
$('.TTS_Button').on('click', function() {
if (this.dataset.type === 'close') {
$('#TTS_Frame').attr('src', 'about:blank');
$('#TTS_Modal').fadeOut(200);
} else if (this.dataset.type === 'size') {
const width = this.dataset.width || '800px';
const height = this.dataset.height || '450px';
$('#TTS_Modal').find('iframe').attr('width', width).attr('height', height).css('opacity', '1');
$('.TTS_Button').not('.TTS_Close').css('color', 'white');
$(this).css('color', '#4bf14b');
} else if (this.dataset.type === 'minimize') {
$('#TTS_Modal').find('iframe').attr('width', '320px').attr('height', '20px').css('opacity', '0');
$('.TTS_Button').not('.TTS_Close').css('color', 'white');
$(this).css('color', '#4bf14b');
}
});
$('#TTS_Buttons').on('mouseenter', function() {
$('#TTS_Buttons').css('opacity', '1');
}).on('mouseleave', function() {
$('#TTS_Buttons').css('opacity', '0.35');
});
$('#TTS_ShowHistory').on('click', function() {
$('#TTS_History').fadeToggle();
});
$('#TTS_History').on('mouseleave', function() {
$('#TTS_History').fadeOut(50);
});
//styles...
GM_addStyle('.TTS_Button { margin:0px 2px; padding:0 3px; background:rgba(255,255,255,0.5); font-weight:normal; color:white; border-radius:8px; cursor:pointer; }');
GM_addStyle('.TTS_Stream { background-size:contain; width:250px; height:140px; background-repeat:no-repeat; margin:5px; box-shadow:black 2px 2px 5px; border-radius:5px; cursor:pointer; }');
GM_addStyle('.TTS_StreamName { width:233px; margin:2px 8px; text-shadow:1px 1px 1px #232323; color:#e8e8e8; font-size:15px; font-weight:bold; overflow:hidden; }');
GM_addStyle('.TTS_HistoryEntry { width:500px; overflow-x:hidden; white-space:nowrap; cursor:pointer; }');
GM_addStyle('.TTS_HistoryEntry:hover { background:#444; }');
GM_addStyle('#TTS_Streams_List::-webkit-scrollbar, #TTS_History::-webkit-scrollbar { width:3px; }');
GM_addStyle('#TTS_Streams_List::-webkit-scrollbar-thumb, #TTS_History::-webkit-scrollbar-thumb { background:#965840; }');
GM_addStyle('#TTS_Streams_List::-webkit-scrollbar-track, #TTS_History::-webkit-scrollbar-track { background:#222; }');
//start...
setInterval(function() {
updateStreams();
}, 300000);
updateStreams();
showTimer();
}); //tagpro.ready()
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment