Added music player selection highlights

This commit is contained in:
Gregory Ballantine 2016-11-28 16:51:29 -05:00
parent 711ed2c6e7
commit 6a0ad62887
5 changed files with 67 additions and 45 deletions

View File

@ -43,7 +43,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 %}

View File

@ -43,7 +43,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 %}

View File

@ -30,6 +30,7 @@
&:hover &:hover
background: #f0f0f0 background: #f0f0f0
cursor: pointer
a a
color: $main-color color: $main-color
@ -37,6 +38,9 @@
&.selected &.selected
background: #e0e0e0 background: #e0e0e0
a
color: $main-color
li, li,
a a
display: block display: block

View File

@ -645,13 +645,17 @@ body {
transition: background, 200ms; } transition: background, 200ms; }
.now-playing-list li:hover, .now-playing-list li:hover,
.music-list ol li:hover { .music-list ol li:hover {
background: #f0f0f0; } background: #f0f0f0;
cursor: pointer; }
.now-playing-list li:hover a, .now-playing-list li:hover a,
.music-list ol li:hover a { .music-list ol li:hover a {
color: #e51400; } color: #e51400; }
.now-playing-list li.selected, .now-playing-list li.selected,
.music-list ol li.selected { .music-list ol li.selected {
background: #e0e0e0; } background: #e0e0e0; }
.now-playing-list li.selected a,
.music-list ol li.selected a {
color: #e51400; }
.now-playing-list li, .now-playing-list li,
.now-playing-list a, .now-playing-list a,
.music-list ol li, .music-list ol li,

View File

@ -4,11 +4,25 @@ $(document).ready(function() {
player = $('#music-player').get(0); player = $('#music-player').get(0);
$('.now-playing-list .music-track').on('click', function() { $('.now-playing-list .music-track').on('click', function() {
// change the audio source // change selected track
changeAudioSources(this); changeSelectedTrack(this);
}); });
}); });
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);
}
}
function changeAudioSources(trackElem) { function changeAudioSources(trackElem) {
trackElem = $(trackElem); trackElem = $(trackElem);
var playerSources = $('#music-player source'); var playerSources = $('#music-player source');