Merge pull request nukeop#6 from nukeop/dev

Enable "previous" button
SocialSkyInc · Sep 24, 2016 · 03f141f · 03f141f
2 parents ee38d8c + b103bd9
commit 03f141f
Show file tree

Hide file tree

Showing 5 changed files with 44 additions and 10 deletions.
diff --git a/app/components/player.component.js b/app/components/player.component.js
@@ -22,7 +22,7 @@ class Player extends React.Component{
       <div className="navbar navbar-fixed-bottom">
 
         <ul className="nav navbar-nav navbar-left">
-          <li><button type="button" className="btn btn-link navbar-btn player-buttons"><i className="fa fa-step-backward" aria-hidden="true"></i></button></li>
+        <li><button type="button" className="btn btn-link navbar-btn player-buttons" onClick={this.props.prevCallback}><i className="fa fa-step-backward" aria-hidden="true"></i></button></li>
         <li><button type="button" className="btn btn-link navbar-btn player-buttons play-button" onClick={this.props.togglePlayCallback}><i className={playPauseClass} aria-hidden="true"></i></button></li>
         <li><button type="button" className="btn btn-link navbar-btn player-buttons" onClick={this.props.nextCallback}><i className="fa fa-step-forward" aria-hidden="true"></i></button></li>
         </ul>

diff --git a/app/components/youtube-songlist.component.js b/app/components/youtube-songlist.component.js
@@ -7,6 +7,15 @@ class YoutubeSongList extends React.Component {
 
   render() {
     var _this=this;
+
+    if (this.props.songs.length == 0){
+      return (
+          <div className="scrolling-table">
+          </div>
+      );
+    }
+
+
     return (
         <div className="scrolling-table">
         <table className="table table-hover table-condensed">

diff --git a/app/containers/app.container.js b/app/containers/app.container.js
@@ -62,19 +62,27 @@ class AppContainer extends React.Component {
     }
   }
 
-  playerNextCallback(){
+  playerChangeSong(offset){
     var _this=this;
 
-    if(this.state.playQueue[this.state.nowPlayingCurrentSong+1].streamurl==""){
+    if(this.state.playQueue[this.state.nowPlayingCurrentSong+offset].streamurl==""){
       this.setState({nowPlayingLoading: true});
-      this.fetchSongStreamUrl(this.state.playQueue[this.state.nowPlayingCurrentSong+1],
+      this.fetchSongStreamUrl(this.state.playQueue[this.state.nowPlayingCurrentSong+offset],
                               function(){
                                 _this.setState({nowPlayingLoading: false});
-                                _this.setState({nowPlayingCurrentSong: _this.state.nowPlayingCurrentSong+1});
                               });
+      this.setState({nowPlayingCurrentSong: _this.state.nowPlayingCurrentSong+offset});
     }
   }
 
+  playerNextCallback(){
+    this.playerChangeSong(1);
+  }
+
+  playerPrevCallback(){
+    this.playerChangeSong(-1);
+  }
+
   addToQueue(song, event){
     var pq = this.state.playQueue;
     pq.push(song);
@@ -87,7 +95,9 @@ class AppContainer extends React.Component {
 
   handleSongFinished(){
     var _this=this;
-    this.setState({nowPlayingCurrentSong: this.state.nowPlayingCurrentSong+1});
+    if (this.state.nowPlayingCurrentSong<this.state.playQueue.length-1){
+      this.setState({nowPlayingCurrentSong: this.state.nowPlayingCurrentSong+1});
+    }
 
     if (this.state.playQueue.length == 0){
       console.log("queue empty");
@@ -144,6 +154,7 @@ class AppContainer extends React.Component {
       progress={this.state.songProgress}
       togglePlayCallback={this.togglePlayCallback.bind(this)}
       nextCallback={this.playerNextCallback.bind(this)}
+      prevCallback={this.playerPrevCallback.bind(this)}
       playStatus={this.state.playStatus}
         />
         </div>

diff --git a/index.html b/index.html
@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html>
   <head>
-    <title>SONIC STRIKE</title>
+    <title>Nuclear</title>
     <link rel="stylesheet" type="text/css" href="media/bootstrap/css/bootstrap.min.css">
     <link rel="stylesheet" type="text/css" href="stylesheets/style.css">
     <link rel="stylesheet" type="text/css" href="fonts/quicksand.css">

diff --git a/stylesheets/style.css b/stylesheets/style.css
@@ -106,9 +106,9 @@ nav > a, nav > ul{
 }
 
 .player-buttons {
-  color: #ddd;
+  color: #FAFAFA;
   opacity: 0.85;
-  font-size: 16px;
+  font-size: 28px;
   margin: 0px 0px 0px 0px !important;
   padding: 12px 16px 0px 16px;
 }
@@ -167,7 +167,13 @@ nav > a, nav > ul{
 }
 
 th, td {
-  color: #ddd;
+  color: #FAFAFA;
+}
+
+tr {
+  border-radius: 0px;
+  border-bottom: solid rgba(255, 255, 255, 0.125);
+  border-width: 2px;
 }
 
 .table tbody>tr>td.vert-align{
@@ -182,6 +188,14 @@ th, td {
   background-color: #311b92;
 }
 
+.panel>.table-responsive:last-child>.table:last-child>tbody:last-child>tr:last-child, .panel>.table-responsive:last-child>.table:last-child>tfoot:last-child>tr:last-child, .panel>.table:last-child>tbody:last-child>tr:last-child, .panel>.table:last-child>tfoot:last-child>tr:last-child{
+  border-radius: 0px;
+}
+
+.table-hover>tbody>tr.info:hover>td{
+  background-color: #b388ff;
+}
+
 .col-md-2, .col-md-4, .col-md-6 {
   padding-right: 0px;
   padding-left: 0px;