From d349fa1e6ed8d3dc38c6ec39d7017af99dee6002 Mon Sep 17 00:00:00 2001
From: nelsonlaquet <nelsonlaquet@gmail.com>
Date: Thu, 15 Aug 2013 18:49:20 -0500
Subject: [PATCH] Things

---
 app/controllers/Api/Web/TracksController.php  |  5 +-
 app/library/Assets.php                        |  1 +
 app/views/shared/_app_layout.blade.php        |  8 +-
 .../app/controllers/application.coffee        | 16 +++-
 public/scripts/app/controllers/track.coffee   |  1 -
 .../app/controllers/tracks-list.coffee        |  6 +-
 public/scripts/app/controllers/tracks.coffee  |  4 +
 public/scripts/app/directives/player.coffee   |  1 +
 .../app/directives/scroll-recorder.coffee     | 28 ++++++
 .../app/directives/track-player.coffee        | 13 +++
 public/scripts/app/services/tracks.coffee     | 27 +++++-
 public/scripts/base/jquery.viewport.js        | 58 +++++++++++++
 public/styles/components.less                 | 30 ++++++-
 public/styles/layout.less                     |  9 +-
 public/styles/tracks.less                     | 87 +++++++++++--------
 public/templates/account/content/_layout.html |  4 +-
 .../templates/account/favourites/_layout.html |  6 +-
 public/templates/artists/_show_layout.html    |  6 +-
 public/templates/content/_layout.html         |  8 +-
 public/templates/directives/track-player.html |  7 ++
 public/templates/tracks/search-list.html      |  2 +-
 public/templates/tracks/search.html           | 27 +++---
 public/templates/tracks/show.html             |  8 +-
 23 files changed, 274 insertions(+), 88 deletions(-)
 create mode 100644 public/scripts/app/directives/scroll-recorder.coffee
 create mode 100644 public/scripts/app/directives/track-player.coffee
 create mode 100644 public/scripts/base/jquery.viewport.js
 create mode 100644 public/templates/directives/track-player.html

diff --git a/app/controllers/Api/Web/TracksController.php b/app/controllers/Api/Web/TracksController.php
index 05c10665..d69386fb 100644
--- a/app/controllers/Api/Web/TracksController.php
+++ b/app/controllers/Api/Web/TracksController.php
@@ -51,6 +51,7 @@
 
 		public function getIndex() {
 			$page = 1;
+			$perPage = 60;
 
 			if (Input::has('page'))
 				$page = Input::get('page');
@@ -63,7 +64,7 @@
 			$this->applyFilters($query);
 
 			$totalCount = $query->count();
-			$query->take(30)->skip(30 * ($page - 1));
+			$query->take($perPage)->skip(30 * ($page - 1));
 
 			$tracks = [];
 			$ids = [];
@@ -73,7 +74,7 @@
 				$ids[] = $track->id;
 			}
 
