PonyMirrors/Pony.fm
1
0
Fork 0
mirror of https://github.com/Poniverse/Pony.fm.git synced 2024-11-26 14:58:00 +01:00
Code Issues Projects Releases Packages Wiki Activity

Ripping out things and swapping in Angular

Browse source
This commit is contained in:
Josef Citrine 2016-08-04 20:32:01 +01:00
parent eb0dd46648
commit b5fab06188
17 changed files with 166 additions and 174 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
gulpfile.js
View file

@ -81,7 +81,6 @@ gulp.task("webpack-dev-server", function () {
gulp.task("styles-app", function () {
var includedStyles = [
"resources/assets/styles/base/jquery-ui.css",
"resources/assets/styles/base/colorbox.css",
"resources/assets/styles/app.less"
];

2
public/templates/account/_layout.html
View file

@ -1,4 +1,4 @@
<md-tabs class="account-tabs manage-account-tabs" md-selected="currentNavItem" md-border-bottom>
<md-tabs class="account-tabs manage-account-tabs" md-selected="4" md-border-bottom>
<md-tab ui-sref=".uploader" name="uploader">Upload music</md-tab>
<md-tab ui-sref=".tracks" name="tracks">Tracks</md-tab>
<md-tab ui-sref=".albums" name="albums">Albums</md-tab>

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

@ -33,9 +33,7 @@
<div class="stretch-to-bottom details-columns">
<div class="right">
<a colorbox ng-href="{{::album.covers.original}}" pfm-eat-click>
<img class="cover" pfm-src-loader="::album.covers.normal" pfm-src-size="normal" />
</a>
<div class="share-buttons" pfm-share-buttons>
<a class="tumblr" ng-href="{{::album.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>

2
public/templates/directives/player.html
View file

@ -24,9 +24,7 @@
</ul>
<div class="image">
<div class="loader" ng-class="{showing: player.currentTrack.loadingProgress == 0}"><i class="material-icons">autorenew</i></div>
<a colorbox ng-href="{{player.currentTrack.covers.original}}" pfm-eat-click>
<img pfm-src-loader="player.currentTrack.covers.small" pfm-src-size="small" />
</a>
</div>
<div class="inner">
<div class="title">

29
public/templates/directives/users-list.html
View file

@ -1,19 +1,24 @@
<ul class="users-listing">
<li class="artist" ng-class="{'x-archived': user.is_archived}" ng-repeat="user in users track by user.id">
<a ng-href="{{::user.url}}">
<img class="image" pfm-src-loader="user.avatars.normal" pfm-src-size="normal" />
<span class="info">
<span class="title">{{::user.name}}</span>
<div layout="row" layout-xs="column" layout-wrap>
<p ng-show="!users.length" class="empty">
No users found&hellip;
</p>
<a ng-repeat="user in users track by user.id" ng-href="{{::user.url}}" class="clickable" flex-gt-xs="50" flex-gt-sm="25" flex-gt-md="20">
<md-card class="user">
<img class="md-card-image" pfm-src-loader="::user.avatars.normal" pfm-src-size="normal">
<md-card-content>
<span><strong>{{::user.name}}</strong></span>
</md-card-content>
<md-card-actions layout="row" layout-align="start center" class="user-info">
<span ng-hide="user.is_archived" class="published">
joined {{::user.created_at.date | momentFromNow}}
</span>
<span ng-show="::user.is_archived" class="published">
archived artist
</span>
</span>
</md-card-actions>
</md-card>
</a>
</li>
<li ng-show="!users.length" class="empty">
No users found&hellip;
</li>
</ul>
</div>

20
public/templates/partials/credits-dialog.html
View file

@ -1,6 +1,5 @@
<div class="modal" tabindex="-1" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<md-dialog ng-cloak>
<md-dialog-content>
<div class="modal-header">
<h4>
<button type="button" class="close" ng-click="$hide()" ng-hide="isLoading">&times;</button>
@ -40,6 +39,7 @@
<li><a href="http://lame.sourceforge.net/" target="_blank">LAME</a> - for encoding our MP3 files</li>
<li><a href="http://gulpjs.com/" target="_blank">gulp</a> - for being our asset pipeline</li>
<li><a href="https://nodejs.org/" target="_blank">Node.js</a> - for making JavaScript useful outside the browser</li>
<li><a href="https://material.angularjs.org/" target="_blank">Angular Material</a> - for bringing material design to Angular.js apps</li>
<li><a href="http://www.schillmania.com/projects/soundmanager2/" target="_blank">SoundManager</a> - for smoothing out cross-browser audio playback</li>
<li><a href="http://momentjs.com/" target="_blank">Moment.js</a> - for making JavaScript dates sane</li>
<li><a href="http://getbootstrap.com/" target="_blank">Bootstrap</a> - for its front-end components and making layouts easy</li>
@ -47,18 +47,18 @@
<li><a href="https://jquery.com/" target="_blank">jQuery</a> - for being useful all over the place</li>
<li><a href="https://github.com/mgonto/angularytics" target="_blank">Angularytics</a> - for making Google Analytics useful in a single-page app</li>
<li><a href="https://github.com/angular-ui/ui-router" target="_blank">UI-Router</a> - for making non-trivial Angular.js routes possible</li>
<li><a href="http://mgcrea.github.io/angular-strap/ target="_blank">AngularStrap</a> - for making Bootstrap and Angular.js get along</li>
<li><a href="http://mgcrea.github.io/angular-strap/" target="_blank">AngularStrap</a> - for making Bootstrap and Angular.js get along</li>
<li><a href="https://github.com/VentureCraft/revisionable" target="_blank">Revisionable</a> - for making audit logs easy</li>
<li><a href="https://github.com/jackmoore/colorbox" target="_blank">Colorbox</a> - for allowing us to have pretty lightboxes</li>
<li><a href="https://github.com/chjj/marked" target="_blank">Marked</a> - for the Markdown parser</li>
<li><a href="https://github.com/Hypercubed/angular-marked" target="_blank">angular-marked</a> - for giving us an Angular way to use Marked</li>
<li><a href="http://www.chartjs.org/" target="_blank">chart.js</a> - for giving us beautiful, programmable charts</li>
<li><a href="http://jtblin.github.io/angular-chart.js/" target="_blank">angular-chart.js</a> - for making using chart.js with Angular easy</li>
<li><a href="https://github.com/lokesh/color-thief" target="_blank">Color Thief</a> - for making color palettes easy</li>
<li><a href="https://github.com/ksubileau/color-thief-php" target="_blank">Color Thief PHP</a> - for bringing color-thief server side</li>
</ul>
</div>
<div class="modal-footer">
</md-dialog-content>
<md-dialog-actions layout="row">
<a class="btn btn-flat btn-primary" ng-click="$hide()" ng-disabled="isLoading">Close</a>
</div>
</div>
</div>
</div>
</md-dialog-actions>
</md-dialog>

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

@ -32,9 +32,7 @@
<div class="stretch-to-bottom details-columns">
<div class="right">
<a colorbox ng-href="{{::playlist.covers.original}}" pfm-eat-click>
<img class="cover" pfm-src-loader="::playlist.covers.normal" pfm-src-size="normal" />
</a>
<div class="share-buttons" pfm-share-buttons>
<a class="tumblr" ng-href="{{::playlist.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>

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

@ -39,6 +39,26 @@
<li><a href="#" class="btn btn-default" 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-default" ng-href="/tracks/{{::track.id}}-{{::track.slug}}/edit">Edit</a></li>
<md-button class="md-icon-button" aria-label="Download">
<md-tooltip md-direction="bottom" md-delay="200">Download</md-tooltip>
<md-icon>file_download</md-icon>
</md-button>
<md-button class="md-icon-button" aria-label="Favourite">
<md-tooltip md-direction="bottom" md-delay="200">Favourite</md-tooltip>
<md-icon>favorite_border</md-icon>
</md-button>
<md-button class="md-icon-button" aria-label="Add to playlist">
<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">
<md-tooltip md-direction="bottom" md-delay="200">Share or embed</md-tooltip>
<md-icon>share</md-icon>
</md-button>
</ul>
<header>

2
public/templates/tracks/show.html
View file

@ -1,8 +1,6 @@
<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>
<ul class="stats">
<li>Published: <strong>{{::track.published_at}}</strong></li>

1
resources/assets/scripts/app/app.coffee
View file

@ -33,7 +33,6 @@ require 'angular-ui-router'
require 'angular-material'
require '../base/angular-ui-sortable'
require '../base/angularytics'
require '../base/jquery.colorbox'
require '../base/jquery.cookie'
require '../base/jquery.timeago'
require 'script!../base/marked'

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

@ -15,8 +15,8 @@
# along with this program. If not, see <http://www.gnu.org/licenses/>.
module.exports = angular.module('ponyfm').controller "application", [
'$scope', 'auth', '$location', 'upload', '$state', '$stateParams', '$injector', '$rootScope', 'playlists', 'notifications'
($scope, auth, $location, upload, $state, $stateParams, $injector, $rootScope, playlists, notifications) ->
'$scope', 'auth', '$location', 'upload', '$state', '$stateParams', '$injector', '$rootScope', 'playlists', 'notifications', '$timeout'
($scope, auth, $location, upload, $state, $stateParams, $injector, $rootScope, playlists, notifications, $timeout) ->
$scope.auth = auth.data
$scope.$state = $state
$scope.$stateParams = $stateParams
@ -25,6 +25,8 @@ module.exports = angular.module('ponyfm').controller "application", [
$scope.nCount = 0
$scope.nCountFormatted = '0'
$scope.isPlaying = false
$scope.hideLoading = false
$scope.loading = true
$loadingElement = null
loadingStateName = null
@ -84,6 +86,7 @@ module.exports = angular.module('ponyfm').controller "application", [
window.setTimeout (-> window.handleResize()), 0
$scope.loading = false
$scope.hideLoading = true
$scope.stateIncludes = (state) ->
if $loadingElement
@ -128,7 +131,15 @@ module.exports = angular.module('ponyfm').controller "application", [
oldParts = oldState.name.split '.'
zipped = _.zip(newParts, oldParts)
$scope.loading = true;
$scope.loading = true
# Don't show the loading bar until 400ms has passed
# Avoids flickering on fast connections while still
# providing feedback to users on slow connections
$timeout(() ->
if $scope.loading
$scope.hideLoading = false
, 400)
stateToInject = angular.copy newState
stateToInject.params = newParams

68
resources/assets/scripts/app/controllers/sidebar.coffee
View file

@ -15,8 +15,8 @@
# along with this program. If not, see <http://www.gnu.org/licenses/>.
module.exports = angular.module('ponyfm').controller "sidebar", [
'$scope', '$modal', 'playlists', '$rootScope', '$timeout'
($scope, $modal, playlists, $rootScope, $timeout) ->
'$scope', '$modal', 'playlists', '$rootScope', '$timeout', '$mdDialog', '$mdMedia'
($scope, $modal, playlists, $rootScope, $timeout, $mdDialog, $mdMedia) ->
$scope.playlists = playlists.pinnedPlaylists
$scope.menuVisible = false
$scope.menuActive = false
@ -36,10 +36,7 @@ module.exports = angular.module('ponyfm').controller "sidebar", [
$rootScope.$on('sidebarHide', () ->
$timeout(() ->
$scope.navStyle.transform = ''
$scope.menuAnimated = true
$scope.menuVisible = false
$scope.menuActive = false
hideNav()
)
)
@ -77,46 +74,13 @@ module.exports = angular.module('ponyfm').controller "sidebar", [
playlists.deletePlaylist playlist
$scope.showCredits = () ->
$modal
useFullScreen = ($mdMedia('sm') || $mdMedia('xs')) && $scope.customFullscreen
$mdDialog.show
templateUrl: '/templates/partials/credits-dialog.html'
controller: 'credits',
show: true
clickOutsideToClose: true,
fullscreen: useFullScreen
# Swipable side nav code
startX = 0
currentX = 0
touchingNav = false
onStart = (e) ->
if !$scope.menuVisible
return
startX = e.touches[0].pageX
currentX = startX
touchingNav = true
$scope.menuAnimated = false
requestAnimationFrame(update)
onMove = (e) ->
if !touchingNav
return
currentX = e.touches[0].pageX
translateX = Math.min(0, currentX - startX)
if translateX < 0
e.preventDefault()
onEnd = (e) ->
if !touchingNav
return
touchingNav = false
translateX = Math.min(0, currentX - startX)
$scope.menuAnimated = true
if translateX < 0
hideNav()
hideNav = () ->
@ -124,22 +88,4 @@ module.exports = angular.module('ponyfm').controller "sidebar", [
$scope.menuAnimated = true
$scope.menuVisible = false
$scope.menuActive = false
$scope.$apply()
update = () ->
if !touchingNav
return
requestAnimationFrame(update)
translateX = 170 + Math.min(0, currentX - startX)
$scope.navStyle.transform = 'translateX(' + translateX + 'px)'
$scope.$apply()
addEventListeners = () ->
document.addEventListener('touchstart', onStart)
document.addEventListener('touchmove', onMove)
document.addEventListener('touchend', onEnd)
addEventListeners()
]

8
resources/assets/scripts/app/directives/share-buttons.coffee
View file

@ -16,7 +16,7 @@
module.exports = angular.module('ponyfm').directive 'pfmShareButtons', () ->
(scope, element) ->
window.setTimeout((->
Tumblr.activate_share_on_tumblr_buttons()
FB.XFBML.parse(null, -> element.addClass('loaded'))
), 0)
#window.setTimeout((->
# Tumblr.activate_share_on_tumblr_buttons()
# FB.XFBML.parse(null, -> element.addClass('loaded'))
#), 0)

17
resources/assets/scripts/app/services/color.coffee
View file

@ -31,19 +31,30 @@ module.exports = angular.module('ponyfm').factory('color', [
b = h.indexOf(hex[5]) * 16 + h.indexOf(hex[6])
return [r,g,b]
dimColor: (colour) ->
dimColor: (colour, alt) ->
hsl = self.rgbToHsl(self.hexToRgb(colour))
altHsl = self.rgbToHsl(self.hexToRgb(alt))
if hsl[2] >= 50
hsl[2] = 50
if hsl[1] <= 20
hsl[1] = 30
return self.hslToRgb(hsl)
if hsl[2] <= 20
if altHsl[2] <= 50
hsl = altHsl
hsl[2] = 20
else
return self.hexToRgb(colour)
if hsl[1] <= 25
hsl[0] = altHsl[0]
hsl[1] = altHsl[1]
hsl[2] = 20
return self.hslToRgb(hsl)
createGradient: (vib, dark) ->
'linear-gradient(180deg, ' + vib + ' 0%, ' + self.rgbArrayToCss(self.dimColor(dark)) + ' 95%)'
'linear-gradient(180deg, ' + vib + ' 0%, ' + self.rgbArrayToCss(self.dimColor(dark, vib)) + ' 95%)'
findHighestSaturation: (hsl1, hsl2) ->
if hsl1[1] > hsl2[1]

20
resources/assets/styles/content.less vendored
View file

@ -566,6 +566,10 @@ html {
}
}
.loading .notification-menu md-icon {
display: none;
}
.notification-menu {
float: right;
margin-top: 9px;
@ -575,12 +579,9 @@ html {
top: 0;
right: 60px;
a {
.md-button .material-icons {
color: #fff;
i {
font-size: 30px;
}
&:hover {
color: #eee;
@ -698,7 +699,7 @@ form.thin md-input-container {
margin: 15px 0 0 0;
}
md-card.album {
md-card.album, md-card.user {
md-card-content {
padding: 4px 12px;
span {
@ -718,6 +719,15 @@ md-card.album {
min-height: 16px;
}
}
.user-info {
margin: 0 12px 8px;
span {
margin: 0;
font-size: 12px;
}
}
}
.button-bar {

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

@ -344,7 +344,7 @@
right: 60px !important;
font-size: 22px;
margin-right: 0 !important;
margin-top: 12px !important;
margin-top: 8px !important;
a {
padding: 13px 7px 22px;

5
resources/views/shared/_app_layout.blade.php
View file

@ -63,12 +63,11 @@
</md-menu>
</div>
<div class="notification-menu">
<a href="#" ng-click="notifPulloutToggle()"><i class="material-icons">notifications</i></a>
<md-button ng-click="notifPulloutToggle()" class="md-icon-button"><md-icon>notifications</md-icon></md-button>
<div class="counter" ng-class="{'show': nCount > 0}">@{{ nCountFormatted }}</div>
</div>
@endif
<a href="#" ng-click="toggleSearchBar()" class="search-button"><i class="material-icons">search</i></a>
<md-progress-linear md-mode="indeterminate" class="loader" ng-disabled="!loading"></md-progress-linear>
<md-progress-linear md-mode="indeterminate" class="loader" ng-disabled="hideLoading"></md-progress-linear>
</div>
<div class="now-playing" ng-class="{'playing': isPlaying}">
<pfm-player></pfm-player>