HalfTone/website
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge branch 'development' of Halftone/halftone into master

Browse Source
This commit is contained in:
Gregory Ballantine 2016-12-29 13:47:04 -05:00 committed by Gogs
commit d071bdeba6
32 changed files with 1359 additions and 342 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
app/Fieldprotocol/Music/Album.php
View File

@ -19,4 +19,16 @@ class Album extends Eloquent {
return $this->hasMany('Fieldprotocol\Music\Song'); 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));
}
} }

20
app/Fieldprotocol/Music/StoreLink.php Normal file
View File

@ -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');
}
}

20
app/routes.php
View File

@ -1,9 +1,15 @@
<?php <?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';

38
app/routes/apiv1/music.php Normal file
View File

@ -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');

5
app/routes/errors/404.php Normal file
View File

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

13
app/routes/music.php
View File

@ -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');

2
app/routes/about.php → app/routes/pages/about.php
View File

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

2
app/routes/contact.php → app/routes/pages/contact.php
View File

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

2
app/routes/home.php → app/routes/pages/home.php
View File

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

0
app/routes/index.php → app/routes/pages/index.php
View File

16
app/routes/pages/music.php Executable file
View File

@ -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');

2
app/routes/shows.php → app/routes/pages/shows.php
View File

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

13
app/views/errors/404.twig Normal file
View File

@ -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 %}

0
app/views/about.twig → app/views/pages/about.twig
View File

0
app/views/contact.twig → app/views/pages/contact.twig
View File

0
app/views/home.twig → app/views/pages/home.twig
View File

29
app/views/music.twig → app/views/pages/music.twig
View File