-			return Response::json(["tracks" => $tracks, "current_page" => $page, "total_pages" => ceil($totalCount / 30)], 200);
+			return Response::json(["tracks" => $tracks, "current_page" => $page, "total_pages" => ceil($totalCount / $perPage)], 200);
 		}
 
 		public function getOwned() {
diff --git a/app/library/Assets.php b/app/library/Assets.php
index 0f925a89..618dcc0e 100644
--- a/app/library/Assets.php
+++ b/app/library/Assets.php
@@ -47,6 +47,7 @@
 					new FileAsset('scripts/base/jquery-ui.js'),
 					new FileAsset('scripts/base/jquery.cookie.js'),
 					new FileAsset('scripts/base/jquery.colorbox.js'),
+					new FileAsset('scripts/base/jquery.viewport.js'),
 					new FileAsset('scripts/base/underscore.js'),
 					new FileAsset('scripts/base/moment.js'),
 					new FileAsset('scripts/base/soundmanager2-nodebug.js'),
diff --git a/app/views/shared/_app_layout.blade.php b/app/views/shared/_app_layout.blade.php
index 0af92848..7d086eaa 100644
--- a/app/views/shared/_app_layout.blade.php
+++ b/app/views/shared/_app_layout.blade.php
@@ -11,16 +11,16 @@
 	<div class="site-body">
 		<ul class="sidebar" ng-controller="sidebar">
 			@if (Auth::check())
-				<li ng-class="{selected: $state.includes('home')}"><a href="/">Dashboard <i class="icon-home"></i></a></li>
+				<li ng-class="{selected: stateIncludes('home')}"><a href="/">Dashboard <i class="icon-home"></i></a></li>
 			@else
-				<li ng-class="{selected: $state.includes('home')}"><a href="/">Home <i class="icon-home"></i></a></li>
+				<li ng-class="{selected: stateIncludes('home')}"><a href="/">Home <i class="icon-home"></i></a></li>
 			@endif
-			<li ng-class="{selected: $state.includes('content')}">
+			<li ng-class="{selected: stateIncludes('content')}">
 				<a href="/tracks">Discover <i class="icon-music"></i></a>
 			</li>
 
 			@if (Auth::check())
-				<li ng-class="{selected: $state.includes('account-content') || isActive('/account')}"><a href="/account/tracks">Account <i class="icon-user"></i></a></li>
+				<li ng-class="{selected: stateIncludes('account-content') || isActive('/account')}"><a href="/account/tracks">Account <i class="icon-user"></i></a></li>
 			@endif
 
 			<li ng-class="{selected: isActive('/about')}"><a href="/about">Meta <i class="icon-info"></i></a></li>
diff --git a/public/scripts/app/controllers/application.coffee b/public/scripts/app/controllers/application.coffee
index 6ea27402..71a5a37d 100644
--- a/public/scripts/app/controllers/application.coffee
+++ b/public/scripts/app/controllers/application.coffee
@@ -5,6 +5,7 @@ angular.module('ponyfm').controller "application", [
 		$scope.$state = $state
 		$scope.$stateParams = $stateParams
 		$loadingElement = null
+		loadingStateName = null
 
 		$rootScope.safeApply = (fn) ->
 			phase = $rootScope.$$phase
@@ -25,8 +26,20 @@ angular.module('ponyfm').controller "application", [
 				$loadingElement.removeClass 'loading'
 				$loadingElement = null
 
+		$scope.stateIncludes = (state) ->
+			if $loadingElement
+				newParts = state.split '.'
+				oldParts = loadingStateName.split '.'
+				for i in [0..newParts.length]
+					continue if !newParts[i]
+					return false if newParts[i] != oldParts[i]
+
+				return true
+			else
+				$state.includes(state)
+
 		statesPreloaded = {}
-		$scope.$on '$stateChangeStart', (e, newState, newParams, oldState) ->
+		$scope.$on '$stateChangeStart', (e, newState, newParams, oldState, oldParams) ->
 			return if !oldState || !newState.controller
 
 			preloader = window.pfm.preloaders[newState.controller]
@@ -37,6 +50,7 @@ angular.module('ponyfm').controller "application", [
 				return
 
 			e.preventDefault()
+			loadingStateName = newState.name
 
 			selector = ''
 			newParts = newState.name.split '.'
diff --git a/public/scripts/app/controllers/track.coffee b/public/scripts/app/controllers/track.coffee
index 3f953775..09410d9e 100644
--- a/public/scripts/app/controllers/track.coffee
+++ b/public/scripts/app/controllers/track.coffee
@@ -9,7 +9,6 @@ angular.module('ponyfm').controller "track", [
 	($scope, tracks, $state, playlists, auth, favourites, $dialog) ->
 		tracks.fetch($state.params.id).done (trackResponse) ->
 			$scope.track = trackResponse.track
-			$scope.trackArray = [$scope.track]
 
 		$scope.playlists = []
 
diff --git a/public/scripts/app/controllers/tracks-list.coffee b/public/scripts/app/controllers/tracks-list.coffee
index 79e35496..ca60a20e 100644
--- a/public/scripts/app/controllers/tracks-list.coffee
+++ b/public/scripts/app/controllers/tracks-list.coffee
@@ -2,10 +2,8 @@ window.pfm.preloaders['tracks-list'] = [
 	'tracks', '$state'
 	(tracks, $state) ->
 		tracks.loadFilters().then(->
-			if !tracks.mainQuery.hasLoadedFilters
-				tracks.mainQuery.fromFilterString($state.params.filter)
-			if $state.params.page
-				tracks.mainQuery.setPage $state.params.page
+			tracks.mainQuery.fromFilterString($state.params.filter)
+			tracks.mainQuery.setPage $state.params.page || 1
 
 			tracks.mainQuery.fetch()
 		)
diff --git a/public/scripts/app/controllers/tracks.coffee b/public/scripts/app/controllers/tracks.coffee
index c903af11..cd065811 100644
--- a/public/scripts/app/controllers/tracks.coffee
+++ b/public/scripts/app/controllers/tracks.coffee
@@ -23,6 +23,10 @@ angular.module('ponyfm').controller "tracks", [
 			$scope.query.setListFilter filter, id
 			$state.transitionTo 'content.tracks.list', {filter: $scope.query.toFilterString()}
 
+		$scope.clearFilter = (filter) ->
+			$scope.query.clearFilter filter
+			$state.transitionTo 'content.tracks.list', {filter: $scope.query.toFilterString()}
+
 		tracks.mainQuery.listen (searchResults) ->
 			$scope.tracks = searchResults.tracks
 			$scope.currentPage = parseInt(searchResults.current_page)
diff --git a/public/scripts/app/directives/player.coffee b/public/scripts/app/directives/player.coffee
index e1bf6c26..4cacc9f4 100644
--- a/public/scripts/app/directives/player.coffee
+++ b/public/scripts/app/directives/player.coffee
@@ -4,6 +4,7 @@ angular.module('ponyfm').directive 'pfmPlayer', () ->
 	restrict: 'E'
 	templateUrl: '/templates/directives/player.html'
 	scope: {}
+	replace: true
 
 	compile: (element) ->
 		$element = element
diff --git a/public/scripts/app/directives/scroll-recorder.coffee b/public/scripts/app/directives/scroll-recorder.coffee
new file mode 100644
index 00000000..130d40f5
--- /dev/null
+++ b/public/scripts/app/directives/scroll-recorder.coffee
@@ -0,0 +1,28 @@
+angular.module('ponyfm').directive 'pfmScrollRecorder', () ->
+	(scope, element, attrs) ->
+		timeout = null
+		onScroll = null
+		lastInView = null
+
+		element.scroll (e) ->
+			(window.clearTimeout timeout) if timeout
+			timeout = window.setTimeout (-> onScroll e), 500
+
+		onScroll = (e) -> scope.safeApply ->
+			items = element.find 'li:not(.empty)'
+			itemHeight = (items.eq 0).height()
+			itemsArray = items.get()
+
+			elementViewTop = element.offset().top
+			elementViewBottom = elementViewTop + element.height()
+
+			for i in [itemsArray.length - 1..0]
+				listItem = $ itemsArray[i]
+
+				listItemTop = listItem.offset().top + itemHeight
+				isInView = listItemTop > elementViewTop && listItemTop < elementViewBottom
+				if isInView
+					lastInView = listItem
+					break
+
+			scope.$emit 'element-in-view', angular.element(lastInView).scope()
\ No newline at end of file
diff --git a/public/scripts/app/directives/track-player.coffee b/public/scripts/app/directives/track-player.coffee
new file mode 100644
index 00000000..36ab3c4e
--- /dev/null
+++ b/public/scripts/app/directives/track-player.coffee
@@ -0,0 +1,13 @@
+angular.module('ponyfm').directive 'pfmTrackPlayer', () ->
+	restrict: 'E'
+	templateUrl: '/templates/directives/track-player.html'
+	scope:
+		track: '=track',
+		class: '@class'
+
+	controller: [
+		'$scope', 'player'
+		($scope, player) ->
+			$scope.play = () ->
+				player.playTracks [$scope.track], 0
+	]
\ No newline at end of file
diff --git a/public/scripts/app/services/tracks.coffee b/public/scripts/app/services/tracks.coffee
index f106bfa8..b6493c7f 100644
--- a/public/scripts/app/services/tracks.coffee
+++ b/public/scripts/app/services/tracks.coffee
@@ -12,7 +12,9 @@ angular.module('ponyfm').factory('tracks', [
 			constructor: (@availableFilters) ->
 				@filters = {}
 				@hasLoadedFilters = false
+				@resetFilters()
 
+			resetFilters: ->
 				_.each @availableFilters, (filter, name) =>
 					if filter.type == 'single'
 						@filters[name] = _.find filter.values, (f) -> f.isDefault
@@ -38,6 +40,19 @@ angular.module('ponyfm').factory('tracks', [
 				filter.selectedObject[id] = filterToAdd
 				filter.title = filterToAdd.title
 
+			clearFilter: (type) ->
+				@cachedDef = null
+				@page = 1
+				filter = @availableFilters[type]
+
+				if filter.type == 'single'
+					@filters[type] = _.find filter.values, (f) -> f.isDefault
+				else
+					currentFilter = @filters[type]
+					currentFilter.selectedArray = []
+					currentFilter.selectedObject = {}
+					currentFilter.title = 'Any'
+
 			toggleListFilter: (type, id) ->
 				@cachedDef = null
 				@page = 1
@@ -82,8 +97,10 @@ angular.module('ponyfm').factory('tracks', [
 
 			fromFilterString: (str) ->
 				@hasLoadedFilters = true
-				return if !str
-				filters = str.split '!'
+				@cachedDef = null
+				@resetFilters()
+
+				filters = (str || "").split '!'
 				for filter in filters
 					parts = filter.split '-'
 					name = parts[0]
@@ -91,7 +108,8 @@ angular.module('ponyfm').factory('tracks', [
 
 					if @availableFilters[name].type == 'single'
 						filterToSet = _.find @availableFilters[name].values, (f) -> f.query == parts[1]
-						filterToSet = _.find @availableFilters[name].values, (f) -> f.isDefault if filterToSet == null
+						filterToSet = (_.find @availableFilters[name].values, (f) -> f.isDefault) if filterToSet == null
+						@setFilter name, filterToSet
 					else
 						@toggleListFilter name, id for id in _.rest parts, 1
 
@@ -116,6 +134,7 @@ angular.module('ponyfm').factory('tracks', [
 					for listener in @listeners
 						listener tracks
 
+
 					trackDef.resolve tracks
 
 				trackDef.promise()
@@ -150,7 +169,7 @@ angular.module('ponyfm').factory('tracks', [
 					type: 'single'
 					values: [
 						{title: 'Newest to Oldest', query: '', isDefault: true, filter: 'order=created_at,desc'},
-						{title: 'Oldest to Newest', query: 'created_at,asc', isDefault: true, filter: 'order=created_at,asc'}
+						{title: 'Oldest to Newest', query: 'created_at,asc', isDefault: false, filter: 'order=created_at,asc'}
 					]
 
 				self.filters.genres =
diff --git a/public/scripts/base/jquery.viewport.js b/public/scripts/base/jquery.viewport.js
new file mode 100644
index 00000000..7826000f
--- /dev/null
+++ b/public/scripts/base/jquery.viewport.js
@@ -0,0 +1,58 @@
+/*
+ * Viewport - jQuery selectors for finding elements in viewport
+ *
+ * Copyright (c) 2008-2009 Mika Tuupola
+ *
+ * Licensed under the MIT license:
+ *   http://www.opensource.org/licenses/mit-license.php
+ *
+ * Project home:
+ *  http://www.appelsiini.net/projects/viewport
+ *
+ */
+(function($) {
+    
+    $.belowthefold = function(element, settings) {
+        var fold = $(window).height() + $(window).scrollTop();
+        return fold <= $(element).offset().top - settings.threshold;
+    };
+
+    $.abovethetop = function(element, settings) {
+        var top = $(window).scrollTop();
+        return top >= $(element).offset().top + $(element).height() - settings.threshold;
+    };
+    
+    $.rightofscreen = function(element, settings) {
+        var fold = $(window).width() + $(window).scrollLeft();
+        return fold <= $(element).offset().left - settings.threshold;
+    };
+    
+    $.leftofscreen = function(element, settings) {
+        var left = $(window).scrollLeft();
+        return left >= $(element).offset().left + $(element).width() - settings.threshold;
+    };
+    
+    $.inviewport = function(element, settings) {
+        return !$.rightofscreen(element, settings) && !$.leftofscreen(element, settings) && !$.belowthefold(element, settings) && !$.abovethetop(element, settings);
+    };
+    
+    $.extend($.expr[':'], {
+        "below-the-fold": function(a, i, m) {
+            return $.belowthefold(a, {threshold : 0});
+        },
+        "above-the-top": function(a, i, m) {
+            return $.abovethetop(a, {threshold : 0});
+        },
+        "left-of-screen": function(a, i, m) {
+            return $.leftofscreen(a, {threshold : 0});
+        },
+        "right-of-screen": function(a, i, m) {
+            return $.rightofscreen(a, {threshold : 0});
+        },
+        "in-viewport": function(a, i, m) {
+            return $.inviewport(a, {threshold : 0});
+        }
+    });
+
+    
+})(jQuery);
diff --git a/public/styles/components.less b/public/styles/components.less
index fc4d205f..3332bebb 100644
--- a/public/styles/components.less
+++ b/public/styles/components.less
@@ -20,6 +20,34 @@
 	margin-right: 10px;
 	line-height: normal;
 
+	> .btn {
+	  float: left;
+	  display: block;
+	}
+
+	> .btn + .btn {
+	  .transition(background 300ms ease-out);
+
+	  display: none;
+	  margin: 0px;
+	}
+
+	&.has-filter {
+	  > .btn {
+		background: @pfm-purple;
+		color: #fff;
+	  }
+
+	  > .btn + .btn {
+		display: block;
+		background: darken(@pfm-purple, 20%);
+
+		&:hover {
+		  background: darken(@pfm-purple, 40%);
+		}
+	  }
+	}
+
 	&.open {
 	  > .btn {
 		background: @pfm-purple;
@@ -320,7 +348,7 @@ html {
 
 	  li.active a {
 		background: @pfm-purple;
-		color: #ddd;
+		color: #fff;
 	  }
 	}
 
diff --git a/public/styles/layout.less b/public/styles/layout.less
index ca75eeb3..6ab882ec 100644
--- a/public/styles/layout.less
+++ b/public/styles/layout.less
@@ -7,14 +7,12 @@ html, body {
 
 html body {
   height: 100%;
-  background: @pfm-dark-grey;
+  background: #444;
   font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
 }
 
 header, .site-body {
-  .box-shadow(0 0 7px rgba(0, 0, 0, .3));
-  max-width: 1200px;
-  margin: auto;
+  .box-shadow(0 0 7px rgba(0, 0, 0, .6));
 }
 
 header {
@@ -50,9 +48,9 @@ header {
 }
 
 .sidebar {
+  background: @pfm-light-grey;
   width: @pfm-sidebar-size;
   height: 100%;
-  background: @pfm-light-grey;
   float: left;
   list-style: none;
   padding: 0px;
@@ -68,6 +66,7 @@ header {
 	  background: #fff;
 
 	  > a {
+		cursor: default;
 		color: #000;
 	  }
 	}
diff --git a/public/styles/tracks.less b/public/styles/tracks.less
index bc0c3abc..55e2cc7a 100644
--- a/public/styles/tracks.less
+++ b/public/styles/tracks.less
@@ -2,6 +2,8 @@
 @import-once 'mixins';
 @import-once 'variables';
 
+@icon-size: 42px;
+
 .tracks-listing.four-columns {
   li {
 	float: left;
@@ -23,9 +25,40 @@
   }
 }
 
-.tracks-listing {
-  @icon-size: 42px;
+.single-player, .tracks-listing li .image {
+  float: left;
+  width: @icon-size;
+  height: @icon-size;
+  position: relative;
 
+  .play-button {
+	.transition(background 250ms ease-out);
+
+	position: absolute;
+	top: 0px;
+	left: 0px;
+	width: 100%;
+	height: 100%;
+	line-height: 38px;
+	text-align: center;
+	font-size: 12pt;
+	color: #fff;
+	text-decoration: none;
+	background: rgba(0, 0, 0, .4);
+	display: none;
+
+	&:hover {
+	  background: rgba(0, 0, 0, .8);
+	}
+  }
+
+  img {
+	display: block;
+	width: 100%;
+  }
+}
+
+.tracks-listing {
   margin: 0px;
   padding: 0px;
   list-style: none;
@@ -34,44 +67,28 @@
 	.clearfix();
 	.box-sizing(border-box);
 
+	&.empty {
+	  .border-radius(0px);
+	  background: lighten(@pfm-purple, 30%);
+	  border: 1px solid lighten(@pfm-purple, 10%);
+	  color: lighten(@pfm-purple, 3%);
+	  float: none !important;
+	  width: auto !important;
+	  display: block;
+	  margin-top: 5px;
+	  padding: 5px;
+	  font-size: 9pt;
+
+	  &:hover {
+		background-color: lighten(@pfm-purple, 30%);
+	  }
+	}
+
 	line-height: normal;
 	margin: 5px 0px;
 	padding: 0px;
 	padding-right: 10px;
 
-	.image {
-	  float: left;
-	  width: @icon-size;
-	  height: @icon-size;
-	  position: relative;
-
-	  .play-button {
-		.transition(background 250ms ease-out);
-
-		position: absolute;
-		top: 0px;
-		left: 0px;
-		width: 100%;
-		height: 100%;
-		line-height: 38px;
-		text-align: center;
-		font-size: 12pt;
-		color: #fff;
-		text-decoration: none;
-		background: rgba(0, 0, 0, .4);
-		display: none;
-
-		&:hover {
-		  background: rgba(0, 0, 0, .8);
-		}
-	  }
-
-	  img {
-		display: block;
-		width: 100%;
-	  }
-	}
-
 	.icons {
 	  float: right;
 	  display: block;
diff --git a/public/templates/account/content/_layout.html b/public/templates/account/content/_layout.html
index e8ee9ddc..98762ac2 100644
--- a/public/templates/account/content/_layout.html
+++ b/public/templates/account/content/_layout.html
@@ -1,7 +1,7 @@
 <div>
 	<ul class="tabs">
-		<li ng-class="{active: $state.includes('account-content.tracks')}"><a href="/account/tracks">Tracks</a></li>
-		<li ng-class="{active: $state.includes('account-content.albums')}"><a href="/account/albums">Albums</a></li>
+		<li ng-class="{active: stateIncludes('account-content.tracks')}"><a href="/account/tracks">Tracks</a></li>
+		<li ng-class="{active: stateIncludes('account-content.albums')}"><a href="/account/albums">Albums</a></li>
 	</ul>
 
 	<ui-view></ui-view>
diff --git a/public/templates/account/favourites/_layout.html b/public/templates/account/favourites/_layout.html
index 1bd8e9c8..f3f83ba6 100644
--- a/public/templates/account/favourites/_layout.html
+++ b/public/templates/account/favourites/_layout.html
@@ -1,8 +1,8 @@
 <div>
 	<ul class="tabs">
-		<li ng-class="{active: $state.includes('account-favourites.tracks')}"><a href="/account/favourites">Tracks</a></li>
-		<li ng-class="{active: $state.includes('account-favourites.albums')}"><a href="/account/favourites/albums">Albums</a></li>
-		<li ng-class="{active: $state.includes('account-favourites.playlists')}"><a href="/account/favourites/playlists">Playlists</a></li>
+		<li ng-class="{active: stateIncludes('account-favourites.tracks')}"><a href="/account/favourites">Tracks</a></li>
+		<li ng-class="{active: stateIncludes('account-favourites.albums')}"><a href="/account/favourites/albums">Albums</a></li>
+		<li ng-class="{active: stateIncludes('account-favourites.playlists')}"><a href="/account/favourites/playlists">Playlists</a></li>
 	</ul>
 
 	<ui-view></ui-view>
diff --git a/public/templates/artists/_show_layout.html b/public/templates/artists/_show_layout.html
index 238862e5..bf441dc4 100644
--- a/public/templates/artists/_show_layout.html
+++ b/public/templates/artists/_show_layout.html
@@ -22,9 +22,9 @@
 		</h1>
 
 		<ul class="tabs">
-			<li ng-class="{active: $state.includes('artist.profile')}"><a href="{{artist.slug}}">Profile</a></li>
-			<li ng-class="{active: $state.includes('artist.content')}"><a href="{{artist.slug}}/content">Content</a></li>
-			<li ng-class="{active: $state.includes('artist.favourites')}"><a href="{{artist.slug}}/favourites">Favourites</a></li>
+			<li ng-class="{active: stateIncludes('artist.profile')}"><a href="{{artist.slug}}">Profile</a></li>
+			<li ng-class="{active: stateIncludes('artist.content')}"><a href="{{artist.slug}}/content">Content</a></li>
+			<li ng-class="{active: stateIncludes('artist.favourites')}"><a href="{{artist.slug}}/favourites">Favourites</a></li>
 		</ul>
 	</div>
 
diff --git a/public/templates/content/_layout.html b/public/templates/content/_layout.html
index 2076bd53..917f57a1 100644
--- a/public/templates/content/_layout.html
+++ b/public/templates/content/_layout.html
@@ -1,8 +1,8 @@
 <ul class="tabs">
-	<li ng-class="{active: $state.includes('content.tracks') || $state.includes('content.track')}"><a href="/tracks">Tracks</a></li>
-	<li ng-class="{active: $state.includes('content.artists') || $state.includes('content.artist')}"><a href="/artists">Artists</a></li>
-	<li ng-class="{active: $state.includes('content.albums') || $state.includes('content.album')}"><a href="/albums">Albums</a></li>
-	<li ng-class="{active: $state.includes('content.playlists') || $state.includes('content.playlist')}"><a href="/playlists">Playlists</a></li>
+	<li ng-class="{active: stateIncludes('content.tracks') || stateIncludes('content.track')}"><a href="/tracks">Tracks</a></li>
+	<li ng-class="{active: stateIncludes('content.artists') || stateIncludes('content.artist')}"><a href="/artists">Artists</a></li>
+	<li ng-class="{active: stateIncludes('content.albums') || stateIncludes('content.album')}"><a href="/albums">Albums</a></li>
+	<li ng-class="{active: stateIncludes('content.playlists') || stateIncludes('content.playlist')}"><a href="/playlists">Playlists</a></li>
 </ul>
 
 <ui-view></ui-view>
\ No newline at end of file
diff --git a/public/templates/directives/track-player.html b/public/templates/directives/track-player.html
new file mode 100644
index 00000000..528bd81f
--- /dev/null
+++ b/public/templates/directives/track-player.html
@@ -0,0 +1,7 @@
+<div class="single-player">
+	<a href="#" class="play-button" pfm-eat-click ng-click="play()">
+		<i class="icon-play" ng-show="!track.isPlaying"></i>
+		<i class="icon-pause" ng-hide="!track.isPlaying"></i>
+	</a>
+	<img ng-src="{{track.covers.thumbnail}}" />
+</div>
\ No newline at end of file
diff --git a/public/templates/tracks/search-list.html b/public/templates/tracks/search-list.html
index f02ba057..45e52838 100644
--- a/public/templates/tracks/search-list.html
+++ b/public/templates/tracks/search-list.html
@@ -1,3 +1,3 @@
 <div class="stretch-to-bottom">
-	<pfm-tracks-list tracks="tracks" class="two-columns"></pfm-tracks-list>
+	<pfm-tracks-list tracks="tracks" class="three-columns"></pfm-tracks-list>
 </div>
\ No newline at end of file
diff --git a/public/templates/tracks/search.html b/public/templates/tracks/search.html
index 551bd59b..f057b4e8 100644
--- a/public/templates/tracks/search.html
+++ b/public/templates/tracks/search.html
@@ -1,8 +1,9 @@
 <ul class="dropdowns">
-	<li class="dropdown">
-		<a class="dropdown-toggle btn" ng-class="{'btn-info': query.filters.trackTypes.selectedArray.length}">
-			Type: <strong class="ng-cloak">{{query.filters.trackTypes.title}}</strong>
+	<li class="dropdown" ng-class="{'has-filter': query.filters.trackTypes.selectedArray.length}">
+		<a class="dropdown-toggle btn">
+			Type: <strong>{{query.filters.trackTypes.title}}</strong>
 		</a>
+		<a class="btn" pfm-eat-click ng-click="clearFilter('trackTypes')"><i class="icon-remove"></i></a>
 		<ul class="dropdown-menu">
 			<li ng-repeat="type in filters.trackTypes.values" ng-class="{selected: query.isIdSelected('trackTypes', type.id)}">
 				<a class="dont-close" pfm-eat-click href="#" ng-click="toggleListFilter('trackTypes', type.id); $event.stopPropagation();"><i class="icon-plus"></i></a>
@@ -10,10 +11,11 @@
 			</li>
 		</ul>
 	</li>
-	<li class="dropdown">
-		<a class="dropdown-toggle btn" ng-class="{'btn-info': query.filters.showSongs.selectedArray.length}">
+	<li class="dropdown" ng-class="{'has-filter': query.filters.showSongs.selectedArray.length}">
+		<a class="dropdown-toggle btn">
 			Show Songs: <strong>{{query.filters.showSongs.title}}</strong>
 		</a>
+		<a class="btn" pfm-eat-click ng-click="clearFilter('showSongs')"><i class="icon-remove"></i></a>
 		<ul class="dropdown-menu">
 			<li ng-repeat="song in filters.showSongs.values" ng-class="{selected: query.isIdSelected('showSongs', song.id)}">
 				<a class="dont-close" pfm-eat-click href="#" ng-click="toggleListFilter('showSongs', song.id); $event.stopPropagation();"><i class="icon-plus"></i></a>
@@ -21,10 +23,11 @@
 			</li>
 		</ul>
 	</li>
-	<li class="dropdown">
-		<a class="dropdown-toggle btn" ng-class="{'btn-info': query.filters.genres.selectedArray.length}">
+	<li class="dropdown" ng-class="{'has-filter': query.filters.genres.selectedArray.length}">
+		<a class="dropdown-toggle btn">
 			Genre: <strong>{{query.filters.genres.title}}</strong>
 		</a>
+		<a class="btn" pfm-eat-click ng-click="clearFilter('genres')"><i class="icon-remove"></i></a>
 		<ul class="dropdown-menu">
 			<li ng-repeat="genre in filters.genres.values" ng-class="{selected: query.isIdSelected('genres', genre.id)}">
 				<a class="dont-close" pfm-eat-click href="#" ng-click="toggleListFilter('genres', genre.id); $event.stopPropagation();"><i class="icon-plus"></i></a>
@@ -32,20 +35,22 @@
 			</li>
 		</ul>
 	</li>
-	<li class="dropdown">
-		<a class="dropdown-toggle btn" ng-class="{'btn-info': !query.filters.isVocal.isDefault}">
+	<li class="dropdown" ng-class="{'has-filter': !query.filters.isVocal.isDefault}">
+		<a class="dropdown-toggle btn">
 			Is Vocal: <strong>{{query.filters.isVocal.title}}</strong>
 		</a>
+		<a class="btn" pfm-eat-click ng-click="clearFilter('isVocal')"><i class="icon-remove"></i></a>
 		<ul class="dropdown-menu">
 			<li ng-repeat="item in filters.isVocal.values" ng-class="{selected: item == query.filters.isVocal}">
 				<a pfm-eat-click href="#" ng-click="setFilter('isVocal', item);">{{item.title}}</a>
 			</li>
 		</ul>
 	</li>
-	<li class="dropdown">
-		<a class="dropdown-toggle btn" ng-class="{'btn-info': !query.filters.sort.isDefault}">
+	<li class="dropdown" ng-class="{'has-filter': !query.filters.sort.isDefault}">
+		<a class="dropdown-toggle btn">
 			Order: <strong>{{query.filters.sort.title}}</strong>
 		</a>
+		<a class="btn" pfm-eat-click ng-click="clearFilter('sort')"><i class="icon-remove"></i></a>
 		<ul class="dropdown-menu">
 			<li ng-repeat="filter in filters.sort.values" ng-class="{selected: filter == query.filters.sort}">
 				<a pfm-eat-click href="#" ng-click="setFilter('sort', filter)">{{filter.title}}</a>
diff --git a/public/templates/tracks/show.html b/public/templates/tracks/show.html
index 860d4dcd..5a7cb71f 100644
--- a/public/templates/tracks/show.html
+++ b/public/templates/tracks/show.html
@@ -1,10 +1,4 @@
 <div class="track-details" xmlns="http://www.w3.org/1999/html">
-	<ul class="breadcrumb">
-		<li><a href="/tracks">Tracks</a> <span class="divider">/</span></li>
-		<li><a href="/tracks?filter=genres-{{track.genre.id}}">{{track.genre.name}}</a> <span class="divider">/</span></li>
-		<li class="active">{{track.title}}</li>
-	</ul>
-
 	<div class="track-toolbar btn-group pull-right">
 		<pfm-favourite-button resource="track" type="track"></pfm-favourite-button>
 		<div class="dropdown">
@@ -31,7 +25,7 @@
 		</div>
 	</div>
 
-	<pfm-tracks-list tracks="trackArray"></pfm-tracks-list>
+	<pfm-track-player track="track"></pfm-track-player>
 	<h1>
 		{{track.title}}
 		<span class="subtitle">