Fixed cross origin issues and player layout

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

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]

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

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

resources/assets/styles/content.less

@@ -686,3 +686,8 @@ i {
   font-size: inherit;
   vertical-align: middle;
 }
+
+canvas {
+  visibility: hidden;
+  opacity: 0;
+}

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 {

resources/views/shared/_app_layout.blade.php

@@ -67,7 +67,7 @@
             @endif
             <a href="#" ng-click="toggleSearchBar()" class="search-button"><i class="material-icons">search</i></a>
         </div>
-        <div class="now-playing">
+        <div class="now-playing" ng-class="{'playing': isPlaying}">
             <pfm-player></pfm-player>
         </div>
     </header>