@ -1,7 +1,6 @@
{% extends 'templates/default.twig' %} {% extends 'templates/default.twig' %}
{% block javascripts %} {% block javascripts %}
<script type="text/javascript" src="/js/modules/music-player.js"></script>
<script type="text/javascript" src="/js/music.js"></script> <script type="text/javascript" src="/js/music.js"></script>
{% endblock %} {% endblock %}
@ -21,12 +20,21 @@
<!-- left album stuff --> <!-- left album stuff -->
<article class="col-sm-5 col-xs-12"> <article class="col-sm-5 col-xs-12">
<div class="thumbnail shadow-1"> <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"> <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 %} {% if albums[0].description %}
<hr /> <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 %} {% endif %}
</div> </div>
</div> </div>
@ -35,6 +43,7 @@
<!-- right album stuff --> <!-- right album stuff -->
<div class="col-sm-7 col-xs-12"> <div class="col-sm-7 col-xs-12">
<article id="music-player-card" class="card"> <article id="music-player-card" class="card">
<h4 id="track-title">{{ songs[0].title }}</h4>
<audio id="music-player" controls> <audio id="music-player" controls>
<source src="{{ songs[0].audio_file }}.ogg" type="audio/ogg" /> <source src="{{ songs[0].audio_file }}.ogg" type="audio/ogg" />
<source src="{{ songs[0].audio_file }}.mp3" type="audio/mpeg" /> <source src="{{ songs[0].audio_file }}.mp3" type="audio/mpeg" />
@ -44,7 +53,7 @@
<article class="card"> <article class="card">
<ul class="now-playing-list"> <ul class="now-playing-list">
{% for song in songs %} {% 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> <span>{{ song.track_order }}. {{ song.title }}</span>
</li> </li>
{% endfor %} {% endfor %}
@ -57,11 +66,15 @@
<section class="row"> <section class="row">
{% for album in albums %} {% for album in albums %}
<!-- album details --> <!-- 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"> <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"> <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> </div>
</div> </div>

0
app/views/shows.twig → app/views/pages/shows.twig
View File

34
app/views/templates/default.twig
View File

@ -1,28 +1,30 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<!--Let browser know website is optimized for mobile--> <!--Let browser know website is optimized for mobile-->
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<title>{% block title %}{% endblock %} | Halftone</title> <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/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/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"/> <link rel="stylesheet" href="/css/main.css" media="screen,projection"/>
{% block stylesheets %}{% endblock %} {% 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/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/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript" src="/js/main.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/mediaelement/2.23.4/mediaelement-and-player.min.js"></script>
{% block javascripts %}{% endblock %} <script type="text/javascript" src="/js/main.js"></script>
{% block javascripts %}{% endblock %}
</head> </head>
<body> <body>
<div id="wrapper"> <div id="wrapper">
<div class="container"> <div class="container">
{% include 'templates/partials/header.twig' %} {% include 'templates/partials/header.twig' %}
{% block content %}{% endblock %} {% block content %}{% endblock %}
</div> </div>
</div> </div>
{% include 'templates/partials/footer.twig' %} {% include 'templates/partials/footer.twig' %}
</body> </body>
</html> </html>

78
assets/sass/pages/_about.sass
View File

@ -1,42 +1,42 @@
#about-header #about-header
margin-bottom: 25px margin-bottom: 25px
padding-bottom: 15px padding-bottom: 15px
background: white background: white
img img
+position(absolute, 0 null null 0) +position(absolute, 0 null null 0)
+size(100% 480px) +size(100% 480px)
/*+filter(blur(2px)) /*+filter(blur(2px))
.about-band .about-band
margin-top: 405px margin-top: 405px
h2 h2
margin-bottom: 20px margin-bottom: 20px
color: white color: white
p p
color: $text-color color: $text-color
#about-content #about-content
section section
a a
display: block display: block
+position(absolute, 0 null null 15px) +position(absolute, 0 null null 15px)
+calc(width, "100% - 30px") +calc(width, "100% - 30px")
+calc(height, "100% - 20px") +calc(height, "100% - 20px")
border-radius: 5px border-radius: 5px
text-decoration: none text-decoration: none
+transition(all, 300ms ease-in) +transition(all, 300ms ease-in)
h3, h3,
h4, h4,
p p
color: $text-color color: $text-color
&:hover &:hover
a a
background: rgba(#000, .15) background: rgba(#000, .15)
hr hr
border-color: #bbb border-color: #bbb

63
assets/sass/pages/_contact.sass
View File

@ -1,42 +1,39 @@
#contact-header #contact-header
margin-top: -20px margin-top: -20px
text-align: center text-align: center
h1 h1
color: white color: white
font: font:
size: 34px size: 34px
weight: bold weight: bold
#contact-info #contact-info
.card .card
max-width: 680px max-width: 680px
margin-top: 15px margin-top: 15px
padding: padding:
top: 20px top: 20px
bottom: 20px bottom: 20px
background: #f0f0f0 background: #f0f0f0
hr a,
border-color: #666 p,
h3
text-align: center
font-size: 20px
a, p
p, padding: 5px
h3 color: #212121
text-align: center
font-size: 20px
p a
padding: 5px color: darkred
color: #212121 text-decoration: none
+transition(color 200ms ease-in-out)
a &:hover
color: darkred color: red
text-decoration: none
+transition(color 200ms ease-in-out)
&:hover h3
color: red margin-bottom: 15px
h3
margin-bottom: 15px

66
assets/sass/pages/_home.sass
View File

@ -1,39 +1,39 @@
#featured #featured
height: auto height: auto
margin: 0 auto 20px margin: 0 auto 20px
padding: 5px padding: 5px
background: none background: none
.hover-box
+transition(all, 200ms)
&:hover .hover-box
box-shadow: 0 6px 20px 0 rgba(#000, 0.19), 0 8px 17px 0 rgba(#000, 0.2) +transition(all, 200ms)
div &:hover
margin-bottom: 25px box-shadow: 0 6px 20px 0 rgba(#000, 0.19), 0 8px 17px 0 rgba(#000, 0.2)
a div
display: block margin-bottom: 25px
width: 100%
//max-width: 500px a
margin-left: auto display: block
margin-right: auto width: 100%
//max-width: 500px
margin-left: auto
margin-right: auto
img
width: 100%
img
width: 100%
#wrapper-home #wrapper-home
display: block display: block
min-height: 300px min-height: 300px
padding: 0 padding: 0
.content .content
margin: 0 margin: 0
padding: 0 padding: 0
.actions .actions
#mailing-list #mailing-list
p p
margin-bottom: 7px margin-bottom: 7px
text-align: center text-align: center

98
assets/sass/pages/_music.sass
View File

@ -1,49 +1,77 @@
#music-header #music-header
text-align: center text-align: center
h1
color: white
font:
size: 34px
weight: bold
//#music-player-card h1
color: white
font:
size: 34px
weight: bold
#music-list-section #music-list-section
.music-list .music-list
position: relative position: relative
+transition(background, 200ms) +transition(background, 200ms)
&:hover &:hover
cursor: pointer cursor: pointer
background: #f0f0f0 background: #f0f0f0
.music-list-header .music-list-header
margin: 10px 0 margin: 10px 0
.now-playing-list, .now-playing-list,
.music-list ol .music-list ol
margin-left: 15px +margin(10px 15px null 10px)
margin-right: 15px color: $text-color
color: $text-color
li li
+transition(background, 200ms) +transition(background, 200ms)
&:hover &:hover
background: #f0f0f0 background: #f0f0f0
cursor: pointer
a a
color: $main-color color: $main-color
&.selected &.selected
background: #e0e0e0 background: #e0e0e0
li, a
a color: $main-color
display: block
+size(100% 100%) li,
padding: 8px 5px a
color: $text-color display: block
text-decoration: none +size(100% 100%)
+transition(color, 200ms) padding: 8px 5px
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

67
assets/sass/pages/_shows.sass
View File

@ -1,38 +1,37 @@
.shows-header .shows-header
margin: margin:
top: -20px top: -20px
bottom: 20px bottom: 20px
text-align: center text-align: center
h3 h3
color: #fff color: #fff
font: font:
size: 26px size: 26px
weight: bold weight: bold
#shows-table #shows-table
margin-top: 20px margin-top: 20px
tr tr
border-bottom: 1px solid rgba(#999, .4) border-bottom: 1px solid rgba(#999, .4)
&:last-child &:last-child
border-bottom: none border-bottom: none
td td
vertical-align: middle vertical-align: middle
border: none border: none
p, p,
a a
font-size: 18px font-size: 18px
color: white color: white
a a
font-weight: 600 font-weight: 600
text-decoration: underline text-decoration: underline
+transition(all, 200ms ease-in) +transition(all, 200ms ease-in)
&:hover &:hover
color: $main-color color: $main-color

49
assets/sass/partials/_base.sass
View File

@ -1,41 +1,44 @@
* *
margin: 0px margin: 0px
padding: 0px padding: 0px
font-family: "Open Sans", sans-serif font-family: "Open Sans", sans-serif
font-size: 14px font-size: 14px
html html
width: 100% width: 100%
+calc(height, "100% - 200px") +calc(height, "100% - 200px")
body body
+size(100% auto) +size(100% auto)
height: 100% height: 100%
#wrapper #wrapper
+size(100% auto) +size(100% auto)
min-height: 100% min-height: 100%
margin-bottom: 200px margin-bottom: 200px
padding-bottom: 50px padding-bottom: 50px
background: url(/img/bg2.jpg) no-repeat center center fixed background: url(/img/bg2.jpg) no-repeat center center fixed
+background-size(cover) +background-size(cover)
#header #header
display: block display: block
padding: -10px 0 padding: -10px 0
text-align: center text-align: center
hr
border-color: #ccc
/* Box shadow styles used for material design /* Box shadow styles used for material design
.shadow-0 .shadow-0
border: 1px solid #eee border: 1px solid #eee
.shadow-1 .shadow-1
box-shadow: 0 2px 10px 0 rgba(#000, 0.16), 0 2px 5px 0 rgba(#000, 0.26) box-shadow: 0 2px 10px 0 rgba(#000, 0.16), 0 2px 5px 0 rgba(#000, 0.26)
.shadow-2 .shadow-2
box-shadow: 0 6px 20px 0 rgba(#000, 0.19), 0 8px 17px 0 rgba(#000, 0.2) box-shadow: 0 6px 20px 0 rgba(#000, 0.19), 0 8px 17px 0 rgba(#000, 0.2)
.shadow-3 .shadow-3
box-shadow: 0 17px 50px 0 rgba(#000, 0.19), 0 12px 15px 0 rgba(#000, 0.24) box-shadow: 0 17px 50px 0 rgba(#000, 0.19), 0 12px 15px 0 rgba(#000, 0.24)
.shadow-4 .shadow-4
box-shadow: 0 25px 55px 0 rgba(#000, 0.21), 0 16px 28px 0 rgba(#000, 0.22) box-shadow: 0 25px 55px 0 rgba(#000, 0.21), 0 16px 28px 0 rgba(#000, 0.22)
.shadow-5 .shadow-5
box-shadow: 0 40px 77px 0 rgba(#000, 0.22), 0 27px 24px 0 rgba(#000, 0.2) box-shadow: 0 40px 77px 0 rgba(#000, 0.22), 0 27px 24px 0 rgba(#000, 0.2)

98
assets/sass/partials/_card.sass
View File

@ -1,52 +1,52 @@
.card .card
display: block display: block
height: auto height: auto
margin-bottom: 15px margin-bottom: 15px
padding: 15px 10px padding: 15px 10px
background: white background: white
&.hover-box &.hover-box
+transition(box-shadow, 200ms) +transition(box-shadow, 200ms)
&:hover &:hover
box-shadow: 0 6px 20px 0 rgba(#000, 0.19), 0 8px 17px 0 rgba(#000, 0.2) box-shadow: 0 6px 20px 0 rgba(#000, 0.19), 0 8px 17px 0 rgba(#000, 0.2)
.underline .underline
text-decoration: underline text-decoration: underline
input[type=text] input[type=text]
background: none background: none
border: none border: none
outline: none outline: none
.input-group .input-group
position: relative position: relative
display: block display: block
width: 100% width: 100%
margin: 20px auto 10px margin: 20px auto 10px
input input
display: inline-block display: inline-block
width: 100% width: 100%
padding: 10px 0 padding: 10px 0
border-bottom: solid 2px $main-color border-bottom: solid 2px $main-color
color: rgb(25, 25, 25) color: rgb(25, 25, 25)
font-size: 16px font-size: 16px
&:focus, &:active &:focus, &:active
outline: none outline: none
label label
+position(absolute, 50% null null 0) +position(absolute, 50% null null 0)
+transform(translateY(-50%)) +transform(translateY(-50%))
font-style: italic font-style: italic
font-size: 16px font-size: 16px
color: #999 color: #999
pointer-events: none pointer-events: none
+transition(all, 200ms ease-out 0s) +transition(all, 200ms ease-out 0s)
input:focus + label, input:focus + label,
input.has-value + label input.has-value + label
top: -5px top: -5px
font-size: 12px font-size: 12px
color: $main-color color: $main-color

74
assets/sass/partials/_footer.sass
View File

@ -1,39 +1,39 @@
#footer #footer
+position(fixed, null null 0 0) +position(fixed, null null 0 0)
width: 100% width: 100%
background: white background: white
margin: 0 margin: 0
padding: 10px 15px padding: 10px 15px
z-index: -9999999 z-index: -9999999
.column-info
text-align: center
p
font:
size: 18px
weight: bold
text-decoration: underline
ul
list-style: none
a
text-decoration: none
color: $text-color
+transition(all, 200ms)
&:hover
color: $main-color
.copyright
p
color: $text-color
text-align: center
hr
border-color: #bbb
.mailing-list .column-info
p text-align: center
color: $text-color
p
font:
size: 18px
weight: bold
text-decoration: underline
ul
list-style: none
a
text-decoration: none
color: $text-color
+transition(all, 200ms)
&:hover
color: $main-color
.copyright
p
color: $text-color
text-align: center
hr
border-color: #bbb
.mailing-list
p
color: $text-color

6
assets/sass/partials/_header.sass
View File

@ -1,4 +1,4 @@
#header #header
.band-logo .band-logo
width: 100% width: 100%
max-width: 600px max-width: 600px

2
assets/sass/partials/_other.sass
View File

@ -1,2 +1,2 @@
.full-width .full-width
width: 100% width: 100%

729
public/css/main.css
View File

File diff suppressed because one or more lines are too long

BIN
public/img/albums/halftone.jpeg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 42 KiB

163
public/js/music.js
View File

@ -1,7 +1,158 @@
var player = '';
$(document).ready(function() { $(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();
}
}