rx-player 4.5.0-dev.2026012301 → 4.5.0-dev.2026012302

package/dist/es2017/main_thread/text_displayer/html/text_track_cues_store.js

@@ -0,0 +1,356 @@
+import assert from "../../../utils/assert";
+import { areNearlyEqual, getCuesAfter, getCuesBefore, removeCuesInfosBetween, areCuesStartNearlyEqual, } from "./utils";
+/**
+ * first or last IHTMLCue in a group can have a slighlty different start
+ * or end time than the start or end time of the ICuesGroup due to parsing
+ * approximation.
+ * DELTA_CUES_GROUP defines the tolerance level when comparing the start/end
+ * of a IHTMLCue to the start/end of a ICuesGroup.
+ * Having this value too high may lead to have unwanted subtitle displayed
+ * Having this value too low may lead to have subtitles not displayed
+ */
+const DELTA_CUES_GROUP = 1e-3;
+/**
+ * segment_duration / RELATIVE_DELTA_RATIO = relative_delta
+ *
+ * relative_delta is the tolerance to determine if two segements are the same
+ */
+const RELATIVE_DELTA_RATIO = 5;
+/**
+ * Manage a buffer of text track cues.
+ * Allows to add, remove and recuperate cues at given times.
+ * @class TextTrackCuesStore
+ */
+export default class TextTrackCuesStore {
+    constructor() {
+        this._cuesBuffer = [];
+    }
+    isEmpty() {
+        return this._cuesBuffer.length === 0;
+    }
+    /**
+     * Get corresponding cue(s) for the given time.
+     * A cue is an object with three properties:
+     *   - start {Number}: start time for which the cue should be displayed.
+     *   - end {Number}: end time for which the cue should be displayed.
+     *   - element {HTMLElement}: The cue to diplay
+     *
+     * We do not mutate individual cue here.
+     * That is, if the ``get`` method returns the same cue's reference than a
+     * previous ``get`` call, its properties are guaranteed to have the exact same
+     * values than before, if you did not mutate it on your side.
+     * The inverse is true, if the values are the same than before, the reference
+     * will stay the same (this is useful to easily check if the DOM should be
+     * updated, for example).
+     *
+     * @param {Number} time
+     * @returns {Array.<HTMLElement>} - The cues that need to be displayed at that
+     * time.
+     */
+    get(time) {
+        const cuesBuffer = this._cuesBuffer;
+        const ret = [];
+        // begins at the end as most of the time the player will ask for the last
+        // CuesGroup
+        for (let cueIdx = cuesBuffer.length - 1; cueIdx >= 0; cueIdx--) {
+            const segment = cuesBuffer[cueIdx];
+            if (time < segment.end && time >= segment.start) {
+                const cues = segment.cues;
+                for (const cue of cues) {
+                    if (time >= cue.start && time < cue.end) {
+                        ret.push(cue.element);
+                    }
+                }
+                // first or last IHTMLCue in a group can have a slighlty different start
+                // or end time than the start or end time of the ICuesGroup due to parsing
+                // approximation.
+                // Add a tolerance of 1ms to fix this issue
+                if (ret.length === 0 && cues.length > 0) {
+                    for (const cue of cues) {
+                        if (areNearlyEqual(time, cue.start, DELTA_CUES_GROUP) ||
+                            areNearlyEqual(time, cue.end, DELTA_CUES_GROUP)) {
+                            ret.push(cue.element);
+                        }
+                    }
+                }
+                return ret;
+            }
+        }
+        return [];
+    }
+    /**
+     * Remove cue from a certain range of time.
+     * @param {Number} from
+     * @param {Number} _to
+     */
+    remove(from, _to) {
+        assert(from >= 0);
+        assert(_to >= 0);
+        assert(_to > from);
+        const to = Math.max(from, _to);
+        const cuesBuffer = this._cuesBuffer;
+        for (let cueIdx = 0; cueIdx < cuesBuffer.length; cueIdx++) {
+            if (cuesBuffer[cueIdx].end > from) {
+                // this cuesInfos is concerned by the remove
+                const startCuesInfos = cuesBuffer[cueIdx];
+                if (startCuesInfos.start >= to) {
+                    // our cuesInfos is strictly after this interval, we have nothing to do
+                    return;
+                }
+                if (startCuesInfos.end >= to) {
+                    // our cuesInfos ends after `to`, we have to keep the end of it
+                    if (from <= startCuesInfos.start) {
+                        // from -> to only remove the start of startCuesInfos
+                        startCuesInfos.cues = getCuesAfter(startCuesInfos.cues, to);
+                        startCuesInfos.start = to;
+                    }
+                    else {
+                        // from -> to is in the middle part of startCuesInfos
+                        const [cuesInfos1, cuesInfos2] = removeCuesInfosBetween(startCuesInfos, from, to);
+                        this._cuesBuffer[cueIdx] = cuesInfos1;
+                        cuesBuffer.splice(cueIdx + 1, 0, cuesInfos2);
+                    }
+                    // No cuesInfos can be concerned after this one, we can quit
+                    return;
+                }
+                // Else remove all part after `from`
+                if (startCuesInfos.start >= from) {
+                    // all the segment is concerned
+                    cuesBuffer.splice(cueIdx, 1);
+                    cueIdx--; // one less element, we have to decrement the loop
+                }
+                else {
+                    // only the end is concerned
+                    startCuesInfos.cues = getCuesBefore(startCuesInfos.cues, from);
+                    startCuesInfos.end = Math.max(from, startCuesInfos.start);
+                }
+            }
+        }
+    }
+    /**
+     * Insert new cues in our text buffer.
+     * cues is an array of objects with three properties:
+     *   - start {Number}: start time for which the cue should be displayed.
+     *   - end {Number}: end time for which the cue should be displayed.
+     *   - element {HTMLElement}: The cue to diplay
+     *
+     * @param {Array.<Object>} cues - CuesGroups, array of objects with the
+     * following properties:
+     *   - start {Number}: the time at which the cue will start to be displayed
+     *   - end {Number}: the time at which the cue will end to be displayed
+     *   - cue {HTMLElement}: The cue
+     * @param {Number} start - Start time at which the CuesGroup applies.
+     * This is different than the start of the first cue to display in it, this
+     * has more to do with the time at which the _text segment_ starts.
+     * @param {Number} end - End time at which the CuesGroup applies.
+     * This is different than the end of the last cue to display in it, this
+     * has more to do with the time at which the _text segment_ ends.
+     *
+     * TODO add securities to ensure that:
+     *   - the start of a CuesGroup is inferior or equal to the start of the first
+     *     cue in it
+     *   - the end of a CuesGroup is superior or equal to the end of the last
+     *     cue in it
+     * If those requirements are not met, we could delete some cues when adding
+     * a CuesGroup before/after. Find a solution.
+     */
+    insert(cues, start, end) {
+        const cuesBuffer = this._cuesBuffer;
+        const cuesInfosToInsert = { start, end, cues };
+        // it's preferable to have a delta depending on the duration of the segment
+        // if the delta is one fifth of the length of the segment:
+        // a segment of [0, 2] is the "same" segment as [0, 2.1]
+        // but [0, 0.04] is not the "same" segement as [0,04, 0.08]
+        const relativeDelta = Math.abs(start - end) / RELATIVE_DELTA_RATIO;
+        /**
+         * Called when we found the index of the next cue relative to the cue we
+         * want to insert (that is a cue starting after its start or at the same
+         * time but ending strictly after its end).
+         * Will insert the cue at the right place and update the next cue
+         * accordingly.
+         * @param {number} indexOfNextCue
+         */
+        function onIndexOfNextCueFound(indexOfNextCue) {
+            const nextCue = cuesBuffer[indexOfNextCue];
+            if (nextCue === undefined || // no cue
+                areNearlyEqual(cuesInfosToInsert.end, nextCue.end, relativeDelta)) {
+                // samey end
+                //   ours:            |AAAAA|
+                //   the current one: |BBBBB|
+                //   Result:          |AAAAA|
+                cuesBuffer[indexOfNextCue] = cuesInfosToInsert;
+            }
+            else if (nextCue.start >= cuesInfosToInsert.end) {
+                // Either
+                //   ours:            |AAAAA|
+                //   the current one:         |BBBBBB|
+                //   Result:          |AAAAA| |BBBBBB|
+                // Or:
+                //   ours:            |AAAAA|
+                //   the current one:       |BBBBBB|
+                //   Result:          |AAAAA|BBBBBB|
+                // Add ours before
+                cuesBuffer.splice(indexOfNextCue, 0, cuesInfosToInsert);
+            }
+            else {
+                // Either
+                //   ours:            |AAAAA|
+                //   the current one: |BBBBBBBB|
+                //   Result:          |AAAAABBB|
+                // Or:
+                //   ours:            |AAAAA|
+                //   the current one:    |BBBBB|
+                //   Result:          |AAAAABBB|
+                nextCue.cues = getCuesAfter(nextCue.cues, cuesInfosToInsert.end);
+                nextCue.start = cuesInfosToInsert.end;
+                cuesBuffer.splice(indexOfNextCue, 0, cuesInfosToInsert);
+            }
+        }
+        for (let cueIdx = 0; cueIdx < cuesBuffer.length; cueIdx++) {
+            let cuesInfos = cuesBuffer[cueIdx];
+            if (start < cuesInfos.end) {
+                if (areCuesStartNearlyEqual(cuesInfosToInsert, cuesInfos)) {
+                    if (areNearlyEqual(end, cuesInfos.end, relativeDelta)) {
+                        // exact same segment
+                        //   ours:            |AAAAA|
+                        //   the current one: |BBBBB|
+                        //   Result:          |AAAAA|
+                        // Which means:
+                        //   1. replace the current cue with ours
+                        cuesBuffer[cueIdx] = cuesInfosToInsert;
+                        return;
+                    }
+                    else if (end < cuesInfos.end) {
+                        // our cue overlaps with the current one:
+                        //   ours:            |AAAAA|
+                        //   the current one: |BBBBBBBB|
+                        //   Result:          |AAAAABBB|
+                        // Which means:
+                        //   1. remove some cues at the start of the current one
+                        //   2. update start of current one
+                        //   3. add ours before the current one
+                        cuesInfos.cues = getCuesAfter(cuesInfos.cues, end);
+                        cuesInfos.start = end;
+                        cuesBuffer.splice(cueIdx, 0, cuesInfosToInsert);
+                        return;
+                    }
+                    // our cue goes beyond the current one:
+                    //   ours:            |AAAAAAA|
+                    //   the current one: |BBBB|...
+                    //   Result:          |AAAAAAA|
+                    // Here we have to delete any cuesInfos which end before ours end,
+                    // and see about the following one.
+                    do {
+                        cuesBuffer.splice(cueIdx, 1);
+                        cuesInfos = cuesBuffer[cueIdx];
+                    } while (cuesInfos !== undefined && end > cuesInfos.end);
+                    onIndexOfNextCueFound(cueIdx);
+                    return;
+                }
+                else if (start < cuesInfos.start) {
+                    if (end < cuesInfos.start) {
+                        // our cue goes strictly before the current one:
+                        //   ours:            |AAAAAAA|
+                        //   the current one:           |BBBB|
+                        //   Result:          |AAAAAAA| |BBBB|
+                        // Which means:
+                        //   - add ours before the current one
+                        cuesBuffer.splice(cueIdx, 0, cuesInfosToInsert);
+                        return;
+                    }
+                    else if (areNearlyEqual(end, cuesInfos.start, relativeDelta)) {
+                        // our cue goes just before the current one:
+                        //   ours:            |AAAAAAA|
+                        //   the current one:         |BBBB|
+                        //   Result:          |AAAAAAA|BBBB|
+                        // Which means:
+                        //   - update start time of the current one to be sure
+                        //   - add ours before the current one
+                        cuesInfos.start = end;
+                        cuesBuffer.splice(cueIdx, 0, cuesInfosToInsert);
+                        return;
+                    }
+                    else if (areNearlyEqual(end, cuesInfos.end, relativeDelta)) {
+                        //   ours:            |AAAAAAA|
+                        //   the current one:    |BBBB|
+                        //   Result:          |AAAAAAA|
+                        // Replace
+                        cuesBuffer.splice(cueIdx, 1, cuesInfosToInsert);
+                        return;
+                    }
+                    else if (end < cuesInfos.end) {
+                        //   ours:            |AAAAAAA|
+                        //   the current one:     |BBBBB|
+                        //   Result:          |AAAAAAABB|
+                        cuesInfos.cues = getCuesAfter(cuesInfos.cues, end);
+                        cuesInfos.start = end;
+                        cuesBuffer.splice(cueIdx, 0, cuesInfosToInsert);
+                        return;
+                    }
+                    //   ours:            |AAAAAAA|
+                    //   the current one:   |BBB|...
+                    //   Result:          |AAAAAAA|...
+                    do {
+                        cuesBuffer.splice(cueIdx, 1);
+                        cuesInfos = cuesBuffer[cueIdx];
+                    } while (cuesInfos !== undefined && end > cuesInfos.end);
+                    onIndexOfNextCueFound(cueIdx);
+                    return;
+                }
+                // else -> start > cuesInfos.start
+                if (areNearlyEqual(cuesInfos.end, end, relativeDelta)) {
+                    //   ours:              |AAAAAA|
+                    //   the current one: |BBBBBBBB|
+                    //   Result:          |BBAAAAAA|
+                    cuesInfos.cues = getCuesBefore(cuesInfos.cues, start);
+                    cuesInfos.end = start;
+                    cuesBuffer.splice(cueIdx + 1, 0, cuesInfosToInsert);
+                    return;
+                }
+                else if (cuesInfos.end > end) {
+                    //   ours:              |AAAAAA|
+                    //   the current one: |BBBBBBBBBBB|
+                    //   Result:          |BBAAAAAABBB|
+                    const [cuesInfos1, cuesInfos2] = removeCuesInfosBetween(cuesInfos, start, end);
+                    this._cuesBuffer[cueIdx] = cuesInfos1;
+                    cuesBuffer.splice(cueIdx + 1, 0, cuesInfosToInsert);
+                    cuesBuffer.splice(cueIdx + 2, 0, cuesInfos2);
+                    return;
+                }
+                else {
+                    //   ours:              |AAAAAA|
+                    //   the current one: |BBBBB|...
+                    //   Result:          |BBAAAAAA|...
+                    cuesInfos.cues = getCuesBefore(cuesInfos.cues, start);
+                    cuesInfos.end = start;
+                    const nextCueIdx = cueIdx + 1;
+                    cuesInfos = cuesBuffer[nextCueIdx];
+                    while (cuesInfos !== undefined && end > cuesInfos.end) {
+                        cuesBuffer.splice(nextCueIdx, 1);
+                        cuesInfos = cuesBuffer[nextCueIdx];
+                    }
+                    onIndexOfNextCueFound(nextCueIdx);
+                    return;
+                }
+            }
+        }
+        if (cuesBuffer.length > 0) {
+            const lastCue = cuesBuffer[cuesBuffer.length - 1];
+            if (areNearlyEqual(lastCue.end, start, relativeDelta)) {
+                // Match the end of the previous cue to the start of the following one
+                // if they are close enough. If there is a small gap between two segments
+                // it can lead to having no subtitles for a short time, this is noticeable when
+                // two successive segments displays the same text, making it diseappear
+                // and reappear quickly, which gives the impression of blinking
+                //
+                //   ours:                   |AAAAA|
+                //   the current one: |BBBBB|...
+                //   Result:          |BBBBBBBAAAAA|
+                lastCue.end = start;
+            }
+        }
+        // no cues group has the end after our current start.
+        // These cues should be the last one
+        cuesBuffer.push(cuesInfosToInsert);
+    }
+}

