Merge pull request #35 from Zeusking19/master

Closes #28 - Lightbox for cover art

.gitignore

@@ -6,3 +6,4 @@ Homestead.yaml
 .env
 .vagrant
 _ide_helper.php
+.idea

app/Album.php

@@ -174,7 +174,8 @@ class Album extends Model
             ],
             'covers' => [
                 'small' => $album->getCoverUrl(Image::SMALL),
-                'normal' => $album->getCoverUrl(Image::NORMAL)
+                'normal' => $album->getCoverUrl(Image::NORMAL),
+                'original' => $album->getCoverUrl(Image::ORIGINAL)
             ],
             'url' => $album->url,
             'user' => [

app/Playlist.php

@@ -132,7 +132,8 @@ class Playlist extends Model
             ],
             'covers' => [
                 'small' => $playlist->getCoverUrl(Image::SMALL),
-                'normal' => $playlist->getCoverUrl(Image::NORMAL)
+                'normal' => $playlist->getCoverUrl(Image::NORMAL),
+                'original' => $playlist->getCoverUrl(Image::ORIGINAL)
             ],
             'url' => $playlist->url,
             'user' => [

app/Track.php

@@ -321,7 +321,8 @@ class Track extends Model
             'covers' => [
                 'thumbnail' => $track->getCoverUrl(Image::THUMBNAIL),
                 'small' => $track->getCoverUrl(Image::SMALL),
-                'normal' => $track->getCoverUrl(Image::NORMAL)
+                'normal' => $track->getCoverUrl(Image::NORMAL),
+                'original' => $track->getCoverUrl(Image::ORIGINAL)
             ],
             'streams' => [
                 'mp3' => $track->getStreamUrl('MP3'),

public/templates/albums/show.html

@@ -33,7 +33,7 @@
 
     <div class="stretch-to-bottom details-columns">
         <div class="right">
-            <img class="cover" pfm-src-loader="album.covers.normal" pfm-src-size="normal" />
+            <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" bo-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>

public/templates/partials/credits-dialog.html

@@ -44,6 +44,7 @@
     <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="https://angular-ui.github.io/bootstrap/" target="_blank">UI-Bootstrap</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>
   </ul>
 </div>
 <div class="modal-footer">

public/templates/playlists/show.html

@@ -32,7 +32,7 @@
 
     <div class="stretch-to-bottom details-columns">
         <div class="right">
-            <img class="cover" pfm-src-loader="playlist.covers.normal" pfm-src-size="normal" />
+            <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" bo-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>

public/templates/tracks/show.html

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

resources/assets/scripts/app/directives/colorbox.coffee

@@ -0,0 +1,22 @@
+# Pony.fm - A community for pony fan music.
+# Copyright (C) 2015 Zeusking19
+#
+# This program is free software: you can redistribute it and/or modify
+# it under the terms of the GNU Affero General Public License as published by
+# the Free Software Foundation, either version 3 of the License, or
+# (at your option) any later version.
+#
+# This program is distributed in the hope that it will be useful,
+# but WITHOUT ANY WARRANTY; without even the implied warranty of
+# MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+# GNU Affero General Public License for more details.
+#
+# You should have received a copy of the GNU Affero General Public License
+# along with this program.  If not, see <http://www.gnu.org/licenses/>.
+
+# Based on http://stackoverflow.com/questions/14641791/how-to-use-colorbox-with-angular-js
+
+angular.module('ponyfm').directive 'colorbox', ->
+    restrict: 'AC'
+    link: (scope, element, attrs) ->
+      $(element).colorbox({maxWidth:'90%', maxHeight:'90%'})