@24i/bigscreen-sdk 1.0.8-alpha.2184 → 1.0.8-alpha.2196

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@24i/bigscreen-sdk",
-    "version": "1.0.8-alpha.2184",
+    "version": "1.0.8-alpha.2196",
     "description": "SmartApps BIGscreen SDK monorepo",
     "main": "index.js",
     "scripts": {
@@ -250,7 +250,6 @@
         "./storage": "./packages/storage/src/index.ts",
         "./throbber": "./packages/throbber/src/index.ts",
         "./time/adapters/worldTimeApi": "./packages/time/src/adapters/worldTimeApi.ts",
-        "./time/adapters/24iMediaTimeApi": "./packages/time/src/adapters/24iMediaTimeApi.ts",
         "./time": "./packages/time/src/index.ts",
         "./toast/styles": "./packages/toast/src/Toast/styles.ts",
         "./toast": "./packages/toast/src/index.ts",

package/packages/device/src/resolver/resolver.ts

@@ -20,11 +20,6 @@ const getDevice = () => {
         info('HbbTV');
         return new DeviceHbbTV();
     }
-    // any because JavaScriptBridge property is defined on Android TV Bridge platform
-    if (typeof (window as any).JavaScriptBridge !== 'undefined') {
-        info('AndroidTV');
-        return new DeviceAndroidTV();
-    }
     if (userAgent.match(/Tizen/)) {
         info('Tizen');
         return new DeviceTizen();
@@ -45,6 +40,11 @@ const getDevice = () => {
         info('KreaTV');
         return new DeviceKreaTV();
     }
+    // any because JavaScriptBridge property is defined on Android TV Bridge platform
+    if (typeof (window as any).JavaScriptBridge !== 'undefined') {
+        info('AndroidTV');
+        return new DeviceAndroidTV();
+    }
     // any because ENTONE property is defined on Entone platform
     if (typeof (window as any).ENTONE !== 'undefined') {
         info('Entone');

package/packages/driver-base/src/KeyMap/KeyMap.ts

@@ -384,7 +384,3 @@ export const GAMEPAD_A = new Key({
 export const GAMEPAD_B = new Key({
     id: 'GAMEPAD_B',
 });
-
-export const SUBTITLES = new Key({
-    id: 'SUBTITLES',
-});

package/packages/driver-base/src/__mocks__/keyMap.ts

@@ -38,5 +38,4 @@ export const KEYMAP = {
     KP_9: 105,
     CHANNEL_UP: 33,
     CHANNEL_DOWN: 34,
-    SUBTITLES: 83,
 };

package/packages/driver-base/src/types/KeycodeKeyMap.ts

@@ -82,6 +82,4 @@ export type KeycodeKeyMap = {
 
     GAMEPAD_A: number,
     GAMEPAD_B: number,
-
-    SUBTITLES: number,
 };

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

@@ -9,14 +9,6 @@ export const getKeyMap = () => {
         VOL_UP: { code: 'KeyU', keyCode: 85 },
         VOL_DOWN: { code: 'KeyJ', keyCode: 74 },
         MUTE: { code: 'KeyM', keyCode: 77 },
-        PLAY: { code: 'KeyO', keyCode: 79 },
-        PAUSE: { code: 'KeyP', keyCode: 80 },
-        PLAYPAUSE: { code: 'Space', keyCode: 32 },
-        FF: { code: 'Period', keyCode: 190 },
-        REW: { code: 'Comma', keyCode: 188 },
-        STOP: { code: 'Escape', keyCode: 27 },
-        SUBTITLES: { code: 'KeyS', keyCode: 83 },
-        REC: { code: 'KeyI', keyCode: 73 },
     });
     return generateKeyCodeKeyMap();
 };

package/packages/grid/src/FirstOnlyGrid/FirstOnlyGrid.tsx

@@ -61,8 +61,6 @@ export class FirstOnlyGrid<T extends Item<U>, U>
         const linesDiff = Math.floor(grid.index / itemsInGroup) - oldLine;
         if (linesDiff > 0) {
             this.scrollForward(linesDiff);
-        } else if (linesDiff < 0) {
-            this.scrollBackward(Math.abs(linesDiff));
         }
     };
 
@@ -79,8 +77,8 @@ export class FirstOnlyGrid<T extends Item<U>, U>
         this.controller.scroll(targetScrollIndex);
     }
 
-    scrollBackward(diff = 1) {
-        const targetScrollIndex = this.controller.scrollIndex - diff;
+    scrollBackward() {
+        const targetScrollIndex = this.controller.scrollIndex - 1;
         this.controller.scroll(targetScrollIndex);
     }
 

package/packages/player-ui/src/PlayerUI.tsx

@@ -1,6 +1,6 @@
 import { Component, createRef, DeclareProps } from '@24i/bigscreen-sdk/jsx';
 import { PlayerBase } from '@24i/player-base';
-import { FF, REW, switchByKey } from '@24i/bigscreen-sdk/device/keymap';
+import { switchByKey } from '@24i/bigscreen-sdk/device/keymap';
 import { stopEvent } from '@24i/bigscreen-sdk/utils/stopEvent';
 import {
     IDisplayToggler, getDisplayToggler, DISPLAY_NONE,
@@ -23,7 +23,6 @@ type Props = {
     onClose?: () => void,
     onHide?: () => void,
     isPauseAllowed?: () => boolean,
-    showSubtitlesPicker?: () => void,
 };
 
 export class PlayerUI extends Component<Props>
@@ -85,17 +84,8 @@ export class PlayerUI extends Component<Props>
             STOP: this.onKeyStop,
             FF: this.onKeyForward,
             REW: this.onKeyRewind,
-            SUBTITLES: this.onKeySubtitles,
         });
-        if (processed && !FF.is(event) && !REW.is(event)) stopEvent(event);
-    };
-
-    onKeySubtitles = () => {
-        const { showSubtitlesPicker } = this.props;
-        if (showSubtitlesPicker) {
-            showSubtitlesPicker();
-        }
-        return true;
+        if (processed) stopEvent(event);
     };
 
     onKeyPlay = () => {
@@ -147,18 +137,27 @@ export class PlayerUI extends Component<Props>
     };
 
     onKeyForward = () => {
-        if (this.seeking.isAutomaticallySeekingBackward) this.seeking.stopAutomaticSeek();
-        this.disableHiding();
-        this.seeking.automaticSeekForward();
-        return true;
+        if (this.seeking.isAutomaticallySeekingBackward) {
+            this.seeking.stopAutomaticSeek();
+            return true;
+        }
+        if (!this.seeking.isAutomaticallySeekingForward) {
+            this.seeking.startAutomaticSeekForward();
+            return true;
+        }
+        return false;
     };
 
     onKeyRewind = () => {
-        if (this.seeking.isAutomaticallySeekingForward) this.seeking.stopAutomaticSeek();
-        this.disableHiding();
-        this.seeking.automaticSeekBackward();
-        return true;
-
+        if (this.seeking.isAutomaticallySeekingForward) {
+            this.seeking.stopAutomaticSeek();
+            return true;
+        }
+        if (!this.seeking.isAutomaticallySeekingBackward) {
+            this.seeking.startAutomaticSeekBackward();
+            return true;
+        }
+        return false;
     };
 
     getPlayer = () => {

package/packages/player-ui/src/Seekbar.tsx

@@ -11,7 +11,7 @@ import { PlayerUICommonProps } from './types';
 const CONSECUTIVE_TIMEOUT = 500;
 const FAST_TRESHOLD = 5;
 const SLOW_TIME = 10000;
-const FAST_TIME = 30000;
+const FAST_TIME = 20000;
 const SAFE_END_MARGIN = 10000;
 const TO_PERCENT = 100;
 
@@ -26,9 +26,9 @@ export class Seekbar extends Component<Props> implements IFocusable {
 
     seekTime = createRef<PlayerTime>();
 
-    leftConsecutiveness = 0;
+    leftConsecutives = 0;
 
-    rightConsecutiveness = 0;
+    rightConsecutives = 0;
 
     leftConsecutiveTimeout = createTimeout();
 
@@ -51,7 +51,6 @@ export class Seekbar extends Component<Props> implements IFocusable {
         document.addEventListener('mouseup', this.onMouseUp);
         document.addEventListener('mousemove', this.onMouseMove);
         ui.seeking.addEventListener('seektimeupdate', this.onSeekTimeUpdate);
-        ui.seeking.addEventListener('stopautomaticseek', this.onStopAutomaticSeek);
         ui.getPlayer().addEventListener('timeupdate', this.onTimeUpdate);
         ui.getPlayer().addEventListener('durationchange', this.onDurationUpdate);
     }
@@ -61,7 +60,6 @@ export class Seekbar extends Component<Props> implements IFocusable {
         document.removeEventListener('mouseup', this.onMouseUp);
         document.removeEventListener('mousemove', this.onMouseMove);
         ui.seeking.removeEventListener('seektimeupdate', this.onSeekTimeUpdate);
-        ui.seeking.removeEventListener('stopautomaticseek', this.onStopAutomaticSeek);
         ui.getPlayer().removeEventListener('timeupdate', this.onTimeUpdate);
         ui.getPlayer().removeEventListener('durationchange', this.onDurationUpdate);
     }
@@ -116,13 +114,13 @@ export class Seekbar extends Component<Props> implements IFocusable {
 
     onLeft = () => {
         const { ui } = this.props;
-        this.leftConsecutiveness += 1;
+        this.leftConsecutives += 1;
         if (ui.seeking.isAutomaticallySeeking()) {
             ui.seeking.stopAutomaticSeek();
         }
-        ui.seeking.seekBackward(this.leftConsecutiveness >= FAST_TRESHOLD ? FAST_TIME : SLOW_TIME);
+        ui.seeking.seekBackward(this.leftConsecutives >= FAST_TRESHOLD ? FAST_TIME : SLOW_TIME);
         this.leftConsecutiveTimeout.set(() => {
-            this.leftConsecutiveness = 0;
+            this.leftConsecutives = 0;
         }, CONSECUTIVE_TIMEOUT);
         return true;
     };
@@ -131,11 +129,11 @@ export class Seekbar extends Component<Props> implements IFocusable {
         const { ui } = this.props;
         const { seekTime } = ui.seeking;
         if (seekTime == null && this.currentTime + SLOW_TIME >= this.duration) return true;
-        this.rightConsecutiveness += 1;
+        this.rightConsecutives += 1;
         if (ui.seeking.isAutomaticallySeeking()) {
             ui.seeking.stopAutomaticSeek();
         }
-        const isFastSeeking = this.rightConsecutiveness >= FAST_TRESHOLD;
+        const isFastSeeking = this.rightConsecutives >= FAST_TRESHOLD;
         if (
             (seekTime != null &&
               (seekTime + SLOW_TIME >= this.duration - SAFE_END_MARGIN
@@ -147,7 +145,7 @@ export class Seekbar extends Component<Props> implements IFocusable {
             ui.seeking.seekForward(isFastSeeking ? FAST_TIME : SLOW_TIME);
         }
         this.rightConsecutiveTimeout.set(() => {
-            this.rightConsecutiveness = 0;
+            this.rightConsecutives = 0;
         }, CONSECUTIVE_TIMEOUT);
         return true;
     };
@@ -165,8 +163,6 @@ export class Seekbar extends Component<Props> implements IFocusable {
         this.updateSeekBar();
     };
 
-    onStopAutomaticSeek = () =>  this.props.ui.enableHiding();
-
     onTimeUpdate = ({ currentTime }: ITimeUpdateEvent) => {
         const { ui } = this.props;
         this.currentTime = currentTime;

package/packages/player-ui/src/Seeking.ts

@@ -1,12 +1,9 @@
 import { IEvents, EventMapType, EventsManager } from '@24i/bigscreen-sdk/events-manager';
-import { createInterval, createTimeout } from '@24i/bigscreen-sdk/utils/timers';
+import { createInterval } from '@24i/bigscreen-sdk/utils/timers';
 import { PlayerBase } from '@24i/player-base';
 
-const DEFAULT_SEEK_TIME = 10000;
-const FAST_SEEK_TIME = 30000;
+const DEFAULT_SEEK_TIME = 20000;
 const AUTOMATIC_SEEK_INTERVAL = 300;
-const FAST_THRESHOLD = 5;
-const CONSECUTIVE_TIMEOUT = 500;
 
 interface SeekingEventsMap extends EventMapType {
     'seektimeupdate': (payload: number) => void,
@@ -32,14 +29,6 @@ export class Seeking implements IEvents<SeekingEventsMap> {
 
     isAutomaticallySeekingBackward = false;
 
-    ffConsecutiveness = 0;
-
-    rewConsecutiveness = 0;
-
-    ffConsecutiveTimeout = createTimeout();
-
-    rewConsecutiveTimeout = createTimeout();
-
     constructor(player: PlayerBase<any> | null = null) {
         this.player = player;
     }
@@ -87,53 +76,28 @@ export class Seeking implements IEvents<SeekingEventsMap> {
         this.triggerEvent('seektimeupdate', this.seekTime!);
     }
 
-    automaticSeekForward() {
-        if (this.isAutomaticallySeekingForward) {
-            this.ffConsecutiveTimeout.set(() => {
-                this.ffConsecutiveness = 0;
-            }, CONSECUTIVE_TIMEOUT);
-            this.ffConsecutiveness += 1;
-            if (this.ffConsecutiveness === FAST_THRESHOLD) {
-                this.automaticSeekInterval.set(
-                    () => this.seekForward(FAST_SEEK_TIME),
-                    AUTOMATIC_SEEK_INTERVAL
-                );
-            }
-            return;
-        }
+    startAutomaticSeekForward() {
+        this.stopAutomaticSeek();
         this.isAutomaticallySeekingForward = true;
-        this.ffConsecutiveness += 1;
         this.seekForward();
-        this.automaticSeekInterval.set(() => this.seekForward(), AUTOMATIC_SEEK_INTERVAL);
+        this.automaticSeekInterval.set(() => {
+            this.seekForward();
+        }, AUTOMATIC_SEEK_INTERVAL);
     }
 
-    automaticSeekBackward() {
-        if (this.isAutomaticallySeekingBackward) {
-            this.rewConsecutiveTimeout.set(() => {
-                this.rewConsecutiveness = 0;
-            }, CONSECUTIVE_TIMEOUT);
-            this.rewConsecutiveness += 1;
-            if (this.rewConsecutiveness === FAST_THRESHOLD) {
-                this.automaticSeekInterval.set(
-                    () => this.seekBackward(FAST_SEEK_TIME),
-                    AUTOMATIC_SEEK_INTERVAL
-                );
-            }
-            return;
-        }
+    startAutomaticSeekBackward() {
+        this.stopAutomaticSeek();
         this.isAutomaticallySeekingBackward = true;
-        this.rewConsecutiveness += 1;
         this.seekBackward();
-        this.automaticSeekInterval.set(() => this.seekBackward(), AUTOMATIC_SEEK_INTERVAL);
+        this.automaticSeekInterval.set(() => {
+            this.seekBackward();
+        }, AUTOMATIC_SEEK_INTERVAL);
     }
 
     stopAutomaticSeek() {
-        if (this.isAutomaticallySeeking()) this.triggerEvent('stopautomaticseek');
         this.automaticSeekInterval.clear();
         this.isAutomaticallySeekingForward = false;
         this.isAutomaticallySeekingBackward = false;
-        this.ffConsecutiveness = 0;
-        this.rewConsecutiveness = 0;
     }
 
     cancelSeek() {

package/packages/player-ui/src/mocks.ts

@@ -13,16 +13,12 @@ const getSeekingMock = (): jest.Mocked<IPlayerUI['seeking']> => ({
     isAutomaticallySeeking: jest.fn(),
     isAutomaticallySeekingForward: false,
     isAutomaticallySeekingBackward: false,
-    ffConsecutiveness: 0,
-    rewConsecutiveness: 0,
-    ffConsecutiveTimeout: null!,
-    rewConsecutiveTimeout: null!,
     isSeeking: jest.fn(),
     startSeeking: jest.fn(),
     seekForward: jest.fn(),
     seekBackward: jest.fn(),
-    automaticSeekForward: jest.fn(),
-    automaticSeekBackward: jest.fn(),
+    startAutomaticSeekForward: jest.fn(),
+    startAutomaticSeekBackward: jest.fn(),
     stopAutomaticSeek: jest.fn(),
     cancelSeek: jest.fn(),
     confirmSeek: jest.fn(),

package/packages/utils/src/textUtils.ts

@@ -9,7 +9,6 @@ const trimWithEllipsis = (
     if (!row.textContent) {
         return;
     }
-    const { visibility } = row.style;
     row.style.visibility = 'hidden';
     const lineHeightString = window.getComputedStyle(row, null).getPropertyValue('line-height');
     const lineHeight = parseInt(lineHeightString, 10);
@@ -28,7 +27,6 @@ const trimWithEllipsis = (
             } while (numberOfLines <= requestedNumberOfLines
                 && currentPosition < originalTextContent.length);
             row.textContent = stringBuffer.substring(0, stringBuffer.length - 1) + ellipsis;
-
         } else {
             let currentPosition = originalTextContent.length - 1;
             do {
@@ -41,7 +39,7 @@ const trimWithEllipsis = (
             row.textContent = `${ellipsis}${stringBuffer.substring(1)}`;
         }
     }
-    row.style.visibility = visibility;
+    row.style.visibility = '';
 };
 
 export const trimWithLeadingEllipsis = (

package/packages/time/src/adapters/24iMediaTimeApi.ts

@@ -1,47 +0,0 @@
-import { HOUR_IN_MS, MINUTE_IN_MS } from '@24i/bigscreen-sdk/utils';
-import * as TwentyFourIMediaTimeApi from '../services/24iMediaTimeApi';
-
-type ParamOptions = TwentyFourIMediaTimeApi.ParamOptions;
-
-const defaultOptions: ParamOptions = {
-    timeoutInMs: 30000,
-    retryConfig: {
-        retry: 2,
-    },
-};
-
-/**
- * Returns a tring in ISO format followed by +/-hh:mm suffix for timezone offset.
- * @param resp Time api response.
- * @returns ISO string with timezone data.
- */
-const getIsoDateString = (resp: TwentyFourIMediaTimeApi.ServiceDataResponse): string => {
-    let datetime = new Date(resp.timestamp + resp.timezone_offset).toISOString();
-    const offset = resp.timezone_offset / HOUR_IN_MS;
-    if (offset) {
-        const sign = offset > 0 ? '+' : '-';
-        const hours = Math.abs(offset);
-        const minutes = Math.floor((resp.timezone_offset % HOUR_IN_MS) / MINUTE_IN_MS);
-        // eslint-disable-next-line no-magic-numbers
-        const timeString = sign + `0${hours}`.slice(-2) + ':' + `0${minutes}`.slice(-2);
-        datetime = datetime.replace('Z', timeString);
-    }
-    return datetime;
-};
-
-/**
- * Wrapper over "TwentyFourIMediaTimeApi.getTime" method requesting the current time
- * from timekeeping server. Transforms the result to ISO string with timezone offset data
- * included.
- *
- * @param options Options object
- */
-export const getTime = async (options: ParamOptions = {}) => {
-    const opts = { ...defaultOptions, ...options };
-    const resp = await TwentyFourIMediaTimeApi.getTime(opts);
-
-    if ('timestamp' in resp && 'timezone_offset' in resp && 'in_dst' in resp) {
-        return { datetime: getIsoDateString(resp) };
-    }
-    return null;
-};

package/packages/time/src/services/24iMediaTimeApi/24iMediaTimeApi.ts

@@ -1,43 +0,0 @@
-/**
- * Package "24iMediaTimeApi" provides a single function to obtain the current time
- * adjusted by local timezone and daylight savings time for use in time package,
- * from 24i time API at https://time.24imedia.tv/
- */
-import {
-    xhrSendRetry, type RetryConfig, type XhrResponse,
-} from '@24i/bigscreen-sdk/utils/xhr';
-
-const API_URL = 'https://time.24imedia.tv/';
-
-export type Options = {
-    /** The request timeout in milliseconds. The value 0 for no timeout */
-    timeoutInMs: number,
-    /** Retry configuration */
-    retryConfig: RetryConfig,
-};
-export type ParamOptions = Partial<Options>;
-
-export type ServiceDataResponse = {
-    /** Is dailight savings time */
-    in_dst: boolean,
-    /** Current time in GMT, in milliseconds */
-    timestamp: number,
-    /** Timezeone offset in milliseconds */
-    timezone_offset: number,
-};
-
-/**
- * Request the current time based on public IP of request.
- *
- * @param options Options object
- */
-export async function getTime(options?: ParamOptions): Promise<ServiceDataResponse> {
-    try {
-        const resp = (await xhrSendRetry(API_URL, options)) as XhrResponse;
-        const data: any = resp.dataJson || {};
-        return data as ServiceDataResponse;
-    } catch (e) {
-        console.error('[24iMediaTimeApi] Failed to get time', e);
-        throw e;
-    }
-}

package/packages/time/src/services/24iMediaTimeApi/index.ts

@@ -1,6 +0,0 @@
-export {
-    Options,
-    ParamOptions,
-    ServiceDataResponse,
-    getTime,
-} from './24iMediaTimeApi';