website/app/views/pages/music.twig

85 lines
3.0 KiB
Twig
Raw Permalink Normal View History

2016-11-18 12:52:19 -05:00
{% extends 'templates/default.twig' %}
2016-11-18 12:49:21 -05:00
{% block javascripts %}
<script type="text/javascript" src="/js/music.js"></script>
{% endblock %}
{% block title %}Music{% endblock %}
2016-11-18 12:49:21 -05:00
{% block content %}
<header id="music-header" class="row">
<h1>Music</h1>
</header>
<!-- 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>
<!-- left album stuff -->
<article class="col-sm-5 col-xs-12">
<div class="thumbnail shadow-1">
2016-11-28 21:23:55 -05:00
<img id="album-artwork" class="image-responsive album-art" src="{{ albums[0].album_art }}" alt="{{ albums[0].title }}">
2016-11-18 12:49:21 -05:00
<div class="caption">
2016-11-29 17:14:48 -05:00
<h3 id="album-title">{{ albums[0].title }}</h3>
2016-11-29 11:53:07 -05:00
<h5 id="album-release">Released on <span>{{ albums[0].releaseDate }}</span></h5>
2016-11-18 12:49:21 -05:00
{% if albums[0].description %}
<hr />
2016-11-28 21:23:55 -05:00
<p id="album-description">{{ albums[0].description }}</p>
2016-11-18 12:49:21 -05:00
{% endif %}
2016-12-06 17:11:42 -05:00
{% if links %}
2016-12-06 16:48:03 -05:00
<hr />
2016-12-06 17:11:42 -05:00
<ul style="padding-left:20px">
{% for link in links %}
2016-12-06 16:48:03 -05:00
<li>Buy on <a href="{{ link.link_ref }}">{{ link.link_name }}</a></li>
{% endfor %}
</ul>
{% endif %}
2016-11-18 12:49:21 -05:00
</div>
</div>
</article>
<!-- right album stuff -->
<div class="col-sm-7 col-xs-12">
<article id="music-player-card" class="card">
2016-11-29 12:10:41 -05:00
<h4 id="track-title">{{ songs[0].title }}</h4>
2016-11-18 12:49:21 -05:00
<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" />
</audio>
</article>
<article class="card">
<ul class="now-playing-list">
{% for song in songs %}
<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 }}">
2016-11-18 12:49:21 -05:00
<span>{{ song.track_order }}. {{ song.title }}</span>
</li>
{% endfor %}
</ul>
</article>
</div>
</section>
<!-- available albums -->
<section class="row">
{% for album in albums %}
<!-- album details -->
2016-11-28 20:09:37 -05:00
<div class="music-album {% if loop.index0 == 0 %}selected{% endif %} col-sm-3 col-xs-6" data-albumid="{{ album.id }}">
2016-11-18 12:49:21 -05:00
<div class="thumbnail shadow-1">
<img class="album-art" src="{{ album.album_art }}" alt="{{ album.title }}">
2016-11-18 12:49:21 -05:00
<div class="caption">
2016-11-29 11:43:11 -05:00
<h5>{{ album.title }} ({{ album.releaseYear }})</h5>
2016-11-29 17:42:40 -05:00
{% if album.description %}
<hr />
2016-11-29 17:42:40 -05:00
<p id="album-description">{{ album.description|length > 50 ? album.description[:50] ~ '...' : album.description }}</p>
{% endif %}
2016-11-18 12:49:21 -05:00
</div>
</div>
</div>
{% endfor %}
</section>
{% endblock %}