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

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

@@ -0,0 +1,87 @@
+import { Component, createRef, setText } from '@24i/bigscreen-sdk/jsx';
+import { ToastService, ToastProps, Toast, ToastRenderProps } from '@24i/bigscreen-sdk/toast';
+import { i18n } from '@24i/bigscreen-sdk/i18n';
+import { l10n } from '@24i/bigscreen-sdk/l10n';
+import { time } from '@24i/bigscreen-sdk/time';
+import { HOUR_IN_MS } from '@24i/bigscreen-sdk/utils/timeConstants';
+import { InternalEpg, Plugin } from '../interface';
+
+const formatTime = (timestamp: number) => l10n.date(timestamp).toLocaleTimeString(
+    { hour: 'numeric', minute: '2-digit' },
+);
+
+const formatDate = (timestamp: number) => {
+    if (time.isToday(timestamp)) {
+        return i18n.t('date.today');
+    }
+    if (time.isYesterday(timestamp)) {
+        return i18n.t('date.yesterday');
+    }
+    if (time.isTomorrow(timestamp)) {
+        return i18n.t('date.tomorrow');
+    }
+    return l10n.date(timestamp).toLocaleString({
+        weekday: 'short',
+        day: 'numeric',
+        month: 'short',
+    });
+};
+
+const formatDatetime = (timestamp: number) => `${formatDate(timestamp)} • ${formatTime(timestamp)}`;
+
+type Props = {
+    epg: InternalEpg<any, any, any, any>,
+};
+
+export class DateToast extends Component<Props> implements Plugin {
+    private readonly service = createRef<ToastService<ToastProps>>();
+
+    private readonly toast = createRef<Toast>();
+
+    private readonly message = createRef<HTMLDivElement>();
+
+    private lastDay: string | null = null;
+
+    onScrolledToTimestamp(timestamp: number) {
+        const { epg } = this.props;
+        const day = formatDatetime(timestamp);
+        if (this.lastDay === null) { // we do not want to display it after render and first move
+            this.lastDay = day;
+            return;
+        }
+        if (day === this.lastDay) return;
+        this.lastDay = day;
+        if (epg.isHorizontallyFastScrolling() && this.message.current) {
+            setText(this.message, this.lastDay);
+        }
+    }
+
+    onFastHorizontalScrollingStart() {
+        this.service.current!.show({ message: this.lastDay!, duration: HOUR_IN_MS });
+    }
+
+    onFastHorizontalScrollingEnd() {
+        this.toast.current!.destroy();
+    }
+
+    render() {
+        return (
+            <ToastService
+                ref={this.service}
+                toast={(props: ToastProps) => (
+                    <Toast
+                        ref={this.toast}
+                        {...props}
+                        render={({ message, toastWrapperRef }: ToastRenderProps) => (
+                            <div ref={toastWrapperRef} className="date-toast">
+                                <div ref={this.message} className="date">
+                                    {message}
+                                </div>
+                            </div>
+                        )}
+                    />
+                )}
+            />
+        );
+    }
+}

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

@@ -0,0 +1,7 @@
+$date-toast-width: 1920px;
+$date-toast-height: 1080px;
+
+$date-border-radius: 8px;
+$date-font-size: 48px;
+$date-line-height: 96px;
+$date-padding: 20px 30px;

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

@@ -0,0 +1,7 @@
+$date-toast-width: 1280px;
+$date-toast-height: 720px;
+
+$date-border-radius: 6px;
+$date-font-size: 36px;
+$date-line-height: 72px;
+$date-padding: 13px 20px;

package/packages/epg/src/v2/DateToast/index.tsx

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

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

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

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

@@ -0,0 +1,30 @@
+import { Component, createRef, setText } from '@24i/bigscreen-sdk/jsx';
+import { l10n } from '@24i/bigscreen-sdk/l10n';
+import { DayProps as Props, Day as IDay } from './interface';
+
+export class Day extends Component<Props> implements IDay {
+    div = createRef<HTMLDivElement>();
+
+    // eslint-disable-next-line react/destructuring-assignment
+    private timestamp = this.props.timestamp;
+
+    updateData(timestamp: number) {
+        if (this.timestamp === timestamp) return;
+        this.timestamp = timestamp;
+        setText(this.div, this.formatCurrentTimestamp());
+    }
+
+    private formatCurrentTimestamp() {
+        return l10n.date(this.timestamp).toLocaleDateString(
+            { weekday: 'long', day: 'numeric', month: 'short' },
+        );
+    }
+
+    render() {
+        return (
+            <div ref={this.div} className="epg-day">
+                {this.formatCurrentTimestamp()}
+            </div>
+        );
+    }
+}

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

@@ -0,0 +1,444 @@
+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 { 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 inputEvents = new InputEvents(this);
+
+    static defaultProps = {
+        timelineWidthMs: DEFAULT_TIMELINE_WIDTH_IN_MIN * MINUTE_IN_MS,
+        timeProvider: Date.now,
+        scrollStepMs: HALF_HOUR_IN_MS,
+        timelineSectionWidthMs: HALF_HOUR_IN_MS,
+        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,
+            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)
+        ));
+    }
+
+    componentDidMount() {
+        this.time.initialize();
+        this.setHorizontalMouseArrows();
+        this.setVerticalMouseArrows();
+    }
+
+    componentWillUnmount() {
+        this.time.destroy();
+    }
+
+    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);
+        }
+    };
+
+    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;
+    }
+
+    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,
+            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}
+                />
+                <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>
+        );
+    }
+}

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

@@ -0,0 +1,41 @@
+import { Component, createRef, setText } from '@24i/bigscreen-sdk/jsx';
+import { getDisplayToggler } from '@24i/bigscreen-sdk/utils/displayToggler';
+import { Asset } from '@24i/smartapps-datalayer/models';
+import {
+    HeaderProps as Props,
+    Header as IHeader,
+} from './interface';
+
+export class Header extends Component<Props> implements IHeader {
+    div = createRef<HTMLDivElement>();
+
+    number = createRef<HTMLDivElement>();
+
+    displayToggler = getDisplayToggler(this.div, false);
+
+    // eslint-disable-next-line react/destructuring-assignment
+    data = this.props.data;
+
+    show() {
+        this.displayToggler.show();
+    }
+
+    hide() {
+        this.displayToggler.hide();
+    }
+
+    updateData(data: Asset) {
+        if (this.data === data) return;
+        this.data = data;
+        setText(this.number, this.data.number!.toString());
+    }
+
+    render() {
+        const { data } = this;
+        return (
+            <div ref={this.div} className="epg-channel-header">
+                <div ref={this.number} className="number">{data.id}</div>
+            </div>
+        );
+    }
+}