Merge pull request #539 from Soundnode/charts-view

add charts (top 50) view. closes #522

Author: weblancaster

app/index.html

@@ -96,6 +96,12 @@ <h4>Authenticating your Soundcloud account.</h4>
         <nav class="mainNav">
             <h2 class="ui_title">Main</h2>
             <ul class="mainNav_nav">
+                <li class="mainNav_item" ui-sref-active="active">
+                    <a class="mainNav_button" ui-sref="charts">
+                        <i class="fa fa-trophy"></i>
+                        <span class="mainNav_tit">Top 50</span>
+                    </a>
+                </li>
                 <li class="mainNav_item" ui-sref-active="active">
                     <a class="mainNav_button" ui-sref="stream">
                         <i class="fa fa-cloud"></i>
@@ -221,6 +227,7 @@ <h4 id="playerUser" class="player_user" ng-click="goToUser($event)"></h4>
 <script src="public/js/search/searchInputCtrl.js"></script>
 <script src="public/js/search/searchCtrl.js"></script>
 <script src="public/js/stream/streamCtrl.js"></script>
+<script src="public/js/charts/chartsCtrl.js"></script>
 <script src="public/js/user/userCtrl.js"></script>
 <script src="public/js/player/playerCtrl.js"></script>
 <script src="public/js/favorites/favoritesCtrl.js"></script>

app/public/js/app.js

@@ -26,6 +26,11 @@ app.config(function (
             templateUrl: 'views/stream/stream.html',
             controller: 'StreamCtrl'
         })
+        .state('charts', {
+            url: '/',
+            templateUrl: 'views/charts/charts.html',
+            controller: 'ChartsCtrl'
+        })
         .state('favorites', {
             url: '/favorites',
             templateUrl: 'views/favorites/favorites.html',

app/public/js/charts/chartsCtrl.js

@@ -0,0 +1,104 @@
+'use strict';
+
+app.controller('ChartsCtrl', function (
+    $scope,
+    $rootScope,
+    SCapiService,
+    SC2apiService,
+    utilsService
+) {
+    var tracksIds = [];
+
+    $scope.title = 'Top 50';
+    $scope.originalData = '';
+    $scope.data = '';
+    $scope.busy = false;
+
+    SC2apiService.getCharts()
+        .then(filterCollection)
+        .then(function (collection) {
+            $scope.originalData = collection;
+            $scope.data = collection;
+
+            loadTracksInfo(collection);
+        })
+        .catch(function (error) {
+            console.log('error', error);
+        })
+        .finally(function () {
+            utilsService.updateTracksLikes($scope.data);
+            utilsService.updateTracksReposts($scope.data);
+            $rootScope.isLoading = false;
+        });
+
+    $scope.loadMore = function() {
+        if ( $scope.busy ) {
+            return;
+        }
+        $scope.busy = true;
+
+        SC2apiService.getNextPage()
+            .then(filterCollection)
+            .then(function (collection) {
+                $scope.originalData = $scope.originalData.concat(collection);
+                $scope.data = $scope.data.concat(collection);
+                utilsService.updateTracksLikes(collection, true);
+                utilsService.updateTracksReposts(collection, true);
+                loadTracksInfo(collection);
+            }, function (error) {
+                console.log('error', error);
+            }).finally(function () {
+            $scope.busy = false;
+            $rootScope.isLoading = false;
+        });
+    };
+
+    function filterCollection(data) {
+        return data.collection.filter(function (item) {
+            // Keep only tracks (remove playlists, etc)
+            var isTrackType = item.type === 'track' ||
+                item.type === 'track-repost' ||
+                !!(item.track && item.track.streamable);
+            if (!isTrackType) {
+                return false;
+            }
+
+            // Filter reposts: display only first appearance of track in stream
+            var exists = tracksIds.indexOf(item.track.id) > -1;
+            if (exists) {
+                return false;
+            }
+
+            // "stream_url" property is missing in V2 API
+            item.track.stream_url = item.track.uri + '/stream';
+
+            tracksIds.push(item.track.id);
+            return true;
+        });
+    }
+
+    // Load extra information, because SoundCloud v2 API does not return
+    // number of track likes
+    function loadTracksInfo(collection) {
+        var ids = collection.map(function (item) {
+            return item.track.id;
+        });
+
+        SC2apiService.getTracksByIds(ids)
+            .then(function (tracks) {
+                // Both collections are unordered
+                collection.forEach(function (item) {
+                    tracks.forEach(function (track) {
+                        if (item.track.id === track.id) {
+                            item.track.favoritings_count = track.likes_count;
+                            return;
+                        }
+                    });
+                });
+            })
+            .catch(function (error) {
+                console.log('error', error);
+            });
+    }
+
+});

app/public/js/common/SC2apiService.js

@@ -41,6 +41,24 @@ app.service('SC2apiService', function (
             .catch(onResponseError);
     };
 
+    /**
+     * Get charts (top 50)
+     * @returns {Promise.<T>}
+     */
+    this.getCharts = function () {
+        // kind=top&genre=soundcloud%3Agenres%3Aall-music&limit=50
+
+        var params = {
+            kind: 'top',
+            genre: 'soundcloud:genres:all-music',
+            limit: 50
+        };
+        return sendRequest('charts', { params: params })
+            .then(onResponseSuccess)
+            .then(updateNextPageUrl)
+            .catch(onResponseError);
+    };
+
     /**
      * Get next page for last requested resource
      * @return {promise}

app/views/charts/charts.html

@@ -0,0 +1,23 @@
+<div class="streamView">
+    <h1> {{ title }}</h1>
+
+    <!-- Song list wrapper -->
+    <div class="streamView_inner">
+        <ul class="songList"
+            infinite-scroll='loadMore()'
+            infinite-scroll-distance='0'
+            infinite-scroll-container='".mainView"'
+            infinite-scroll-immediate-check='false' >
+
+            <li class="songList_item" ng-repeat="data in data">
+
+                <tracks data="data.track" type="data.type" user="data.user"/>
+
+            </li>
+        </ul>
+    </div>
+    <!-- Song list wrapper / end -->
+
+    <div ng-include="'views/common/loading.html'"></div>
+
+</div>