package/dist/es2017/main_thread/text_displayer/html/update_proportional_elements.d.ts

@@ -0,0 +1,16 @@
+/**
+ * Update size of element which are proportional to the current text track
+ * element.
+ * Returns `true` if at least a single styling information is proportional,
+ * `false` otherwise.
+ * @param {number} currentHeight
+ * @param {number} currentWidth
+ * @param {Object} resolution
+ * @param {HTMLElement} textTrackElement
+ * @returns {boolean}
+ */
+export default function updateProportionalElements(currentHeight: number, currentWidth: number, resolution: {
+    columns: number;
+    rows: number;
+}, textTrackElement: HTMLElement): boolean;
+//# sourceMappingURL=update_proportional_elements.d.ts.map

package/dist/es2017/main_thread/text_displayer/html/update_proportional_elements.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"update_proportional_elements.d.ts","sourceRoot":"","sources":["../../../../../src/main_thread/text_displayer/html/update_proportional_elements.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AACH,MAAM,CAAC,OAAO,UAAU,0BAA0B,CAChD,aAAa,EAAE,MAAM,EACrB,YAAY,EAAE,MAAM,EACpB,UAAU,EAAE;IAAE,OAAO,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,MAAM,CAAA;CAAE,EAC7C,gBAAgB,EAAE,WAAW,GAC5B,OAAO,CA2DT"}

