Twitch Channel Viewer

In this example below you will see how to do a Twitch Channel Viewer with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by vaskopetrov, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright vaskopetrov ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Twitch Channel Viewer</title>
  
  
  <link rel='stylesheet prefetch' href='http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css'>
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css'>

      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <body ng-app="twitchApp" ng-controller="twitchCtrl">
  <div class="container-fluid">
    
      <ul class="nav justify-content-center menuBtns">
        <li data-display="allChannels" class="active">All Channels</li>
        <li data-display="onlineChannels" >Online</li>
        <li data-display="offlineChannels" >Offline</li>
      </ul>
    <div class="wrapper">
      <div class="card" style="margin: 0 auto;" ng-repeat="channel in channels">
        <img width="350" class="card-img-top" ng-src="{{channel.banner}}">
        <div class="card-block">
          <img width="50" class="card-img-logo" ng-src="{{channel.logo}}">
          <h4 class="card-title"><a data-ng-href="{{channel.url}}" target="_blank">{{channel.name}}</a></h4>
          <h6>{{channel.title}}</h6>
          <p class="card-text"><i class="fa {{channel.icon}}"></i> {{channel.status}}</p>

          <a data-ng-href="{{channel.url}}" target="_blank" class="btn btn-primary float-right">Watch this cannel</a>
        </div>
      </div>
    </div>
    <!--
    <a data-ng-href="{{channel.url}}" ng-repeat="channel in channels" target="_blank">
      <div class="well {{channel.status}}">
        <img ng-src="{{channel.logo}}" width="50"/>
        <p>{{channel.name}}</p>
        <p>{{channel.status}}</p>
        <p>{{channel.title}}</p>
        <i class="fa {{channel.icon}}"></i>
      </div>
    </a>-->
  </div>
</body>
  <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.min.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/vaskopetrov/twitch-channel-viewer-PpPQwz */
body {
  background: #333;
}
.red {
  color: red;
}
.green {
  color: green;
}
.wrapper {
  max-width: 350px;
  margin: 0 auto;
}
.wrapper .card {
  margin-bottom: 10px!important;
  border: none;
}
.card-img-logo {
  float: left;
  margin: 0 10px 5px 0;
}
.menuBtns {
  margin: 10px auto;
  color: white;
}
.menuBtns li {
  padding: 15px;
  cursor: pointer;
}
.menuBtns li:hover {
  background: rgba(0,0,0,0.7);
  border-radius: 5px;
}

.active {
  background: rgba(142, 68, 173,1.0);
  border-radius: 5px;
}

/*Downloaded from https://www.codeseek.co/vaskopetrov/twitch-channel-viewer-PpPQwz */
var app = angular.module('twitchApp', []);

app.controller('twitchCtrl', function($scope, $http) {
  
  $scope.allStreams = [];
  $scope.onlineStreams = [];
  $scope.offlineStreams = [];
  
  var channels = ["ESL_SC2", "OgamingSC2", "cretetion", "freecodecamp", "storbeck", "habathcx", "RobotCaleb", "noobs2ninjas", "tralentv"];
  var apiUrl = 'https://api.twitch.tv/kraken/';
  var callback = '?client_id=xors09nefvbqreqliet8y3j7va7hkw&callback=?';
  
  channels.forEach(function(channel) {
    var streamsObj = {};
    
    $.getJSON(apiUrl + 'streams/' + channel + callback).success(function(res) {
      var streamStatus = res.stream;
      if(streamStatus === null) {
        streamsObj.icon = "fa-close red";
        streamsObj.game = "";
        streamsObj.status = "offline";
        streamsObj.title = "";
      } else {
        streamsObj.icon = "fa-check green";
        streamsObj.game = res.stream.game;
        streamsObj.status = "online";
        streamsObj.title = res.stream.channel.status;
      }
      
      $.getJSON(apiUrl + 'channels/' + channel + callback).success(function(res) {
        console.log(res.video_banner);
          streamsObj.banner = res.video_banner;
        if(res.hasOwnProperty('error')) {
          streamsObj.url = "https://twitch.tv/" + channel;
          streamsObj.logo = "http://placehold.it/50x50";
          streamsObj.icon = "fa-ban red";
          streamsObj.game = "No such account";
          streamsObj.status = "not-found";
          streamsObj.name = channel;
        } else {
          res.logo === null ? streamsObj.logo = "http://placehold.it/50x50" : streamsObj.logo = res.logo;
          streamsObj.url = res.url;
          streamsObj.name = res.display_name;
        }
        
        $scope.allStreams.push(streamsObj);
        if(streamStatus === null) {
          $scope.offlineStreams.push(streamsObj);
        } else {
          $scope.onlineStreams.push(streamsObj);
        }
        $scope.channels = $scope.allStreams;
        $scope.$apply();
        
      });
      
    });
  });
  
  $('.menuBtns li').on("click", function() {
    if ($(this).data('display') === 'allChannels') {
      $scope.channels = $scope.allStreams;
      
      $('.menuBtns li').removeClass('active');
      $(this).addClass('active');
    } else if ($(this).data('display') === 'onlineChannels') {
      $scope.channels = $scope.onlineStreams;
      
      $('.menuBtns li').removeClass('active');
      $(this).addClass('active');
    } else {
      $scope.channels = $scope.offlineStreams;
      
      $('.menuBtns li').removeClass('active');
      $(this).addClass('active');
    }
    $scope.$apply();
  });
  
});

Comments