owen/lms
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[UI] play/pause icon switching + better looking

Browse Source
This commit is contained in:
emeric
2016-01-13 19:05:37 +01:00
parent 18a979a67a
commit b68fb38e6e
5 changed files with 52 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files
TODO
+1 -1
View File
@@ -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
+5 -1
View File
@@ -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
+22 -9
View File
@@ -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
+23 -9
View File
@@ -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)\
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);\
src/ui/audio/desktop/PlayQueue.cpp
+1 -3
View File
@@ -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);