@24i/bigscreen-sdk 1.0.52 → 1.0.53-alpha.2837

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

@@ -1,7 +1,7 @@
 import { KeyMap, KeycodeKeyMap } from '@24i/bigscreen-sdk/driver-base';
-import { ITizen } from './types';
+import { Tizen } from './ITizen';
 
-declare const tizen: ITizen;
+declare const tizen: Tizen;
 
 type KeyCodeMap = { [key: string]: number };
 

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

@@ -32,11 +32,3 @@ export const tizen = {
         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,197 +1,3 @@
-/* eslint-disable no-magic-numbers */
-
 export const VENDOR = 'Samsung Tizen';
 
-// 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,
-}
+export const DPI_SUCCESS = '100000';

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

@@ -3,6 +3,8 @@ import {
     ConnectionType,
     ScreenSaverStatus,
     VolumeRange,
+    IAPSuccessPayload,
+    IAPPurchaseProductData,
 } from '@24i/bigscreen-sdk/driver-base';
 import { generateUuid } from '@24i/bigscreen-sdk/utils';
 import { NetworkConnectionTypeMap } from './constants';
@@ -150,4 +152,16 @@ 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-webos/src/DeviceWebos.ts

@@ -4,6 +4,8 @@ import {
     ScreenSaverStatus,
     VolumeRange,
     ExitOptions,
+    IAPSuccessPayload,
+    IAPPurchaseProductData,
 } from '@24i/bigscreen-sdk/driver-base';
 import { Storage } from '@24i/bigscreen-sdk/storage';
 import { initWebOSTVjs } from './webOSTVjs/webOSTVjs';
@@ -343,4 +345,16 @@ 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-xbox/src/DeviceXbox.ts

