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

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

@@ -0,0 +1,132 @@
+import { Component, Reference, createRef } from '@24i/bigscreen-sdk/jsx';
+import { Asset } from '@24i/smartapps-datalayer/models';
+import { CellsManager } from './CellsManager';
+import {
+    RowProps as Props,
+    Row as IRow,
+    CellsManager as ICellsManager,
+    Program,
+    DataRange,
+    DataManager,
+} from './interface';
+
+export class Row<
+    T extends Program,
+> extends Component<Props<T>> implements IRow<T> {
+    cells = createRef<ICellsManager<T>>();
+
+    /* eslint-disable react/destructuring-assignment */
+    timestamp = this.props.timestamp;
+
+    private data = this.props.data;
+    /* eslint-enable react/destructuring-assignment */
+
+    constructor(props: Props<T>) {
+        super(props);
+        this.data.fetchAroundTimestampIfNeeded(this.timestamp);
+        this.data.setOnDataUpdated(() => {
+            this.cells.current!.updateCellsData();
+        });
+    }
+
+    onFastScrollingStart() {
+        this.cells.current!.onFastScrollingStart();
+    }
+
+    onFastScrollingEnd() {
+        this.cells.current!.onFastScrollingEnd();
+        this.data.fetchAroundTimestampIfNeeded(this.timestamp);
+    }
+
+    private readonly onFocusChange = (data: Asset | undefined, component: T) => {
+        const { onFocusChange } = this.props;
+        onFocusChange?.(data, this.data.getChannel(), component);
+    };
+
+    private readonly onItemPress = (data: Asset, component: T) => {
+        const { onItemPress } = this.props;
+        onItemPress(data, this.data.getChannel(), component);
+    };
+
+    getChannelData() {
+        return this.data;
+    }
+
+    getNextProgramStart(timestamp: number) {
+        return this.data.getNextProgramStart(timestamp);
+    }
+
+    // eslint-disable-next-line react/destructuring-assignment
+    getPreviousProgramEnd(timestamp: number, scrollStepMs = this.props.scrollStepMs) {
+        return this.data.getPreviousProgramEnd(timestamp, scrollStepMs);
+    }
+
+    setActive() {
+        this.cells.current!.setActive();
+    }
+
+    setInactive() {
+        this.cells.current!.setInactive();
+    }
+
+    setOffset(yOffsetPx: number) {
+        this.cells.current!.setOffset(yOffsetPx);
+    }
+
+    private readonly getDataFromRange = (range: DataRange) => this.data.getDataFromRange(range);
+
+    hasDataManager(dataManager: DataManager) {
+        return this.data === dataManager;
+    }
+
+    focus(timestamp: number, options?: FocusOptions) {
+        this.cells.current!.focus(timestamp, options);
+    }
+
+    scrollToTimestamp(timestamp: number) {
+        this.timestamp = timestamp;
+        this.data.fetchAroundTimestampIfNeeded(this.timestamp);
+        this.cells.current!.scrollToTimestamp(timestamp);
+    }
+
+    show() {
+        this.cells.current!.show();
+    }
+
+    hide() {
+        this.cells.current!.hide();
+    }
+
+    updateData(data: DataManager) {
+        if (this.data === data) return;
+        this.data = data;
+        this.data.fetchAroundTimestampIfNeeded(this.timestamp);
+        this.data.setOnDataUpdated(() => {
+            this.cells.current!.updateCellsData();
+        });
+        this.cells.current!.updateCellsData();
+    }
+
+    render() {
+        const {
+            timelineWidthMs, timelineWidthPx, timestamp, time, pixelInMs,
+            programTextModeResolver, onMouseEnter, renderProgram,
+        } = this.props;
+        return (
+            <CellsManager<T>
+                ref={this.cells as Reference<CellsManager<T>>}
+                dataGetter={this.getDataFromRange}
+                timelineWidthMs={timelineWidthMs}
+                timelineWidthPx={timelineWidthPx}
+                timestamp={timestamp}
+                time={time}
+                pixelInMs={pixelInMs}
+                programTextModeResolver={programTextModeResolver}
+                onFocusChange={this.onFocusChange}
+                onItemPress={this.onItemPress}
+                onMouseEnter={onMouseEnter}
+                renderProgram={renderProgram}
+            />
+        );
+    }
+}

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

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

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

