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

package/packages/epg/src/v2/Epg.tsx

@@ -1,462 +1,462 @@
-import { Component, Reference, createRef, DeclareProps } from '@24i/bigscreen-sdk/jsx';
-import { HALF_HOUR_IN_MS, MINUTE_IN_MS } from '@24i/bigscreen-sdk/utils/timeConstants';
-import { Asset } from '@24i/smartapps-datalayer/models';
-import { forEach, map } from '@24i/bigscreen-sdk/perf-utils/array';
-import { runAsync } from '@24i/bigscreen-sdk/utils/timers';
-import { Day } from './Day';
-import { DatePicker } from './DatePicker';
-import { Timeline } from './Timeline';
-import { TimeManager } from './TimeManager';
-import { RowsManager } from './RowsManager';
-import { NowLine } from './NowLine';
-import { Header } from './Header';
-import { Program } from './Program';
-import { TimelineSection } from './TimelineSection';
-import { EpgMouseNavigation } from './MouseNavigation';
-import { DataManager } from './DataManager';
-import { InputEvents } from './InputEvents';
-import { IdleController } from './IdleController';
-import { shouldRenderDatePicker, clamp } from './utils';
-import {
-    Props,
-    Epg as IEpg,
-    InternalEpg,
-    Header as IHeader,
-    Program as IProgram,
-    Day as IDay,
-    DatePicker as IDatePicker,
-    Timeline as ITimeline,
-    RowsManager as IRowsManager,
-    NowLine as INowLine,
-    TimelineSection as ITimelineSection,
-    EpgMouseNavigation as IEpgMouseNavigation,
-    EpgFocus,
-    Time,
-    CellProps,
-    DataManager as IDataManager,
-    Plugin as IPlugin,
-    ProgramTextMode,
-} from './interface';
-import { ELLIPSIS_ONLY_CELL_WIDTH, EMPTY_CELL_WIDTH } from './sizes';
-
-const DEFAULT_TIMELINE_WIDTH_IN_MIN = 90;
-
-export class Epg<
-    T extends IHeader = IHeader,
-    U extends IProgram = IProgram,
-    V extends IDay = IDay,
-    W extends ITimelineSection = ITimelineSection,
-> extends Component<Props<T, U, V, W>>
-    implements IEpg<T, U, V, W>, InternalEpg<T, U, V, W> {
-    rows = createRef<IRowsManager<T, U>>();
-
-    private readonly nowLineComponent = createRef<INowLine>();
-
-    private readonly dayComponent = createRef<V>();
-
-    private readonly datePickerComponent = createRef<IDatePicker>();
-
-    private readonly timelineComponent = createRef<ITimeline<W>>();
-
-    private readonly mouseNavigation = createRef<IEpgMouseNavigation>();
-
-    private readonly plugins: Reference<IPlugin<U> | undefined>[] = [];
-
-    private readonly dataManagers: IDataManager[];
-
-    time: Time;
-
-    private pixelInMs = NaN;
-
-    timestamp = NaN;
-
-    focusTimestamp: number;
-
-    focused: EpgFocus = 'epg';
-
-    private readonly idleController: IdleController;
-
-    private readonly inputEvents: InputEvents;
-
-    static defaultProps = {
-        timelineWidthMs: DEFAULT_TIMELINE_WIDTH_IN_MIN * MINUTE_IN_MS,
-        timeProvider: Date.now,
-        scrollStepMs: HALF_HOUR_IN_MS,
-        timelineSectionWidthMs: HALF_HOUR_IN_MS,
-        smallestAllowedCellPx: 0,
-        limitFromMs: -Infinity,
-        limitToMs: Infinity,
-        initialChannelIndex: 0,
-        programTextModeResolver: (widthPx: number) => {
-            if (widthPx <= EMPTY_CELL_WIDTH) return 'empty';
-            if (widthPx <= ELLIPSIS_ONLY_CELL_WIDTH) return 'ellipsis_only';
-            return 'full';
-        },
-        renderDay: (timestamp: number, ref: Reference<Day>) => (
-            <Day ref={ref} timestamp={timestamp} />
-        ),
-        renderTime: (
-            timestamp: number, xOffsetPx: number, widthPx: number, ref: Reference<TimelineSection>,
-        ) => (
-            <TimelineSection
-                ref={ref}
-                timestamp={timestamp}
-                xOffsetPx={xOffsetPx}
-                widthPx={widthPx}
-            />
-        ),
-        renderChannelHeader: (data: Asset, ref: Reference<Header>) => (
-            <Header ref={ref} data={data} />
-        ),
-        renderProgram: (
-            isLoading: boolean,
-            data: CellProps<Program>['item'],
-            ref: Reference<Program>,
-            widthPx: number,
-            xOffsetPx: number,
-            textMode: ProgramTextMode,
-        ) => (
-            <Program
-                ref={ref}
-                data={data}
-                isLoading={isLoading}
-                widthPx={widthPx}
-                xOffsetPx={xOffsetPx}
-                textMode={textMode}
-            />
-        ),
-    };
-
-    declare props: DeclareProps<Props<T, U, V, W>, typeof Epg.defaultProps>;
-
-    constructor(props: Props<T, U, V, W>) {
-        super(props);
-        const {
-            initialTimestamp, timeProvider, scrollStepMs, idleTimerMs,
-            channelData, timelineWidthMs, fetchPrograms,
-        } = this.props;
-
-        this.calculateSizes();
-
-        this.time = new TimeManager(timeProvider);
-        this.setCurrentTime(initialTimestamp ?? this.time.getCurrentTime());
-        this.focusTimestamp = typeof initialTimestamp === 'number'
-            ? this.timestamp // set to the same as timestamp if we start at certain point in time
-            : this.time.getCurrentTime(); // focus live programs first if we start at current time
-
-        this.dataManagers = map(channelData, (channel) => (
-            new DataManager(channel, timelineWidthMs, fetchPrograms, this)
-        ));
-        this.idleController = new IdleController(idleTimerMs ?? scrollStepMs, this.onIdle);
-        this.inputEvents = new InputEvents(this, this.idleController.onKeyDown);
-    }
-
-    componentDidMount() {
-        this.time.initialize();
-        this.setHorizontalMouseArrows();
-        this.setVerticalMouseArrows();
-    }
-
-    componentWillUnmount() {
-        this.time.destroy();
-        this.idleController.clear();
-    }
-
-    private readonly onDatePickerChange = (timestamp: number) => {
-        this.setCurrentTime(timestamp);
-        this.focusTimestamp = timestamp;
-        runAsync(() => this.setFocusToEpg()); // let the picker modal close first
-    };
-
-    private readonly onFocusChange = (data: Asset | undefined, channel: Asset, component: U) => {
-        const { onFocusChange } = this.props;
-        if (this.focused === 'datepicker') this.focused = 'epg';
-        forEach(this.plugins, (plugin) => {
-            plugin.current?.onFocusChange?.(data, channel, component);
-        });
-        onFocusChange?.(data, channel, component);
-    };
-
-    private readonly onItemPress = (data: Asset, channel: Asset, component: U) => {
-        const { onItemPress } = this.props;
-        forEach(this.plugins, (plugin) => {
-            plugin.current?.onItemPress?.(data, channel, component);
-        });
-        onItemPress(data, channel, component);
-    };
-
-    private readonly onScrolledToTimestamp = (timestamp: number) => {
-        const { onScrolledToTimestamp } = this.props;
-        forEach(this.plugins, (plugin) => {
-            plugin.current?.onScrolledToTimestamp?.(timestamp);
-        });
-        onScrolledToTimestamp?.(timestamp);
-    };
-
-    private readonly onMouseEnter = (data: Asset | undefined) => {
-        if (!data) return;
-        const { scrollStepMs } = this.props;
-        const { startTime, endTime } = data.program!;
-        if (endTime <= this.focusTimestamp) {
-            const idealTimestamp = (
-                Math.floor((endTime - scrollStepMs) / scrollStepMs) * scrollStepMs
-            );
-            if (idealTimestamp >= startTime) {
-                this.setFocusTimestamp(idealTimestamp, false);
-            } else {
-                this.setFocusTimestamp((startTime + endTime) / 2, false);
-            }
-            this.rows.current!.setFocusTimestamp(this.focusTimestamp);
-        } else if (startTime > this.focusTimestamp) {
-            const idealTimestamp = Math.ceil(startTime / scrollStepMs) * scrollStepMs;
-            if (idealTimestamp < endTime) {
-                this.setFocusTimestamp(idealTimestamp, false);
-            } else {
-                this.setFocusTimestamp((startTime + endTime) / 2, false);
-            }
-            this.rows.current!.setFocusTimestamp(this.focusTimestamp);
-        }
-    };
-
-    private readonly onIdle = () => {
-        const now = this.time.getCurrentTime();
-        this.setCurrentTime(now);
-        this.setFocusTimestamp(now);
-        this.setFocusToEpg();
-    };
-
-    setFocusTimestamp(timestamp: number, allowScroll = true) {
-        const { timelineWidthMs, scrollStepMs, limitFromMs, limitToMs } = this.props;
-        this.focusTimestamp = timestamp;
-        if (!allowScroll) return;
-        const leftEdge = Math.max(this.timestamp - timelineWidthMs / 2, limitFromMs);
-        const rightEdge = Math.min(this.timestamp + timelineWidthMs / 2, limitToMs);
-        if (this.focusTimestamp < leftEdge + scrollStepMs) {
-            this.setCurrentTime(this.timestamp - scrollStepMs);
-        } else if (this.focusTimestamp > rightEdge - scrollStepMs) {
-            this.setCurrentTime(this.timestamp + scrollStepMs);
-        }
-    }
-
-    setCurrentTime(timestamp: number) {
-        const { limitFromMs, limitToMs, scrollStepMs, timelineWidthMs } = this.props;
-        if (timestamp < limitFromMs) throw new Error('Cannot set EPG time to lower than limit.');
-        if (timestamp > limitToMs) throw new Error('Cannot set EPG time to higher than limit.');
-        this.timestamp = clamp(
-            Math.floor(timestamp / scrollStepMs) * scrollStepMs,
-            limitFromMs + timelineWidthMs / 2,
-            limitToMs - timelineWidthMs / 2,
-        );
-        if (this.isMounted) {
-            this.scrollRowsToCurrentTime();
-            this.onScrolledToTimestamp(this.timestamp);
-        }
-    }
-
-    setFocusToDatePicker() {
-        this.focused = 'datepicker';
-        this.datePickerComponent.current!.focus();
-    }
-
-    setFocusToEpg() {
-        this.focused = 'epg';
-        this.rows.current!.focus(this.focusTimestamp);
-    }
-
-    setHorizontalMouseArrows() {
-        const { limitFromMs, limitToMs } = this.props;
-        if (!this.mouseNavigation.current) return;
-        if (this.focusTimestamp > limitFromMs) {
-            this.mouseNavigation.current.enableDirection('left');
-        } else {
-            this.mouseNavigation.current.disableDirection('left');
-        }
-        if (this.focusTimestamp < limitToMs) {
-            this.mouseNavigation.current.enableDirection('right');
-        } else {
-            this.mouseNavigation.current.disableDirection('right');
-        }
-    }
-
-    setVerticalMouseArrows() {
-        if (!this.mouseNavigation.current) return;
-        if (this.rows.current!.canGoDown()) {
-            this.mouseNavigation.current.enableDirection('down');
-        } else {
-            this.mouseNavigation.current.disableDirection('down');
-        }
-        if (this.rows.current!.canGoUp()) {
-            this.mouseNavigation.current.enableDirection('up');
-        } else {
-            this.mouseNavigation.current.disableDirection('up');
-        }
-    }
-
-    private getPluginRef() {
-        const ref = createRef<IPlugin<U> | undefined>();
-        this.plugins.push(ref);
-        return ref;
-    }
-
-    isFocusInRows = () => this.focused === 'epg';
-
-    focus(options?: FocusOptions) {
-        if (this.focused === 'datepicker') {
-            this.datePickerComponent.current!.focus(options);
-        } else {
-            this.rows.current!.focus(this.focusTimestamp, options);
-        }
-    }
-
-    scrollToTimestamp(timestamp: number) {
-        this.setCurrentTime(timestamp);
-        this.setHorizontalMouseArrows();
-    }
-
-    scrollToChannelIndex(index: number) {
-        this.rows.current!.setCurrentChannelIndex(index);
-        this.setVerticalMouseArrows();
-    }
-
-    startFastVerticalScrolling() {
-        forEach(this.plugins, (plugin) => {
-            plugin.current?.onFastVerticalScrollingStart?.();
-            plugin.current?.onFastScrollingStart?.();
-        });
-        this.rows.current!.onFastScrollingStart();
-    }
-
-    startFastHorizontalScrolling() {
-        forEach(this.plugins, (plugin) => {
-            plugin.current?.onFastHorizontalScrollingStart?.();
-            plugin.current?.onFastScrollingStart?.();
-        });
-        this.rows.current!.onFastScrollingStart();
-    }
-
-    stopFastVerticalScrolling() {
-        forEach(this.plugins, (plugin) => {
-            plugin.current?.onFastVerticalScrollingEnd?.();
-            plugin.current?.onFastScrollingEnd?.();
-        });
-        this.rows.current!.onFastScrollingEnd();
-    }
-
-    stopFastHorizontalScrolling() {
-        forEach(this.plugins, (plugin) => {
-            plugin.current?.onFastHorizontalScrollingEnd?.();
-            plugin.current?.onFastScrollingEnd?.();
-        });
-        this.rows.current!.onFastScrollingEnd();
-    }
-
-    private calculateSizes() {
-        const { timelineWidthPx, timelineWidthMs } = this.props;
-        this.pixelInMs = timelineWidthMs / timelineWidthPx;
-    }
-
-    private scrollRowsToCurrentTime() {
-        this.rows.current!.scrollRowsToTimestamp(this.timestamp);
-        this.nowLineComponent.current!.scrollToTimestamp(this.timestamp);
-        this.timelineComponent.current!.scrollToTimestamp(this.timestamp);
-        this.dayComponent.current?.updateData(this.timestamp);
-        this.datePickerComponent.current?.updateData(this.timestamp);
-    }
-
-    isDatePickerRendered() {
-        return !!this.datePickerComponent.current;
-    }
-
-    isFastScrolling(): boolean {
-        return this.inputEvents.isFastScrolling();
-    }
-
-    isHorizontallyFastScrolling(): boolean {
-        return this.inputEvents.isHorizontallyFastScrolling();
-    }
-
-    isVerticallyFastScrolling(): boolean {
-        return this.inputEvents.isVerticallyFastScrolling();
-    }
-
-    render() {
-        const {
-            datePickerProps, timelineWidthPx, channelHeaderWidthPx, scrollStepMs, rowHeightPx,
-            timelineSectionWidthMs, timelineWidthMs, initialChannelIndex, plugins,
-            navigatableRows, additionalRows, programTextModeResolver, smallestAllowedCellPx,
-            renderDay, renderTime, renderProgram, renderChannelHeader, renderNowLineHeader,
-        } = this.props;
-        return (
-            <div
-                className="epg"
-                onKeyDown={this.inputEvents.onKeyDown}
-                onKeyUp={this.inputEvents.onKeyUp}
-                onWheel={this.inputEvents.onWheel}
-            >
-                <NowLine
-                    ref={this.nowLineComponent as Reference<NowLine>}
-                    timelineWidthPx={timelineWidthPx}
-                    timestamp={this.timestamp}
-                    time={this.time}
-                    channelHeaderWidthPx={channelHeaderWidthPx}
-                    pixelInMs={this.pixelInMs}
-                    renderNowLineHeader={renderNowLineHeader}
-                />
-                {
-                    shouldRenderDatePicker(datePickerProps)
-                        ? (
-                            <DatePicker
-                                ref={this.datePickerComponent as Reference<DatePicker>}
-                                {...datePickerProps}
-                                timestamp={this.timestamp}
-                                onValueChange={this.onDatePickerChange}
-                            />
-                        )
-                        : renderDay(this.timestamp, this.dayComponent)
-                }
-                <Timeline
-                    ref={this.timelineComponent as Reference<Timeline<W>>}
-                    timelineWidthPx={timelineWidthPx}
-                    channelHeaderWidthPx={channelHeaderWidthPx}
-                    pixelInMs={this.pixelInMs}
-                    timestamp={this.timestamp}
-                    sectionWidthMs={timelineSectionWidthMs}
-                    renderTime={renderTime}
-                />
-                <RowsManager<T, U>
-                    ref={this.rows as Reference<RowsManager<T, U>>}
-                    dataManagers={this.dataManagers}
-                    timelineWidthPx={timelineWidthPx}
-                    timelineWidthMs={timelineWidthMs}
-                    timestamp={this.timestamp}
-                    time={this.time}
-                    scrollStepMs={scrollStepMs}
-                    pixelInMs={this.pixelInMs}
-                    initialChannelIndex={initialChannelIndex}
-                    navigatableRows={navigatableRows}
-                    additionalRows={additionalRows}
-                    rowHeightPx={rowHeightPx}
-                    programTextModeResolver={programTextModeResolver}
-                    onFocusChange={this.onFocusChange}
-                    onItemPress={this.onItemPress}
-                    onMouseEnter={this.onMouseEnter}
-                    renderChannelHeader={renderChannelHeader}
-                    renderProgram={renderProgram}
-                    isFocusInRows={this.isFocusInRows}
-                    smallestAllowedCellPx={smallestAllowedCellPx}
-                />
-                <EpgMouseNavigation
-                    // @ts-ignore - needed to convert fallback (false) to interface
-                    ref={this.mouseNavigation}
-                    onUp={this.inputEvents.onMouseClickUp}
-                    onDown={this.inputEvents.onMouseClickDown}
-                    onLeft={this.inputEvents.onMouseClickLeft}
-                    onRight={this.inputEvents.onMouseClickRight}
-                />
-                {plugins && map(plugins, (Plugin) => (
-                    <Plugin ref={this.getPluginRef()} epg={this} />
-                ))}
-            </div>
-        );
-    }
-}
+import { Component, Reference, createRef, DeclareProps } from '@24i/bigscreen-sdk/jsx';
+import { HALF_HOUR_IN_MS, MINUTE_IN_MS } from '@24i/bigscreen-sdk/utils/timeConstants';
+import { Asset } from '@24i/smartapps-datalayer/models';
+import { forEach, map } from '@24i/bigscreen-sdk/perf-utils/array';
+import { runAsync } from '@24i/bigscreen-sdk/utils/timers';
+import { Day } from './Day';
+import { DatePicker } from './DatePicker';
+import { Timeline } from './Timeline';
+import { TimeManager } from './TimeManager';
+import { RowsManager } from './RowsManager';
+import { NowLine } from './NowLine';
+import { Header } from './Header';
+import { Program } from './Program';
+import { TimelineSection } from './TimelineSection';
+import { EpgMouseNavigation } from './MouseNavigation';
+import { DataManager } from './DataManager';
+import { InputEvents } from './InputEvents';
+import { IdleController } from './IdleController';
+import { shouldRenderDatePicker, clamp } from './utils';
+import {
+    Props,
+    Epg as IEpg,
+    InternalEpg,
+    Header as IHeader,
+    Program as IProgram,
+    Day as IDay,
+    DatePicker as IDatePicker,
+    Timeline as ITimeline,
+    RowsManager as IRowsManager,
+    NowLine as INowLine,
+    TimelineSection as ITimelineSection,
+    EpgMouseNavigation as IEpgMouseNavigation,
+    EpgFocus,
+    Time,
+    CellProps,
+    DataManager as IDataManager,
+    Plugin as IPlugin,
+    ProgramTextMode,
+} from './interface';
+import { ELLIPSIS_ONLY_CELL_WIDTH, EMPTY_CELL_WIDTH } from './sizes';
+
+const DEFAULT_TIMELINE_WIDTH_IN_MIN = 90;
+
+export class Epg<
+    T extends IHeader = IHeader,
+    U extends IProgram = IProgram,
+    V extends IDay = IDay,
+    W extends ITimelineSection = ITimelineSection,
+> extends Component<Props<T, U, V, W>>
+    implements IEpg<T, U, V, W>, InternalEpg<T, U, V, W> {
+    rows = createRef<IRowsManager<T, U>>();
+
+    private readonly nowLineComponent = createRef<INowLine>();
+
+    private readonly dayComponent = createRef<V>();
+
+    private readonly datePickerComponent = createRef<IDatePicker>();
+
+    private readonly timelineComponent = createRef<ITimeline<W>>();
+
+    private readonly mouseNavigation = createRef<IEpgMouseNavigation>();
+
+    private readonly plugins: Reference<IPlugin<U> | undefined>[] = [];
+
+    private readonly dataManagers: IDataManager[];
+
+    time: Time;
+
+    private pixelInMs = NaN;
+
+    timestamp = NaN;
+
+    focusTimestamp: number;
+
+    focused: EpgFocus = 'epg';
+
+    private readonly idleController: IdleController;
+
+    private readonly inputEvents: InputEvents;
+
+    static defaultProps = {
+        timelineWidthMs: DEFAULT_TIMELINE_WIDTH_IN_MIN * MINUTE_IN_MS,
+        timeProvider: Date.now,
+        scrollStepMs: HALF_HOUR_IN_MS,
+        timelineSectionWidthMs: HALF_HOUR_IN_MS,
+        smallestAllowedCellPx: 0,
+        limitFromMs: -Infinity,
+        limitToMs: Infinity,
+        initialChannelIndex: 0,
+        programTextModeResolver: (widthPx: number) => {
+            if (widthPx <= EMPTY_CELL_WIDTH) return 'empty';
+            if (widthPx <= ELLIPSIS_ONLY_CELL_WIDTH) return 'ellipsis_only';
+            return 'full';
+        },
+        renderDay: (timestamp: number, ref: Reference<Day>) => (
+            <Day ref={ref} timestamp={timestamp} />
+        ),
+        renderTime: (
+            timestamp: number, xOffsetPx: number, widthPx: number, ref: Reference<TimelineSection>,
+        ) => (
+            <TimelineSection
+                ref={ref}
+                timestamp={timestamp}
+                xOffsetPx={xOffsetPx}
+                widthPx={widthPx}
+            />
+        ),
+        renderChannelHeader: (data: Asset, ref: Reference<Header>) => (
+            <Header ref={ref} data={data} />
+        ),
+        renderProgram: (
+            isLoading: boolean,
+            data: CellProps<Program>['item'],
+            ref: Reference<Program>,
+            widthPx: number,
+            xOffsetPx: number,
+            textMode: ProgramTextMode,
+        ) => (
+            <Program
+                ref={ref}
+                data={data}
+                isLoading={isLoading}
+                widthPx={widthPx}
+                xOffsetPx={xOffsetPx}
+                textMode={textMode}
+            />
+        ),
+    };
+
+    declare props: DeclareProps<Props<T, U, V, W>, typeof Epg.defaultProps>;
+
+    constructor(props: Props<T, U, V, W>) {
+        super(props);
+        const {
+            initialTimestamp, timeProvider, scrollStepMs, idleTimerMs,
+            channelData, timelineWidthMs, fetchPrograms,
+        } = this.props;
+
+        this.calculateSizes();
+
+        this.time = new TimeManager(timeProvider);
+        this.setCurrentTime(initialTimestamp ?? this.time.getCurrentTime());
+        this.focusTimestamp = typeof initialTimestamp === 'number'
+            ? this.timestamp // set to the same as timestamp if we start at certain point in time
+            : this.time.getCurrentTime(); // focus live programs first if we start at current time
+
+        this.dataManagers = map(channelData, (channel) => (
+            new DataManager(channel, timelineWidthMs, fetchPrograms, this)
+        ));
+        this.idleController = new IdleController(idleTimerMs ?? scrollStepMs, this.onIdle);
+        this.inputEvents = new InputEvents(this, this.idleController.onKeyDown);
+    }
+
+    componentDidMount() {
+        this.time.initialize();
+        this.setHorizontalMouseArrows();
+        this.setVerticalMouseArrows();
+    }
+
+    componentWillUnmount() {
+        this.time.destroy();
+        this.idleController.clear();
+    }
+
+    private readonly onDatePickerChange = (timestamp: number) => {
+        this.setCurrentTime(timestamp);
+        this.focusTimestamp = timestamp;
+        runAsync(() => this.setFocusToEpg()); // let the picker modal close first
+    };
+
+    private readonly onFocusChange = (data: Asset | undefined, channel: Asset, component: U) => {
+        const { onFocusChange } = this.props;
+        if (this.focused === 'datepicker') this.focused = 'epg';
+        forEach(this.plugins, (plugin) => {
+            plugin.current?.onFocusChange?.(data, channel, component);
+        });
+        onFocusChange?.(data, channel, component);
+    };
+
+    private readonly onItemPress = (data: Asset, channel: Asset, component: U) => {
+        const { onItemPress } = this.props;
+        forEach(this.plugins, (plugin) => {
+            plugin.current?.onItemPress?.(data, channel, component);
+        });
+        onItemPress(data, channel, component);
+    };
+
+    private readonly onScrolledToTimestamp = (timestamp: number) => {
+        const { onScrolledToTimestamp } = this.props;
+        forEach(this.plugins, (plugin) => {
+            plugin.current?.onScrolledToTimestamp?.(timestamp);
+        });
+        onScrolledToTimestamp?.(timestamp);
+    };
+
+    private readonly onMouseEnter = (data: Asset | undefined) => {
+        if (!data) return;
+        const { scrollStepMs } = this.props;
+        const { startTime, endTime } = data.program!;
+        if (endTime <= this.focusTimestamp) {
+            const idealTimestamp = (
+                Math.floor((endTime - scrollStepMs) / scrollStepMs) * scrollStepMs
+            );
+            if (idealTimestamp >= startTime) {
+                this.setFocusTimestamp(idealTimestamp, false);
+            } else {
+                this.setFocusTimestamp((startTime + endTime) / 2, false);
+            }
+            this.rows.current!.setFocusTimestamp(this.focusTimestamp);
+        } else if (startTime > this.focusTimestamp) {
+            const idealTimestamp = Math.ceil(startTime / scrollStepMs) * scrollStepMs;
+            if (idealTimestamp < endTime) {
+                this.setFocusTimestamp(idealTimestamp, false);
+            } else {
+                this.setFocusTimestamp((startTime + endTime) / 2, false);
+            }
+            this.rows.current!.setFocusTimestamp(this.focusTimestamp);
+        }
+    };
+
+    private readonly onIdle = () => {
+        const now = this.time.getCurrentTime();
+        this.setCurrentTime(now);
+        this.setFocusTimestamp(now);
+        this.setFocusToEpg();
+    };
+
+    setFocusTimestamp(timestamp: number, allowScroll = true) {
+        const { timelineWidthMs, scrollStepMs, limitFromMs, limitToMs } = this.props;
+        this.focusTimestamp = timestamp;
+        if (!allowScroll) return;
+        const leftEdge = Math.max(this.timestamp - timelineWidthMs / 2, limitFromMs);
+        const rightEdge = Math.min(this.timestamp + timelineWidthMs / 2, limitToMs);
+        if (this.focusTimestamp < leftEdge + scrollStepMs) {
+            this.setCurrentTime(this.timestamp - scrollStepMs);
+        } else if (this.focusTimestamp > rightEdge - scrollStepMs) {
+            this.setCurrentTime(this.timestamp + scrollStepMs);
+        }
+    }
+
+    setCurrentTime(timestamp: number) {
+        const { limitFromMs, limitToMs, scrollStepMs, timelineWidthMs } = this.props;
+        if (timestamp < limitFromMs) throw new Error('Cannot set EPG time to lower than limit.');
+        if (timestamp > limitToMs) throw new Error('Cannot set EPG time to higher than limit.');
+        this.timestamp = clamp(
+            Math.floor(timestamp / scrollStepMs) * scrollStepMs,
+            limitFromMs + timelineWidthMs / 2,
+            limitToMs - timelineWidthMs / 2,
+        );
+        if (this.isMounted) {
+            this.scrollRowsToCurrentTime();
+            this.onScrolledToTimestamp(this.timestamp);
+        }
+    }
+
+    setFocusToDatePicker() {
+        this.focused = 'datepicker';
+        this.datePickerComponent.current!.focus();
+    }
+
+    setFocusToEpg() {
+        this.focused = 'epg';
+        this.rows.current!.focus(this.focusTimestamp);
+    }
+
+    setHorizontalMouseArrows() {
+        const { limitFromMs, limitToMs } = this.props;
+        if (!this.mouseNavigation.current) return;
+        if (this.focusTimestamp > limitFromMs) {
+            this.mouseNavigation.current.enableDirection('left');
+        } else {
+            this.mouseNavigation.current.disableDirection('left');
+        }
+        if (this.focusTimestamp < limitToMs) {
+            this.mouseNavigation.current.enableDirection('right');
+        } else {
+            this.mouseNavigation.current.disableDirection('right');
+        }
+    }
+
+    setVerticalMouseArrows() {
+        if (!this.mouseNavigation.current) return;
+        if (this.rows.current!.canGoDown()) {
+            this.mouseNavigation.current.enableDirection('down');
+        } else {
+            this.mouseNavigation.current.disableDirection('down');
+        }
+        if (this.rows.current!.canGoUp()) {
+            this.mouseNavigation.current.enableDirection('up');
+        } else {
+            this.mouseNavigation.current.disableDirection('up');
+        }
+    }
+
+    private getPluginRef() {
+        const ref = createRef<IPlugin<U> | undefined>();
+        this.plugins.push(ref);
+        return ref;
+    }
+
+    isFocusInRows = () => this.focused === 'epg';
+
+    focus(options?: FocusOptions) {
+        if (this.focused === 'datepicker') {
+            this.datePickerComponent.current!.focus(options);
+        } else {
+            this.rows.current!.focus(this.focusTimestamp, options);
+        }
+    }
+
+    scrollToTimestamp(timestamp: number) {
+        this.setCurrentTime(timestamp);
+        this.setHorizontalMouseArrows();
+    }
+
+    scrollToChannelIndex(index: number) {
+        this.rows.current!.setCurrentChannelIndex(index);
+        this.setVerticalMouseArrows();
+    }
+
+    startFastVerticalScrolling() {
+        forEach(this.plugins, (plugin) => {
+            plugin.current?.onFastVerticalScrollingStart?.();
+            plugin.current?.onFastScrollingStart?.();
+        });
+        this.rows.current!.onFastScrollingStart();
+    }
+
+    startFastHorizontalScrolling() {
+        forEach(this.plugins, (plugin) => {
+            plugin.current?.onFastHorizontalScrollingStart?.();
+            plugin.current?.onFastScrollingStart?.();
+        });
+        this.rows.current!.onFastScrollingStart();
+    }
+
+    stopFastVerticalScrolling() {
+        forEach(this.plugins, (plugin) => {
+            plugin.current?.onFastVerticalScrollingEnd?.();
+            plugin.current?.onFastScrollingEnd?.();
+        });
+        this.rows.current!.onFastScrollingEnd();
+    }
+
+    stopFastHorizontalScrolling() {
+        forEach(this.plugins, (plugin) => {
+            plugin.current?.onFastHorizontalScrollingEnd?.();
+            plugin.current?.onFastScrollingEnd?.();
+        });
+        this.rows.current!.onFastScrollingEnd();
+    }
+
+    private calculateSizes() {
+        const { timelineWidthPx, timelineWidthMs } = this.props;
+        this.pixelInMs = timelineWidthMs / timelineWidthPx;
+    }
+
+    private scrollRowsToCurrentTime() {
+        this.rows.current!.scrollRowsToTimestamp(this.timestamp);
+        this.nowLineComponent.current!.scrollToTimestamp(this.timestamp);
+        this.timelineComponent.current!.scrollToTimestamp(this.timestamp);
+        this.dayComponent.current?.updateData(this.timestamp);
+        this.datePickerComponent.current?.updateData(this.timestamp);
+    }
+
+    isDatePickerRendered() {
+        return !!this.datePickerComponent.current;
+    }
+
+    isFastScrolling(): boolean {
+        return this.inputEvents.isFastScrolling();
+    }
+
+    isHorizontallyFastScrolling(): boolean {
+        return this.inputEvents.isHorizontallyFastScrolling();
+    }
+
+    isVerticallyFastScrolling(): boolean {
+        return this.inputEvents.isVerticallyFastScrolling();
+    }
+
+    render() {
+        const {
+            datePickerProps, timelineWidthPx, channelHeaderWidthPx, scrollStepMs, rowHeightPx,
+            timelineSectionWidthMs, timelineWidthMs, initialChannelIndex, plugins,
+            navigatableRows, additionalRows, programTextModeResolver, smallestAllowedCellPx,
+            renderDay, renderTime, renderProgram, renderChannelHeader, renderNowLineHeader,
+        } = this.props;
+        return (
+            <div
+                className="epg"
+                onKeyDown={this.inputEvents.onKeyDown}
+                onKeyUp={this.inputEvents.onKeyUp}
+                onWheel={this.inputEvents.onWheel}
+            >
+                <NowLine
+                    ref={this.nowLineComponent as Reference<NowLine>}
+                    timelineWidthPx={timelineWidthPx}
+                    timestamp={this.timestamp}
+                    time={this.time}
+                    channelHeaderWidthPx={channelHeaderWidthPx}
+                    pixelInMs={this.pixelInMs}
+                    renderNowLineHeader={renderNowLineHeader}
+                />
+                {
+                    shouldRenderDatePicker(datePickerProps)
+                        ? (
+                            <DatePicker
+                                ref={this.datePickerComponent as Reference<DatePicker>}
+                                {...datePickerProps}
+                                timestamp={this.timestamp}
+                                onValueChange={this.onDatePickerChange}
+                            />
+                        )
+                        : renderDay(this.timestamp, this.dayComponent)
+                }
+                <Timeline
+                    ref={this.timelineComponent as Reference<Timeline<W>>}
+                    timelineWidthPx={timelineWidthPx}
+                    channelHeaderWidthPx={channelHeaderWidthPx}
+                    pixelInMs={this.pixelInMs}
+                    timestamp={this.timestamp}
+                    sectionWidthMs={timelineSectionWidthMs}
+                    renderTime={renderTime}
+                />
+                <RowsManager<T, U>
+                    ref={this.rows as Reference<RowsManager<T, U>>}
+                    dataManagers={this.dataManagers}
+                    timelineWidthPx={timelineWidthPx}
+                    timelineWidthMs={timelineWidthMs}
+                    timestamp={this.timestamp}
+                    time={this.time}
+                    scrollStepMs={scrollStepMs}
+                    pixelInMs={this.pixelInMs}
+                    initialChannelIndex={initialChannelIndex}
+                    navigatableRows={navigatableRows}
+                    additionalRows={additionalRows}
+                    rowHeightPx={rowHeightPx}
+                    programTextModeResolver={programTextModeResolver}
+                    onFocusChange={this.onFocusChange}
+                    onItemPress={this.onItemPress}
+                    onMouseEnter={this.onMouseEnter}
+                    renderChannelHeader={renderChannelHeader}
+                    renderProgram={renderProgram}
+                    isFocusInRows={this.isFocusInRows}
+                    smallestAllowedCellPx={smallestAllowedCellPx}
+                />
+                <EpgMouseNavigation
+                    // @ts-ignore - needed to convert fallback (false) to interface
+                    ref={this.mouseNavigation}
+                    onUp={this.inputEvents.onMouseClickUp}
+                    onDown={this.inputEvents.onMouseClickDown}
+                    onLeft={this.inputEvents.onMouseClickLeft}
+                    onRight={this.inputEvents.onMouseClickRight}
+                />
+                {plugins && map(plugins, (Plugin) => (
+                    <Plugin ref={this.getPluginRef()} epg={this} />
+                ))}
+            </div>
+        );
+    }
+}