#2: Refactored the track route to be a parent route for both showing a track and editing a track.

public/templates/tracks/edit.html

@@ -0,0 +1,5 @@
+<div>
+    <h1>PUT EDIT STUFF HERE</h1>
+
+    <a bo-href="track.url">Cancel</a>
+</div>

public/templates/tracks/frame.html

@@ -0,0 +1,57 @@
+<div class="resource-details track-details" bindonce="track">
+    <ul class="dropdowns">
+        <li class="dropdown">
+            <a href="#" class="btn btn-small btn-info dropdown-toggle" ng-disabled="track.is_downloadable == 0" auto-close="outsideClick">
+                Downloads
+            </a>
+            <ul class="dropdown-menu" ng-show="track.is_downloadable == 1">
+                <li bindonce ng-repeat="format in track.formats" ng-hide="isInProgress">
+                    <a target="_blank" ng-if="!format.isCacheable" bo-href="format.url">
+                        <span bo-text="format.name"></span>
+                        <small bo-text="'(' + format.size + ')'"></small>
+                    </a>
+                    <a ng-if="format.isCacheable" ng-click="getCachedTrack(track.id, format.name);" href="">
+                        <span bo-text="format.name"></span>
+                        <small bo-text="'(' + format.size + ')'"></small>
+                    </a>
+                </li>
+                <li ng-show="isInProgress" class="cache-loading"><img src="/images/loading.gif" /></li>
+                <li ng-show="isInProgress" class="cache-loading"><small>We&#39;re getting your download ready! This'll take a few seconds.</small></li>
+            </ul>
+        </li>
+        <li class="dropdown">
+            <a href="#" class="btn btn-small dropdown-toggle" ng-show="auth.isLogged">Add to Playlist</a>
+            <ul class="dropdown-menu">
+                <li bindonce ng-repeat="playlist in playlists">
+                    <a ng-class="{disabled: playlist.message, 'btn-success': playlist.message}"
+                       bo-href="playlist.url"
+                       pfm-eat-click
+                       ng-click="addToPlaylist(playlist); $event.stopPropagation()"
+                    >
+                        <span ng-hide="playlist.message" bo-text="playlist.title"></span>
+                        <span ng-show="playlist.message">{{playlist.message}}</span>
+                    </a>
+                </li>
+                <li><a href="#" class="add-btn" pfm-eat-click ng-click="addToNewPlaylist()">Add to New Playlist</a></li>
+            </ul>
+        </li>
+
+        <li><a href="#" class="btn" pfm-eat-click ng-click="share()">Share or Embed</a></li>
+        <li><pfm-favourite-button resource="track" type="track"></pfm-favourite-button></li>
+        <li bo-show="track.permissions.edit"><a class="btn btn-small" bo-href="'/account/tracks/edit/' + track.id">Edit</a></li>
+    </ul>
+
+    <header>
+        <pfm-track-player track="track"></pfm-track-player>
+        <h1 bo-text="track.title"></h1>
+        <h2>
+			<span bo-show="track.album">
+				from: <a bo-href="track.album.url" bo-text="track.album.title"></a>
+			</span>
+
+            by: <a bo-href="track.user.url" bo-text="track.user.name"></a>
+        </h2>
+    </header>
+
+    <div ui-view></div>
+</div>

public/templates/tracks/show.html

