From 3901313ed57a236ce7d07d532b7488f454e014f0 Mon Sep 17 00:00:00 2001 From: Josef Citrine Date: Sun, 17 Jul 2016 13:10:18 +0100 Subject: [PATCH] Fixed cross origin issues and player layout --- .../app/controllers/application.coffee | 9 ++++++++ .../scripts/app/controllers/artist.coffee | 21 +++++++++++++------ .../assets/scripts/app/services/player.coffee | 1 + resources/assets/scripts/shared/layout.coffee | 5 +---- resources/assets/styles/content.less | 5 +++++ resources/assets/styles/layout.less | 9 +++++--- resources/views/shared/_app_layout.blade.php | 2 +- 7 files changed, 38 insertions(+), 14 deletions(-) diff --git a/resources/assets/scripts/app/controllers/application.coffee b/resources/assets/scripts/app/controllers/application.coffee index dda2144f..9011b572 100644 --- a/resources/assets/scripts/app/controllers/application.coffee +++ b/resources/assets/scripts/app/controllers/application.coffee @@ -24,6 +24,7 @@ module.exports = angular.module('ponyfm').controller "application", [ $scope.notifActive = false $scope.nCount = 0 $scope.nCountFormatted = '0' + $scope.isPlaying = false $loadingElement = null loadingStateName = null @@ -49,6 +50,14 @@ module.exports = angular.module('ponyfm').controller "application", [ if !$scope.notifActive notifications.markAllAsRead() + $rootScope.$on 'player-starting-track', () -> + $scope.isPlaying = true + windowHeight = $(window).height() + $('.site-body').height windowHeight - ($('.top-bar').height() + $('.now-playing').height()) + + $rootScope.$on 'player-stopping', () -> + $scope.isPlaying = false + $rootScope.$on 'notificationsUpdated', () -> $scope.nCount = notifications.getUnreadCount() if $scope.nCount > 99 diff --git a/resources/assets/scripts/app/controllers/artist.coffee b/resources/assets/scripts/app/controllers/artist.coffee index eb4332f5..3c6ca361 100644 --- a/resources/assets/scripts/app/controllers/artist.coffee +++ b/resources/assets/scripts/app/controllers/artist.coffee @@ -27,16 +27,18 @@ module.exports = angular.module('ponyfm').controller "artist", [ artists.fetch($state.params.slug, force) .done (artistResponse) -> $scope.artist = artistResponse.artist + $scope.headerStyle = {'background-image': createGradient(artistResponse.artist.avatar_colors[0], artistResponse.artist.avatar_colors[1])} tempImg = document.createElement('img') - tempImg.setAttribute 'src', artistResponse.artist.avatars.small + tempImg.setAttribute 'src', artistResponse.artist.avatars.small + '?' + new Date().getTime() tempImg.setAttribute 'crossOrigin', '' tempImg.crossOrigin = 'Anonymous' + tempImg.addEventListener 'load', -> colorThief = new ColorThief(); palette = colorThief.getPalette(tempImg, 2) + $('.top-bar').css('background': selectHeaderColour(palette[0], palette[1])) - $scope.headerStyle = {'background-image': createGradient(palette[0], palette[1])} $scope.$apply() rgbArrayToCss = (array) -> @@ -45,8 +47,15 @@ module.exports = angular.module('ponyfm').controller "artist", [ hslArrayToCss = (array) -> 'hsl(' + array[0] + ',' + array[1] + '%,' + array[2] + '%)' + hexToRgb = (hex) -> + h = '0123456789ABCDEF' + r = h.indexOf(hex[1]) * 16 + h.indexOf(hex[2]) + g = h.indexOf(hex[3]) * 16 + h.indexOf(hex[4]) + b = h.indexOf(hex[5]) * 16 + h.indexOf(hex[6]) + return [r,g,b] + dimColor = (colour) -> - hsl = rgbToHsl(colour) + hsl = rgbToHsl(hexToRgb(colour)) if hsl[2] >= 50 hsl[2] = 50 @@ -54,13 +63,13 @@ module.exports = angular.module('ponyfm').controller "artist", [ hsl[1] = 30 return hslToRgb(hsl) else - return colour + return hexToRgb(colour) createGradient = (vib, dark) -> if $(window).width() <= 480 - 'linear-gradient(180deg, ' + rgbArrayToCss(vib) + ' 5%, ' + rgbArrayToCss(dimColor(dark)) + ' 95%)' + 'linear-gradient(180deg, ' + vib + ' 5%, ' + rgbArrayToCss(dimColor(dark)) + ' 95%)' else - 'linear-gradient(170deg, ' + rgbArrayToCss(vib) + ' 15%, ' + rgbArrayToCss(dark) + ' 110%)' + 'linear-gradient(170deg, ' + vib + ' 15%, ' + dark + ' 110%)' findHighestSaturation = (hsl1, hsl2) -> if hsl1[1] > hsl2[1] diff --git a/resources/assets/scripts/app/services/player.coffee b/resources/assets/scripts/app/services/player.coffee index 72c0ea10..58b698c8 100644 --- a/resources/assets/scripts/app/services/player.coffee +++ b/resources/assets/scripts/app/services/player.coffee @@ -56,6 +56,7 @@ module.exports = angular.module('ponyfm').factory('player', [ onstop: () -> $rootScope.safeApply -> track.isPlaying = false self.isPlaying = false + $rootScope.$broadcast 'player-stopping' onplay: () -> $rootScope.safeApply -> track.isPlaying = true diff --git a/resources/assets/scripts/shared/layout.coffee b/resources/assets/scripts/shared/layout.coffee index aeb490c7..b1460f6d 100644 --- a/resources/assets/scripts/shared/layout.coffee +++ b/resources/assets/scripts/shared/layout.coffee @@ -20,10 +20,7 @@ window.handleResize = () -> isMobile = windowWidth <= 480 $siteBody = $ '.site-body' - if isMobile - $siteBody.height windowHeight - ($('.top-bar').height() + $('.now-playing').height() + $('.search').height()) - else - $siteBody.height windowHeight - ($('.top-bar').height() + $('.now-playing').height()) + $siteBody.height windowHeight - $('.top-bar').height() $('.dropdown-menu').each () -> $this = $ this diff --git a/resources/assets/styles/content.less b/resources/assets/styles/content.less index 34447b75..c43ecabc 100644 --- a/resources/assets/styles/content.less +++ b/resources/assets/styles/content.less @@ -686,3 +686,8 @@ i { font-size: inherit; vertical-align: middle; } + +canvas { + visibility: hidden; + opacity: 0; +} diff --git a/resources/assets/styles/layout.less b/resources/assets/styles/layout.less index e80410a0..91e675e5 100644 --- a/resources/assets/styles/layout.less +++ b/resources/assets/styles/layout.less @@ -25,12 +25,10 @@ html body { background: #fff; font-family: "Roboto", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; padding: 0px !important; - overflow-x: hidden; + overflow: hidden; } header { - - .user-details { float: right; margin-right: 20px; @@ -80,6 +78,11 @@ header { bottom: 0; z-index: 1010; box-shadow: 0 0 6px rgba(0,0,0,0.3); + transform: translateY(70px); + transition: transform 0.5s @swift-ease-out; + &.playing { + transform: translateY(0); + } } .sidebar { diff --git a/resources/views/shared/_app_layout.blade.php b/resources/views/shared/_app_layout.blade.php index a83777ff..5a47e36e 100644 --- a/resources/views/shared/_app_layout.blade.php +++ b/resources/views/shared/_app_layout.blade.php @@ -67,7 +67,7 @@ @endif search -
+