4.2.3 cover art preview refactoring

app/common/directives.js

@@ -31,12 +31,6 @@ angular.module('JamStash').directive('sortable', function () {
                 $.fancybox.open(el);
                 compiled($scope);
             };
-            $scope.fancyboxOpenUrl = function () {
-                var el = angular.element(element.html()),
-                compiled = $compile(el);
-                $.fancybox.open(el);
-                compiled($scope);
-            };
         }
     };
 }])

app/common/json_changelog.json

@@ -1,4 +1,10 @@
 [
+    {
+        "date": "11/21/2014", "version": "4.2.3",
+        "changes": [
+        { "text": "- Album Art will change with song if Preview is already open."}
+        ]
+    },
     {
         "date": "11/17/2014", "version": "4.2.1",
         "changes": [

app/common/main-controller.js

@@ -108,10 +108,10 @@
         }
     };
     $rootScope.showQueue = function () {
-        $.fancybox.open();
+        // TO DO: Fix me
     };
     $rootScope.hideQueue = function () {
-        $.fancybox.close();
+        // TO DO: Fix me
     };
     $scope.toggleQueue = function () {
         var submenu = $('#QueuePreview');
@@ -121,84 +121,10 @@
             $rootScope.hideQueue();
         }
     };
-    /*
-    $(document).on("click", "a[name=coverartfancy]", function () {
-        $.fancybox({
-            beforeShow: function () {
-                //this.title = $('#songdetails_artist').html();
-            },
-            afterLoad: function () {
-                //this.inner.prepend( '<h1>1. My custom title</h1>' );
-                //this.content = '<h1>2. My custom title</h1>';
-            },
-            hideOnContentClick: true,
-            type: 'image',
-            openEffect: 'none',
-            closeEffect: 'none'
-        });
-    });
-    */
-    $("a.coverartfancy").fancybox({
-        beforeShow: function () {
-            //this.title = $('#songdetails_artist').html();
-        },
-        afterLoad: function () {
-            //this.inner.prepend( '<h1>1. My custom title</h1>' );
-            //this.content = '<h1>2. My custom title</h1>';
-        },
-        hideOnContentClick: true,
-        type: 'image',
-        openEffect: 'none',
-        closeEffect: 'none'
-    });
-    $('.showQueue').fancybox({
-        href: '#queue',
-        autoWidth: false,
-        width: '100%',
-        //margin: [50, 10, 50, 10], // top, right, bottom, left
-        openEffect: 'none',
-        closeEffect: 'none',
-        beforeLoad: function () {
-            if ($rootScope.queue == 0) {
-                this.close();
-            }
-        },
-        helpers: {
-            title: null
-        }
-    });
-    /*
-    $('.showSongs').fancybox({
-        href: '#songs',
-        autoWidth: false,
-        width: '100%',
-        //margin: [50, 10, 50, 10], // top, right, bottom, left
-        openEffect: 'none',
-        closeEffect: 'none',
-        beforeLoad: function () {
-            if ($rootScope.queue == 0) {
-                //this.close();
-            }
-        },
-        helpers: {
-            title: null
-        }
-    });
-    $rootScope.showSongs = function () {
-        alert($("#songs").html())
-        $.fancybox({
-            type: 'inline',  
-            content: $("#songs").html(),
-            autoWidth: false,
-            width: '100%',
-            transitionIn: 'elastic',  
-            transitionOut: 'elastic',
-            helpers: {
-                title: null
-            }
-        });
-    }
-    */
+
+    $scope.fancyboxOpenImage = function (url) {
+        utils.fancyboxOpenImage(url);
+    };
 
     $('#audiocontainer .scrubber').mouseover(function (e) {
         $('.audiojs .scrubber').stop().animate({ height: '8px' });

app/common/player-service.js

@@ -184,6 +184,11 @@
         });
         data.playing = true;
         data.selected = false;
+
+        if ($rootScope.playingSong != null && data.id != $rootScope.playingSong.id && $.fancybox.isOpen) {
+            utils.fancyboxOpenImage(data.coverartfull);
+        }
+
         $rootScope.playingSong = data;
 
         var id = data.id;

app/common/utils-service.js

@@ -8,6 +8,22 @@ angular.module('jamstash.utils', ['jamstash.settings'])
 .service('utils', ['$rootScope', 'globals', function ($rootScope, globals) {
     'use strict';
 
+    this.fancyboxOpenImage = function (url) {
+        $.fancybox.open({
+            helpers : {
+                overlay : {
+                    css : {
+                        'background' : 'rgba(0, 0, 0, 0.15)'
+                    }
+                }
+            },
+            hideOnContentClick: true,
+            type: 'image',
+            openEffect: 'none',
+            closeEffect: 'none',
+            href: url
+        });
+    };
     this.safeApply = function (fn) {
         var phase = $rootScope.$root.$$phase;
         if (phase === '$apply' || phase === '$digest') {

app/index.html

@@ -83,7 +83,7 @@
                         <a class="hover" id="NextTrack" title="Next Track" ng-click="nextTrack()"><img src="images/last_alt_24x24.png" /></a>
                     </div>
                     <div id="songdetails">
-                        <div id="coverart"><a class="coverartfancy" href="{{playingSong.coverartfull}}"><img ng-src="{{playingSong.coverartthumb}}" src="images/albumdefault_60.jpg" alt="" /></a></div>
+                        <div id="coverart"><a ng-click="fancyboxOpenImage(playingSong.coverartfull)"><img ng-src="{{playingSong.coverartthumb}}" src="images/albumdefault_60.jpg" alt="" /></a></div>
                         <ul>
                             <li class="song" id="{{playingSong.id}}" ng-bind-html="playingSong.name" title="{{playingSong.specs}}"></li>
                             <li class="album" ng-bind-html="playingSong.album"></li>

bower.json

@@ -1,6 +1,6 @@
 {
   "name": "jamstash",
-  "version": "4.2.2",
+  "version": "4.2.3",
   "description": "HTML5 Audio Streamer for Subsonic, Archive.org browsing and streaming",
   "authors": [
     "tsquillario (https://github.com/tsquillario)",

manifest.json

@@ -2,7 +2,7 @@
 	"manifest_version": 2,
 	"name": "Jamstash",
 	"description": "HTML5 Player for Subsonic & Archive.org",
-	"version": "4.2.2",
+	"version": "4.2.3",
 	"app": {
 		"launch": {
 			"web_url": "http://jamstash.com"

package.json

@@ -1,6 +1,6 @@
 {
   "name": "jamstash",
-  "version": "4.2.2",
+  "version": "4.2.3",
   "description": "HTML5 Audio Streamer for Subsonic, Archive.org browsing and streaming",
   "author": "Trevor Squillario (https://github.com/tsquillario)",
   "contributors": [