60 lines
2.4 KiB
React
60 lines
2.4 KiB
React
|
import React, { Component, PropTypes } from "react";
|
||
|
|
import CSSModules from "react-css-modules";
|
||
|
|
|
||
|
|
import css from "../../styles/elements/WebPlayer.scss";
|
||
|
|
|
||
|
|
class WebPlayerCSS extends Component {
|
||
|
|
componentDidMount () {
|
||
|
|
// TODO: Should be in the container mounting WebPlayer
|
||
|
|
$(".sidebar").css("bottom", "15vh");
|
||
|
|
$(".main-panel").css("margin-bottom", "15vh");
|
||
|
|
}
|
||
|
|
|
||
|
|
render () {
|
||
|
|
return (
|
||
|
|
<div id="row">
|
||
|
|
<div id="webplayer" className="col-xs-12" styleName="body">
|
||
|
|
{ /* Top Info */ }
|
||
|
|
<div id="title" styleName="title">
|
||
|
|
<span id="track">Foobar</span>
|
||
|
|
<div id="timer" styleName="timer">0:00</div>
|
||
|
|
<div id="duration" styleName="duration">0:00</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{ /* Controls */ }
|
||
|
|
<div styleName="controlsOuter">
|
||
|
|
<div styleName="controlsInner">
|
||
|
|
<div id="loading" styleName="loading"></div>
|
||
|
|
<div id="playBtn" styleName="playBtn"></div>
|
||
|
|
<div id="pauseBtn" styleName="pauseBtn"></div>
|
||
|
|
<div id="prevBtn" styleName="prevBtn"></div>
|
||
|
|
<div id="nextBtn" styleName="nextBtn"></div>
|
||
|
|
</div>
|
||
|
|
<div id="playlistBtn" styleName="playlistBtn"></div>
|
||
|
|
<div id="volumeBtn" styleName="volumeBtn"></div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{ /* Progress */ }
|
||
|
|
<div id="waveform" styleName="waveform"></div>
|
||
|
|
<div id="bar" styleName="progressBar"></div>
|
||
|
|
<div id="progress" styleName="progress"></div>
|
||
|
|
|
||
|
|
{ /* Playlist */ }
|
||
|
|
<div id="playlist" styleName="playlist">
|
||
|
|
<div id="list" styleName="list"></div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{ /* Volume */ }
|
||
|
|
<div id="volume" styleName="volume-fadeout">
|
||
|
|
<div id="barFull" styleName="barFull"></div>
|
||
|
|
<div id="barEmpty" styleName="barEmpty"></div>
|
||
|
|
<div id="sliderBtn" styleName="sliderBtn"></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
export default CSSModules(WebPlayerCSS, css);
|