Video JS Range Slider Not Working

Question

I am trying to implement Range slider plugin to my video js player in my react project. I am already markers plugin integrated to my player. I have see the documentation of Rangeslider Plugin and followed the instructions given https://github.com/iamjem/rangeslider-videojs , couldn't get it working. When I do it, neither I get rangeslider on my player nor I get markers (which were working before adding rangeslider). Here is my code.

PlayerLogic.js (I initailize my player in this)

class PlayerLogic extends Component {
    constructor() {
        super();
        this.state = {
            player: {}
        };
    }

    componentDidMount() {
        var self = this;
        var player = videojs(this.refs.video, this.props.options).ready(function () {
            self.player = this;
            self.player.on('play', self.handlePlay);
        });

        if (this.props.onPlayerInit) this.props.onPlayerInit(player);
var options = {};
    player.rangeslider(options);
        player.markers({
            markerStyle: {},
            markers: [
                {length: 8, startTime: 10, endTime: 15, time: 9.5, text: "Cigarette"},
                {length: 2, startTime: 20, endTime: 25, time: 16, text: "Cigarette"},
                {length: 15, startTime: 30, endTime: 38, time: 23.6, text: "Cigarette"},
                {length: 11, startTime: 30, endTime: 38, time: 23.6, text: "Alcohol"},
                {length: 25, startTime: 51, endTime: 55, time: 28, text: "Cigarette"},
                {length: 10, startTime: 60, endTime: 80, time: 35, text: "Alcohol"},
                {length: 15, startTime: 70, endTime: 115, time: 50, text: "Alcohol"},
            ],
            onMarkerReached: function () {
                player.pause();
            },


        });

        this.setState({player: player});

    }



    handlePlay() {
        console.log("handle play ")
    }

    render() {
        var props = blacklist(this.props, 'children', 'className', 'src', 'type', 'onPlay');
        props.className = cx(this.props.className, 'videojs', 'video-js vjs-default-skin', 'vjs-big-play-centered');


        assign(props, {
            ref: 'video',
            controls: true,
            width: "700", height: "450"
        });

        return (
            
                
            )

    }
}

part of rangeslider.js (as the actual code is too long)