@@ -1,71 +1,22 @@
-<div class="resource-details track-details" bindonce="track">
-    <ul class="dropdowns">
-        <li class="dropdown">
-            <a href="#" class="btn btn-small btn-info dropdown-toggle" ng-disabled="track.is_downloadable == 0" auto-close="outsideClick">
-                Downloads
-            </a>
-            <ul class="dropdown-menu" ng-show="track.is_downloadable == 1">
-                <li bindonce ng-repeat="format in track.formats" ng-hide="isInProgress">
-                    <a target="_blank" ng-if="!format.isCacheable" bo-href="format.url">
-                        <span bo-text="format.name"></span>
-                        <small bo-text="'(' + format.size + ')'"></small>
-                    </a>
-                    <a ng-if="format.isCacheable" ng-click="getCachedTrack(track.id, format.name);" href="">
-                        <span bo-text="format.name"></span>
-                        <small bo-text="'(' + format.size + ')'"></small>
-                    </a>
-                </li>
-                <li ng-show="isInProgress" class="cache-loading"><img src="/images/loading.gif" /></li>
-                <li ng-show="isInProgress" class="cache-loading"><small>We&#39;re getting your download ready! This'll take a few seconds.</small></li>
-            </ul>
-        </li>
-        <li class="dropdown">
-            <a href="#" class="btn btn-small dropdown-toggle" ng-show="auth.isLogged">
-                Add to Playlist
-            </a>
-            <ul class="dropdown-menu">
-                <li bindonce ng-repeat="playlist in playlists">
-                    <a ng-class="{disabled: playlist.message, 'btn-success': playlist.message}"
-                       bo-href="playlist.url"
-                       pfm-eat-click
-                       ng-click="addToPlaylist(playlist); $event.stopPropagation()"
-                    >
-                        <span ng-hide="playlist.message" bo-text="playlist.title"></span>
-                        <span ng-show="playlist.message">{{playlist.message}}</span>
-                    </a>
-                </li>
-                <li><a href="#" class="add-btn" pfm-eat-click ng-click="addToNewPlaylist()">Add to New Playlist</a></li>
-            </ul>
-        </li>
-        <li><a href="#" class="btn" pfm-eat-click ng-click="share()">Share or Embed</a></li>
-        <li><pfm-favourite-button resource="track" type="track"></pfm-favourite-button></li>
-        <li bo-show="track.permissions.edit"><a class="btn btn-small" bo-href="'/account/tracks/edit/' + track.id">Edit</a></li>
-    </ul>
-
-    <header>
-        <pfm-track-player track="track"></pfm-track-player>
-        <h1 bo-text="track.title"></h1>
-        <h2>
-            <span bo-show="track.album">
-                from: <a bo-href="track.album.url" bo-text="track.album.title"></a>
-            </span>
-
-            by: <a bo-href="track.user.url" bo-text="track.user.name"></a>
-        </h2>
-    </header>
-
 <div class="stretch-to-bottom details-columns">
     <div class="right">
-			<a colorbox ng-href="{{track.covers.original}}" pfm-eat-click><img class="cover" pfm-src-loader="track.covers.normal" pfm-src-size="normal" /></a>
+        <img class="cover" pfm-src-loader="track.covers.normal"
+             pfm-src-size="normal"/>
 
         <div class="share-buttons" pfm-share-buttons>
-                <a class="tumblr" bo-href="track.share.tumblrUrl" title="Share on Tumblr" style="display:inline-block; overflow:hidden; width:20px; height:20px; background:url('/images/tumblr-share.png') top left no-repeat transparent;"></a>
+            <a class="tumblr" bo-href="track.share.tumblrUrl"
-                <div class="facebook fb-like" data-href="{{track.url}}" data-width="450" data-layout="button_count" data-show-faces="true" data-send="false"></div>
+               title="Share on Tumblr"
-                <iframe class="twitter" allowtransparency="true" frameborder="0" scrolling="no" bo-src="track.share.twitterUrl" style="width:130px; height:20px;"></iframe>
+               style="display:inline-block; overflow:hidden; width:20px; height:20px; background:url('/images/tumblr-share.png') top left no-repeat transparent;"></a>
+            <div class="facebook fb-like" data-href="{{track.url}}"
+                 data-width="450" data-layout="button_count"
+                 data-show-faces="true" data-send="false"></div>
+            <iframe class="twitter" allowtransparency="true" frameborder="0"
+                    scrolling="no" bo-src="track.share.twitterUrl"
+                    style="width:130px; height:20px;"></iframe>
         </div>
 
         <ul class="stats">
-                <li>Published: <strong bo-text="track.published_at | date:'medium'"></strong></li>
+            <li>Published: <strong bo-text="track.published_at"></strong></li>
             <li>Views: <strong bo-text="track.stats.views"></strong></li>
             <li>Plays: <strong bo-text="track.stats.plays"></strong></li>
             <li>Downloads: <strong bo-text="track.stats.downloads"></strong></li>
