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

Added music player selection highlights

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
app/views/music1.twig
View File

@ -43,7 +43,7 @@
<article class="card">
<ul class="now-playing-list">
{% 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>
</li>
{% endfor %}

2
app/views/music2.twig
View File

@ -43,7 +43,7 @@
<article class="card">
<ul class="now-playing-list">
{% 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>
</li>
{% endfor %}

84
assets/sass/pages/_music.sass
View File

@ -1,59 +1,63 @@
#music-header
text-align: center
text-align: center
h1
color: white
font:
size: 34px
weight: bold
h1
color: white
font:
size: 34px
weight: bold
#music-list-section
.music-list
position: relative
+transition(background, 200ms)
.music-list
position: relative
+transition(background, 200ms)
&:hover
cursor: pointer
background: #f0f0f0
&:hover
cursor: pointer
background: #f0f0f0
.music-list-header
margin: 10px 0
.music-list-header
margin: 10px 0
.now-playing-list,
.music-list ol
margin-left: 15px
margin-right: 15px
color: $text-color
margin-left: 15px
margin-right: 15px
color: $text-color
li
+transition(background, 200ms)
li
+transition(background, 200ms)
&:hover
background: #f0f0f0
&:hover
background: #f0f0f0
cursor: pointer
a
color: $main-color
a
color: $main-color
&.selected
background: #e0e0e0
&.selected
background: #e0e0e0
li,
a
display: block
+size(100% 100%)
padding: 8px 5px
color: $text-color
text-decoration: none
+transition(color, 200ms)
a
color: $main-color
li,
a
display: block
+size(100% 100%)
padding: 8px 5px
color: $text-color
text-decoration: none
+transition(color, 200ms)
#music-player-card
.mejs-container
width: 100%
.mejs-container
width: 100%
.mejs-container,
.mejs-mediaelement,
.mejs-controls
background: transparent
.mejs-container,
.mejs-mediaelement,
.mejs-controls
background: transparent
.album-art
width: 100%
width: 100%

6
public/css/main.css
View File

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

18
public/js/music.js
View File

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