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

package/packages/driver-tizen/src/TizenKeys.ts

@@ -1,7 +1,7 @@
 import { KeyMap, KeycodeKeyMap } from '@24i/bigscreen-sdk/driver-base';
-import { Tizen } from './ITizen';
+import { ITizen } from './types';
 
-declare const tizen: Tizen;
+declare const tizen: ITizen;
 
 type KeyCodeMap = { [key: string]: number };
 
@@ -49,7 +49,6 @@ export class TizenKeys {
         tizen.tvinputdevice.registerKey('PreviousChannel');
         tizen.tvinputdevice.registerKey('Info');
         tizen.tvinputdevice.registerKey('Guide');
-        tizen.tvinputdevice.registerKey('Caption');
     }
 
     buildKeyMap(keyCodeMap: KeyCodeMap) {
@@ -85,7 +84,6 @@ export class TizenKeys {
             EXIT: { keyCode: keyCodeMap.Exit },
             INFO: { keyCode: keyCodeMap.Info },
             GUIDE: { keyCode: keyCodeMap.Guide },
-            SUBTITLES: { keyCode: keyCodeMap.Caption },
         });
         this.keyMap = KeyMap.generateKeyCodeKeyMap();
     }

package/packages/driver-tizen/src/__mocks__/tizen.ts

@@ -8,10 +8,6 @@ export const webapis = {
         getModelCode: () => 'model code',
         getFirmware: () => 'firmware',
     },
-    adinfo: {
-        getTIFA: () => 'adid',
-        isLATEnabled: () => true,
-    },
 };
 
 export const application = {
@@ -28,7 +24,12 @@ export const tizen = {
         unregisterKey: () => {},
         registerKey: () => {},
     },
-    systeminfo: {
-        getPropertyValue: async () => {},
-    },
 };
+
+declare global {
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    interface Window {
+        webapis: typeof webapis,
+        tizen: typeof tizen,
+    }
+}

package/packages/driver-tizen/src/constants.ts

@@ -1,3 +1,197 @@
+/* eslint-disable no-magic-numbers */
+
 export const VENDOR = 'Samsung Tizen';
 
