Merge pull request #18 from jaedb/release/2.11

2.11
jaedb · Sep 17, 2015 · 2a265dc · 2a265dc
2 parents ba0e150 + d3d7fd8
commit 2a265dc
Show file tree

Hide file tree

Showing 39 changed files with 444 additions and 399 deletions.
diff --git a/.gitignore b/.gitignore
@@ -1,6 +1,6 @@
 config.js
+/Concepts/
 /temp
-app/services/mopidy/mopidy.pid
 @eaDir
 Thumbs.db
 
diff --git a/app/app.js b/app/app.js
@@ -69,7 +69,11 @@ angular.module('spotmop', [
 			// fetch this instance's best thumbnail
 			$scope.image = getThumbnailImage( $scope.images );
 
-			// get the best thumbnail image, please and thankyou
+			/**
+			 * Get the most appropriate thumbnail image
+			 * @param images = array of image urls
+			 * @return string (image url)
+			 **/
 			function getThumbnailImage( images ){
 
 				// what if there are no images? then nada
@@ -138,12 +142,12 @@ angular.module('spotmop', [
 			$scope.text = $scope.defaultText;
 
 			// bind to document-wide click events
-			$(document).on('click', function(evt){
+			$(document).on('click', function(event){
 
-				// if we've clicked on THIS confirmation button
-				if( evt.target == $element[0] ){
+				// if we've left-clicked on THIS confirmation button
+				if( event.target == $element[0] && event.which == 1 ){
 					if( $scope.confirming ){
-						
+
 						// if the function exists, perform the on-confirmation function from the directive's template
 						if( typeof( $scope.$parent[ $scope.onConfirmation ]() ) === 'function' )
 							$scope.$parent[ $scope.onConfirmation ]();
@@ -172,7 +176,7 @@ angular.module('spotmop', [
 		},
 		replace: true, 		// Replace with the template below
 		transclude: true, 	// we want to insert custom content inside the directive
-		template: '<span ng-bind="text"></span>'
+		template: '<span ng-bind="text" class="button" ng-class="{ destructive: confirming }"></span>'
 	};
 })
 
@@ -234,7 +238,11 @@ angular.module('spotmop', [
  **/
 .controller('ApplicationController', function ApplicationController( $scope, $rootScope, $state, $localStorage, $timeout, $location, SpotifyService, MopidyService, EchonestService, SettingsService ){
 
-    $scope.isTouchDevice = function(){ return !!('ontouchstart' in window); }
+    $scope.isTouchDevice = function(){
+		if( SettingsService.getSetting('emulateTouchDevice',false) )
+			return true;
+		return !!('ontouchstart' in window);
+	}
     $scope.isSameDomainAsMopidy = function(){
 		var mopidyhost = SettingsService.getSetting('mopidyhost','localhost');
 
@@ -255,13 +263,16 @@ angular.module('spotmop', [
 		window.location.reload();
 	}
     $scope.playlistsMenu = [];
+    $scope.myPlaylists = {};
 
 	// update the playlists menu
 	$scope.updatePlaylists = function(){
 
 		SpotifyService.getPlaylists( $scope.spotifyUser.id, 50 )
 			.success(function( response ) {
-
+
+				$scope.myPlaylists = response.items;
+
                 var newPlaylistsMenu = [];
 
 				// loop all of our playlists, and set up a menu item for each
@@ -302,7 +313,6 @@ angular.module('spotmop', [
 	}
 
     angular.element(window).resize(function () {
-        $scope.resquarePanels();
 		$scope.windowWidth = $(document).width();
 
 		// if we're a small or medium screen, re-hide the sidebar and reset the body sliding
@@ -317,14 +327,6 @@ angular.module('spotmop', [
 		}
     });
 
-	// make all the square panels really square
-	$scope.resquarePanels = function(){
-		$(document).find('.square-panel').each( function(index, value){
-			var realWidth = value.getBoundingClientRect().width;
-			$(value).find('.image-container').css('height', realWidth +'px');
-		});
-	}
-
 	$rootScope.$on('$stateChangeStart', function(event, toState, toParams, fromState, fromParams){ 
 		$scope.hideMenu();
 	});
@@ -419,16 +421,6 @@ angular.module('spotmop', [
         var notificationItem = $(document).find('#notifications .notification-item[data-id="'+data.id+'"]');
 		notificationItem.fadeOut(200, function(){ notificationItem.remove() });
 	});
-
-	// the page content has been updated
-	$scope.$on('spotmop:pageUpdated', function(){
-
-		// wait for $digest
-		$timeout( function(){
-			$scope.resquarePanels();
-		},
-		0);
-	});
 
 
 

diff --git a/app/browse/album/controller.js b/app/browse/album/controller.js
@@ -17,10 +17,10 @@ angular.module('spotmop.browse.album', [])
 /**
  * Main controller
  **/
-.controller('AlbumController', function AlbumController( $scope, $rootScope, SpotifyService, $stateParams, $filter ){
+.controller('AlbumController', function AlbumController( $scope, $rootScope, $stateParams, $filter, MopidyService, SpotifyService ){
 
 	$scope.album = {};
-	$scope.tracklist = {};
+	$scope.tracklist = {type: 'track'};
     $scope.convertedDate = function(){
         if( $scope.album.release_date_precision == 'day' )
             return $filter('date')($scope.album.release_date, "MMMM d, yyyy");
@@ -41,6 +41,26 @@ angular.module('spotmop.browse.album', [])
         }
         return Math.round(totalTime / 100000);   
     }
+
+	// play the whole album
+	$scope.playAlbum = function(){
+		MopidyService.playStream( $scope.album.uri );
+	}
+
+	// add album to library
+	$scope.addToLibrary = function(){
+		$rootScope.$broadcast('spotmop:notifyUser', {type: 'loading', id: 'adding-to-library', message: 'Adding to library'});
+
+		var trackids = [];
+		angular.forEach( $scope.tracklist.tracks, function( track ){
+			trackids.push( SpotifyService.getFromUri( 'trackid', track.uri ) );
+		});
+
+		SpotifyService.addTracksToLibrary( trackids )
+			.success( function(response){
+				$rootScope.$broadcast('spotmop:notifyUserRemoval', {id: 'adding-to-library'});
+			});
+	}
 
     $rootScope.$broadcast('spotmop:notifyUser', {type: 'loading', id: 'loading-album', message: 'Loading'});
 
@@ -50,9 +70,9 @@ angular.module('spotmop.browse.album', [])
 
 			$scope.album = response;
 			$scope.tracklist = response.tracks;
+			$scope.tracklist.type = 'track';
 			$scope.tracklist.tracks = response.tracks.items;
 
-			$rootScope.$broadcast('spotmop:pageUpdated');
             $rootScope.$broadcast('spotmop:notifyUserRemoval', {id: 'loading-album'});
 		})
 		.error(function( error ){

diff --git a/app/browse/album/template.html b/app/browse/album/template.html
@@ -1,7 +1,5 @@
 <div class="browse album">
 
-	<ng-include src="'/app/common/contextmenu/tracklist.template.html'"></ng-include>
-
 	<div class="album-intro">
 
 		<div class="square-panel">
@@ -33,10 +31,14 @@ <h2>
 						<span class="bar" style="width: {{ album.popularity }}%;"></span>
 					</span>
 				</div>
-			</div>
-
+			</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>

diff --git a/app/browse/artist/controller.js b/app/browse/artist/controller.js
@@ -10,7 +10,7 @@ angular.module('spotmop.browse.artist', [])
 	$stateProvider
 		.state('browse.artist', {
 			url: "/artist/:uri",
-            //abstract: true,
+            abstract: true,
 			templateUrl: "app/browse/artist/template.html",
             controller: ['$scope', '$state', 
                 function( $scope, $state) {
@@ -21,7 +21,7 @@ angular.module('spotmop.browse.artist', [])
                 }]
 		})
 		.state('browse.artist.overview', {
-			url: "/overview",
+			url: "",
 			templateUrl: "app/browse/artist/overview.template.html",
 			controller: 'ArtistOverviewController'
 		})
@@ -61,7 +61,7 @@ angular.module('spotmop.browse.artist', [])
 .controller('ArtistController', function ArtistController( $scope, $rootScope, $timeout, SpotifyService, $stateParams, $sce ){
 
 	$scope.artist = {};
-	$scope.tracklist = {};
+	$scope.tracklist = {type: 'track'};
 	$scope.albums = {};
 	$scope.relatedArtists = {};
 
@@ -95,7 +95,7 @@ angular.module('spotmop.browse.artist', [])
 	SpotifyService.getAlbums( $stateParams.uri )
 		.success( function( response ){
 			$scope.albums = response;
-
+			
 			// get the artist's top tracks
 			SpotifyService.getTopTracks( $stateParams.uri )
 				.success( function( response ){
@@ -157,18 +157,7 @@ angular.module('spotmop.browse.artist', [])
 /**
  * Related artists controller
  **/
-.controller('RelatedArtistsController', function RelatedArtistsController( $scope, $timeout, $rootScope ){
-
-	// when the related artists array changes (ie on API response, page load, etc)
-	$scope.$watch('relatedArtists', function(){
-
-		// wait for $digest
-		$timeout( function(){
-			$scope.resquarePanels();
-		},
-		0);
-	});
-
+.controller('RelatedArtistsController', function RelatedArtistsController( $scope, $timeout, $rootScope ){	
 })
 
 

diff --git a/app/browse/artist/overview.template.html b/app/browse/artist/overview.template.html
@@ -1,6 +1,4 @@
 <div class="col" ng-class="{'w70': !mediumScreen(), 'w100': mediumScreen()}">
-
-	<ng-include src="'/app/common/contextmenu/tracklist.template.html'"></ng-include>
 
 	<h4 class="section-title">Top tracks</h4>
 

diff --git a/app/browse/playlist/controller.js b/app/browse/playlist/controller.js
@@ -17,11 +17,11 @@ angular.module('spotmop.browse.playlist', [])
 /**
  * Main controller
  **/
-.controller('PlaylistController', function PlaylistController( $scope, $rootScope, $filter, $state, $stateParams, $sce, SpotifyService, SettingsService, DialogService ){
+.controller('PlaylistController', function PlaylistController( $scope, $rootScope, $filter, $state, $stateParams, $sce, SpotifyService, MopidyService, SettingsService, DialogService ){
 
 	// setup base variables
-	$scope.playlist = {};
-	$scope.tracklist = { tracks: [] };
+	$scope.playlist = {images: []};
+	$scope.tracklist = { tracks: [], type: 'track' };
 	$scope.totalTime = 0;
     $scope.following = false;
     $scope.followPlaylist = function(){
@@ -52,6 +52,11 @@ angular.module('spotmop.browse.playlist', [])
         DialogService.create('editPlaylist', $scope);
     }
 
+	// play the whole playlist
+	$scope.playPlaylist = function(){
+		MopidyService.playStream( $scope.playlist.uri );
+	}
+
     // figure out the total time for all tracks
     $scope.totalTime = function(){
         var totalTime = 0;

diff --git a/app/browse/playlist/template.html b/app/browse/playlist/template.html
@@ -1,60 +1,69 @@
 <div>
-
-	<ng-include src="'/app/common/contextmenu/tracklist.template.html'"></ng-include>
 
 	<div class="playlist-intro">
 		<div class="image-container" ng-repeat="image in playlist.images | limitTo:1">
 			<div class="image animate blur" style="background-image: url({{ image.url }});"></div>
 		</div>
 		<div class="inner">
-			<h1>
+
+			<div class="thumbnail" ng-repeat="image in playlist.images | limitTo:1" style="background-image: url({{ image.url }});"></div>
+
+			<div class="content">
+				<h1 ng-bind="playlist.name"></h1>
 
-                <span ng-bind="playlist.name"></span>
+				<div class="info-text">
+					<span ng-bind="tracklist.total">0</span> tracks
+					&nbsp;|&nbsp; <span ng-show="tracks.next">+</span><span ng-bind="totalTime()">0</span> minutes
+					&nbsp;|&nbsp; <i class="fa fa-lock" ng-hide="playlist.public">&nbsp;</i><a ng-bind="playlist.owner.id" href="/browse/user/{{ playlist.owner.uri }}"></a>
+				</div>
 
-				<span class="follow-unfollow" ng-show="playlist.owner.id !== spotifyUser.id">
-					<span class="flag clickable destructive animate"
-						  ng-class="{red: hovering, dark: !hovering}"
-						  ng-show="following"
-						  ng-click="unfollowPlaylist()"
-						  ng-mouseover="hovering = true"
-						  ng-mouseleave="hovering = false">
-						<span ng-show="hovering"><i class="fa fa-star"></i> Unfollow</span>
-						<span ng-show="!hovering"><i class="fa fa-star"></i> Following</span>
-					</span>
-					<span class="flag follow-toggle clickable dark animate"
-						  ng-show="!following"
-						  ng-click="followPlaylist()">
-						<span><i class="fa fa-star"></i> Follow</span>
-					</span>
-				</span>
+				<h4 class="description" ng-bind-html="playlist.description" ng-show="playlist.description">Loading</h4>
 
-				<span class="owner-actions" ng-show="playlist.owner.id === spotifyUser.id">
-					<span ng-show="following">
-						<span class="flag clickable dark animate"
-							  ng-click="editPlaylist( $scope )">
-							Edit
-						</span>
-						<confirmation-button class="flag clickable destructive dark animate"
-							default-text="Delete playlist"
-							confirmation-text="Are you sure?"
-							on-confirmation="unfollowPlaylist">
-						</confirmation-button>
+				<div class="buttons">
+
+					<a class="button primary" ng-click="playPlaylist()"><i class="fa fa-play"></i>&nbsp; Play playlist</a>
+
+					<span class="follow-unfollow" ng-show="playlist.owner.id !== spotifyUser.id">
+						<a class="button"
+							  ng-class="{destructive: hovering}"
+							  ng-show="following"
+							  ng-click="unfollowPlaylist()"
+							  ng-mouseover="hovering = true"
+							  ng-mouseleave="hovering = false">
+							<span ng-show="hovering"><i class="fa fa-star"></i> Unfollow</span>
+							<span ng-show="!hovering"><i class="fa fa-star"></i> Following</span>
+						</a>
+						<a class="button"
+							  ng-show="!following"
+							  ng-click="followPlaylist()">
+							<span><i class="fa fa-star"></i> Follow</span>
+						</a>
 					</span>
-					<span ng-show="!following">
-						<span class="flag clickable dark animate"
-							  ng-click="recoverPlaylist()">
-							<i class="fa fa-undo"></i> Recover playlist
-						</span>						
+
+					<span class="owner-actions" ng-show="playlist.owner.id === spotifyUser.id">
+						<span ng-show="following">
+							<a class="button"
+								  ng-click="editPlaylist( $scope )">
+								Edit
+							</a>
+							<confirmation-button
+								default-text="Delete"
+								confirmation-text="Are you sure?"
+								on-confirmation="unfollowPlaylist">
+							</confirmation-button>
+						</span>
+						<span ng-show="!following">
+							<a class="button"
+								  ng-click="recoverPlaylist()">
+								<i class="fa fa-undo"></i> Recover playlist
+							</a>					
+						</span>
 					</span>
-				</span>
-
-            </h1>
-			<h4 class="description" ng-bind-html="playlist.description" ng-show="playlist.description">Loading</h4>
-			<div class="info-text">
-				<span ng-bind="tracklist.total">0</span> tracks
-				&nbsp;|&nbsp; <span ng-show="tracks.next">+</span><span ng-bind="totalTime()">0</span> minutes
-				&nbsp;|&nbsp; <i class="fa fa-lock" ng-hide="playlist.public">&nbsp;</i><a ng-bind="playlist.owner.id" href="/browse/user/{{ playlist.owner.uri }}"></a>
+				</div>
 			</div>
+
+			<div class="clear-both"></div>
+
 		</div>
 	</div>