@@ -0,0 +1,58 @@
+import { MINUTE_IN_MS, SECOND_IN_MS } from '@24i/bigscreen-sdk/utils/timeConstants';
+import { EventsManager, IEvents } from '@24i/bigscreen-sdk/events-manager';
+import { createTimeout } from '@24i/bigscreen-sdk/utils/timers';
+import { Time, TimeEvents, TimeProvider } from './interface';
+
+export class TimeManager implements Time, IEvents<TimeEvents> {
+    private readonly eventsManager = new EventsManager<TimeEvents>();
+
+    addEventListener = this.eventsManager.addEventListener;
+
+    removeEventListener = this.eventsManager.removeEventListener;
+
+    triggerEvent = this.eventsManager.triggerEvent;
+
+    private readonly minuteUpdateTimeout = createTimeout();
+
+    private readonly secondUpdateTimeout = createTimeout();
+
+    constructor(
+        private readonly timeProvider: TimeProvider,
+    ) {}
+
+    initialize() {
+        this.planNextMinuteUpdate();
+        this.planNextSecondUpdate();
+    }
+
+    destroy() {
+        this.minuteUpdateTimeout.clear();
+        this.secondUpdateTimeout.clear();
+    }
+
+    getCurrentTime() {
+        return this.timeProvider();
+    }
+
+    private planNextMinuteUpdate() {
+        const currentTime = this.timeProvider();
+        const timeoutMs = MINUTE_IN_MS - currentTime % MINUTE_IN_MS;
+        this.minuteUpdateTimeout.set(this.onMinuteUpdate, timeoutMs);
+    }
+
+    private planNextSecondUpdate() {
+        const currentTime = this.timeProvider();
+        const timeoutMs = SECOND_IN_MS - currentTime % SECOND_IN_MS;
+        this.secondUpdateTimeout.set(this.onSecondUpdate, timeoutMs);
+    }
+
+    private readonly onMinuteUpdate = () => {
+        this.triggerEvent('onminute', this.timeProvider());
+        this.planNextMinuteUpdate();
+    };
+
+    private readonly onSecondUpdate = () => {
+        this.triggerEvent('onsecond', this.timeProvider());
+        this.planNextSecondUpdate();
+    };
+}

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

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

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

@@ -0,0 +1,47 @@
+import { Component, createRef, setText } from '@24i/bigscreen-sdk/jsx';
+import { l10n } from '@24i/bigscreen-sdk/l10n';
+import { offsetPosition } from '@24i/bigscreen-sdk/utils';
+import { TimelineSectionProps as Props, TimelineSection as ITimelineSection } from './interface';
+import { getXOffsetStyleObject } from './utils';
+
+export class TimelineSection extends Component<Props> implements ITimelineSection {
+    div = createRef<HTMLDivElement>();
+
+    time = createRef<HTMLDivElement>();
+
+    // eslint-disable-next-line react/destructuring-assignment
+    timestamp = this.props.timestamp;
+
+    setOffset(x: number) {
+        offsetPosition(this.div, { x });
+    }
+
+    updateData(timestamp: number) {
+        if (this.timestamp === timestamp) return;
+        this.timestamp = timestamp;
+        setText(this.time, this.formatCurrentTimestamp());
+    }
+
+    private formatCurrentTimestamp() {
+        return l10n.date(this.timestamp).toLocaleTimeString({ hour: 'numeric', minute: '2-digit' });
+    }
+
+    render() {
+        const { xOffsetPx, widthPx } = this.props;
+        return (
+            <div
+                ref={this.div}
+                className="epg-timeline-section"
+                style={{
+                    width: `${widthPx}px`,
+                    ...getXOffsetStyleObject(xOffsetPx),
+                }}
+            >
+                <div className="epg-timeline-marker" />
+                <div ref={this.time} className="epg-timeline-time">
+                    {this.formatCurrentTimestamp()}
+                </div>
+            </div>
+        );
+    }
+}

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