package/dist/es2017/main_thread/text_displayer/html/update_proportional_elements.js

@@ -0,0 +1,61 @@
+/**
+ * Update size of element which are proportional to the current text track
+ * element.
+ * Returns `true` if at least a single styling information is proportional,
+ * `false` otherwise.
+ * @param {number} currentHeight
+ * @param {number} currentWidth
+ * @param {Object} resolution
+ * @param {HTMLElement} textTrackElement
+ * @returns {boolean}
+ */
+export default function updateProportionalElements(currentHeight, currentWidth, resolution, textTrackElement) {
+    const cellUnit = [currentWidth / resolution.columns, currentHeight / resolution.rows];
+    const proportElts = textTrackElement.getElementsByClassName("proportional-style");
+    for (let eltIdx = 0; eltIdx < proportElts.length; eltIdx++) {
+        const elt = proportElts[eltIdx];
+        if (elt instanceof HTMLElement) {
+            const fontSizeVal = elt.getAttribute("data-proportional-font-size");
+            if (fontSizeVal !== null && !isNaN(+fontSizeVal)) {
+                elt.style.fontSize = String(+fontSizeVal * cellUnit[1]) + "px";
+            }
+            const widthVal = elt.getAttribute("data-proportional-width");
+            if (widthVal !== null && !isNaN(+widthVal)) {
+                elt.style.width = String(+widthVal * cellUnit[0]) + "px";
+            }
+            const heightVal = elt.getAttribute("data-proportional-height");
+            if (heightVal !== null && !isNaN(+heightVal)) {
+                elt.style.height = String(+heightVal * cellUnit[1]) + "px";
+            }
+            const lineHeightVal = elt.getAttribute("data-proportional-line-height");
+            if (lineHeightVal !== null && !isNaN(+lineHeightVal)) {
+                elt.style.lineHeight = String(+lineHeightVal * cellUnit[1]) + "px";
+            }
+            const leftVal = elt.getAttribute("data-proportional-left");
+            if (leftVal !== null && !isNaN(+leftVal)) {
+                elt.style.left = String(+leftVal * cellUnit[0]) + "px";
+            }
+            const topVal = elt.getAttribute("data-proportional-top");
+            if (topVal !== null && !isNaN(+topVal)) {
+                elt.style.top = String(+topVal * cellUnit[1]) + "px";
+            }
+            const paddingTopVal = elt.getAttribute("data-proportional-padding-top");
+            if (paddingTopVal !== null && !isNaN(+paddingTopVal)) {
+                elt.style.paddingTop = String(+paddingTopVal * cellUnit[1]) + "px";
+            }
+            const paddingBottomVal = elt.getAttribute("data-proportional-padding-bottom");
+            if (paddingBottomVal !== null && !isNaN(+paddingBottomVal)) {
+                elt.style.paddingBottom = String(+paddingBottomVal * cellUnit[1]) + "px";
+            }
+            const paddingLeftVal = elt.getAttribute("data-proportional-padding-left");
+            if (paddingLeftVal !== null && !isNaN(+paddingLeftVal)) {
+                elt.style.paddingLeft = String(+paddingLeftVal * cellUnit[0]) + "px";
+            }
+            const paddingRightVal = elt.getAttribute("data-proportional-padding-right");
+            if (paddingRightVal !== null && !isNaN(+paddingRightVal)) {
+                elt.style.paddingRight = String(+paddingRightVal * cellUnit[0]) + "px";
+            }
+        }
+    }
+    return proportElts.length > 0;
+}

