Soundnode · weblancaster · Sep 15, 2015 · Sep 15, 2015
diff --git a/app/index.html b/app/index.html
@@ -90,11 +90,23 @@ <h4>Authenticating your Soundcloud account.</h4>
         <header class="header">
             <!-- user -->
             <div class="user" ng-controller="UserCtrl">
-                <img ng-src="{{ userThumb }}" alt="{{ name }}" class="user_thumb">
+                <div class="user_profile clearfix">
+                    <img ng-src="{{ data.avatar_url }}" alt="{{ data.username }}" class="user_thumb">
 
-                <div class="user_inner">
-                    <span class="user_name">{{ name }}</span>
-                    <a href="" class="user_logOut" ng-click="logOut()">Log out</a>
+                    <div class="user_inner">
+                        <span class="user_name">{{ data.username }}</span>
+                        <a href="" class="user_logOut" ng-click="logOut()">Log out</a>
+                    </div>
+                </div>
+                <div class="user_info">
+                    <span class="user_info_wrap" ui-sref="following">
+                        <small>{{ data.followings_count }}</small>
+                        <small>following</small>
+                    </span>
+                    <span class="user_info_wrap" ui-sref="followers">
+                        <small>{{ data.followers_count }}</small>
+                        <small>followers</small>
+                    </span>
                 </div>
             </div>
             <!-- user / end -->
@@ -111,12 +123,6 @@ <h2 class="ui_title">Main</h2>
                         <span class="mainNav_tit">Stream</span>
                     </a>
                 </li>
-                <li class="mainNav_item">
-                    <a class="mainNav_button" ui-sref="following">
-                        <i class="fa fa-users"></i>
-                        <span class="mainNav_tit">Following</span>
-                    </a>
-                </li>
                 <li class="mainNav_item">
                     <a class="mainNav_button" ui-sref="favorites">
                         <i class="fa fa-heart"></i>
@@ -235,6 +241,7 @@ <h4 id="playerUser" class="player_user"></h4>
 <script src="public/js/playlists/playlistsCtrl.js"></script>
 <script src="public/js/playlists/playlistDashboardCtrl.js"></script>
 <script src="public/js/following/followingCtrl.js"></script>
+<script src="public/js/followers/followersCtrl.js"></script>
 <script src="public/js/about/aboutCtrl.js"></script>
 <script src="public/js/updater/updaterCtrl.js"></script>
 <script src="public/js/profile/profileCtrl.js"></script>

diff --git a/app/public/js/app.js b/app/public/js/app.js
@@ -46,6 +46,11 @@ app.config(function ($stateProvider, $urlRouterProvider, hotkeysProvider) {
             templateUrl: 'views/following/following.html',
             controller: 'FollowingCtrl'
         })