@@ -1,4 +1,10 @@
-import { DeviceBase, ScreenSaverStatus, VolumeRange } from '@24i/bigscreen-sdk/driver-base';
+import {
+    DeviceBase,
+    IAPPurchaseProductData,
+    IAPSuccessPayload,
+    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';
@@ -239,4 +245,16 @@ 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/input/src/Input.tsx

@@ -106,6 +106,12 @@ export class Input extends Component<Props> implements IFocusable {
 
     setValue(value: string) {
         this.nativeInput.current!.value = value;
+        setText(this.text, this.filterText(value));
+        if (value.length === 0) {
+            this.showPlaceholder();
+        } else {
+            this.hidePlaceholder();
+        }
     }
 
     setType(type: Props['type']) {

package/packages/list/DoubleList/README.md

@@ -0,0 +1,105 @@
+---
+id: README
+title: DoubleList
+hide_title: true
+sidebar_label: DoubleList
+---
+
+# DoubleList
+
+`DoubleList` renders a dataset into two synchronized rows (TOP and BOTTOM) for big-screen navigation.
+
+Internally it splits the original `data` into:
+- TOP row: items from original indices `0, 2, 4, ...`
+- BOTTOM row: items from original indices `1, 3, 5, ...`
+
+## List Specific Props
+- `firstScrollStep` - value in pixels to move on the first scroll
+- `scrollStep` - value to move on other scrolls (should be equal to item width + its spacing)
+- `rowClassName` - CSS class applied to each row
+- `animation` - animation configuration overrides
+
+## Default Animation Configuration
+- normal: 700ms with easeOutQuart
+
+## Usage
+
+```tsx
+import { createRef } from '@24i/bigscreen-sdk/jsx';
+import { DoubleList } from '@24i/bigscreen-sdk/list/DoubleList';
+
+type Item = { id: string; title: string };
+
+const listRef = createRef<DoubleList<any, Item>>();
+
+export const Example = ({ items }: { items: Item[] }) => (
+    <DoubleList<any, Item>
+        ref={listRef as any}
+        data={items}
+        visibleItems={6}
+        firstScrollStep={50}
+        scrollStep={100}
+        animate={true}
+        renderItem={(item, columnIndex, ref) => (
+            <div ref={ref as any} className="card">
+                {item.title}
+            </div>
+        )}
+        onFocusChanged={(ref, columnIndex) => {
+            // `columnIndex` is row-local (column within the active row).
+            //
+            // To access the component-tracked absolute index, read it from the instance:
+            const absoluteIndex = (listRef.current as any)?.absoluteIndex;
+            // Use `absoluteIndex` for analytics/selection.
+        }}
+    />
+);
+```
+
+### onFocusChanged
+
+`onFocusChanged(itemRef, index)` receives:
+- `itemRef`: reference to the focused item
+- `index`: **row-local index** (column index within the focused row)
+
+> `DoubleList` tracks an internal `absoluteIndex` value, but it is **not** passed as the callback argument.
+> Read it from the `DoubleList` instance (via `ref`) after focus updates.
+
+## Indices
+
+### Column index (row-local)
+
+Used by:
+- `renderItem(item, columnIndex, ref)`
+- `onFocusChanged(ref, columnIndex)`
+
+### Absolute index (tracked by the component)
+
+`DoubleList` maintains `absoluteIndex` to represent the position in the original `data[]`.
+
+To consume it externally:
+- keep a ref to the component
+- read `ref.current.absoluteIndex` after focus updates
+
+---
+
+## Instance methods (ref API)
+
+`DoubleList` implements `DoubleRowList<T, U>`:
+
+- `appendData(data: U[]): void`
+- `prependData(data: U[]): void`
+- `scrollTo(index: number, animate?: boolean): void`
+- `focus(options?: FocusOptions): void`
+
+Example:
+
+```tsx
+listRef.current?.scrollTo(10, true);
+listRef.current?.focus();
+```
+
+## Notes
+
+- If `data.length` is odd, TOP row will contain one more item than BOTTOM row.
+- For external analytics/selection logic that needs original `data[]` positions, use the component’s tracked `absoluteIndex` via `ref`.

package/packages/list/DoubleList/index.ts

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

package/packages/list/src/DoubleList/DoubleList.tsx

@@ -0,0 +1,267 @@
+import { Component, DeclareProps } from '@24i/bigscreen-sdk/jsx';
+import { noop } from '@24i/bigscreen-sdk/utils/noop';
+import { device } from '@24i/bigscreen-sdk/device';
+import { ListBase } from '../Base';
+import { RowType, DirectionType, DIRECTION, ROW, DoubleRowList, Props } from './interface';
+import { Item } from '../types';
+import { DoubleListAdapter } from './DoubleListAdapter';
+import { CONFIG, VISIBLE_ITEMS_OFFSET } from './config';
+
+export class DoubleList<T extends Item<U>, U>
+    extends Component<Props<T, U>> implements DoubleRowList<T, U> {
+    /*
+     * Adapter managing the two row lists and their controllers
+    */
+    adapter: DoubleListAdapter<T, U>;
+
+    /**
+     * Track which row is currently active
+    */
+    currentRow: RowType = ROW.TOP;
+
+    /**
+     * Track column position for vertical navigation
+    */
+    columnIndex = 0;
+
+    /**
+     * Track absolute index for onFocusChanged callback
+     */
+    absoluteIndex: number | null = -1;
+
+    static defaultProps = {
+        animation: CONFIG.defaultAnimation,
+        // eslint-disable-next-line react/default-props-match-prop-types
+        horizontal: true,
+        // eslint-disable-next-line react/default-props-match-prop-types
+        onFocusChanged: noop,
+        // eslint-disable-next-line react/default-props-match-prop-types
+        animate: CONFIG.animate,
+    };
+
+    declare props: DeclareProps<Props<T, U>, typeof DoubleList.defaultProps>;
+
+    constructor(props: Props<T, U>) {
+        super(props);
+        this.adapter = new DoubleListAdapter<T, U>(props);
+    }
+
+    componentDidMount(): void {
+        this.adapter.mount();
+        this.absoluteIndex = -1;
+    }
+
+    componentWillUnmount(): void {
+        this.adapter.unmount();
+        this.absoluteIndex = null;
+    }
+
+    /**
+     * Private helper: Switch between rows at the same column
+     * @param targetRow - The row to switch to (ROW.TOP or ROW.BOTTOM)
+     */
+    private switchToRow = (targetRow: RowType): boolean => {
+        const { data } = this.props;
+        const targetAbsoluteIndex = this.adapter.getAbsoluteIndex(targetRow, this.columnIndex);
+
+        // Check if target item exists in data
+        if (targetAbsoluteIndex >= data.length) {
+            return false;
+        }
+
+        const targetList = this.adapter.getList(targetRow);
+        const targetController = this.adapter.getController(targetRow);
+
+        if (!targetList) {
+            return false;
+        }
+        targetList.setIndex(this.columnIndex);
+        this.currentRow = targetRow;
+        this.absoluteIndex = targetAbsoluteIndex;
+
+        targetController.focusCurrentItem();
+        return true;
+    };
+
+    /**
+     * Private helper: Handle DOWN key navigation
+     * @param event - The keyboard event
+     */
+    private handleDownKey = (event: KeyboardEvent): boolean => {
+        if (this.currentRow !== ROW.TOP) {
+            return false;
+        }
+
+        const switched = this.switchToRow(ROW.BOTTOM);
+        if (switched) {
+            event.preventDefault();
+            event.stopPropagation();
+        }
+        return switched;
+    };
+
+    /**
+     * Private helper: Handle UP key navigation
+     * @param event - The keyboard event
+     */
+    private handleUpKey = (event: KeyboardEvent): boolean => {
+        if (this.currentRow !== ROW.BOTTOM) {
+            return false;
+        }
+
+        const switched = this.switchToRow(ROW.TOP);
+        if (switched) {
+            event.preventDefault();
+            event.stopPropagation();
+        }
+        return switched;
+    };
+
+    /**
+     * Handle keyboard events
+     * Intercepts UP/DOWN keys for vertical navigation
+     * Delegates LEFT/RIGHT keys to forward/backward handlers
+     * @param event - The keyboard event
+     */
+    handleKeyDown = (event: KeyboardEvent): boolean => {
+        const { horizontal } = this.props;
+        if (!horizontal) return false;
+        if (device.isDirectionDown(event)) return this.handleDownKey(event);
+        if (device.isDirectionUp(event)) return this.handleUpKey(event);
+        return false;
+    };
+
+    /**
+     * Handle LEFT/RIGHT navigation
+     * @param direction
+     * @returns boolean - whether the move was successful
+     */
+    move = (direction: DirectionType): boolean => {
+        const { visibleItems, firstScrollStep, scrollStep } = this.props;
+        const { controller, list } = this.adapter.getActiveRow(this.currentRow);
+        const { controller: inactiveController } = this.adapter.getInactiveRow(this.currentRow);
+        const currentList = list.current;
+
+        if (!currentList) return false;
+
+        const delta = direction === DIRECTION.FORWARD ? 1 : -1;
+        const nextIndex = currentList.index + delta;
+        if (nextIndex < 0 || nextIndex > currentList.data.length - 1) return false;
+
+        currentList.index = nextIndex;
+
+        if (delta > 0) {
+            const scrollTargetIndex = currentList.index - visibleItems + VISIBLE_ITEMS_OFFSET;
+            if (scrollTargetIndex > controller.scrollIndex) {
+                controller.scroll(scrollTargetIndex);
+                inactiveController.scroll(scrollTargetIndex);
+            }
+        } else {
+            const offset = firstScrollStep < scrollStep ? 1 : 0;
+            if (currentList.index - offset < controller.scrollIndex) {
+                controller.scroll(currentList.index);
+                inactiveController.scroll(currentList.index);
+            }
+        }
+
+        this.columnIndex = currentList.index;
+        this.absoluteIndex = this.adapter.getAbsoluteIndex(this.currentRow, this.columnIndex);
+        controller.focusCurrentItem();
+        return true;
+    };
+
+    forward = (): boolean => this.move(DIRECTION.FORWARD);
+
+    backward = (): boolean => this.move(DIRECTION.BACKWARD);
+
+    appendData = (data: U[]): void => this.adapter.appendData(data);
+
+    prependData = (data: U[]): void => this.adapter.prependData(data);
+
+    focus(options?: FocusOptions) {
+        const { controller } = this.adapter.getActiveRow(this.currentRow);
+        this.absoluteIndex = this.adapter.getAbsoluteIndex(this.currentRow, this.columnIndex);
+        controller.focusCurrentItem(options);
+    }
+
+    scrollTo(index: number, animate?: boolean): void {
+        const { data, visibleItems, firstScrollStep, scrollStep } = this.props;
+
+        const safeIndex = Math.max(0, Math.min(index, data.length - 1));
+        const targetRow = (safeIndex % 2 === 0) ? ROW.TOP : ROW.BOTTOM;
+        const targetColumnIndex = Math.floor(safeIndex / 2);
+
+        // Keep internal state consistent with requested target.
+        this.currentRow = targetRow;
+        this.columnIndex = targetColumnIndex;
+        this.absoluteIndex = safeIndex;
+
+        const { topRowList, bottomRowList } = this.adapter;
+        const topList = topRowList.current;
+        const bottomList = bottomRowList.current;
+
+        if (!topList || !bottomList) return;
+
+        // Keep both row indices aligned so switching rows preserves column.
+        topRowList.setIndex(Math.min(targetColumnIndex, Math.max(0, topList.data.length - 1)));
+        const bottomMaxIndex = Math.max(0, bottomList.data.length - 1);
+        bottomRowList.setIndex(Math.min(targetColumnIndex, bottomMaxIndex));
+
+        const targetController = this.adapter.getController(targetRow);
+
+        // Scroll both controllers in sync using the same logic as forward/backward.
+        const offset = firstScrollStep < scrollStep ? 1 : 0;
+        if (targetColumnIndex >= targetController.scrollIndex) {
+            const scrollTargetIndex = targetColumnIndex - visibleItems + VISIBLE_ITEMS_OFFSET;
+            if (scrollTargetIndex > targetController.scrollIndex) {
+                topRowList.controller.scroll(scrollTargetIndex, animate);
+                bottomRowList.controller.scroll(scrollTargetIndex, animate);
+            }
+        } else if (targetColumnIndex - offset < targetController.scrollIndex) {
+            topRowList.controller.scroll(targetColumnIndex, animate);
+            bottomRowList.controller.scroll(targetColumnIndex, animate);
+        }
+        targetController.focusCurrentItem();
+    }
+
+    render() {
+        const {
+            data,
+            className,
+            rowClassName,
+            renderItem,
+            visibleItems,
+            horizontal,
+        } = this.props;
+        const { topData, bottomData } = this.adapter.splitData(data);
+        const { topRowList, bottomRowList } = this.adapter;
+        return (
+            <div className={className} onKeyDown={this.handleKeyDown}>
+                <ListBase
+                    ref={topRowList.base}
+                    data={topData}
+                    renderItem={renderItem}
+                    visibleItems={visibleItems}
+                    forward={this.forward}
+                    backward={this.backward}
+                    shouldApplySlowdown={topRowList.controller.shouldApplySlowdown}
+                    className={rowClassName}
+                    horizontal={horizontal}
+                    limit={topRowList.controller.itemsCount}
+                />
+                <ListBase
+                    ref={bottomRowList.base}
+                    data={bottomData}
+                    renderItem={renderItem}
+                    visibleItems={visibleItems}
+                    forward={this.forward}
+                    backward={this.backward}
+                    shouldApplySlowdown={bottomRowList.controller.shouldApplySlowdown}
+                    className={rowClassName}
+                    horizontal={horizontal}
+                    limit={bottomRowList.controller.itemsCount}
+                />
+            </div>
+        );
+    }
+}