Updated music view some more - added track listing and fixed the music player

This commit is contained in:
Ascendings 2016-04-21 00:27:42 -04:00
parent 967f716694
commit 6338aa4554
2 changed files with 10 additions and 6 deletions

View File

@ -3,9 +3,11 @@
$app->get('/music', function() use($app) { $app->get('/music', function() use($app) {
$albums = $app->album->all(); $albums = $app->album->all();
$songs = $albums[0]->songs;
$app->render('music.twig', [ $app->render('music.twig', [
'albums' => $albums, 'albums' => $albums,
'songs' => $songs,
]); ]);
})->name('music'); })->name('music');

View File

@ -36,15 +36,17 @@
<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">
<audio id="music-player" controls> <audio id="music-player" controls>
<source src="{{ albums[0].songs[0].audio_file }}.ogg" type="audio/ogg" /> <source src="{{ songs[0].audio_file }}.ogg" type="audio/ogg" />
<source src="{{ albums[0].songs[0].audio_file }}.mp3" type="audio/mpeg" /> <source src="{{ songs[0].audio_file }}.mp3" type="audio/mpeg" />
</audio> </audio>
</article> </article>
<article class="card"> <article class="card">
<ul> <ul class="now-playing-list">
{% for song in album.songs %} {% for song in songs %}
<li>{{ song.title }}</li> <li class="music-track" 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 %} {% endfor %}
</ul> </ul>
</article> </article>
@ -55,7 +57,7 @@
<section class="row"> <section class="row">
{% for album in albums %} {% for album in albums %}
<!-- album details --> <!-- album details -->
<div class="col-sm-3 col-xs-6"> <div class="music-album col-sm-3 col-xs-6">
<div class="thumbnail shadow-1"> <div class="thumbnail shadow-1">
<img src="{{ album.album_art }}" alt="{{ album.title }}"> <img src="{{ album.album_art }}" alt="{{ album.title }}">
<div class="caption"> <div class="caption">