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

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@24i/bigscreen-sdk",
-    "version": "1.0.12-alpha.2237",
+    "version": "1.0.12-alpha.2260",
     "description": "SmartApps BIGscreen SDK monorepo",
     "main": "index.js",
     "scripts": {
@@ -37,14 +37,18 @@
     },
     "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",
         "csstype": "^3.1.1",
-        "lottie-web": "5.9.6",
+        "lottie-web": "5.10.2",
         "prop-types": "^15.8.1"
     },
     "devDependencies": {
@@ -53,31 +57,31 @@
         "@24i/smartapps-bigscreen-changelog-generator": "0.17.0",
         "@babel/core": "^7.19.0",
         "@babel/preset-env": "^7.20.2",
-        "@types/fs-extra": "^9.0.13",
+        "@types/fs-extra": "^11.0.1",
         "@types/inquirer": "^9.0.3",
         "@types/jest": "^29.2.3",
         "@types/minimist": "^1.2.2",
         "@types/node": "^18.7.18",
         "@types/react": "^18.0.26",
-        "babel-jest": "^29.0.3",
+        "babel-jest": "^29.4.1",
         "chalk": "^5.2.0",
         "coveralls": "^3.1.1",
         "cross-env": "^7.0.3",
-        "fs-extra": "^10.1.0",
+        "fs-extra": "^11.1.0",
         "full-icu": "^1.5.0",
         "identity-obj-proxy": "^3.0.0",
         "inquirer": "^9.1.4",
         "jest": "^29.3.1",
         "jest-canvas-mock": "^2.4.0",
         "jest-environment-jsdom": "^29.0.3",
-        "minimist": "^1.2.6",
+        "minimist": "^1.2.7",
         "patch-package": "^6.5.0",
         "sass": "^1.54.9",
         "sass-true": "^6.1.0",
         "ts-jest": "^29.0.3",
         "ts-node": "^10.9.1",
         "tsconfig-paths-jest": "0.0.1",
-        "typescript": "^4.8.3"
+        "typescript": "^4.9.5"
     },
     "exports": {
         "./adobe-heartbeat": "./packages/adobe-heartbeat/src/index.ts",

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/developer-tools/src/DeveloperToolsService/DeveloperToolsList.tsx

@@ -7,6 +7,7 @@ import {
 import { BACK } from '@24i/bigscreen-sdk/device/keymap';
 import { DISPLAY_NONE, getDisplayToggler, stopEvent } from '@24i/bigscreen-sdk/utils';
 import { map } from '@24i/bigscreen-sdk/perf-utils/array';
+import { Storage } from '@24i/bigscreen-sdk/storage';
 import { IDeveloperTool, DeveloperToolProps } from '../IDeveloperTool';
 import { DeveloperToolItem } from './DeveloperToolItem';
 import { reloadApp } from '../utils/reload';
@@ -39,6 +40,11 @@ export class DeveloperToolsList extends Component<Props> {
         reloadApp();
     };
 
+    async onClearDataToolPress() {
+        await Storage.clear();
+        reloadApp();
+    }
+
     onKeyDown = (event: KeyboardEvent) => {
         if (BACK.is(event)) {
             const { onBack } = this.props;
@@ -90,6 +96,11 @@ export class DeveloperToolsList extends Component<Props> {
                                 />
                             );
                         })}
+                        <DeveloperToolItem
+                            ref={this.getNavigationRef()}
+                            label="Clear data"
+                            onPress={this.onClearDataToolPress}
+                        />
                         <DeveloperToolItem
                             ref={this.getNavigationRef()}
                             label="Restart app"

package/packages/device/src/getKeyDigit.ts

@@ -1,8 +1,8 @@
 import { KeycodeKeyMap } from '@24i/bigscreen-sdk/driver-base';
 
 export const createGetKeyDigit = (
-    getKeyMap: () => Partial<KeycodeKeyMap>): (event: KeyboardEvent
-    ) => number | undefined => {
+    getKeyMap: () => Partial<KeycodeKeyMap>,
+): (event: KeyboardEvent) => number | undefined => {
     const {
         NUM_0, NUM_1, NUM_2, NUM_3, NUM_4, NUM_5, NUM_6, NUM_7, NUM_8, NUM_9,
         KP_0, KP_1, KP_2, KP_3, KP_4, KP_5, KP_6, KP_7, KP_8, KP_9,

package/packages/driver-androidtv/src/DeviceAndroidTV.ts

@@ -6,7 +6,7 @@ import {
 } from '@24i/bigscreen-sdk/driver-base';
 import { IJavaScriptBridge, DeviceInfo } from './types';
 import { getFirmware } from './formatUserAgent';
-import { getKeyMap } from './keymap';
+import { getKeyMap, AndroidKeyMap } from './keymap';
 
 interface CustomKeyboardEvent extends KeyboardEvent {
     /** Flag indicating that the driver has already re-emitted this event. */
@@ -69,6 +69,8 @@ export class DeviceAndroidTV extends DeviceBase {
         if (key === 'ColorF2Yellow') keyCode = this.keyMap.YELLOW;
         if (key === 'ColorF3Blue') keyCode = this.keyMap.BLUE;
         if (key === 'ClosedCaptionToggle') keyCode = this.keyMap.SUBTITLES;
+        if (keyCode === AndroidKeyMap.STOP) keyCode = this.keyMap.STOP;
+        if (keyCode === AndroidKeyMap.PAUSE) keyCode = this.keyMap.PAUSE;
 
         if (keyCode === this.keyMap.BACK
             || keyCode === this.keyMap.STOP

package/packages/driver-androidtv/src/keymap.ts

@@ -4,11 +4,24 @@ import { KeyMap } from '@24i/bigscreen-sdk/driver-base';
 export const getKeyMap = () => {
     KeyMap.overrideValues({
         BACK: { keyCode: 4 },
-        STOP: { keyCode: 178 },
+        STOP: { keyCode: 86 },
         FF: { keyCode: 90 },
         REW: { keyCode: 89 },
         PLAY: { keyCode: 126 },
+        PAUSE: { keyCode: 127 },
+        PLAYPAUSE: { keyCode: 85 },
         SUBTITLES: { keyCode: 175 },
     });
     return KeyMap.generateKeyCodeKeyMap();
 };
+
+/**
+ * For the specific AndroidTV devices like Sony Bravia or Nvidia Shield
+ * there are different KeyCodes for some buttons than on other platforms.
+ * In that case we need to re-map this specific KeyCodes to the
+ * same values as we using in generic KeyMap list for the AndroidTV.
+ */
+export const AndroidKeyMap = {
+    STOP: 178,
+    PAUSE: 85,
+};

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/driver-xbox/src/keymap.ts

@@ -4,7 +4,7 @@
 import { KeyMap } from '@24i/bigscreen-sdk/driver-base';
 
 export const getKeyMap = () => {
-    const { VirtualKey } = window.Windows?.System;
+    const { VirtualKey } = window.Windows.System;
     KeyMap.overrideValues({
         LEFT: {
             keyCode: VirtualKey.left,

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),