Merge branch 'development' of Halftone/halftone into master

app/Fieldprotocol/Music/Album.php

@@ -19,4 +19,16 @@ class Album extends Eloquent {
     return $this->hasMany('Fieldprotocol\Music\Song');
   }
 
+  public function links() {
+    return $this->hasMany('Fieldprotocol\Music\StoreLink', 'album_id');
+  }
+
+	public function releaseDate() {
+		return date('F j, Y', strtotime($this->release_date));
+	}
+
+	public function releaseYear() {
+		return date('Y', strtotime($this->release_date));
+	}
+
 }

app/Fieldprotocol/Music/StoreLink.php

@@ -0,0 +1,20 @@
+<?php
+
+namespace Fieldprotocol\Music;
+
+use Illuminate\Database\Eloquent\Model as Eloquent;
+
+class StoreLink extends Eloquent {
+
+	protected $table = 'store_links';
+
+	protected $fillable = [
+		'link_name',
+		'link_ref',
+	];
+
+  public function album() {
+    return $this->belongsTo('Fieldprotocol\Music\Album', 'album_id');
+  }
+
+}

app/routes.php

@@ -1,9 +1,15 @@
 <?php
 
-// Home view(s)
+// Main view routes
-require 'routes/index.php';
+require 'routes/pages/index.php';
-require 'routes/about.php';
+require 'routes/pages/about.php';
-require 'routes/contact.php';
+require 'routes/pages/contact.php';
-require 'routes/home.php';
+require 'routes/pages/home.php';
-require 'routes/music.php';
+require 'routes/pages/music.php';
-require 'routes/shows.php';
+require 'routes/pages/shows.php';
+
+// API routes
+require 'routes/apiv1/music.php';
+
+// Errors
+require 'routes/errors/404.php';

app/routes/apiv1/music.php

@@ -0,0 +1,38 @@
+<?php
+
+// retrieve album info
+$app->get('/apiv1/music/album-info/:albumid', function($albumid) use($app) {
+
+  if (!ctype_digit($albumid)) {
+    echo 'Don\'t do that';
+    return;
+  }
+
+  $album = $app->album->where('id', $albumid)->first();
+
+  if ($album) {
+    echo json_encode($album);
+  } else {
+    $app->notFound();
+  }
+
+})->name('apiv1.music.album-info');
+
+// retrieve an album's songs
+$app->get('/apiv1/music/album-songs/:albumid', function($albumid) use($app) {
+
+  if (!ctype_digit($albumid)) {
+    echo 'Don\'t do that';
+    return;
+  }
+
+  $album = $app->album->where('id', $albumid)->first();
+
+  if ($album) {
+    $json = ['songs' => $album->songs];
+    echo json_encode($json);
+  } else {
+    $app->notFound();
+  }
+
+})->name('apiv1.music.album-songs');

app/routes/errors/404.php

@@ -0,0 +1,5 @@
+<?php
+
+$app->notFound(function() use ($app) {
+  $app->render('errors/404.twig');
+});

app/routes/music.php

@@ -1,13 +0,0 @@
-<?php
-
-$app->get('/music', function() use($app) {
-
-	$albums = $app->album->all()->sortByDesc('release_date')->values()->all();
-  $songs = $albums[0]->songs;
-
-	$app->render('music.twig', [
-		'albums' => $albums,
-    'songs' => $songs,
-	]);
-
-})->name('music');

app/routes/pages/about.php

@@ -2,6 +2,6 @@
 
 $app->get('/about', function() use($app) {
 
-	$app->render('about.twig');
+	$app->render('pages/about.twig');
 
 })->name('about');

app/routes/pages/contact.php

@@ -2,6 +2,6 @@
 
 $app->get('/contact', function() use($app) {
 
-	$app->render('contact.twig');
+	$app->render('pages/contact.twig');
 
 })->name('contact');

app/routes/pages/home.php

@@ -2,6 +2,6 @@
 
 $app->get('/home', function() use($app) {
 
-	$app->render('home.twig');
+	$app->render('pages/home.twig');
 
 })->name('home');

