mirror of
https://github.com/Poniverse/Pony.fm.git
synced 2024-11-22 21:18:00 +01:00
New track page, fixed lyric bug
This commit is contained in:
Josef Citrine
parent
5077b16631
commit
5dc23d916d
13 changed files with 201 additions and 101 deletions
|
|
@ -98,7 +98,7 @@ gulp.task("styles-app", function () {
|
|||
if (!styleCache.hasOwnProperty(file))
|
||||
continue;
|
||||
|
||||
if (!endsWith(file, "app.less"))
|
||||
if (!endsWith(file, "app.less") && !endsWith(file, "angular-material.css"))
|
||||
continue;
|
||||
|
||||
delete styleCache[file];
|
||||
|
|
|
|||
|
|
@ -24,7 +24,7 @@
|
|||
"gulp-autoprefixer": "3.1.0",
|
||||
"gulp-cached": "1.1.0",
|
||||
"gulp-clean-css": "2.0.10",
|
||||
"gulp-concat": "2.6.0",
|
||||
"gulp-concat": "^2.6.0",
|
||||
"gulp-header": "1.8.2",
|
||||
"gulp-if": "2.0.1",
|
||||
"gulp-less": "3.1.0",
|
||||
|
|
@ -36,6 +36,7 @@
|
|||
"gulp-util": "3.0.7",
|
||||
"jquery": "2.2.0",
|
||||
"jquery-ui": "1.10.5",
|
||||
"merge-stream": "^1.0.0",
|
||||
"script-loader": "0.7.0",
|
||||
"underscore": "1.8.3",
|
||||
"webpack": "1.13.1",
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<div layout="row" layout-xs="column" layout-wrap>
|
||||
<a ng-repeat="album in albums track by album.id" ng-href="{{::album.url}}" class="clickable" flex-gt-xs="50" flex-gt-sm="25" flex-gt-md="20">
|
||||
<div layout="row" layout-wrap>
|
||||
<a ng-repeat="album in albums track by album.id" ng-href="{{::album.url}}" class="clickable" flex-xs="100" flex-sm="50" flex-md="25" flex-lg="20">
|
||||
<md-card class="album">
|
||||
<img class="md-card-image" pfm-src-loader="::album.covers.normal" pfm-src-size="normal">
|
||||
|
||||
|
|
|
|||
|
|
@ -1,9 +1,6 @@
|
|||
<div class="single-player">
|
||||
<a href="#" class="play-button" pfm-eat-click ng-click="play()">
|
||||
<div class="button-container">
|
||||
<i class="material-icons" ng-if="!track.isPlaying">play_arrow</i>
|
||||
<i class="material-icons" ng-if="track.isPlaying">pause</i>
|
||||
</div>
|
||||
</a>
|
||||
<img pfm-src-loader="::image" pfm-src-size="thumbnail" />
|
||||
<md-button class="md-fab md-primary" pfm-eat-click ng-click="play()">
|
||||
<md-icon ng-if="!track.isPlaying">play_arrow</md-icon>
|
||||
<md-icon ng-if="track.isPlaying">pause</md-icon>
|
||||
</md-button>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,67 +1,65 @@
|
|||
<div class="resource-details track-details">
|
||||
<div class="buttons" layout="row">
|
||||
<md-menu>
|
||||
<md-button class="md-icon-button" aria-label="Download" ng-click="$mdOpenMenu($event)">
|
||||
<md-tooltip md-direction="bottom" md-delay="200">Download</md-tooltip>
|
||||
<md-icon>file_download</md-icon>
|
||||
</md-button>
|
||||
|
||||
<md-menu-content>
|
||||
<md-menu-item ng-repeat="format in ::track.formats" ng-hide="isInProgress">
|
||||
<md-button target="_blank" ng-if="::!format.isCacheable" ng-href="{{::format.url}}">
|
||||
{{::format.name}} ({{::format.size}})
|
||||
<pfm-track-player track="::track"></pfm-track-player>
|
||||
<header layout="row" layout-xs="column">
|
||||
<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" />
|
||||
<div layout="row" layout-xs="column" flex>
|
||||
<div flex="50" flex-xs="100" class="info">
|
||||
<h1>{{track.title}}</h1>
|
||||
<h2 ng-if="track.album">From: <a ng-href="{{::track.album.url}}">{{::track.album.title}}</a></h2>
|
||||
<h2>By: <a ng-href="{{::track.user.url}}">{{::track.user.name}}</a></h2>
|
||||
</div>
|
||||
<div class="buttons" layout="row" layout-align="end top" layout-align-xs="center center" flex="50" flex-xs="100">
|
||||
<md-menu>
|
||||
<md-button class="md-icon-button" aria-label="Download" ng-click="$mdOpenMenu($event)">
|
||||
<md-tooltip md-direction="bottom" md-delay="200">Download</md-tooltip>
|
||||
<md-icon>file_download</md-icon>
|
||||
</md-button>
|
||||
<md-button ng-if="format.isCacheable" ng-click="getCachedTrack(track.id, format.name);" href="">
|
||||
{{::format.name}} ({{::format.size}})
|
||||
|
||||
<md-menu-content>
|
||||
<md-menu-item ng-repeat="format in ::track.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="getCachedTrack(track.id, format.name);" href="">
|
||||
{{::format.name}} ({{::format.size}})
|
||||
</md-button>
|
||||
</md-menu-item>
|
||||
</md-menu-content>
|
||||
</md-menu>
|
||||
|
||||
<pfm-favourite-button resource="::track" type="track"></pfm-favourite-button>
|
||||
|
||||
<md-menu>
|
||||
<md-button class="md-icon-button" aria-label="Add to playlist" ng-show="::auth.isLogged" ng-click="$mdOpenMenu($event)">
|
||||
<md-tooltip md-direction="bottom" md-delay="200">Add to playlist</md-tooltip>
|
||||
<md-icon>playlist_add</md-icon>
|
||||
</md-button>
|
||||
</md-menu-item>
|
||||
</md-menu-content>
|
||||
</md-menu>
|
||||
|
||||
<pfm-favourite-button resource="::track" type="track"></pfm-favourite-button>
|
||||
<md-menu-content>
|
||||
<md-menu-item ng-repeat="playlist in playlists track by playlist.id">
|
||||
<md-button ng-class="{disabled: playlist.message, 'btn-success': playlist.message}"
|
||||
ng-href="{{::playlist.url}}"
|
||||
ng-click="addToPlaylist(playlist); $event.stopPropagation()">
|
||||
<span ng-hide="playlist.message">{{::playlist.title}}</span>
|
||||
<span ng-show="playlist.message">{{playlist.message}}</span>
|
||||
</md-button>
|
||||
</md-menu-item>
|
||||
</md-menu-content>
|
||||
</md-menu>
|
||||
|
||||
<md-menu>
|
||||
<md-button class="md-icon-button" aria-label="Add to playlist" ng-show="::auth.isLogged" ng-click="$mdOpenMenu($event)">
|
||||
<md-tooltip md-direction="bottom" md-delay="200">Add to playlist</md-tooltip>
|
||||
<md-icon>playlist_add</md-icon>
|
||||
</md-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-menu-content>
|
||||
<md-menu-item ng-repeat="playlist in playlists track by playlist.id">
|
||||
<md-button ng-class="{disabled: playlist.message, 'btn-success': playlist.message}"
|
||||
ng-href="{{::playlist.url}}"
|
||||
ng-click="addToPlaylist(playlist); $event.stopPropagation()">
|
||||
<span ng-hide="playlist.message">{{::playlist.title}}</span>
|
||||
<span ng-show="playlist.message">{{playlist.message}}</span>
|
||||
</md-button>
|
||||
</md-menu-item>
|
||||
</md-menu-content>
|
||||
</md-menu>
|
||||
|
||||
<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="::track.permissions.edit" ng-href="/tracks/{{::track.id}}-{{::track.slug}}/edit">
|
||||
<md-tooltip md-direction="bottom" md-delay="200">Edit</md-tooltip>
|
||||
<md-icon>edit</md-icon>
|
||||
</md-button>
|
||||
</div>
|
||||
|
||||
<header>
|
||||
<pfm-track-player class="hidden-xs" track="::track"></pfm-track-player>
|
||||
<h1>{{track.title}}</h1>
|
||||
<h2>
|
||||
<span ng-if="track.album">
|
||||
from: <a ng-href="{{::track.album.url}}">{{::track.album.title}}</a>
|
||||
</span>
|
||||
|
||||
by: <a ng-href="{{::track.user.url}}">{{::track.user.name}}</a>
|
||||
</h2>
|
||||
<md-button class="md-icon-button" aria-label="Edit" ng-show="::track.permissions.edit" ng-href="/tracks/{{::track.id}}-{{::track.slug}}/edit">
|
||||
<md-tooltip md-direction="bottom" md-delay="200">Edit</md-tooltip>
|
||||
<md-icon>edit</md-icon>
|
||||
</md-button>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<pfm-track-player class="visible-xs-block" track="::track" size="normal"></pfm-track-player>
|
||||
|
||||
<div ui-view></div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,17 +1,31 @@
|
|||
<div class="stretch-to-bottom details-columns">
|
||||
<div class="right">
|
||||
<img class="cover" pfm-src-loader="track.covers.normal" pfm-src-size="normal"/>
|
||||
<div class="stretch-to-bottom details-columns" layout="row" layout-xs="column">
|
||||
<div flex="50" flex-xs="100">
|
||||
<div class="stats">
|
||||
<p>Released on {{::track.readableDate}}</p>
|
||||
<p>
|
||||
<ng-pluralize count="::track.stats.views"
|
||||
when="{'0': '0 views',
|
||||
'one': '1 view',
|
||||
'other': '{} views'}">
|
||||
</ng-pluralize> |
|
||||
<ng-pluralize count="::track.stats.plays"
|
||||
when="{'0': '0 plays',
|
||||
'one': '1 play',
|
||||
'other': '{} plays'}">
|
||||
</ng-pluralize> |
|
||||
<ng-pluralize count="::track.stats.downloads"
|
||||
when="{'0': '0 downloads',
|
||||
'one': '1 download',
|
||||
'other': '{} downloads'}">
|
||||
</ng-pluralize> |
|
||||
<ng-pluralize count="::track.stats.favourites"
|
||||
when="{'0': '0 favourites',
|
||||
'one': '1 favourite',
|
||||
'other': '{} favourites'}">
|
||||
</ng-pluralize>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<ul class="stats">
|
||||
<li>Published: <strong>{{::track.published_at}}</strong></li>
|
||||
<li>Views: <strong>{{::track.stats.views}}</strong></li>
|
||||
<li>Plays: <strong>{{::track.stats.plays}}</strong></li>
|
||||
<li>Downloads: <strong>{{::track.stats.downloads}}</strong></li>
|
||||
<li>Favourites: <strong>{{::track.stats.favourites}}</strong></li>
|
||||
<li><strong><a ui-sref="content.track.stats">View more stats</a></strong></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="left">
|
||||
<div class="description" ng-if="track.description.length">
|
||||
<h2>Description</h2>
|
||||
<p marked="track.description"></p>
|
||||
|
|
@ -20,13 +34,15 @@
|
|||
<div ng-if="track.is_vocal && track.lyrics.length" class="lyrics-panel">
|
||||
<h2>Lyrics</h2>
|
||||
<div class="lyrics revealable">
|
||||
<div class="reveal">
|
||||
<div class="reveal" ng-show="track.lyrics.length > 300">
|
||||
<a href="#">Click to reveal full lyrics…</a>
|
||||
</div>
|
||||
<p class="content" ng-bind-html="track.lyrics | noHTML | nl2br"></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div flex="50" flex-xs="100">
|
||||
<pfm-comments type="track" resource="track"></pfm-comments>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -19,10 +19,12 @@ module.exports = angular.module('ponyfm').controller "track", [
|
|||
($scope, meta, tracks, $state, playlists, auth, favourites, $modal, cachedTrack, $window, $timeout, $mdDialog) ->
|
||||
$scope.track
|
||||
$scope.trackId = parseInt($state.params.id)
|
||||
|
||||
updateTrackData = (forceUpdate = false) ->
|
||||
tracks.fetch($scope.trackId, forceUpdate).done (trackResponse) ->
|
||||
$scope.track = trackResponse.track
|
||||
console.log(moment($scope.track.published_at))
|
||||
$scope.track.readableDate = moment($scope.track.published_at).format("Do MMM YYYY")
|
||||
|
||||
meta.setTitle("#{$scope.track.title} | #{$scope.track.user.name}")
|
||||
meta.setDescription("Listen to \"#{$scope.track.title}\" by #{$scope.track.user.name} on the largest pony music site.")
|
||||
|
||||
|
|
@ -63,7 +65,6 @@ module.exports = angular.module('ponyfm').controller "track", [
|
|||
).then (() ->
|
||||
return
|
||||
), ->
|
||||
console.log $state.current
|
||||
$scope.$apply()
|
||||
|
||||
$scope.addToNewPlaylist = () ->
|
||||
|
|
|
|||
|
|
@ -33,7 +33,7 @@ window.handleResize = () ->
|
|||
$this.css
|
||||
'max-height': newMaxHeight
|
||||
|
||||
$('ui-view').each () ->
|
||||
$('.site-content').each () ->
|
||||
$this = $ this
|
||||
newHeight = windowHeight - $this.offset().top
|
||||
if isMobile
|
||||
|
|
@ -55,6 +55,14 @@ window.handleResize = () ->
|
|||
$this.css {height: 'auto'}
|
||||
$(this).fadeOut 200
|
||||
|
||||
$('.blurred-background').each () ->
|
||||
$this = $ this
|
||||
$this.height $('.resource-details header').height() + 55
|
||||
|
||||
$('.resource-details .single-player button').each () ->
|
||||
$this = $ this
|
||||
$this.css 'top', $('.resource-details header').height() + 5
|
||||
|
||||
window.alignVertically = (element) ->
|
||||
$element = $(element)
|
||||
$parent = $element.parent()
|
||||
|
|
|
|||
9
resources/assets/styles/body.less
vendored
9
resources/assets/styles/body.less
vendored
|
|
@ -36,6 +36,12 @@ a {
|
|||
.site-content{
|
||||
.box-sizing(border-box);
|
||||
padding: 10px;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
|
||||
> ui-view {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
h1, h2 {
|
||||
margin: 1px 1px 5px;
|
||||
|
|
@ -105,7 +111,7 @@ a {
|
|||
left: -1px;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 400;
|
||||
z-index: 10;
|
||||
border: 2px solid #fff;
|
||||
cursor: pointer;
|
||||
|
||||
|
|
@ -178,6 +184,7 @@ a {
|
|||
input[type=text] {
|
||||
margin: 0px;
|
||||
padding: 5px;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -22,6 +22,7 @@
|
|||
|
||||
.stretch-to-bottom {
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
.dropdowns {
|
||||
|
|
|
|||
68
resources/assets/styles/content.less
vendored
68
resources/assets/styles/content.less
vendored
|
|
@ -150,10 +150,52 @@
|
|||
}
|
||||
|
||||
.resource-details {
|
||||
&.track-details {
|
||||
.info {
|
||||
margin-left: 15px;
|
||||
}
|
||||
|
||||
&.track-details, &.album-details, &.playlist-details {
|
||||
> header {
|
||||
h2, h1 {
|
||||
margin-left: 47px;
|
||||
margin: -10px -10px 20px;
|
||||
padding: 20px;
|
||||
background: transparent;
|
||||
box-shadow: inset 0 -5px 10px -5px rgba(0,0,0,0.3);
|
||||
position: relative;
|
||||
|
||||
.blurred-background {
|
||||
width: 100%;
|
||||
height: 250px;
|
||||
-webkit-filter: blur(30px) brightness(0.8);
|
||||
filter: blur(15px) brightness(0.75);
|
||||
z-index: -1;
|
||||
top: 0;
|
||||
left: 0;
|
||||
overflow: hidden;
|
||||
background-color: #a2a2a2;
|
||||
background-position: left center;
|
||||
background-size: 50%;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
h1, h2, .buttons md-icon, a {
|
||||
color: #fff;
|
||||
text-shadow: 0 1px 5px black;
|
||||
}
|
||||
|
||||
img {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
background: #fff;
|
||||
.material-shadow(2);
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 28px;
|
||||
}
|
||||
|
||||
h2 {
|
||||
margin-top: 2px;
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -227,7 +269,6 @@
|
|||
|
||||
> header {
|
||||
padding: 5px;
|
||||
background: #eee;
|
||||
overflow: hidden;
|
||||
margin-bottom: 10px;
|
||||
|
||||
|
|
@ -349,12 +390,23 @@ html .single-player .play-button {
|
|||
display: block;
|
||||
}
|
||||
|
||||
.single-player, .tracks-listing li .image {
|
||||
float: left;
|
||||
width: @icon-size;
|
||||
height: @icon-size;
|
||||
.single-player {
|
||||
position: relative;
|
||||
button {
|
||||
position: absolute;
|
||||
top: 270px;
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.tracks-listing li .image {
|
||||
float: left;
|
||||
position: relative;
|
||||
width: 43px;
|
||||
height: 43px;
|
||||
}
|
||||
|
||||
.single-player, .tracks-listing li .image {
|
||||
.button-container {
|
||||
display: table;
|
||||
width: 100%;
|
||||
|
|
|
|||
11
resources/assets/styles/layout.less
vendored
11
resources/assets/styles/layout.less
vendored
|
|
@ -20,12 +20,13 @@
|
|||
@import 'mixins';
|
||||
@import 'variables';
|
||||
|
||||
html body {
|
||||
html, body {
|
||||
height: 100%;
|
||||
background: #fff;
|
||||
background: transparent;
|
||||
font-family: "Roboto", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
|
||||
padding: 0px !important;
|
||||
overflow: hidden;
|
||||
overflow-y: hidden !important;
|
||||
position: initial !important;
|
||||
}
|
||||
|
||||
|
|
@ -117,7 +118,7 @@ header {
|
|||
padding-left: 6px;
|
||||
width: 100%;
|
||||
max-width: 94%;
|
||||
padding-top: 13px;
|
||||
padding-top: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -247,7 +248,7 @@ header {
|
|||
.site-content {
|
||||
overflow: hidden;
|
||||
margin-left: @pfm-sidebar-size;
|
||||
background: #fff;
|
||||
background: transparent;
|
||||
height: 100%;
|
||||
z-index: 100;
|
||||
}
|
||||
|
|
@ -376,8 +377,6 @@ md-backdrop {
|
|||
}
|
||||
|
||||
.buttons {
|
||||
margin-bottom: 10px;
|
||||
|
||||
.md-menu {
|
||||
padding: 0;
|
||||
}
|
||||
|
|
|
|||
22
resources/assets/styles/mobile.less
vendored
22
resources/assets/styles/mobile.less
vendored
|
|
@ -13,7 +13,6 @@
|
|||
|
||||
.site-content {
|
||||
margin-left: 0px;
|
||||
overflow: scroll;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
|
|
@ -437,6 +436,27 @@
|
|||
.modal-dialog {
|
||||
width: 95%;
|
||||
}
|
||||
|
||||
.resource-details {
|
||||
&.track-details, &.album-details, &.playlist-details {
|
||||
> header {
|
||||
img {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.info {
|
||||
margin-left: 0;
|
||||
margin-top: 15px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.buttons {
|
||||
margin-top: 15px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Super small phones like the iPhone 5
|
||||
|
|
|
|||
Loading…
Reference in a new issue