/*
 * This file is part of Cockpit.
 *
 * Copyright (C) 2017 Red Hat, Inc.
 *
 * Cockpit is free software; you can redistribute it and/or modify it
 * under the terms of the GNU Lesser General Public License as published by
 * the Free Software Foundation; either version 2.1 of the License, or
 * (at your option) any later version.
 *
 * Cockpit is distributed in the hope that it will be useful, but
 * WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU
 * Lesser General Public License for more details.
 *
 * You should have received a copy of the GNU Lesser General Public License
 * along with Cockpit; If not, see <http://www.gnu.org/licenses/>.
 */

(function() {
    "use strict";

    let cockpit = require("cockpit");
    let _ = cockpit.gettext;
    let React = require("react");
    let Term = require("term.js-cockpit");
    let Journal = require("journal");
    let $ = require("jquery");

    require("console.css");

    /*
     * Get an object field, verifying its presence and type.
     */
    let getValidField = function (object, field, type) {
        let value;
        if (!(field in object)) {
            throw Error("\"" + field + "\" field is missing");
        }
        value = object[field];
        if (typeof (value) != typeof (type)) {
            throw Error("invalid \"" + field + "\" field type: " + typeof (value));
        }
        return value;
    }

    /*
     * An auto-loading buffer of recording's packets.
     */
    let PacketBuffer = class {
        /*
         * Initialize a buffer.
         */
        constructor(matchList) {
            this.handleError = this.handleError.bind(this);
            this.handleStream = this.handleStream.bind(this);
            this.handleDone = this.handleDone.bind(this);
            /* RegExp used to parse message's timing field */
            this.timingRE = new RegExp(
                /* Delay (1) */
                "\\+(\\d+)|" +
                                    /* Text input (2) */
                                    "<(\\d+)|" +
                                    /* Binary input (3, 4) */
                                    "\\[(\\d+)/(\\d+)|" +
                                    /* Text output (5) */
                                    ">(\\d+)|" +
                                    /* Binary output (6, 7) */
                                    "\\](\\d+)/(\\d+)|" +
                                    /* Window (8, 9) */
                                    "=(\\d+)x(\\d+)|" +
                                    /* End of string */
                                    "$",
                /* Continue after the last match only */
                /* FIXME Support likely sparse */
                "y"
            );
            /* List of matches to apply when loading the buffer from Journal */
            this.matchList = matchList;
            /*
             * An array of two-element arrays (tuples) each containing a
             * packet index and a deferred object. The list is kept sorted to
             * have tuples with lower packet indices first. Once the buffer
             * receives a packet at the specified index, the matching tuple is
             * removed from the list, and its deferred object is resolved.
             * This is used to keep users informed about packets arriving.
             */
            this.idxDfdList = [];
            /* Last seen message ID */
            this.id = 0;
            /* Last seen time position */
            this.pos = 0;
            /* Last seen window width */
            this.width = null;
            /* Last seen window height */
            this.height = null;
            /* List of packets read */
            this.pktList = [];
            /* Error which stopped the loading */
            this.error = null;
            /* The journalctl reading the recording */
            this.journalctl = Journal.journalctl(
                this.matchList,
                {count: "all", follow: false});
            this.journalctl.fail(this.handleError);
            this.journalctl.stream(this.handleStream);
            this.journalctl.done(this.handleDone);
            /*
             * Last seen cursor of the first, non-follow, journalctl run.
             * Null if no entry was received yet, or the second run has
             * skipped the entry received last by the first run.
             */
            this.cursor = null;
            /* True if the first, non-follow, journalctl run has completed */
            this.done = false;
        }

        /*
         * Return a promise which is resolved when a packet at a particular
         * index is received by the buffer. The promise is rejected with a
         * non-null argument if an error occurs or has occurred previously.
         * The promise is rejected with null, when the buffer is stopped. If
         * the packet index is not specified, assume it's the next packet.
         */
        awaitPacket(idx) {
            let i;
            let idxDfd;

            /* If an error has occurred previously */
            if (this.error !== null) {
                /* Reject immediately */
                return $.Deferred().reject(this.error)
                        .promise();
            }

            /* If the buffer was stopped */
            if (this.journalctl === null) {
                return $.Deferred().reject(null)
                        .promise();
            }

            /* If packet index is not specified */
            if (idx === undefined) {
                /* Assume it's the next one */
                idx = this.pktList.length;
            } else {
                /* If it has already been received */
                if (idx < this.pktList.length) {
                    /* Return resolved promise */
                    return $.Deferred().resolve()
                            .promise();
                }
            }

            /* Try to find an existing, matching tuple */
            for (i = 0; i < this.idxDfdList.length; i++) {
                idxDfd = this.idxDfdList[i];
                if (idxDfd[0] == idx) {
                    return idxDfd[1].promise();
                } else if (idxDfd[0] > idx) {
                    break;
                }
            }

            /* Not found, create and insert a new tuple */
            idxDfd = [idx, $.Deferred()];
            this.idxDfdList.splice(i, 0, idxDfd);

            /* Return its promise */
            return idxDfd[1].promise();
        }

        /*
         * Return true if the buffer was done loading everything logged to
         * journal so far and is now waiting for and loading new entries.
         * Return false if the buffer is loading existing entries so far.
         */
        isDone() {
            return this.done;
        }

        /*
         * Stop receiving the entries
         */
        stop() {
            if (this.journalctl === null) {
                return;
            }
            /* Destroy journalctl */
            this.journalctl.stop();
            this.journalctl = null;
            /* Notify everyone we stopped */
            for (let i = 0; i < this.idxDfdList.length; i++) {
                this.idxDfdList[i][1].reject(null);
            }
            this.idxDfdList = [];
        }

        /*
         * Add a packet to the received packet list.
         */
        addPacket(pkt) {
            /* TODO Validate the packet */
            /* Add the packet */
            this.pktList.push(pkt)
            /* Notify any matching listeners */
            while (this.idxDfdList.length > 0) {
                let idxDfd = this.idxDfdList[0];
                if (idxDfd[0] < this.pktList.length) {
                    this.idxDfdList.shift();
                    idxDfd[1].resolve();
                } else {
                    break;
                }
            }
        }

        /*
         * Handle an error.
         */
        handleError(error) {
            /* Remember the error */
            this.error = error;
            /* Destroy journalctl, don't try to recover */
            if (this.journalctl !== null) {
                this.journalctl.stop();
                this.journalctl = null;
            }
            /* Notify everyone we had an error */
            for (let i = 0; i < this.idxDfdList.length; i++) {
                this.idxDfdList[i][1].reject(error);
            }
            this.idxDfdList = [];
        }

        /*
         * Parse packets out of a tlog message data and add them to the buffer.
         */
        parseMessageData(timing, in_txt, out_txt) {
            let matches;
            let in_txt_pos = 0;
            let out_txt_pos = 0;
            let t;
            let x;
            let y;
            let s;
            let io = [];
            let is_output;

            /* While matching entries in timing */
            this.timingRE.lastIndex = 0;
            for (;;) {
                /* Match next timing entry */
                matches = this.timingRE.exec(timing);
                if (matches === null) {
                    throw Error("invalid timing string");
                } else if (matches[0] == "") {
                    break;
                }

                /* Switch on entry type character */
                switch (t = matches[0][0]) {
                /* Delay */
                case "+":
                    x = parseInt(matches[1], 10);
                    if (x == 0) {
                        break;
                    }
                    if (io.length > 0) {
                        this.addPacket({pos: this.pos,
                                        is_io: true,
                                        is_output: is_output,
                                        io: io.join()});
                        io = [];
                    }
                    this.pos += x;
                    break;
                    /* Text or binary input */
                case "<":
                case "[":
                    x = parseInt(matches[(t == "<") ? 2 : 3], 10);
                    if (x == 0) {
                        break;
                    }
                    if (io.length > 0 && is_output) {
                        this.addPacket({pos: this.pos,
                                        is_io: true,
                                        is_output: is_output,
                                        io: io.join()});
                        io = [];
                    }
                    is_output = false;
                    /* Add (replacement) input characters */
                    s = in_txt.slice(in_txt_pos, in_txt_pos += x);
                    if (s.length != x) {
                        throw Error("timing entry out of input bounds");
                    }
                    io.push(s);
                    break;
                    /* Text or binary output */
                case ">":
                case "]":
                    x = parseInt(matches[(t == ">") ? 5 : 6], 10);
                    if (x == 0) {
                        break;
                    }
                    if (io.length > 0 && !is_output) {
                        this.addPacket({pos: this.pos,
                                        is_io: true,
                                        is_output: is_output,
                                        io: io.join()});
                        io = [];
                    }
                    is_output = true;
                    /* Add (replacement) output characters */
                    s = out_txt.slice(out_txt_pos, out_txt_pos += x);
                    if (s.length != x) {
                        throw Error("timing entry out of output bounds");
                    }
                    io.push(s);
                    break;
                    /* Window */
                case "=":
                    x = parseInt(matches[8], 10);
                    y = parseInt(matches[9], 10);
                    if (x == this.width && y == this.height) {
                        break;
                    }
                    if (io.length > 0) {
                        this.addPacket({pos: this.pos,
                                        is_io: true,
                                        is_output: is_output,
                                        io: io.join()});
                        io = [];
                    }
                    this.addPacket({pos: this.pos,
                                    is_io: false,
                                    width: x,
                                    height: y});
                    this.width = x;
                    this.height = y;
                    break;
                }
            }

            if (in_txt_pos < in_txt.length) {
                throw Error("extra input present");
            }
            if (out_txt_pos < out_txt.length) {
                throw Error("extra output present");
            }

            if (io.length > 0) {
                this.addPacket({pos: this.pos,
                                is_io: true,
                                is_output: is_output,
                                io: io.join()});
            }
        }

        /*
         * Parse packets out of a tlog message and add them to the buffer.
         */
        parseMessage(message) {
            let matches;
            let ver;
            let id;
            let pos;

            const number = Number();
            const string = String();

            /* Check version */
            ver = getValidField(message, "ver", string);
            matches = ver.match("^(\\d+)\\.(\\d+)$");
            if (matches === null || matches[1] > 2) {
                throw Error("\"ver\" field has invalid value: " + ver);
            }

            /* TODO Perhaps check host, rec, user, term, and session fields */

            /* Extract message ID */
            id = getValidField(message, "id", number);
            if (id <= this.id) {
                throw Error("out of order \"id\" field value: " + id);
            }

            /* Extract message time position */
            pos = getValidField(message, "pos", number);
            if (pos < this.message_pos) {
                throw Error("out of order \"pos\" field value: " + pos);
            }

            /* Update last received message ID and time position */
            this.id = id;
            this.pos = pos;

            /* Parse message data */
            this.parseMessageData(
                getValidField(message, "timing", string),
                getValidField(message, "in_txt", string),
                getValidField(message, "out_txt", string));
        }

        /*
         * Handle journalctl "stream" event.
         */
        handleStream(entryList) {
            let i;
            let e;
            for (i = 0; i < entryList.length; i++) {
                e = entryList[i];
                /* If this is the second, "follow", run */
                if (this.done) {
                    /* Skip the last entry we added on the first run */
                    if (this.cursor !== null) {
                        this.cursor = null;
                        continue;
                    }
                } else {
                    if (!('__CURSOR' in e)) {
                        this.handleError("No cursor in a Journal entry");
                    }
                    this.cursor = e['__CURSOR'];
                }
                /* TODO Refer to entry number/cursor in errors */
                if (!('MESSAGE' in e)) {
                    this.handleError("No message in Journal entry");
                }
                /* Parse the entry message */
                try {
                    this.parseMessage(JSON.parse(e['MESSAGE']));
                } catch (error) {
                    this.handleError(error);
                    return;
                }
            }
        }

        /*
         * Handle journalctl "done" event.
         */
        handleDone() {
            this.done = true;
            this.journalctl.stop();
            /* Continue with the "following" run  */
            this.journalctl = Journal.journalctl(
                this.matchList,
                {cursor: this.cursor,
                 follow: true, count: "all"});
            this.journalctl.fail(this.handleError);
            this.journalctl.stream(this.handleStream);
            /* NOTE: no "done" handler on purpose */
        }
    };

    let ProgressBar = class extends React.Component {
        constructor(props) {
            super(props);
            this.jumpTo = this.jumpTo.bind(this);
        }

        jumpTo(e) {
            if (this.props.fastForwardFunc) {
                let percent = parseInt((e.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) + "%"
            };

            return (
                <div className="progress" onClick={this.jumpTo}>
                    <div className="progress-bar" role="progressbar" style={progress} />
                </div>
            );
        }
    };

    let Player = class 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);
            this.handleTitleChange = this.handleTitleChange.bind(this);
            this.rewindToStart = this.rewindToStart.bind(this);
            this.playPauseToggle = this.playPauseToggle.bind(this);
            this.speedUp = this.speedUp.bind(this);
            this.speedDown = this.speedDown.bind(this);
            this.speedReset = this.speedReset.bind(this);
            this.fastForwardToEnd = this.fastForwardToEnd.bind(this);
            this.skipFrame = this.skipFrame.bind(this);
            this.handleKeyDown = this.handleKeyDown.bind(this);
            this.sync = this.sync.bind(this);
            this.zoomIn = this.zoomIn.bind(this);
            this.zoomOut = this.zoomOut.bind(this);
            this.fitTo = this.fitTo.bind(this);
            this.dragPan = this.dragPan.bind(this);
            this.dragPanEnable = this.dragPanEnable.bind(this);
            this.dragPanDisable = this.dragPanDisable.bind(this);
            this.zoom = this.zoom.bind(this);
            this.fastForwardToTS = this.fastForwardToTS.bind(this);

            this.state = {
                cols:               80,
                rows:               25,
                title:              _("Player"),
                term:               null,
                paused:             true,
                /* Speed exponent */
                speedExp:           0,
                container_width:    630,
                scale_initial:      1,
                scale_lock:         false,
                term_top_style:     "50%",
                term_left_style:    "50%",
                term_translate:     "-50%, -50%",
                term_scroll:        "hidden",
                term_zoom_max:      false,
                term_zoom_min:      false,
                drag_pan:           false,
                containerWidth: 630,
                currentTsPost:  0,
                scale:          1,
                error:          null
            };

            this.containerHeight = 290;

            /* Auto-loading buffer of recording's packets */
            this.buf = new PacketBuffer(this.props.matchList);

            /* Current recording time, ms */
            this.recTS = 0;
            /* Corresponding local time, ms */
            this.locTS = 0;

            /* Index of the current packet */
            this.pktIdx = 0;
            /* Current packet, or null if not retrieved */
            this.pkt = null;
            /* Timeout ID of the current packet, null if none */
            this.timeout = null;

            /* True if the next packet should be output without delay */
            this.skip = false;
            /* Playback speed */
            this.speed = 1;
            /*
             * Timestamp playback should fast-forward to.
             * Recording time, ms, or null if not fast-forwarding.
             */
            this.fastForwardTo = null;
        }

        reset() {
            /* Clear any pending timeouts */
            this.clearTimeout();

            /* Reset the terminal */
            this.state.term.reset();

            /* Move to beginning of buffer */
            this.pktIdx = 0;
            /* No packet loaded */
            this.pkt = null;

            /* We are not skipping */
            this.skip = false;
            /* We are not fast-forwarding */
            this.fastForwardTo = null;

            /* Move to beginning of recording */
            this.recTS = 0;
            /* Start the playback time */
            this.locTS = performance.now();

            /* Wait for the first packet */
            this.awaitPacket(0);
        }

        componentWillMount() {
            let term = new Term({
                cols: this.state.cols,
                rows: this.state.rows,
                screenKeys: true,
                useStyle: true
            });

            term.on('title', this.handleTitleChange);

            this.setState({ term: term });

            window.addEventListener("keydown", this.handleKeyDown, false);
        }

        componentDidMount() {
            if (this.refs.wrapper.offsetWidth) {
                this.setState({containerWidth: this.refs.wrapper.offsetWidth});
            }
            /* Open the terminal */
            this.state.term.open(this.refs.term);
            window.setInterval(this.sync, 100);
            /* Reset playback */
            this.reset();
        }

        /* Subscribe for a packet at specified index */
        awaitPacket(idx) {
            this.buf.awaitPacket(idx).done(this.handlePacket)
                    .fail(this.handleError);
        }

        /* Set next packet timeout, ms */
        setTimeout(ms) {
            this.timeout = window.setTimeout(this.handleTimeout, ms);
        }

        /* Clear next packet timeout */
        clearTimeout() {
            if (this.timeout !== null) {
                window.clearTimeout(this.timeout);
                this.timeout = null;
            }
        }

        /* Handle packet retrieval error */
        handleError(error) {
            if (error !== null) {
                this.setState({error: error});
                console.warn(error);
            }
        }

        /* Handle packet retrieval success */
        handlePacket() {
            this.sync();
        }

        /* Handle arrival of packet output time */
        handleTimeout() {
            this.timeout = null;
            this.sync();
        }

        /* Handle terminal title change */
        handleTitleChange(title) {
            this.setState({ title: _("Player") + ": " + title });
        }

        _transform(width, height) {
            var relation = Math.min(
                this.state.containerWidth / this.state.term.element.offsetWidth,
                this.containerHeight / this.state.term.element.offsetHeight
            );
            this.setState({
                term_top_style: "50%",
                term_left_style: "50%",
                term_translate: "-50%, -50%",
                scale: relation,
                scale_initial: relation,
                cols: width,
                rows: height
            });
        }

        /* Synchronize playback */
        sync() {
            let locDelay;

            /* We are already called, don't call us with timeout */
            this.clearTimeout();

            /* Forever */
            for (;;) {
                /* Get another packet to output, if none */
                for (; this.pkt === null; this.pktIdx++) {
                    let pkt = this.buf.pktList[this.pktIdx];
                    /* If there are no more packets */
                    if (pkt === undefined) {
                        /*
                         * If we're done loading existing packets and we were
                         * fast-forwarding.
                         */
                        if (this.fastForwardTo != null && this.buf.isDone()) {
                            /* Stop fast-forwarding */
                            this.fastForwardTo = null;
                        }
                        /* Call us when we get one */
                        this.awaitPacket();
                        return;
                    }

                    /* Skip packets we don't output */
                    if (pkt.is_io && !pkt.is_output) {
                        continue;
                    }

                    this.pkt = pkt;
                }

                /* Get the current local time */
                let nowLocTS = performance.now();

                /* Ignore the passed time, if we're paused */
                if (this.state.paused) {
                    locDelay = 0;
                } else {
                    locDelay = nowLocTS - this.locTS;
                }

                /* Sync to the local time */
                this.locTS = nowLocTS;

                /* If we are skipping one packet's delay */
                if (this.skip) {
                    this.skip = false;
                    this.recTS = this.pkt.pos;
                /* Else, if we are fast-forwarding */
                } else if (this.fastForwardTo !== null) {
                    /* If we haven't reached fast-forward destination */
                    if (this.pkt.pos < this.fastForwardTo) {
                        this.recTS = this.pkt.pos;
                    } else {
                        this.recTS = this.fastForwardTo;
                        this.fastForwardTo = null;
                        continue;
                    }
                /* Else, if we are paused */
                } else if (this.state.paused) {
                    return;
                } else {
                    this.recTS += locDelay * this.speed;
                    let pktRecDelay = this.pkt.pos - this.recTS;
                    let pktLocDelay = pktRecDelay / this.speed;
                    this.setState({currentTsPost: parseInt(this.recTS)});
                    /* If we're more than 5 ms early for this packet */
                    if (pktLocDelay > 5) {
                        /* Call us again on time, later */
                        this.setTimeout(pktLocDelay);
                        return;
                    }
                }

                /* Output the packet */
                if (this.pkt.is_io) {
                    this.state.term.write(this.pkt.io);
                } else {
                    this.state.term.resize(this.pkt.width, this.pkt.height);
                    if (!this.state.scale_lock) {
                        this._transform(this.pkt.width, this.pkt.height);
                    }
                }

                /* We no longer have a packet */
                this.pkt = null;
            }
        }

        playPauseToggle() {
            this.setState({paused: !this.state.paused});
        }

        speedUp() {
            let speedExp = this.state.speedExp;
            if (speedExp < 4) {
                this.setState({speedExp: speedExp + 1});
            }
        }

        speedDown() {
            let speedExp = this.state.speedExp;
            if (speedExp > -4) {
                this.setState({speedExp: speedExp - 1});
            }
        }

        speedReset() {
            this.setState({speedExp: 0});
        }

        rewindToStart() {
            this.reset();
            this.sync();
        }

        fastForwardToEnd() {
            this.fastForwardTo = Infinity;
            this.sync();
        }

        fastForwardToTS(ts) {
            if (ts < this.recTS) {
                this.reset();
            }
            this.fastForwardTo = ts;
            this.sync();
        }

        skipFrame() {
            this.skip = true;
            this.sync();
        }

        handleKeyDown(event) {
            let keyCodesFuncs = {
                "p": this.playPauseToggle,
                "}": this.speedUp,
                "{": this.speedDown,
                "Backspace": this.speedReset,
                ".": this.skipFrame,
                "G": this.fastForwardToEnd,
                "R": this.rewindToStart,
                "+": this.zoomIn,
                "=": this.zoomIn,
                "-": this.zoomOut,
                "Z": this.fitIn,
            };
            if (keyCodesFuncs[event.key]) {
                (keyCodesFuncs[event.key](event));
            }
        }

        zoom(scale) {
            if (scale.toFixed(6) === this.state.scale_initial.toFixed(6)) {
                this.fitTo();
            } else {
                this.setState({
                    term_top_style: "0",
                    term_left_style: "0",
                    term_translate: "0, 0",
                    scale_lock: true,
                    term_scroll: "auto",
                    scale: scale,
                    term_zoom_max: false,
                    term_zoom_min: false,
                });
            }
        }

        dragPan() {
            (this.state.drag_pan ? this.dragPanDisable() : this.dragPanEnable());
        }

        dragPanEnable() {
            this.setState({drag_pan: true});

            let scrollwrap = this.refs.scrollwrap;

            let clicked = false;
            let clickX;
            let clickY;

            $(this.refs.scrollwrap).on({
                'mousemove': function(e) {
                    clicked && updateScrollPos(e);
                },
                'mousedown': function(e) {
                    clicked = true;
                    clickY = e.pageY;
                    clickX = e.pageX;
                },
                'mouseup': function() {
                    clicked = false;
                    $('html').css('cursor', 'auto');
                }
            });

            let updateScrollPos = function(e) {
                $('html').css('cursor', 'move');
                $(scrollwrap).scrollTop($(scrollwrap).scrollTop() + (clickY - e.pageY));
                $(scrollwrap).scrollLeft($(scrollwrap).scrollLeft() + (clickX - e.pageX));
            };
        }

        dragPanDisable() {
            this.setState({drag_pan: false});
            let scrollwrap = this.refs.scrollwrap;
            $(scrollwrap).off("mousemove");
            $(scrollwrap).off("mousedown");
            $(scrollwrap).off("mouseup");
        }

        zoomIn() {
            let scale = this.state.scale;
            if (scale < 2.1) {
                scale = scale + 0.1;
                this.zoom(scale);
            } else {
                this.setState({term_zoom_max: true});
            }
        }

        zoomOut() {
            let scale = this.state.scale;
            if (scale >= 0.2) {
                scale = scale - 0.1;
                this.zoom(scale);
            } else {
                this.setState({term_zoom_min: true});
            }
        }

        fitTo() {
            this.setState({
                term_top_style: "50%",
                term_left_style: "50%",
                term_translate: "-50%, -50%",
                scale_lock: false,
                term_scroll: "hidden",
            });
            this._transform();
        }

        componentWillUpdate(nextProps, nextState) {
            /* If we changed pause state or speed exponent */
            if (nextState.paused != this.state.paused ||
                nextState.speedExp != this.state.speedExp) {
                this.sync();
            }
        }

        componentDidUpdate(prevProps, prevState) {
            /* If we changed pause state or speed exponent */
            if (this.state.paused != prevState.paused ||
                this.state.speedExp != prevState.speedExp) {
                this.speed = Math.pow(2, this.state.speedExp);
                this.sync();
            }
        }

        render() {
            let speedExp = this.state.speedExp;
            let speedFactor = Math.pow(2, Math.abs(speedExp));
            let speedStr;

            if (speedExp > 0) {
                speedStr = "x" + speedFactor;
            } else if (speedExp < 0) {
                speedStr = "/" + speedFactor;
            } else {
                speedStr = "";
            }

            const style = {
                "transform": "scale(" + this.state.scale + ") translate(" + this.state.term_translate + ")",
                "transform-origin": "top left",
                "display": "inline-block",
                "margin": "0 auto",
                "position": "absolute",
                "top": this.state.term_top_style,
                "left": this.state.term_left_style,
            };

            const scrollwrap = {
                "min-width": "630px",
                "height": this.containerHeight + "px",
                "background-color": "#f5f5f5",
                "overflow": this.state.term_scroll,
                "position": "relative",
            };

            const to_right = {
                "float": "right",
            };

            const progressbar_style = {
                'margin-top': '10px',
            };

            const currentTsPost = function(currentTS, bufLength) {
                if (currentTS > bufLength) {
                    return bufLength;
                }
                return currentTS;
            };

            let error = "";
            if (this.state.error) {
                error = (
                    <div className="alert alert-danger alert-dismissable" >
                        <button type="button" className="close" data-dismiss="alert" aria-hidden="true">
                            <span className="pficon pficon-close" />
                        </button>
                        <span className="pficon pficon-error-circle-o" />
                        {this.state.error}.
                    </div>);
            }

            // ensure react never reuses this div by keying it with the terminal widget
            return (
                <div ref="wrapper" className="panel panel-default">
                    <div className="panel-heading">
                        <span>{this.state.title}</span>
                    </div>
                    <div className="panel-body">
                        <div className={(this.state.drag_pan ? "dragnpan" : "")} style={scrollwrap} ref="scrollwrap">
                            <div ref="term" className="console-ct" key={this.state.term} style={style} />
                        </div>
                    </div>
                    <div className="panel-footer">
                        <button title="Play/Pause - Hotkey: p" type="button" ref="playbtn"
                                className="btn btn-default btn-lg margin-right-btn play-btn"
                                onClick={this.playPauseToggle}>
                            <i className={"fa fa-" + (this.state.paused ? "play" : "pause")}
                               aria-hidden="true" />
                        </button>
                        <button title="Skip Frame - Hotkey: ." type="button"
                                className="btn btn-default btn-lg margin-right-btn"
                                onClick={this.skipFrame}>
                            <i className="fa fa-step-forward" aria-hidden="true" />
                        </button>
                        <button title="Restart Playback - Hotkey: Shift-R" type="button"
                                className="btn btn-default btn-lg" onClick={this.rewindToStart}>
                            <i className="fa fa-fast-backward" aria-hidden="true" />
                        </button>
                        <button title="Fast-forward to end - Hotkey: Shift-G" type="button"
                                className="btn btn-default btn-lg margin-right-btn"
                                onClick={this.fastForwardToEnd}>
                            <i className="fa fa-fast-forward" aria-hidden="true" />
                        </button>
                        <button title="Speed /2 - Hotkey: {" type="button"
                                className="btn btn-default btn-lg" onClick={this.speedDown}>
                            /2
                        </button>
                        <button title="Reset Speed - Hotkey: Backspace" type="button"
                                className="btn btn-default btn-lg" onClick={this.speedReset}>
                            1:1
                        </button>
                        <button title="Speed x2 - Hotkey: }" type="button"
                                className="btn btn-default btn-lg margin-right-btn"
                                onClick={this.speedUp}>
                            x2
                        </button>
                        <span>{speedStr}</span>
                        <span style={to_right}>
                            <button title="Drag'n'Pan" type="button" className="btn btn-default btn-lg"
                                onClick={this.dragPan}>
                                <i className={"fa fa-" + (this.state.drag_pan ? "hand-rock-o" : "hand-paper-o")}
                                    aria-hidden="true" /></button>
                            <button title="Zoom In - Hotkey: =" type="button" className="btn btn-default btn-lg"
                                onClick={this.zoomIn} disabled={this.state.term_zoom_max}>
                                <i className="fa fa-search-plus" aria-hidden="true" /></button>
                            <button title="Fit To - Hotkey: Z" type="button" className="btn btn-default btn-lg"
                                onClick={this.fitTo}><i className="fa fa-expand" aria-hidden="true" /></button>
                            <button title="Zoom Out - Hotkey: -" type="button" className="btn btn-default btn-lg"
                                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>
                    {error}
                </div>
            );
        }

        componentWillUnmount() {
            this.buf.stop();
            window.removeEventListener("keydown", this.handleKeyDown, false);
            this.state.term.destroy();
        }
    };

    Player.propTypes = {
        matchList: React.PropTypes.array,
        // onTitleChanged: React.PropTypes.func
    };

    module.exports = { Player: Player };
}());