Add Input playback

src/player.jsx

@@ -481,6 +481,19 @@
         }
     };
 
+    let InputPlayer = class extends React.Component {
+        constructor(props) {
+            super(props);
+        }
+
+        render() {
+            return(
+                <textarea name="input" id="input" cols="30" rows="10" disabled>{this.props.input}</textarea>
+            );
+        }
+
+    };
+
     let Player = class extends React.Component {
         constructor(props) {
             super(props);
@@ -506,6 +519,7 @@
             this.dragPanDisable = this.dragPanDisable.bind(this);
             this.zoom = this.zoom.bind(this);
             this.fastForwardToTS = this.fastForwardToTS.bind(this);
+            this.sendInput = this.sendInput.bind(this);
 
             this.state = {
                 cols:               80,
@@ -528,7 +542,8 @@
                 containerWidth: 630,
                 currentTsPost:  0,
                 scale:          1,
-                error:          null
+                error:          null,
+                input:          ""
             };
 
             this.containerHeight = 290;
@@ -670,6 +685,13 @@
             });
         }
 
+        sendInput(pkt) {
+            if (pkt) {
+                const current_input = this.state.input;
+                this.setState({input: current_input + pkt.io});
+            }
+        }
+
         /* Synchronize playback */
         sync() {
             let locDelay;
@@ -697,11 +719,6 @@
                         return;
                     }
 
-                    /* Skip packets we don't output */
-                    if (pkt.is_io && !pkt.is_output) {
-                        continue;
-                    }
-
                     this.pkt = pkt;
                 }
 
@@ -749,7 +766,9 @@
                 }
 
                 /* Output the packet */
-                if (this.pkt.is_io) {
+                if (this.pkt.is_io && !this.pkt.is_output) {
+                    this.sendInput(this.pkt);
+                } else if (this.pkt.is_io) {
                     this.state.term.write(this.pkt.io);
                 } else {
                     this.state.term.resize(this.pkt.width, this.pkt.height);
@@ -995,6 +1014,7 @@
 
             // ensure react never reuses this div by keying it with the terminal widget
             return (
+                <div>
                     <div ref="wrapper" className="panel panel-default">
                         <div className="panel-heading">
                             <span>{this.state.title}</span>
@@ -1061,6 +1081,8 @@
                         </div>
                         {error}
                     </div>
+                    <InputPlayer input={this.state.input} />
+                </div>
             );
         }