/**
 * Moovie: an advanced HTML5 video player for MooTools.
 * @copyright 2010 Colin Aarts
 * @license MIT
 */
import { WebVTT } from 'vtt.js';

/**
 * Render active text track cues inside of a DOM element.
 * @class Renderer
 */
const Renderer = new Class({
    Implements: [Events, Options],

    options: {
        // Higher number means show cue faster
        processingDelay: 0.39
    },

    /**
     * Constructs a new text track renderer.
     * @param {Moovie} player The Moovie player instance.
     */
    initialize: function (player, options) {
        this.player = player;
        this.setOptions(options);
        this.processTracks = this.processTracks.bind(this);
        this.build().enable();
    },

    /**
     * Creates the element that will be inserted into the DOM.
     * @return {Renderer} The current instance for method chaining.
     */
    build: function () {
        this.element = new Element('div');
        this.element.setStyles({
            'bottom': 0,
            'left': 0,
            'pointer-events': 'none',
            'position': 'absolute',
            'right': 0,
            'top': 0
        });

        return this;
    },

    /**
     * Attach events, effectively allowing cues to update with video.
     * @return {Renderer} The current instance for method chaining.
     */
    attach: function () {
        this.player.addEvent('timeupdate', this.processTracks);

        return this;
    },

    /**
     * Detach events, preventing any cues from showing or updating with the video.
     * @return {Renderer} The current instance for method chaining.
     */
    detach: function () {
        this.player.removeEvent('timeupdate', this.processTracks);

        return this;
    },

    /**
     * Show cue display area and track video events.
     * @return {Renderer} The current instance for method chaining.
     */
    enable: function () {
        this.disabled = false;
        this.element.setStyle('display', 'block');
        this.attach();

        return this;
    },

    /**
     * Hide cue display area and no longer track video events.
     * @return {Renderer} The current instance for method chaining.
     */
    disable: function () {
        this.disabled = true;
        this.element.setStyle('display', 'none');
        this.detach();

        return this;
    },

    /**
     * Process text tracks to find active cues and either
     * display them or fire the appropriate events on the
     * `TextTrack` objects themselves.
     */
    processTracks: function () {
        const currentCues = [];
        const time = this.player.video.currentTime + this.options.processingDelay;
        const textTracks = this.player.textTracks;

        /* eslint-disable max-depth */

        // Plain loops are being used here to keeps things as fast as possible.
        for (let t = 0, l = textTracks.length; t < l; t++) {
            const cues = textTracks[t].cues;
            const activeCues = textTracks[t].activeCues;
            let i = 0;

            // cueexit
            i = activeCues.length;
            while (i--) {
                if (activeCues[i].startTime > time || activeCues[i].endTime < time) {
                    if (activeCues[i].pauseOnExit) {
                        this.player.pause();
                    }

                    activeCues.splice(i, 1);
                    currentCues.splice(i, 1);
                }
            }

            // cueenter
            i = cues.length;
            while (i--) {
                if (cues[i].startTime <= time && cues[i].endTime >= time) {
                    activeCues.include(cues[i]);
                    currentCues.include(cues[i]);
                }
            }
        }

        /* eslint-enable max-depth */

        // Finally, render cues into DOM
        WebVTT.processCues(window, currentCues, this.element);
    },

    /**
     * Convert the class to an element for use in DOM operations.
     * @return {Element} The element the cues will be injected into.
     */
    toElement: function () {
        return this.element;
    }
});

export default Renderer;

@@ -2664,285 +2664,129 @@
 ay;%0A
-        const textTracks = this.player.textTracks;%0A%0A        /* eslint-disable max-depth */%0A%0A        // Plain loops are being used here to keeps things as fast as possible.%0A        for (let t = 0, l = textTracks.length; t %3C l; t++) %7B%0A            const cues = textTracks%5Bt%5D.cues;
+%0A        /* eslint-disable max-depth */%0A%0A        for (const textTrack of this.player.textTracks) %7B%0A            // cueexit
 %0A   
@@ -2790,24 +2790,29 @@
             
+for (
 const active
@@ -2814,19 +2814,19 @@
 ctiveCue
-s =
+ of
  textTra
@@ -2831,12 +2831,8 @@
 rack
-s%5Bt%5D
 .act
@@ -2842,114 +2842,8 @@
 Cues
-;%0A            let i = 0;%0A%0A            // cueexit%0A            i = activeCues.length;%0A            while (i--
 ) %7B%0A
@@ -2871,20 +2871,16 @@
 ctiveCue
-s%5Bi%5D
 .startTi
@@ -2901,20 +2901,16 @@
 ctiveCue
-s%5Bi%5D
 .endTime
@@ -2953,20 +2953,16 @@
 ctiveCue
-s%5Bi%5D
 .pauseOn
@@ -3049,32 +3049,42 @@
                 
+textTrack.
 activeCues.splic
@@ -3074,35 +3074,39 @@
 .activeCues.
-splice(i, 1
+erase(activeCue
 );%0A         
@@ -3132,19 +3132,23 @@
 ues.
-splice(i, 1
+erase(activeCue
 );%0A 
@@ -3219,47 +3219,40 @@
     
-i = cues.length;%0A            while (i--
+for (const cue of textTrack.cues
 ) %7B%0A
@@ -3274,20 +3274,16 @@
  if (cue
-s%5Bi%5D
 .startTi
@@ -3299,20 +3299,16 @@
 e && cue
-s%5Bi%5D
 .endTime
@@ -3339,16 +3339,26 @@
         
+textTrack.
 activeCu
@@ -3363,36 +3363,32 @@
 Cues.include(cue
-s%5Bi%5D
 );%0A             
@@ -3421,12 +3421,8 @@
 (cue
-s%5Bi%5D
 );%0A 

Change to use `for..of` loops