Show song duration in the WebPlayer
This commit is contained in:
parent
211a80d00c
commit
4480971489
@ -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>
|
||||
|
||||
{
|
||||
|
@ -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
Loading…
Reference in New Issue
Block a user