Switch to Slider instead of ProgressBar

package.json

@@ -49,6 +49,7 @@
     "@babel/polyfill": "^7.0.0",
     "bootstrap": "3.3.7",
     "bootstrap-datetime-picker": "2.4.4",
+    "bootstrap-slider": "^10.2.1",
     "comment-json": "^1.1.3",
     "fs.extra": "^1.3.2",
     "fs.realpath": "^1.0.0",

src/player.jsx

@@ -24,6 +24,7 @@ let Term = require("term.js-cockpit");
 let Journal = require("journal");
 let $ = require("jquery");
 require("console.css");
+require("bootstrap-slider");
 
 /*
  * Get an object field, verifying its presence and type.
@@ -460,32 +461,57 @@ let PacketBuffer = class {
     }
 };
 
-let ProgressBar = class extends React.Component {
+class Slider extends React.Component {
     constructor(props) {
         super(props);
-        this.jumpTo = this.jumpTo.bind(this);
+        this.slideStart = this.slideStart.bind(this);
-    }
+        this.slideStop = this.slideStop.bind(this);
-
+        this.slider = null;
-    jumpTo(e) {
+        this.state = {
-        if (this.props.fastForwardFunc) {
+            paused: false,
-            let percent = parseInt((e.nativeEvent.offsetX * 100) / e.currentTarget.clientWidth);
-            let ts = parseInt((this.props.length * percent) / 100);
-            this.props.fastForwardFunc(ts);
-        }
-    }
-
-    render() {
-        let progress = {
-            "width": parseInt((this.props.mark * 100) / this.props.length) + "%"
         };
+    }
 
+    slideStart(e) {
+        this.setState({paused: this.props.paused});
+        this.props.pause();
+    }
+
+    slideStop(e) {
+        if (this.props.fastForwardFunc) {
+            this.props.fastForwardFunc(e);
+            if (this.state.paused === false) {
+                this.props.play();
+            }
+        }
+    }
+
+    componentDidMount() {
+        this.slider = $("#slider").slider({
+            value: 0,
+            tooltip: "hide",
+            enabled: false,
+        });
+        this.slider.slider('on', 'slideStart', this.slideStart);
+        this.slider.slider('on', 'slideStop', this.slideStop);
+    }
+
+    componentDidUpdate() {
+        if (this.props.length) {
+            this.slider.slider('enable');
+            this.slider.slider('setAttribute', 'max', this.props.length);
+        }
+        if (this.props.mark) {
+            this.slider.slider('setValue', this.props.mark);
+        }
+    }
+
+    render () {
         return (
-            <div id="progress_bar" className="progress" onClick={this.jumpTo}>
+            <input id="slider" type="text" />
-                <div className="progress-bar" role="progressbar" style={progress} />
-            </div>
         );
     }
-};
+}
 
 class InputPlayer extends React.Component {
     render() {
@@ -506,6 +532,8 @@ export class Player extends React.Component {
         this.handleTitleChange = this.handleTitleChange.bind(this);
         this.rewindToStart = this.rewindToStart.bind(this);
         this.playPauseToggle = this.playPauseToggle.bind(this);
+        this.play = this.play.bind(this);
+        this.pause = this.pause.bind(this);
         this.speedUp = this.speedUp.bind(this);
         this.speedDown = this.speedDown.bind(this);
         this.speedReset = this.speedReset.bind(this);
@@ -769,6 +797,14 @@ export class Player extends React.Component {
         this.setState({paused: !this.state.paused});
     }
 
+    play() {
+        this.setState({paused: false});
+    }
+
+    pause() {
+        this.setState({paused: true});
+    }
+
     speedUp() {
         let speedExp = this.state.speedExp;
         if (speedExp < 4) {
@@ -1010,17 +1046,6 @@ export class Player extends React.Component {
             "float": "right",
         };
 
-        const progressbar_style = {
-            'marginTop': '10px',
-        };
-
-        const currentTsPost = function(currentTS, bufLength) {
-            if (currentTS > bufLength) {
-                return bufLength;
-            }
-            return currentTS;
-        };
-
         let error = "";
         if (this.state.error) {
             error = (
@@ -1047,6 +1072,7 @@ export class Player extends React.Component {
                             </div>
                         </div>
                         <div className="panel-footer">
+                            <Slider length={this.buf.pos} mark={this.state.currentTsPost} fastForwardFunc={this.fastForwardToTS} play={this.play} pause={this.pause} paused={this.state.paused} />
                             <button title="Play/Pause - Hotkey: p" type="button" ref="playbtn"
                                     className="btn btn-default btn-lg margin-right-btn play-btn"
                                     onClick={this.playPauseToggle}>
@@ -1095,11 +1121,6 @@ export class Player extends React.Component {
                                     onClick={this.zoomOut} disabled={this.state.term_zoom_min}>
                                     <i className="fa fa-search-minus" aria-hidden="true" /></button>
                             </span>
-                            <div style={progressbar_style}>
-                                <ProgressBar length={this.buf.pos}
-                                    mark={currentTsPost(this.state.currentTsPost, this.buf.pos)}
-                                    fastForwardFunc={this.fastForwardToTS} />
-                            </div>
                             <div id="input-player-wrap">
                                 <InputPlayer input={this.state.input} />
                             </div>

src/recordings.css

@@ -394,6 +394,10 @@ table.listing-ct > thead th:last-child, tr.listing-ct-item td:last-child {
     resize: none;
 }
 
-#progress_bar {
+#input-player-wrap {
-    margin-bottom: 10px;
+    margin-top: 5px;
+}
+
+.panel-footer {
+    padding: 5px 15px;
 }

src/recordings.jsx

@@ -424,7 +424,8 @@ class Recording extends React.Component {
                         </div>
                     </div>
                     <div className="row">
-                        <div className="col-md-3">
+                        {player}
+                        <div className="col-md-6">
                             <div className="panel panel-default">
                                 <div className="panel-heading">
                                     <span>{_("Recording")}</span>
@@ -473,7 +474,6 @@ class Recording extends React.Component {
                                 </div>
                             </div>
                         </div>
-                        {player}
                     </div>
                 </div>
             );

src/slider.html

@@ -0,0 +1,163 @@
+<script src="components/bootstrap-slider/dist/bootstrap-slider.js"></script>
+<input id="slider-one" type="text"
+       data-provide="slider"
+       data-slider-min="0"
+       data-slider-max="100"
+       data-slider-tooltip="show" />
+
+<br>
+<br>
+
+<input id="slider-two" type="text"
+       data-provide="slider"
+       data-slider-ticks="[1, 2, 3, 4, 5]"
+       data-slider-ticks-labels='["1", "2", "3", "4", "5"]'
+       data-slider-min="1"
+       data-slider-max="5"
+       data-slider-step="1"
+       data-slider-value="3"
+       data-slider-tooltip="show" />
+
+<h2>Example of a slider in a form</h2>
+<form class="form-horizontal" role="form">
+    <div class="form-group">
+        <label for="size" class="col-sm-2 control-label">Size</label>
+        <div class="col-sm-10">
+            <input id="slider" type="text"
+                   data-provide="slider"
+                   data-slider-ticks="[1, 2, 3, 4, 5]"
+                   data-slider-ticks-labels='["1", "2", "3", "4", "5"]'
+                   data-slider-min="1"
+                   data-slider-max="5"
+                   data-slider-step="1"
+                   data-slider-value="3"
+                   data-slider-tooltip="show" />
+        </div>
+    </div>
+    <div class="form-group">
+        <label for="name" class="col-sm-2 control-label">Name</label>
+        <div class="col-sm-10">
+            <input type="text" class="form-control" id="name">
+        </div>
+    </div>
+
+    <div class="form-group">
+        <label for="size" class="col-sm-2 control-label">Size</label>
+        <div class="col-sm-10">
+            <div class="slider-pf">
+                <b>0</b>
+                <input id="size" type="text"
+                       data-provide="slider"
+                       data-slider-min="0"
+                       data-slider-max="100"
+                       data-slider-tooltip="show" />
+                <b>100</b>
+                <input type="text" size="3" class="slider-input-pf">
+                <span>GB</span>
+            </div>
+        </div>
+    </div>
+
+    <div class="form-group">
+        <div class="col-sm-offset-2 col-sm-10">
+            <button type="submit" class="btn btn-default">Sign in</button>
+        </div>
+    </div>
+</form>
+
+<br>
+<br>
+
+<div class="slider-pf">
+    <b>0</b>
+    <input id="slider-pf" type="text"
+           data-provide="slider"
+           data-slider-min="0"
+           data-slider-max="100"
+           data-slider-tooltip="show" />
+    <b>100</b>
+    <input type="text" size="3" class="slider-input-pf">
+    <span>GB</span>
+</div>
+
+<br>
+<br>
+
+<div class="slider-pf">
+    <b>0</b>
+    <input id="with-stops" type="text"
+           data-provide="slider"
+           data-slider-min="0"
+           data-slider-max="100"
+           data-slider-tooltip="show" />
+    <b>100</b>
+    <input type="text" size="3" class="slider-input-pf">
+    <span class="dropdown">
+    <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
+      GB
+      <span class="caret"></span>
+    </button>
+    <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
+      <li><a href="#">GB</a></li>
+      <li><a href="#">MB</a></li>
+    </ul>
+  </span>
+</div>
+<script>
+    $(function () {
+        $('.slider-input-pf').tooltip({ trigger: 'manual' })
+            .on('keyup', function (e) {
+                var $this = $(this);
+                var sd = $this.siblings('[data-provide=slider]').slider();
+                if ($this.val().trim() !== '' && !$.isNumeric(this.value)) {
+                    this.value = sd.slider('getValue');
+                }
+            })
+            .on('keypress blur', function (e) {
+                if (e.which == 13 || e.type === 'blur') {
+                    e.preventDefault();
+                    var $this = $(this);
+                    var sd = $this.siblings('[data-provide=slider]').slider();
+                    var max = sd.slider('getAttribute', 'max');
+                    var min = sd.slider('getAttribute', 'min');
+                    if (!$.isNumeric(this.value) || (this.value > max || this.value < min)) {
+                        var warningInfo = $.isNumeric(this.value) ? 'Valid value should be between ' + min
+                            + ' and ' + max : 'Valid value should be number';
+                        $this.attr('data-original-title', warningInfo).tooltip('show').addClass('warning');
+                        this.value = sd.slider('getValue');
+                        setTimeout(function(){ $this.tooltip('hide'); }, 3000);
+                    } else {
+                        if ($this.is('.warning')) {
+                            $this.tooltip('hide');
+                        }
+                        this.value = $this.val().trim();
+                        sd.slider('setValue', this.value);
+                    }
+                }
+            })
+            .siblings('[data-provide=slider]').each(function () {
+            $(this).siblings('.slider-input-pf').val(this.value);
+            $(this).slider().on('slide', function (e) {
+                $(e.target).siblings('.slider-input-pf').val(e.value);
+            });
+        });
+    });
+</script>
+
+
+
+componentDidMount() {
+this.slider = new Slider("input.slider", {
+value: 0,
+min: 0,
+max: 100
+});
+console.log(this.slider);
+}
+
+componentDidUpdate() {
+console.log('slider updated');
+console.log(this.slider);
+// this.slider.setAttribute('max', this.props.length);
+// this.slider.setValue(this.props.mark);
+}