From b68fb38e6e9afb8c5d1f539e4bff988e6afbb2f0 Mon Sep 17 00:00:00 2001 From: emeric Date: Wed, 13 Jan 2016 19:05:37 +0100 Subject: [PATCH] [UI] play/pause icon switching + better looking --- TODO | 2 +- approot/templates.xml | 6 +++++- docroot/css/lms.css | 31 ++++++++++++++++++++--------- src/ui/audio/AudioPlayer.cpp | 32 +++++++++++++++++++++--------- src/ui/audio/desktop/PlayQueue.cpp | 4 +--- 5 files changed, 52 insertions(+), 23 deletions(-) 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);