@24i/bigscreen-sdk 1.1.0 → 2.1.1-alpha.2133

package/packages/epg/README.md

@@ -18,7 +18,6 @@ This package contains a prepared Electronic Program Guide component.
 - `channelHeaderWidthPx` - the width of the channel headers (the part before programs in a row) in pixels
 - `channelData` - the array of channels of a type that extends `EpgChannel` from the data layer
 - `fetchPrograms` - the function to fetch more programs for a channel in a given time range
-- `smallestAllowedCellPx` - optional - cells with width less than this are marked with `.too-small` class (defaults to `0`)
 - `timelineWidthMs` - optional - the width of the timeline (the part where the programs are) in milliseconds (defaults to `90 minutes`)
 - `scrollStepMs` - optional - the amount of movement step left/right in milliseconds (defaults to `0.5 hours`)
 - `idleTimerMs` - optional - the amount of ms without user input after which epg jumps to the current time (defaults to `scrollStepMs`)
@@ -81,11 +80,10 @@ then the initial time of EPG will be `13:30` (if not set otherwise)
   - `endTime` is always taken as excluded = not the part of the program
   - so the program that gets focused/marked as live / etc. is the one that is just starting
 - when the Program displayed by the cell is currently live, the cell has an `.live` class
-- the Cell has also these following classes based on its width, breakpoints defined by `programTextModeResolver` and `smallestAllowedCellPx`
+- the Cell has also these following classes based on its width and breakpoints defined by `programTextModeResolver`
   - `.with-text` - this cell should display full or ellipsis truncated text
   - `.ellipsis-only` - this cell should display only ellipsis. You can use this class to center the text.
   - `.no-text` - this cell is so small that it should be empty
-  - `.too-small` - this cell is too small to render the usual way, as in its only several pixels wide, less than the needed margin/border etc.
 - the element of the currently focused row has an `.active` class
 
 ## Styles

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

@@ -17,7 +17,6 @@ const LIVE_CLASS = 'live';
 const NO_TEXT_CLASS = 'no-text';
 const ELLIPSIS_ONLY_CLASS = 'ellipsis-only';
 const WITH_TEXT_CLASS = 'with-text';