package/dist/es2017/main_thread/text_displayer/html/utils.d.ts

@@ -0,0 +1,55 @@
+export interface IHTMLCue {
+    start: number;
+    end: number;
+    element: HTMLElement;
+}
+export interface ICuesGroup {
+    start: number;
+    end: number;
+    cues: IHTMLCue[];
+}
+/**
+ * @see MAX_DELTA_BUFFER_TIME
+ * @param {Number} a
+ * @param {Number} b
+ * @param {Number} delta
+ * @returns {Boolean}
+ */
+export declare function areNearlyEqual(a: number, b: number, delta?: number): boolean;
+/**
+ * Check if two cues start are almost the same.
+ * It should depend on there relative length:
+ *
+ * [0, 2] and [2, 4] start are NOT equals
+ * [0, 2] and [0, 4]  start are equals
+ * [0, 0.1] and [0.101, 2] start are NOT equals
+ * [0, 2] and [0.01, 4]  start are equals
+ * [0, 100] and [1, 200]  start are NOT equals
+ * @see MAX_DELTA_BUFFER_TIME
+ * @param {Number} firstCue the existing cue
+ * @param {Number} secondCue the cue that we test if it follow firstCue
+ * @returns {Boolean}
+ */
+export declare function areCuesStartNearlyEqual(firstCue: ICuesGroup, secondCue: ICuesGroup): boolean;
+/**
+ * Get all cues which have data before the given time.
+ * @param {Object} cues
+ * @param {Number} time
+ * @returns {Array.<Object>}
+ */
+export declare function getCuesBefore(cues: IHTMLCue[], time: number): IHTMLCue[];
+/**
+ * Get all cues which have data after the given time.
+ * @param {Object} cues
+ * @param {Number} time
+ * @returns {Array.<Object>}
+ */
+export declare function getCuesAfter(cues: IHTMLCue[], time: number): IHTMLCue[];
+/**
+ * @param {Object} cuesInfos
+ * @param {Number} start
+ * @param {Number} end
+ * @returns {Array.<Object>}
+ */
+export declare function removeCuesInfosBetween(cuesInfos: ICuesGroup, start: number, end: number): [ICuesGroup, ICuesGroup];
+//# sourceMappingURL=utils.d.ts.map

