From 5f58af7624b86743a2e0cd250660a31ed41dccec Mon Sep 17 00:00:00 2001
From: Kyrylo Gliebov <kgliebov@redhat.com>
Date: Tue, 2 Oct 2018 20:10:18 +0200
Subject: [PATCH] Player refactoring

---
 src/player.jsx     | 24 +++++++++---------------
 src/recordings.css | 19 ++++++++-----------
 2 files changed, 17 insertions(+), 26 deletions(-)

diff --git a/src/player.jsx b/src/player.jsx
index e0fb33c..6cd9bcf 100644
--- a/src/player.jsx
+++ b/src/player.jsx
@@ -480,32 +480,26 @@ let ProgressBar = class extends React.Component {
         };
 
         return (
-            <div className="progress" onClick={this.jumpTo}>
+            <div id="progress_bar" className="progress" onClick={this.jumpTo}>
                 <div className="progress-bar" role="progressbar" style={progress} />
             </div>
         );
     }
 };
 
-let InputPlayer = class extends React.Component {
+class InputPlayer extends React.Component {
     render() {
+        const input = String(this.props.input).replace(/(?:\r\n|\r|\n)/g, " ");
+
         return (
-            <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" value={this.props.input} readOnly disabled />
-                </div>
-            </div>
+            <textarea name="input" id="input-textarea" cols="30" rows="1" value={input} readOnly disabled />
         );
     }
-};
+}
 
 export class Player extends React.Component {
     constructor(props) {
         super(props);
-
         this.handleTimeout = this.handleTimeout.bind(this);
         this.handlePacket = this.handlePacket.bind(this);
         this.handleError = this.handleError.bind(this);
@@ -1042,9 +1036,6 @@ export class Player extends React.Component {
         // ensure react never reuses this div by keying it with the terminal widget
         return (
             <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">
@@ -1109,6 +1100,9 @@ export class Player extends React.Component {
                                     mark={currentTsPost(this.state.currentTsPost, this.buf.pos)}
                                     fastForwardFunc={this.fastForwardToTS} />
                             </div>
+                            <div id="input-player-wrap">
+                                <InputPlayer input={this.state.input} />
+                            </div>
                         </div>
                         {error}
                     </div>
diff --git a/src/recordings.css b/src/recordings.css
index 80b7be5..a163f44 100644
--- a/src/recordings.css
+++ b/src/recordings.css
@@ -381,22 +381,19 @@ table.listing-ct > thead th:last-child, tr.listing-ct-item td:last-child {
     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{
+#input-textarea {
+    width: 100%;
+    heigth: 100%;
+    font-family: monospace;
     resize: none;
 }
+
+#progress_bar {
+    margin-bottom: 10px;
+}