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

Updated music player view

Browse Source
This commit is contained in:
gballan1 2016-04-20 23:11:33 -04:00
parent 9cac8d8293
commit 25f3dc27f4
2 changed files with 37 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
app/routes/music.php
View File

@ -2,6 +2,10 @@
$app->get('/music', function() use($app) {
$app->render('music.twig');
$albums = $app->album->all();
$app->render('music.twig', [
'albums' => $albums,
]);
})->name('music');

66
app/views/music.twig
View File

@ -13,45 +13,43 @@
<h1>Music</h1>
</header>
<section id="music-section" class="row">
<!-- music player -->
<section class="row">
<!-- no javascript warning -->
<noscript class="card">Woah there, lassy! You will need to enable Javascript to use this page!</noscript>
<!-- music player -->
<article id="music-player-card" class="card col-md-6 col-sm-12">
<audio id="music-player" controls>
<source src="/audio/opting_out_ep/01 Opting Out.ogg" type="audio/ogg">
<source src="/audio/opting_out_ep/01 Opting Out.mp3" type="audio/mpeg">
</audio>
<h4>Now Playing</h4>
<ol class="now-playing-list">
<li class="selected" data-title="Opting Out" data-album="Opting Out EP" data-sequence="1" data-path="/audio/opting_out_ep/01 Opting Out"><a href="">Opting Out</a></li>
<li data-title="Elsewhere" data-album="Opting Out EP" data-sequence="2" data-path="/audio/opting_out_ep/02 Elsewhere"><a href="">Elsewhere</a></li>
<li data-title="What Happened to Forever?" data-album="Opting Out EP" data-sequence="3" data-path="/audio/opting_out_ep/03 What Happened to Forever"><a href="">What Happened to Forever?</a></li>
<li data-title="Lady" data-album="Opting Out EP" data-sequence="4" data-path="/audio/opting_out_ep/04 Lady"><a href="">Lady</a></li>
</ol>
</article>
<!-- music playlist section -->
<article id="music-list-section" class="col-md-6 col-sm-12">
<!-- music playlists -->
<div class="music-list card shadow-1">
<h3 class="music-list-header selected">Opting Out EP</h3>
<ol>
<li data-title="Opting Out" data-album="Opting Out EP" data-sequence="1" data-path="/audio/opting_out_ep/01 Opting Out">Opting Out</li>
<li data-title="Elsewhere" data-album="Opting Out EP" data-sequence="2" data-path="/audio/opting_out_ep/02 Elsewhere">Elsewhere</li>
<li data-title="What Happened to Forever?" data-album="Opting Out EP" data-sequence="3" data-path="/audio/opting_out_ep/03 What Happened to Forever">What Happened to Forever?</li>
<li data-title="Lady" data-album="Opting Out EP" data-sequence="4" data-path="/audio/opting_out_ep/04 Lady">Lady</li>
</ol>
<!-- current album details -->
<section class="col-sm-5 col-xs-12">
<div class="thumbnail shadow-1">
<img src="{{ albums[0].get.album_art }}" alt="{{ albums[0].get.title }}">
<div class="caption">
<h3>{{ albums[0].get.title }}</h3>
{% if albums[0].get.description %}
<hr />
<p>{{ albums[0].get.description }}</p>
{% endif %}
</div>
<div class="music-list card shadow-1">
<h3 class="music-list-header">Brain Scrub - Single</h3>
<ol>
<li data-title="Brain Scrub" data-album="Brain Scrub - Single" data-sequence="1" data-path="/audio/opting_out_ep/01 Brain Scrub">Brain Scrub</li>
</ol>
</div>
</article>
</section>
<!-- current playlist -->
<section class="card col-sm-7 col-xs-12">
</section>
</section>
<!-- available albums -->
<section class="row">
{% for album in albums %}
<!-- album details -->
<div class="col-sm-2 col-xs-6">
<div class="thumbnail shadow-1">
<img src="{{ album.get.album_art }}" alt="{{ album.get.title }}">
<div class="caption">
<h5>{{ album.get.title }}</h5>
</div>
</div>
</div>
{% endfor %}
</section>
{% endblock %}