PonyMirrors/Pony.fm
1
0
Fork 0
mirror of https://github.com/Poniverse/Pony.fm.git synced 2025-02-17 02:24:22 +01:00
Code Issues Projects Releases Packages Wiki Activity

Updated album and playlist pages

Browse source
This commit is contained in:
Josef Citrine 2016-08-07 15:22:49 +01:00
parent 5dc23d916d
commit b586c31a77
11 changed files with 136 additions and 105 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

70
public/templates/albums/show.html
View file

@ -1,34 +1,46 @@
<div class="resource-details album-details"> <div class="resource-details album-details">
<ul class="dropdowns"> <header layout="row" layout-xs="column">
<li class="dropdown"> <div class="blurred-background" style="background-image: url('{{album.covers.normal}}');"></div>
<a href="#" class="btn btn-sm btn-primary dropdown-toggle" bs-dropdown ng-disabled="album.is_downloadable == 0" auto-close="outsideClick"> <div layout="row" layout-xs="column" flex>
Downloads <div flex="50" flex-xs="100" class="info">
</a> <h1>{{::album.title}}</h1>
<ul class="dropdown-menu" ng-show="::album.is_downloadable == 1"> <h2>
<li ng-repeat="format in ::album.formats" ng-hide="isInProgress"> by: <a ng-href="{{::album.user.url}}">{{::album.user.name}}</a>
<a target="_blank" ng-if="::!format.isCacheable" ng-click="checkMixedLosslessness(format);" ng-href="{{::format.url}}"> </h2>
<span>{{::format.name}}</span> </div>
<small>({{::format.size}})</small>
</a>
<a ng-if="::format.isCacheable" ng-click="getCachedAlbum(album.id, format);" href="">
<span>{{::format.name}}</span>
<small>({{::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 may take a few minutes.</small></li>
</ul>
</li>
<li><a href="#" class="btn btn-default" pfm-eat-click ng-click="share()">Share</a></li>
<li><pfm-favourite-button resource="::album" type="album"></pfm-favourite-button></li>
<li ng-if="::album.permissions.edit"><a class="btn btn-default btn-sm" ui-sref="content.artist.account.albums.edit(::{slug: album.user.slug, album_id: album.id})">Edit</a></li>
</ul>
<header> <div class="buttons" layout="row" layout-align="end top" layout-align-xs="center center" flex="50" flex-xs="100">
<h1>{{::album.title}}</h1> <md-menu>
<h2> <md-button class="md-icon-button" aria-label="Download" ng-click="$mdOpenMenu($event)" ng-hide="album.is_downloadable == 0">
by: <a ng-href="{{::album.user.url}}">{{::album.user.name}}</a> <md-tooltip md-direction="bottom" md-delay="200">Download</md-tooltip>
</h2> <md-icon>file_download</md-icon>
</md-button>
<md-menu-content>
<md-menu-item ng-repeat="format in ::album.formats" ng-hide="isInProgress">
<md-button target="_blank" ng-if="::!format.isCacheable" ng-href="{{::format.url}}">
{{::format.name}} ({{::format.size}})
</md-button>
<md-button ng-if="format.isCacheable" ng-click="getCachedAlbum(album.id, format);" href="">
{{::format.name}} ({{::format.size}})
</md-button>
</md-menu-item>
</md-menu-content>
</md-menu>
<pfm-favourite-button resource="::album" type="album"></pfm-favourite-button>
<md-button class="md-icon-button" aria-label="Share or embed" ng-click="share()">
<md-tooltip md-direction="bottom" md-delay="200">Share or embed</md-tooltip>
<md-icon>share</md-icon>
</md-button>
<md-button class="md-icon-button" aria-label="Edit" ng-show="::album.permissions.edit" ui-sref="content.artist.account.albums.edit(::{slug: album.user.slug, album_id: album.id})">
<md-tooltip md-direction="bottom" md-delay="200">Edit</md-tooltip>
<md-icon>edit</md-icon>
</md-button>
</div>
</div>
</header> </header>
<div class="stretch-to-bottom details-columns"> <div class="stretch-to-bottom details-columns">

16
public/templates/directives/comments.html
View file

@ -5,17 +5,17 @@
<input type="text" ng-model="content" placeholder="Write a comment&hellip;" /> <input type="text" ng-model="content" placeholder="Write a comment&hellip;" />
</div> </div>
</form> </form>
<ul> <md-list>
<li ng-show="resource.comments.length == 0" class="empty"> <li ng-show="resource.comments.length == 0" class="empty">
There are no comments yet! There are no comments yet!
</li> </li>
<li ng-repeat="comment in resource.comments track by comment.id"> <md-list-item ng-repeat="comment in resource.comments track by comment.id" class="md-3-line">
<img pfm-src-loader="::comment.user.avatars.thumbnail" pfm-src-size="thumbnail" /> <img pfm-src-loader="::comment.user.avatars.thumbnail" class="md-avatar" alt="::comment.user.name" pfm-src-size="thumbnail" />
<div class="content"> <div class="md-list-item-text">
<a ng-href="{{::comment.user.url}}">{{::comment.user.name}}</a> <a ng-href="{{::comment.user.url}}">{{::comment.user.name}}</a>
<span marked="comment.content"></span> <h4>{{::comment.content}}</h4>
<div class="meta">{{::comment.created_at.date | momentFromNow}}</div> <p>{{::comment.created_at.date | momentFromNow}}</p>
</div> </div>
</li> </md-list-item>
</ul> </md-list>
</div> </div>

28
public/templates/partials/album-share-dialog.html
View file

@ -1,17 +1,13 @@
<div class="modal" tabindex="-1" role="dialog"> <md-dialog ng-cloak class="modal-dialog">
<div class="modal-dialog"> <md-dialog-content>
<div class="modal-content"> <div class="modal-body">
<div class="modal-header"> <h2>Share '{{album.title}}'</h2>
<button type="button" class="close" ng-click="$hide()">&times;</button>
<h4 class="modal-title">{{ album.title }}</h4> <h5>Shortlink</h5>
</div> <input type="text" ng-model="album.share.url" />
<div class="modal-body">
<h4>Shortlink</h4>
<input type="text" ng-model="album.share.url" />
</div>
<div class="modal-footer">
<button type="button" class="btn btn-flat btn-primary" ng-click="$hide()">Close</button>
</div>
</div> </div>
</div> </md-dialog-content>
</div> <md-dialog-actions layout="row">
<md-button ng-click="closeDialog()" class="md-primary">Close</md-button>
</md-dialog-actions>
</md-dialog>

11
public/templates/partials/playlist-share-dialog.html
View file

@ -1,12 +1,9 @@
<md-dialog ng-cloak> <md-dialog ng-cloak class="modal-dialog">
<md-dialog-content> <md-dialog-content>
<div class="modal-header">
<h4>
{{playlist.title}}
</h4>
</div>
<div class="modal-body"> <div class="modal-body">
<h2>Shortlink</h2> <h2>{{playlist.title}}</h2>
<h5>Shortlink</h5>
<input type="text" ng-model="playlist.share.url" /> <input type="text" ng-model="playlist.share.url" />
</div> </div>
</md-dialog-content> </md-dialog-content>

64
public/templates/playlists/show.html
View file

@ -1,33 +1,41 @@
<div class="resource-details playlist-details"> <div class="resource-details playlist-details">
<ul class="dropdowns"> <header layout="row" layout-xs="column">
<li class="dropdown"> <div class="blurred-background" style="background-image: url('{{playlist.covers.normal}}');"></div>
<a href="#" class="btn btn-sm btn-primary dropdown-toggle" bs-dropdown auto-close="outsideClick"> <div layout="row" layout-xs="column" flex>
Downloads <div flex="50" flex-xs="100" class="info">
</a> <h1>{{::playlist.title}}</h1>
<ul class="dropdown-menu"> <h2>
<li ng-repeat="format in ::playlist.formats" ng-hide="isInProgress"> curated by: <a ng-href="{{::playlist.user.url}}">{{::playlist.user.name}}</a>
<a target="_blank" ng-if="::!format.isCacheable" ng-click="checkMixedLosslessness(format);" ng-href="{{::format.url}}"> </h2>
<span>{{::format.name}}</span> </div>
<small>({{::format.size}})</small>
</a>
<a ng-if="::format.isCacheable" ng-click="getCachedPlaylist(playlist.id, format);" href="">
<span>{{::format.name}}</span>
<small>({{::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 may take a few minutes.</small></li>
</ul>
</li>
<li><a href="#" class="btn btn-default" pfm-eat-click ng-click="share()">Share</a></li>
<li><pfm-favourite-button resource="::playlist" type="playlist"></pfm-favourite-button></li>
</ul>
<header> <div class="buttons" layout="row" layout-align="end top" layout-align-xs="center center" flex="50" flex-xs="100">
<h1>{{::playlist.title}}</h1> <md-menu>
<h2> <md-button class="md-icon-button" aria-label="Download" ng-click="$mdOpenMenu($event)">
curated by: <a ng-href="{{::playlist.user.url}}">{{::playlist.user.name}}</a> <md-tooltip md-direction="bottom" md-delay="200">Download</md-tooltip>
</h2> <md-icon>file_download</md-icon>
</md-button>
<md-menu-content>
<md-menu-item ng-repeat="format in ::playlist.formats" ng-hide="isInProgress">
<md-button target="_blank" ng-if="::!format.isCacheable" ng-href="{{::format.url}}">
{{::format.name}} ({{::format.size}})
</md-button>
<md-button ng-if="format.isCacheable" ng-click="getCachedPlaylist(playlist.id, format);" href="">
{{::format.name}} ({{::format.size}})
</md-button>
</md-menu-item>
</md-menu-content>
</md-menu>
<pfm-favourite-button resource="::playlist" type="playlist"></pfm-favourite-button>
<md-button class="md-icon-button" aria-label="Share or embed" ng-click="share()">
<md-tooltip md-direction="bottom" md-delay="200">Share or embed</md-tooltip>
<md-icon>share</md-icon>
</md-button>
</div>
</div>
</header> </header>
<div class="stretch-to-bottom details-columns"> <div class="stretch-to-bottom details-columns">

4
public/templates/tracks/frame.html
View file

@ -1,5 +1,5 @@
<div class="resource-details track-details"> <div class="resource-details track-details">
<pfm-track-player track="::track"></pfm-track-player> <pfm-track-player track="::track"></pfm-track-player>
<header layout="row" layout-xs="column"> <header layout="row" layout-xs="column">
<div class="blurred-background" style="background-image: url('{{track.covers.normal}}');"></div> <div class="blurred-background" style="background-image: url('{{track.covers.normal}}');"></div>
<img class="cover" pfm-src-loader="track.covers.normal" pfm-src-size="normal" /> <img class="cover" pfm-src-loader="track.covers.normal" pfm-src-size="normal" />
@ -11,7 +11,7 @@
</div> </div>
<div class="buttons" layout="row" layout-align="end top" layout-align-xs="center center" flex="50" flex-xs="100"> <div class="buttons" layout="row" layout-align="end top" layout-align-xs="center center" flex="50" flex-xs="100">
<md-menu> <md-menu>
<md-button class="md-icon-button" aria-label="Download" ng-click="$mdOpenMenu($event)"> <md-button class="md-icon-button" aria-label="Download" ng-hide="track.is_downloadable == 0" ng-click="$mdOpenMenu($event)">
<md-tooltip md-direction="bottom" md-delay="200">Download</md-tooltip> <md-tooltip md-direction="bottom" md-delay="200">Download</md-tooltip>
<md-icon>file_download</md-icon> <md-icon>file_download</md-icon>
</md-button> </md-button>

17
resources/assets/scripts/app/controllers/album.coffee
View file

@ -21,8 +21,8 @@ window.pfm.preloaders['album'] = [
] ]
module.exports = angular.module('ponyfm').controller "album", [ module.exports = angular.module('ponyfm').controller "album", [
'$scope', 'meta', 'albums', '$state', 'playlists', 'auth', '$modal', 'download-cached', '$window', '$timeout' '$scope', 'meta', 'albums', '$state', 'playlists', 'auth', '$mdDialog', 'download-cached', '$window', '$timeout'
($scope, meta, albums, $state, playlists, auth, $modal, cachedAlbum, $window, $timeout) -> ($scope, meta, albums, $state, playlists, auth, $mdDialog, cachedAlbum, $window, $timeout) ->
album = null album = null
albums.fetch($state.params.id).done (albumResponse) -> albums.fetch($state.params.id).done (albumResponse) ->
@ -33,11 +33,18 @@ module.exports = angular.module('ponyfm').controller "album", [
$scope.playlists = [] $scope.playlists = []
$scope.share = () -> $scope.share = (ev) ->
dialog = $modal $mdDialog.show(
templateUrl: '/templates/partials/album-share-dialog.html', templateUrl: '/templates/partials/album-share-dialog.html',
scope: $scope, scope: $scope,
show: true clickOutsideToClose: true,
controller: ($scope, $mdDialog) ->
$scope.closeDialog = ->
$mdDialog.cancel()
).then (() ->
return
), ->
$scope.$apply()
if auth.data.isLogged if auth.data.isLogged
playlists.refreshOwned().done (lists) -> playlists.refreshOwned().done (lists) ->

21
resources/assets/scripts/app/controllers/playlist.coffee
View file

@ -21,8 +21,8 @@ window.pfm.preloaders['playlist'] = [
] ]
module.exports = angular.module('ponyfm').controller 'playlist', [ module.exports = angular.module('ponyfm').controller 'playlist', [
'$scope', 'meta', '$state', 'playlists', '$modal', 'download-cached', '$window', '$timeout' '$scope', 'meta', '$state', 'playlists', '$mdDialog', 'download-cached', '$window', '$timeout'
($scope, meta, $state, playlists, $modal, cachedPlaylist, $window, $timeout) -> ($scope, meta, $state, playlists, $mdDialog, cachedPlaylist, $window, $timeout) ->
playlist = null playlist = null
playlists.fetch($state.params.id).done (playlistResponse) -> playlists.fetch($state.params.id).done (playlistResponse) ->
@ -31,18 +31,25 @@ module.exports = angular.module('ponyfm').controller 'playlist', [
meta.setTitle("#{playlist.title} | #{playlist.user.name}") meta.setTitle("#{playlist.title} | #{playlist.user.name}")
meta.setDescription("Listen to \"#{playlist.title}\", a playlist by #{playlist.user.name}, on the largest pony music site.") meta.setDescription("Listen to \"#{playlist.title}\", a playlist by #{playlist.user.name}, on the largest pony music site.")
$scope.share = () -> $scope.share = (ev) ->
dialog = $modal $mdDialog.show(
templateUrl: '/templates/partials/playlist-share-dialog.html', templateUrl: '/templates/partials/playlist-share-dialog.html',
controller: ['$scope', ($scope) -> $scope.playlist = playlist; $scope.close = () -> dialog.close()], scope: $scope,
show: true clickOutsideToClose: true,
controller: ($scope, $mdDialog) ->
$scope.closeDialog = ->
$mdDialog.cancel()
).then (() ->
return
), ->
$scope.$apply()
$scope.checkMixedLosslessness = (format) -> $scope.checkMixedLosslessness = (format) ->
if format.isMixedLosslessness == true if format.isMixedLosslessness == true
$scope.format = format $scope.format = format
$modal({scope: $scope, templateUrl: 'templates/partials/collection-mixed-losslessness-dialog.html', show: true}) $modal({scope: $scope, templateUrl: 'templates/partials/collection-mixed-losslessness-dialog.html', show: true})
$scope.getCachedPlaylist = (id, format) -> $scope.getCachedPlaylist = (id, format) ->
$scope.isInProgress = true $scope.isInProgress = true

4
resources/assets/scripts/app/controllers/track.coffee
View file

@ -15,8 +15,8 @@
# along with this program. If not, see <http://www.gnu.org/licenses/>. # along with this program. If not, see <http://www.gnu.org/licenses/>.
module.exports = angular.module('ponyfm').controller "track", [ module.exports = angular.module('ponyfm').controller "track", [
'$scope', 'meta', 'tracks', '$state', 'playlists', 'auth', 'favourites', '$modal', 'download-cached', '$window', '$timeout', '$mdDialog' '$scope', 'meta', 'tracks', '$state', 'playlists', 'auth', 'favourites', 'download-cached', '$window', '$timeout', '$mdDialog'
($scope, meta, tracks, $state, playlists, auth, favourites, $modal, cachedTrack, $window, $timeout, $mdDialog) -> ($scope, meta, tracks, $state, playlists, auth, favourites, cachedTrack, $window, $timeout, $mdDialog) ->
$scope.track $scope.track
$scope.trackId = parseInt($state.params.id) $scope.trackId = parseInt($state.params.id)
updateTrackData = (forceUpdate = false) -> updateTrackData = (forceUpdate = false) ->

4
resources/assets/styles/body.less vendored
View file

@ -136,6 +136,10 @@ a {
} }
.details-columns { .details-columns {
.flex-50 {
margin: 0 10px;
}
.left { .left {
margin-right: 310px; margin-right: 310px;
margin-left: 5px; margin-left: 5px;

2
resources/assets/styles/mobile.less vendored
View file

@ -76,7 +76,7 @@
z-index: 1011; z-index: 1011;
height: ~"calc(100% - 64px)"; height: ~"calc(100% - 64px)";
box-shadow: 0 8px 8px rgba(0,0,0,0.5); box-shadow: 0 8px 8px rgba(0,0,0,0.5);
overflow-y: scroll; overflow-y: auto;
> a { > a {
display: none; display: none;