package/dist/es2017/main_thread/text_displayer/html/utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../../../src/main_thread/text_displayer/html/utils.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,QAAQ;IACvB,KAAK,EAAE,MAAM,CAAC;IACd,GAAG,EAAE,MAAM,CAAC;IACZ,OAAO,EAAE,WAAW,CAAC;CACtB;AAED,MAAM,WAAW,UAAU;IACzB,KAAK,EAAE,MAAM,CAAC;IACd,GAAG,EAAE,MAAM,CAAC;IACZ,IAAI,EAAE,QAAQ,EAAE,CAAC;CAClB;AAmDD;;;;;;GAMG;AACH,wBAAgB,cAAc,CAC5B,CAAC,EAAE,MAAM,EACT,CAAC,EAAE,MAAM,EACT,KAAK,GAAE,MAA8B,GACpC,OAAO,CAET;AAGD;;;;;;;;;;;;;GAaG;AACH,wBAAgB,uBAAuB,CACrC,QAAQ,EAAE,UAAU,EACpB,SAAS,EAAE,UAAU,GACpB,OAAO,CAUT;AAED;;;;;GAKG;AACH,wBAAgB,aAAa,CAAC,IAAI,EAAE,QAAQ,EAAE,EAAE,IAAI,EAAE,MAAM,GAAG,QAAQ,EAAE,CAQxE;AAED;;;;;GAKG;AACH,wBAAgB,YAAY,CAAC,IAAI,EAAE,QAAQ,EAAE,EAAE,IAAI,EAAE,MAAM,GAAG,QAAQ,EAAE,CAQvE;AAED;;;;;GAKG;AACH,wBAAgB,sBAAsB,CACpC,SAAS,EAAE,UAAU,EACrB,KAAK,EAAE,MAAM,EACb,GAAG,EAAE,MAAM,GACV,CAAC,UAAU,EAAE,UAAU,CAAC,CAiB1B"}

