@24i/bigscreen-sdk 0.9.9-alpha.2147

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

@@ -0,0 +1,500 @@
+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() {
+        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
+        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, timelineWidthPx, timestamp, time, scrollStepMs, pixelInMs,
+            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}
+                        />
+                    ))}
+                </Scroller>
+            </>
+        );
+    }
+}

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

@@ -0,0 +1,88 @@
+import { Component, Reference, createRef } from '@24i/bigscreen-sdk/jsx';
+import { forEach, map } from '@24i/bigscreen-sdk/perf-utils/array';
+import {
+    TimelineProps as Props,
+    Timeline as ITimeline,
+    TimelineSection as ITimelineSection,
+} from '../interface';
+
+export class Timeline<
+    T extends ITimelineSection,
+> extends Component<Props<T>> implements ITimeline<T> {
+    private readonly sections: Reference<T>[] = [];
+
+    private sectionsCount = NaN;
+
+    private sectionWidthPx = NaN;
+
+    private centerSectionIndex = NaN;
+
+    private firstSectionOffset = NaN;
+
+    private centerTimestamp: number;
+
+    constructor(props: Props<T>) {
+        super(props);
+        const { timestamp } = this.props;
+        this.centerTimestamp = timestamp;
+        this.calculateAndPrepareSections();
+    }
+
+    private getSectionsCount() {
+        const { pixelInMs, timelineWidthPx, channelHeaderWidthPx, sectionWidthMs } = this.props;
+        const widthPx = timelineWidthPx + channelHeaderWidthPx;
+        this.sectionWidthPx = Math.round(sectionWidthMs / pixelInMs);
+        // + 1 for both ends partially visible
+        this.sectionsCount = Math.ceil(widthPx / this.sectionWidthPx) + 1;
+    }
+
+    private getCenterSectionIndex() {
+        const { channelHeaderWidthPx, timelineWidthPx } = this.props;
+        const distanceToTimelineCenterPx = channelHeaderWidthPx + timelineWidthPx / 2;
+        const distanceToStartOfCenterSection = distanceToTimelineCenterPx - this.sectionWidthPx / 2;
+        const sectionsBeforeCenter = Math.ceil(
+            distanceToStartOfCenterSection / this.sectionWidthPx,
+        );
+        this.centerSectionIndex = sectionsBeforeCenter;
+        this.firstSectionOffset = -(
+            sectionsBeforeCenter * this.sectionWidthPx - distanceToStartOfCenterSection
+        );
+    }
+
+    private getSectionTimestampByIndex(index: number) {
+        const { sectionWidthMs } = this.props;
+        return this.centerTimestamp - (
+            (this.centerSectionIndex - index) * sectionWidthMs
+        );
+    }
+
+    scrollToTimestamp(centerTimestamp: number) {
+        if (this.centerTimestamp === centerTimestamp) return;
+        this.centerTimestamp = centerTimestamp;
+        forEach(this.sections, (section, index) => {
+            const timestamp = this.getSectionTimestampByIndex(index);
+            section.current!.updateData(timestamp);
+        });
+    }
+
+    private calculateAndPrepareSections() {
+        this.getSectionsCount();
+        for (let i = this.sectionsCount; i > 0; i -= 1) {
+            this.sections.push(createRef());
+        }
+        this.getCenterSectionIndex();
+    }
+
+    render() {
+        const { renderTime } = this.props;
+        return (
+            <div className="epg-timeline">
+                {map(this.sections, (section, index) => {
+                    const offset = this.firstSectionOffset + index * this.sectionWidthPx;
+                    const timestamp = this.getSectionTimestampByIndex(index);
+                    return renderTime(timestamp, offset, this.sectionWidthPx, section);
+                })}
+            </div>
+        );
+    }
+}

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

@@ -0,0 +1 @@
+export { Epg } from './Epg';