Just some styling

app/controllers/Api/Web/DashboardController.php

@@ -0,0 +1,58 @@
+<?php
+
+	namespace Api\Web;
+
+	use Commands\DeleteTrackCommand;
+	use Commands\EditTrackCommand;
+	use Commands\UploadTrackCommand;
+	use Cover;
+	use Entities\Image;
+	use Entities\Track;
+	use Illuminate\Support\Facades\Auth;
+	use Illuminate\Support\Facades\Input;
+	use Illuminate\Support\Facades\Response;
+
+	class DashboardController extends \ApiControllerBase {
+		public function getIndex() {
+			$query = Track::summary()->with(['genre', 'user', 'cover'])->whereNotNull('published_at')->orderBy('published_at', 'desc')->take(15);
+			if (!Auth::check() || !Auth::user()->can_see_explicit_content)
+				$query->whereIsExplicit(false);
+
+			$tracks = [];
+
+			foreach ($query->get() as $track) {
+				$tracks[] = [
+					'id' => $track->id,
+					'title' => $track->title,
+					'user' => [
+						'id' => $track->user->id,
+						'name' => $track->user->display_name,
+						'url' => $track->user->url
+					],
+					'url' => $track->url,
+					'slug' => $track->slug,
+					'is_vocal' => $track->is_vocal,
+					'is_explicit' => $track->is_explicit,
+					'is_downloadable' => $track->is_downloadable,
+					'is_published' => $track->isPublished(),
+					'published_at' => $track->published_at,
+					'duration' => $track->duration,
+					'genre' => [
+						'id' => $track->genre->id,
+						'slug' => $track->genre->slug,
+						'name' => $track->genre->name
+					],
+					'track_type_id' => $track->track_type_id,
+					'covers' => [
+						'thumbnail' => $track->getCoverUrl(Image::THUMBNAIL),
+						'small' => $track->getCoverUrl(Image::SMALL),
+						'normal' => $track->getCoverUrl(Image::NORMAL)
+					]
+				];
+			}
+
+			return Response::json([
+				'recent_tracks' => $tracks,
+				'popular_tracks' => $tracks], 200);
+		}
+	}

app/controllers/Api/Web/TracksController.php

@@ -26,8 +26,49 @@
 			return $this->execute(new EditTrackCommand($id, Input::all()));
 		}
 
