Added music player selection highlights
This commit is contained in:
parent
711ed2c6e7
commit
6a0ad62887
@ -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 %}
|
||||||
|
@ -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 %}
|
||||||
|
@ -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
|
||||||
|
@ -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,
|
||||||
|
@ -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');
|
||||||
|
Loading…
Reference in New Issue
Block a user