@@ -91,4 +42,3 @@
         <pfm-comments type="track" resource="track"></pfm-comments>
     </div>
 </div>
-</div>

resources/assets/scripts/app/app.coffee

@@ -183,8 +183,20 @@ module.config [
 
         state.state 'content.track',
             url: '/tracks/{id:[^\-]+}-{slug}'
-            templateUrl: '/templates/tracks/show.html'
+            templateUrl: '/templates/tracks/frame.html'
             controller: 'track'
+            abstract: true
+
+        state.state 'content.track.show',
+            url: ''
+            templateUrl: '/templates/tracks/show.html'
+            controller: 'track-show'
+
+        state.state 'content.track.edit',
+            url: '/edit'
+            templateUrl: '/templates/tracks/edit.html'
+            controller: 'track-edit'
+
 
         # Albums
 

resources/assets/scripts/app/controllers/track-edit.coffee

@@ -0,0 +1,31 @@
+# Pony.fm - A community for pony fan music.
+# Copyright (C) 2016 Peter Deltchev
+#
+# This program is free software: you can redistribute it and/or modify
+# it under the terms of the GNU Affero General Public License as published by
+# the Free Software Foundation, either version 3 of the License, or
+# (at your option) any later version.
+#
+# This program is distributed in the hope that it will be useful,
+# but WITHOUT ANY WARRANTY; without even the implied warranty of
+# MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+# GNU Affero General Public License for more details.
+#
+# You should have received a copy of the GNU Affero General Public License
+# along with this program.  If not, see <http://www.gnu.org/licenses/>.
+
+window.pfm.preloaders['track-edit'] = [
+  'tracks', '$state', 'playlists'
+  (tracks, $state, playlists) ->
+    $.when.all [tracks.fetch $state.params.id, playlists.refreshOwned(true)]
+]
+
+angular.module('ponyfm').controller "track-edit", [
+  '$scope', 'tracks', '$state', 'playlists', 'auth', 'favourites', '$dialog'
+  ($scope, tracks, $state, playlists, auth, favourites, $dialog) ->
+    track = null
+
+    tracks.fetch($state.params.id).done (trackResponse) ->
+      $scope.track = trackResponse.track
+      track = trackResponse.track
+]

resources/assets/scripts/app/controllers/track-show.coffee

@@ -0,0 +1,26 @@
+# Pony.fm - A community for pony fan music.
+# Copyright (C) 2016 Peter Deltchev
+#
+# This program is free software: you can redistribute it and/or modify
+# it under the terms of the GNU Affero General Public License as published by
+# the Free Software Foundation, either version 3 of the License, or
+# (at your option) any later version.
+#
+# This program is distributed in the hope that it will be useful,
+# but WITHOUT ANY WARRANTY; without even the implied warranty of
+# MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+# GNU Affero General Public License for more details.
+#
+# You should have received a copy of the GNU Affero General Public License
+# along with this program.  If not, see <http://www.gnu.org/licenses/>.
+
+window.pfm.preloaders['track-show'] = [
+  'tracks', '$state', 'playlists'
+  (tracks, $state, playlists) ->
+    $.when.all [tracks.fetch $state.params.id, playlists.refreshOwned(true)]
+]
+
+angular.module('ponyfm').controller "track-show", [
+  '$scope', 'tracks', '$state', 'playlists', 'auth', 'favourites', '$dialog'
+  ($scope, tracks, $state, playlists, auth, favourites, $dialog) ->
+]

resources/assets/scripts/app/controllers/track.coffee

@@ -14,12 +14,6 @@
 # You should have received a copy of the GNU Affero General Public License
 # along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
-window.pfm.preloaders['track'] = [
-    'tracks', '$state', 'playlists'
-    (tracks, $state, playlists) ->
-        $.when.all [tracks.fetch $state.params.id, playlists.refreshOwned(true)]
-]
-
 angular.module('ponyfm').controller "track", [
     '$scope', '$rootScope', 'tracks', '$state', 'playlists', 'auth', 'favourites', '$dialog', 'download-cached', '$window', '$timeout'
     ($scope, $rootScope, tracks, $state, playlists, auth, favourites, $dialog, cachedTrack, $window, $timeout) ->