|
var users = ["ESL_SC2", "OgamingSC2", "cretetion", "freecodecamp", "storbeck", |
|
"habathcx", "RobotCaleb", "noobs2ninjas", "brunofin", "comster404"]; |
|
|
|
/************************************************************************************* |
|
* Calls the apis, registers the button handlers on load |
|
**************************************************************************************/ |
|
$(document).ready(function () { |
|
createUserDivs(); |
|
|
|
//calls the twitch stream and channel apis |
|
retrieveChannelInfo(); |
|
retrieveStreamInfo(); |
|
|
|
|
|
|
|
//register the button handlers |
|
|
|
//gets the user id, which is the same as the div id. Allows selection of individual divs that |
|
//corresponds to the user id because the div id corresponds to user id, which allows you to |
|
//show individual divs. |
|
$(".btn-all").click(function () { |
|
for (var i = 0; i < users.length; i++) { |
|
$("#" + users[i]).show(); |
|
} |
|
console.log("show all clicked"); |
|
}); |
|
|
|
$(".btn-online").click(function () { |
|
for (var i = 0; i < users.length; i++) { |
|
var status = $("#" + users[i] + " .userStreamInfo").text(); |
|
if (status === "Online") { |
|
$("#" + users[i]).show(); |
|
} else{ |
|
$("#" + users[i]).hide(); |
|
} |
|
} |
|
}); |
|
|
|
$(".btn-offline").click(function () { |
|
for (var i = 0; i < users.length; i++) { |
|
var status = $("#" + users[i] + " .userStreamInfo").text(); |
|
if (status === "Offline") { |
|
$("#" + users[i]).show(); |
|
} else{ |
|
$("#" + users[i]).hide(); |
|
} |
|
} |
|
|
|
|
|
}); |
|
|
|
//allows the user to search for a specific user's ID |
|
|
|
$(".searchInput").click(function () { |
|
var text = $("input").val(); |
|
$(".twitchUser").hide(); |
|
$("#" + text).show(); |
|
|
|
if (text === ""){ |
|
alert("Please enter user's ID"); |
|
} |
|
|
|
}); |
|
|
|
|
|
}); |
|
|
|
/************************************************************************************* |
|
* Creates Div and other elements for each user |
|
**************************************************************************************/ |
|
var createUserDivs = function () { |
|
for (var i = 0; i < users.length; i++) { |
|
// create the parent div |
|
var div = document.createElement("DIV"); |
|
div.id = users[i]; |
|
div.className = "twitchUser text-center col-md-2"; |
|
// create image child |
|
var image = document.createElement("IMG"); |
|
image.className = "channelImage"; |
|
div.appendChild(image); |
|
// create h3 for userName |
|
var userName = document.createElement("DIV"); |
|
userName.className = "userName"; |
|
div.appendChild(userName); |
|
// create p for userStreamInfo |
|
var userStreamInfo = document.createElement("DIV"); |
|
userStreamInfo.className = "userStreamInfo"; |
|
div.appendChild(userStreamInfo); |
|
//create a link for userStatus |
|
var userStatus = document.createElement("A"); |
|
userStatus.className = "userStatus "; |
|
div.appendChild(userStatus); |
|
//create a p for user game status |
|
var game = document.createElement("P"); |
|
game.className = "game"; |
|
div.appendChild(game); |
|
document.getElementById("twitchUsersContainer").appendChild(div); |
|
|
|
} |
|
} |
|
|
|
|
|
/******************************************************************************************** |
|
* Calls the Twitch streams api to get information about the user's streaming status |
|
**********************************************************************************************/ |
|
function retrieveStreamInfo() { |
|
var streamApiUrl = "https://api.twitch.tv/kraken/streams/"; |
|
for (var i = 0; i < users.length; i++) { |
|
$.ajax({ |
|
type: 'GET', |
|
url: streamApiUrl + users[i], |
|
userId: users[i], |
|
dataType: "jsonp", |
|
success: function (data) { |
|
console.log(this.userId); |
|
console.log(data); |
|
var streamInfo = { |
|
userStreamInfo: data.stream, |
|
userStatus: data.status |
|
}; |
|
|
|
displayStreamData(streamInfo, this.userId); |
|
}, |
|
|
|
error: function (errorDisplay) { |
|
var streamInfo = { |
|
userStatus: '400' |
|
}; |
|
displayStreamData(streamInfo, this.userId); |
|
} |
|
}); |
|
} |
|
|
|
|
|
|
|
} |
|
/******************************************************************************************** |
|
* Calls the Twitch channels api to retrieve information about each user |
|
**********************************************************************************************/ |
|
function retrieveChannelInfo() { |
|
var channelApiUrl = "https://api.twitch.tv/kraken/channels/"; |
|
for (var i = 0; i < users.length; i++) { |
|
$.ajax({ |
|
type: 'GET', |
|
url: channelApiUrl + users[i], |
|
userId: users[i], |
|
dataType: "jsonp", |
|
success: function (data) { |
|
console.log(this.userId); |
|
//console.log(data); |
|
|
|
var channelInfo = { |
|
userStatus: data.status, |
|
userName: data.display_name, |
|
userLogo: data.logo, |
|
message: data.message, |
|
userUrl: data.url, |
|
game: data.game |
|
}; |
|
//console.log(users[i]); |
|
//console.log(channelInfo); |
|
displayChannelData(channelInfo, this.userId); |
|
}, |
|
|
|
error: function (errorDisplay) { |
|
alert("Error! Could not retrieve information"); |
|
} |
|
}); |
|
} |
|
|
|
} |
|
|
|
/******************************************************************************************** |
|
* Displays the users status, logo, and url based on their Twitch status |
|
**********************************************************************************************/ |
|
function displayChannelData(channelInfo, userId) { |
|
// gets the image element by the document.get method to retrieve info in said element id. |
|
var logoElementArray = document.getElementById(userId).getElementsByClassName("channelImage"); |
|
var userStatusInfo = document.getElementById(userId).getElementsByClassName("userStatus"); |
|
var att = document.createAttribute("href"); |
|
att.value = channelInfo.userUrl; |
|
userStatusInfo[0].setAttributeNode(att); |
|
|
|
//display the username into the assigned div and class |
|
$('#' + userId + " .userName").text(userId); |
|
|
|
|
|
if (channelInfo.userStatus === null) { |
|
$('#' + userId + " .userStatus").text(); |
|
$('#' + userId + " .game").text(); |
|
logoElementArray[0].src = channelInfo.userLogo; |
|
} else if (channelInfo.userStatus === 422 || channelInfo.userStatus === 404) { |
|
logoElementArray[0].src = "https://res.cloudinary.com/angiemjohnson/image/upload/v1465090995/delete_x_red_globe_89_u0brnq.jpg"; |
|
} else { |
|
$('#' + userId + " .userStatus").text(channelInfo.userStatus); |
|
$('#' + userId + " .game").text("stream:" + channelInfo.game); |
|
logoElementArray[0].src = channelInfo.userLogo; |
|
} |
|
|
|
if (channelInfo.game === null) { |
|
$("#" + userId + " .game").hide(); |
|
} |
|
|
|
|
|
} |
|
|
|
/******************************************************************************************** |
|
* Displays whether the user is streaming or not |
|
**********************************************************************************************/ |
|
function displayStreamData(streamInfo, userId) { |
|
if (streamInfo.userStreamInfo === null) { |
|
$('#' + userId + " .userStreamInfo").text("Offline"); |
|
} else if (streamInfo.userStatus === 422 || |
|
streamInfo.userStatus === 404 || |
|
streamInfo.userStatus === '400') { |
|
$('#' + userId + " .userStreamInfo").text("Account doesn't exist"); |
|
} else { |
|
$('#' + userId + " .userStreamInfo").text("Online"); |
|
} |
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
