Skip to content

Instantly share code, notes, and snippets.

@dougshamoo

dougshamoo/Twitch Checker.markdown

Created July 13, 2015 21:57
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save dougshamoo/4811c37b7a3643bb2e71 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save dougshamoo/4811c37b7a3643bb2e71 to your computer and use it in GitHub Desktop.
Download ZIP
Twitch Checker
Raw
index.html
<head>
<title>Twitch Checker</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
<link href='http://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Pacifico' rel='stylesheet' type='text/css'>
</head>
<body ng-app="twitcher">
<h1 id="title">Twitch Checker</h1>
<div class="container" id="main" ng-controller="TabController as tab">
<div id="tab-bar">
<ul class="nav nav-tabs nav-justified">
<li ng-class="{active : tab.isSelected(1)}">
<a href ng-click="tab.selectTab(1)">All</a>
</li>
<li ng-class="{active : tab.isSelected(2)}">
<a href ng-click="tab.selectTab(2)">Online</a>
</li>
<li ng-class="{active : tab.isSelected(3)}">
<a href ng-click="tab.selectTab(3)">Offline</a>
</li>
</ul>
</div>
<!-- Search Bar and User Lists -->
<div ng-controller="ListController as list">
<!-- Seach bar -->
<div id="search-bar" class="form-group has-feedback">
<input class="form-control" ng-model="list.searchTerm" placeholder="Search">
<i class="glyphicon glyphicon-search form-control-feedback"></i>
</div>
<!-- User lists depending on tab selection: All, Online, Offline and filered by search term -->
<div id="all-list" ng-show="tab.isSelected(1)">
<ul class="list-group">
<li class="list-group-item" ng-repeat="user in list.allUsers | filter: list.searchTerm">
<a href="http://www.twitch.tv/{{user.name}}" target="_blank">
<p>
<img class="logo" ng-src="{{user.logo}}">
<span class="user-name">{{user.name}}</span>
<span ng-show="{{user.streaming}}" class="glyphicon glyphicon-ok"></span>
<span ng-show="{{!user.streaming}}" class="glyphicon glyphicon-remove"></span>
</p>
<p ng-show="{{user.streaming}}"class="status">{{user.status}}</p>
</a>
</li>
</ul>
</div>
<div id="online-list" ng-show="tab.isSelected(2)">
<ul class="list-group">
<li class="list-group-item" ng-repeat="user in list.onlineUsers | filter: list.searchTerm">
<a href="http://www.twitch.tv/{{user.name}}" target="_blank">
<p>
<img class="logo" ng-src="{{user.logo}}">
<span class="user-name">{{user.name}}</span>
<span class="glyphicon glyphicon-ok"></span>
</p>
<p class="status">{{user.status}}</p>
</a>
</li>
</ul>
</div>
<div id="offline-list" ng-show="tab.isSelected(3)">
<ul class="list-group">
<li class="list-group-item" ng-repeat="user in list.offlineUsers | filter: list.searchTerm">
<a href="http://www.twitch.tv/{{user.name}}" target="_blank">
<p>
<img class="logo" ng-src="{{user.logo}}">
<span class="user-name">{{user.name}}</span>
<span class="glyphicon glyphicon-remove"></span>
</p>
</a>
</li>
</ul>
</div>
</div>
</div>
</body>
Raw
script.js
(function() {
var app = angular.module('twitcher', []);
app.controller('TabController', function() {
this.tab = 1;
this.isSelected = function(tabNumber) {
return this.tab === tabNumber;
};
this.selectTab = function(tabNumber) {
this.tab = tabNumber;
};
});
app.controller('ListController', ['$http', function($http) {
var list = this;
list.searchTerm = "";
list.allUsers = [];
list.onlineUsers = [];
list.offlineUsers = [];
for (var i=0; i < userNames.length; i++) {
(function(i) {
var user = {};
$http.jsonp(url + userNames[i] + cb).success(function(data) {
if (data.stream === null) {
// if the channel is offline, make the default
// user object and add to offlineUsers
user.streaming = false;
user.name = userNames[i];
user.logo = "http://placehold.it/70/000/fff&text=OFFLINE"
list.offlineUsers.push(user);
}
else {
// if channel is online, fill user object with
// neccessary info and add to onlineUsers
user.streaming = true;
user.name = data.stream.channel.display_name;
user.logo = data.stream.channel.logo;
user.status = data.stream.channel.status;
list.onlineUsers.push(user);
}
// add the user object to the list allUsers
list.allUsers.push(user);
}).error(function(err) {
console.warn(err);
});
})(i);
};
}]);
var userNames = ["BeyondTheSummit", "FreeCodeCamp",
"terakilobyte","purgegamers", "JoshOG", "Starladder1", "MedryBW"];
var url = 'https://api.twitch.tv/kraken/streams/';
var cb = '?callback=JSON_CALLBACK';
})();
Raw
scripts
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.14/angular.min.js"></script>
Raw
style.css
body {
background-color: lightblue;
font-family: Roboto, sans-serif;
}
#title {
font-family: 'Pacifico', cursive;
font-size: 40px;
text-align: center;
color: black;
padding-top: 10px;
}
div#main.container {
margin: auto;
max-width: 400px;
margin-top: 40px;
}
ul.nav-justified > li {
border: 1px solid black;
border-top-left-radius: 7%;
border-top-right-radius: 7%;
border-bottom: none;
}
ul.nav-justified > li > a {
font-weight: bold;
font-size: 22px;
color: white;
background-color: darkblue;
}
div#search-bar {
margin-bottom:0;
padding: 15px 15px;
border: 1px solid black;
border-top: none;
border-bottom: none;
background-color: white;
}
div#search-bar > i.glyphicon {
right: 15px;
top: 15px;
}
ul.list-group {
border: 1px solid darkblue;
}
li.list-group-item {
list-style-type: none;
display: block;
position: relative;
padding-bottom: 0;
}
img.logo {
display: inline-block;
height: 70px;
width: 70px;
border-radius: 5%;
border: 1px solid darkblue;
}
span.user-name {
font-weight: bold;
font-size: 20px;
position: absolute;
left: 100px;
top: 32px;
}
span.glyphicon {
position: absolute;
font-size: 2em;
right: 25px;
top: 35px;
}
span.glyphicon-ok {
color: green;
}
span.glyphicon-remove {
color: red;
}
p.status {
font-style: italic;
font-size: 12px;
}
a:link {
text-decoration: none;
}
Raw
styles
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" />
Raw
Twitch Checker.markdown

Twitch Checker

Uses the Twitch.tv JSON API to display a list of Online and Offline streamers. Now with a search bar!

A Pen by dougtslug on CodePen.

License.

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