<html lang="en">
<head>
<meta charset="utf-8">
<title>Follower Alert</title>
<style>
@font-face {
font-family: 'Lobster';
font-style: normal;
font-weight: 400;
src: local('Lobster'), url(http://fonts.gstatic.com/s/lobster/v9/MWVf-Rwh4GLQVBEwbyI61Q.woff) format('woff');
}
body {
background-color: rgba(0, 0, 0, 0);
margin: 0px auto;
color: white;
}
#follower-alert {
width: 1920px !important;
height: 1080px !important;
}
#follower-alert .text {
margin: 0px !important;
padding: 0px !important;
width: 550px !important;
position: absolute !important;
top: 815px !important;
left: 680px !important;
font-family: 'Lobster', cursive !important;
text-align:center;
}
</style>
</head>
<body>
<div id="follower-alert">
<div class="text" id="new-follower"></div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript">
var followers = {};
var logging = !!getParameterByName("logging");
function debug() {
if(!logging) return;
var prefix = "[NightDev Follower Alert] ";
arguments[0] = prefix+arguments[0];
console.log.apply(console, arguments);
}
function grabFollowers(all, offset) {
all = all || false;
offset = offset || 0;
if(all) {
$.getJSON('https://api.twitch.tv/kraken/channels/'+encodeURIComponent(getParameterByName("channel"))+'/follows?direction=desc&limit=100&offset='+offset+'&callback=?', function(data) {
if(data.follows && data.follows.length > 0) {
var tempList = [];
data.follows.forEach(function(follower) {
followers[follower.user.name] = true;
tempList.push(follower.user.name);
});
debug("Imported followers: %s", tempList.join(', '));
debug("Imported %d followers. Total Followers: %d", data.follows.length, Object.keys(followers).length);
grabFollowers(true, offset+100);
}
}).fail(function() {
setTimeout(function() {
grabFollowers(true, offset);
}, 5000);
});
} else {
$.getJSON('https://api.twitch.tv/kraken/channels/'+encodeURIComponent(getParameterByName("channel"))+'/follows?direction=desc&limit=100&callback=?', function(data) {
if(data.follows) {
if(data['_total'] > 0 && followers.length === 0) {
var tempList = [];
data.follows.forEach(function(follower) {
followers[follower.user.name] = true;
tempList.push(follower.user.name);
});
debug("Imported followers: %s", tempList.join(', '));
debug("Imported %d followers. Total Followers: %d", data.follows.length, Object.keys(followers).length);
} else {
data.follows.forEach(function(follower) {
if(!followers[follower.user.name]) {
followers[follower.user.name] = true;
debug("New follower: %s", follower.user.name);
newFollower(follower.user.display_name);
}
});
}
}
});
}
}
function resizeName() {
while($('#follower-alert .text')[0].scrollWidth > $('#follower-alert .text').width()+5) {
var currentSize = parseInt($("#follower-alert .text").css("font-size").replace("px",""));
$("#follower-alert .text").css("font-size", (currentSize-1)+"px");
}
}
var timer = false;
var alertSound = false;
function newFollower(user) {
if(timer) {
setTimeout(function() {
newFollower(user);
}, 1000);
return;
}
if(alertSound) alertSound.play();
$("#new-follower").html(user);
$("#follower-alert .text").css("font-size", "45px");
if(getParameterByName("chroma") === "true") {
$("#follower-alert").show();
$("#follower-alert")[0].style.top = -parseInt($("#follower-alert").height());
$("#follower-alert").animate({
top: 0
}, 300, function() {
resizeName();
});
timer = setTimeout(function() {
$("#follower-alert").animate({
top: -parseInt($("#follower-alert").height())
}, 1000, function() {
$("#follower-alert").hide();
timer = false;
});
}, 10000);
} else {
$("#follower-alert").fadeIn("slow", function() {
resizeName();
});
timer = setTimeout(function() {
$("#follower-alert").fadeOut("slow", function() {
timer = false;
});
}, 10000);
}
}
function getParameterByName(name) {
name = name.replace(/[\[]/, "\\\[").replace(/[\]]/, "\\\]");
var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"),
results = regex.exec(location.search);
return results == null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "));
}
$(document).ready(function() {
grabFollowers(true);
if(getParameterByName("chroma") === "true") {
$("body").css("background-color","#00ff00");
}
var channel = getParameterByName("channel"),
type = getParameterByName("type"),
alert = getParameterByName("alert"),
sound = false;
if(channel) {
setInterval(grabFollowers, 15000);
if(type === "stacked" || type === "custom-centered") {
$('#follower-alert .text').css({
'margin-left':'15px',
'width':'550px'
});
}
if(type === "custom-left") {
$('#follower-alert .text').css({
'margin-left':'25px'
});
}
if(alert) {
$('#follower-alert').css('background-image','url('+decodeURIComponent(alert)+')');
}
if(sound) {
alertSound = new Audio(decodeURIComponent(sound));
alertSound.addEventListener("loadeddata", function() {
if(getParameterByName("preview") === "true") {
newFollower("Test_user");
}
});
} else {
if(getParameterByName("preview") === "true") {
newFollower("Test_user");
}
}
}
});
</script>
</body>
</html>