+		public function getRecent() {
+			$query = Track::summary()->with(['genre', 'user', 'cover'])->whereNotNull('published_at')->orderBy('published_at', 'desc')->take(15);
+			if (!Auth::check() || !Auth::user()->can_see_explicit_content)
+				$query->whereIsExplicit(false);
+
+			$tracks = [];
+
+			foreach ($query->get() as $track) {
+				$tracks[] = [
+					'id' => $track->id,
+					'title' => $track->title,
+					'user' => [
+						'id' => $track->user->id,
+						'name' => $track->user->display_name,
+						'url' => $track->user->url
+					],
+					'url' => $track->url,
+					'slug' => $track->slug,
+					'is_vocal' => $track->is_vocal,
+					'is_explicit' => $track->is_explicit,
+					'is_downloadable' => $track->is_downloadable,
+					'is_published' => $track->isPublished(),
+					'published_at' => $track->published_at,
+					'duration' => $track->duration,
+					'genre' => [
+						'id' => $track->genre->id,
+						'slug' => $track->genre->slug,
+						'name' => $track->genre->name
+					],
+					'track_type_id' => $track->track_type_id,
+					'covers' => [
+						'thumbnail' => $track->getCoverUrl(Image::THUMBNAIL),
+						'small' => $track->getCoverUrl(Image::SMALL),
+						'normal' => $track->getCoverUrl(Image::NORMAL)
+					]
+				];
+			}
+
+			return Response::json($tracks, 200);
+		}
+
 		public function getOwned() {
-			$query = Track::summary()->whereNull('deleted_at')->where('user_id', \Auth::user()->id);
+			$query = Track::summary()->where('user_id', \Auth::user()->id);
 
 			if (Input::has('published')) {
 				$published = \Input::get('published');

app/library/Assets.php

@@ -47,6 +47,7 @@
 					new FileAsset('scripts/base/jquery-ui.js'),
 					new FileAsset('scripts/base/jquery.colorbox.js'),
 					new FileAsset('scripts/base/underscore.js'),
+					new FileAsset('scripts/base/moment.js'),
 					new FileAsset('scripts/base/angular.js'),
 					new FileAsset('scripts/base/ui-bootstrap-tpls-0.4.0.js'),
 					new FileAsset('scripts/base/angular-ui-sortable.js'),

app/models/Entities/Track.php

@@ -6,6 +6,7 @@
 	use External;
 	use getid3_writetags;
 	use Illuminate\Support\Facades\Log;
+	use Illuminate\Support\Facades\URL;
 	use Illuminate\Support\Str;
 	use Whoops\Example\Exception;
 	use Traits\SlugTrait;
@@ -53,6 +54,10 @@
 			return date('Y', strtotime($this->release_date));
 		}
 
+		public function getUrlAttribute() {
+			return URL::to('/tracks/' . $this->id . '/' . $this->slug);
+		}
+
 		public function getReleaseDate() {
 			if($this->attributes['released_at'] !== NULL)
 				return $this->attributes['released_at'];

app/models/Entities/User.php

@@ -7,6 +7,7 @@
 	use Illuminate\Auth\UserInterface;
 	use Illuminate\Auth\Reminders\RemindableInterface;
 	use Illuminate\Support\Facades\URL;
+	use Illuminate\Support\Str;
 	use Ratchet\Wamp\Exception;
 
 	class User extends \Eloquent implements UserInterface, RemindableInterface {
@@ -17,6 +18,10 @@
 			return $this->belongsTo('Entities\Image');
 		}
 
+		public function getUrlAttribute() {
+			return URL::to('/' . $this->slug);
+		}
+
 		public function getAuthIdentifier() {
 			return $this->getKey();
 		}
@@ -29,6 +34,11 @@
 			return $this->email;
 		}
 
+		public function setDisplayName($value) {
+			$this->attributes['display_name'] = $value;
+			$this->attributes['slug'] = Str::slug($value);
+		}
+
 		public function getAvatarUrl($type = Image::NORMAL) {
 			if (!$this->uses_gravatar)
 				return $this->avatar->getUrl();

app/routes.php

@@ -11,6 +11,7 @@
 |
 */
 
+	Route::get('/dashboard', 'TracksController@getIndex');
 	Route::get('/tracks', 'TracksController@getIndex');
 	Route::get('/tracks/popular', 'TracksController@getIndex');
 	Route::get('/tracks/random', 'TracksController@getIndex');
@@ -38,6 +39,10 @@
 
 		Route::get('/playlists/show/{id}', 'Api\Web\PlaylistsController@getShow');
 
+		Route::get('/tracks/recent', 'Api\Web\TracksController@getRecent');
+
+		Route::get('/dashboard', 'Api\Web\DashboardController@getIndex');
+
 		Route::group(['before' => 'auth|csrf'], function() {
 			Route::post('/tracks/upload', 'Api\Web\TracksController@postUpload');
 			Route::post('/tracks/delete/{id}', 'Api\Web\TracksController@postDelete');

app/views/shared/_app_layout.blade.php

@@ -29,6 +29,12 @@
 		<section class="sidebar" ng-controller="sidebar">
 			<nav>
 				<ul>
+					@if (Auth::check())
+						<li ng-class="{selected: $state.includes('home')}"><a href="/">Dashboard</a></li>
+					@else
+						<li ng-class="{selected: $state.includes('home')}"><a href="/">Home</a></li>
+					@endif
+					<li><a href="/tracks">Now Playing</a></li>
 					<li><h3>Discover</h3></li>
 					<li ng-class="{selected: $state.includes('tracks')}"><a href="/tracks">Music <i class="icon-music"></i></a></li>
 					<li ng-class="{selected: $state.includes('albums')}"><a href="/albums">Albums <i class="icon-music"></i></a></li>

app/views/shared/_layout.blade.php

@@ -11,8 +11,10 @@
 		@yield('styles')
 	</head>
 	<body ng-app="ponyfm" ng-controller="application" uploader>
+		<div class="background-color"></div>
+		<div class="background-two"></div>
+		<div class="background-one"></div>
 		@yield('content')
-
 		@yield('scripts')
 	</body>
 </html>

public/scripts/app/app.coffee

@@ -63,20 +63,8 @@ angular.module 'ponyfm', ['ui.bootstrap', 'ui.state', 'ui.date', 'ui.sortable'],
 
 		state.state 'tracks',
 			url: '/tracks'
-			templateUrl: '/templates/tracks/_layout.html'
-			abstract: true
-
-		state.state 'tracks.list',
-			url: ''
-			templateUrl: '/templates/tracks/index.html'
-
-		state.state 'tracks.random',
-			url: '/random'
-			templateUrl: '/templates/tracks/index.html'
-
-		state.state 'tracks.popular',
-			url: '/popular'
 			templateUrl: '/templates/tracks/index.html'
+			controller: 'tracks'
 
 		# Albums
 
@@ -124,9 +112,15 @@ angular.module 'ponyfm', ['ui.bootstrap', 'ui.state', 'ui.date', 'ui.sortable'],
 
 		# Hompage
 
-		state.state 'home',
+		if window.pfm.auth.isLogged
-			url: '/'
+			state.state 'home',
-			templateUrl: '/templates/home/index.html'
+				url: '/'
+				templateUrl: '/templates/dashboard.html'
+				controller: 'dashboard'
+		else
+			state.state 'home',
+				url: '/'
+				templateUrl: '/templates/home/index.html'
 
 		route.otherwise '/'
 

public/scripts/app/controllers/account-playlists.coffee

@@ -32,7 +32,6 @@ angular.module('ponyfm').controller "account-playlists", [
 					$scope.playlists.splice _.indexOf($scope.playlists, (p) -> p.id == playlist.id), 1
 
 		$scope.$on 'playlist-updated', (e, playlist) ->
-			console.log playlist
 			index = _.indexOf($scope.playlists, (p) -> p.id == playlist.id)
 			content = $scope.playlists[index]
 			_.each playlist, (value, name) -> content[name] = value

public/scripts/app/controllers/dashboard.coffee

@@ -0,0 +1,14 @@
+angular.module('ponyfm').controller "dashboard", [
+	'$scope'
+	($scope) ->
+		$scope.recentTracks = null
+		$scope.popularTracks = null
+
+		$scope.refresh = () ->
+			$.getJSON('/api/web/dashboard')
+				.done (res) -> $scope.$apply ->
+					$scope.recentTracks = res.recent_tracks
+					$scope.popularTracks = res.popular_tracks
+
+		$scope.refresh()
+]

public/scripts/app/controllers/sidebar.coffee

@@ -1,7 +1,6 @@
 angular.module('ponyfm').controller "sidebar", [
 	'$scope', '$dialog', 'playlists'
 	($scope, $dialog, playlists) ->
-
 		$scope.playlists = playlists.pinnedPlaylists
 
 		$scope.createPlaylist = () ->

public/scripts/app/controllers/tracks.coffee

@@ -0,0 +1,12 @@
+angular.module('ponyfm').controller "tracks", [
+	'$scope'
+	($scope) ->
+		$scope.recentTracks = null
+
+		$scope.refresh = () ->
+			$.getJSON('/api/web/tracks/recent')
+				.done (res) -> $scope.$apply ->
+					$scope.recentTracks = res
+
+		$scope.refresh()
+]

public/scripts/app/filters/moment-from-now.coffee

@@ -0,0 +1,3 @@
+angular.module('ponyfm').filter 'momentFromNow', () ->
+	(input) ->
+		moment(input).fromNow()

public/scripts/shared/layout.coffee

@@ -7,6 +7,12 @@ window.handleResize = () ->
 		$this = $ this
 		$this.height windowHeight - $this.offset().top
 
+	backgroundOne = $ '.background-one'
+	backgroundTwo = $ '.background-two'
+
+	backgroundOne.css 'left', $('.site-content ').offset().left - backgroundOne.width()
+	backgroundTwo.css 'left', $('.site-content').offset().left + $('.site-content').width()
+
 window.alignVertically = (element) ->
 	$element = $(element)
 	$parent = $element.parent()

public/styles/account-content.less

@@ -16,7 +16,6 @@
 }
 
 .account-settings-form {
-  margin: 10px;
 }
 
 ul.playlists {

public/styles/app.less

@@ -5,4 +5,5 @@
 @import 'home';
 @import 'account-content';
 @import 'components';
-@import 'forms';
+@import 'forms';
+@import 'tracks';

public/styles/components.less

@@ -62,7 +62,8 @@ html .dropdown-menu {
   margin: 10px 0px;
 
   > li {
-	margin: 0px 5px;
+	margin: 0px;
+	margin-right: 5px;
 	padding: 0px;
 	float: left;
 

public/styles/forms.less

@@ -10,6 +10,11 @@
 	  padding: 3px;
 	  font-size: 8pt;
 	}
+
+	.alert {
+	  padding: 3px;
+	  font-size: 8pt;
+	}
   }
 
   .has-error {

public/styles/layout.less

@@ -6,9 +6,42 @@ html, body {
 }
 
 html body {
-  background: #2D2D2D;
   height: 100%;
   font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
+  background: url('http://mlpforums.com/public/style_images/mlp/bg1.png');
+}
+
+.background-color {
+  background: rgba(42, 42, 42, 1);
+  position: fixed;
+  left: 0px;
+  top: 0px;
+  width: 50%;
+  height: 100%;
+  z-index: -5;
+}
+
+.background-one, .background-two {
+  z-index: -4;
+  background-repeat: no-repeat;
+  background-position: bottom right;
+  height: 100%;
+  width: 350px;
+  position: fixed;
+  background-size: 35%;
+}
+
+html .background-one {
+  background-image: url('/images/octavia.png');
+  background-position: bottom right;
+  opacity: .1;
+}
+
+html .background-two {
+  background-image: url('/images/vinyl.png');
+  background-position: bottom left;
+  opacity: .1;
+  display: none;
 }
 
 .site-content {
@@ -44,6 +77,7 @@ html body {
 
 header {
   .clearfix();
+  background: #222;
 
   > div {
 	max-width: 1200px;
@@ -75,7 +109,8 @@ header {
   .now-playing {
 	.clearfix();
 	margin-top: 5px;
-	margin-left: 144px;
+	padding-left: 5px;
+	margin-left: 149px;
 	background: #222;
 
 	.current-track {
@@ -90,6 +125,7 @@ header {
 	}
 
 	.transport {
+	  display: none;
 	  margin-top: 5px;
 	  margin-left: 6px;
 	  height: 5px;
@@ -239,14 +275,13 @@ header {
 	float: left;
 	width: 148px;
 	z-index: 2000;
-	background: #2D2D2D;
 
 	nav {
 	  h3 {
 		color: rgba(255, 255, 255, .6);
 		font-size: 12px;
 		padding: 5px;
-		background: rgba(0, 0, 0, .4);
+		background: #222;
 		line-height: normal;
 		font-weight: bold;
 		margin: 0px;
@@ -358,39 +393,50 @@ header {
 
   .site-content {
 	overflow: hidden;
-	border: 2px solid #222;
+	border: 5px solid #222;
 	border-top: none;
 	border-bottom: none;
-	.box-sizing(border-box);
 
 	height: 100%;
 	margin-left: 148px;
 
 	> div {
+	  .box-sizing(border-box);
 	  overflow: hidden;
 	  width: 100%;
 	  height: 100%;
 	  background: #fff;
+	  padding: 0px 15px;
+	  padding-top: 10px;
 	}
   }
 }
 
 .site-content {
   h1 {
-	padding: 5px 15px;
+	border: none;
-	color: #000;
+	background: none;
-	border-bottom: 2px solid #fd8500;
+	color: #747474;
-	margin-bottom: -2px;
+	font-weight: 300;
-	font-size: 12pt;
+	font-size: 24px;
-	margin: 0px;
 	line-height: normal;
 	font-weight: normal;
+	margin: 0px;
+	padding: 5px 0px;
+
+	a {
+	  display: block;
+	  float: right;
+	  font-size: 10pt;
+	  margin-top: 8px;
+	  text-decoration: none;
+	}
   }
 
   > div > .tabs {
 	.clearfix();
 	list-style: none;
-	border-bottom: 2px solid #ddd;
+	border-bottom: 4px solid #ddd;
 	margin: 0px;
 	padding: 0px;
 
@@ -401,26 +447,26 @@ header {
 
 	  a {
 		display: block;
-		float: left;
+		border: none;
-		padding: 5px 15px;
+		background: none;
-		color: #9c9c9c;
+		color: #747474;
-		font-size: 12pt;
+		font-weight: 300;
+		font-size: 15px;
+		line-height: normal;
+		font-weight: normal;
+		padding: 5px 10px;
 
 		&:hover {
 		  color: #000;
 		  text-decoration: none;
-		  border-bottom: 2px solid #fd8500;
-		  margin-bottom: -2px;
 		}
 	  }
 
 	  &.active {
-		#gradient>.vertical(#ddd, #eee);
-
 		a {
 		  color: #000;
-		  border-bottom: 2px solid orange;
+		  border-bottom: 4px solid orange;
-		  margin-bottom: -2px;
+		  margin-bottom: -4px;
 		  cursor: default;
 		}
 	  }

public/styles/tracks.less

@@ -0,0 +1,81 @@
+@import 'base/bootstrap/bootstrap';
+@import 'mixins';
+
+.dashboard {
+  section {
+	.box-sizing(border-box);
+
+	width: 50%;
+	float: left;
+
+	&:first-child {
+	  padding-right: 10px;
+	}
+
+	&:last-child {
+	  padding-left: 10px;
+	}
+  }
+}
+
+.tracks-listing {
+  overflow-y: auto;
+  margin: 0px;
+  padding: 0px;
+  list-style: none;
+
+  li {
+	overflow: hidden;
+	margin: 5px 0px;
+	padding: 0px;
+	padding-bottom: 5px;
+
+	img {
+	  .img-polaroid();
+	  padding: 3px;
+	  padding: 0px;
+	  display: block;
+	  height: 40px;
+	  width: 40px;
+	  float: left;
+	}
+
+	.icons {
+	  float: right;
+	  font-size: 13px;
+
+	  a, span {
+		display: block;
+		float: left;
+		margin: 0px 3px;
+	  }
+
+	  .icon-microphone-off {
+		opacity: .5;
+	  }
+	}
+
+	.info {
+	  margin-left: 51px;
+	  line-height: normal;
+
+	  .title {
+		.ellipsis();
+		display: block;
+		text-decoration: none;
+		color: @blue;
+	  }
+
+	  .metadata {
+		margin-top: 3px;
+		display: block;
+		color: #777;
+		font-size: 8pt;
+
+		a {
+		  color: fadeOut(@blue, 10%);
+		}
+	  }
+	}
+  }
+}

public/templates/account/content/album.html

@@ -39,7 +39,7 @@
 				<li ng-repeat="track in tracks">
 					<div>
 						<span class="btn btn-small pull-left handle"><i class="icon-sort"></i></span>
-						<a href="#" class="btn btn-small pull-right" ng-click="toggleTrack(track)" pfm-eat-click><i class="icon-remove"></i></a>
+						<a href="#" class="btn btn-small pull-right btn-danger" ng-click="toggleTrack(track)" pfm-eat-click><i class="icon-remove"></i></a>
 						<span>{{track.title}}</span>
 					</div>
 				</li>

public/templates/dashboard.html

@@ -0,0 +1,53 @@
+<div class="dashboard">
+	<section class="recent-tracks">
+		<div>
+			<h1>
+				<a href="#"><i class="icon-music"></i> see more</a>
+				The Newest Tunes
+			</h1>
+			<ul class="tracks-listing stretch-to-bottom">
+				<li ng-repeat="track in recentTracks">
+					<img ng-src="{{track.covers.thumbnail}}" />
+					<div class="icons">
+						<span><i ng-class="{'icon-microphone-off': !track.is_vocal, 'icon-microphone': track.is_vocal}"></i></span>
+						<a href="#"><i class="icon-star-empty"></i></a>
+					</div>
+					<div class="info">
+						<a href="{{track.url}}" class="title">{{track.title}}</a>
+							<span class="metadata">
+								by: <a href="{{track.user.url}}">{{track.user.name}}</a> /
+								<a href="#">{{track.genre.name}}</a> /
+								{{track.published_at.date | momentFromNow}}
+							</span>
+						</a>
+					</div>
+				</li>
+			</ul>
+		</div>
+	</section>
+	<section class="popular">
+		<div>
+			<h1>
+				<a href="#"><i class="icon-star"></i> see more</a>
+				What's Popular Today
+			</h1>
+			<ul class="tracks-listing stretch-to-bottom">
+				<li ng-repeat="track in recentTracks">
+					<img ng-src="{{track.covers.thumbnail}}" />
+					<div class="icons">
+						<span><i ng-class="{'icon-microphone-off': !track.is_vocal, 'icon-microphone': track.is_vocal}"></i></span>
+						<a href="#"><i class="icon-star-empty"></i></a>
+					</div>
+					<div class="info">
+						<a href="{{track.url}}" class="title">{{track.title}}</a>
+							<span class="metadata">
+								by: <a href="{{track.user.url}}">{{track.user.name}}</a> /
+								<a href="#">{{track.genre.name}}</a> /
+								{{track.published_at.date | momentFromNow}}
+							</span>
+					</div>
+				</li>
+			</ul>
+		</div>
+	</section>
+</div>

public/templates/tracks/_layout.html

@@ -1,14 +0,0 @@
-<div>
-	<ul class="tabs">
-		<li ng-class="{active: $state.includes('tracks.list')}"><a href="/tracks">Tracks</a></li>
-		<li ng-class="{active: $state.includes('tracks.popular')}"><a href="/tracks/popular">Popular</a></li>
-		<li ng-class="{active: $state.includes('tracks.random')}"><a href="/tracks/random">Random</a></li>
-	</ul>
-
-	<ui-view></ui-view>
-
-	<pre>
-		$state = {{$state.current.name}}
-		$stateParams = {{$stateParams}}
-	</pre>
-</div>

public/templates/tracks/index.html

@@ -1 +1,52 @@
-<h1>tracks?</h1>
+<div class="dashboard">
+	<section class="recent-tracks">
+		<div>
+			<h1>
+				<a href="#"><i class="icon-music"></i> see more</a>
+				The Newest Tunes
+			</h1>
+			<ul class="tracks-listing stretch-to-bottom">
+				<li ng-repeat="track in recentTracks">
+					<img ng-src="{{track.covers.thumbnail}}" />
+					<div class="icons">
+						<span><i ng-class="{'icon-microphone-off': !track.is_vocal, 'icon-microphone': track.is_vocal}"></i></span>
+						<a href="#"><i class="icon-star-empty"></i></a>
+					</div>
+					<div class="info">
+						<a href="{{track.url}}" class="title">{{track.title}}</a>
+							<span class="metadata">
+								by: <a href="{{track.user.url}}">{{track.user.name}}</a> /
+								<a href="#">{{track.genre.name}}</a> /
+								{{track.published_at.date | momentFromNow}}
+							</span>
+					</div>
+				</li>
+			</ul>
+		</div>
+	</section>
+	<section class="popular">
+		<div>
+			<h1>
+				<a href="#"><i class="icon-star"></i> see more</a>
+				What's Popular Today
+			</h1>
+			<ul class="tracks-listing stretch-to-bottom">
+				<li ng-repeat="track in recentTracks">
+					<img ng-src="{{track.covers.thumbnail}}" />
+					<div class="icons">
+						<span><i ng-class="{'icon-microphone-off': !track.is_vocal, 'icon-microphone': track.is_vocal}"></i></span>
+						<a href="#"><i class="icon-star-empty"></i></a>
+					</div>
+					<div class="info">
+						<a href="{{track.url}}" class="title">{{track.title}}</a>
+							<span class="metadata">
+								by: <a href="{{track.user.url}}">{{track.user.name}}</a> /
+								<a href="#">{{track.genre.name}}</a> /
+								{{track.published_at.date | momentFromNow}}
+							</span>
+					</div>
+				</li>
+			</ul>
+		</div>
+	</section>
+</div>