@@ -0,0 +1,295 @@
+import { Component, Reference, createRef } from '@24i/bigscreen-sdk/jsx';
+import { find, forEach, map } from '@24i/bigscreen-sdk/perf-utils/array';
+import { offsetPosition } from '@24i/bigscreen-sdk/utils/offsetPosition';
+import { getDisplayToggler } from '@24i/bigscreen-sdk/utils/displayToggler';
+import { addClass } from '@24i/bigscreen-sdk/utils/addClass';
+import { removeClass } from '@24i/bigscreen-sdk/utils/removeClass';
+import { runAsync } from '@24i/bigscreen-sdk/utils/timers';
+import { Asset } from '@24i/smartapps-datalayer/models';
+import { isOverFullWidth } from '../utils';
+import { Cell } from '../Cell';
+import {
+    CellsManagerProps as Props,
+    CellsManager as ICellsManager,
+    Cell as ICell,
+    Program,
+    DataRange,
+} from '../interface';
+
+const ACTIVE_CLASS = 'active';
+
+export class CellsManager<
+    T extends Program,
+> extends Component<Props<T>> implements ICellsManager<T> {
+    private readonly div = createRef<HTMLDivElement>();
+
+    private readonly startLoadingCell = createRef<ICell<T>>();
+
+    private readonly cells: Reference<ICell<T>>[] = [];
+
+    private readonly endLoadingCell = createRef<ICell<T>>();
+
+    // eslint-disable-next-line react/destructuring-assignment
+    timestamp = this.props.timestamp;
+
+    lastFocusTimestamp = this.timestamp;
+
+    private readonly displayToggler = getDisplayToggler(this.div, false);
+
+    private isActive = false;
+
+    private isFastScrolling = false;
+
+    onFastScrollingStart() {
+        this.isFastScrolling = true;
+        this.updateCellsData();
+    }
+
+    onFastScrollingEnd() {
+        this.isFastScrolling = false;
+        this.updateCellsData();
+    }
+
+    /**
+     * Note on changing classes in async for following setActive and setInactive methods:
+     * - running in sync enforces lengthy blocking reflow on focus change to a new cell
+     * - running in async (after focus) does not cause reflow
+     * - - unless .active class adds something that will cause the reflow
+     */
+
+    setActive() {
+        if (this.isActive) return;
+        this.isActive = true;
+        runAsync(() => addClass(this.div, ACTIVE_CLASS));
+    }
+
+    setInactive() {
+        if (!this.isActive) return;
+        this.isActive = false;
+        runAsync(() => removeClass(this.div, ACTIVE_CLASS));
+    }
+
+    setOffset(yOffsetPx: number) {
+        offsetPosition(this.div, { y: yOffsetPx });
+    }
+
+    private getLeftEdge() {
+        const { timelineWidthMs } = this.props;
+        return this.timestamp - timelineWidthMs / 2;
+    }
+
+    private getRightEdge() {
+        const { timelineWidthMs } = this.props;
+        return this.timestamp + timelineWidthMs / 2;
+    }
+
+    private getRange() {
+        return [this.getLeftEdge(), this.getRightEdge()] as DataRange;
+    }
+
+    private getCellAtTimestamp(timestamp: number) {
+        const { dataGetter } = this.props;
+        const data = this.isFastScrolling ? [] : dataGetter(this.getRange());
+        if (data.length === 0) return this.startLoadingCell.current!;
+        if (timestamp < data[0].program!.startTime) {
+            return this.startLoadingCell.current!;
+        }
+        if (timestamp >= data[data.length - 1].program!.endTime) {
+            return this.endLoadingCell.current!.isVisible()
+                ? this.endLoadingCell.current!
+                : this.startLoadingCell.current!;
+        }
+        const cellAtTimestamp = find(this.cells, (cell) => {
+            if (!cell.current || !cell.current.item) return false;
+            const { current: { item: { program } } } = cell;
+            const { startTime, endTime } = program!;
+            return timestamp >= startTime && timestamp < endTime;
+        })?.current;
+        return cellAtTimestamp ?? this.div.current!;
+    }
+
+    private getMsWidthInPxWidth(widthMs: number) {
+        const { pixelInMs } = this.props;
+        return Math.round(widthMs / pixelInMs);
+    }
+
+    private getCellWidth({ program }: Asset) {
+        const { startTime, endTime } = program!;
+        const { timelineWidthPx } = this.props;
+        if (isOverFullWidth(startTime, endTime, this.getRange())) {
+            return timelineWidthPx;
+        }
+        return this.getMsWidthInPxWidth(endTime - startTime);
+    }
+
+    private getCellOffset({ program }: Asset) {
+        const { startTime, endTime } = program!;
+        if (isOverFullWidth(startTime, endTime, this.getRange())) return 0;
+        const leftEdge = this.getLeftEdge();
+        return this.getMsWidthInPxWidth(startTime - leftEdge);
+    }
+
+    focus(timestamp: number = this.lastFocusTimestamp, options?: FocusOptions) {
+        this.lastFocusTimestamp = timestamp;
+        const cell = this.getCellAtTimestamp(timestamp);
+        cell.focus(options);
+    }
+
+    updateCellsData(
+        { shouldFocusItself }: { shouldFocusItself: boolean } = { shouldFocusItself: true },
+    ) {
+        const { dataGetter } = this.props;
+        const visibleData = this.isFastScrolling ? [] : dataGetter(this.getRange());
+        let maxIndex = -1;
+        // hasFocus needs to be tested before updating cells because if we hide cell with focus,
+        // the body gets focused instead thus failing to fullfill the condition after updates
+        const shouldFocus = shouldFocusItself && this.hasFocus();
+        this.updateStartLoadingCell(visibleData);
+        forEach(visibleData, (item, index) => {
+            const cell = this.cells[index] ?? this.addCell(item);
+            cell.current!.setWidth(this.getCellWidth(item));
+            cell.current!.setOffset(this.getCellOffset(item));
+            cell.current!.updateData(item);
+            cell.current!.show();
+            maxIndex = index;
+        });
+        const cellsLength = this.cells.length;
+        for (let i = maxIndex + 1; i < cellsLength; i += 1) {
+            this.cells[i].current!.hide();
+        }
+        this.updateEndLoadingCell(visibleData);
+        if (shouldFocus) this.focus();
+    }
+
+    scrollToTimestamp(timestamp: number) {
+        this.timestamp = timestamp;
+        this.updateCellsData({ shouldFocusItself: false }); // focus is done later by main epg
+    }
+
+    show() {
+        this.displayToggler.show();
+    }
+
+    hide() {
+        this.displayToggler.hide();
+    }
+
+    isVisible() {
+        return this.displayToggler.isVisible();
+    }
+
+    private addCell(item: Asset) {
+        const {
+            time, programTextModeResolver, onMouseEnter, onItemPress, onFocusChange, renderProgram,
+        } = this.props;
+        const cell = createRef<ICell<T>>();
+        this.mountBefore((
+            <Cell
+                ref={cell as Reference<Cell<T>>}
+                item={item}
+                widthPx={this.getCellWidth(item)}
+                xOffsetPx={this.getCellOffset(item)}
+                time={time}
+                programTextModeResolver={programTextModeResolver}
+                onItemPress={onItemPress}
+                onFocusChange={onFocusChange}
+                onMouseEnter={onMouseEnter}
+                renderProgram={renderProgram}
+            />
+        ), this.endLoadingCell.current!.div);
+        this.cells.push(cell);
+        return cell;
+    }
+
+    private updateStartLoadingCell(visibleData: Asset[]) {
+        const cell = this.startLoadingCell.current!;
+        const { timelineWidthPx } = this.props;
+        const leftEdge = this.getLeftEdge();
+        if (visibleData.length === 0) {
+            cell.setWidth(timelineWidthPx);
+            cell.setOffset(0);
+            cell.show();
+        } else if (visibleData[0].program!.startTime > leftEdge) {
+            cell.setWidth(this.getMsWidthInPxWidth(visibleData[0].program!.startTime - leftEdge));
+            cell.setOffset(0);
+            cell.show();
+        } else {
+            cell.hide();
+        }
+    }
+
+    private updateEndLoadingCell(visibleData: Asset[]) {
+        const cell = this.endLoadingCell.current!;
+        const rightEdge = this.getRightEdge();
+        const lastItem = visibleData[visibleData.length - 1];
+        if (lastItem && lastItem.program!.endTime < rightEdge) {
+            const leftEdge = this.getLeftEdge();
+            cell.setWidth(this.getMsWidthInPxWidth(rightEdge - lastItem.program!.endTime));
+            cell.setOffset(this.getMsWidthInPxWidth(lastItem.program!.endTime - leftEdge));
+            cell.show();
+        } else {
+            cell.hide();
+        }
+    }
+
+    private hasFocus() {
+        return (
+            document.activeElement?.parentElement === this.div.current!
+            || document.activeElement === this.div.current!
+        );
+    }
+
+    render() {
+        const {
+            timelineWidthPx, time, dataGetter, programTextModeResolver,
+            onMouseEnter, onItemPress, onFocusChange, renderProgram,
+        } = this.props;
+        const visibleData = dataGetter(this.getRange());
+        return (
+            <div ref={this.div} className="epg-row" tabIndex={0}>
+                <Cell
+                    ref={this.startLoadingCell as Reference<Cell<T>>}
+                    widthPx={timelineWidthPx}
+                    xOffsetPx={0}
+                    time={time}
+                    programTextModeResolver={programTextModeResolver}
+                    onItemPress={onItemPress}
+                    onFocusChange={onFocusChange}
+                    onMouseEnter={onMouseEnter}
+                    renderProgram={renderProgram}
+                    isLoading
+                />
+                {map(visibleData, (item) => {
+                    const ref = createRef<ICell<T>>();
+                    this.cells.push(ref);
+                    return (
+                        <Cell
+                            ref={ref as Reference<Cell<T>>}
+                            item={item}
+                            widthPx={this.getCellWidth(item)}
+                            xOffsetPx={this.getCellOffset(item)}
+                            time={time}
+                            programTextModeResolver={programTextModeResolver}
+                            onItemPress={onItemPress}
+                            onFocusChange={onFocusChange}
+                            onMouseEnter={onMouseEnter}
+                            renderProgram={renderProgram}
+                        />
+                    );
+                })}
+                <Cell
+                    ref={this.endLoadingCell as Reference<Cell<T>>}
+                    widthPx={0}
+                    xOffsetPx={timelineWidthPx}
+                    time={time}
+                    programTextModeResolver={programTextModeResolver}
+                    onItemPress={onItemPress}
+                    onFocusChange={onFocusChange}
+                    onMouseEnter={onMouseEnter}
+                    renderProgram={renderProgram}
+                    isLoading
+                />
+            </div>
+        );
+    }
+}