Homepage, google analytics, basic responsiveness

app/library/Assets.php

@@ -57,6 +57,7 @@
 					new FileAsset('scripts/base/angular-ui-sortable.js'),
 					new FileAsset('scripts/base/angular-ui-date.js'),
 					new FileAsset('scripts/base/angular-ui-router.js'),
+					new FileAsset('scripts/base/angularytics.js'),
 					new AssetCollection([
 						new GlobAsset('scripts/shared/*.coffee'),
 						new GlobAsset('scripts/shared/*.js'),

app/models/Entities/Track.php

@@ -68,22 +68,17 @@
 					->groupBy('id')
 					->orderBy('plays', 'desc')
 					->take(20);
-				return $query->get(['*', DB::raw('count(*) as plays')]);
+
+				$results = [];
+
+				foreach($query->get(['*', DB::raw('count(*) as plays')]) as $track) {
+					$results[] = self::mapPublicTrackSummary($track);
+				}
+
+				return $results;
 			});
 
-			$results = [];
+			return $tracks;
-			$i = 0;
-
-			foreach($tracks as $track) {
-				if ($i < $count) {
-					$results[] = self::mapPublicTrackSummary($track);
-					$i++;
-				} else {
-					break;
-				}
-			}
-
-			return $results;
 		}
 
 		public static function mapPublicTrackShow($track) {

app/views/shared/_app_layout.blade.php

@@ -54,8 +54,8 @@
 			</li>
 
 			@if (Auth::check())
-				<li ng-class="{selected: stateIncludes('account')}"><a href="/account/tracks">Account <i class="icon-user"></i></a></li>
 				<li ng-class="{selected: stateIncludes('favourites')}"><a href="/account/favourites/tracks">Favourites <i class="icon-star"></i></a></li>
+				<li ng-class="{selected: stateIncludes('account')}"><a href="/account/tracks">Account <i class="icon-user"></i></a></li>
 			@endif
 
 			<li ng-class="{selected: isActive('/about')}"><a href="/about">About <i class="icon-info"></i></a></li>
@@ -103,6 +103,20 @@
 		};
 	</script>
 
+	<script>
+		{{-- Google Analytics --}}
+		var _gaq = _gaq || [];
+		_gaq.push(['_setAccount', 'UA-29463256-1']);
+		_gaq.push(['_setDomainName', 'pony.fm']);
+		_gaq.push(['_trackPageview']);
+
+		(function() {
+			var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+			ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+			var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+		})();
+	</script>
+
 	{{ Assets::scriptIncludes() }}
 
 	<script src="http://platform.tumblr.com/v1/share.js"></script>

public/scripts/app/app.coffee

@@ -1,10 +1,18 @@
 window.pfm.preloaders = {}
 
