From 04787e9f07d939b4f224052c8d4f194c341587ae Mon Sep 17 00:00:00 2001 From: nelsonlaquet Date: Tue, 27 Aug 2013 01:53:37 -0500 Subject: [PATCH] Design work --- app/controllers/Api/Web/AlbumsController.php | 2 +- app/controllers/Api/Web/ArtistsController.php | 2 +- .../Api/Web/PlaylistsController.php | 25 ++++++ app/models/Entities/Album.php | 3 +- app/routes.php | 1 + public/scripts/app/app.coffee | 7 ++ .../app/controllers/playlists-list.coffee | 12 +++ .../scripts/app/controllers/playlists.coffee | 21 +++++ .../scripts/app/directives/albums-list.coffee | 1 + .../app/directives/playlists-list.coffee | 13 +++ public/scripts/app/filters/pfm-date.js | 5 +- .../app/filters/seconds-display.coffee | 20 +++++ public/scripts/app/services/player.coffee | 1 + public/scripts/app/services/playlists.coffee | 12 +++ public/styles/app.less | 2 +- public/styles/{tracks.less => content.less} | 62 +++++++++++++-- public/styles/player.less | 10 +++ public/templates/albums/show.html | 79 ++++++++----------- public/templates/artists/list.html | 2 +- public/templates/directives/player.html | 4 + .../templates/directives/playlists-list.html | 14 ++++ public/templates/playlists/index.html | 11 +++ public/templates/playlists/list.html | 3 + public/templates/playlists/show.html | 75 ++++++++---------- public/templates/tracks/show.html | 2 +- 25 files changed, 292 insertions(+), 97 deletions(-) create mode 100644 public/scripts/app/controllers/playlists-list.coffee create mode 100644 public/scripts/app/controllers/playlists.coffee create mode 100644 public/scripts/app/directives/playlists-list.coffee create mode 100644 public/scripts/app/filters/seconds-display.coffee rename public/styles/{tracks.less => content.less} (81%) create mode 100644 public/templates/directives/playlists-list.html create mode 100644 public/templates/playlists/list.html diff --git a/app/controllers/Api/Web/AlbumsController.php b/app/controllers/Api/Web/AlbumsController.php index d5117c5a..c57499bf 100644 --- a/app/controllers/Api/Web/AlbumsController.php +++ b/app/controllers/Api/Web/AlbumsController.php @@ -54,7 +54,7 @@ ->where('track_count', '>', 0); $count = $query->count(); - $perPage = 15; + $perPage = 18; $query->skip(($page - 1) * $perPage)->take($perPage); $albums = []; diff --git a/app/controllers/Api/Web/ArtistsController.php b/app/controllers/Api/Web/ArtistsController.php index 2321b01a..e4cbc773 100644 --- a/app/controllers/Api/Web/ArtistsController.php +++ b/app/controllers/Api/Web/ArtistsController.php @@ -128,7 +128,7 @@ ->where('track_count', '>', 0); $count = $query->count(); - $perPage = 15; + $perPage = 18; $query->skip(($page - 1) * $perPage)->take($perPage); $users = []; diff --git a/app/controllers/Api/Web/PlaylistsController.php b/app/controllers/Api/Web/PlaylistsController.php index 349c17ff..dd951f69 100644 --- a/app/controllers/Api/Web/PlaylistsController.php +++ b/app/controllers/Api/Web/PlaylistsController.php @@ -33,6 +33,31 @@ return $this->execute(new AddTrackToPlaylistCommand($id, Input::get('track_id'))); } + public function getIndex() { + $page = 1; + if (Input::has('page')) + $page = Input::get('page'); + + $query = Playlist::summary() + ->with('user', 'user.avatar', 'tracks', 'tracks.cover') + ->details() + ->orderBy('created_at', 'desc') + ->where('track_count', '>', 0) + ->whereIsPublic(true); + + $count = $query->count(); + $perPage = 18; + + $query->skip(($page - 1) * $perPage)->take($perPage); + $playlists = []; + + foreach ($query->get() as $playlist) { + $playlists[] = Playlist::mapPublicPlaylistSummary($playlist); + } + + return Response::json(["playlists" => $playlists, "current_page" => $page, "total_pages" => ceil($count / $perPage)], 200); + } + public function getShow($id) { $playlist = Playlist::with(['tracks.user', 'tracks.genre', 'tracks.cover', 'tracks.album', 'tracks' => function($query) { $query->details(); }, 'comments', 'comments.user'])->details()->find($id); if (!$playlist || !$playlist->canView(Auth::user())) diff --git a/app/models/Entities/Album.php b/app/models/Entities/Album.php index 00b91099..367ba119 100644 --- a/app/models/Entities/Album.php +++ b/app/models/Entities/Album.php @@ -78,8 +78,9 @@ $data = self::mapPublicAlbumSummary($album); $data['tracks'] = $tracks; - $data['comments'] = ['count' => count($comments), 'list' => $comments]; + $data['comments'] = $comments; $data['formats'] = $formats; + $data['description'] = $album->description; return $data; } diff --git a/app/routes.php b/app/routes.php index 688b30ca..4de756e1 100644 --- a/app/routes.php +++ b/app/routes.php @@ -59,6 +59,7 @@ Route::get('/albums', 'Api\Web\AlbumsController@getIndex'); Route::get('/albums/{id}', 'Api\Web\AlbumsController@getShow')->where('id', '\d+'); + Route::get('/playlists', 'Api\Web\PlaylistsController@getIndex'); Route::get('/playlists/{id}', 'Api\Web\PlaylistsController@getShow')->where('id', '\d+'); Route::get('/comments/{type}/{id}', 'Api\Web\CommentsController@getIndex')->where('id', '\d+'); diff --git a/public/scripts/app/app.coffee b/public/scripts/app/app.coffee index be4b359e..3b0ced1a 100644 --- a/public/scripts/app/app.coffee +++ b/public/scripts/app/app.coffee @@ -110,6 +110,13 @@ module.config [ state.state 'content.playlists', url: '/playlists' templateUrl: '/templates/playlists/index.html' + controller: 'playlists' + abstract: true + + state.state 'content.playlists.list', + url: '?page' + controller: 'playlists-list' + templateUrl: '/templates/playlists/list.html' state.state 'content.playlist', url: '/playlist/{id:[^\-]+}-{slug}' diff --git a/public/scripts/app/controllers/playlists-list.coffee b/public/scripts/app/controllers/playlists-list.coffee new file mode 100644 index 00000000..fa36631c --- /dev/null +++ b/public/scripts/app/controllers/playlists-list.coffee @@ -0,0 +1,12 @@ +window.pfm.preloaders['playlists-list'] = [ + 'playlists', '$state' + (playlists, $state) -> + playlists.fetchList($state.params.page, true) +] + +angular.module('ponyfm').controller "playlists-list", [ + '$scope', 'playlists', '$state', + ($scope, playlists, $state) -> + playlists.fetchList($state.params.page).done (searchResults) -> + $scope.playlists = searchResults.playlists +] \ No newline at end of file diff --git a/public/scripts/app/controllers/playlists.coffee b/public/scripts/app/controllers/playlists.coffee new file mode 100644 index 00000000..58983d83 --- /dev/null +++ b/public/scripts/app/controllers/playlists.coffee @@ -0,0 +1,21 @@ +angular.module('ponyfm').controller "playlists", [ + '$scope', 'playlists', '$state' + ($scope, playlists, $state) -> + + refreshPages = (list) -> + $scope.playlists = list.playlists + $scope.currentPage = parseInt(list.current_page) + $scope.totalPages = parseInt(list.total_pages) + + delete $scope.nextPage + delete $scope.prevPage + $scope.nextPage = $scope.currentPage + 1 if $scope.currentPage < $scope.totalPages + $scope.prevPage = $scope.currentPage - 1 if $scope.currentPage > 1 + $scope.pages = [1..$scope.totalPages] + + playlists.fetchList($state.params.page).done refreshPages + $scope.$on 'playlists-feteched', (e, list) -> refreshPages(list) + + $scope.gotoPage = (page) -> + $state.transitionTo 'content.playlists.list', {page: page} +] \ No newline at end of file diff --git a/public/scripts/app/directives/albums-list.coffee b/public/scripts/app/directives/albums-list.coffee index a8287415..bf3880d4 100644 --- a/public/scripts/app/directives/albums-list.coffee +++ b/public/scripts/app/directives/albums-list.coffee @@ -1,5 +1,6 @@ angular.module('ponyfm').directive 'pfmAlbumsList', () -> restrict: 'E' + replace: true templateUrl: '/templates/directives/albums-list.html' scope: albums: '=albums', diff --git a/public/scripts/app/directives/playlists-list.coffee b/public/scripts/app/directives/playlists-list.coffee new file mode 100644 index 00000000..2f18ce15 --- /dev/null +++ b/public/scripts/app/directives/playlists-list.coffee @@ -0,0 +1,13 @@ +angular.module('ponyfm').directive 'pfmPlaylistsList', () -> + restrict: 'E' + replace: true + templateUrl: '/templates/directives/playlists-list.html' + scope: + playlists: '=playlists', + class: '@class' + + controller: [ + '$scope', 'auth' + ($scope, auth) -> + $scope.auth = auth.data + ] \ No newline at end of file diff --git a/public/scripts/app/filters/pfm-date.js b/public/scripts/app/filters/pfm-date.js index 38a5b521..cbb640a2 100644 --- a/public/scripts/app/filters/pfm-date.js +++ b/public/scripts/app/filters/pfm-date.js @@ -11,7 +11,10 @@ angular.module('ponyfm').filter('pfmdate', [ function isNumber(value){return typeof value == 'number';} function isDate(value){ - return toString.apply(value) == '[object Date]'; + if (!value) + return false; + + return value.toString() == '[object Date]'; } function padNumber(num, digits, trim) { diff --git a/public/scripts/app/filters/seconds-display.coffee b/public/scripts/app/filters/seconds-display.coffee new file mode 100644 index 00000000..3714841b --- /dev/null +++ b/public/scripts/app/filters/seconds-display.coffee @@ -0,0 +1,20 @@ +angular.module('ponyfm').filter 'secondsDisplay', () -> + (input) -> + sec_num = parseInt(input, 10) + return '00:00' if !sec_num + + hours = Math.floor(sec_num / 3600) + minutes = Math.floor((sec_num - (hours * 3600)) / 60) + seconds = sec_num - (hours * 3600) - (minutes * 60) + + if (hours < 10) + hours = "0" + hours + if (minutes < 10) + minutes = "0" + minutes + if (seconds < 10) + seconds = "0" + seconds + + time = '' + time += hours + ':' if hours != "00" + time += minutes + ':' + seconds; + return time; \ No newline at end of file diff --git a/public/scripts/app/services/player.coffee b/public/scripts/app/services/player.coffee index 18a5f22d..cf2a2c30 100644 --- a/public/scripts/app/services/player.coffee +++ b/public/scripts/app/services/player.coffee @@ -14,6 +14,7 @@ angular.module('ponyfm').factory('player', [ track.loadingProgress = (self.currentSound.bytesLoaded / self.currentSound.bytesTotal) * 100 whileplaying: () -> $rootScope.safeApply -> + track.progressSeconds = self.currentSound.position / 1000 track.progress = (self.currentSound.position / (track.duration * 1000)) * 100 onfinish: () -> $rootScope.safeApply -> diff --git a/public/scripts/app/services/playlists.coffee b/public/scripts/app/services/playlists.coffee index 1175f6da..d456d19d 100644 --- a/public/scripts/app/services/playlists.coffee +++ b/public/scripts/app/services/playlists.coffee @@ -3,10 +3,22 @@ angular.module('ponyfm').factory('playlists', [ ($rootScope, $state, $http) -> playlistDef = null playlists = {} + playlistPages = [] self = pinnedPlaylists: [] + fetchList: (page, force) -> + force = force || false + page = 1 if !page + return playlistPages[page] if !force && playlistPages[page] + playlistDef = new $.Deferred() + $http.get('/api/web/playlists?page=' + page).success (playlists) -> + playlistDef.resolve playlists + $rootScope.$broadcast 'playlists-feteched', playlists + + playlistPages[page] = playlistDef.promise() + fetch: (id, force) -> force = force || false return playlists[id] if !force && playlists[id] diff --git a/public/styles/app.less b/public/styles/app.less index e691d752..8e0a1040 100644 --- a/public/styles/app.less +++ b/public/styles/app.less @@ -11,4 +11,4 @@ @import 'animations'; @import 'body'; @import 'player'; -@import 'tracks'; \ No newline at end of file +@import 'content'; \ No newline at end of file diff --git a/public/styles/tracks.less b/public/styles/content.less similarity index 81% rename from public/styles/tracks.less rename to public/styles/content.less index 57f51b26..bae1c800 100644 --- a/public/styles/tracks.less +++ b/public/styles/content.less @@ -2,7 +2,61 @@ @import-once 'mixins'; @import-once 'variables'; -.track-details { +.albums-listing, .playlists-listing, .artist-listing { + margin: 0px; + padding: 0px; + list-style: none; + + li { + .box-sizing(border-box); + float: left; + width: 16.6666%; + padding: 5px; + line-height: normal; + + a { + background: #ddd; + display: block; + + img { + display: block; + } + + .title, .published { + display: block; + color: #444; + padding: 5px; + } + + .title { + .ellipsis(); + + font-weight: bold; + font-size: 12pt; + padding-bottom: 0px; + } + + .published { + color: #777; + font-size: 10pt; + } + + &:hover { + text-decoration: none; + } + } + } +} + +.resource-details { + &.track-details { + > header { + h2, h1 { + margin-left: 47px; + } + } + } + > header { padding: 5px; background: #eee; @@ -11,12 +65,10 @@ h1 { margin: 0px; - margin-left: 47px; } h2 { margin: 0px; - margin-left: 47px; padding: 0px; font-weight: normal; clear: none; @@ -103,7 +155,7 @@ html .single-player .play-button { left: 0px; width: 100%; height: 100%; - line-height: 38px; + line-height: 45px; text-align: center; font-size: 12pt; color: #fff; @@ -128,8 +180,8 @@ html .single-player .play-button { list-style: none; li { - .clearfix(); .box-sizing(border-box); + overflow: hidden; &.empty { .border-radius(0px); diff --git a/public/styles/player.less b/public/styles/player.less index 59dfe51d..b7b726f0 100644 --- a/public/styles/player.less +++ b/public/styles/player.less @@ -76,6 +76,16 @@ padding: 0px; float: right; + li.status { + font-size: 10pt; + margin-top: 12px; + margin-right: 5px; + + strong { + font-weight: normal; + } + } + li { line-height: normal; float: left; diff --git a/public/templates/albums/show.html b/public/templates/albums/show.html index a5886254..e82656a3 100644 --- a/public/templates/albums/show.html +++ b/public/templates/albums/show.html @@ -1,57 +1,46 @@ -
- - -
- -
+
+ + +
+

+

+ by: +

+
+ +
+
+ + +
    +
  • Published:
    • +
  • Views:
    • +
  • Downloads:
    • +
  • Favourites:
-
-

- {{album.title}} - - by: {{album.user.name}} - -

- -
-
-
-
-

-
- -

Tracks

- - -

Comments

- +
+
+

Description

+

-
- -
- - +

Tracks

+ - Share or Embed - -

Stats

-
    -
  • Views: {{album.stats.views}}
    • -
  • Downloads: {{album.stats.downloads}}
    • -
  • Favourites: {{album.stats.favourites}}
    • -
-
+
\ No newline at end of file diff --git a/public/templates/artists/list.html b/public/templates/artists/list.html index ad9d0ddc..43c54465 100644 --- a/public/templates/artists/list.html +++ b/public/templates/artists/list.html @@ -4,7 +4,7 @@ {{artist.name}} - joined {{artist.created_at | momentFromNow}} + joined {{artist.created_at.date | momentFromNow}} diff --git a/public/templates/directives/player.html b/public/templates/directives/player.html index 5577d688..1bb075ad 100644 --- a/public/templates/directives/player.html +++ b/public/templates/directives/player.html @@ -1,5 +1,9 @@
    +
  • + {{player.currentTrack.progressSeconds | secondsDisplay}} / + {{player.currentTrack.duration | secondsDisplay}} +
  • diff --git a/public/templates/directives/playlists-list.html b/public/templates/directives/playlists-list.html new file mode 100644 index 00000000..e6768c6f --- /dev/null +++ b/public/templates/directives/playlists-list.html @@ -0,0 +1,14 @@ + diff --git a/public/templates/playlists/index.html b/public/templates/playlists/index.html index e69de29b..e6eb5e8c 100644 --- a/public/templates/playlists/index.html +++ b/public/templates/playlists/index.html @@ -0,0 +1,11 @@ + + + diff --git a/public/templates/playlists/list.html b/public/templates/playlists/list.html new file mode 100644 index 00000000..0e07df5b --- /dev/null +++ b/public/templates/playlists/list.html @@ -0,0 +1,3 @@ +
    + +
    \ No newline at end of file diff --git a/public/templates/playlists/show.html b/public/templates/playlists/show.html index 487c5317..f9167c95 100644 --- a/public/templates/playlists/show.html +++ b/public/templates/playlists/show.html @@ -1,52 +1,47 @@ -
    - - -
    - -
    +
    + + +
    +

    +

    + created by: +

    +
    + + +
    +
    + + +
      +
    • Created:
      • +
    • Views:
      • +
    • Downloads:
      • +
    • Favourites:
    -
    -

    - {{playlist.title}} -

    - -
    -
    -
    -
    -

    -
    - -

    Tracks

    - - -

    Comments

    - +
    +
    +

    Description

    +

    -
    -
    - - - Share or Embed +

    Tracks

    + -

    Stats

    -
      -
    • Views: {{playlist.stats.views}}
      • -
    • Downloads: {{playlist.stats.downloads}}
      • -
    • Favourites: {{playlist.stats.favourites}}
      • -
    -
    +
    \ No newline at end of file diff --git a/public/templates/tracks/show.html b/public/templates/tracks/show.html index 3dbed33b..e20d1a0f 100644 --- a/public/templates/tracks/show.html +++ b/public/templates/tracks/show.html @@ -1,4 +1,4 @@ -
    +