-export const DPI_SUCCESS = '100000';
+// MARK: TVAudioControl
+
+export type AudioOutputMode = (
+    | 'PCM'
+    | 'DOLBY'
+    | 'DTS'
+    | 'AAC'
+);
+
+export type AudioBeepType = (
+    | 'UP'
+    | 'DOWN'
+    | 'LEFT'
+    | 'RIGHT'
+    | 'PAGE_LEFT'
+    | 'PAGE_RIGHT'
+    | 'BACK'
+    | 'SELECT'
+    | 'CANCEL'
+    | 'KEYPAD'
+    | 'KEYPAD_ENTER'
+    | 'KEYPAD_DEL'
+    | 'MOVE'
+    | 'PREPARING'
+);
+
+// MARK: SystemInfo
+
+export type SystemInfoPropertyId = (
+    | 'BATTERY'
+    | 'CPU'
+    | 'STORAGE'
+    | 'DISPLAY'
+    | 'DEVICE_ORIENTATION'
+    | 'BUILD'
+    | 'LOCALE'
+    | 'NETWORK'
+    | 'WIFI_NETWORK'
+    | 'ETHERNET_NETWORK'
+    | 'CELLULAR_NETWORK'
+    | 'NET_PROXY_NETWORK'
+    | 'SIM'
+    | 'PERIPHERAL'
+    | 'MEMORY'
+    | 'VIDEOSOURCE'
+    | 'CAMERA_FLASH'
+    | 'ADS'
+    | 'SERVICE_COUNTRY'
+    | 'SOURCE_INFO'
+    | 'PANEL'
+);
+
+export type SystemInfoNetworkType = (
+    | 'NONE'
+    | '2G'
+    | '2.5G'
+    | '3G'
+    | '4G'
+    | 'WIFI'
+    | 'ETHERNET'
+    | 'NET_PROXY'
+    | 'UNKNOWN'
+);
+
+export type SystemInfoWifiSecurityMode = (
+    | 'NONE'
+    | 'WEP'
+    | 'WPA_PSK'
+    | 'WPA2_PSK'
+    | 'EAP'
+);
+
+export type SystemInfoWifiEncryptionType = (
+    | 'NONE'
+    | 'WEP'
+    | 'TKIP'
+    | 'AES'
+    | 'TKIP_AES_MIXED'
+);
+
+export type SystemInfoNetworkIpMode = (
+    | 'NONE'
+    | 'STATIC'
+    | 'DYNAMIC'
+    | 'AUTO'
+    | 'FIXED'
+);
+
+export type SystemInfoDeviceOrientationStatus = (
+    | 'PORTRAIT_PRIMARY'
+    | 'PORTRAIT_SECONDARY'
+    | 'LANDSCAPE_PRIMARY'
+    | 'LANDSCAPE_SECONDARY'
+);
+
+export type SystemInfoSimState = (
+    | 'ABSENT'
+    | 'INITIALIZING'
+    | 'READY'
+    | 'PIN_REQUIRED'
+    | 'PUK_REQUIRED'
+    | 'NETWORK_LOCKED'
+    | 'SIM_LOCKED'
+    | 'UNKNOWN'
+);
+
+export type SystemInfoProfile = 'MOBILE_FULL' | 'MOBILE_WEB' | 'MOBILE' | 'WEARABLE' | 'TV';
+
+export type SystemInfoLowMemoryStatus = 'NORMAL' | 'WARNING';
+
+export type SystemInfoVideoSourceType = (
+    | 'TV'
+    | 'AV'
+    | 'SVIDEO'
+    | 'COMP'
+    | 'PC'
+    | 'HDMI'
+    | 'SCART'
+    | 'DVI'
+    | 'MEDIA'
+);
+
+// MARK: ProductInfo
+
+export enum ProductInfoConfigKey {
+    CONFIG_KEY_DATA_SERVICE = 0,
+    CONFIG_KEY_SERVICE_COUNTRY = 1,
+}
+
+export enum ProductInfoNoGlass3dSupport {
+    NO_GLASS_3D_NOT_SUPPORTED = 0,
+    NO_GLASS_3D_SUPPORTED = 1,
+}
+
+export enum ProductInfoSiServerType {
+    SI_TYPE_OPERATIING_SERVER = 0,
+    SI_TYPE_DEVELOPMENT_SERVER = 1,
+    SI_TYPE_DEVELOPING_SERVER = 2,
+}
+
+// MARK: Network
+
+export enum NetworkActiveConnectionType {
+    DISCONNECTED = 0,
+    WIFI = 1,
+    CELLULAR = 2,
+    ETHERNET = 3,
+}
+
+export enum NetworkIpMode {
+    NONE = 0,
+    STATIC = 1,
+    DYNAMIC = 2,
+    AUTO = 3,
+    FIXED = 4,
+    UNKNOWN = 5,
+}
+
+export enum NetworkState {
+    LAN_CABLE_ATTACHED = 1,
+    LAN_CABLE_DETACHED = 2,
+    LAN_CABLE_STATE_UNKNOWN = 3,
+    GATEWAY_CONNECTED = 4,
+    GATEWAY_DISCONNECTED = 5,
+    WIFI_MODULE_STATE_ATTACHED = 6,
+    WIFI_MODULE_STATE_DETACHED = 7,
+    WIFI_MODULE_STATE_UNKNOWN = 8,
+}
+
+export enum NetworkWiFiSecurityMode {
+    WEP = 1,
+    WPA_PSK = 2,
+    WPA2_PSK = 3,
+    EAP = 4,
+    NONE = 5,
+    UNKNOWN = 6,
+}
+
+export enum NetworkWiFiEncryptionType {
+    WEP = 1,
+    TKIP = 2,
+    AES = 3,
+    TKIP_AES_MIXED = 4,
+    NONE = 5,
+    UNKNOWN = 6,
+}
+
+// MARK: AppCommon
+
+export enum AppCommonScreenSaverState {
+    SCREEN_SAVER_OFF = 0,
+    SCREEN_SAVER_ON = 1,
+}