-const TOO_SMALL_CLASS = 'too-small';
 
 const getClassByTextMode = (textMode: ProgramTextMode) => {
     switch (textMode) {
@@ -41,8 +40,6 @@ export class Cell<
 
     widthPx = this.props.widthPx;
 
-    smallestAllowedCellPx = this.props.smallestAllowedCellPx;
-
     xOffsetPx = this.props.xOffsetPx;
 
     textMode = this.props.programTextModeResolver(this.widthPx);
@@ -140,14 +137,6 @@ export class Cell<
         this.textMode = textMode;
     }
 
-    private setTooSmallClass() {
-        if (this.widthPx < this.smallestAllowedCellPx) {
-            addClass(this.div, TOO_SMALL_CLASS);
-        } else {
-            removeClass(this.div, TOO_SMALL_CLASS);
-        }
-    }
-
     focus(options?: FocusOptions) {
         if (!this.wasFocusedWithCurrentItem && document.activeElement === this.div.current) {
             this.onFocusChange();
@@ -180,7 +169,6 @@ export class Cell<
         this.item = item;
         this.setLiveClass();
         this.setTextModeClass(textMode);
-        this.setTooSmallClass();
         this.programComponent.current!.updateData(
             this.item!,
             textMode,
@@ -191,15 +179,13 @@ export class Cell<
 
     render() {
         const {
-            isLoading, xOffsetPx, widthPx, smallestAllowedCellPx,
-            item, programTextModeResolver, renderProgram,
+            isLoading, xOffsetPx, widthPx, item, programTextModeResolver, renderProgram,
         } = this.props;
         const textMode = programTextModeResolver(widthPx);
-        const tooSmall = widthPx < smallestAllowedCellPx ? TOO_SMALL_CLASS : '';
         return (
             <Interactable
                 ref={this.div}
-                className={`epg-cell ${getClassByTextMode(textMode)} ${tooSmall}`}
+                className={`epg-cell ${getClassByTextMode(textMode)}`}
                 style={{
                     width: `${widthPx}px`,
                     ...getXOffsetStyleObject(xOffsetPx),

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

@@ -1,7 +1,6 @@
 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 { MINUTE_IN_MS } from '@24i/bigscreen-sdk/utils/timeConstants';
 import { isStartVisible, isEndVisible, isOverFullWidth } from './utils';
 import {
     DataRange,
@@ -15,7 +14,6 @@ const START = 0;
 const END = 1;
 
 const TIMELINE_WIDTHS_TO_FETCH = 3;
-const MINIMUM_BREAK_LENGTH = MINUTE_IN_MS;
 
 export class DataManager implements IDataManager {
     private readonly data: Asset[] = [];
@@ -86,115 +84,50 @@ export class DataManager implements IDataManager {
         return [data[0].program!.startTime, data[data.length - 1].program!.endTime] as DataRange;
     }
 
-    private isInterceptingDataRanges = (firstDataRange: DataRange, secondDataRange: DataRange) => (
-        (firstDataRange[START] < secondDataRange[END]
-            && firstDataRange[START] > secondDataRange[START])
-        || (secondDataRange[START] < firstDataRange[END]
-            && secondDataRange[START] > firstDataRange[START])
-    );
-
-    private findRangeBeforeAndAfter = (currentRange: DataRange) => {
-        const rangeAfterIndex = findIndex(
-            this.dataRanges,
-            (dataRange) => dataRange[END] >= currentRange[END],
-        );
-        if (rangeAfterIndex === -1) {
-            return {
-                rangeAfter: undefined,
-                rangeBefore: this.dataRanges[this.dataRanges.length - 1],
-            };
-        }
-        const rangeAfter = this.dataRanges[rangeAfterIndex];
-        const rangeBefore = this.dataRanges[rangeAfterIndex - 1];
-        return { rangeAfter, rangeBefore };
-    };
-
-    private generateDataRangesForward = (start: number, end: number, cellSize: number) => {
-        const dataRanges: DataRange[] = [[start, start + cellSize]];
-        let currentStart = start + cellSize;
-        let currentEnd = currentStart + cellSize;
-        while (currentStart < end) {
-            if (currentEnd >= end) {
-                dataRanges.push([currentStart, end]);
-                break;
-            }
-            dataRanges.push([currentStart, currentEnd]);
-            currentStart += cellSize;
-            currentEnd += cellSize;
-        }
-        return dataRanges;
-    };
-
-    private generateDataRangesBackward = (start: number, end: number, cellSize: number) => {
-        const dataRanges: DataRange[] = [[start - cellSize, start]];
-        let currentEnd = start - cellSize;
-        let currentStart = currentEnd - cellSize;
-        while (currentEnd > start) {
-            if (currentStart <= start) {
-                dataRanges.push([start, currentEnd]);
-                break;
-            }
-            dataRanges.push([currentStart, currentEnd]);
-            currentStart -= cellSize;
-            currentEnd -= cellSize;
-        }
-        return dataRanges;
-    };
-
-    /* eslint-disable complexity */
+    // TODO: Wait for fixes from @thepretiso before looking at this.
     // eslint-disable-next-line sonarjs/cognitive-complexity
     private getRangesMissingFromDataInRange([start, end]: DataRange) {
-        const currentRange = [start, end] as DataRange;
-        const cellSize = TIMELINE_WIDTHS_TO_FETCH * this.timelineWidthMs;
-        if (this.dataRanges.length === 0) return [currentRange] as DataRange[];
-        const { rangeBefore, rangeAfter } = this.findRangeBeforeAndAfter(currentRange);
-        if (rangeAfter == null) {
-            const lastDataRange = this.dataRanges[this.dataRanges.length - 1];
-            if (this.isInterceptingDataRanges(lastDataRange, currentRange)) {
-                if (end > lastDataRange[END]) {
-                    return this.generateDataRangesForward(lastDataRange[END], end, cellSize);
-                }
-                if (start < lastDataRange[START]) {
-                    return this.generateDataRangesBackward(start, lastDataRange[START], cellSize);
-                }
-            }
-            return [currentRange] as 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[];
         }
-        if (rangeBefore == null) {
-            const firstDataRange = this.dataRanges[0];
-            if (this.isInterceptingDataRanges(firstDataRange, currentRange)) {
-                if (end > firstDataRange[END]) {
-                    return this.generateDataRangesForward(firstDataRange[END], end, cellSize);
+        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;
                 }
-                if (start < firstDataRange[START]) {
-                    return this.generateDataRangesBackward(firstDataRange[START], start, cellSize);
+                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];
             }
-            return [currentRange] as DataRange[];
-        }
-        const rangeAfterFrom = rangeAfter[START];
-        const rangeBeforeTo = rangeBefore[END];
-        // Ranges are collapsed
-        if (rangeBeforeTo === rangeAfterFrom) return [];
-        // Both are not null and don't intercept
-        if (
-            !this.isInterceptingDataRanges(rangeAfter, currentRange)
-            && !this.isInterceptingDataRanges(rangeBefore, currentRange)
-        ) {
-            return [currentRange];
-        }
-        // Left intercepts
-        if (this.isInterceptingDataRanges(rangeBefore, currentRange)) {
-            return [rangeBefore, ...this.generateDataRangesForward(rangeBeforeTo, end, cellSize)];
-        }
-        // Right intercepts
-        if (this.isInterceptingDataRanges(rangeAfter, currentRange)) {
-            return [
-                ...this.generateDataRangesBackward(rangeAfterFrom, start, cellSize),
-                rangeAfter,
-            ];
         }
-        return [currentRange] as DataRange[];
+        if (newRange[START] !== newRange[END]) ranges.push(newRange);
+        return ranges;
     }
 
     private getMissingRanges(range: DataRange) {
@@ -278,7 +211,7 @@ export class DataManager implements IDataManager {
         try {
             fetchedData = await this.fetchPrograms(this.channel, start, end);
         } catch (e) {
-            fetchedData = [];
+            return null;
         }
         this.fillInSpaces([start, end], fetchedData);
         if (fetchedData.length === 0) return null;
@@ -357,15 +290,11 @@ export class DataManager implements IDataManager {
         for (let i = data.length - 1; i > 0; i--) {
             const current = data[i];
             const previous = data[i - 1];
-            const breakLength = current.program!.startTime - previous.program!.endTime;
-            if (breakLength > 0 && breakLength >= MINIMUM_BREAK_LENGTH) {
-                data.splice(
-                    i,
-                    0,
+            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

@@ -1,5 +1,4 @@
 import { Component, createRef, DeclareProps } from '@24i/bigscreen-sdk/jsx';
-import { time } from '@24i/bigscreen-sdk/time';
 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';
@@ -45,14 +44,9 @@ const prepareDateData = ({
     return { selectedValue, from, to, overrides };
 };
 
-const defaultFormat = (date: Date) => {
-    const locale = i18n.getLanguage();
-    return l10n
-        .date(date.getTime() + time.getTimezoneOffsetMs(), locale)
-        .toLocaleDateString({
-            weekday: 'short', day: 'numeric', month: 'short', formatType: 'dateFormatShort',
-        });
-};
+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>>();

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

@@ -6,31 +6,28 @@ import { time } from '@24i/bigscreen-sdk/time';
 import { HOUR_IN_MS } from '@24i/bigscreen-sdk/utils/timeConstants';
 import { InternalEpg, Plugin } from '../interface';
 
-const formatTime = (localTimestamp: number) => l10n.date(localTimestamp).toLocaleTimeString(
-    { hour: 'numeric', minute: '2-digit', formatType: 'timeFormat' },
+const formatTime = (timestamp: number) => l10n.date(timestamp).toLocaleTimeString(
+    { hour: 'numeric', minute: '2-digit' },
 );
 
-const formatDate = (localTimestamp: number) => {
-    if (time.isToday(localTimestamp)) {
+const formatDate = (timestamp: number) => {
+    if (time.isToday(timestamp)) {
         return i18n.t('date.today');
     }
-    if (time.isYesterday(localTimestamp)) {
+    if (time.isYesterday(timestamp)) {
         return i18n.t('date.yesterday');
     }
-    if (time.isTomorrow(localTimestamp)) {
+    if (time.isTomorrow(timestamp)) {
         return i18n.t('date.tomorrow');
     }
-    return l10n.date(localTimestamp).toLocaleString({
+    return l10n.date(timestamp).toLocaleString({
         weekday: 'short',
         day: 'numeric',
         month: 'short',
-        formatType: 'dateFormatShort',
     });
 };
 
-const formatDatetime = (localTimestamp: number) => (
-    `${formatDate(localTimestamp)} • ${formatTime(localTimestamp)}`
-);
+const formatDatetime = (timestamp: number) => `${formatDate(timestamp)} • ${formatTime(timestamp)}`;
 
 type Props = {
     epg: InternalEpg<any, any, any, any>,
@@ -47,7 +44,7 @@ export class DateToast extends Component<Props> implements Plugin {
 
     onScrolledToTimestamp(timestamp: number) {
         const { epg } = this.props;
-        const day = formatDatetime(timestamp + time.getTimezoneOffsetMs());
+        const day = formatDatetime(timestamp);
         if (this.lastDay === null) { // we do not want to display it after render and first move
             this.lastDay = day;
             return;

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

@@ -1,5 +1,4 @@
 import { Component, createRef, setText } from '@24i/bigscreen-sdk/jsx';
-import { time } from '@24i/bigscreen-sdk/time';
 import { l10n } from '@24i/bigscreen-sdk/l10n';
 import { DayProps as Props, Day as IDay } from './interface';
 
@@ -16,11 +15,9 @@ export class Day extends Component<Props> implements IDay {
     }
 
     private formatCurrentTimestamp() {
-        return l10n
-            .date(this.timestamp + time.getTimezoneOffsetMs())
-            .toLocaleDateString({
-                weekday: 'long', day: 'numeric', month: 'short', formatType: 'dateFormatShort',
-            });
+        return l10n.date(this.timestamp).toLocaleDateString(
+            { weekday: 'long', day: 'numeric', month: 'short' },
+        );
     }
 
     render() {

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

@@ -83,7 +83,6 @@ export class Epg<
         timeProvider: Date.now,
         scrollStepMs: HALF_HOUR_IN_MS,
         timelineSectionWidthMs: HALF_HOUR_IN_MS,
-        smallestAllowedCellPx: 0,
         limitFromMs: -Infinity,
         limitToMs: Infinity,
         initialChannelIndex: 0,
@@ -298,8 +297,6 @@ export class Epg<
         return ref;
     }
 
-    isFocusInRows = () => this.focused === 'epg';
-
     focus(options?: FocusOptions) {
         if (this.focused === 'datepicker') {
             this.datePickerComponent.current!.focus(options);
@@ -379,11 +376,15 @@ export class Epg<
         return this.inputEvents.isVerticallyFastScrolling();
     }
 
+    isFocusInRows = () => {
+        return this.focused === 'epg';
+    };
+
     render() {
         const {
             datePickerProps, timelineWidthPx, channelHeaderWidthPx, scrollStepMs, rowHeightPx,
             timelineSectionWidthMs, timelineWidthMs, initialChannelIndex, plugins,
-            navigatableRows, additionalRows, programTextModeResolver, smallestAllowedCellPx,
+            navigatableRows, additionalRows, programTextModeResolver,
             renderDay, renderTime, renderProgram, renderChannelHeader, renderNowLineHeader,
         } = this.props;
         return (
@@ -443,7 +444,6 @@ export class Epg<
                     renderChannelHeader={renderChannelHeader}
                     renderProgram={renderProgram}
                     isFocusInRows={this.isFocusInRows}
-                    smallestAllowedCellPx={smallestAllowedCellPx}
                 />
                 <EpgMouseNavigation
                     // @ts-ignore - needed to convert fallback (false) to interface

package/packages/epg/src/v2/MockGenerator/generator.ts

@@ -1,6 +1,6 @@
 import { HOUR_IN_MS } from '@24i/bigscreen-sdk/utils/timeConstants';
 import {
-    Asset, AssetType, ID, UIElement, UIElementType,
+    Asset, ID, UIElement, UIElementType,
 } from '@24i/smartapps-datalayer/models';
 import {
     randomFromRange, getRandomItemFromArray, shuffleArray, getProgramImageUrl,
@@ -56,10 +56,9 @@ const generateChannels = (count: number): Asset[] => {
             uiElements: [
                 {
                     type: UIElementType.IMAGE,
-                    url: getChannelImageUrl() ?? '',
+                    url: getChannelImageUrl(),
                 } as UIElement,
             ],
-            type: AssetType.CHANNEL,
         });
     }
 

package/packages/epg/src/v2/ProgramInfo/utils.ts

@@ -1,5 +1,4 @@
 import { l10n } from '@24i/bigscreen-sdk/l10n';
-import { time } from '@24i/bigscreen-sdk/time';
 import { Asset } from '@24i/smartapps-datalayer/models';
 
 export const cutString = (string: string, length: number) => {
@@ -17,9 +16,9 @@ export const getSubtitle = (asset: Asset) => (
         : ''
 );
 
-const toLocaleTimeString = (timestamp: number) => l10n
-    .date(timestamp + time.getTimezoneOffsetMs())
-    .toLocaleTimeString({ hour: 'numeric', minute: '2-digit', formatType: 'timeFormat' });
+const toLocaleTimeString = (timestamp: number) => l10n.date(timestamp).toLocaleTimeString(
+    { hour: 'numeric', minute: '2-digit' },
+);
 
 export const getBroadcastTime = (asset: Asset) => {
     const start = toLocaleTimeString(asset.program!.startTime);

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

@@ -109,8 +109,7 @@ export class Row<
 
     render() {
         const {
-            timelineWidthMs, timestamp, time,
-            pixelInMs, timelineWidthPx, smallestAllowedCellPx,
+            timelineWidthMs, timelineWidthPx, timestamp, time, pixelInMs,
             programTextModeResolver, onMouseEnter, renderProgram,
         } = this.props;
         return (
@@ -127,7 +126,6 @@ export class Row<
                 onItemPress={this.onItemPress}
                 onMouseEnter={onMouseEnter}
                 renderProgram={renderProgram}
-                smallestAllowedCellPx={smallestAllowedCellPx}
             />
         );
     }

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

@@ -1,5 +1,4 @@
 import { Component, createRef, setText } from '@24i/bigscreen-sdk/jsx';
-import { time } from '@24i/bigscreen-sdk/time';
 import { l10n } from '@24i/bigscreen-sdk/l10n';
 import { offsetPosition } from '@24i/bigscreen-sdk/utils';
 import { TimelineSectionProps as Props, TimelineSection as ITimelineSection } from './interface';
@@ -24,9 +23,7 @@ export class TimelineSection extends Component<Props> implements ITimelineSectio
     }
 
     private formatCurrentTimestamp() {
-        return l10n
-            .date(this.timestamp + time.getTimezoneOffsetMs())
-            .toLocaleTimeString({ hour: 'numeric', minute: '2-digit', formatType: 'timeFormat' });
+        return l10n.date(this.timestamp).toLocaleTimeString({ hour: 'numeric', minute: '2-digit' });
     }
 
     render() {

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

@@ -180,8 +180,7 @@ export class CellsManager<
 
     private addCell(item: Asset) {
         const {
-            time, smallestAllowedCellPx,
-            programTextModeResolver, onMouseEnter, onItemPress, onFocusChange, renderProgram,
+            time, programTextModeResolver, onMouseEnter, onItemPress, onFocusChange, renderProgram,
         } = this.props;
         const cell = createRef<ICell<T>>();
         this.mountBefore((
@@ -196,7 +195,6 @@ export class CellsManager<
                 onFocusChange={onFocusChange}
                 onMouseEnter={onMouseEnter}
                 renderProgram={renderProgram}
-                smallestAllowedCellPx={smallestAllowedCellPx}
             />
         ), this.endLoadingCell.current!.div);
         this.cells.push(cell);
@@ -243,7 +241,7 @@ export class CellsManager<
 
     render() {
         const {
-            timelineWidthPx, smallestAllowedCellPx, time, dataGetter, programTextModeResolver,
+            timelineWidthPx, time, dataGetter, programTextModeResolver,
             onMouseEnter, onItemPress, onFocusChange, renderProgram,
         } = this.props;
         const visibleData = dataGetter(this.getRange());
@@ -259,7 +257,6 @@ export class CellsManager<
                     onFocusChange={onFocusChange}
                     onMouseEnter={onMouseEnter}
                     renderProgram={renderProgram}
-                    smallestAllowedCellPx={smallestAllowedCellPx}
                     isLoading
                 />
                 {map(visibleData, (item) => {
@@ -277,7 +274,6 @@ export class CellsManager<
                             onFocusChange={onFocusChange}
                             onMouseEnter={onMouseEnter}
                             renderProgram={renderProgram}
-                            smallestAllowedCellPx={smallestAllowedCellPx}
                         />
                     );
                 })}
@@ -292,7 +288,6 @@ export class CellsManager<
                     onMouseEnter={onMouseEnter}
                     renderProgram={renderProgram}
                     isLoading
-                    smallestAllowedCellPx={smallestAllowedCellPx}
                 />
             </div>
         );

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

@@ -465,8 +465,7 @@ export class RowsManager<
 
     render() {
         const {
-            timelineWidthMs, timestamp, time, scrollStepMs,
-            pixelInMs, timelineWidthPx, smallestAllowedCellPx,
+            timelineWidthMs, timelineWidthPx, timestamp, time, scrollStepMs, pixelInMs,
             programTextModeResolver, onItemPress, onMouseEnter, renderProgram, renderChannelHeader,
         } = this.props;
         const visibleData = this.getVisibleChannels();
@@ -493,7 +492,6 @@ export class RowsManager<
                             onFocusChange={this.onFocusChange}
                             onMouseEnter={onMouseEnter}
                             renderProgram={renderProgram}
-                            smallestAllowedCellPx={smallestAllowedCellPx}
                         />
                     ))}
                 </Scroller>

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

@@ -241,14 +241,6 @@ type ScrollStepMsProp = {
     scrollStepMs: number,
 };
 
-type SmallestAllowedCellPxProp = {
-    /**
-     * If the width of the cell is smaller than this the cell will have a special
-     * class `too-small`. Value in pixels.
-     */
-    smallestAllowedCellPx: number,
-};
-
 type IdleTimerMsProp = {
     /**
      * The number of milliseconds of inactivity (no input) after which EPG starts jumps
@@ -831,7 +823,6 @@ export type RowsManagerProps<
     & RenderChannelHeaderProp<T>
     & RenderProgramProp<U>
     & IsFocusInRowsProp
-    & SmallestAllowedCellPxProp
 );
 
 /**
@@ -942,7 +933,6 @@ export type RowProps<
     & TimestampProp
     & TimeProp
     & ScrollStepMsProp
-    & SmallestAllowedCellPxProp
     & ProgramTextModeResolverProp
     & OnItemPressProp<T>
     & OnMouseEnterProp
@@ -1056,7 +1046,6 @@ export type CellsManagerProps<
     & ProgramTextModeResolverProp
     & OnMouseEnterProp
     & RenderProgramProp<T>
-    & SmallestAllowedCellPxProp
 );
 
 /**
@@ -1144,7 +1133,6 @@ export type CellProps<
     & ProgramTextModeResolverProp
     & OnMouseEnterProp
     & RenderProgramProp<T>
-    & SmallestAllowedCellPxProp
 );
 
 /**
@@ -1287,7 +1275,6 @@ export type Props<
     & Partial<InitialTimestampProp>
     & Partial<InitialChannelIndexProp>
     & Partial<ProgramTextModeResolverProp>
-    & Partial<SmallestAllowedCellPxProp>
     & OnItemPressProp<U>
     & Partial<OnFocusChangeProp<U>>
     & Partial<OnScrolledToTimestampProp>

package/packages/events-manager/src/EventsManager.ts

@@ -1 +1,56 @@
-export * from '@24i/appstage-shared-events-manager/dist/EventsManager';
+import { forEach, map } from '@24i/bigscreen-sdk/perf-utils/array';
+
+type PayloadOf<T> = T extends (payload: infer Payload) => any ? Payload : never;
+
+export type EventMapType = { [key: string]: (payload: any) => void };
+
+export interface IEvents<EventMap extends EventMapType> {
+    addEventListener: <K extends keyof EventMap>(
+        eventName: K,
+        listener: EventMap[K],
+    ) => void,
+    removeEventListener: <K extends keyof EventMap>(
+        eventName: K,
+        listener: EventMap[K],
+    ) => void,
+    triggerEvent: <K extends keyof EventMap>(
+        eventName: K,
+        payload: PayloadOf<EventMap[K]>,
+    ) => void,
+}
+
+export class EventsManager<EventMap extends EventMapType> implements IEvents<EventMap> {
+    eventListeners: Partial<{
+        [key in keyof EventMap]: EventMap[key][]
+    }> = {};
+
+    addEventListener = <K extends keyof EventMap>(
+        eventName: K,
+        listener: EventMap[K],
+    ): void => {
+        if (!this.eventListeners[eventName]) this.eventListeners[eventName] = [];
+        const listeners = this.eventListeners[eventName] as EventMap[K][];
+        listeners.push(listener);
+    };
+
+    removeEventListener = <K extends keyof EventMap>(
+        eventName: K,
+        listener: EventMap[K],
+    ): void => {
+        const listeners = this.eventListeners[eventName] as EventMap[K][] | undefined;
+        if (!listeners) return;
+        const index = listeners.indexOf(listener);
+        if (index !== -1) listeners.splice(index, 1);
+    };
+
+    triggerEvent = <K extends keyof EventMap>(
+        eventName: K,
+        payload?: PayloadOf<EventMap[K]>,
+    ): void => {
+        const eventListeners = this.eventListeners[eventName] as EventMap[K][] | undefined;
+        if (!eventListeners) return;
+        // In case listener removes itself during listening we need loop on a copy
+        const listeners = map(eventListeners, (l) => l);
+        forEach(listeners, (listener) => listener(payload));
+    };
+}