package/dist/es2017/main_thread/text_displayer/html/utils.js

@@ -0,0 +1,133 @@
+/**
+ * Maximum time difference, in seconds, between two text segment's start times
+ * and/or end times for them to be considered the same.
+ *
+ * For example for two segments s1 and s2 which have a start time respectively
+ * of st1 and st2 and end time of et1 and et2:
+ *   - if both the absolute difference between st1 and st2 AND the one between
+ *     et1 and et2 is inferior or equal to the MAX_DELTA_BUFFER_TIME, s1 and s2
+ *     are considered to target the exact same time. As a consequence, if s2 is
+ *     added after s1 in the buffer, s1 will be completely replaced by it and
+ *     vice-versa.
+ *   - if only one of the two (absolute difference between st1 and st2 OR et1
+ *     and et2) is inferior to the MAX_DELTA_BUFFER_TIME then the last added
+ *     is not completely considered the same. It WILL still replace - either
+ *     partially or completely (depending on the sign of the other difference) -
+ *     the previously added segment.
+ *   - if both differences are strictly superior to the MAX_DELTA_BUFFER_TIME,
+ *     then they are not considered to have the same start nor the same end.
+ *     They can still overlap however, and MIGHT thus still replace partially
+ *     or completely each other.
+ *
+ * Setting a value too low might lead to two segments targeting the same time,
+ * both being present in the buffer. In worst case scenarios, this could lead
+ * to indicate that an unwanted text track is still here (theorically though,
+ * this is a case that should never happen for reasons that might be too long
+ * to explain here).
+ *
+ * Setting a value too high might lead to two segments targeting different times
+ * to be wrongly believed to target the same time. In worst case scenarios, this
+ * could lead to wanted text tracks being removed.
+ *
+ * When comparing 2 segments s1 and s2, you may want to take into account the duration
+ * of the segments:
+ *   - if s1 is [0, 2] and s2 is [0, 2.1] s1 and s2 can be considered as nearly equal as
+ *     there is a relative difference of: (2.1-2) / 2 = 5%;
+ *     Formula: (end_s1 - end_s2) / duration_s2 = relative_difference
+ *   - if s1 is [0, 0.04] and s2 is [0.04, 0.08] s1 and s2 may not considered as nearly
+ *     equal as there is a relative difference of: (0.04-0.08) / 0.04 = 100%
+ *
+ * To compare relatively to the duration of a segment you can provide and additional
+ * parameter "delta" that remplace MAX_DELTA_BUFFER_TIME.
+ * If parameter "delta" is higher than MAX_DELTA_BUFFER_TIME, MAX_DELTA_BUFFER_TIME
+ * is used instead of delta. This ensure that segments are nearly equal when comparing
+ * relatively AND absolutely.
+ *
+ * @type Number
+ */
+const MAX_DELTA_BUFFER_TIME = 0.2;
+/**
+ * @see MAX_DELTA_BUFFER_TIME
+ * @param {Number} a
+ * @param {Number} b
+ * @param {Number} delta
+ * @returns {Boolean}
+ */
+export function areNearlyEqual(a, b, delta = MAX_DELTA_BUFFER_TIME) {
+    return Math.abs(a - b) <= Math.min(delta, MAX_DELTA_BUFFER_TIME);
+}
+const EPSILON = 5e-2; // 5%
+/**
+ * Check if two cues start are almost the same.
+ * It should depend on there relative length:
+ *
+ * [0, 2] and [2, 4] start are NOT equals
+ * [0, 2] and [0, 4]  start are equals
+ * [0, 0.1] and [0.101, 2] start are NOT equals
+ * [0, 2] and [0.01, 4]  start are equals
+ * [0, 100] and [1, 200]  start are NOT equals
+ * @see MAX_DELTA_BUFFER_TIME
+ * @param {Number} firstCue the existing cue
+ * @param {Number} secondCue the cue that we test if it follow firstCue
+ * @returns {Boolean}
+ */
+export function areCuesStartNearlyEqual(firstCue, secondCue) {
+    const firstCueDuration = firstCue.end - firstCue.start;
+    const secondCueDuration = secondCue.end - secondCue.start;
+    const diffBetweenStart = Math.abs(firstCue.start - secondCue.start);
+    const minDuration = Math.min(firstCueDuration, secondCueDuration, MAX_DELTA_BUFFER_TIME);
+    return diffBetweenStart / minDuration <= EPSILON; // ratio diff/ minduration is bellow 5%
+}
+/**
+ * Get all cues which have data before the given time.
+ * @param {Object} cues
+ * @param {Number} time
+ * @returns {Array.<Object>}
+ */
+export function getCuesBefore(cues, time) {
+    for (let i = cues.length - 1; i >= 0; i--) {
+        const cue = cues[i];
+        if (cue.start < time) {
+            return cues.slice(0, i + 1);
+        }
+    }
+    return [];
+}
+/**
+ * Get all cues which have data after the given time.
+ * @param {Object} cues
+ * @param {Number} time
+ * @returns {Array.<Object>}
+ */
+export function getCuesAfter(cues, time) {
+    for (let i = 0; i < cues.length; i++) {
+        const cue = cues[i];
+        if (cue.end > time) {
+            return cues.slice(i, cues.length);
+        }
+    }
+    return [];
+}
+/**
+ * @param {Object} cuesInfos
+ * @param {Number} start
+ * @param {Number} end
+ * @returns {Array.<Object>}
+ */
+export function removeCuesInfosBetween(cuesInfos, start, end) {
+    const endCuesInfos1 = Math.max(cuesInfos.start, start);
+    const cues1 = getCuesBefore(cuesInfos.cues, start);
+    const cuesInfos1 = {
+        start: cuesInfos.start,
+        end: endCuesInfos1,
+        cues: cues1,
+    };
+    const startCuesInfos2 = Math.min(end, cuesInfos.end);
+    const cues2 = getCuesAfter(cuesInfos.cues, end);
+    const cuesInfos2 = {
+        start: startCuesInfos2,
+        end: cuesInfos.end,
+        cues: cues2,
+    };
+    return [cuesInfos1, cuesInfos2];
+}