//----------------Load Plugin----------------//
(function () {
//-- Load RangeSlider plugin in videojs
    function RangeSlider(options) {
        player.rangeslider = new RangeSlider(player, options);

        //When the DOM and the video media is loaded
        function initialVideoFinished(event) {
            var plugin = player.rangeslider;
            //All components will be initialize after they have been loaded by videojs
            for (var index in plugin.components) {
                plugin.components[index].init_();
            }

            if (plugin.options.hidden)
                plugin.hide(); //Hide the Range Slider

            if (plugin.options.locked)
                plugin.lock(); //Lock the Range Slider

            if (plugin.options.panel == false)
                plugin.hidePanel(); //Hide the second Panel

            if (plugin.options.controlTime == false)
                plugin.hidecontrolTime(); //Hide the control time panel

            plugin._reset();
            player.trigger('loadedRangeSlider'); //Let know if the Range Slider DOM is ready
        }
        if (player.techName == 'Youtube') {
            //Detect youtube problems
            player.one('error', function (e) {
                switch (player.error) {
                    case 2:
                        alert("The request contains an invalid parameter value. For example, this error occurs if you specify a video ID that does not have 11 characters, or if the video ID contains invalid characters, such as exclamation points or asterisks.");
                    case 5:
                        alert("The requested content cannot be played in an HTML5 player or another error related to the HTML5 player has occurred.");
                    case 100:
                        alert("The video requested was not found. This error occurs when a video has been removed (for any reason) or has been marked as private.");
                        break;
                    case 101:
                        alert("The owner of the requested video does not allow it to be played in embedded players.");
                        break;
                    case 150:
                        alert("The owner of the requested video does not allow it to be played in embedded players.");
                        break;
                    default:
                        alert("Unknown Error");
                        break;
                }
            });
            player.on('firstplay', initialVideoFinished);
        } else {
            player.one('playing', initialVideoFinished);
        }


        console.log("Loaded Plugin RangeSlider");
    }
    videojs.plugin('rangeslider', RangeSlider);



//-- Plugin
    function RangeSlider(player, options) {
        var player = player || this;

        this.player = player;

        this.components = {}; // holds any custom components we add to the player

        options = options || {}; // plugin options

        if (!options.hasOwnProperty('locked'))
            options.locked = false; // lock slider handles

        if (!options.hasOwnProperty('hidden'))
            options.hidden = true; // hide slider handles

        if (!options.hasOwnProperty('panel'))
            options.panel = true; // Show Second Panel

        if (!options.hasOwnProperty('controlTime'))
            options.controlTime = true; // Show Control Time to set the arrows in the edition

        this.options = options;

        this.init();
    }

//-- Methods
    RangeSlider.prototype = {
        /*Constructor*/
        init: function () {
            var player = this.player || {};

            this.updatePrecision = 3;

            //position in second of the arrows
            this.start = 0;
            this.end = 0;

            //components of the plugin
            var controlBar = player.controlBar;
            var seekBar = controlBar.progressControl.seekBar;
            this.components.RSTimeBar = seekBar.RSTimeBar;
            this.components.ControlTimePanel = controlBar.ControlTimePanel;

            //Save local component
            this.rstb = this.components.RSTimeBar;
            this.box = this.components.SeekRSBar = this.rstb.SeekRSBar;
            this.bar = this.components.SelectionBar = this.box.SelectionBar;
            this.left = this.components.SelectionBarLeft = this.box.SelectionBarLeft;
            this.right = this.components.SelectionBarRight = this.box.SelectionBarRight;
            this.tp = this.components.TimePanel = this.box.TimePanel;
            this.tpl = this.components.TimePanelLeft = this.tp.TimePanelLeft;
            this.tpr = this.components.TimePanelRight = this.tp.TimePanelRight;
            this.ctp = this.components.ControlTimePanel;
            this.ctpl = this.components.ControlTimePanelLeft = this.ctp.ControlTimePanelLeft;
            this.ctpr = this.components.ControlTimePanelRight = this.ctp.ControlTimePanelRight;

        },
        lock: function () {
            this.options.locked = true;
            this.ctp.enable(false);
            if (typeof this.box != 'undefined')
                videojs.addClass(this.box.el_, 'locked');
        },
        unlock: function () {
            this.options.locked = false;
            this.ctp.enable();
            if (typeof this.box != 'undefined')
                videojs.removeClass(this.box.el_, 'locked');
        },
        show: function () {
            this.options.hidden = false;
            if (typeof this.rstb != 'undefined') {
                this.rstb.show();
                if (this.options.controlTime)
                    this.showcontrolTime();
            }
        },
        hide: function () {
            this.options.hidden = true;
            if (typeof this.rstb != 'undefined') {
                this.rstb.hide();
                this.ctp.hide();
            }
        },
        showPanel: function () {
            this.options.panel = true;
            if (typeof this.tp != 'undefined')
                videojs.removeClass(this.tp.el_, 'disable');
        },
        hidePanel: function () {
            this.options.panel = false;
            if (typeof this.tp != 'undefined')
                videojs.addClass(this.tp.el_, 'disable');
        },
        showcontrolTime: function () {
            this.options.controlTime = true;
            if (typeof this.ctp != 'undefined')
                this.ctp.show();
        },
        hidecontrolTime: function () {
            this.options.controlTime = false;
            if (typeof this.ctp != 'undefined')
                this.ctp.hide();
        },
        setValue: function (index, seconds, writeControlTime) {
            //index = 0 for the left Arrow and 1 for the right Arrow. Value in seconds
            var writeControlTime = typeof writeControlTime != 'undefined' ? writeControlTime : true;

            var percent = this._percent(seconds);
            var isValidIndex = (index === 0 || index === 1);
            var isChangeable = !this.locked;
            if (isChangeable && isValidIndex)
                this.box.setPosition(index, percent, writeControlTime);
        },
        setValues: function (start, end, writeControlTime) {
            //index = 0 for the left Arrow and 1 for the right Arrow. Value in seconds
            var writeControlTime = typeof writeControlTime != 'undefined' ? writeControlTime : true;

            this._reset();

            this._setValuesLocked(start, end, writeControlTime);
        },
        getValues: function () { //get values in seconds
            var values = {}, start, end;
            start = this.start || this._getArrowValue(0);
            end = this.end || this._getArrowValue(1);
            return {start: start, end: end};
        },
        playBetween: function (start, end, showRS) {
            showRS = typeof showRS == 'undefined' ? true : showRS;
            this.player.currentTime(start);
            this.player.play();
            if (showRS) {
                this.show();
                this._reset();
            } else {
                this.hide();
            }
            this._setValuesLocked(start, end);

            this.bar.activatePlay(start, end);
        },
        loop: function (start, end, show) {
            var player = this.player;

            if (player) {
                player.on("pause", videojs.bind(this, function () {
                    this.looping = false;
                }));

                show = typeof show === 'undefined' ? true : show;

                if (show) {
                    this.show();
                    this._reset();
                }
                else {
                    this.hide();
                }
                this._setValuesLocked(start, end);

                this.timeStart = start;
                this.timeEnd = end;
                this.looping = true;

                this.player.currentTime(start);
                this.player.play();

                this.player.on("timeupdate", videojs.bind(this, this.bar.process_loop));
            }
        },
        _getArrowValue: function (index) {
            var index = index || 0;
            var duration = this.player.duration();

            duration = typeof duration == 'undefined' ? 0 : duration;

            var percentage = this[index === 0 ? "left" : "right"].el_.style.left.replace("%", "");
            if (percentage == "")
                percentage = index === 0 ? 0 : 100;

            return videojs.round(this._seconds(percentage / 100), this.updatePrecision - 1);
        },
        _percent: function (seconds) {
            var duration = this.player.duration();
            if (isNaN(duration)) {
                return 0;
            }
            return Math.min(1, Math.max(0, seconds / duration));
        },
        _seconds: function (percent) {
            var duration = this.player.duration();
            if (isNaN(duration)) {
                return 0;
            }
            return Math.min(duration, Math.max(0, percent * duration));
        },
        _reset: function () {
            var duration = this.player.duration();
            this.tpl.el_.style.left = '0%';
            this.tpr.el_.style.left = '100%';
            this._setValuesLocked(0, duration);
        },
        _setValuesLocked: function (start, end, writeControlTime) {
            var triggerSliderChange = typeof writeControlTime != 'undefined';
            var writeControlTime = typeof writeControlTime != 'undefined' ? writeControlTime : true;
            if (this.options.locked) {
                this.unlock();//It is unlocked to change the bar position. In the end it will return the value.
                this.setValue(0, start, writeControlTime);
                this.setValue(1, end, writeControlTime);
                this.lock();
            } else {
                this.setValue(0, start, writeControlTime);
                this.setValue(1, end, writeControlTime);
            }

            // Trigger slider change
            if (triggerSliderChange) {
                this._triggerSliderChange();
            }
        },
        _checkControlTime: function (index, TextInput, timeOld) {
            var h = TextInput[0],
                m = TextInput[1],
                s = TextInput[2],
                newHour = h.value,
                newMin = m.value,
                newSec = s.value,
                obj, objNew, objOld;
            index = index || 0;

            if (newHour != timeOld[0]) {
                obj = h;
                objNew = newHour;
                objOld = timeOld[0];
            } else if (newMin != timeOld[1]) {
                obj = m;
                objNew = newMin;
                objOld = timeOld[1];
            } else if (newSec != timeOld[2]) {
                obj = s;
                objNew = newSec;
                objOld = timeOld[2];
            } else {
                return false;
            }

            var duration = this.player.duration() || 0,
                durationSel;

            var intRegex = /^\d+$/;//check if the objNew is an integer
            if (!intRegex.test(objNew) || objNew > 60) {
                objNew = objNew == "" ? "" : objOld;
            }

            newHour = newHour == "" ? 0 : newHour;
            newMin = newMin == "" ? 0 : newMin;
            newSec = newSec == "" ? 0 : newSec;

            durationSel = videojs.TextTrack.prototype.parseCueTime(newHour + ":" + newMin + ":" + newSec);
            if (durationSel > duration) {
                obj.value = objOld;
                obj.style.border = "1px solid red";
            } else {
                obj.value = objNew;
                h.style.border = m.style.border = s.style.border = "1px solid transparent";
                this.setValue(index, durationSel, false);

                // Trigger slider change
                this._triggerSliderChange();
            }
            if (index === 1) {
                var oldTimeLeft = this.ctpl.el_.children,
                    durationSelLeft = videojs.TextTrack.prototype.parseCueTime(oldTimeLeft[0].value + ":" + oldTimeLeft[1].value + ":" + oldTimeLeft[2].value);
                if (durationSel < durationSelLeft) {
                    obj.style.border = "1px solid red";
                }
            } else {

                var oldTimeRight = this.ctpr.el_.children,
                    durationSelRight = videojs.TextTrack.prototype.parseCueTime(oldTimeRight[0].value + ":" + oldTimeRight[1].value + ":" + oldTimeRight[2].value);
                if (durationSel > durationSelRight) {
                    obj.style.border = "1px solid red";
                }
            }
        },
        _triggerSliderChange: function () {
            this.player.trigger("sliderchange");
        }
    };


//----------------Public Functions----------------//

//-- Public Functions added to video-js

//Lock the Slider bar and it will not be possible to change the arrow positions
    videojs.Player.prototype.lockSlider = function () {
        return this.rangeslider.lock();
    };

//Unlock the Slider bar and it will be possible to change the arrow positions
    videojs.Player.prototype.unlockSlider = function () {
        return this.rangeslider.unlock();
    };

//Show the Slider Bar Component
    videojs.Player.prototype.showSlider = function () {
        return this.rangeslider.show();
    };

//Hide the Slider Bar Component
    videojs.Player.prototype.hideSlider = function () {
        return this.rangeslider.hide();
    };

//Show the Panel with the seconds of the selection
    videojs.Player.prototype.showSliderPanel = function () {
        return this.rangeslider.showPanel();
    };

//Hide the Panel with the seconds of the selection
    videojs.Player.prototype.hideSliderPanel = function () {
        return this.rangeslider.hidePanel();
    };


//Show the control Time to edit the position of the arrows
    videojs.Player.prototype.showControlTime = function () {
        return this.rangeslider.showcontrolTime();
    };

//Hide the control Time to edit the position of the arrows
    videojs.Player.prototype.hideControlTime = function () {
        return this.rangeslider.hidecontrolTime();
    };

//Set a Value in second for both arrows
    videojs.Player.prototype.setValueSlider = function (start, end) {
        return this.rangeslider.setValues(start, end);
    };

//The video will be played in a selected section
    videojs.Player.prototype.playBetween = function (start, end) {
        return this.rangeslider.playBetween(start, end);
    };

//The video will loop between to values
    videojs.Player.prototype.loopBetween = function (start, end) {
        return this.rangeslider.loop(start, end);
    };

//Set a Value in second for the arrows
    videojs.Player.prototype.getValueSlider = function () {
        return this.rangeslider.getValues();
    };



//----------------Create new Components----------------//

//--Charge the new Component into videojs
    videojs.SeekBar.prototype.options_.children.RSTimeBar = {}; //Range Slider Time Bar
    videojs.ControlBar.prototype.options_.children.ControlTimePanel = {}; //Panel with the time of the range slider



//-- Design the new components

    /**
     * Range Slider Time Bar
     * @param {videojs.Player|Object} player
     * @param {Object=} options
     * @constructor

})();

Video JS Range Slider Not Working

Answers (1)

Related Questions