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"> <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 %}

2
app/views/music2.twig
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 %}

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

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

6
public/css/main.css
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,

18
public/js/music.js
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');