@24i/bigscreen-sdk 1.0.34 → 1.0.35-alpha.2578

package/packages/epg/src/v2/basic/RowsManager.tsx

@@ -1,503 +1,503 @@
-import { Component, Reference, createRef } from '@24i/bigscreen-sdk/jsx';
-import { findIndex, forEach, map } from '@24i/bigscreen-sdk/perf-utils/array';
-import { Scroller } from '@24i/bigscreen-sdk/scroller';
-import { Asset } from '@24i/smartapps-datalayer/models';
-import { Row } from '../Row';
-import {
-    RowsManagerProps as Props,
-    RowsManager as IRowsManager,
-    Row as IRow,
-    Header,
-    Program,
-} from '../interface';
-
-export class RowsManager<
-    T extends Header,
-    U extends Program,
-> extends Component<Props<T, U>> implements IRowsManager<T, U> {
-    private readonly rows: Reference<IRow<U>>[] = [];
-
-    private readonly headers: Reference<T>[] = [];
-
-    private readonly scroller = createRef<Scroller>();
-
-    // eslint-disable-next-line react/destructuring-assignment
-    private focusTimestamp = this.props.timestamp;
-
-    private focusedRowIndex = 0;
-
-    private channelOffsetIndex: number;
-
-    private readonly rowsCount: number;
-
-    private isUpdating = false;
-
-    private isFastScrolling = false;
-
-    private coiBeforeFastScrolling = 0;
-
-    private fastScrollingRowsOrder: Record<number, Reference<IRow<U>>> = {};
-
-    constructor(props: Props<T, U>) {
-        super(props);
-        const { initialChannelIndex, navigatableRows, additionalRows, dataManagers } = this.props;
-        this.channelOffsetIndex = Math.max(0, Math.min(
-            initialChannelIndex, dataManagers.length - 1 - navigatableRows,
-        ));
-        this.setFocusedRowIndex(initialChannelIndex - this.channelOffsetIndex);
-        this.rowsCount = Math.min(navigatableRows + additionalRows, dataManagers.length);
-        for (let i = this.rowsCount; i > 0; i -= 1) {
-            this.rows.push(createRef());
-            this.headers.push(createRef());
-        }
-    }
-
-    componentDidMount() {
-        if (this.rows.length === 0) return;
-        const { rowHeightPx } = this.props;
-        forEach(this.rows, (row, index) => {
-            row.current!.setOffset(index * rowHeightPx);
-        });
-        this.setCurrentRowActive();
-    }
-
-    onFastScrollingStart() {
-        this.saveFastScrollingRowsOrder();
-        this.setCurrentRowInactive();
-        this.isFastScrolling = true;
-        this.coiBeforeFastScrolling = this.channelOffsetIndex;
-        forEach(this.rows, ({ current: row }) => {
-            row!.onFastScrollingStart();
-        });
-    }
-
-    onFastScrollingEnd() {
-        const { isFocusInRows } = this.props;
-        this.isFastScrolling = false;
-        if (this.coiBeforeFastScrolling < this.channelOffsetIndex) {
-            const { navigatableRows } = this.props;
-            this.focusedRowIndex = navigatableRows - 1;
-            this.updateRowsForward();
-        } else if (this.coiBeforeFastScrolling > this.channelOffsetIndex) {
-            this.focusedRowIndex = 0;
-            this.updateRowsBackward();
-        }
-        // it is same if we scroll horizontally and at that case we do not need to do anything
-        if (isFocusInRows()) this.focusCurrentRowAtTimestamp();
-        this.setCurrentRowActive();
-        forEach(this.rows, ({ current: row }) => {
-            row!.onFastScrollingEnd();
-        });
-    }
-
-    onUp() {
-        if (this.focusedRowIndex > 0) {
-            this.focusRowAtIndex(this.focusedRowIndex - 1);
-            return true;
-        }
-        if (this.channelOffsetIndex > 0) {
-            this.offsetChannelsBy(-1);
-            return true;
-        }
-        return false;
-    }
-
-    onDown() {
-        this.fixTooHighFocusedRowIndex();
-        const { navigatableRows, dataManagers } = this.props;
-        const maxFocusedRowIndex = Math.min(navigatableRows, dataManagers.length) - 1;
-        if (this.focusedRowIndex < maxFocusedRowIndex) {
-            this.focusRowAtIndex(this.focusedRowIndex + 1);
-            return true;
-        }
-        if (this.channelOffsetIndex < dataManagers.length - navigatableRows) {
-            this.offsetChannelsBy(1);
-            return true;
-        }
-        return false;
-    }
-
-    onChannelUp() {
-        const { navigatableRows } = this.props;
-        if (this.channelOffsetIndex === 0) {
-            if (this.focusedRowIndex === 0) return false;
-            this.focusRowAtIndex(0);
-            return true;
-        }
-        this.offsetChannelsBy(-Math.min(navigatableRows, this.channelOffsetIndex));
-        return true;
-    }
-
-    onChannelDown() {
-        this.fixTooHighFocusedRowIndex();
-        const { navigatableRows, dataManagers } = this.props;
-        const maxFocusedRowIndex = Math.min(navigatableRows, dataManagers.length) - 1;
-        const maxChannelOffsetIndex = dataManagers.length - navigatableRows;
-        // could be bigger if dataManagers.length < navigatableRows
-        if (this.channelOffsetIndex >= maxChannelOffsetIndex) {
-            if (this.focusedRowIndex === maxFocusedRowIndex) return false;
-            this.focusRowAtIndex(maxFocusedRowIndex);
-            return true;
-        }
-        this.offsetChannelsBy(Math.min(
-            navigatableRows, maxChannelOffsetIndex - this.channelOffsetIndex,
-        ));
-        return true;
-    }
-
-    private readonly onFocusChange = (data: Asset | undefined, channel: Asset, component: U) => {
-        const { dataManagers, onFocusChange } = this.props;
-        onFocusChange?.(data, channel, component);
-        if (this.isUpdating) return;
-        const channelIndex = findIndex(dataManagers, (dataManager) => (
-            dataManager.getChannel() === channel
-        ));
-        this.setFocusedRowIndex(channelIndex - this.channelOffsetIndex);
-    };
-
-    getNextProgramStart(timestamp: number) {
-        const rowIndex = this.yIndexToIndex(this.focusedRowIndex);
-        return this.rows[rowIndex].current!.getNextProgramStart(timestamp);
-    }
-
-    getPreviousProgramEnd(timestamp: number, customScrollStepMs?: number) {
-        const rowIndex = this.yIndexToIndex(this.focusedRowIndex);
-        return this.rows[rowIndex].current!.getPreviousProgramEnd(timestamp, customScrollStepMs);
-    }
-
-    setCurrentChannelIndex(index: number) {
-        const { dataManagers } = this.props;
-        if (index < 0) throw new Error('Cannot set row index to lower than 0.');
-        if (index >= dataManagers.length) {
-            throw new Error('Cannot set row index to higher than max channel index.');
-        }
-        const currentIndex = this.focusedRowIndex + this.channelOffsetIndex;
-        if (currentIndex > index) {
-            this.setLowerChannelIndex(index, currentIndex);
-        } else if (currentIndex < index) {
-            this.setHigherChannelIndex(index, currentIndex);
-        }
-        // If they are equal we do not need to do anything
-    }
-
-    setFocusTimestamp(timestamp: number) {
-        this.focusTimestamp = timestamp;
-    }
-
-    private setFocusedRowIndex(index: number) {
-        if (index === this.focusedRowIndex) return;
-        this.setCurrentRowInactive();
-        this.focusedRowIndex = index;
-        this.setCurrentRowActive();
-    }
-
-    private getVisibleChannels() {
-        const { dataManagers } = this.props;
-        const start = this.channelOffsetIndex;
-        const end = start + this.rowsCount;
-        return dataManagers.slice(start, end);
-    }
-
-    private setLowerChannelIndex(index: number, currentIndex: number) {
-        const indexDiff = currentIndex - index;
-        const oldFocusedRowIndex = this.focusedRowIndex;
-        this.setFocusedRowIndex(this.focusedRowIndex - Math.min(this.focusedRowIndex, indexDiff));
-        this.setCurrentRowInactive();
-        if (oldFocusedRowIndex >= indexDiff) {
-            this.focusCurrentRowAtTimestamp();
-            return;
-        }
-        this.channelOffsetIndex -= Math.min(
-            this.channelOffsetIndex, indexDiff - oldFocusedRowIndex + this.focusedRowIndex,
-        );
-        this.updateBackward();
-        this.focusCurrentRowAtTimestamp();
-        this.setCurrentRowActive();
-    }
-
-    private setHigherChannelIndex(index: number, currentIndex: number) {
-        const { navigatableRows, dataManagers } = this.props;
-        const indexDiff = index - currentIndex;
-        const oldFocusedRowIndex = this.focusedRowIndex;
-        this.setFocusedRowIndex(
-            this.focusedRowIndex + Math.min(navigatableRows - 1 - this.focusedRowIndex, indexDiff),
-        );
-        this.setCurrentRowInactive();
-        if (this.focusedRowIndex - oldFocusedRowIndex >= indexDiff) {
-            this.focusCurrentRowAtTimestamp();
-            this.setCurrentRowActive();
-            return;
-        }
-        this.channelOffsetIndex += Math.min(
-            dataManagers.length - 1 - navigatableRows - this.channelOffsetIndex,
-            indexDiff - (this.focusedRowIndex - oldFocusedRowIndex),
-        );
-        this.updateBackward();
-        this.focusCurrentRowAtTimestamp();
-        this.setCurrentRowActive();
-    }
-
-    private setCurrentRowInactive() {
-        if (this.isFastScrolling) return;
-        this.rows[this.yIndexToIndex(this.focusedRowIndex)].current!.setInactive();
-    }
-
-    private setCurrentRowActive() {
-        if (this.isFastScrolling) return;
-        this.rows[this.yIndexToIndex(this.focusedRowIndex)].current!.setActive();
-    }
-
-    private readonly saveFastScrollingRowsOrder = () => {
-        this.fastScrollingRowsOrder = {};
-        forEach(this.rows, (row, index) => {
-            const yIndex = this.indexToYIndex(index);
-            this.fastScrollingRowsOrder[yIndex] = row;
-        });
-    };
-
-    canGoUp() {
-        return this.focusedRowIndex > 0 || this.channelOffsetIndex > 0;
-    }
-
-    canGoDown() {
-        const { navigatableRows, dataManagers: { length: dataManagersLength } } = this.props;
-        return dataManagersLength > navigatableRows && (
-            this.focusedRowIndex < Math.min(navigatableRows - 1, dataManagersLength)
-            || this.channelOffsetIndex < dataManagersLength - navigatableRows
-        );
-    }
-
-    focus(timestamp: number, options?: FocusOptions) {
-        this.focusTimestamp = timestamp;
-        this.focusCurrentRowAtTimestamp(timestamp, options);
-    }
-
-    scrollRowsToTimestamp(timestamp: number) {
-        forEach(this.rows, (row) => {
-            row.current!.scrollToTimestamp(timestamp);
-        });
-    }
-
-    scrollUp() {
-        if (!this.canGoUp()) return false;
-        const { navigatableRows } = this.props;
-        if (this.channelOffsetIndex > 0) {
-            this.setCurrentRowInactive();
-            this.channelOffsetIndex -= 1;
-            this.updateBackward();
-            if (this.focusedRowIndex < navigatableRows - 1) {
-                this.focusRowAtIndex(this.focusedRowIndex + 1);
-            } else {
-                this.focusCurrentRowAtTimestamp();
-            }
-            this.setCurrentRowActive();
-        } else if (this.focusedRowIndex > 0) {
-            this.focusRowAtIndex(this.focusedRowIndex - 1);
-        }
-        return true;
-    }
-
-    scrollDown() {
-        if (!this.canGoDown()) return false;
-        const { dataManagers, navigatableRows } = this.props;
-        if (this.channelOffsetIndex < dataManagers.length - navigatableRows) {
-            this.setCurrentRowInactive();
-            this.channelOffsetIndex += 1;
-            this.updateForward();
-            if (this.focusedRowIndex > 0) {
-                this.focusRowAtIndex(this.focusedRowIndex - 1);
-            } else {
-                this.focusCurrentRowAtTimestamp();
-            }
-            this.setCurrentRowActive();
-        } else if (this.focusedRowIndex < navigatableRows - 1) {
-            this.focusRowAtIndex(this.focusedRowIndex + 1);
-        }
-        return true;
-    }
-
-    private focusCurrentRowAtTimestamp(
-        timestamp: number = this.focusTimestamp, options?: FocusOptions,
-    ) {
-        if (this.isFastScrolling) return;
-        if (this.rows.length === 0) return;
-        this.rows[this.yIndexToIndex(this.focusedRowIndex)].current!.focus(timestamp, options);
-    }
-
-    private focusRowAtIndex(index: number) {
-        this.setFocusedRowIndex(index);
-        this.focusCurrentRowAtTimestamp();
-    }
-
-    private fixTooHighFocusedRowIndex() {
-        const { navigatableRows } = this.props;
-        const diff = this.focusedRowIndex - navigatableRows + 1;
-        if (diff <= 0) return 0;
-        this.focusedRowIndex -= diff;
-        this.channelOffsetIndex += diff;
-        return diff;
-    }
-
-    private offsetChannelsBy(diff: number) {
-        this.setCurrentRowInactive();
-        this.channelOffsetIndex += diff;
-        if (diff > 0) this.updateForward();
-        else this.updateBackward();
-        this.focusCurrentRowAtTimestamp();
-        this.setCurrentRowActive();
-    }
-
-    private indexToYIndex(index: number) {
-        const rowsLength = this.rows.length;
-        const roundRobinChannelOffsetIndex = this.channelOffsetIndex % rowsLength;
-        let yIndex = index - roundRobinChannelOffsetIndex;
-        if (yIndex < 0) yIndex = rowsLength + yIndex;
-        return yIndex;
-    }
-
-    private yIndexToIndex(yIndex: number) {
-        const rowsLength = this.rows.length;
-        const roundRobinChannelOffsetIndex = this.channelOffsetIndex % rowsLength;
-        let index = yIndex + roundRobinChannelOffsetIndex;
-        if (index >= rowsLength) index -= rowsLength;
-        return index;
-    }
-
-    private updateForward() {
-        this.isUpdating = true;
-        this.updateHeadersForward();
-        this.updateRowsForward();
-        this.isUpdating = false;
-    }
-
-    private updateHeadersForward() {
-        forEach(this.headers, (header, index) => {
-            this.updateHeader(header, index);
-        });
-    }
-
-    private updateRowsForward() {
-        if (this.isFastScrolling) {
-            this.updateRowsWhenFastScrolling();
-            return;
-        }
-        const { rowHeightPx } = this.props;
-        this.scroller.current!.scroll(this.channelOffsetIndex * rowHeightPx);
-        forEach(this.rows, (row, index) => {
-            this.updateRow(row, index);
-        });
-    }
-
-    private updateBackward() {
-        this.isUpdating = true;
-        this.updateHeadersBackward();
-        this.updateRowsBackward();
-        this.isUpdating = false;
-    }
-
-    private updateHeadersBackward() {
-        for (let index = this.headers.length - 1; index >= 0; index -= 1) {
-            this.updateHeader(this.headers[index], index);
-        }
-    }
-
-    private updateRowsBackward() {
-        if (this.isFastScrolling) {
-            this.updateRowsWhenFastScrolling();
-            return;
-        }
-        const { rowHeightPx } = this.props;
-        this.scroller.current!.scroll(this.channelOffsetIndex * rowHeightPx);
-        const maxIndex = this.rows.length - 1;
-        for (let index = maxIndex; index >= 0; index -= 1) {
-            this.updateRow(this.rows[index], index);
-        }
-    }
-
-    private updateRowsWhenFastScrolling() {
-        const { dataManagers } = this.props;
-        for (let i = 0; i < this.rows.length; i++) {
-            const yIndex = this.indexToYIndex(i);
-            const row = this.fastScrollingRowsOrder[yIndex].current!;
-            const channelIndex = yIndex + this.channelOffsetIndex;
-            const dataManager = dataManagers[channelIndex];
-            if (!dataManager) {
-                row.hide();
-            } else {
-                row.show();
-            }
-        }
-    }
-
-    private updateHeader(header: Reference<T>, index: number) {
-        const { dataManagers } = this.props;
-        const data = dataManagers[index + this.channelOffsetIndex];
-        if (data) {
-            header.current!.show();
-            header.current!.updateData(data.getChannel());
-        } else {
-            header.current!.hide();
-        }
-    }
-
-    private updateRow(
-        rowRef: Reference<IRow<U>>,
-        index: number,
-    ) {
-        const row = rowRef.current!;
-        const { dataManagers, rowHeightPx } = this.props;
-        const yIndex = this.indexToYIndex(index);
-        const channelIndex = yIndex + this.channelOffsetIndex;
-        const dataManager = dataManagers[channelIndex];
-        row.setOffset((yIndex + this.channelOffsetIndex) * rowHeightPx);
-        if (dataManager) {
-            if (!row.hasDataManager(dataManager)) {
-                if (index === 0) {
-                    dataManager.removeOnDataUpdated();
-                }
-                row.updateData(dataManagers[channelIndex]);
-            }
-            row.show();
-        } else {
-            row.hide();
-        }
-    }
-
-    render() {
-        const {
-            timelineWidthMs, timestamp, time, scrollStepMs,
-            pixelInMs, timelineWidthPx, smallestAllowedCellPx,
-            programTextModeResolver, onItemPress, onMouseEnter, renderProgram, renderChannelHeader,
-        } = this.props;
-        const visibleData = this.getVisibleChannels();
-        return (
-            <>
-                <div className="epg-headers">
-                    {map(this.headers, (ref, index) => (
-                        renderChannelHeader(visibleData[index].getChannel(), ref)
-                    ))}
-                </div>
-                <Scroller ref={this.scroller} className="epg-rows">
-                    {map(this.rows, (ref, index) => (
-                        <Row<U>
-                            ref={ref as Reference<Row<U>>}
-                            data={visibleData[index]}
-                            timelineWidthMs={timelineWidthMs}
-                            timelineWidthPx={timelineWidthPx}
-                            timestamp={timestamp}
-                            time={time}
-                            scrollStepMs={scrollStepMs}
-                            pixelInMs={pixelInMs}
-                            programTextModeResolver={programTextModeResolver}
-                            onItemPress={onItemPress}
-                            onFocusChange={this.onFocusChange}
-                            onMouseEnter={onMouseEnter}
-                            renderProgram={renderProgram}
-                            smallestAllowedCellPx={smallestAllowedCellPx}
-                        />
-                    ))}
-                </Scroller>
-            </>
-        );
-    }
-}
+import { Component, Reference, createRef } from '@24i/bigscreen-sdk/jsx';
+import { findIndex, forEach, map } from '@24i/bigscreen-sdk/perf-utils/array';
+import { Scroller } from '@24i/bigscreen-sdk/scroller';
+import { Asset } from '@24i/smartapps-datalayer/models';
+import { Row } from '../Row';
+import {
+    RowsManagerProps as Props,
+    RowsManager as IRowsManager,
+    Row as IRow,
+    Header,
+    Program,
+} from '../interface';
+
+export class RowsManager<
+    T extends Header,
+    U extends Program,
+> extends Component<Props<T, U>> implements IRowsManager<T, U> {
+    private readonly rows: Reference<IRow<U>>[] = [];
+
+    private readonly headers: Reference<T>[] = [];
+
+    private readonly scroller = createRef<Scroller>();
+
+    // eslint-disable-next-line react/destructuring-assignment
+    private focusTimestamp = this.props.timestamp;
+
+    private focusedRowIndex = 0;
+
+    private channelOffsetIndex: number;
+
+    private readonly rowsCount: number;
+
+    private isUpdating = false;
+
+    private isFastScrolling = false;
+
+    private coiBeforeFastScrolling = 0;
+
+    private fastScrollingRowsOrder: Record<number, Reference<IRow<U>>> = {};
+
+    constructor(props: Props<T, U>) {
+        super(props);
+        const { initialChannelIndex, navigatableRows, additionalRows, dataManagers } = this.props;
+        this.channelOffsetIndex = Math.max(0, Math.min(
+            initialChannelIndex, dataManagers.length - 1 - navigatableRows,
+        ));
+        this.setFocusedRowIndex(initialChannelIndex - this.channelOffsetIndex);
+        this.rowsCount = Math.min(navigatableRows + additionalRows, dataManagers.length);
+        for (let i = this.rowsCount; i > 0; i -= 1) {
+            this.rows.push(createRef());
+            this.headers.push(createRef());
+        }
+    }
+
+    componentDidMount() {
+        if (this.rows.length === 0) return;
+        const { rowHeightPx } = this.props;
+        forEach(this.rows, (row, index) => {
+            row.current!.setOffset(index * rowHeightPx);
+        });
+        this.setCurrentRowActive();
+    }
+
+    onFastScrollingStart() {
+        this.saveFastScrollingRowsOrder();
+        this.setCurrentRowInactive();
+        this.isFastScrolling = true;
+        this.coiBeforeFastScrolling = this.channelOffsetIndex;
+        forEach(this.rows, ({ current: row }) => {
+            row!.onFastScrollingStart();
+        });
+    }
+
+    onFastScrollingEnd() {
+        const { isFocusInRows } = this.props;
+        this.isFastScrolling = false;
+        if (this.coiBeforeFastScrolling < this.channelOffsetIndex) {
+            const { navigatableRows } = this.props;
+            this.focusedRowIndex = navigatableRows - 1;
+            this.updateRowsForward();
+        } else if (this.coiBeforeFastScrolling > this.channelOffsetIndex) {
+            this.focusedRowIndex = 0;
+            this.updateRowsBackward();
+        }
+        // it is same if we scroll horizontally and at that case we do not need to do anything
+        if (isFocusInRows()) this.focusCurrentRowAtTimestamp();
+        this.setCurrentRowActive();
+        forEach(this.rows, ({ current: row }) => {
+            row!.onFastScrollingEnd();
+        });
+    }
+
+    onUp() {
+        if (this.focusedRowIndex > 0) {
+            this.focusRowAtIndex(this.focusedRowIndex - 1);
+            return true;
+        }
+        if (this.channelOffsetIndex > 0) {
+            this.offsetChannelsBy(-1);
+            return true;
+        }
+        return false;
+    }
+
+    onDown() {
+        this.fixTooHighFocusedRowIndex();
+        const { navigatableRows, dataManagers } = this.props;
+        const maxFocusedRowIndex = Math.min(navigatableRows, dataManagers.length) - 1;
+        if (this.focusedRowIndex < maxFocusedRowIndex) {
+            this.focusRowAtIndex(this.focusedRowIndex + 1);
+            return true;
+        }
+        if (this.channelOffsetIndex < dataManagers.length - navigatableRows) {
+            this.offsetChannelsBy(1);
+            return true;
+        }
+        return false;
+    }
+
+    onChannelUp() {
+        const { navigatableRows } = this.props;
+        if (this.channelOffsetIndex === 0) {
+            if (this.focusedRowIndex === 0) return false;
+            this.focusRowAtIndex(0);
+            return true;
+        }
+        this.offsetChannelsBy(-Math.min(navigatableRows, this.channelOffsetIndex));
+        return true;
+    }
+
+    onChannelDown() {
+        this.fixTooHighFocusedRowIndex();
+        const { navigatableRows, dataManagers } = this.props;
+        const maxFocusedRowIndex = Math.min(navigatableRows, dataManagers.length) - 1;
+        const maxChannelOffsetIndex = dataManagers.length - navigatableRows;
+        // could be bigger if dataManagers.length < navigatableRows
+        if (this.channelOffsetIndex >= maxChannelOffsetIndex) {
+            if (this.focusedRowIndex === maxFocusedRowIndex) return false;
+            this.focusRowAtIndex(maxFocusedRowIndex);
+            return true;
+        }
+        this.offsetChannelsBy(Math.min(
+            navigatableRows, maxChannelOffsetIndex - this.channelOffsetIndex,
+        ));
+        return true;
+    }
+
+    private readonly onFocusChange = (data: Asset | undefined, channel: Asset, component: U) => {
+        const { dataManagers, onFocusChange } = this.props;
+        onFocusChange?.(data, channel, component);
+        if (this.isUpdating) return;
+        const channelIndex = findIndex(dataManagers, (dataManager) => (
+            dataManager.getChannel() === channel
+        ));
+        this.setFocusedRowIndex(channelIndex - this.channelOffsetIndex);
+    };
+
+    getNextProgramStart(timestamp: number) {
+        const rowIndex = this.yIndexToIndex(this.focusedRowIndex);
+        return this.rows[rowIndex].current!.getNextProgramStart(timestamp);
+    }
+
+    getPreviousProgramEnd(timestamp: number, customScrollStepMs?: number) {
+        const rowIndex = this.yIndexToIndex(this.focusedRowIndex);
+        return this.rows[rowIndex].current!.getPreviousProgramEnd(timestamp, customScrollStepMs);
+    }
+
+    setCurrentChannelIndex(index: number) {
+        const { dataManagers } = this.props;
+        if (index < 0) throw new Error('Cannot set row index to lower than 0.');
+        if (index >= dataManagers.length) {
+            throw new Error('Cannot set row index to higher than max channel index.');
+        }
+        const currentIndex = this.focusedRowIndex + this.channelOffsetIndex;
+        if (currentIndex > index) {
+            this.setLowerChannelIndex(index, currentIndex);
+        } else if (currentIndex < index) {
+            this.setHigherChannelIndex(index, currentIndex);
+        }
+        // If they are equal we do not need to do anything
+    }
+
+    setFocusTimestamp(timestamp: number) {
+        this.focusTimestamp = timestamp;
+    }
+
+    private setFocusedRowIndex(index: number) {
+        if (index === this.focusedRowIndex) return;
+        this.setCurrentRowInactive();
+        this.focusedRowIndex = index;
+        this.setCurrentRowActive();
+    }
+
+    private getVisibleChannels() {
+        const { dataManagers } = this.props;
+        const start = this.channelOffsetIndex;
+        const end = start + this.rowsCount;
+        return dataManagers.slice(start, end);
+    }
+
+    private setLowerChannelIndex(index: number, currentIndex: number) {
+        const indexDiff = currentIndex - index;
+        const oldFocusedRowIndex = this.focusedRowIndex;
+        this.setFocusedRowIndex(this.focusedRowIndex - Math.min(this.focusedRowIndex, indexDiff));
+        this.setCurrentRowInactive();
+        if (oldFocusedRowIndex >= indexDiff) {
+            this.focusCurrentRowAtTimestamp();
+            return;
+        }
+        this.channelOffsetIndex -= Math.min(
+            this.channelOffsetIndex, indexDiff - oldFocusedRowIndex + this.focusedRowIndex,
+        );
+        this.updateBackward();
+        this.focusCurrentRowAtTimestamp();
+        this.setCurrentRowActive();
+    }
+
+    private setHigherChannelIndex(index: number, currentIndex: number) {
+        const { navigatableRows, dataManagers } = this.props;
+        const indexDiff = index - currentIndex;
+        const oldFocusedRowIndex = this.focusedRowIndex;
+        this.setFocusedRowIndex(
+            this.focusedRowIndex + Math.min(navigatableRows - 1 - this.focusedRowIndex, indexDiff),
+        );
+        this.setCurrentRowInactive();
+        if (this.focusedRowIndex - oldFocusedRowIndex >= indexDiff) {
+            this.focusCurrentRowAtTimestamp();
+            this.setCurrentRowActive();
+            return;
+        }
+        this.channelOffsetIndex += Math.min(
+            dataManagers.length - 1 - navigatableRows - this.channelOffsetIndex,
+            indexDiff - (this.focusedRowIndex - oldFocusedRowIndex),
+        );
+        this.updateBackward();
+        this.focusCurrentRowAtTimestamp();
+        this.setCurrentRowActive();
+    }
+
+    private setCurrentRowInactive() {
+        if (this.isFastScrolling) return;
+        this.rows[this.yIndexToIndex(this.focusedRowIndex)].current!.setInactive();
+    }
+
+    private setCurrentRowActive() {
+        if (this.isFastScrolling) return;
+        this.rows[this.yIndexToIndex(this.focusedRowIndex)].current!.setActive();
+    }
+
+    private readonly saveFastScrollingRowsOrder = () => {
+        this.fastScrollingRowsOrder = {};
+        forEach(this.rows, (row, index) => {
+            const yIndex = this.indexToYIndex(index);
+            this.fastScrollingRowsOrder[yIndex] = row;
+        });
+    };
+
+    canGoUp() {
+        return this.focusedRowIndex > 0 || this.channelOffsetIndex > 0;
+    }
+
+    canGoDown() {
+        const { navigatableRows, dataManagers: { length: dataManagersLength } } = this.props;
+        return dataManagersLength > navigatableRows && (
+            this.focusedRowIndex < Math.min(navigatableRows - 1, dataManagersLength)
+            || this.channelOffsetIndex < dataManagersLength - navigatableRows
+        );
+    }
+
+    focus(timestamp: number, options?: FocusOptions) {
+        this.focusTimestamp = timestamp;
+        this.focusCurrentRowAtTimestamp(timestamp, options);
+    }
+
+    scrollRowsToTimestamp(timestamp: number) {
+        forEach(this.rows, (row) => {
+            row.current!.scrollToTimestamp(timestamp);
+        });
+    }
+
+    scrollUp() {
+        if (!this.canGoUp()) return false;
+        const { navigatableRows } = this.props;
+        if (this.channelOffsetIndex > 0) {
+            this.setCurrentRowInactive();
+            this.channelOffsetIndex -= 1;
+            this.updateBackward();
+            if (this.focusedRowIndex < navigatableRows - 1) {
+                this.focusRowAtIndex(this.focusedRowIndex + 1);
+            } else {
+                this.focusCurrentRowAtTimestamp();
+            }
+            this.setCurrentRowActive();
+        } else if (this.focusedRowIndex > 0) {
+            this.focusRowAtIndex(this.focusedRowIndex - 1);
+        }
+        return true;
+    }
+
+    scrollDown() {
+        if (!this.canGoDown()) return false;
+        const { dataManagers, navigatableRows } = this.props;
+        if (this.channelOffsetIndex < dataManagers.length - navigatableRows) {
+            this.setCurrentRowInactive();
+            this.channelOffsetIndex += 1;
+            this.updateForward();
+            if (this.focusedRowIndex > 0) {
+                this.focusRowAtIndex(this.focusedRowIndex - 1);
+            } else {
+                this.focusCurrentRowAtTimestamp();
+            }
+            this.setCurrentRowActive();
+        } else if (this.focusedRowIndex < navigatableRows - 1) {
+            this.focusRowAtIndex(this.focusedRowIndex + 1);
+        }
+        return true;
+    }
+
+    private focusCurrentRowAtTimestamp(
+        timestamp: number = this.focusTimestamp, options?: FocusOptions,
+    ) {
+        if (this.isFastScrolling) return;
+        if (this.rows.length === 0) return;
+        this.rows[this.yIndexToIndex(this.focusedRowIndex)].current!.focus(timestamp, options);
+    }
+
+    private focusRowAtIndex(index: number) {
+        this.setFocusedRowIndex(index);
+        this.focusCurrentRowAtTimestamp();
+    }
+
+    private fixTooHighFocusedRowIndex() {
+        const { navigatableRows } = this.props;
+        const diff = this.focusedRowIndex - navigatableRows + 1;
+        if (diff <= 0) return 0;
+        this.focusedRowIndex -= diff;
+        this.channelOffsetIndex += diff;
+        return diff;
+    }
+
+    private offsetChannelsBy(diff: number) {
+        this.setCurrentRowInactive();
+        this.channelOffsetIndex += diff;
+        if (diff > 0) this.updateForward();
+        else this.updateBackward();
+        this.focusCurrentRowAtTimestamp();
+        this.setCurrentRowActive();
+    }
+
+    private indexToYIndex(index: number) {
+        const rowsLength = this.rows.length;
+        const roundRobinChannelOffsetIndex = this.channelOffsetIndex % rowsLength;
+        let yIndex = index - roundRobinChannelOffsetIndex;
+        if (yIndex < 0) yIndex = rowsLength + yIndex;
+        return yIndex;
+    }
+
+    private yIndexToIndex(yIndex: number) {
+        const rowsLength = this.rows.length;
+        const roundRobinChannelOffsetIndex = this.channelOffsetIndex % rowsLength;
+        let index = yIndex + roundRobinChannelOffsetIndex;
+        if (index >= rowsLength) index -= rowsLength;
+        return index;
+    }
+
+    private updateForward() {
+        this.isUpdating = true;
+        this.updateHeadersForward();
+        this.updateRowsForward();
+        this.isUpdating = false;
+    }
+
+    private updateHeadersForward() {
+        forEach(this.headers, (header, index) => {
+            this.updateHeader(header, index);
+        });
+    }
+
+    private updateRowsForward() {
+        if (this.isFastScrolling) {
+            this.updateRowsWhenFastScrolling();
+            return;
+        }
+        const { rowHeightPx } = this.props;
+        this.scroller.current!.scroll(this.channelOffsetIndex * rowHeightPx);
+        forEach(this.rows, (row, index) => {
+            this.updateRow(row, index);
+        });
+    }
+
+    private updateBackward() {
+        this.isUpdating = true;
+        this.updateHeadersBackward();
+        this.updateRowsBackward();
+        this.isUpdating = false;
+    }
+
+    private updateHeadersBackward() {
+        for (let index = this.headers.length - 1; index >= 0; index -= 1) {
+            this.updateHeader(this.headers[index], index);
+        }
+    }
+
+    private updateRowsBackward() {
+        if (this.isFastScrolling) {
+            this.updateRowsWhenFastScrolling();
+            return;
+        }
+        const { rowHeightPx } = this.props;
+        this.scroller.current!.scroll(this.channelOffsetIndex * rowHeightPx);
+        const maxIndex = this.rows.length - 1;
+        for (let index = maxIndex; index >= 0; index -= 1) {
+            this.updateRow(this.rows[index], index);
+        }
+    }
+
+    private updateRowsWhenFastScrolling() {
+        const { dataManagers } = this.props;
+        for (let i = 0; i < this.rows.length; i++) {
+            const yIndex = this.indexToYIndex(i);
+            const row = this.fastScrollingRowsOrder[yIndex].current!;
+            const channelIndex = yIndex + this.channelOffsetIndex;
+            const dataManager = dataManagers[channelIndex];
+            if (!dataManager) {
+                row.hide();
+            } else {
+                row.show();
+            }
+        }
+    }
+
+    private updateHeader(header: Reference<T>, index: number) {
+        const { dataManagers } = this.props;
+        const data = dataManagers[index + this.channelOffsetIndex];
+        if (data) {
+            header.current!.show();
+            header.current!.updateData(data.getChannel());
+        } else {
+            header.current!.hide();
+        }
+    }
+
+    private updateRow(
+        rowRef: Reference<IRow<U>>,
+        index: number,
+    ) {
+        const row = rowRef.current!;
+        const { dataManagers, rowHeightPx } = this.props;
+        const yIndex = this.indexToYIndex(index);
+        const channelIndex = yIndex + this.channelOffsetIndex;
+        const dataManager = dataManagers[channelIndex];
+        row.setOffset((yIndex + this.channelOffsetIndex) * rowHeightPx);
+        if (dataManager) {
+            if (!row.hasDataManager(dataManager)) {
+                if (index === 0) {
+                    dataManager.removeOnDataUpdated();
+                }
+                row.updateData(dataManagers[channelIndex]);
+            }
+            row.show();
+        } else {
+            row.hide();
+        }
+    }
+
+    render() {
+        const {
+            timelineWidthMs, timestamp, time, scrollStepMs,
+            pixelInMs, timelineWidthPx, smallestAllowedCellPx,
+            programTextModeResolver, onItemPress, onMouseEnter, renderProgram, renderChannelHeader,
+        } = this.props;
+        const visibleData = this.getVisibleChannels();
+        return (
+            <>
+                <div className="epg-headers">
+                    {map(this.headers, (ref, index) => (
+                        renderChannelHeader(visibleData[index].getChannel(), ref)
+                    ))}
+                </div>
+                <Scroller ref={this.scroller} className="epg-rows">
+                    {map(this.rows, (ref, index) => (
+                        <Row<U>
+                            ref={ref as Reference<Row<U>>}
+                            data={visibleData[index]}
+                            timelineWidthMs={timelineWidthMs}
+                            timelineWidthPx={timelineWidthPx}
+                            timestamp={timestamp}
+                            time={time}
+                            scrollStepMs={scrollStepMs}
+                            pixelInMs={pixelInMs}
+                            programTextModeResolver={programTextModeResolver}
+                            onItemPress={onItemPress}
+                            onFocusChange={this.onFocusChange}
+                            onMouseEnter={onMouseEnter}
+                            renderProgram={renderProgram}
+                            smallestAllowedCellPx={smallestAllowedCellPx}
+                        />
+                    ))}
+                </Scroller>
+            </>
+        );
+    }
+}