Skip to content

Commit

Permalink
Merge pull request #28 from jaedb/release/2.4.2
Browse files Browse the repository at this point in the history 
Release/2.4.2
  • Loading branch information
@jaedb
jaedb committed Nov 19, 2015
2 parents 2a3f965 + 455bf11 commit e5c774a
Show file tree
Hide file tree
Showing 47 changed files with 3,021 additions and 1,866 deletions.
322 changes: 18 additions & 304 deletions app/app.js
View file

Large diffs are not rendered by default.

55 changes: 34 additions & 21 deletions app/browse/album/controller.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -45,6 +45,26 @@ angular.module('spotmop.browse.album', [])
}
return Math.round(totalTime / 100000);
}


/**
* Lazy loading
* When we scroll near the bottom of the page, broadcast it
* so that our current controller knows when to load more content
* NOTE: This is a clone of app.js version because we scroll a different element (.content)
**/
$(document).find('.browse > .content').on('scroll', function(evt){

// get our ducks in a row - these are all the numbers we need
var scrollPosition = $(this).scrollTop();
var frameHeight = $(this).outerHeight();
var contentHeight = $(this).children('.inner').outerHeight();
var distanceFromBottom = -( scrollPosition + frameHeight - contentHeight );

if( distanceFromBottom <= 100 )
$scope.$broadcast('spotmop:loadMore');
});


