[UI] play/pause icon switching + better looking

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]

approot/templates.xml

@@ -529,7 +529,11 @@
 </message>
 
 <message id="wa-audio-player">
-	${audio}${prev}${play-pause}${next}${cover}${artist}${track}${release}${curtime}${seekbar}${duration}${volume}${shuffle}${repeat}${playlist}
+	${audio}${prev}${play-pause}${next}
+	<div class="mediaplayer-cover">
+		${cover}
+	</div>
+	${artist}${track}${release}${curtime}${seekbar}${duration}${volume}${shuffle}${repeat}${playlist}
 </message>
 
 </messages>

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 {

src/ui/audio/AudioPlayer.cpp

@@ -177,7 +177,7 @@ AudioPlayer::AudioPlayer(Wt::WContainerWidget *parent)
 		_playNext.emit();
 	}));
 
-	Wt::WText *playPauseBtn = new Wt::WText("<i class=\"fa fa-play fa-3x\"></i>", Wt::XHTMLText);
+	Wt::WText *playPauseBtn = new Wt::WText("<i class=\"fa fa-play fa-3x fa-fw\"></i>", 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)\
+			if (document.lms.audio.audio.paused) \
-				document.lms.audio.audio.play();\
+				document.lms.audio.audio.play(); \
-			else\
+			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);\

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);