-module = angular.module 'ponyfm', ['ui.bootstrap', 'ui.state', 'ui.date', 'ui.sortable', 'pasvaz.bindonce']
+module = angular.module 'ponyfm', ['ui.bootstrap', 'ui.state', 'ui.date', 'ui.sortable', 'pasvaz.bindonce', 'angularytics']
+
+module.run [
+	'Angularytics',
+	(analyitcs) ->
+		analyitcs.init()
+]
 
 module.config [
-	'$locationProvider', '$stateProvider', '$dialogProvider'
+	'$locationProvider', '$stateProvider', '$dialogProvider', 'AngularyticsProvider'
-	(location, state, $dialogProvider) ->
+	(location, state, $dialogProvider, analytics) ->
+
+		analytics.setEventHandlers ['Google']
 
 		# Upload
 
@@ -178,6 +186,7 @@ module.config [
 			state.state 'home',
 				url: '/'
 				templateUrl: '/templates/home/index.html'
+				controller: 'home'
 
 		# Final catch-all for aritsts
 		state.state 'content.artist',

public/scripts/app/controllers/home.coffee

@@ -0,0 +1,15 @@
+window.pfm.preloaders['home'] = [
+	'dashboard'
+	(dashboard) -> dashboard.refresh(true)
+]
+
+angular.module('ponyfm').controller "home", [
+	'$scope', 'dashboard'
+	($scope, dashboard) ->
+		$scope.recentTracks = null
+		$scope.popularTracks = null
+
+		dashboard.refresh().done (res) ->
+			$scope.recentTracks = res.recent_tracks
+			$scope.popularTracks = res.popular_tracks
+]

public/scripts/base/angularytics.js

@@ -0,0 +1,122 @@
+(function () {
+  angular.module('angularytics', []).provider('Angularytics', function () {
+    var eventHandlersNames = ['Google'];
+    this.setEventHandlers = function (handlers) {
+      if (angular.isString(handlers)) {
+        handlers = [handlers];
+      }
+      eventHandlersNames = [];
+      angular.forEach(handlers, function (handler) {
+        eventHandlersNames.push(capitalizeHandler(handler));
+      });
+    };
+    var capitalizeHandler = function (handler) {
+      return handler.charAt(0).toUpperCase() + handler.substring(1);
+    };
+    var pageChangeEvent = '$locationChangeSuccess';
+    this.setPageChangeEvent = function (newPageChangeEvent) {
+      pageChangeEvent = newPageChangeEvent;
+    };
+    this.$get = [
+      '$injector',
+      '$rootScope',
+      '$location',
+      function ($injector, $rootScope, $location) {
+        var eventHandlers = [];
+        angular.forEach(eventHandlersNames, function (handler) {
+          eventHandlers.push($injector.get('Angularytics' + handler + 'Handler'));
+        });
+        var forEachHandlerDo = function (action) {
+          angular.forEach(eventHandlers, function (handler) {
+            action(handler);
+          });
+        };
+        $rootScope.$on(pageChangeEvent, function () {
+          forEachHandlerDo(function (handler) {
+            var url = $location.path();
+            if (url) {
+              handler.trackPageView(url);
+            }
+          });
+        });
+        var service = {};
+        service.init = function () {
+        };
+        service.trackEvent = function (category, action, opt_label, opt_value, opt_noninteraction) {
+          forEachHandlerDo(function (handler) {
+            if (category && action) {
+              handler.trackEvent(category, action, opt_label, opt_value, opt_noninteraction);
+            }
+          });
+        };
+        return service;
+      }
+    ];
+  });
+}());
+(function () {
+  angular.module('angularytics').factory('AngularyticsConsoleHandler', [
+    '$log',
+    function ($log) {
+      var service = {};
+      service.trackPageView = function (url) {
+        $log.log('URL visited', url);
+      };
+      service.trackEvent = function (category, action, opt_label, opt_value, opt_noninteraction) {
+        $log.log('Event tracked', category, action, opt_label, opt_value, opt_noninteraction);
+      };
+      return service;
+    }
+  ]);
+}());
+(function () {
+  angular.module('angularytics').factory('AngularyticsGoogleHandler', [
+    '$log',
+    function ($log) {
+      var service = {};
+      service.trackPageView = function (url) {
+        _gaq.push([
+          '_set',
+          'page',
+          url
+        ]);
+        _gaq.push([
+          '_trackPageview',
+          url
+        ]);
+      };
+      service.trackEvent = function (category, action, opt_label, opt_value, opt_noninteraction) {
+        _gaq.push([
+          '_trackEvent',
+          category,
+          action,
+          opt_label,
+          opt_value,
+          opt_noninteraction
+        ]);
+      };
+      return service;
+    }
+  ]).factory('AngularyticsGoogleUniversalHandler', function () {
+    var service = {};
+    service.trackPageView = function (url) {
+      ga('set', 'page', url);
+      ga('send', 'pageview', url);
+    };
+    service.trackEvent = function (category, action, opt_label, opt_value, opt_noninteraction) {
+      ga('send', 'event', category, action, opt_label, opt_value, { 'nonInteraction': opt_noninteraction });
+    };
+    return service;
+  });
+}());
+(function () {
+  angular.module('angularytics').filter('trackEvent', [
+    'Angularytics',
+    function (Angularytics) {
+      return function (entry, category, action, opt_label, opt_value, opt_noninteraction) {
+        Angularytics.trackEvent(category, action, opt_label, opt_value, opt_noninteraction);
+        return entry;
+      };
+    }
+  ]);
+}());

public/styles/app.less

@@ -1,6 +1,7 @@
 @import url(http://fonts.googleapis.com/css?family=Josefin+Sans);
 
 @import 'base/bootstrap/bootstrap';
+@import 'base/bootstrap/responsive';
 @import 'base/font-awesome/font-awesome';
 @import 'variables';
 @import 'mixins';

public/styles/body.less

@@ -24,6 +24,24 @@ a {
   }
 }
 
+.about-page {
+  h2 {
+	margin: 0px;
+	margin-bottom: 5px;
+	font-size: 13pt;
+	color: #C2889C;
+	line-height: normal;
+	overflow: hidden;
+	font-weight: normal;
+  }
+}
+
+.welcome {
+  padding: 5px;
+  margin-bottom: 10px;
+  background: lighten(@pfm-purple, 30%);
+}
+
 .revealable {
   font-size: 10pt;
   color: #222;

public/styles/content.less

@@ -2,6 +2,37 @@
 @import-once 'mixins';
 @import-once 'variables';
 
+@media (max-width: 1300px) and (min-width: 720px) {
+  html {
+	.albums-listing, .playlists-listing, .artist-listing {
+	  &.two-columns li {
+		width: auto;
+		float: none;
+	  }
+
+	  li {
+		width: 33.33333%;
+	  }
+	}
+  }
+}
+
+@media (max-width: 720px) {
+  html {
+	.albums-listing, .playlists-listing, .artist-listing {
+	  &.two-columns li {
+		width: auto;
+		float: none;
+	  }
+
+	  li {
+		width: auto;
+		float: none;
+	  }
+	}
+  }
+}
+
 .albums-listing, .playlists-listing, .artist-listing {
   margin: 0px;
   padding: 0px;
@@ -180,6 +211,46 @@
 
 @icon-size: 42px;
 
+@media (max-width: 1300px) and (min-width: 720px) {
+  html {
+	.tracks-listing {
+	  &.four-columns li {
+		width: 33.333%;
+	  }
+
+	  &.three-columns li {
+		width: 50%;
+	  }
+
+	  &.two-columns li {
+		width: auto;
+		float: none;
+	  }
+	}
+  }
+}
+
+@media (max-width: 720px) {
+  html {
+	.tracks-listing {
+	  &.four-columns li {
+		width: auto;
+		float: none;
+	  }
+
+	  &.three-columns li {
+		width: auto;
+		float: none;
+	  }
+
+	  &.two-columns li {
+		width: auto;
+		float: none;
+	  }
+	}
+  }
+}
+
 .tracks-listing.four-columns {
   li {
 	float: left;

public/styles/layout.less

@@ -174,8 +174,12 @@ header {
 	}
   }
 
-  li.uploader {
+  li.none {
-	a {
+	span {
+	  display: block;
+	  padding: 5px 25px;
+	  color: #555;
+	  font-style: italic;
 	}
   }
 }

public/templates/artists/list.html

@@ -1,16 +1,18 @@
-<ul class="artist-listing stretch-to-bottom">
+<div class="stretch-to-bottom">
-	<li ng-repeat="artist in artists" bindonce>
+	<ul class="artist-listing">
-		<a href="{{artist.url}}">
+		<li ng-repeat="artist in artists" bindonce>
-			<img class="image" bo-src="artist.avatars.small" />
+			<a href="{{artist.url}}">
-				<span class="info">
+				<img class="image" bo-src="artist.avatars.small" />
-				<span class="title" bo-text="artist.name"></span>
+					<span class="info">
-				<span class="published">
+					<span class="title" bo-text="artist.name"></span>
-					joined <span bo-text="artist.created_at.date | momentFromNow"></span>
+					<span class="published">
+						joined <span bo-text="artist.created_at.date | momentFromNow"></span>
+					</span>
 				</span>
-			</span>
+			</a>
-		</a>
+		</li>
-	</li>
+		<li ng-show="!artists.length" class="empty">
-	<li ng-show="!artists.length" class="empty">
+			No artists found...
-		No artists found...
+		</li>
-	</li>
+	</ul>
-</ul>
+</div>

public/templates/dashboard/index.html

@@ -1,5 +1,5 @@
-<div class="dashboard">
+<div class="dashboard stretch-to-bottom">
-	<section class="recent-tracks stretch-to-bottom">
+	<section class="recent-tracks">
 		<div>
 			<h1>
 				<a href="/tracks"><i class="icon-music"></i> see more</a>
@@ -9,7 +9,7 @@
 		</div>
 	</section>
 
-	<section class="popular-tracks stretch-to-bottom">
+	<section class="popular-tracks">
 		<div>
 			<h1>
 				What's Popular Today

public/templates/home/index.html

@@ -1,37 +1,33 @@
-<div>
+<div class="stretch-to-bottom">
-	<h1>Pony.fm BETA 2 Preview</h1>
+	<div class="welcome">
+		<h1>Welcome to Pony.fm</h1>
+		<p>The pony fan music site. By a brony, for bronies.</p>
+		<p>
+			We provide a comprehensive set of free tools to host, distribute, and catalogue your music, integrated with a rich community experience for artists and listeners alike.
+		</p>
+		<p>
+			Features include <strong>unlimited downloads</strong>, <strong>unlimited uploads</strong>, <strong>lossless uploads</strong> and much more! Click <a href="/about">here</a> to get all of our features!
+		</p>
+	</div>
 
-	<p>
+	<div class="dashboard">
-		Welcome to Pony.fm's BETA 2 preview! If you were looking for the functional website, head on over to <a href="http://pony.fm" target="_blank">Pony.fm</a>.
+		<section class="recent-tracks">
-	</p>
+			<div>
+				<h1>
+					<a href="/tracks"><i class="icon-music"></i> see more</a>
+					The Newest Tunes
+				</h1>
+				<pfm-tracks-list tracks="recentTracks" class="two-columns"></pfm-tracks-list>
+			</div>
+		</section>
 
-	<p>
+		<section class="popular-tracks">
-		This is an early look at the next Pony.fm release. <a href="http://pony.fm" target="_blank">Pony.fm</a> is a music hosting website
+			<div>
-		for Bronies - and you can learn more about it <a href="http://pony.fm/about" target="_blank">here</a>.
+				<h1>
-	</p>
+					What's Popular Today
-
+				</h1>
-	<p>
+				<pfm-tracks-list tracks="popularTracks" class="two-columns"></pfm-tracks-list>
-		This web application is under <strong>heavy development</strong>. While you are free to browse around, please note
+			</div>
-		that although the track and user data on this site is a copy of Pony.fm - all data will be <strong>erased</strong> when
+		</section>
-		the preview ends, or whenever we feel like. As such, please do not use this application for hosting your new music.
+	</div>
-	</p>
-
-	<p>
-		At this time, many features are notably missing - such as:
-	</p>
-	<ul>
-		<li>Mobile friendly design</li>
-		<li>Artist following</li>
-		<li>Notifications</li>
-		<li>Public playlists</li>
-		<li>Music Downloads</li>
-	</ul>
-	<p>
-		And more. The layout and design is also subject to change in the future.
-	</p>
-	<p>
-		However, we welcome any and all feedback - so if you have a suggestion or bug report, you can hop on over to
-		<a href="http://mlpforums.com/forum/62-ponyfm/" target="_blank">Pony.fm's Forum</a>.
-	</p>
-	<p>We hope you enjoy taking a look at the future of Pony.fm as much as we did building it!</p>
 </div>

public/templates/pages/about.html

@@ -1,37 +1,25 @@
-<div>
+<div class="about-page">
 	<h1>What exactly <em>is</em> Pony.fm, anyway?</h1>
 	<div class="stretch-to-bottom">
-		<div class="row-fluid">
+		<p>Some <em>My Little Pony: Friendship is Magic</em> fans - typically referred to as &quot;bronies&quot; are the musical type, and show their appreciation for the show by pouring their talent into <strong>fan music</strong>.
-			<div class="span12 columns">
+		<p>The brony fan music community is diverse, spanning genres from symphonic metal to trance and everything in between. But most importantly, the community creates music.</p>
-				<p>Some <em>My Little Pony: Friendship is Magic</em> fans - typically referred to as &quot;bronies&quot; are the musical type, and show their appreciation for the show by pouring their talent into <strong>fan music</strong>.
+		<p>A <em>lot</em> of music.</p>
-				<p>The brony fan music community is diverse, spanning genres from symphonic metal to trance and everything in between. But most importantly, the community creates music.</p>
+		<p>All this music has to go somewhere. YouTube, SoundCloud, and Bandcamp are popular outlets that many brony musicians use to host their tunes. But no mainstream sites are specifically designed for our fandom&#39;s needs, and they&#39;re not particularly helpful if, as a listener, you&#39;re looking for pony fan music.</p>
-				<p>A <em>lot</em> of music.</p>
+		<p>That&#39;s where Pony.fm comes in. <strong>Pony.fm is a community, hosting service, and music database rolled into one, with a generous dash of pony on top.</strong></p>
-				<p>All this music has to go somewhere. YouTube, SoundCloud, and Bandcamp are popular outlets that many brony musicians use to host their tunes. But no mainstream sites are specifically designed for our fandom&#39;s needs, and they&#39;re not particularly helpful if, as a listener, you&#39;re looking for pony fan music.</p>
-				<p>That&#39;s where Pony.fm comes in. <strong>Pony.fm is a community, hosting service, and music database rolled into one, with a generous dash of pony on top.</strong></p>
-			</div>
-		</div>
 
-		<div class="row-fluid">
+		<h2>So it&#39;s SoundCloud with ponies?</h2>
-			<div class="span12">
+		<p>Eenope!</p>
-				<h2>So it&#39;s SoundCloud with ponies?</h2>
+		<p>Pony.fm is an original project. Although it takes inspiration from a number of well-known services for the general public, Pony.fm is not specifically modeled after any one of them. As a fan site itself, Pony.fm is an experience all its own.</p>
-				<p>Eenope!</p>
+		<p>Simply put, <strong>&quot;Pony.fm is Pony.fm.&quot;</strong></p>
-				<p>Pony.fm is an original project. Although it takes inspiration from a number of well-known services for the general public, Pony.fm is not specifically modeled after any one of them. As a fan site itself, Pony.fm is an experience all its own.</p>
-				<p>Simply put, <strong>&quot;Pony.fm is Pony.fm.&quot;</strong></p>
 
-				<h2>What makes Pony.fm special?</h2>
+		<h2>What makes Pony.fm special?</h2>
-				<p>Pony.fm is a service created by a brony, for bronies. Every inch of the Pony.fm experience is crafted with ponies and bronies in mind. Some of the features necessarily resemble what you may find on other sites - lossless uploads, for example - but some features are specific to the pony fan music community.</p>
+		<p>Pony.fm is a service created by a brony, for bronies. Every inch of the Pony.fm experience is crafted with ponies and bronies in mind. Some of the features necessarily resemble what you may find on other sites - lossless uploads, for example - but some features are specific to the pony fan music community.</p>
-				<p>Created as a service for the fandom, Pony.fm aims to be the one-stop shop for all things pony music, for artists and listeners alike.</p>
+		<p>Created as a service for the fandom, Pony.fm aims to be the one-stop shop for all things pony music, for artists and listeners alike.</p>
-			</div>
-		</div>
 
-		<div class="row-fluid">
+		<h2>What does MLP Forums have to do with Pony.fm?</h2>
-			<div class="span12">
+		<p>MLP Forums and Pony.fm share an owner, and each encompasses a different segment of the global <em>My Little Pony: Friendship is Magic</em> community. Put together, both sites are able to offer a richer &quot;supercommunity&quot; experience than either site could offer on its own.</p>
-				<h2>What does MLP Forums have to do with Pony.fm?</h2>
-				<p>MLP Forums and Pony.fm share an owner, and each encompasses a different segment of the global <em>My Little Pony: Friendship is Magic</em> community. Put together, both sites are able to offer a richer &quot;supercommunity&quot; experience than either site could offer on its own.</p>
 
-				<h2>Who is behind Pony.fm?</h2>
+		<h2>Who is behind Pony.fm?</h2>
-				<p>Pony.fm is built and owned by Feld0, a pony-loving teenager who heard the call of code. Recognizing the need for a true pony-specific music hosting site, and realizing that MLP Forums provided him with the resources he needed to make it happen, he created a blank text file and started pumping code into his computer.</p>
+		<p>Pony.fm is built and owned by Feld0, a pony-loving teenager who heard the call of code. Recognizing the need for a true pony-specific music hosting site, and realizing that MLP Forums provided him with the resources he needed to make it happen, he created a blank text file and started pumping code into his computer.</p>
-			</div>
-		</div>
 	</div>
 </div>