ampache_react/app/components/elements/WebPlayer.jsx

60 lines
2.4 KiB
React
Raw Normal View History

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