// play the whole album
$scope.playAlbum = function(){
Expand All @@ -53,24 +73,18 @@ angular.module('spotmop.browse.album', [])

// add album to library
$scope.addToLibrary = function(){
$rootScope.requestsLoading++;

var trackids = [];
angular.forEach( $scope.tracklist.tracks, function( track ){
trackids.push( SpotifyService.getFromUri( 'trackid', track.uri ) );
});

SpotifyService.addTracksToLibrary( trackids )
.success( function(response){
$rootScope.requestsLoading--;
});
SpotifyService.addTracksToLibrary( trackids );
}

$rootScope.requestsLoading++;

// get the album
SpotifyService.getAlbum( $stateParams.uri )
.success(function( response ) {
.then(function( response ) {

$scope.album = response;
$scope.tracklist = response.tracks;
Expand All @@ -81,11 +95,17 @@ angular.module('spotmop.browse.album', [])
track.album = $scope.album;
});

$rootScope.requestsLoading--;
})
.error(function( error ){
$rootScope.requestsLoading--;
$rootScope.$broadcast('spotmop:notifyUser', {type: 'bad', id: 'loading-album', message: error.error.message});
var artisturis = [];
angular.forEach( response.artists, function( artist ){
artisturis.push( artist.uri );
});

// now get the artist objects
SpotifyService.getArtists( artisturis )
.then( function( response ){
$scope.album.artists = response.artists;
});

});


Expand All @@ -104,11 +124,10 @@ angular.module('spotmop.browse.album', [])

// update our switch to prevent spamming for every scroll event
loadingMoreTracks = true;
$rootScope.requestsLoading++;

// go get our 'next' URL
SpotifyService.getUrl( $nextUrl )
.success(function( response ){
.then(function( response ){

// append these new tracks to the main tracklist
$scope.tracklist.tracks = $scope.tracklist.tracks.concat( response.items );
Expand All @@ -117,12 +136,6 @@ angular.module('spotmop.browse.album', [])
$scope.tracklist.next = response.next;

// update loader and re-open for further pagination objects
$rootScope.requestsLoading--;
loadingMoreTracks = false;
})
.error(function( error ){
$rootScope.requestsLoading--;
$rootScope.$broadcast('spotmop:notifyUser', {type: 'bad', id: 'loading-more-tracks', message: error.error.message});
loadingMoreTracks = false;
});
}
Expand Down
105 changes: 61 additions & 44 deletions app/browse/album/template.html
View file
Original file line number Diff line number Diff line change
@@ -1,60 +1,77 @@
<div class="browse album">
<div class="browse album-page">

<div class="intro album-intro">
<div class="asset-sidebar">

<div class="thumbnail album" ng-if="album.images.length > 0" ng-repeat="image in album.images | limitTo:1" style="background-image: url({{ image.url }});"></div>
<div class="thumbnail album placeholder" ng-if="!album.images || album.images.length <= 0"></div>

<div class="square-panel">
<div class="image-container" ng-repeat="image in album.images | filter:image.height=300 | limitTo:1">
<div class="image animate" style="background-image: url({{ image.url }});"></div>
</div>
<div class="artist-grid small">
<a
ng-repeat="artist in album.artists"
class="artist"
href="/browse/artist/{{ artist.uri }}">
<thumbnail ng-if="artist.images" images="artist.images" size="small"></thumbnail>
<div class="name-wrapper animate"><div class="name" ng-bind="artist.name"></div></div>
</a>
</div>

<div class="buttons">
<a class="button primary" ng-click="playAlbum()"><i class="fa fa-play"></i>&nbsp; Play</a>
<a class="button" ng-click="addToLibrary()">Add to library</a>
</div>

<div class="content">
<div class="clear-left"></div>

<h1 ng-bind="album.name"></h1>

<h2>
<span ng-repeat="artist in album.artists">
<a href="/browse/artist/{{ artist.uri }}" ng-bind="artist.name"></a><span ng-if="!$last">, </span>
<div class="info">
<div class="info-item capitalize">
<span ng-bind="album.tracks.total"></span> track<span ng-hide="album.tracks.items.length<=1">s</span>, <span ng-show="album.tracks.next">+</span><span ng-bind="totalTime()"></span> minutes
</div>
<div class="info-item capitalize">
<span class="label">Released: </span>
<span class="date" ng-bind="convertedDate()"></span>
</div>
<div class="info-item capitalize">
Popularity:
<span class="bar-track">
<span class="bar" style="width: {{ album.popularity }}%;"></span>
</span>
</h2>

<div class="info-text">
<div class="wrapper">
<span ng-bind="album.tracks.total"></span> track<span ng-hide="album.tracks.items.length<=1">s</span>
<span class="duration">
(<span ng-show="album.tracks.next">+</span><span ng-bind="totalTime()"></span> minutes)
</span>
</div>
<div class="wrapper released">
<span class="label">Released: </span>
<span class="date" ng-bind="convertedDate()"></span>
</div>
<div class="wrapper">
<span class="bar-track">
<span class="bar" style="width: {{ album.popularity }}%;"></span>
</span>
&nbsp;
</div>
</div>
&nbsp;
</div>
</div>

<br /><br />

<a class="button primary" ng-click="playAlbum()"><i class="fa fa-play"></i>&nbsp; Play album</a>
<a class="button" ng-click="addToLibrary()">Add to library</a>

<div class="clear-both"></div>
<div class="clear-left"></div>

</div>

<div class="album-items tracklist" ng-controller="TracklistController" >
<div class="content scrolling-panel">
<div class="inner">

<track ng-repeat="track in tracklist.tracks"></track>
<div class="intro">
<div class="breadcrumbs">
<span ng-repeat="breadcrumb in breadcrumbs">
<a class="item" href="{{ breadcrumb.link }}" ng-bind="breadcrumb.name"></a>
<i class="fa fa-angle-right divider"></i>
</span>
<span class="item">Album</span>
</div>
<h1 ng-bind="album.name"></h1>
<h2 class="description">
<span ng-repeat="artist in album.artists">
<a href="/browse/artist/{{ artist.uri }}" ng-bind="artist.name"></a><span ng-if="!$last">, </span>
</span>
</h2>
</div>

<div class="album-items tracklist" ng-controller="TracklistController" >

<track ng-repeat="track in tracklist.tracks track by $index"></track>

<div ng-hide="tracklist.tracks.length" class="no-items">
No items
</div>
<div ng-hide="tracklist.tracks.length" class="no-items">
No items
</div>

</div>

</div>
</div>

</div>
8 changes: 1 addition & 7 deletions app/browse/artist/biography.template.html
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,4 @@
<div class="gallery col w30" ng-if="artist.images.length > 0">
<a href="{{ image.url }}" class="gallery-item" target="_blank" ng-repeat="image in artist.images | limitTo:1">
<img src="{{ image.url }}" />
</a>
</div>

<div class="biography" ng-class="{ 'col w70': artist.images.length > 0 }">
<div class="biography">

<h4 class="section-title">Biography</h4>
<div class="content" ng-bind="artist.biography.text"></div>
Expand Down
Loading

0 comments on commit e5c774a

Please sign in to comment.