#2: Implemented the inline track editor on track pages.

Also includes a fix for lyrics on track pages.

app/Http/Controllers/TracksController.php

@@ -91,6 +91,11 @@ class TracksController extends Controller
         return View::make('tracks.show');
     }
 
+    public function getEdit($id, $slug)
+    {
+        return $this->getTrack($id, $slug);
+    }
+
     public function getShortlink($id)
     {
         $track = Track::find($id);

app/Http/routes.php

@@ -39,6 +39,7 @@ Route::get('/tracks/popular', 'TracksController@getIndex');
 Route::get('/tracks/random', 'TracksController@getIndex');
 
 Route::get('tracks/{id}-{slug}', 'TracksController@getTrack');
+Route::get('tracks/{id}-{slug}/edit', 'TracksController@getEdit');
 Route::get('t{id}', 'TracksController@getShortlink' )->where('id', '\d+');
 Route::get('t{id}/embed', 'TracksController@getEmbed' );
 Route::get('t{id}/stream.{extension}', 'TracksController@getStream' );

public/templates/directives/track-editor.html

@@ -111,7 +111,7 @@
         <div class="form-row">
             <label class="strong">Choose a License:</label>
             <ul class="license-grid">
-                <li ng-repeat="license in ::taxonomies.licenses track by license.id" ng-class="{selected: track.license_id == license.id}">
+                <li ng-repeat="license in taxonomies.licenses track by license.id" ng-class="{selected: track.license_id == license.id}">
                     <div ng-click="track.license_id = license.id; touchModel()">
                         <strong>{{::license.title}}</strong>
                         <p>{{::license.description}}</p>

public/templates/tracks/edit.html

@@ -1,5 +1,3 @@
-<div>
+<p><a ng-href="{{::track.url}}" class="btn btn-small">Return to the track page</a></p>
-    <h1>PUT EDIT STUFF HERE</h1>
 
-    <a ng-href="{{::track.url}}">Cancel</a>
+<pfm-track-editor track-id="trackId"></pfm-track-editor>
-</div>

public/templates/tracks/frame.html

@@ -1,10 +1,10 @@
 <div class="resource-details track-details">
     <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">
+            <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">
+            <ul class="dropdown-menu" ng-show="track.is_downloadable == 1">
                 <li ng-repeat="format in ::track.formats" ng-hide="isInProgress">
                     <a target="_blank" ng-if="::!format.isCacheable" ng-href="{{::format.url}}">
                         <span>{{::format.name}}</span>
@@ -38,15 +38,15 @@
 
         <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 ng-show="::track.permissions.edit"><a class="btn btn-small" ng-href="/account/tracks/edit/{{::track.id}}">Edit</a></li>
+        <li ng-show="::track.permissions.edit"><a class="btn btn-small" ng-href="/tracks/{{::track.id}}-{{::track.slug}}/edit">Edit</a></li>
     </ul>
 
     <header>
         <pfm-track-player track="::track"></pfm-track-player>
-        <h1>{{::track.title}}</h1>
+        <h1>{{track.title}}</h1>
         <h2>
-			<span ng-show="::track.album">
+			<span ng-if="track.album">
-				from: <a ng-href="{{::track.album.url}}" ng-text="{{::track.album.title}}"></a>
+				from: <a ng-href="{{::track.album.url}}">{{::track.album.title}}</a>
 			</span>
 
             by: <a ng-href="{{::track.user.url}}">{{::track.user.name}}</a>

public/templates/tracks/show.html

@@ -25,18 +25,18 @@
         </ul>
     </div>
     <div class="left">
-        <div class="description" ng-show="::track.description.length">
+        <div class="description" ng-if="track.description.length">
             <h2>Description</h2>
             <p marked="track.description"></p>
         </div>
 
-        <div ng-show="::track.is_vocal && track.lyrics.length" class="lyrics-panel">
+        <div ng-if="track.is_vocal && track.lyrics.length" class="lyrics-panel">
             <h2>Lyrics</h2>
             <div class="lyrics revealable">
                 <div class="reveal">
                     <a href="#">Click to reveal full lyrics&hellip;</a>
                 </div>
-                <p class="content" ng-html="::track.lyrics | noHTML | nl2br"></p>
+                <p class="content" ng-bind-html="track.lyrics | noHTML | nl2br"></p>
             </div>
         </div>
 

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

@@ -18,4 +18,8 @@
 angular.module('ponyfm').controller "track-edit", [
     '$scope', '$state'
     ($scope, $state) ->
+        # All the fun stuff happens in the pfmTrackEditor directive.
+
+        # FYI: $scope.trackId is set in the `track` controller, which
+        # lies above this one in scope.
 ]

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

@@ -17,20 +17,25 @@
 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) ->
-        track = null
+        $scope.track
-        trackId = parseInt($state.params.id)
+        $scope.trackId = parseInt($state.params.id)
 
-        tracks.fetch(trackId).done (trackResponse) ->
+        updateTrackData = (forceUpdate = false) ->
-            $scope.track = trackResponse.track
+            tracks.fetch($scope.trackId, forceUpdate).done (trackResponse) ->
-            track = trackResponse.track
+                $scope.track = trackResponse.track
-            $rootScope.description = "Listen to #{track.title} by #{track.user.name} on the largest pony music site"
+                $rootScope.description = "Listen to #{$scope.track.title} by #{$scope.track.user.name} on the largest pony music site"
+
+        updateTrackData()
+
+        $scope.$on 'track-updated', () ->
+            updateTrackData(true)
 
         $scope.playlists = []
 
         if auth.data.isLogged
             playlists.refreshOwned().done (playlists) ->
                 for playlist in playlists
-                    if trackId not in playlist.track_ids
+                    if $scope.trackId not in playlist.track_ids
                         $scope.playlists.push playlist
 
         $scope.favouriteWorking = false
@@ -44,7 +49,11 @@ angular.module('ponyfm').controller "track", [
         $scope.share = () ->
             dialog = $dialog.dialog
                 templateUrl: '/templates/partials/track-share-dialog.html',
-                controller: ['$scope', ($scope) -> $scope.track = track; $scope.close = () -> dialog.close()]
+                controller: ['$scope', ($localScope) ->
+                        $localScope.track = $scope.track
+                        $localScope.close = () ->
+                            dialog.close()
+                ]
             dialog.open()
 
         $scope.addToNewPlaylist = () ->