@24i/bigscreen-sdk 1.0.12-alpha.2254 → 1.0.12-alpha.2260

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@24i/bigscreen-sdk",
-    "version": "1.0.12-alpha.2254",
+    "version": "1.0.12-alpha.2260",
     "description": "SmartApps BIGscreen SDK monorepo",
     "main": "index.js",
     "scripts": {
@@ -37,9 +37,13 @@
     },
     "homepage": "https://github.com/24i/smartapps-bigscreen-sdk#readme",
     "dependencies": {
+        "@24i/appstage-shared-analytics": "1.0.7",
+        "@24i/appstage-shared-events-manager": "1.0.5",
+        "@24i/appstage-shared-perf-utils": "1.0.5",
         "@24i/player-base": "6.10.0",
         "@24i/smartapps-datalayer": "3.0.6-alpha.978",
-        "@sentry/browser": "^7.12.1",
+        "@sentry/browser": "7.35.0",
+        "@sentry/types": "7.35.0",
         "@types/gtag.js": "^0.0.12",
         "@types/prop-types": "^15.7.5",
         "@types/scheduler": "^0.16.2",

package/packages/analytics/README.md

@@ -5,61 +5,4 @@ hide_title: true
 sidebar_label: Analytics
 ---
 
-# Analytics
-This package contains general implementation of analytics and implementation for these clients:
-- ConsoleAnalytics - debugging analytics that dump triggers to the console.
-
-## analytics
-Single instance `analytics` is a general manager for analytics clients. It provides a unified
-interface for use by the app without it needing to know any specific analytics client implementation.
-It also adds some general app info to each trigger call (e.g. resolution, language, etc.)
-
-## A
-`A` is a shorthand utility function to simplify sending analytics information. It allows setting
-a basic payload that is sent with each trigger call and shallowly merged with trigger payload.
-Trigger payload can override values inside this basic payload.
-
-### Usage
-```typescript
-import { A } from '@24i/bigscreen-sdk/analytics';
-
-class DetailScene {
-    a = A.of({ sceneType: SceneType.DETAIL });
-
-    activate(params: RouteParams) {
-        this.a.addToPayload({
-            sceneId: `/detail/${params.assetType}/${params.id}`,
-            sceneName: `Detail - ${data.type} - [unknown]`,
-            asset: undefined,
-        });
-        // ...
-    }
-
-    async loadAndRenderData() {
-        this.a('buffering_start');
-        const data = await dataProvider();
-        this.a.addToPayload({
-            sceneName: `Detail - ${data.type} - ${data.name}`,
-            asset: data,
-        });
-        this.a('buffering_stop');
-        // render
-        this.a('scene_view');
-    }
-}
-```
-It is better to store shorthand `a` function inside the component instance. Some scenes can be
-instantiated multiple times by the router (e.g. Browse in WL). Therefore it cannot use a single
-instance from a local `./analytics'` import for example.
-
-## Clients
-Analytics client is the integration to the specific analytics provider (e.g. Google Analytics).
-It needs to implement `AnalyticsClient` interface and register its instance to receive the events.
-
-Clients have to opt-in to events they wish to listen to. This can be done by listing all events or by
-using a regular expression.
-
-```typescript
-analytics.addClient(new GoogleAnalytics(), ['scene_view', 'buffering_start', 'buffering_stop']);
-analytics.addClient(new ConsoleAnalytics(), /.*/);
-```
+https://github.com/24i/appstage-shared-packages/blob/main/packages/analytics/README.md

package/packages/analytics/src/A.ts

@@ -1,51 +1 @@
-import { analytics } from './Analytics';
-import { AnalyticsEventsMap, AnalyticsEventsNames, AnyPayload, AFunction } from './interface';
-
-interface PrivateAFunction extends AFunction {
-    payload: AnyPayload,
-}
-
-export class A {
-    /**
-     * Creates an analytics 'a' function for easy triggering of events.
-     * @param payload basic payload that is added to each payload of the returned
-     * function call.
-     * @returns a function for triggering analytics events
-     * @example
-     * ```typescript
-     * // Creates a function and sets the basic payload.
-     * const a = A.of({ sceneType: 'HOME', sceneId: 'home' });
-     *
-     * // Sends 'scene_view' event with the basic payload.
-     * a('scene_view');
-     *
-     * // Sends 'buffering_stop' with shallow merge of the basic payload and { asset } object.
-     * a('buffering_stop', { asset });
-     * ```
-     */
-    static of(payload: AnyPayload) {
-        const a: PrivateAFunction = (<
-            EventName extends AnalyticsEventsNames,
-            P extends Partial<Parameters<AnalyticsEventsMap[EventName]>[0]>,
-        >(eventName: EventName, eventPayload: P) => {
-            analytics.triggerEvent(eventName, {
-                ...a.payload,
-                ...eventPayload,
-            } as unknown as Parameters<AnalyticsEventsMap[EventName]>[0]);
-        }) as unknown as PrivateAFunction;
-        a.payload = payload;
-        a.addToPayload = (extendedPayload: AnyPayload) => {
-            a.payload = {
-                ...a.payload,
-                ...extendedPayload,
-            };
-        };
-        a.setPayload = (newPayload: AnyPayload) => {
-            a.payload = newPayload;
-        };
-        a.clearPayload = () => {
-            a.payload = {};
-        };
-        return a as AFunction;
-    }
-}
+export { A } from '@24i/appstage-shared-analytics';

package/packages/analytics/src/Analytics.ts

@@ -1,114 +1 @@
-import { EventsManager } from '@24i/bigscreen-sdk/events-manager';
-import { i18n } from '@24i/bigscreen-sdk/i18n';
-import type {
-    AnalyticsEventsMap,
-    AnalyticsEventsNames,
-    AnalyticsClient,
-    GeneralAppData,
-    AppInfo,
-    UserInfo,
-} from './interface';
-import { EVENT_NAMES, ONLY_ONCE_EVENTS, UNREPEATABLE_EVENTS } from './constants';
-
-class Analytics {
-    private events = new EventsManager<AnalyticsEventsMap>();
-
-    private onlyOnceAlreadySent: string[] = [];
-
-    private lastPayloadForEvent: Partial<Record<AnalyticsEventsNames, string>> = {};
-
-    private clients: Record<string, {
-        client: AnalyticsClient
-        registeredEvents: Partial<Record<AnalyticsEventsNames, Function>>,
-    }> = {};
-
-    private generalAppData: Partial<GeneralAppData> = {
-        language: i18n.getLanguage(),
-        resolution: `${window.innerWidth}x${window.innerHeight}`,
-    };
-
-    private appInfo: Partial<AppInfo> = {};
-
-    private userInfo: Partial<UserInfo> = {};
-
-    constructor() {
-        i18n.addEventListener('languagechange', this.onLanguageChange);
-    }
-
-    addClient(client: AnalyticsClient, events: AnalyticsEventsNames[] | RegExp) {
-        if (this.clients[client.name]) {
-            throw new Error(`${client.name} analytics client is already registered.`);
-        }
-        const eventsToRegister = Array.isArray(events)
-            ? events
-            : EVENT_NAMES.filter(events.test.bind(events));
-        const registeredEvents: Partial<Record<AnalyticsEventsNames, Function>> = {};
-        eventsToRegister.forEach((eventName) => {
-            const listener = (payload: any) => {
-                client.onEvent(eventName, payload);
-            };
-            this.events.addEventListener(eventName, listener);
-            registeredEvents[eventName] = listener;
-        });
-        this.clients[client.name] = {
-            client,
-            registeredEvents,
-        };
-    }
-
-    removeClient(client: AnalyticsClient) {
-        if (this.clients[client.name]) {
-            const { registeredEvents } = this.clients[client.name];
-            Object.keys(registeredEvents).forEach((eventName) => {
-                // @ts-ignore - specific payload typing
-                this.events.removeEventListener(eventName, registeredEvents[eventName]!);
-            });
-            delete this.clients[client.name];
-        }
-    }
-
-    triggerEvent<Event extends AnalyticsEventsNames>(
-        event: Event,
-        triggerPayload: Parameters<AnalyticsEventsMap[Event]>[0] = undefined,
-    ) {
-        const fullPayload = {
-            ...this.generalAppData,
-            ...this.appInfo,
-            ...this.userInfo,
-            ...triggerPayload,
-        };
-        if (ONLY_ONCE_EVENTS.includes(event)) {
-            const serializedPayload = `${event} - ${JSON.stringify(fullPayload)}`;
-            if (this.onlyOnceAlreadySent.includes(serializedPayload)) return;
-            this.onlyOnceAlreadySent.push(serializedPayload);
-        }
-        if (UNREPEATABLE_EVENTS.includes(event)) {
-            const serializedPayload = JSON.stringify(fullPayload);
-            if (this.lastPayloadForEvent[event] === serializedPayload) return;
-            this.lastPayloadForEvent[event] = serializedPayload;
-        }
-        this.tryFillUpMissingData();
-        // @ts-ignore - payload typing
-        this.events.triggerEvent(event, fullPayload);
-    }
-
-    setAppInfo(data: Partial<AppInfo>) {
-        this.appInfo = data;
-    }
-
-    setUserInfo(data: Partial<UserInfo>) {
-        this.userInfo = data;
-    }
-
-    private onLanguageChange = () => {
-        this.generalAppData.language = i18n.getLanguage();
-    };
-
-    private tryFillUpMissingData() {
-        if (!this.generalAppData.language) {
-            this.generalAppData.language = i18n.getLanguage();
-        }
-    }
-}
-
-export const analytics = new Analytics();
+export { analytics } from '@24i/appstage-shared-analytics';

package/packages/analytics/src/analyticsOnScroll.ts

@@ -1,11 +1 @@
-import { AFunction } from './interface';
-
-export const analyticsOnScroll = (a: AFunction, itemsTotal: number) => (_: any, index: number) => {
-    const percent = (index + 1) / itemsTotal;
-    /* eslint-disable no-magic-numbers */
-    if (percent >= 0.9) a('scroll_90');
-    else if (percent >= 0.75) a('scroll_75');
-    else if (percent >= 0.50) a('scroll_50');
-    else if (percent >= 0.25) a('scroll_25');
-    /* eslint-enable no-magic-numbers */
-};
+export { analyticsOnScroll } from '@24i/appstage-shared-analytics';

package/packages/analytics/src/clients/ConsoleAnalytics/ConsoleAnalytics.ts

@@ -1,12 +1 @@
-import { AnalyticsClient } from '../../interface';
-
-/**
- * Simple debugging client that dumps all triggers to the console.
- */
-export class ConsoleAnalytics implements AnalyticsClient {
-    name = 'ConsoleAnalytics';
-
-    onEvent(eventName: string, payload: any) {
-        console.info('CA: ', eventName, payload);
-    }
-}
+export { ConsoleAnalytics } from '@24i/appstage-shared-analytics/dist/clients/ConsoleAnalytics';

package/packages/analytics/src/constants.ts

@@ -1,56 +1 @@
-import { AnalyticsEventsNames } from './interface';
-
-export const EVENT_NAMES = [
-    // App
-    'app_close',
-
-    // Data loading / Player buffering
-    'buffering_start',
-    'buffering_stop',
-
-    // Heartbeat
-    'heartbeat_5',
-
-    // Playback
-    'playback_10',
-    'playback_25',
-    'playback_50',
-    'playback_75',
-    'playback_90',
-    'playback_pause',
-    'playback_start',
-    'playback_stop',
-
-    // Player
-    'player_close',
-    'player_open',
-
-    // Scenes
-    'scene_view',
-
-    // Scrolling in scene
-    'scroll_25',
-    'scroll_50',
-    'scroll_75',
-    'scroll_90',
-] as const;
-
-export const ONLY_ONCE_EVENTS: AnalyticsEventsNames[] = [
-    // Playback
-    'playback_10',
-    'playback_25',
-    'playback_50',
-    'playback_75',
-    'playback_90',
-
-    // Scrolling in scene
-    'scroll_25',
-    'scroll_50',
-    'scroll_75',
-    'scroll_90',
-];
-
-export const UNREPEATABLE_EVENTS: AnalyticsEventsNames[] = [
-    // Scenes
-    'scene_view',
-];
+export * from '@24i/appstage-shared-analytics/dist/constants';

package/packages/analytics/src/interface.ts

@@ -1,82 +1 @@
-export type SceneInfo = {
-    sceneId: string,
-    sceneType: string,
-    sceneName: string,
-};
-
-export type AppInfo = {
-    applicationId: string,
-    serviceId: string,
-};
-
-export type UserInfo = {
-    userId: string,
-};
-
-export type GeneralAppData = {
-    language: string,
-    resolution: string,
-};
-
-/**
- * List of all tracked events.
- */
-export type AnalyticsEventsMap = {
-    // App
-    'app_close': (payload: void) => void,
-
-    // Data loading / Player buffering
-    'buffering_start': (payload: SceneInfo) => void,
-    'buffering_stop': (payload: SceneInfo) => void,
-
-    // Heartbeat
-    'heartbeat_5': (payload: void) => void,
-
-    // Playback
-    'playback_10': (payload: void) => void,
-    'playback_25': (payload: void) => void,
-    'playback_50': (payload: void) => void,
-    'playback_75': (payload: void) => void,
-    'playback_90': (payload: void) => void,
-    'playback_pause': (payload: void) => void,
-    'playback_start': (payload: void) => void,
-    'playback_stop': (payload: void) => void,
-
-    // Player
-    'player_close': (payload: void) => void,
-    'player_open': (payload: void) => void,
-
-    // Scenes
-    'scene_view': (payload: SceneInfo) => void,
-
-    // Scrolling in scene
-    'scroll_25': (payload: SceneInfo) => void,
-    'scroll_50': (payload: SceneInfo) => void,
-    'scroll_75': (payload: SceneInfo) => void,
-    'scroll_90': (payload: SceneInfo) => void,
-};
-
-export type AnalyticsEventsNames = keyof AnalyticsEventsMap;
-
-export interface AnalyticsClient {
-    name: string,
-    onEvent<Event extends keyof AnalyticsEventsMap>(
-        eventName: Event,
-        payload: Parameters<AnalyticsEventsMap[Event]>,
-    ): void;
-}
-
-export type AnyPayload = Record<string, any>;
-
-export interface AFunction {
-    <
-        EventName extends AnalyticsEventsNames,
-        P extends Partial<Parameters<AnalyticsEventsMap[EventName]>[0]>,
-    >(eventName: EventName, payload?: P): void,
-
-    addToPayload(payload: AnyPayload): void,
-
-    setPayload(payload: AnyPayload): void,
-
-    clearPayload(): void,
-}
+export * from '@24i/appstage-shared-analytics/dist/interface';

package/packages/driver-webos/src/DeviceWebos.ts

@@ -95,7 +95,15 @@ export class DeviceWebos extends DeviceBase {
     }
 
     initMouseActiveListener() {
+        // checks if mouse is already being used since startup - PRDSAPPSBW-1005
+        const mouseActiveAtStartupHandler = () => {
+            document.removeEventListener('mousemove', mouseActiveAtStartupHandler);
+            this.isMouseActive = true;
+            this.triggerEvent('mouseactive', { isMouseActive: true });
+        };
+        document.addEventListener('mousemove', mouseActiveAtStartupHandler);
         document.addEventListener('cursorStateChange', (event) => {
+            document.removeEventListener('mousemove', mouseActiveAtStartupHandler);
             // @ts-ignore - the LG event has this structure.
             this.isMouseActive = event.detail.visibility;
             this.triggerEvent('mouseactive', {

package/packages/epg/README.md

@@ -18,6 +18,7 @@ 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`)
@@ -80,10 +81,11 @@ 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 and breakpoints defined by `programTextModeResolver`
+- the Cell has also these following classes based on its width, breakpoints defined by `programTextModeResolver` and `smallestAllowedCellPx`
   - `.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,6 +17,7 @@ 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) {
@@ -40,6 +41,8 @@ export class Cell<
 
     widthPx = this.props.widthPx;
 
+    smallestAllowedCellPx = this.props.smallestAllowedCellPx;
+
     xOffsetPx = this.props.xOffsetPx;
 
     textMode = this.props.programTextModeResolver(this.widthPx);
@@ -137,6 +140,14 @@ 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();
@@ -169,6 +180,7 @@ export class Cell<
         this.item = item;
         this.setLiveClass();
         this.setTextModeClass(textMode);
+        this.setTooSmallClass();
         this.programComponent.current!.updateData(
             this.item!,
             textMode,
@@ -179,13 +191,15 @@ export class Cell<
 
     render() {
         const {
-            isLoading, xOffsetPx, widthPx, item, programTextModeResolver, renderProgram,
+            isLoading, xOffsetPx, widthPx, smallestAllowedCellPx,
+            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)}`}
+                className={`epg-cell ${getClassByTextMode(textMode)} ${tooSmall}`}
                 style={{
                     width: `${widthPx}px`,
                     ...getXOffsetStyleObject(xOffsetPx),

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

@@ -1,6 +1,7 @@
 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,
@@ -14,6 +15,7 @@ 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[] = [];
@@ -355,7 +357,8 @@ export class DataManager implements IDataManager {
         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) {
+            const breakLength = current.program!.startTime - previous.program!.endTime;
+            if (breakLength > 0 && breakLength >= MINIMUM_BREAK_LENGTH) {
                 data.splice(
                     i,
                     0,

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

@@ -83,6 +83,7 @@ export class Epg<
         timeProvider: Date.now,
         scrollStepMs: HALF_HOUR_IN_MS,
         timelineSectionWidthMs: HALF_HOUR_IN_MS,
+        smallestAllowedCellPx: 0,
         limitFromMs: -Infinity,
         limitToMs: Infinity,
         initialChannelIndex: 0,
@@ -382,7 +383,7 @@ export class Epg<
         const {
             datePickerProps, timelineWidthPx, channelHeaderWidthPx, scrollStepMs, rowHeightPx,
             timelineSectionWidthMs, timelineWidthMs, initialChannelIndex, plugins,
-            navigatableRows, additionalRows, programTextModeResolver,
+            navigatableRows, additionalRows, programTextModeResolver, smallestAllowedCellPx,
             renderDay, renderTime, renderProgram, renderChannelHeader, renderNowLineHeader,
         } = this.props;
         return (
@@ -442,6 +443,7 @@ 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/Row.tsx

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

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

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

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

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