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

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

@@ -0,0 +1,208 @@
+import { Component, createRef } from '@24i/bigscreen-sdk/jsx';
+import { Interactable } from '@24i/bigscreen-sdk/interactable';
+import { getDisplayToggler } from '@24i/bigscreen-sdk/utils/displayToggler';
+import { offsetPosition } from '@24i/bigscreen-sdk/utils/offsetPosition';
+import { addClass } from '@24i/bigscreen-sdk/utils/addClass';
+import { removeClass } from '@24i/bigscreen-sdk/utils/removeClass';
+import { Asset } from '@24i/smartapps-datalayer/models';
+import { getXOffsetStyleObject } from './utils';
+import {
+    CellProps as Props,
+    Cell as ICell,
+    Program,
+    ProgramTextMode,
+} from './interface';
+
+const LIVE_CLASS = 'live';
+const NO_TEXT_CLASS = 'no-text';
+const ELLIPSIS_ONLY_CLASS = 'ellipsis-only';
+const WITH_TEXT_CLASS = 'with-text';
+
+const getClassByTextMode = (textMode: ProgramTextMode) => {
+    switch (textMode) {
+        case 'empty': return NO_TEXT_CLASS;
+        case 'ellipsis_only': return ELLIPSIS_ONLY_CLASS;
+        default: return WITH_TEXT_CLASS;
+    }
+};
+
+export class Cell<
+    T extends Program,
+> extends Component<Props<T>> implements ICell<T> {
+    div = createRef<HTMLDivElement>();
+
+    programComponent = createRef<T>();
+
+    displayToggler = getDisplayToggler(this.div, false);
+
+    /* eslint-disable react/destructuring-assignment */
+    item = this.props.item;
+
+    widthPx = this.props.widthPx;
+
+    xOffsetPx = this.props.xOffsetPx;
+
+    textMode = this.props.programTextModeResolver(this.widthPx);
+    /* eslint-enable react/destructuring-assignment */
+
+    private wasFocusedWithCurrentItem = false;
+
+    componentDidMount() {
+        const { time } = this.props;
+        time.addEventListener('onminute', this.onMinute);
+        this.setLiveClass();
+    }
+
+    componentWillUnmount() {
+        const { time } = this.props;
+        time.removeEventListener('onminute', this.onMinute);
+    }
+
+    onPress = () => {
+        if (!this.item) return;
+        const { onItemPress } = this.props;
+        onItemPress(this.item, this.programComponent.current!);
+    };
+
+    onFocusChange = () => {
+        const { onFocusChange } = this.props;
+        onFocusChange(this.item, this.programComponent.current!);
+    };
+
+    onMouseEnter = () => {
+        const { onMouseEnter } = this.props;
+        onMouseEnter(this.item);
+    };
+
+    onMinute = () => {
+        this.setLiveClass();
+    };
+
+    getWidth() {
+        return this.widthPx;
+    }
+
+    getOffset() {
+        return this.xOffsetPx;
+    }
+
+    setWidth(width: number) {
+        if (this.widthPx === width) return;
+        this.widthPx = width;
+        this.div.current!.style.width = `${width}px`;
+        this.programComponent.current!.setWidth?.(
+            this.xOffsetPx < 0 ? width + this.xOffsetPx : width,
+        );
+    }
+
+    setOffset(offset: number) {
+        if (this.xOffsetPx === offset) return;
+        this.xOffsetPx = offset;
+        offsetPosition(this.div, { x: offset });
+        this.programComponent.current!.setOffset?.(
+            offset < 0 ? -offset : 0,
+        );
+        this.programComponent.current!.setWidth?.(
+            offset < 0 ? this.widthPx + offset : this.widthPx,
+        );
+    }
+
+    private setLiveClass() {
+        if (!this.item) return;
+        const { time } = this.props;
+        const currentTime = time.getCurrentTime();
+        const { startTime, endTime } = this.item.program!;
+        if (currentTime >= startTime && currentTime < endTime) {
+            addClass(this.div, LIVE_CLASS);
+        } else {
+            removeClass(this.div, LIVE_CLASS);
+        }
+    }
+
+    private setTextModeClass(textMode: ProgramTextMode) {
+        if (this.textMode === textMode) return;
+        if (textMode === 'empty') {
+            removeClass(this.div, WITH_TEXT_CLASS);
+            removeClass(this.div, ELLIPSIS_ONLY_CLASS);
+            addClass(this.div, NO_TEXT_CLASS);
+        } else if (textMode === 'ellipsis_only') {
+            removeClass(this.div, WITH_TEXT_CLASS);
+            removeClass(this.div, NO_TEXT_CLASS);
+            addClass(this.div, ELLIPSIS_ONLY_CLASS);
+        } else {
+            removeClass(this.div, ELLIPSIS_ONLY_CLASS);
+            removeClass(this.div, NO_TEXT_CLASS);
+            addClass(this.div, WITH_TEXT_CLASS);
+        }
+        this.textMode = textMode;
+    }
+
+    focus(options?: FocusOptions) {
+        if (!this.wasFocusedWithCurrentItem && document.activeElement === this.div.current) {
+            this.onFocusChange();
+        } else {
+            this.div.current!.focus(options);
+        }
+        this.wasFocusedWithCurrentItem = true;
+    }
+
+    show() {
+        this.displayToggler.show();
+    }
+
+    hide() {
+        this.displayToggler.hide();
+    }
+
+    isVisible() {
+        return this.displayToggler.isVisible();
+    }
+
+    hasDom(element: HTMLElement) {
+        return this.div.current === element;
+    }
+
+    updateData(item: Asset | undefined) {
+        const { programTextModeResolver } = this.props;
+        const textMode = programTextModeResolver(this.widthPx);
+        this.wasFocusedWithCurrentItem = false;
+        this.item = item;
+        this.setLiveClass();
+        this.setTextModeClass(textMode);
+        this.programComponent.current!.updateData(
+            this.item!,
+            textMode,
+            this.xOffsetPx < 0 ? this.widthPx + this.xOffsetPx : this.widthPx,
+            this.xOffsetPx < 0 ? -this.xOffsetPx : 0,
+        );
+    }
+
+    render() {
+        const {
+            isLoading, xOffsetPx, widthPx, item, programTextModeResolver, renderProgram,
+        } = this.props;
+        const textMode = programTextModeResolver(widthPx);
+        return (
+            <Interactable
+                ref={this.div}
+                className={`epg-cell ${getClassByTextMode(textMode)}`}
+                style={{
+                    width: `${widthPx}px`,
+                    ...getXOffsetStyleObject(xOffsetPx),
+                }}
+                onPress={this.onPress}
+                onFocus={this.onFocusChange}
+                onMouseOver={this.onMouseEnter}
+            >
+                {renderProgram(
+                    isLoading ?? false,
+                    item,
+                    this.programComponent,
+                    xOffsetPx < 0 ? widthPx + xOffsetPx : widthPx,
+                    xOffsetPx < 0 ? -xOffsetPx : 0,
+                    textMode,
+                )}
+            </Interactable>
+        );
+    }
+}

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

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

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