package/dist/es2017/main_thread/text_displayer/index.d.ts

@@ -0,0 +1,3 @@
+import type { ITextDisplayer, ITextDisplayerData } from "./types";
+export type { ITextDisplayer, ITextDisplayerData };
+//# sourceMappingURL=index.d.ts.map

package/dist/es2017/main_thread/text_displayer/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/main_thread/text_displayer/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAC;AAElE,YAAY,EAAE,cAAc,EAAE,kBAAkB,EAAE,CAAC"}

package/dist/es2017/main_thread/text_displayer/index.js

@@ -0,0 +1 @@
+export {};

package/dist/es2017/main_thread/text_displayer/manual_time_ranges.d.ts

@@ -0,0 +1,15 @@
+/**
+ * Simulate TimeRanges as returned by SourceBuffer.prototype.buffered.
+ * Add an "insert" and "remove" methods to manually update it.
+ * @class ManualTimeRanges
+ */
+export default class ManualTimeRanges implements TimeRanges {
+    length: number;
+    private _ranges;
+    constructor();
+    insert(start: number, end: number): void;
+    remove(start: number, end: number): void;
+    start(index: number): number;
+    end(index: number): number;
+}
+//# sourceMappingURL=manual_time_ranges.d.ts.map

package/dist/es2017/main_thread/text_displayer/manual_time_ranges.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"manual_time_ranges.d.ts","sourceRoot":"","sources":["../../../../src/main_thread/text_displayer/manual_time_ranges.ts"],"names":[],"mappings":"AAGA;;;;GAIG;AACH,MAAM,CAAC,OAAO,OAAO,gBAAiB,YAAW,UAAU;IAClD,MAAM,EAAE,MAAM,CAAC;IAEtB,OAAO,CAAC,OAAO,CAGZ;;IAOH,MAAM,CAAC,KAAK,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,GAAG,IAAI;IAOxC,MAAM,CAAC,KAAK,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,GAAG,IAAI;IAcxC,KAAK,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM;IAO5B,GAAG,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM;CAM3B"}