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

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

@@ -1,300 +1,300 @@
-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, smallestAllowedCellPx,
-            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}
-                smallestAllowedCellPx={smallestAllowedCellPx}
-            />
-        ), 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, smallestAllowedCellPx, 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}
-                    smallestAllowedCellPx={smallestAllowedCellPx}
-                    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}
-                            smallestAllowedCellPx={smallestAllowedCellPx}
-                        />
-                    );
-                })}
-                <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
-                    smallestAllowedCellPx={smallestAllowedCellPx}
-                />
-            </div>
-        );
-    }
-}
+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, smallestAllowedCellPx,
+            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}
+                smallestAllowedCellPx={smallestAllowedCellPx}
+            />
+        ), 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, smallestAllowedCellPx, 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}
+                    smallestAllowedCellPx={smallestAllowedCellPx}
+                    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}
+                            smallestAllowedCellPx={smallestAllowedCellPx}
+                        />
+                    );
+                })}
+                <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
+                    smallestAllowedCellPx={smallestAllowedCellPx}
+                />
+            </div>
+        );
+    }
+}