app/routes/pages/music.php

@@ -0,0 +1,16 @@
+<?php
+
+// music page
+$app->get('/music', function() use($app) {
+
+  $albums = $app->album->all()->sortByDesc('release_date')->values()->all();
+  $songs = $albums[0]->songs;
+  $links = $albums[0]->links;
+
+  $app->render('pages/music.twig', [
+    'albums' => $albums,
+    'songs' => $songs,
+    'links' => $links,
+  ]);
+
+})->name('music');

app/routes/pages/shows.php

@@ -10,7 +10,7 @@ $app->get('/shows', function() use($app) {
 		$show->time = date('H:i', strtotime($show->datetime));
 	}
 
-	$app->render('shows.twig', [
+	$app->render('pages/shows.twig', [
 		'shows' => $shows,
 	]);
 

app/views/errors/404.twig

@@ -0,0 +1,13 @@
+{% extends 'templates/default.twig' %}
+
+{% block title %}404 Error{% endblock %}
+
+{% block content %}
+	<!-- Error information section -->
+	<section id="error-section" class="row">
+		<div class="col-xs-12 card hover-box shadow-1">
+			<h4>404 Error</h4>
+      <p>The URL you were looking for doesn't exist. Perhaps you'd like to start over at the <a href="{{ urlFor('home') }}">home page</a>?</p>
+		</div>
+	</section>
+{% endblock %}

app/views/pages/music.twig

@@ -1,7 +1,6 @@
 {% extends 'templates/default.twig' %}
 
 {% block javascripts %}
-  <script type="text/javascript" src="/js/modules/music-player.js"></script>
   <script type="text/javascript" src="/js/music.js"></script>
 {% endblock %}
 
@@ -21,12 +20,21 @@
     <!-- left album stuff -->
     <article class="col-sm-5 col-xs-12">
       <div class="thumbnail shadow-1">
-        <img class="image-responsive" src="{{ albums[0].album_art }}" alt="{{ albums[0].title }}">
+        <img id="album-artwork" class="image-responsive album-art" src="{{ albums[0].album_art }}" alt="{{ albums[0].title }}">
         <div class="caption">
-          <h3>{{ albums[0].title }}</h3>
+          <h3 id="album-title">{{ albums[0].title }}</h3>
+          <h5 id="album-release">Released on <span>{{ albums[0].releaseDate }}</span></h5>
           {% if albums[0].description %}
             <hr />
-            <p>{{ albums[0].description }}</p>
+            <p id="album-description">{{ albums[0].description }}</p>
+          {% endif %}
+          {% if links %}
+            <hr />
+            <ul style="padding-left:20px">
+              {% for link in links %}
+                <li>Buy on <a href="{{ link.link_ref }}">{{ link.link_name }}</a></li>
+              {% endfor %}
+            </ul>
           {% endif %}
         </div>
       </div>
@@ -35,6 +43,7 @@
     <!-- right album stuff -->
     <div class="col-sm-7 col-xs-12">
       <article id="music-player-card" class="card">
+        <h4 id="track-title">{{ songs[0].title }}</h4>
         <audio id="music-player" controls>
           <source src="{{ songs[0].audio_file }}.ogg" type="audio/ogg" />
           <source src="{{ songs[0].audio_file }}.mp3" type="audio/mpeg" />
@@ -44,7 +53,7 @@
       <article class="card">
         <ul class="now-playing-list">
           {% for song in songs %}
-            <li class="music-track" data-title="{{ song.title }}" data-album="{{ song.album_id }}" data-order="{{ song.track_order }}" data-path="{{ song.audio_file }}">
+            <li class="music-track {% if loop.index0 == 0 %}selected{% endif %}" data-trackid="{{ song.id }}" data-title="{{ song.title }}" data-album="{{ song.album_id }}" data-order="{{ song.track_order }}" data-path="{{ song.audio_file }}">
               <span>{{ song.track_order }}. {{ song.title }}</span>
             </li>
           {% endfor %}
@@ -57,11 +66,15 @@
   <section class="row">
     {% for album in albums %}
       <!-- album details -->
-      <div class="music-album col-sm-3 col-xs-6">
+      <div class="music-album {% if loop.index0 == 0 %}selected{% endif %} col-sm-3 col-xs-6" data-albumid="{{ album.id }}">
         <div class="thumbnail shadow-1">
-          <img src="{{ album.album_art }}" alt="{{ album.title }}">
+          <img class="album-art" src="{{ album.album_art }}" alt="{{ album.title }}">
           <div class="caption">
-            <h5>{{ album.title }}</h5>
+            <h5>{{ album.title }} ({{ album.releaseYear }})</h5>
+            {% if album.description %}
+              <hr />
+              <p id="album-description">{{ album.description|length > 50 ? album.description[:50] ~ '...' : album.description }}</p>
+            {% endif %}
           </div>
         </div>
       </div>

app/views/templates/default.twig

@@ -7,10 +7,12 @@
   <title>{% block title %}{% endblock %} | Halftone</title>
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/mediaelement/2.23.4/mediaelementplayer.min.css">
   <link rel="stylesheet" href="/css/main.css"  media="screen,projection"/>
   {% block stylesheets %}{% endblock %}
   <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/mediaelement/2.23.4/mediaelement-and-player.min.js"></script>
   <script type="text/javascript" src="/js/main.js"></script>
   {% block javascripts %}{% endblock %}
 </head>

assets/sass/pages/_contact.sass

@@ -17,9 +17,6 @@
       bottom: 20px
     background: #f0f0f0
 
-		hr
-			border-color: #666
-
     a,
     p,
     h3

assets/sass/pages/_music.sass

@@ -7,8 +7,6 @@
       size: 34px
       weight: bold
 
-//#music-player-card
-
 #music-list-section
   .music-list
     position: relative
@@ -23,8 +21,7 @@
 
 .now-playing-list,
 .music-list ol
-	margin-left: 15px
+  +margin(10px 15px null 10px)
-	margin-right: 15px
   color: $text-color
 
   li
@@ -32,6 +29,7 @@
 
     &:hover
       background: #f0f0f0
+      cursor: pointer
 
       a
         color: $main-color
@@ -39,6 +37,9 @@
     &.selected
       background: #e0e0e0
 
+      a
+        color: $main-color
+
   li,
   a
     display: block
@@ -47,3 +48,30 @@
     color: $text-color
     text-decoration: none
     +transition(color, 200ms)
+
+#music-player
+  width: 100%
+
+#track-title
+  +padding(null 10px null 10px)
+
+.album-art
+  width: 100%
+
+.music-album
+  &.selected
+    .thumbnail
+      background: #e0e0e0
+
+      a
+        color: $main-color
+
+  .thumbnail
+    +transition(background, 200ms)
+
+    &:hover
+      background: #f0f0f0
+      cursor: pointer
+
+      a
+        color: $main-color

assets/sass/pages/_shows.sass

@@ -35,4 +35,3 @@
 
         &:hover
           color: $main-color
-		

assets/sass/partials/_base.sass

@@ -25,6 +25,9 @@ body
   padding: -10px 0
   text-align: center
 
+hr
+  border-color: #ccc
+
 
 /* Box shadow styles used for material design
 .shadow-0

public/js/music.js

@@ -1,7 +1,158 @@
+var player = '';
+
 $(document).ready(function() {
-	$('#music-player').musicPlayer({
+  player = $('#music-player').get(0);
-		'audio': '#music-player',
+
-		'volume': .5,
+  // set the player's volume to 0.5 by default
-		'startTime': 0
+  player.volume = 0.5;
-	})
+
+  // on music track click
+  $('.now-playing-list').on('click', '.music-track', function() {
+    // change selected track
+    changeSelectedTrack(this);
+  });
+
+  // on album art click
+  $('.music-album').on('click', '.thumbnail', function() {
+    // change selected album
+    changeSelectedAlbum(this);
+  });
+
+  // on track end
+  $(player).on('ended', function() {
+    // find selected track
+    changeSelectedTrack($('.music-track.selected').next().get(0));
+  });
 });
+
+function changeSelectedAlbum(albumElem) {
+  var oldSelected = $('.music-album.selected');
+  var newSelected = $(albumElem).parent();
+
+  if (oldSelected.data('albumid') != newSelected.data('albumid')) {
+    // remove selected class from the old element and add it to the new one
+    oldSelected.removeClass('selected');
+    newSelected.addClass('selected');
+
+    // change album info
+    getAlbumInfo(albumElem);
+    // change available songs
+    getAlbumSongs(albumElem);
+  }
+}
+
+function getAlbumInfo(albumElem) {
+  albumElem = $(albumElem).parent();
+
+  $.get('/apiv1/music/album-info/' + albumElem.data('albumid'), function(data) {
+    var json = $.parseJSON(data);
+
+    // change album artwork
+    $('#album-artwork').attr('src', json.album_art);
+    // change album title
+    $('#album-title').text(json.title);
+    // change album release date
+    $('#album-release span').text(formatReleaseDate(json.release_date));
+    // change album description
+    $('#album-description').text(json.description);
+  });
+}
+
+function formatReleaseDate(d) {
+  var monthNames = [
+    "January", "February", "March",
+    "April", "May", "June", "July",
+    "August", "September", "October",
+    "November", "December"
+  ];
+
+  var date = new Date(d);
+  var day = date.getDate();
+  var monthIndex = date.getMonth();
+  var year = date.getFullYear();
+
+  return monthNames[monthIndex] + ' ' + day + ', ' + year;
+}
+
+function getAlbumSongs(albumElem) {
+  albumElem = $(albumElem).parent();
+
+  $.get('/apiv1/music/album-songs/' + albumElem.data('albumid'), function(data) {
+    var json = $.parseJSON(data);
+    var playlist = $('.now-playing-list');
+    playlist.empty();
+
+    for (var i = 0; i < json.songs.length; i++) {
+      var song = json.songs[i];
+
+      var songElem = $('<li></li>')
+        .addClass('music-track')
+        .attr('data-trackid', song.id)
+        .attr('data-title', song.title)
+        .attr('data-album', song.album_id)
+        .attr('data-order', song.track_order)
+        .attr('data-path', song.audio_file);
+
+      if (i === 0) {
+        songElem.addClass('selected');
+      }
+
+      songElem.html('<span>' + song.track_order + '. ' + song.title + '</span>');
+
+      playlist.append(songElem);
+    }
+
+    changeAudioSources(playlist.find('.selected'), false);
+  });
+}
+
+function changeSelectedTrack(trackElem) {
+  var oldSelected = $('.now-playing-list .music-track.selected');
+  var newSelected = $(trackElem);
+
+  if (oldSelected.data('trackid') != newSelected.data('trackid')) {
+    // remove selected class from the old element and add it to the new one
+    oldSelected.removeClass('selected');
+    newSelected.addClass('selected');
+
+    // now change the audio sources
+    changeAudioSources(trackElem, true);
+  }
+}
+
+function changeAudioSources(trackElem, autoplay) {
+  trackElem = $(trackElem);
+  var playerSources = $('#music-player source');
+
+  if (autoplay === null) {
+    autoplay = false;
+  }
+
+  // retrieve audio file path from selected element
+  var audioFilePath = trackElem.data('path');
+
+  // loop through the audio player source elements
+  playerSources.each(function() {
+    // jQuery-ize the element
+    source = $(this);
+
+    if (source.attr('type') == 'audio/ogg') {
+      // OGG source file
+      source.attr('src', audioFilePath + '.ogg');
+    } else if (source.attr('type') == 'audio/mpeg') {
+      // MP3 source file
+      source.attr('src', audioFilePath + '.mp3');
+    }
+  });
+
+  // change track title
+  $('#track-title').text(trackElem.data('title'));
+
+  // reload music player
+  player.load();
+
+  if (autoplay) {
+    // start playing new song
+    player.play();
+  }
+}