@24i/bigscreen-sdk 1.0.40-alpha.2687 → 1.0.40

package/packages/epg/src/v2/DataManager.ts

@@ -1,372 +1,372 @@
-import { filter, find, findIndex, map } from '@24i/bigscreen-sdk/perf-utils/array';
-import { Asset } from '@24i/smartapps-datalayer/models';
-import { i18n } from '@24i/bigscreen-sdk/i18n';
-import { MINUTE_IN_MS } from '@24i/bigscreen-sdk/utils/timeConstants';
-import { isStartVisible, isEndVisible, isOverFullWidth } from './utils';
-import {
-    DataRange,
-    DataManager as IDataManager,
-    DataUpdateCallback,
-    ProgramsFetcher,
-    Epg,
-} from './interface';
-
-const START = 0;
-const END = 1;
-
-const TIMELINE_WIDTHS_TO_FETCH = 3;
-const MINIMUM_BREAK_LENGTH = MINUTE_IN_MS;
-
-export class DataManager implements IDataManager {
-    private readonly data: Asset[] = [];
-
-    private dataRanges: DataRange[] = [];
-
-    private readonly inProgressDataRanges: DataRange[] = [];
-
-    private onDataUpdated: DataUpdateCallback | null = null;
-
-    constructor(
-        private readonly channel: Asset,
-        private readonly timelineWidthMs: number,
-        private readonly fetchPrograms: ProgramsFetcher,
-        private readonly epg: Epg<any, any, any, any>,
-    ) {
-        if (this.data.length) {
-            this.addDataRange(this.getRangeFromData(this.data));
-        }
-    }
-
-    getChannel() {
-        return this.channel;
-    }
-
-    getData() {
-        return this.data;
-    }
-
-    getDataFromRange(range: DataRange) {
-        return filter(this.data, ({ program }) => {
-            const { startTime, endTime } = program!;
-            return (
-                isStartVisible(startTime, range)
-                || isEndVisible(endTime, range)
-                || isOverFullWidth(startTime, endTime, range)
-            );
-        });
-    }
-
-    getNextProgramStart(timestamp: number) {
-        const startIndex = this.getDataIndexAtTimestamp(timestamp);
-        if (startIndex === -1) return null;
-        const nextData = this.data[startIndex + 1];
-        if (!nextData) return null;
-        return nextData.program!.startTime;
-    }
-
-    getPreviousProgramEnd(fromTimestamp: number, scrollStepMs: number) {
-        const startIndex = this.getDataIndexAtTimestamp(fromTimestamp);
-        if (startIndex <= 0) return null;
-        const { startTime, endTime } = this.data[startIndex - 1].program!;
-        return Math.max(endTime - scrollStepMs, startTime);
-    }
-
-    setOnDataUpdated(callback: DataUpdateCallback) {
-        this.onDataUpdated = callback;
-    }
-
-    private getDataIndexAtTimestamp(timestamp: number) {
-        return findIndex(this.data, ({ program }) => {
-            const { startTime, endTime } = program!;
-            return timestamp >= startTime && timestamp < endTime;
-        });
-    }
-
-    private getRangeFromData(data: Asset[]) {
-        return [data[0].program!.startTime, data[data.length - 1].program!.endTime] as DataRange;
-    }
-
-    private isInterceptingDataRanges = (firstDataRange: DataRange, secondDataRange: DataRange) => (
-        (firstDataRange[START] < secondDataRange[END]
-            && firstDataRange[START] > secondDataRange[START])
-        || (secondDataRange[START] < firstDataRange[END]
-            && secondDataRange[START] > firstDataRange[START])
-    );
-
-    private findRangeBeforeAndAfter = (currentRange: DataRange) => {
-        const rangeAfterIndex = findIndex(
-            this.dataRanges,
-            (dataRange) => dataRange[END] >= currentRange[END],
-        );
-        if (rangeAfterIndex === -1) {
-            return {
-                rangeAfter: undefined,
-                rangeBefore: this.dataRanges[this.dataRanges.length - 1],
-            };
-        }
-        const rangeAfter = this.dataRanges[rangeAfterIndex];
-        const rangeBefore = this.dataRanges[rangeAfterIndex - 1];
-        return { rangeAfter, rangeBefore };
-    };
-
-    private generateDataRangesForward = (start: number, end: number, cellSize: number) => {
-        const dataRanges: DataRange[] = [[start, start + cellSize]];
-        let currentStart = start + cellSize;
-        let currentEnd = currentStart + cellSize;
-        while (currentStart < end) {
-            if (currentEnd >= end) {
-                dataRanges.push([currentStart, end]);
-                break;
-            }
-            dataRanges.push([currentStart, currentEnd]);
-            currentStart += cellSize;
-            currentEnd += cellSize;
-        }
-        return dataRanges;
-    };
-
-    private generateDataRangesBackward = (start: number, end: number, cellSize: number) => {
-        const dataRanges: DataRange[] = [[start - cellSize, start]];
-        let currentEnd = start - cellSize;
-        let currentStart = currentEnd - cellSize;
-        while (currentEnd > start) {
-            if (currentStart <= start) {
-                dataRanges.push([start, currentEnd]);
-                break;
-            }
-            dataRanges.push([currentStart, currentEnd]);
-            currentStart -= cellSize;
-            currentEnd -= cellSize;
-        }
-        return dataRanges;
-    };
-
-    /* eslint-disable complexity */
-    // eslint-disable-next-line sonarjs/cognitive-complexity
-    private getRangesMissingFromDataInRange([start, end]: DataRange) {
-        const currentRange = [start, end] as DataRange;
-        const cellSize = TIMELINE_WIDTHS_TO_FETCH * this.timelineWidthMs;
-        if (this.dataRanges.length === 0) return [currentRange] as DataRange[];
-        const { rangeBefore, rangeAfter } = this.findRangeBeforeAndAfter(currentRange);
-        if (rangeAfter == null) {
-            const lastDataRange = this.dataRanges[this.dataRanges.length - 1];
-            if (this.isInterceptingDataRanges(lastDataRange, currentRange)) {
-                if (end > lastDataRange[END]) {
-                    return this.generateDataRangesForward(lastDataRange[END], end, cellSize);
-                }
-                if (start < lastDataRange[START]) {
-                    return this.generateDataRangesBackward(start, lastDataRange[START], cellSize);
-                }
-            }
-            return [currentRange] as DataRange[];
-        }
-        if (rangeBefore == null) {
-            const firstDataRange = this.dataRanges[0];
-            if (this.isInterceptingDataRanges(firstDataRange, currentRange)) {
-                if (end > firstDataRange[END]) {
-                    return this.generateDataRangesForward(firstDataRange[END], end, cellSize);
-                }
-                if (start < firstDataRange[START]) {
-                    return this.generateDataRangesBackward(firstDataRange[START], start, cellSize);
-                }
-            }
-            return [currentRange] as DataRange[];
-        }
-        const rangeAfterFrom = rangeAfter[START];
-        const rangeBeforeTo = rangeBefore[END];
-        // Ranges are collapsed
-        if (rangeBeforeTo === rangeAfterFrom) return [];
-        // Both are not null and don't intercept
-        if (
-            !this.isInterceptingDataRanges(rangeAfter, currentRange)
-            && !this.isInterceptingDataRanges(rangeBefore, currentRange)
-        ) {
-            return [currentRange];
-        }
-        // Left intercepts
-        if (this.isInterceptingDataRanges(rangeBefore, currentRange)) {
-            return [rangeBefore, ...this.generateDataRangesForward(rangeBeforeTo, end, cellSize)];
-        }
-        // Right intercepts
-        if (this.isInterceptingDataRanges(rangeAfter, currentRange)) {
-            return [
-                ...this.generateDataRangesBackward(rangeAfterFrom, start, cellSize),
-                rangeAfter,
-            ];
-        }
-        return [currentRange] as DataRange[];
-    }
-
-    private getMissingRanges(range: DataRange) {
-        const rangesToFetch = this.getRangesMissingFromDataInRange(range);
-        return filter(rangesToFetch, ([start, end]) => (
-            !find(this.inProgressDataRanges, (rangeInProgress) => (
-                rangeInProgress[START] === start && rangeInProgress[END] === end
-            ))
-        ));
-    }
-
-    removeOnDataUpdated() {
-        this.onDataUpdated = null;
-    }
-
-    private addDataRange(newRange: DataRange) {
-        if (this.dataRanges.length === 0) {
-            this.dataRanges.push(newRange);
-            return;
-        }
-        const [newFrom, newTo] = newRange;
-        const rangesLength = this.dataRanges.length;
-        for (let i = 0; i < rangesLength; i++) {
-            const [start, to] = this.dataRanges[i];
-            if (newFrom >= start && newTo <= to) { // is completely inside an existing range
-                return;
-            }
-            if (newTo <= to) { // is before existing range
-                this.dataRanges.splice(i, 0, newRange);
-                this.joinRanges();
-                return;
-            }
-        }
-        this.dataRanges.push(newRange);
-    }
-
-    private joinRanges() {
-        if (this.dataRanges.length < 2) return;
-        const rangesLength = this.dataRanges.length;
-        const newRanges: DataRange[] = [];
-        let newRange: DataRange = [this.dataRanges[0][START], this.dataRanges[0][END]];
-        for (let i = 1; i < rangesLength; i++) {
-            const range = this.dataRanges[i];
-            if (range[START] <= newRange[END]) {
-                newRange[END] = range[END];
-            } else {
-                newRanges.push(newRange);
-                newRange = [range[START], range[END]];
-            }
-        }
-        newRanges.push(newRange);
-        this.dataRanges = newRanges;
-    }
-
-    async fetchAroundTimestampIfNeeded(timestamp: number) {
-        if (this.epg.isFastScrolling()) {
-            return Promise.resolve<void[]>([]);
-        }
-        const rangeNeeded: DataRange = [
-            timestamp - TIMELINE_WIDTHS_TO_FETCH * this.timelineWidthMs,
-            timestamp + TIMELINE_WIDTHS_TO_FETCH * this.timelineWidthMs,
-        ];
-        const rangesNeededToFetch = this.getMissingRanges(rangeNeeded);
-        return Promise.all(
-            map(rangesNeededToFetch, (rangeToFetch) => this.fetchMoreData(rangeToFetch)),
-        );
-    }
-
-    private async fetchMoreData(range: DataRange) {
-        this.inProgressDataRanges.push(range);
-        const newDataRange = await this.fetch(range);
-        if (newDataRange !== null) this.addDataRange(newDataRange);
-        this.inProgressDataRanges.splice(this.inProgressDataRanges.indexOf(range), 1);
-        this.onDataUpdated?.();
-    }
-
-    // eslint-disable-next-line sonarjs/cognitive-complexity
-    private async fetch([start, end]: DataRange) {
-        const { data } = this;
-        let fetchedData: Asset[];
-        try {
-            fetchedData = await this.fetchPrograms(this.channel, start, end);
-        } catch (e) {
-            fetchedData = [];
-        }
-        this.fillInSpaces([start, end], fetchedData);
-        if (fetchedData.length === 0) return null;
-        let newData: Asset[] = [];
-        if (data.length === 0
-            || fetchedData[0].program!.startTime >= data[data.length - 1].program!.endTime) {
-            data.push(...fetchedData);
-            newData = fetchedData;
-        } else if (
-            fetchedData[fetchedData.length - 1].program!.endTime <= data[0].program!.startTime
-        ) {
-            data.unshift(...fetchedData);
-            newData = fetchedData;
-        } else {
-            let firstDataIndex = 0;
-            for (let i = 0; i < fetchedData.length; i++) {
-                const newItem = fetchedData[i];
-                for (let j = firstDataIndex; j < data.length - 1; j++) {
-                    const jn = j + 1;
-                    const item = data[j];
-                    const nextItem = data[jn];
-                    if (j === 0 && newItem.program!.endTime <= item.program!.startTime) {
-                        data.unshift(newItem);
-                        newData.push(newItem);
-                        firstDataIndex = 0;
-                        break;
-                    }
-                    if (j === data.length - 2
-                        && newItem.program!.startTime >= nextItem.program!.endTime) {
-                        data.push(newItem);
-                        newData.push(newItem);
-                        firstDataIndex = data.length - 2;
-                        break;
-                    }
-                    if (newItem.program!.startTime >= item.program!.endTime
-                        && newItem.program!.endTime <= nextItem.program!.startTime) {
-                        data.splice(jn, 0, newItem);
-                        newData.push(newItem);
-                        firstDataIndex = jn;
-                        break;
-                    }
-                }
-            }
-        }
-        if (!newData.length) return null;
-        return this.getRangeFromData(newData);
-    }
-
-    private generateNoDataProgram(startTime: number, endTime: number) {
-        return {
-            program: {
-                startTime,
-                endTime,
-            },
-            name: i18n.t('epg.noData.title'),
-            id: `no-data-${startTime}-${endTime}`,
-        } as unknown as Asset;
-    }
-
-    private fillInSpaces([start, end]: DataRange, data: Asset[]) {
-        if (data.length === 0) {
-            data.push(this.generateNoDataProgram(start, end));
-            return;
-        }
-        if (data[0].program!.startTime > start) {
-            data.unshift(this.generateNoDataProgram(start, data[0].program!.startTime));
-        }
-        const last = data.length - 1;
-        if (data[last].program!.endTime < end) {
-            data.push(this.generateNoDataProgram(data[last].program!.endTime, end));
-        }
-        /**
-         * Going backwards is slightly faster (according to performance analysis)
-         * and we do not have to do i adjustments when pasting no-data items
-         */
-        for (let i = data.length - 1; i > 0; i--) {
-            const current = data[i];
-            const previous = data[i - 1];
-            const breakLength = current.program!.startTime - previous.program!.endTime;
-            if (breakLength > 0 && breakLength >= MINIMUM_BREAK_LENGTH) {
-                data.splice(
-                    i,
-                    0,
-                    this.generateNoDataProgram(
-                        previous.program!.endTime, current.program!.startTime,
-                    ),
-                );
-            }
-        }
-    }
-}
+import { filter, find, findIndex, map } from '@24i/bigscreen-sdk/perf-utils/array';
+import { Asset } from '@24i/smartapps-datalayer/models';
+import { i18n } from '@24i/bigscreen-sdk/i18n';
+import { MINUTE_IN_MS } from '@24i/bigscreen-sdk/utils/timeConstants';
+import { isStartVisible, isEndVisible, isOverFullWidth } from './utils';
+import {
+    DataRange,
+    DataManager as IDataManager,
+    DataUpdateCallback,
+    ProgramsFetcher,
+    Epg,
+} from './interface';
+
+const START = 0;
+const END = 1;
+
+const TIMELINE_WIDTHS_TO_FETCH = 3;
+const MINIMUM_BREAK_LENGTH = MINUTE_IN_MS;
+
+export class DataManager implements IDataManager {
+    private readonly data: Asset[] = [];
+
+    private dataRanges: DataRange[] = [];
+
+    private readonly inProgressDataRanges: DataRange[] = [];
+
+    private onDataUpdated: DataUpdateCallback | null = null;
+
+    constructor(
+        private readonly channel: Asset,
+        private readonly timelineWidthMs: number,
+        private readonly fetchPrograms: ProgramsFetcher,
+        private readonly epg: Epg<any, any, any, any>,
+    ) {
+        if (this.data.length) {
+            this.addDataRange(this.getRangeFromData(this.data));
+        }
+    }
+
+    getChannel() {
+        return this.channel;
+    }
+
+    getData() {
+        return this.data;
+    }
+
+    getDataFromRange(range: DataRange) {
+        return filter(this.data, ({ program }) => {
+            const { startTime, endTime } = program!;
+            return (
+                isStartVisible(startTime, range)
+                || isEndVisible(endTime, range)
+                || isOverFullWidth(startTime, endTime, range)
+            );
+        });
+    }
+
+    getNextProgramStart(timestamp: number) {
+        const startIndex = this.getDataIndexAtTimestamp(timestamp);
+        if (startIndex === -1) return null;
+        const nextData = this.data[startIndex + 1];
+        if (!nextData) return null;
+        return nextData.program!.startTime;
+    }
+
+    getPreviousProgramEnd(fromTimestamp: number, scrollStepMs: number) {
+        const startIndex = this.getDataIndexAtTimestamp(fromTimestamp);
+        if (startIndex <= 0) return null;
+        const { startTime, endTime } = this.data[startIndex - 1].program!;
+        return Math.max(endTime - scrollStepMs, startTime);
+    }
+
+    setOnDataUpdated(callback: DataUpdateCallback) {
+        this.onDataUpdated = callback;
+    }
+
+    private getDataIndexAtTimestamp(timestamp: number) {
+        return findIndex(this.data, ({ program }) => {
+            const { startTime, endTime } = program!;
+            return timestamp >= startTime && timestamp < endTime;
+        });
+    }
+
+    private getRangeFromData(data: Asset[]) {
+        return [data[0].program!.startTime, data[data.length - 1].program!.endTime] as DataRange;
+    }
+
+    private isInterceptingDataRanges = (firstDataRange: DataRange, secondDataRange: DataRange) => (
+        (firstDataRange[START] < secondDataRange[END]
+            && firstDataRange[START] > secondDataRange[START])
+        || (secondDataRange[START] < firstDataRange[END]
+            && secondDataRange[START] > firstDataRange[START])
+    );
+
+    private findRangeBeforeAndAfter = (currentRange: DataRange) => {
+        const rangeAfterIndex = findIndex(
+            this.dataRanges,
+            (dataRange) => dataRange[END] >= currentRange[END],
+        );
+        if (rangeAfterIndex === -1) {
+            return {
+                rangeAfter: undefined,
+                rangeBefore: this.dataRanges[this.dataRanges.length - 1],
+            };
+        }
+        const rangeAfter = this.dataRanges[rangeAfterIndex];
+        const rangeBefore = this.dataRanges[rangeAfterIndex - 1];
+        return { rangeAfter, rangeBefore };
+    };
+
+    private generateDataRangesForward = (start: number, end: number, cellSize: number) => {
+        const dataRanges: DataRange[] = [[start, start + cellSize]];
+        let currentStart = start + cellSize;
+        let currentEnd = currentStart + cellSize;
+        while (currentStart < end) {
+            if (currentEnd >= end) {
+                dataRanges.push([currentStart, end]);
+                break;
+            }
+            dataRanges.push([currentStart, currentEnd]);
+            currentStart += cellSize;
+            currentEnd += cellSize;
+        }
+        return dataRanges;
+    };
+
+    private generateDataRangesBackward = (start: number, end: number, cellSize: number) => {
+        const dataRanges: DataRange[] = [[start - cellSize, start]];
+        let currentEnd = start - cellSize;
+        let currentStart = currentEnd - cellSize;
+        while (currentEnd > start) {
+            if (currentStart <= start) {
+                dataRanges.push([start, currentEnd]);
+                break;
+            }
+            dataRanges.push([currentStart, currentEnd]);
+            currentStart -= cellSize;
+            currentEnd -= cellSize;
+        }
+        return dataRanges;
+    };
+
+    /* eslint-disable complexity */
+    // eslint-disable-next-line sonarjs/cognitive-complexity
+    private getRangesMissingFromDataInRange([start, end]: DataRange) {
+        const currentRange = [start, end] as DataRange;
+        const cellSize = TIMELINE_WIDTHS_TO_FETCH * this.timelineWidthMs;
+        if (this.dataRanges.length === 0) return [currentRange] as DataRange[];
+        const { rangeBefore, rangeAfter } = this.findRangeBeforeAndAfter(currentRange);
+        if (rangeAfter == null) {
+            const lastDataRange = this.dataRanges[this.dataRanges.length - 1];
+            if (this.isInterceptingDataRanges(lastDataRange, currentRange)) {
+                if (end > lastDataRange[END]) {
+                    return this.generateDataRangesForward(lastDataRange[END], end, cellSize);
+                }
+                if (start < lastDataRange[START]) {
+                    return this.generateDataRangesBackward(start, lastDataRange[START], cellSize);
+                }
+            }
+            return [currentRange] as DataRange[];
+        }
+        if (rangeBefore == null) {
+            const firstDataRange = this.dataRanges[0];
+            if (this.isInterceptingDataRanges(firstDataRange, currentRange)) {
+                if (end > firstDataRange[END]) {
+                    return this.generateDataRangesForward(firstDataRange[END], end, cellSize);
+                }
+                if (start < firstDataRange[START]) {
+                    return this.generateDataRangesBackward(firstDataRange[START], start, cellSize);
+                }
+            }
+            return [currentRange] as DataRange[];
+        }
+        const rangeAfterFrom = rangeAfter[START];
+        const rangeBeforeTo = rangeBefore[END];
+        // Ranges are collapsed
+        if (rangeBeforeTo === rangeAfterFrom) return [];
+        // Both are not null and don't intercept
+        if (
+            !this.isInterceptingDataRanges(rangeAfter, currentRange)
+            && !this.isInterceptingDataRanges(rangeBefore, currentRange)
+        ) {
+            return [currentRange];
+        }
+        // Left intercepts
+        if (this.isInterceptingDataRanges(rangeBefore, currentRange)) {
+            return [rangeBefore, ...this.generateDataRangesForward(rangeBeforeTo, end, cellSize)];
+        }
+        // Right intercepts
+        if (this.isInterceptingDataRanges(rangeAfter, currentRange)) {
+            return [
+                ...this.generateDataRangesBackward(rangeAfterFrom, start, cellSize),
+                rangeAfter,
+            ];
+        }
+        return [currentRange] as DataRange[];
+    }
+
+    private getMissingRanges(range: DataRange) {
+        const rangesToFetch = this.getRangesMissingFromDataInRange(range);
+        return filter(rangesToFetch, ([start, end]) => (
+            !find(this.inProgressDataRanges, (rangeInProgress) => (
+                rangeInProgress[START] === start && rangeInProgress[END] === end
+            ))
+        ));
+    }
+
+    removeOnDataUpdated() {
+        this.onDataUpdated = null;
+    }
+
+    private addDataRange(newRange: DataRange) {
+        if (this.dataRanges.length === 0) {
+            this.dataRanges.push(newRange);
+            return;
+        }
+        const [newFrom, newTo] = newRange;
+        const rangesLength = this.dataRanges.length;
+        for (let i = 0; i < rangesLength; i++) {
+            const [start, to] = this.dataRanges[i];
+            if (newFrom >= start && newTo <= to) { // is completely inside an existing range
+                return;
+            }
+            if (newTo <= to) { // is before existing range
+                this.dataRanges.splice(i, 0, newRange);
+                this.joinRanges();
+                return;
+            }
+        }
+        this.dataRanges.push(newRange);
+    }
+
+    private joinRanges() {
+        if (this.dataRanges.length < 2) return;
+        const rangesLength = this.dataRanges.length;
+        const newRanges: DataRange[] = [];
+        let newRange: DataRange = [this.dataRanges[0][START], this.dataRanges[0][END]];
+        for (let i = 1; i < rangesLength; i++) {
+            const range = this.dataRanges[i];
+            if (range[START] <= newRange[END]) {
+                newRange[END] = range[END];
+            } else {
+                newRanges.push(newRange);
+                newRange = [range[START], range[END]];
+            }
+        }
+        newRanges.push(newRange);
+        this.dataRanges = newRanges;
+    }
+
+    async fetchAroundTimestampIfNeeded(timestamp: number) {
+        if (this.epg.isFastScrolling()) {
+            return Promise.resolve<void[]>([]);
+        }
+        const rangeNeeded: DataRange = [
+            timestamp - TIMELINE_WIDTHS_TO_FETCH * this.timelineWidthMs,
+            timestamp + TIMELINE_WIDTHS_TO_FETCH * this.timelineWidthMs,
+        ];
+        const rangesNeededToFetch = this.getMissingRanges(rangeNeeded);
+        return Promise.all(
+            map(rangesNeededToFetch, (rangeToFetch) => this.fetchMoreData(rangeToFetch)),
+        );
+    }
+
+    private async fetchMoreData(range: DataRange) {
+        this.inProgressDataRanges.push(range);
+        const newDataRange = await this.fetch(range);
+        if (newDataRange !== null) this.addDataRange(newDataRange);
+        this.inProgressDataRanges.splice(this.inProgressDataRanges.indexOf(range), 1);
+        this.onDataUpdated?.();
+    }
+
+    // eslint-disable-next-line sonarjs/cognitive-complexity
+    private async fetch([start, end]: DataRange) {
+        const { data } = this;
+        let fetchedData: Asset[];
+        try {
+            fetchedData = await this.fetchPrograms(this.channel, start, end);
+        } catch (e) {
+            fetchedData = [];
+        }
+        this.fillInSpaces([start, end], fetchedData);
+        if (fetchedData.length === 0) return null;
+        let newData: Asset[] = [];
+        if (data.length === 0
+            || fetchedData[0].program!.startTime >= data[data.length - 1].program!.endTime) {
+            data.push(...fetchedData);
+            newData = fetchedData;
+        } else if (
+            fetchedData[fetchedData.length - 1].program!.endTime <= data[0].program!.startTime
+        ) {
+            data.unshift(...fetchedData);
+            newData = fetchedData;
+        } else {
+            let firstDataIndex = 0;
+            for (let i = 0; i < fetchedData.length; i++) {
+                const newItem = fetchedData[i];
+                for (let j = firstDataIndex; j < data.length - 1; j++) {
+                    const jn = j + 1;
+                    const item = data[j];
+                    const nextItem = data[jn];
+                    if (j === 0 && newItem.program!.endTime <= item.program!.startTime) {
+                        data.unshift(newItem);
+                        newData.push(newItem);
+                        firstDataIndex = 0;
+                        break;
+                    }
+                    if (j === data.length - 2
+                        && newItem.program!.startTime >= nextItem.program!.endTime) {
+                        data.push(newItem);
+                        newData.push(newItem);
+                        firstDataIndex = data.length - 2;
+                        break;
+                    }
+                    if (newItem.program!.startTime >= item.program!.endTime
+                        && newItem.program!.endTime <= nextItem.program!.startTime) {
+                        data.splice(jn, 0, newItem);
+                        newData.push(newItem);
+                        firstDataIndex = jn;
+                        break;
+                    }
+                }
+            }
+        }
+        if (!newData.length) return null;
+        return this.getRangeFromData(newData);
+    }
+
+    private generateNoDataProgram(startTime: number, endTime: number) {
+        return {
+            program: {
+                startTime,
+                endTime,
+            },
+            name: i18n.t('epg.noData.title'),
+            id: `no-data-${startTime}-${endTime}`,
+        } as unknown as Asset;
+    }
+
+    private fillInSpaces([start, end]: DataRange, data: Asset[]) {
+        if (data.length === 0) {
+            data.push(this.generateNoDataProgram(start, end));
+            return;
+        }
+        if (data[0].program!.startTime > start) {
+            data.unshift(this.generateNoDataProgram(start, data[0].program!.startTime));
+        }
+        const last = data.length - 1;
+        if (data[last].program!.endTime < end) {
+            data.push(this.generateNoDataProgram(data[last].program!.endTime, end));
+        }
+        /**
+         * Going backwards is slightly faster (according to performance analysis)
+         * and we do not have to do i adjustments when pasting no-data items
+         */
+        for (let i = data.length - 1; i > 0; i--) {
+            const current = data[i];
+            const previous = data[i - 1];
+            const breakLength = current.program!.startTime - previous.program!.endTime;
+            if (breakLength > 0 && breakLength >= MINIMUM_BREAK_LENGTH) {
+                data.splice(
+                    i,
+                    0,
+                    this.generateNoDataProgram(
+                        previous.program!.endTime, current.program!.startTime,
+                    ),
+                );
+            }
+        }
+    }
+}