package/packages/driver-tizen/src/types.ts

@@ -0,0 +1,14 @@
+export {
+    ITizen,
+    SystemInfo,
+    TVAudioControl,
+    TVInputDevice,
+    TizenApplication,
+    WebSetting,
+} from './ITizen';
+export {
+    AppCommon,
+    IWebapis,
+    Network,
+    ProductInfo,
+} from './IWebapis';

package/packages/driver-vidaa/src/DeviceVidaa.ts

@@ -3,10 +3,7 @@ import {
     ConnectionType,
     ScreenSaverStatus,
     VolumeRange,
-    IAPSuccessPayload,
-    IAPPurchaseProductData,
 } from '@24i/bigscreen-sdk/driver-base';
-import { generateUuid } from '@24i/bigscreen-sdk/utils';
 import { NetworkConnectionTypeMap } from './constants';
 import { getPlatformInfo } from './formatUserAgent';
 import { HisenseVidaaApi } from './types';
@@ -46,7 +43,7 @@ export class DeviceVidaa extends DeviceBase {
     }
 
     async getManufacturerName(): Promise<string> {
-        return window.Hisense_GetBrand() || '';
+        return 'Hisense';
     }
 
     async getPlatformName(): Promise<string> {
@@ -59,8 +56,7 @@ export class DeviceVidaa extends DeviceBase {
     }
 
     async getDeviceName(): Promise<string> {
-        const manufacturerName = await this.getManufacturerName();
-        return `${manufacturerName} VIDAA ${await this.getModelName()}`.trim();
+        return `Hisense VIDAA ${await this.getModelName()}`.trim();
     }
 
     async getModelName(): Promise<string> {
@@ -83,17 +79,6 @@ export class DeviceVidaa extends DeviceBase {
         return window.Hisense_GetDeviceID() || '';
     }
 
-    async getAdInfo() {
-        const adId = generateUuid();
-        const type = 'sessionid';
-        const latEnabled = null;
-        return { adId, type, latEnabled };
-    }
-
-    async getOsLanguage() {
-        return (window.navigator.language || '').slice(0, 2);
-    }
-
     async getVolume(): Promise<number> {
         return VolumeRange.UNSUPPORTED;
     }
@@ -152,16 +137,4 @@ export class DeviceVidaa extends DeviceBase {
         // not supported on Hisense VIDAA platform
         return '';
     }
-
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    async purchaseProduct(data: IAPPurchaseProductData): Promise<IAPSuccessPayload> {
-        // not supported
-        throw new Error('Not supported');
-    }
-
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    async cancelSubscription(data: IAPPurchaseProductData): Promise<void> {
-        // not supported
-        throw new Error('Not supported');
-    }
 }

package/packages/driver-vidaa/src/__mocks__/vidaa.ts

@@ -1,7 +1,7 @@
 import { HisenseVidaaApi, HisenseVidaaKeys } from '../types';
 
 export const mockHisenseVidaaApi: HisenseVidaaApi = {
-    Hisense_GetBrand: () => 'Hisense',
+    Hisense_GetBrand: () => 'hisense',
     Hisense_GetModelName: () => '5U61FQEVS',
     Hisense_GetFirmWareVersion: () => 'V0000.01.00Q.L0301',
     Hisense_Get4KSupportState: () => true,

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

@@ -49,8 +49,6 @@ export const getKeyMap = () => {
         CHANNEL_UP: { keyCode: window.VK_CHANNEL_UP || 427 },
         CHANNEL_DOWN: { keyCode: window.VK_CHANNEL_DOWN || 428 },
         INFO: { keyCode: window.VK_INFO },
-        // VK_SUBTITLE defined on 2019, not on 2021.
-        SUBTITLES: { keyCode: window.VK_SUBTITLE || 460 },
     });
     return KeyMap.generateKeyCodeKeyMap();
 };

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

