A Pen by jose camacaro on CodePen.
Created
August 17, 2017 19:27
-
-
Save josera21/b256436975ff786640c8c924b2c9fcdc to your computer and use it in GitHub Desktop.
Stream video games with Twitch
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"> | |
| <title>Twitch challengue</title> | |
| <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"> | |
| <link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.blue-pink.min.css"> | |
| <link rel="stylesheet" href="styles/index.css"> | |
| <link href="https://fonts.googleapis.com/css?family=Amaranth" rel="stylesheet"> | |
| <script defer src="https://code.getmdl.io/1.3.0/material.min.js"></script> | |
| <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> | |
| <script src="scripts/scripts.js"></script> | |
| </head> | |
| <body> | |
| <div class="mdl-layout mdl-js-layout mdl-layout--fixed-header | |
| mdl-layout--fixed-tabs"> | |
| <header class="mdl-layout__header"> | |
| <div class="mdl-layout__header-row"> | |
| <!-- Title --> | |
| <span class="mdl-layout-title">Live videogames</span> | |
| </div> | |
| <!-- Tabs --> | |
| <div class="mdl-layout__tab-bar mdl-js-ripple-effect"> | |
| <a href="#fixed-tab-1" class="mdl-layout__tab is-active">All channels</a> | |
| <a id="live_stream" href="#fixed-tab-2" class="mdl-layout__tab">Live stream</a> | |
| <a id="top_games" href="#fixed-tab-3" class="mdl-layout__tab">Top games</a> | |
| </div> | |
| </header> | |
| <div class="mdl-layout__drawer"> | |
| <span class="mdl-layout-title">Title</span> | |
| </div> | |
| <main class="mdl-layout__content"> | |
| <section class="mdl-layout__tab-panel is-active" id="fixed-tab-1"> | |
| <div class="page-content"> | |
| <!-- Your content goes here --> | |
| <div id="all_channels"> | |
| </div> | |
| </div> | |
| </section> | |
| <section class="mdl-layout__tab-panel" id="fixed-tab-2"> | |
| <div class="page-content"> | |
| <!-- Your content goes here --> | |
| <div id="live_channels"> | |
| </div> | |
| </div> | |
| </section> | |
| <section class="mdl-layout__tab-panel" id="fixed-tab-3"> | |
| <div class="page-content"> | |
| <h2 class="text-center amaranth">Top games streaming today</h2> | |
| <div class="mdl-grid" id="best_games"> | |
| </div> | |
| </div> | |
| </section> | |
| </main> | |
| </div> | |
| </body> | |
| </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 clientID= "vtocnftvokbaaj2xtecg5mn92tmln8"; | |
| var channels = "elmillor,freecodecamp,faker,arteezy,imaqtpie"; | |
| $('#live_stream').click(function() { | |
| $('#live_channels').html(""); | |
| $.ajax({ | |
| headers: { | |
| 'Client-ID':'vtocnftvokbaaj2xtecg5mn92tmln8', | |
| }, | |
| url: "https://api.twitch.tv/kraken/streams?channel="+channels+"&client_id="+clientID, | |
| type: "GET", | |
| dataType: "jsonp", | |
| }).done(update).fail(handleErr); | |
| }); | |
| $('#top_games').click(function() { | |
| $('#best_games').html(""); | |
| $.ajax({ | |
| headers: { | |
| 'Client-ID':'vtocnftvokbaaj2xtecg5mn92tmln8', | |
| }, | |
| url: "https://api.twitch.tv/kraken/games/top?limit=10&client_id="+clientID+"&api_version=5", | |
| type: "GET", | |
| dataType: "jsonp", | |
| }).done(top_games).fail(handleErr); | |
| }); | |
| $.ajax({ | |
| headers: { | |
| 'Client-ID':'vtocnftvokbaaj2xtecg5mn92tmln8', | |
| }, | |
| url: "https://api.twitch.tv/kraken/users/?login="+channels+"&client_id="+clientID+"&api_version=5", | |
| type: "GET", | |
| dataType: "jsonp", | |
| }).done(allChannels).fail(handleErr); | |
| }); | |
| function update(response) { | |
| if (response._total > 0) { | |
| $.each(response.streams, function(i,item) { | |
| var iconStyle = "height: 40px; width: 40px;"; | |
| var channel = item.channel.name; | |
| var logo = item.channel.logo; | |
| var gameName = "Playing: "+item.game; | |
| var watching = " Now watching: "+item.viewers; | |
| var channelUrl = "https://www.twitch.tv/"; | |
| var ul = $('<ul></ul>').addClass("demo-list-three mdl-list"); | |
| var li = $('<li></li>').addClass("mdl-list__item mdl-list__item--three-line").appendTo($(ul)); | |
| var sp_primary = $('<span></span>').addClass("mdl-list__item-primary-content").appendTo($(li)); | |
| var icon = $('<i></i>').addClass("mdl-list__item-avatar").appendTo($(sp_primary)); | |
| var imgIcon = $('<img style="'+iconStyle+'" src='+logo+'>').appendTo($(icon)); | |
| var name = $('<span></span>').html(channel).appendTo($(sp_primary)); | |
| var game = $('<span></span>').addClass("mdl-list__item-text-body").html(gameName+watching).appendTo(sp_primary); | |
| var sp_secondary = $('<span></span>').addClass("mdl-list__item-secondary-content").appendTo($(li)); | |
| var a = $('<a href="'+channelUrl+item.channel.name+'"></a>').addClass("mdl-list__item-secondary-action").appendTo($(sp_secondary)); | |
| var i = $('<i>link</i>').addClass("material-icons").appendTo($(a)); | |
| $('#live_channels').append($(ul)); | |
| }); | |
| } | |
| else { | |
| var h2 = $('<h2></h2>').html("No channels in live... :(").addClass("text-center amaranth"); | |
| $('#live_channels').append($(h2)); | |
| } | |
| } | |
| function allChannels(response) { | |
| var bio_content = ""; | |
| var iconStyle = "height: 40px; width: 40px;"; | |
| var channelUrl = "https://www.twitch.tv/"; | |
| $.each(response.users, function(i,item) { | |
| if (item.bio == null) { | |
| bio_content = "Bio in blank"; | |
| } | |
| else { | |
| bio_content = item.bio; | |
| } | |
| var name = item.name; | |
| var ul = $('<ul></ul>').addClass("demo-list-three mdl-list"); | |
| var li = $('<li></li>').addClass("mdl-list__item mdl-list__item--three-line").appendTo($(ul)); | |
| var sp_primary = $('<span></span>').addClass("mdl-list__item-primary-content").appendTo($(li)); | |
| var icon = $('<i></i>').addClass("mdl-list__item-avatar").appendTo($(sp_primary)); | |
| var imgIcon = $('<img style="'+iconStyle+'" src='+item.logo+'>').appendTo($(icon)); | |
| var name = $('<span></span>').html(name).appendTo($(sp_primary)); | |
| var bio = $('<span></span>').addClass("mdl-list__item-text-body").html(bio_content).appendTo(sp_primary); | |
| var sp_secondary = $('<span></span>').addClass("mdl-list__item-secondary-content").appendTo($(li)); | |
| var a = $('<a href="'+channelUrl+item.name+'"></a>').addClass("mdl-list__item-secondary-action").appendTo($(sp_secondary)); | |
| var i = $('<i>link</i>').addClass("material-icons").appendTo($(a)); | |
| $('#all_channels').append($(ul)); | |
| }); | |
| } | |
| function top_games(response) { | |
| var linkGame = "https://www.twitch.tv/directory/game/"; | |
| $.each(response.top, function (i, item) { | |
| var logo = item.game.box.large; | |
| var gameName = item.game.name; | |
| var cleanLink = convert_links(gameName); | |
| var divCell = $('<div></div>').addClass("mdl-cell mdl-cell--4-col"); | |
| var demoCard = $('<div></div>').addClass("demo-card-square mdl-card mdl-shadow--2dp top-space").appendTo($(divCell)); | |
| var cardTitle = $('<div></div>').addClass("mdl-card__title mdl-card--expand").css({ | |
| "background":"url("+logo+")no-repeat", | |
| "background-size": "cover" | |
| }).appendTo($(demoCard)); | |
| var topPos = $('<h2></h2>').addClass("mdl-card__title-text").html("Top #"+(i+1)).appendTo($(cardTitle)); | |
| var cardSupp = $('<div>'+gameName+'</div>').addClass("mdl-card__supporting-text font-bold").appendTo($(demoCard)); | |
| var cardAction = $('<div></div>').addClass("mdl-card__actions mdl-card--border").appendTo($(demoCard)); | |
| var link = $('<a href='+linkGame+cleanLink+' target=_blank >See streams</a>').addClass("mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect").appendTo($(cardAction)); | |
| $('#best_games').append($(divCell)); | |
| }); | |
| } | |
| function handleErr(jqxhr, textStatus, err) { | |
| console.log("Request Failed: " + textStatus + ", " + err); | |
| } | |
| function convert_links(link) { | |
| var newLink = link.replace(/\s/g, "%20"); | |
| return newLink; | |
| } |
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 { | |
| background-color: #E0E0E0 !important; | |
| } | |
| .amaranth { | |
| font-family: 'Amaranth', sans-serif; | |
| } | |
| .font-bold { | |
| font-style: bold; | |
| } | |
| .text-center { | |
| text-align: center; | |
| } | |
| .demo-list-action { | |
| width: 300px; | |
| } | |
| .top-space { | |
| margin-top: 1.2em; | |
| } | |
| .icon-img { | |
| height: 40px; | |
| width: 40px; | |
| } | |
| i img { | |
| height: 40px !important; | |
| width: 40px !important; | |
| } | |
| .demo-card-square.mdl-card { | |
| width: 320px; | |
| height: 320px; | |
| } | |
| .demo-card-square > .mdl-card__title { | |
| color: yellow; | |
| background-repeat: no-repeat; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Testing the Twitch API.