+        .state('followers', {
+            url: '/followers',
+            templateUrl: 'views/followers/followers.html',
+            controller: 'FollowersCtrl'
+        })
         .state('profile', {
             url: '/profile/:id',
             templateUrl: 'views/profile/profile.html',

diff --git a/app/public/js/common/SCapiService.js b/app/public/js/common/SCapiService.js
@@ -110,10 +110,10 @@ app.service('SCapiService', function ($http, $window, $q, $log, $state, $statePa
      * Responsible to get the followed users.
      * @return {[object]} data response
      */
-    this.getFollowing = function () {
+    this.getFollowing = function (endpoint) {
         this.isLoading();
 
-        var url = 'https://api.soundcloud.com/me/followings.json?limit=25&oauth_token=' + $window.scAccessToken
+        var url = 'https://api.soundcloud.com/me/' + endpoint + '.json?limit=25&oauth_token=' + $window.scAccessToken
                 + '&linked_partitioning=1'
             , that = this;
 

diff --git a/app/public/js/followers/followersCtrl.js b/app/public/js/followers/followersCtrl.js
@@ -0,0 +1,48 @@
+'use strict';
+
+app.controller('FollowersCtrl', function ($scope, SCapiService, $rootScope, $log) {
+    $scope.title = 'Followers';
+    $scope.data = '';
+    $scope.busy = false;
+
+    SCapiService.getFollowing('followers')
+        .then(function(data) {
+            $scope.data = data.collection.sort( sortBy("username") );
+        }, function(error) {
+            console.log('error', error);
+        }).finally(function() {
+            $rootScope.isLoading = false;
+        });
+
+    $scope.loadMore = function() {
+        if ( $scope.busy ) {
+            return;
+        }
+        $scope.busy = true;
+
+        SCapiService.getNextPage()
+            .then(function(data) {
+                for ( var i = 0; i < data.collection.length; i++ ) {
+                    $scope.data.push( data.collection[i] )
+                }
+            }, function(error) {
+                console.log('error', error);
+            }).finally(function(){
+                $scope.busy = false;
+                $rootScope.isLoading = false;
+            });
+    };
+
+    function sortBy(prop){
+        return function(a,b){
+            if( a[prop] > b[prop]){
+                return 1;
+            }else if( a[prop] < b[prop] ){
+                return -1;
+            }
+            return 0;
+        }
+    }
+
+
+});
diff --git a/app/public/js/following/followingCtrl.js b/app/public/js/following/followingCtrl.js
@@ -5,7 +5,7 @@ app.controller('FollowingCtrl', function ($scope, SCapiService, $rootScope, $log
     $scope.data = '';
     $scope.busy = false;
 
-    SCapiService.getFollowing()
+    SCapiService.getFollowing('followings')
         .then(function(data) {
             $scope.data = data.collection.sort( sortBy("username") );
         }, function(error) {

diff --git a/app/public/js/user/userCtrl.js b/app/public/js/user/userCtrl.js
@@ -1,18 +1,15 @@
 'use strict'
 
 app.controller('UserCtrl', function ($rootScope, $scope, $window, SCapiService) {
-    var endpoint = 'me'
-        , params = '';
+    var endpoint = 'me';
+    var params = '';
 
     $rootScope.userId = '';
-    $scope.name = '';
-    $scope.userThumb = '';
-    $scope.userThumbWidth = '50px';
-    $scope.userThumbHeight = '50px';
 
     SCapiService.get(endpoint, params)
                 .then(function(data) {
                     $rootScope.userId = data.id;
+                    $scope.data = data;
                     $scope.name = data.username;
                     $scope.userThumb = data.avatar_url;
                 }, function(error) {

diff --git a/app/public/stylesheets/sass/_components/_aside.scss b/app/public/stylesheets/sass/_components/_aside.scss
@@ -13,39 +13,6 @@
   padding: 15px 10px 10px;
 }
 
-/* user info */
-.user {
-  padding: 10px 0 0;
-  overflow: hidden;
-}
-
-.user_thumb {
-  width: 30px;
-  height: 30px;
-  display: block;
-  border-radius: 50px;
-  float: left;
-}
-
-.user_inner {
-  float: left;
-  margin: 0 0 0 20px;
-}
-
-.user_name,
-.user_logOut {
-  font-weight: normal;
-  display: block;
-}
-
-.user_name {
-  font-size: 12px;
-  color: #fff;
-}
-
-.user_logOut {
-  font-size: 10px;
-}
 
 /* main navigation */
 .mainNav {

diff --git a/app/public/stylesheets/sass/_components/_user.scss b/app/public/stylesheets/sass/_components/_user.scss
@@ -0,0 +1,52 @@
+.user {
+    padding: 10px 0 0;
+    overflow: hidden;
+}
+
+.user_thumb {
+    width: 30px;
+    height: 30px;
+    display: block;
+    border-radius: 50px;
+    float: left;
+}
+
+.user_inner {
+    float: left;
+    margin: 0 0 0 20px;
+}
+
+.user_name,
+.user_logOut {
+    font-weight: normal;
+    display: block;
+}
+
+.user_name {
+    font-size: 12px;
+    color: #fff;
+}
+
+.user_logOut {
+    font-size: 10px;
+}
+
+.user_info {
+    margin: 10px 0 0;
+    font-size: 13px;
+}
+
+.user_info_wrap {
+    display: inline-block;
+    margin: 0 4px;
+
+    &:hover {
+        color: #fff;
+    }
+
+    & small,
+    & strong {
+        cursor: pointer;
+        display: block;
+    }
+}
diff --git a/app/public/stylesheets/sass/app.scss b/app/public/stylesheets/sass/app.scss
@@ -30,6 +30,11 @@
 ========================================================================== */
 @import "_components/_appContainer";
 
+/* ==========================================================================
+@User
+========================================================================== */
+@import "_components/_user";
+
 /* ==========================================================================
 @Aside
 ========================================================================== */

diff --git a/app/views/followers/followers.html b/app/views/followers/followers.html
@@ -0,0 +1,38 @@
+<div class="followingView">
+    <h1> {{ title }}</h1>
+
+    <!-- Song list wrapper -->
+    <div class="favoritesView_inner">
+        <ul class="following"
+            infinite-scroll='loadMore()'
+            infinite-scroll-distance='0'
+            infinite-scroll-container='".mainView"'
+            infinite-scroll-immediate-check='false' >
+
+            <li class="following_item" ng-repeat="data in data"
+                ng-class="{ active: hover }"
+                ng-mouseover="hover = true"
+                ng-mouseleave="hover = false">
+
+                <div class="songList_item_container_artwork">
+                    <a ui-sref="profile({id: {{data.id}}})">
+                        <span class="songList_item_song_button">
+                            <i class="fa fa-arrow-circle-o-right"></i>
+                        </span>
+                        <img ng-src="{{ showBigArtwork (data.avatar_url) }}" alt="{{ data.title }}" class="songList_item_artwork">
+                    </a>
+                </div>
+
+                <section class="songList_item_inner">
+                    <h3 class="songList_item_song_tit">{{ data.username }}</h3>
+                    <h4 class="songList_item_song_user">Tracks: {{ data.track_count }}</h4>
+                </section>
+
+            </li>
+        </ul>
+    </div>
+    <!-- Song list wrapper / end -->
+
+    <div ng-include="'views/common/loading.html'"></div>
+
+</div>