Created
July 22, 2016 06:25
-
-
Save chemok78/cd02b2d55cc2997ed449296c1e681482 to your computer and use it in GitHub Desktop.
Twitch TV API
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <html lang="en"> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta http-equiv="X-UA-Compatible" content="IE=edge"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1"> | |
| <title>Twitch.tv Steamers</title> | |
| <script | |
| src="https://code.jquery.com/jquery-2.2.2.min.js" | |
| integrity="sha256-36cp2Co+/62rEAAYHLmRCPIych47CvdM+uTBJwSzWjI=" | |
| crossorigin="anonymous"></script> | |
| <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script> | |
| <link href='https://fonts.googleapis.com/css?family=Roboto:400,400italic,500,500italic,700,900,700italic' rel='stylesheet' type='text/css'> | |
| </head> | |
| <body> | |
| <div class="container text-center"> | |
| <div class="container"> | |
| <h1>Twitch Streamers</h1> | |
| <div> | |
| <!-- Nav tabs --> | |
| <ul class="nav nav-tabs" role="tablist"> | |
| <li role="presentation" class="active"><a href="#all" aria-controls="all" role="tab" data-toggle="tab">All</a></li> | |
| <li role="presentation"><a href="#online" aria-controls="online" role="tab" data-toggle="tab">Online</a></li> | |
| <li role="presentation"><a href="#offline" aria-controls="offline" role="tab" data-toggle="tab">Offline</a></li> | |
| </ul> | |
| <!-- Tab panes --> | |
| <div class="tab-content"> | |
| <div role="tabpanel" class="tab-pane" id="all"> | |
| <div class="list-group" id="all-list"> | |
| </div> | |
| </div> | |
| <div role="tabpanel" class="tab-pane" id="online"> | |
| <div class="list-group" id="online-list"> | |
| </div> | |
| </div> | |
| <div role="tabpanel" class="tab-pane" id="offline"> | |
| <div class="list-group" id="offline-list"> | |
| </div> | |
| </div> | |
| </div><!--tab-content--> | |
| </div> <!--container--> | |
| </div> | |
| </body> <!--container text-center--> | |
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| $(document).ready(function() { | |
| var streamers = ["freecodecamp", "storbeck", "terakilobyte", "habathcx", "RobotCaleb", "thomasballinger", "noobs2ninjas", "beohoff", "trk7", "sheevergaming", "cretetion", "esl_sc2", "ogamingsc2", "brunofin", "comster404"]; //array of streamers to include | |
| var streamersData = {}; //hold info about streamers from 2 API calls for channel and current stream | |
| var allHTML = [ //hold HTML for every streamer to append to DOM | |
| [], // index 0 is online | |
| [] // index 1 is offline | |
| ]; | |
| function setHTML() { //append to list groups in the DOM | |
| for (i = 0; i < allHTML[0].length; i++) { // loop through online and append to All and Online list group. Call back getChannelData finish last loop | |
| $('#all-list').append(allHTML[0][i]); | |
| $('#online-list').append(allHTML[0][i]); | |
| }; | |
| for (j = 0; j < allHTML[1].length; j++) { // loop through offline and append to All and Offline list group | |
| $('#all-list').append(allHTML[1][j]); | |
| $('#offline-list').append(allHTML[1][j]); | |
| }; | |
| } | |
| function addHTML(result) { //call back getChannelData, after finish 2 loops with AJAX calls channel and stream data | |
| if (result.status === "offline") { | |
| allHTML[1].push("<a href='" + result.url + "' class='list-group-item' target='_blank'><div class='row'><div class='col-md-3'><img src='" + result.logo + "' class='img-circle img-thumbnail'></div><div class='col-md-3'><p>" + result.displayName + "</p></div><div class='col-md-3'><p>Offline</p></div></div></a>"); | |
| } else if (result.status === "Account Closed") { | |
| allHTML[1].push("<a href='http://www.twitch.tv' class='list-group-item' target='_blank'><div class='row'><div class='col-md-3'><img src='" + result.logo + "' class='img-circle img-thumbnail'></div><div class='col-md-3'><p>" + result.displayName + "</p></div><div class='col-md-3'><p>Account Closed</p></div></div></a>"); | |
| } else { | |
| allHTML[0].push("<a href='" + result.url + "' class='list-group-item online' target='_blank'><div class='row'><div class='col-md-3'><img src='" + result.logo + "' class='img-circle img-thumbnail'></div><div class='col-md-3'><p>" + result.displayName + "</p></div><div class='col-md-3'><p>" + result.status + "</p></div></div></a>"); | |
| }; | |
| } | |
| function getData() { //get channel and stream data for streamers array | |
| $.each(streamers, function(index, streamer) { | |
| $.ajax({ //get Channel Data | |
| url: "https://api.twitch.tv/kraken/channels/" + streamer, | |
| cache: false, | |
| dataType: "jsonp", | |
| success: function(result) { | |
| //set streamersData object with channel data | |
| streamersData[streamer] = {}; | |
| if (result.display_name) { | |
| streamersData[streamer]["displayName"] = result.display_name; | |
| } else { //if no display_name, account is undefined and closed. Use own name in own array instead to display in html | |
| streamersData[streamer]["displayName"] = streamer; | |
| }; | |
| streamersData[streamer]["url"] = result.url; //get URL to channel | |
| if (result.logo === null || result.logo === undefined) { //link to default image if no logo | |
| streamersData[streamer]["logo"] = "https://static-cdn.jtvnw.net/jtv_user_pictures/xarth/404_user_150x150.png"; | |
| } else { | |
| streamersData[streamer]["logo"] = result.logo; | |
| }; | |
| $.ajax({ //get Stream data. Nested in get Channel data success function | |
| url: "https://api.twitch.tv/kraken/streams/" + streamer, | |
| cache: false, | |
| dataType: "jsonp", | |
| success: function(result) { | |
| // set streamersData object with stream data | |
| if (result.stream === null) { //set status | |
| streamersData[streamer]["status"] = "offline"; | |
| } else if (result.stream === undefined) { | |
| streamersData[streamer]["status"] = "Account Closed" | |
| } else if (result.stream.channel.status) { | |
| streamersData[streamer]["status"] = result.stream.channel.status; | |
| } | |
| addHTML(streamersData[streamer]); // call back to construct allHTML array after every loop of getting channel and stream data | |
| if (index === streamers.length - 1) { //last loop finished. Manipulate DOM with callback setHTML function using allHTML array | |
| setHTML(); | |
| } | |
| } | |
| }); | |
| } | |
| }); | |
| }); | |
| } | |
| getData(); | |
| /* start getting data with 2 API calls AJAX style for channel and stream with streamers array | |
| in every loop construct allHTML array | |
| Manipulate DOM when last loop finishes | |
| Start with adding online, then offline and undefined for sorting*/ | |
| }); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| body { | |
| min-height: 100%; | |
| padding-top: 60px; | |
| background-repeat: no-repeat; | |
| background-size: cover; | |
| font-family: 'Roboto', sans-serif; | |
| } | |
| html { | |
| height: 100%; | |
| } | |
| img {width: 70px;} | |
| .online {background-color: #1abc9c} | |
| a.online:hover {background-color: #2ecc71} |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <link href="https://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