@@ -0,0 +1,301 @@
+import { filter, find, findIndex, map } from '@24i/bigscreen-sdk/perf-utils/array';
+import { Asset } from '@24i/smartapps-datalayer/models';
+import { i18n } from '@24i/bigscreen-sdk/i18n';
+import { isStartVisible, isEndVisible, isOverFullWidth } from './utils';
+import {
+    DataRange,
+    DataManager as IDataManager,
+    DataUpdateCallback,
+    ProgramsFetcher,
+    Epg,
+} from './interface';
+
+const START = 0;
+const END = 1;
+
+const TIMELINE_WIDTHS_TO_FETCH = 3;
+
+export class DataManager implements IDataManager {
+    private readonly data: Asset[] = [];
+
+    private dataRanges: DataRange[] = [];
+
+    private readonly inProgressDataRanges: DataRange[] = [];
+
+    private onDataUpdated: DataUpdateCallback | null = null;
+
+    constructor(
+        private readonly channel: Asset,
+        private readonly timelineWidthMs: number,
+        private readonly fetchPrograms: ProgramsFetcher,
+        private readonly epg: Epg<any, any, any, any>,
+    ) {
+        if (this.data.length) {
+            this.addDataRange(this.getRangeFromData(this.data));
+        }
+    }
+
+    getChannel() {
+        return this.channel;
+    }
+
+    getData() {
+        return this.data;
+    }
+
+    getDataFromRange(range: DataRange) {
+        return filter(this.data, ({ program }) => {
+            const { startTime, endTime } = program!;
+            return (
+                isStartVisible(startTime, range)
+                || isEndVisible(endTime, range)
+                || isOverFullWidth(startTime, endTime, range)
+            );
+        });
+    }
+
+    getNextProgramStart(timestamp: number) {
+        const startIndex = this.getDataIndexAtTimestamp(timestamp);
+        if (startIndex === -1) return null;
+        const nextData = this.data[startIndex + 1];
+        if (!nextData) return null;
+        return nextData.program!.startTime;
+    }
+
+    getPreviousProgramEnd(fromTimestamp: number, scrollStepMs: number) {
+        const startIndex = this.getDataIndexAtTimestamp(fromTimestamp);
+        if (startIndex <= 0) return null;
+        const { startTime, endTime } = this.data[startIndex - 1].program!;
+        return Math.max(endTime - scrollStepMs, startTime);
+    }
+
+    setOnDataUpdated(callback: DataUpdateCallback) {
+        this.onDataUpdated = callback;
+    }
+
+    private getDataIndexAtTimestamp(timestamp: number) {
+        return findIndex(this.data, ({ program }) => {
+            const { startTime, endTime } = program!;
+            return timestamp >= startTime && timestamp < endTime;
+        });
+    }
+
+    private getRangeFromData(data: Asset[]) {
+        return [data[0].program!.startTime, data[data.length - 1].program!.endTime] as DataRange;
+    }
+
+    // TODO: Wait for fixes from @thepretiso before looking at this.
+    // eslint-disable-next-line sonarjs/cognitive-complexity
+    private getRangesMissingFromDataInRange([start, end]: DataRange) {
+        const rangesLength = this.dataRanges.length;
+        if (this.dataRanges.length === 0) return [[start, end]] as DataRange[];
+        const firstRangeFrom = this.dataRanges[0][START];
+        if (end <= firstRangeFrom) return [[start, end]] as DataRange[];
+        if (start < firstRangeFrom && end <= this.dataRanges[0][END]) {
+            return [
+                [firstRangeFrom - TIMELINE_WIDTHS_TO_FETCH * this.timelineWidthMs, firstRangeFrom],
+            ] as DataRange[];
+        }
+        const lastRangeTo = this.dataRanges[rangesLength - 1][END];
+        if (end > lastRangeTo && start <= lastRangeTo) {
+            return [
+                [lastRangeTo, lastRangeTo + TIMELINE_WIDTHS_TO_FETCH * this.timelineWidthMs],
+            ] as DataRange[];
+        }
+        const ranges: DataRange[] = [];
+        let newRange: DataRange = [start, end];
+        for (let i = 0; i < rangesLength; i++) {
+            const [rangeFrom, rangeTo] = this.dataRanges[i];
+            // eslint-disable-next-line no-continue
+            if (start >= rangeTo) continue;
+            if (start < rangeFrom) {
+                if (end <= rangeFrom) {
+                    if (newRange[START] !== newRange[END]) ranges.push(newRange);
+                    return ranges;
+                }
+                newRange[END] = rangeFrom;
+                if (newRange[START] !== newRange[END]) ranges.push(newRange);
+                if (end <= rangeTo) {
+                    return ranges;
+                }
+                newRange = [rangeTo, end];
+            } else if (start < rangeTo) {
+                if (end <= rangeTo) {
+                    return ranges;
+                }
+                newRange = [rangeTo, end];
+            }
+        }
+        if (newRange[START] !== newRange[END]) ranges.push(newRange);
+        return ranges;
+    }
+
+    private getMissingRanges(range: DataRange) {
+        const rangesToFetch = this.getRangesMissingFromDataInRange(range);
+        return filter(rangesToFetch, ([start, end]) => (
+            !find(this.inProgressDataRanges, (rangeInProgress) => (
+                rangeInProgress[START] === start && rangeInProgress[END] === end
+            ))
+        ));
+    }
+
+    removeOnDataUpdated() {
+        this.onDataUpdated = null;
+    }
+
+    private addDataRange(newRange: DataRange) {
+        if (this.dataRanges.length === 0) {
+            this.dataRanges.push(newRange);
+            return;
+        }
+        const [newFrom, newTo] = newRange;
+        const rangesLength = this.dataRanges.length;
+        for (let i = 0; i < rangesLength; i++) {
+            const [start, to] = this.dataRanges[i];
+            if (newFrom >= start && newTo <= to) { // is completely inside an existing range
+                return;
+            }
+            if (newTo <= to) { // is before existing range
+                this.dataRanges.splice(i, 0, newRange);
+                this.joinRanges();
+                return;
+            }
+        }
+        this.dataRanges.push(newRange);
+    }
+
+    private joinRanges() {
+        if (this.dataRanges.length < 2) return;
+        const rangesLength = this.dataRanges.length;
+        const newRanges: DataRange[] = [];
+        let newRange: DataRange = [this.dataRanges[0][START], this.dataRanges[0][END]];
+        for (let i = 1; i < rangesLength; i++) {
+            const range = this.dataRanges[i];
+            if (range[START] <= newRange[END]) {
+                newRange[END] = range[END];
+            } else {
+                newRanges.push(newRange);
+                newRange = [range[START], range[END]];
+            }
+        }
+        newRanges.push(newRange);
+        this.dataRanges = newRanges;
+    }
+
+    async fetchAroundTimestampIfNeeded(timestamp: number) {
+        if (this.epg.isFastScrolling()) {
+            return Promise.resolve<void[]>([]);
+        }
+        const rangeNeeded: DataRange = [
+            timestamp - TIMELINE_WIDTHS_TO_FETCH * this.timelineWidthMs,
+            timestamp + TIMELINE_WIDTHS_TO_FETCH * this.timelineWidthMs,
+        ];
+        const rangesNeededToFetch = this.getMissingRanges(rangeNeeded);
+        return Promise.all(
+            map(rangesNeededToFetch, (rangeToFetch) => this.fetchMoreData(rangeToFetch)),
+        );
+    }
+
+    private async fetchMoreData(range: DataRange) {
+        this.inProgressDataRanges.push(range);
+        const newDataRange = await this.fetch(range);
+        if (newDataRange !== null) this.addDataRange(newDataRange);
+        this.inProgressDataRanges.splice(this.inProgressDataRanges.indexOf(range), 1);
+        this.onDataUpdated?.();
+    }
+
+    // eslint-disable-next-line sonarjs/cognitive-complexity
+    private async fetch([start, end]: DataRange) {
+        const { data } = this;
+        let fetchedData: Asset[];
+        try {
+            fetchedData = await this.fetchPrograms(this.channel, start, end);
+        } catch (e) {
+            return null;
+        }
+        this.fillInSpaces([start, end], fetchedData);
+        if (fetchedData.length === 0) return null;
+        let newData: Asset[] = [];
+        if (data.length === 0
+            || fetchedData[0].program!.startTime >= data[data.length - 1].program!.endTime) {
+            data.push(...fetchedData);
+            newData = fetchedData;
+        } else if (
+            fetchedData[fetchedData.length - 1].program!.endTime <= data[0].program!.startTime
+        ) {
+            data.unshift(...fetchedData);
+            newData = fetchedData;
+        } else {
+            let firstDataIndex = 0;
+            for (let i = 0; i < fetchedData.length; i++) {
+                const newItem = fetchedData[i];
+                for (let j = firstDataIndex; j < data.length - 1; j++) {
+                    const jn = j + 1;
+                    const item = data[j];
+                    const nextItem = data[jn];
+                    if (j === 0 && newItem.program!.endTime <= item.program!.startTime) {
+                        data.unshift(newItem);
+                        newData.push(newItem);
+                        firstDataIndex = 0;
+                        break;
+                    }
+                    if (j === data.length - 2
+                        && newItem.program!.startTime >= nextItem.program!.endTime) {
+                        data.push(newItem);
+                        newData.push(newItem);
+                        firstDataIndex = data.length - 2;
+                        break;
+                    }
+                    if (newItem.program!.startTime >= item.program!.endTime
+                        && newItem.program!.endTime <= nextItem.program!.startTime) {
+                        data.splice(jn, 0, newItem);
+                        newData.push(newItem);
+                        firstDataIndex = jn;
+                        break;
+                    }
+                }
+            }
+        }
+        if (!newData.length) return null;
+        return this.getRangeFromData(newData);
+    }
+
+    private generateNoDataProgram(startTime: number, endTime: number) {
+        return {
+            program: {
+                startTime,
+                endTime,
+            },
+            name: i18n.t('epg.noData.title'),
+            programId: `no-data-${startTime}-${endTime}`,
+        } as unknown as Asset;
+    }
+
+    private fillInSpaces([start, end]: DataRange, data: Asset[]) {
+        if (data.length === 0) {
+            data.push(this.generateNoDataProgram(start, end));
+            return;
+        }
+        if (data[0].program!.startTime > start) {
+            data.unshift(this.generateNoDataProgram(start, data[0].program!.startTime));
+        }
+        const last = data.length - 1;
+        if (data[last].program!.endTime < end) {
+            data.push(this.generateNoDataProgram(data[last].program!.endTime, end));
+        }
+        /**
+         * Going backwards is slightly faster (according to performance analysis)
+         * and we do not have to do i adjustments when pasting no-data items
+         */
+        for (let i = data.length - 1; i > 0; i--) {
+            const current = data[i];
+            const previous = data[i - 1];
+            if (previous.program!.endTime < current.program!.startTime) {
+                data.splice(i, 0,
+                    this.generateNoDataProgram(
+                        previous.program!.endTime, current.program!.startTime,
+                    ));
+            }
+        }
+    }
+}

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

