diff --git a/TODO b/TODO
index fbffd99b..38834cf1 100644
--- a/TODO
+++ b/TODO
@@ -51,9 +51,9 @@
- Add a download button to get the current playlist in a streamed zip file
- Add a upload button to upload media files in a dedicated directory
- Perform a search for each key pressed (using a timer, in JS)
+ - Save user prefs in local storage (volume, loop, shuffle, current playqueue, etc.)
[desktop]
- Better style...
- - MediaPlayer: move the slider using js (http://redmine.webtoolkit.eu/boards/2/topics/7924?r=8478, http://redmine.emweb.be/boards/2/topics/10994)
- TrackView: Reselect the current selected item when displaying the updated search results
- Add keyboard shortcuts
[mobile]
diff --git a/approot/templates.xml b/approot/templates.xml
index 1f8f11a6..8f879ad4 100644
--- a/approot/templates.xml
+++ b/approot/templates.xml
@@ -529,7 +529,11 @@
- ${audio}${prev}${play-pause}${next}${cover}${artist}${track}${release}${curtime}${seekbar}${duration}${volume}${shuffle}${repeat}${playlist}
+ ${audio}${prev}${play-pause}${next}
+
+ ${cover}
+
+ ${artist}${track}${release}${curtime}${seekbar}${duration}${volume}${shuffle}${repeat}${playlist}
diff --git a/docroot/css/lms.css b/docroot/css/lms.css
index 304be0ac..75168549 100644
--- a/docroot/css/lms.css
+++ b/docroot/css/lms.css
@@ -1,5 +1,6 @@
.main-nav {
margin-bottom: 0px;
+ box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.4);
}
.Wt-hrh2 {
@@ -13,6 +14,7 @@
.playqueue {
background-color: #EEE;
border-radius: 10px;
+ box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.4);
}
.playqueue-playing {
@@ -35,14 +37,6 @@
height: 64px;
}
-
-.mediaplayer-current-cover {
- width: 72px;
- height: 72px;
- border-radius: 8px;
- box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.5);
-}
-
.mediaplayer-track {
font-weight: bold;
font-size: 120%;
@@ -59,14 +53,33 @@
justify-content: space-between;
align-items: center;
height: 72px;
+ box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.4);
+}
+
+.mediaplayer-cover {
+ margin: 8px;
+ width: 64px;
+ min-width: 64px;
+ height: 64px;
+ min-height: 64px;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+}
+
+.mediaplayer-cover img {
+ border-radius: 8px;
+ border-radius: 8px;
+ box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.4);
}
.mediaplayer-btn {
margin: 8px;
}
-.mediaplayer-btn:before {
+.mediaplayer-btn i {
cursor: pointer;
+ text-shadow: 0px 2px 3px rgba(0, 0, 0, 0.4);
}
.mediaplayer-btn-active {
diff --git a/src/ui/audio/AudioPlayer.cpp b/src/ui/audio/AudioPlayer.cpp
index be5b68c3..ae70f5e4 100644
--- a/src/ui/audio/AudioPlayer.cpp
+++ b/src/ui/audio/AudioPlayer.cpp
@@ -177,7 +177,7 @@ AudioPlayer::AudioPlayer(Wt::WContainerWidget *parent)
_playNext.emit();
}));
- Wt::WText *playPauseBtn = new Wt::WText("", Wt::XHTMLText);
+ Wt::WText *playPauseBtn = new Wt::WText("", Wt::XHTMLText);
playPauseBtn->addStyleClass("mediaplayer-btn");
bindWidget("play-pause", playPauseBtn);
@@ -196,19 +196,29 @@ AudioPlayer::AudioPlayer(Wt::WContainerWidget *parent)
document.lms.audio.volumeSlider = " + volumeSlider->jsRef() + ";\
document.lms.audio.curTimeText = " + trackCurrentTime->jsRef() + ";\
document.lms.audio.playPause = " + playPauseBtn->jsRef() + ";\
- \
+ \
document.lms.audio.offset = 0;\
document.lms.audio.curTime = 0;\
document.lms.audio.state = \"init\";\
document.lms.audio.volume = 1;\
- \
+ \
document.lms.audio.seekbar.value = 0;\
document.lms.audio.seekbar.disabled = true;\
- \
+ \
document.lms.audio.volumeSlider.min = 0;\
document.lms.audio.volumeSlider.max = 100;\
document.lms.audio.volumeSlider.value = 100;\
- \
+ \
+ function updateUIPlaying() { \
+ var icon = document.lms.audio.playPause.getElementsByTagName(\"i\")[0]; \
+ icon.className = \"fa fa-pause fa-3x fa-fw\"; \
+ } \
+ \
+ function updateUIStopped() { \
+ var icon = document.lms.audio.playPause.getElementsByTagName(\"i\")[0]; \
+ icon.className = \"fa fa-play fa-3x fa-fw\"; \
+ } \
+ \
function updateUI() {\
document.lms.audio.curTimeText.innerHTML = document.lms.audio.curTime;\
document.lms.audio.seekbar.value = document.lms.audio.curTime;\
@@ -255,18 +265,22 @@ AudioPlayer::AudioPlayer(Wt::WContainerWidget *parent)
updateUI();\
} \
\
- function playPause() {\
+ function playPause() { \
if (document.lms.audio.state == \"init\") \
return;\
\
- if (document.lms.audio.audio.paused)\
- document.lms.audio.audio.play();\
- else\
+ if (document.lms.audio.audio.paused) \
+ document.lms.audio.audio.play(); \
+ else \
document.lms.audio.audio.pause();\
\
}\
\
document.lms.audio.audio.addEventListener('timeupdate', updateCurTime); \
+ document.lms.audio.audio.addEventListener('playing', updateUIPlaying); \
+ document.lms.audio.audio.addEventListener('play', updateUIPlaying); \
+ document.lms.audio.audio.addEventListener('pause', updateUIStopped); \
+ document.lms.audio.audio.addEventListener('ended', updateUIStopped); \
document.lms.audio.seekbar.addEventListener('change', seek);\
document.lms.audio.seekbar.addEventListener('input', seeking);\
document.lms.audio.seekbar.addEventListener('mousedown', seekMouseDown);\
diff --git a/src/ui/audio/desktop/PlayQueue.cpp b/src/ui/audio/desktop/PlayQueue.cpp
index fb11cedd..294131a1 100644
--- a/src/ui/audio/desktop/PlayQueue.cpp
+++ b/src/ui/audio/desktop/PlayQueue.cpp
@@ -278,10 +278,8 @@ _trackSelector(new TrackSelector())
_model = new Wt::WStandardItemModel(0, 3, this);
// 0 Column is hidden (track id)
- _model->setHeaderData(COLUMN_ID_TRACK_ID, Wt::WString("#"));
- _model->setHeaderData(COLUMN_ID_COVER, Wt::WString("Cover"));
- _model->setHeaderData(COLUMN_ID_NAME, Wt::WString("Track"));
+ this->setHeaderHeight(0);
this->setModel(_model);
this->setSelectionMode(Wt::ExtendedSelection);
this->setSortingEnabled(false);