freecodecamp_twitchapp

Tutorials of (Freecodecamp_twitchapp) by Marek petak

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>freecodecamp_twitchapp</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>
  <html ng-app="App">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 

    <link href="https://maxcdn.bootstrapcdn.com/bootswatch/3.3.7/yeti/bootstrap.min.css" rel="stylesheet" />
    <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
    <link href='//cdnjs.cloudflare.com/ajax/libs/angular-loading-bar/0.9.0/loading-bar.min.css' rel='stylesheet' />

    <title>a twitch thingy</title>
  
</head>

<body>

    <div class="container">

        <home></home>

    </div>

    <script src='https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.0/angular.js'></script>
    <script src='//cdnjs.cloudflare.com/ajax/libs/angular-loading-bar/0.9.0/loading-bar.min.js'></script>

 
</body>

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

</body>
</html>
/* Downloaded from https://www.codeseek.co/ */
.channel-logo {
    max-height: 30px;
}
/* Downloaded from https://www.codeseek.co/ */
(function() {
    'use strict';

    angular.module('App', ['App.Components', 'App.Services', 'angular-loading-bar']);

    angular.module('App.Components', []);
    angular.module('App.Services', []);
})();

(function() {
    'use strict';

    angular
        .module('App.Services')
        .factory('dataService', ['$http', '$sce', function($http, $sce) {
            var _factory = {};

            var API_STREAMS = "https://wind-bow.gomix.me/twitch-api/streams/";
            var API_USERS = "https://wind-bow.gomix.me/twitch-api/users/";

            function _getStreamStatus(streamName) {
                let url = API_STREAMS + streamName;
                return $http.jsonp($sce.trustAsResourceUrl(url));
            }

            function _getUserStatus(userName) {
                let url = API_USERS + userName;
                return $http.jsonp($sce.trustAsResourceUrl(url));
            }

            _factory.getStreamStatus = _getStreamStatus;
            _factory.getUserStatus = _getUserStatus;

            return _factory;
        }]);
})();

(function() {
    'use strict';
    angular
        .module('App.Components')
        .component('home', {
            template: '<br/><div> <ul class="list-group"> <li class="list-group-item" ng-repeat="item in $ctrl.channels"> <div class="panel" ng-class="{\'panel-success\': item.stream, \'panel-default\': !item.stream}"> <div class="panel-heading"> <img class="channel-logo" ng-src="{{item.stream.channel.logo}}"/> <strong> <a ng-href="https://www.twitch.tv/{{item.title}}">{{item.title}}</a> </strong> </div><div class="panel-body"> <span ng-if="item.stream">{{item.stream.game}}</span> <span ng-if="!item.stream"> <i>offline</i> </span> </div></div></li></ul></div>',
            controller: function HomeController(dataService) {
                var vm = this;
                var STREAMS = ["74grtjfy54vfhgt", "comster404", "ESL_SC2", "OgamingSC2", "cretetion", "freecodecamp", "storbeck", "habathcx", "RobotCaleb", "noobs2ninjas", "test_channel"];

                vm.channels = [];

                function _getSTreamStatus() {
                    STREAMS.forEach(function(item) {

                        dataService.getUserStatus(item).then(function(data) {
                            if (data.data.status === 404) {
                                var listItem = {};
                                listItem.stream = null;
                                listItem.title = 'account closed';

                                vm.channels.push(listItem);
                            } else {
                                _requestChannelData(item);
                            }
                        }).catch(function(error) {
                            console.log(error);

                        });
                    });
                }

                function _requestChannelData(item) {
                    dataService.getStreamStatus(item).then(function(data) {

                        var listItem = {};

                        if (data.data.stream === null) {
                            listItem.stream = null;
                            listItem.title = 'offline';
                        } else {
                            listItem.stream = data.data.stream;
                            listItem.title = data.data.stream.game;
                        }

                        vm.channels.push(listItem);

                    }).catch(function(error) {
                        console.log(error);
                    });
                }

                vm.$onInit = function() {
                    _getSTreamStatus();
                };
            }
        });
})();

This awesome code ( freecodecamp_twitchapp ) is write by Marek Petak, you can se more from this user in the personal repository

You can find the original code on Codepen.io

2018 © Marek Petak