@@ -0,0 +1,104 @@
+import { Component, createRef, DeclareProps } from '@24i/bigscreen-sdk/jsx';
+import { Picker } from '@24i/bigscreen-sdk/picker';
+import { DatePicker as NativeDatePicker } from '@24i/bigscreen-sdk/picker/DatePicker';
+import { DAY_IN_MS, HOUR_IN_MS, MINUTE_IN_MS, SECOND_IN_MS } from '@24i/bigscreen-sdk/utils';
+import { i18n } from '@24i/bigscreen-sdk/i18n';
+import { l10n } from '@24i/bigscreen-sdk/l10n';
+import {
+    DatePickerProps as Props,
+    DatePicker as IDatePicker,
+    DatePickerDateProps,
+} from './interface';
+
+const getDayOffsetObject = (offsetMs: number) => {
+    let remainingOffset = offsetMs;
+    const hours = Math.floor(remainingOffset / HOUR_IN_MS);
+    remainingOffset -= hours * HOUR_IN_MS;
+    const minutes = Math.floor(remainingOffset / MINUTE_IN_MS);
+    remainingOffset -= minutes * MINUTE_IN_MS;
+    const seconds = Math.floor(remainingOffset / SECOND_IN_MS);
+    const milliseconds = remainingOffset - seconds * SECOND_IN_MS;
+    return { hours, minutes, seconds, milliseconds };
+};
+
+const timestampToAllignedTimestamp = (timestamp: number, {
+    hours = 0, minutes = 0, seconds = 0, milliseconds = 0,
+}) => {
+    const date = new Date(timestamp);
+    date.setHours(hours, minutes, seconds, milliseconds);
+    return date.getTime();
+};
+
+const prepareDateData = ({
+    daysInPast, daysToFuture, dayStartOffsetMs, timestamp,
+}: Required<Pick<Props, DatePickerDateProps>>) => {
+    const dayOffsetObject = getDayOffsetObject(dayStartOffsetMs);
+    const selectedValue = timestampToAllignedTimestamp(timestamp, dayOffsetObject);
+    const from = selectedValue - daysInPast * DAY_IN_MS;
+    const to = selectedValue + daysToFuture * DAY_IN_MS;
+    const overrides = {
+        [selectedValue - DAY_IN_MS]: i18n.t('date.yesterday'),
+        [selectedValue]: i18n.t('date.today'),
+        [selectedValue + DAY_IN_MS]: i18n.t('date.tomorrow'),
+    };
+    return { selectedValue, from, to, overrides };
+};
+
+const defaultFormat = (date: Date) => l10n.date(date).toLocaleDateString(
+    { weekday: 'short', day: 'numeric', month: 'short' },
+);
+
+export class DatePicker extends Component<Props> implements IDatePicker {
+    datePicker = createRef<Picker<number>>();
+
+    static defaultProps = {
+        dayStartOffsetMs: 0,
+        format: defaultFormat,
+    };
+
+    declare props: DeclareProps<Props, typeof DatePicker.defaultProps>;
+
+    focus(options?: FocusOptions) {
+        this.datePicker.current!.focus(options);
+    }
+
+    updateData(timestamp: number) {
+        const { dayStartOffsetMs } = this.props;
+        const dayOffsetString = getDayOffsetObject(dayStartOffsetMs);
+        const dataTimestamp = timestampToAllignedTimestamp(timestamp, dayOffsetString);
+        this.datePicker.current!.setValue(dataTimestamp);
+    }
+
+    render() {
+        const {
+            daysInPast, daysToFuture, dayStartOffsetMs, timestamp,
+            visibleItems, scrollStep, modalService, format, overrides: propsOverrides,
+            className, modalClassName, Checkbox, checkmark, mode, onValueChange, render,
+        } = this.props;
+        const {
+            from, to, selectedValue, overrides: defaultOverrides,
+        } = prepareDateData({ daysInPast, daysToFuture, dayStartOffsetMs, timestamp });
+        const optionalProps: Record<string, any> = {};
+        if (typeof className === 'string') optionalProps.className = className;
+        if (typeof modalClassName === 'string') optionalProps.modalClassName = modalClassName;
+        if (typeof Checkbox !== 'undefined') optionalProps.Checkbox = Checkbox;
+        if (typeof checkmark !== 'undefined') optionalProps.checkmark = checkmark;
+        if (typeof render === 'function') optionalProps.render = render;
+        return (
+            <NativeDatePicker
+                ref={this.datePicker}
+                from={from}
+                to={to}
+                selectedValue={selectedValue}
+                overrides={propsOverrides ?? defaultOverrides}
+                format={format}
+                visibleItems={visibleItems}
+                scrollStep={scrollStep}
+                modalService={modalService}
+                onValueChange={onValueChange}
+                mode={mode ?? 'modal'}
+                {...optionalProps}
+            />
+        );
+    }
+}

package/packages/epg/src/v2/DateToast/DateToast.scss

@@ -0,0 +1,28 @@
+.epg .toast-service-root {
+    position: absolute;
+    left: 0;
+    top: 0;
+    z-index: 1;
+
+    .date-toast {
+        position: relative;
+        width: $date-toast-width;
+        height: $date-toast-height;
+        background: rgba(31, 31, 31, 0.6);
+        text-align: center;
+
+        .date {
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            border-radius: $date-border-radius;
+            color: rgb(255, 255, 255);
+            font-size: $date-font-size;
+            font-weight: bold;
+            line-height: $date-line-height;
+            background: rgba(31, 31, 31, 0.75);
+            padding: $date-padding;
+        }
+    }
+}

package/packages/epg/src/v2/DateToast/DateToast.styles.1080.scss

@@ -0,0 +1,2 @@
+@import './sizes.1080';
+@import './DateToast';

package/packages/epg/src/v2/DateToast/DateToast.styles.scss

@@ -0,0 +1,2 @@
+@import './sizes';
+@import './DateToast';