Twitch API Zipline

index.html

<div class="container" id="main">
  <div class="col-md-4 col-md-offset-4">
    <div class='row'>
      <ul id="navbar" class="nav nav-tabs nav-justified">
        <li class="active" id="liAllUsers">
          <a href="#allUsers" data-toggle="tab">All</a></li>
        <li id="liOnlineUsers">
          <a href="#onlineUsers" data-toggle="tab">Online</a></li>
        <li id="liOfflineUsers">
          <a href="#offlineUsers" data-toggle="tab">Offline</a></li>
        </ul>
  </div> <!-- Navigation -->
  <div class='row'>
    <div class="input-group">
      <input id="searchbox" type="text" class="form-control" />
      <span class="input-group-addon">
        <i class="glyphicon glyphicon-filter"></i>
      </span>
   </div> <!-- search -->
  </div> <!-- navbar -->
  <div class="tab-content">
    <div class="tab-pane active" id="allUsers"></div>
    <div class="tab-pane" id="onlineUsers"></div>
    <div class="tab-pane" id="offlineUsers"></div>
  </div>
</div> <!-- container -->

script.js

// Enable Bootstrap nav-tab functionality
$('#navigation a').click(function (e) {
  e.preventDefault()
  $("this").tab('show')
});

var twitchURL = 'https://api.twitch.tv/kraken/'
var streamers = ["medrybw","freecodecamp", "storbeck", "terakilobyte", "habathcx","RobotCaleb","comster404","brunofin","thomasballinger","noobs2ninjas","beohoff","AegisRick","Yoowy", "FireFistAce11","dfodanjun"];
var cb = "?client_id=tsbaytfd8uwhqvpz49yufmp7v7jge3e&callback=?";

var getStreamInfo = function (streamer, callback) {
  var obj = {};
  obj.streamURL = "http://www.twitch.tv/" + streamer
  obj.streamer = streamer;
  $.when(
    $.getJSON(twitchURL + 'streams/' + streamer + cb),
    $.getJSON(twitchURL + 'users/' + streamer + cb)
    ).then(function(streamData, userData) {
      var stream = streamData[0].stream;
      var user = userData[0];
      if (stream) {
        obj.streaming = true;
        obj.statusIcon = "fa fa-smile-o fa-2x"
        obj.statusMsg = stream.channel.status;
      } else {
        obj.streaming = false;
        obj.statusIcon = "fa fa-frown-o fa-2x"
        obj.statusMsg = "Not currently streaming.";
      }
        obj.displayName = user.display_name;
        obj.logo = user.logo || "http://lorempixel.com/50/50/cats"
        callback(null, obj);
  })
}

function clearUserData() {
  $('#allUsers').empty();
  $('#onlineUsers').empty();
  $('#offlineUsers').empty();
}

function updateView(user) {
    var userTemplate = "<div id='userStatus'><a href='" + user.streamURL + "' target='_blank'><img id='userLogo' src='" + user.logo + "'/><h3 id='userInfo'>" + user.displayName + "<br><small>" + user.statusMsg + "</small></h3><i id='onlineStatus' class='" + user.statusIcon + "'></i></a></div>";
    $('#allUsers').append(userTemplate);
    if (user.streaming) {
      $('#onlineUsers').append(userTemplate);
    }
    if (!user.streaming) {
      $('#offlineUsers').append(userTemplate);
    }
}

var cache = [];
var updateApp = function() {
  async.map(streamers, getStreamInfo, function(err, data) {
    cache = data;
    cache.forEach(function(streamer) {
      updateView(streamer);
    })
  })
}

updateApp()

// Filter results based on user input
$('input').keyup(function(event) {
  var length = $('input').val().length;
  var string = $('input').val();
  clearUserData();
  if (length > 1) {
    var filterStr = new RegExp(string, 'i');
    if (cache) {
      var filteredList = cache.filter(function(streamer) {
        console.log(streamer);
        return streamer.streamer.match(filterStr) || streamer.statusMsg.match(filterStr)
    })
      }
    // console.log(filteredList);
    if (filteredList.length != 0) {
      filteredList.forEach(function(user) {
        updateView(user);
      })
    }
  } else {
    cache.forEach(function(user) {
      updateView(user);
    })
  }
})

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/typeahead.js/0.10.4/typeahead.bundle.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/async/0.9.0/async.js"></script>

style.css

#main {
  margin: 0 auto;
  margin-top: 25px;
  margin-bottom: 25px;
  
}

div #userStatus {
  padding: 15px;
}

#userIcon {
  float: left;
  border-radius: 50%;
  height: 50px;
}

#searchbox:focus, #searchbox:active {
  outline: none;
}

#userLogo {
  float: left;
  height: 50px;
  border-radius: 50%;
}
#userInfo {
  display: inline-block;
  margin-top: 5px;
  margin-left: 20px;
  font-size: 1em;
  height: 3.5em;
  width: 180px;
  overflow: hidden;
}

#onlineStatus {
  float: right;
  margin-top: 10px;
  margin-right: 0px;
}

.fa-frown-o {
  color: gray;
}

.fa-smile-o {
  color: green;
}

styles

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" />
<link href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet" />

Twitch API Zipline.markdown

Twitch API Zipline

A Pen by Jeremiah Biard on CodePen.

License.