Show song duration in the WebPlayer

This commit is contained in:
Lucas Verney 2016-09-18 23:09:59 +02:00
parent 211a80d00c
commit 4480971489
6 changed files with 28 additions and 13 deletions

View File

@ -7,7 +7,7 @@ import Immutable from "immutable";
import FontAwesome from "react-fontawesome";
// Local imports
import { messagesMap } from "../../utils";
import { formatLength, messagesMap } from "../../utils";
// Styles
import css from "../../styles/elements/WebPlayer.scss";
@ -43,10 +43,12 @@ class WebPlayerCSSIntl extends Component {
// On mouse over, reduce opacity
this.refs.art.style.opacity = "1";
this.refs.artText.style.display = "none";
this.refs.artDuration.style.display = "none";
} else {
// On mouse out, set opacity back
this.refs.art.style.opacity = "0.75";
this.refs.artText.style.display = "block";
this.refs.artDuration.style.display = "block";
}
}
@ -79,12 +81,14 @@ class WebPlayerCSSIntl extends Component {
let art = null;
let songTitle = null;
let artistName = null;
let length = null;
if (song) {
art = song.get("art");
songTitle = song.get("title");
if (this.props.currentArtist) {
artistName = this.props.currentArtist.get("name");
}
length = formatLength(song.get("time"));
}
// Click handlers
@ -137,6 +141,9 @@ class WebPlayerCSSIntl extends Component {
}
</div>
</div>
<div className="col-xs-12" styleName="artDuration" ref="artDuration">
<p>{ length }</p>
</div>
</div>
{

View File

@ -17,6 +17,7 @@ $controlsMarginTop: 10px;
.artRow {
min-height: 200px;
position: relative;
}
.artTimer {
@ -28,6 +29,13 @@ $controlsMarginTop: 10px;
z-index: -9;
}
.artDuration {
position: absolute;
bottom: 0;
right: 0;
text-align: right;
}
/**
* Controls
*/

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long