Fix InputPlayer

src/player.jsx

@@ -44,6 +44,13 @@
         return value;
     }
 
+    let scrollToBottom = function(id) {
+        const el = document.getElementById(id);
+        if (el) {
+            el.scrollTop = el.scrollHeight;
+        }
+    }
+
     /*
      * An auto-loading buffer of recording's packets.
      */
@@ -488,7 +495,14 @@
 
         render() {
             return(
-                <textarea name="input" id="input" cols="30" rows="10" disabled>{this.props.input}</textarea>
+                <div id="input-player" className="panel panel-default">
+                    <div className="panel-heading">
+                        <span>Input</span>
+                    </div>
+                    <div className="panel-body">
+                        <textarea name="input" id="input-textarea" cols="30" rows="10" readonly disabled>{this.props.input}</textarea>
+                    </div>
+                </div>
             );
         }
 
@@ -520,6 +534,7 @@
             this.zoom = this.zoom.bind(this);
             this.fastForwardToTS = this.fastForwardToTS.bind(this);
             this.sendInput = this.sendInput.bind(this);
+            this.clearInputPlayer = this.clearInputPlayer.bind(this);
 
             this.state = {
                 cols:               80,
@@ -807,7 +822,12 @@
             this.setState({speedExp: 0});
         }
 
+        clearInputPlayer() {
+            this.setState({input: null});
+        }
+
         rewindToStart() {
+            this.clearInputPlayer();
             this.reset();
             this.sync();
         }
@@ -955,6 +975,9 @@
                 this.speed = Math.pow(2, this.state.speedExp);
                 this.sync();
             }
+            if (this.state.input != prevState.input) {
+                scrollToBottom("input-textarea");
+            }
         }
 
         render() {
@@ -1017,7 +1040,11 @@
 
             // ensure react never reuses this div by keying it with the terminal widget
             return (
-                <div>
+                <div id="recording-wrap">
+                <div id="input-player-wrap" className="col-md-3">
+                    <InputPlayer input={this.state.input} />
+                </div>
+                <div className="col-md-6 player-wrap">
                         <div ref="wrapper" className="panel panel-default">
                             <div className="panel-heading">
                                 <span>{this.state.title}</span>
@@ -1084,7 +1111,7 @@
                             </div>
                             {error}
                         </div>
-                    <InputPlayer input={this.state.input} />
+                    </div>
                 </div>
             );
         }

src/recordings.css

@@ -377,8 +377,26 @@ table.listing-ct > thead th:last-child, tr.listing-ct-item td:last-child {
     margin-bottom: 0;
 }
 
+#recording-wrap {
+    height: 100%;
+}
+
+#input-textarea {
+    width: 100%;
+    heigth: 100%;
+    font-family: monospace;
+}
+
+#input-player-wrap {
+    height: 100%;
+}
+
 .logs-view-log-time {
     display: inline-block;
     width: 150px;
     vertical-align: middle;
 }
+
+#input-player textarea{
+    resize: none;
+}

src/recordings.jsx

@@ -495,7 +495,7 @@
                             </div>
                         </div>
                         <div className="row">
-                            <div className="col-md-6">
+                            <div className="col-md-3">
                                 <div className="panel panel-default">
                                     <div className="panel-heading">
                                         <span>{_("Recording")}</span>
@@ -539,11 +539,9 @@
                                     </div>
                                 </div>
                             </div>
-                            <div className="col-md-6 player-wrap">
                             {player}
                         </div>
                     </div>
-                    </div>
                 );
             }
         }