Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Twitch TV helper
<div class="fixed-width center-block">
<div class="btn-group btn-group-justified">
<div class="btn-group">
<a id="show-all" class="btn btn-header" role="button">All</a>
</div>
<div class="btn-group">
<a id="show-online" class="btn btn-header" role="button">Online</a>
</div>
<div class="btn-group">
<a id="show-offline" class="btn btn-header" role="button">Offline</a>
</div>
</div>
<!-- Adding the filtering search bar-->
<div class="input-group">
<span class="input-group-btn">
<button class="btn" type="button">
<i class="glyphicon glyphicon-search" aria-hidden="true"></i>
</button>
</span>
<input type="text" class="form-control" placeholder="username" id="searchForm">
</div>
<!-- List of people that are streaming to be displayed -->
<div class="list-items">
<ul class="list-unstyled" id="people">
<div id="list-container">
<li class="person-item" id="item0">
<a href="#" class="btn btn-list center-element btn-box-shadow" role="button">
<img class="img-circle" src="">
<div class="profile-name"></div>
<div class="stream-info"></div>
</a>
</li>
<li class="person-item" id="item1">
<a href="#" class="btn btn-list center-element btn-box-shadow" role="button">
<img class="img-circle" src="">
<div class="profile-name"></div>
<div class="stream-info"></div>
</a>
</li>
<li class="person-item" id="item2">
<a href="#" class="btn btn-list center-element btn-box-shadow" role="button">
<img class="img-circle" src="">
<div class="profile-name"></div>
<div class="stream-info"></div>
</a>
</li>
<li class="person-item" id="item3">
<a href="#" class="btn btn-list center-element btn-box-shadow" role="button">
<img class="img-circle" src="">
<div class="profile-name"></div>
<div class="stream-info"></div>
</a>
</li>
<li class="person-item" id="item4">
<a href="#" class="btn btn-list center-element btn-box-shadow" role="button">
<img class="img-circle" src="">
<div class="profile-name"></div>
<div class="stream-info"></div>
</a>
</li>
<li class="person-item" id="item5">
<a href="#" class="btn btn-list center-element btn-box-shadow" role="button">
<img class="img-circle" src="">
<div class="profile-name"></div>
<div class="stream-info"></div>
</a>
</li>
<li class="person-item" id="item6">
<a href="#" class="btn btn-list center-element btn-box-shadow" role="button">
<img class="img-circle" src="">
<div class="profile-name"></div>
<div class="stream-info"></div>
</a>
</li>
<li class="person-item" id="item7">
<a href="#" class="btn btn-list center-element btn-box-shadow" role="button">
<img class="img-circle" src="">
<div class="profile-name"></div>
<div class="stream-info"></div>
</a>
</li>
<li class="person-item" id="item8">
<a href="#" class="btn btn-list center-element btn-box-shadow" role="button">
<img class="img-circle" src="">
<div class="profile-name"></div>
<div class="stream-info"></div>
</a>
</li>
<li class="person-item" id="item9">
<a href="#" class="btn btn-list center-element btn-box-shadow" role="button">
<img class="img-circle" src="">
<div class="profile-name"></div>
<div class="stream-info"></div>
</a>
</li>
<li class="person-item" id="item10">
<a href="#" class="btn btn-list center-element btn-box-shadow" role="button">
<img class="img-circle" src="">
<div class="profile-name"></div>
<div class="stream-info"></div>
</a>
</li>
<li class="person-item" id="item11">
<a href="#" class="btn btn-list center-element btn-box-shadow" role="button">
<img class="img-circle" src="">
<div class="profile-name"></div>
<div class="stream-info"></div>
</a>
</li>
</div>
</ul>
</div>
</div>
var people = ["freecodecamp", "storbeck", "terakilobyte", "habathcx", "robotcaleb", "medrybw", "thomasballinger", "noobs2ninjas", "beohoff", "owsla", "brunofin", "comster404"];
var online = [];
var offline = [];
var defaultImgUrl = "http://placehold.it/50x50";
var notFoundInfo = "Account Closed";
var showAllBtn, showOnlineBtn, showOfflineBtn, searchForm;
function getChannelInfo(channelUrl, streamObject) {
$.getJSON(channelUrl)
.done(function(data) {
var imgUrl = data.logo;
if (!imgUrl) {
imgUrl = defaultImgUrl;
}
var name = data.display_name;
var index = people.indexOf(name.toLowerCase());
var url = data.url;
var selector = '#item' + index;
var listItem = $(selector);
listItem.find('a').prop('href', url)
listItem.find('img').prop('src', imgUrl);
listItem.find('.profile-name').html(name);
if (!streamObject) {
listItem.find('a').append("<i class='fa fa-ban fa-align-right fa-2x'></i>");
offline.push(selector);
} else {
listItem.find('a').append("<i class='fa fa-check-circle-o fa-2x'></i>");
online.push(selector);
listItem.find('.stream-info').html(data.status);
}
})
.fail(onRequestFail);
}
function onRequestFail(jqXHR, textStatus, errorThrown) {
console.log("There was an error with the request." + textStatus + errorThrown);
}
function onStreamCallback(data, textStatus, jqXHR) {
if(typeof(data) === "undefined") {
console.log("Caught undefined data here");
} else {
if(typeof(data.error) !== "undefined" && data.error !== "") {
var message = data.message;
var channelName = message.substring(message.indexOf("'") + 1, message.lastIndexOf("'"));
var index = people.indexOf(channelName.toLowerCase());
var selector = '#item' + index;
var listItem = $(selector);
listItem.find('a').prop('href', "undefined")
listItem.find('img').prop('src', defaultImgUrl);
listItem.find('.profile-name').html(channelName);
listItem.find('a').append("<i class='fa fa-ban fa-align-right fa-2x'></i>");
listItem.find('.stream-info').html(notFoundInfo);
offline.push(selector);
} else {
getChannelInfo(data._links.channel + "?callback=?", data.stream);
}
}
}
function retrieveStream(channelName, successCallback) {
$.getJSON('https://api.twitch.tv/kraken/streams/' + channelName + "?callback=?")
.done(successCallback)
.fail(onRequestFail);
}
function onShowAllClicked() {
$('.person-item').show();
}
function onShowOnlineClicked() {
offline.forEach(function(element) {
$(element).hide();
});
online.forEach(function(element) {
$(element).show();
});
}
function onShowOfflineClicked() {
online.forEach(function(element) {
$(element).hide();
});
offline.forEach(function(element) {
$(element).show();
});
}
function onSearchInputChange(event) {
if (typeof(event) === "undefined")
return;
var searchValue = (event.target.value).toLowerCase();
if (searchValue === "") {
onShowAllClicked();
} else {
$('.person-item').each(function(index) {
var profileName = $(this).find('.profile-name').text().toLowerCase();
var indexOfEvent = profileName.indexOf(event);
if (profileName.indexOf(searchValue) < 0)
$(this).hide();
else
$(this).show();
});
}
}
$(document).ready(function() {
online = [];
offline = [];
// Retrieving info about list of usernames.
people.forEach(function(element) {
retrieveStream(element, onStreamCallback);
});
showAllBtn = $('#show-all');
showAllBtn.click(onShowAllClicked);
showOnlineBtn = $('#show-online');
showOnlineBtn.click(onShowOnlineClicked);
showOfflineBtn = $('#show-offline');
showOfflineBtn.click(onShowOfflineClicked);
searchForm = $('#searchForm');
searchForm.on('input', onSearchInputChange);
})
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://ttv-api.s3.amazonaws.com/twitch.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
body {
background-color:#fdd5c0;
}
/* disables link styles */
a:link,
a:visited {
text-decoration: none;
color: #000000;
}
.list-items {
background-color: #f46161;
padding: 0px 0px 0px 0px;
}
.fixed-width {
width: 500px;
}
.person-item {
padding: 5px 0px 5px 0px;
}
.profile-name {
font-family: FontAwesome;
position: absolute;
color: #FFFFFF;
top: 30%;
left: 35%;
right: 50%;
text-align: left;
text-shadow: 1px 1px #000000;
font-size: 20px;
}
.stream-info {
font-family: FontAwesome;
position: absolute;
color: #FFFFFF;
left: 22%;
bottom: 10%;
text-align: left;
text-shadow: 1px 1px #000000;
font-size: 10px;
}
.profile-status {
margin: 0 5%;
}
.img-circle {
width: 70px;
float: left;
}
.center-block {
display: block;
margin-left: auto;
margin-right: auto;
}
.center-element {
width: 100%;
position: relative;
}
.btn {
background-color: #FFFFFF;
}
.btn-header {
background-color: #f46161;
font-family: FontAwesome;
color: white;
text-shadow: 1px 1px #000000;
}
.btn-header:hover,
.btn-header:active {
background-color: #ffcf62;
color: white;
}
.btn-list {
background-color: #f89d5b;
margin: 0px 0px 10px 0px;
border: none;
}
.btn-list:hover {
background-color: #ffcf62;
}
.btn-box-shadow {
-webkit-box-shadow: 2px 3px 0px rgba(4, 4, 4, 0.3);
-moz-box-shadow: 2px 3px 0px rgba(4, 4, 4, 0.3);
box-shadow: 2px 3px 0px rgba(4, 4, 4, 0.3);
}
.fa-ban {
position: absolute;
top: 30%;
right: 5%;
color: #fd1c15;
}
.fa-check-circle-o {
position: absolute;
top: 30%;
right: 5%;
color: #00b800;
}
#list-container {
padding-top: 10px;
padding-left: 30px;
padding-right: 30px;
}
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.