@@ -4,8 +4,6 @@ import {
     ScreenSaverStatus,
     VolumeRange,
     ExitOptions,
-    IAPSuccessPayload,
-    IAPPurchaseProductData,
 } from '@24i/bigscreen-sdk/driver-base';
 import { Storage } from '@24i/bigscreen-sdk/storage';
 import { initWebOSTVjs } from './webOSTVjs/webOSTVjs';
@@ -97,15 +95,7 @@ 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', {
@@ -247,39 +237,6 @@ export class DeviceWebos extends DeviceBase {
         return this.duid!;
     }
 
-    async getAdInfo() {
-        const adId = await this.getLgDeviceId() ?? null;
-        const type = 'lgudid';
-        const latEnabled = null;
-        return { adId, type, latEnabled };
-    }
-
-    async getOsLanguage(): Promise<string> {
-        return new Promise<string>((resolve) => {
-            webOS.service.request(ApiUrls.SETTINGS_SERVICE, {
-                method: 'getSystemSettings',
-                parameters: {
-                    keys: ['localeInfo'],
-                },
-                onSuccess: (response) => {
-                    if (response.returnValue) {
-                        const uiLanguage = response?.settings?.localeInfo?.locales?.UI;
-                        resolve((uiLanguage || '').slice(0, 2));
-                    }
-                    resolve('');
-                },
-                onFailure: (error) => {
-                    // ex. returns error for webOS 1.0, 2.0 as not supported
-                    const { errorCode = '0', errorText } = error || {};
-                    console.error(
-                        `[DeviceWebos] getOsLanguage onFailure: [${errorCode}] ${errorText}`,
-                    );
-                    resolve('');
-                },
-            });
-        });
-    }
-
     async getVolume() {
         // TODO: not yet implemented
         return VolumeRange.UNSUPPORTED;
@@ -345,16 +302,4 @@ export class DeviceWebos extends DeviceBase {
         // Not supported on LG webOS platform (for date 12.4.2021, latest webOS TV 5.x)
         return '';
     }
-
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    async purchaseProduct(data: IAPPurchaseProductData): Promise<IAPSuccessPayload> {
-        // not supported
-        throw new Error('Not supported');
-    }
-
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    async cancelSubscription(data: IAPPurchaseProductData): Promise<void> {
-        // not supported
-        throw new Error('Not supported');
-    }
 }

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

@@ -63,39 +63,6 @@ const mockServices = {
                 callbackName: 'onSuccess',
             },
         },
