mirror of
https://github.com/Poniverse/Pony.fm.git
synced 2024-11-22 04:58:01 +01:00
#2: Refactored the track route to be a parent route for both showing a track and editing a track.
This commit is contained in:
Nelson LaQuet
Peter Deltchev
parent
989a6631ba
commit
53f01b1469
7 changed files with 168 additions and 93 deletions
5
public/templates/tracks/edit.html
Normal file
5
public/templates/tracks/edit.html
Normal file
|
|
@ -0,0 +1,5 @@
|
|||
<div>
|
||||
<h1>PUT EDIT STUFF HERE</h1>
|
||||
|
||||
<a bo-href="track.url">Cancel</a>
|
||||
</div>
|
||||
57
public/templates/tracks/frame.html
Normal file
57
public/templates/tracks/frame.html
Normal file
|
|
@ -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'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>
|
||||
|
|
@ -1,94 +1,44 @@
|
|||
<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'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>
|
||||
<div class="stretch-to-bottom details-columns">
|
||||
<div class="right">
|
||||
<img class="cover" pfm-src-loader="track.covers.normal"
|
||||
pfm-src-size="normal"/>
|
||||
|
||||
<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>
|
||||
|
||||
<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>
|
||||
<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>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>
|
||||
<li>Favourites: <strong bo-text="track.stats.favourites"></strong></li>
|
||||
</ul>
|
||||
<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>
|
||||
<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>
|
||||
<div class="left">
|
||||
<div class="description" bo-show="track.description.length">
|
||||
<h2>Description</h2>
|
||||
<p marked="track.description"></p>
|
||||
</div>
|
||||
|
||||
<div bo-show="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...</a>
|
||||
</div>
|
||||
<p class="content" bo-html="track.lyrics | noHTML | nl2br"></p>
|
||||
<ul class="stats">
|
||||
<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>
|
||||
<li>Favourites: <strong bo-text="track.stats.favourites"></strong></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="left">
|
||||
<div class="description" bo-show="track.description.length">
|
||||
<h2>Description</h2>
|
||||
<p marked="track.description"></p>
|
||||
</div>
|
||||
|
||||
<div bo-show="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...</a>
|
||||
</div>
|
||||
<p class="content" bo-html="track.lyrics | noHTML | nl2br"></p>
|
||||
</div>
|
||||
|
||||
<pfm-comments type="track" resource="track"></pfm-comments>
|
||||
</div>
|
||||
|
||||
<pfm-comments type="track" resource="track"></pfm-comments>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
||||
|
|
|
|||
31
resources/assets/scripts/app/controllers/track-edit.coffee
Normal file
31
resources/assets/scripts/app/controllers/track-edit.coffee
Normal file
|
|
@ -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
|
||||
]
|
||||
26
resources/assets/scripts/app/controllers/track-show.coffee
Normal file
26
resources/assets/scripts/app/controllers/track-show.coffee
Normal file
|
|
@ -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) ->
|
||||
]
|
||||
|
|
@ -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) ->
|
||||
|
|
|
|||
Loading…
Reference in a new issue