-        'luna://com.webos.settingsservice#getSystemSettings': {
-            responses: {
-                success: {
-                    returnValue: true,
-                    method: 'getSystemSettings',
-                    settings: {
-                        localeInfo: {
-                            locales: {
-                                UI: 'en-GB',
-                                TV: 'en-GB',
-                                FMT: 'en-GB',
-                                NLP: 'en-GB',
-                                STT: 'fr-FR',
-                                AUD: 'fr-FR',
-                                AUD2: 'en-GB',
-                            },
-                            clock: 'locale',
-                            keyboards: ['en'],
-                            timezone: '',
-                        },
-                    },
-                },
-                error: {
-                    returnValue: false,
-                    errorCode: 'ERR.001',
-                    errorText: 'There is no matched result from DB',
-                },
-            },
-            selected: {
-                responseId: 'success',
-                callbackName: 'onSuccess',
-            },
-        },
         'luna://com.webos.service.connectionmanager#getStatus': {
             responses: {
                 successWired: {

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

@@ -17,5 +17,4 @@ export const ApiUrls = {
     CONNECTION_MANAGER_WEBOS: 'luna://com.webos.service.connectionmanager',
     SYSTEM_PROPERTY: 'luna://com.webos.service.tv.systemproperty',
     SM: 'luna://com.webos.service.sm',
-    SETTINGS_SERVICE: 'luna://com.webos.settingsservice',
 } as const;

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

@@ -2,9 +2,8 @@ import { generateKeyCodeKeyMap, overrideValues } from '@24i/bigscreen-sdk/driver
 
 export const getKeyMap = () => {
     overrideValues({
-        BACK: { keyCode: 461, key: 'RCUBack' },
+        BACK: { keyCode: 461 },
         TXT: { keyCode: 110 },
-        SUBTITLES: { keyCode: 460 },
     });
     return generateKeyCodeKeyMap();
 };

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

@@ -331,41 +331,11 @@ export type DuidOptions = {
     onComplete?: (response: NegativeResponse | DuidResponse) => any,
 };
 
-type SettingsService = {
-    method: 'getSystemSettings',
-    settings: {
-        localeInfo: {
-            locales: {
-                UI: string,
-                TV: string,
-                FMT: string,
-                NLP: string,
-                STT: string,
-                AUD: string,
-                AUD2: string,
-            },
-            clock: string,
-            keyboards: string[],
-            timezone: string,
-        },
-    },
-};
-export type SettingsServiceResponse = PositiveResponse & SettingsService;
-export type SettingsServiceOptions = {
-    method: 'getSystemSettings',
-    parameters: {
-        keys: ['localeInfo'],
-    },
-    onSuccess?: (response: NegativeResponse | SettingsServiceResponse) => any,
-    onFailure?: (response: NegativeResponse) => any,
-};
-
 interface RequestTypeMap {
     [ApiUrls.CONNECTION_MANAGER_PALM]: ConnectionManagerOptions,
     [ApiUrls.CONNECTION_MANAGER_WEBOS]: ConnectionManagerOptions,
     [ApiUrls.SYSTEM_PROPERTY]: SystemPropertyOptions,
     [ApiUrls.SM]: DuidOptions,
-    [ApiUrls.SETTINGS_SERVICE]: SettingsServiceOptions,
 }
 
 // MARK: IPalmSystem

package/packages/driver-xbox/src/DeviceXbox.ts

@@ -1,10 +1,4 @@
-import {
-    DeviceBase,
-    IAPPurchaseProductData,
-    IAPSuccessPayload,
-    ScreenSaverStatus,
-    VolumeRange,
-} from '@24i/bigscreen-sdk/driver-base';
+import { DeviceBase, ScreenSaverStatus, VolumeRange } from '@24i/bigscreen-sdk/driver-base';
 import { runAsync } from '@24i/bigscreen-sdk/utils/timers';
 import { generateUuid } from '@24i/bigscreen-sdk/utils/generateUuid';
 import { find } from '@24i/bigscreen-sdk/perf-utils/array';
@@ -158,17 +152,6 @@ export class DeviceXbox extends DeviceBase {
         return uuid;
     }
 
-    async getAdInfo() {
-        const adId = generateUuid();
-        const type = 'sessionid';
-        const latEnabled = null;
-        return { adId, type, latEnabled };
-    }
-
-    async getOsLanguage() {
-        return (window.navigator.language || '').slice(0, 2);
-    }
-
     async getVolume() {
         return VolumeRange.UNSUPPORTED;
     }
@@ -245,16 +228,4 @@ export class DeviceXbox extends DeviceBase {
     getDeviceClass(): string {
         return 'xbox';
     }
-
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    async purchaseProduct(data: IAPPurchaseProductData): Promise<IAPSuccessPayload> {
-        // not supported
-        throw new Error('Not supported');
-    }
-
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    async cancelSubscription(data: IAPPurchaseProductData): Promise<void> {
-        // not supported
-        throw new Error('Not supported');
-    }
 }

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