@24i/bigscreen-sdk 1.0.11-alpha.2225 → 1.0.11

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@24i/bigscreen-sdk",
-    "version": "1.0.11-alpha.2225",
+    "version": "1.0.11",
     "description": "SmartApps BIGscreen SDK monorepo",
     "main": "index.js",
     "scripts": {
@@ -260,6 +260,7 @@
         "./utils/debounce": "./packages/utils/src/debounce.ts",
         "./utils/displayToggler": "./packages/utils/src/displayToggler.ts",
         "./utils/elementUtils": "./packages/utils/src/elementUtils.ts",
+        "./utils/forceReflow": "./packages/utils/src/forceReflow.ts",
         "./utils/generateUuid": "./packages/utils/src/generateUuid.ts",
         "./utils/memoryInfo": "./packages/utils/src/memoryInfo.ts",
         "./utils/nTimes": "./packages/utils/src/nTimes.ts",

package/packages/developer-tools/src/TechnicalInfo/TechnicalInfoProvider.ts

@@ -1,4 +1,5 @@
 import { DeviceBase } from '@24i/bigscreen-sdk/driver-base';
+import { DeviceAndroidTV } from '@24i/bigscreen-sdk/driver-androidtv';
 import { IStorage } from '@24i/bigscreen-sdk/storage/interface';
 import { getUsedJSHeapSize, getTotalJSHeapSize } from '@24i/bigscreen-sdk/utils/memoryInfo';
 import { ipify } from '@24i/bigscreen-sdk/ipify';
@@ -270,14 +271,23 @@ class TechnicalInfoProvider implements ITechnicalInfoProvider {
         return this.props.appCoreVersions || unknown;
     }
 
-    getSourceDataLayout() {
+    async getWrapperVersion() {
+        let value;
+        const { unknown } = this.translations;
+        try {
+            value = await (this.props.device as DeviceAndroidTV).getWrapperVersion();
+        } catch (e) {}
+        return value || unknown;
+    }
+
+    async getSourceDataLayout() {
         const {
             username, profile, appVersion, firmwareVersion, deviceModel,
             deviceManufacturer, platform, player, serialNumber, localIpAddress,
             publicIpAddress, connectionType, macAddress, memoryHeapSize,
             usedLocalStorage, timeZone, dateAndTime, flavour, userAgent,
             emeSupport, emeDrmSystems, mseSupport, fourKSupport, resolution, baseUrl,
-            appCoreVersions,
+            appCoreVersions, androidWrapperVersion,
         } = this.translations;
         const dataLayout: SourceDataLayout = [
             { label: username, getter: this.getUserName },
@@ -307,9 +317,21 @@ class TechnicalInfoProvider implements ITechnicalInfoProvider {
             { label: resolution, getter: this.getAppResolution },
             { label: baseUrl, getter: this.getBackendBaseUrl },
         ];
+
+        if (await this.isAndroidTV()) {
+            dataLayout.push(
+                { label: androidWrapperVersion, getter: this.getWrapperVersion },
+            );
+        }
+
         return dataLayout;
     }
 
+    async isAndroidTV() {
+        const platformName = await this.props.device.getPlatformName();
+        return platformName === 'AndroidTV';
+    }
+
     async loadDataLayout(dataLayout: SourceDataLayout) {
         const promises = map(dataLayout, async (item) => item.getter.call(this));
         const values = await Promise.all(promises);
@@ -319,7 +341,7 @@ class TechnicalInfoProvider implements ITechnicalInfoProvider {
     }
 
     async getInfoData() {
-        const sourceDataLayout = this.getSourceDataLayout();
+        const sourceDataLayout = await this.getSourceDataLayout();
         return this.loadDataLayout(sourceDataLayout);
     }
 }

package/packages/developer-tools/src/TechnicalInfo/__mocks__/Device.ts

@@ -46,6 +46,10 @@ class Device {
     async getMacAddress() {
         return 'mac address';
     }
+
+    async getWrapperVersion() {
+        return 'android wrapper version';
+    }
 }
 
 export { Device };

package/packages/developer-tools/src/TechnicalInfo/translations.ts

@@ -3,6 +3,7 @@ export type Translations = TranslationKeys | { [K in keyof TranslationKeys]?: ne
 export type TranslationKeys = {
     unknown: string
     anonymous: string,
+    androidWrapperVersion: string,
     yes: string,
     no: string,
     prefixed: string,
@@ -41,6 +42,7 @@ export type TranslationKeys = {
 export const defaultTranslations = {
     unknown: 'UNKNOWN',
     anonymous: 'ANONYMOUS',
+    androidWrapperVersion: 'Android wrapper version',
     yes: 'Yes',
     no: 'No',
     prefixed: 'prefixed',

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

@@ -154,6 +154,10 @@ export class DeviceAndroidTV extends DeviceBase {
         return VolumeRange.UNSUPPORTED;
     }
 
+    async getWrapperVersion(): Promise<string> {
+        return this.platformInfo.appVersion;
+    }
+
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
     async setVolume(volumePercentage: number): Promise<void> {
         // not supported on AndroidTV platform
@@ -195,7 +199,9 @@ export class DeviceAndroidTV extends DeviceBase {
     }
 
     async getLocalIP(): Promise<string> {
-        // not supported on AndroidTV platform
+        const ipv4RegExp = /\b(?:[0-9]{1,3}\.){3}[0-9]{1,3}\b/;
+        const ip = this.platformInfo.ipLocal.toString().match(ipv4RegExp);
+        if (ip) return ip.toString();
         return '';
     }
 

package/packages/driver-androidtv/src/__mocks__/javaScriptBridge.ts

@@ -7,6 +7,10 @@ export const mockJavaScriptBridge: IJavaScriptBridge = {
                 deviceBrand: 'Sony',
                 deviceModel: 'BRAVIA 4K 2015',
                 osVersion: '8.0.0',
+                appVersion: '0.0.1',
+                appFlavor: 'appstage-bigscreen',
+                drmKeySystems: '["W3C Clear Key", "Google Widevine"]',
+                ipLocal: '127.0.0.1',
             })
         ),
         bridgeJavaScriptToAndroid_Back: () => {},

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

@@ -2,7 +2,9 @@ interface JavaScriptBridge {
     /**
      * It returns a JSON string with device info.
      * @return JSON string with the information about the device brand, model and Android version.
-     * Ex. '{"deviceBrand": "Sony", "deviceModel": "BRAVIA 4K 2015", "osVersion": "7.0" }'
+     * Ex. '{"deviceBrand": "Sony", "deviceModel": "BRAVIA 4K 2015", "osVersion": "7.0",
+     * "appFlavor": "appstage-bigscreen", "drmKeySystems": ["Widewine", "W3C ClearKey"],
+     * "ipLocal": "fe80::475:3045:2928:3a32%wlan0127.0.0.1", "appVersion": '0.0.1' }'
      */
     bridgeJavaScriptToAndroid_GetDeviceInfo: () => string,
     /**
@@ -24,6 +26,22 @@ export type DeviceInfo = {
      * Android version. Ex. "7.0"
      */
     osVersion: string,
+    /**
+     * Android wrapper version. Ex. "0.0.1"
+     */
+    appVersion: string,
+    /**
+     * Android flavor. Ex. "appstage-bigscreen"
+     */
+    appFlavor: string,
+    /**
+     * Android DRM key systems. Ex. ["Widewine", "W3C ClearKey"]
+     */
+    drmKeySystems: Array<string>,
+    /**
+     * Android local IP adress in array Ex. "fe80::475:3045:2928:3a32%wlan0127.0.0.1"
+     */
+    ipLocal: string,
 };
 
 export interface IJavaScriptBridge {

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

@@ -84,67 +84,115 @@ export class DataManager implements IDataManager {
         return [data[0].program!.startTime, data[data.length - 1].program!.endTime] as DataRange;
     }
 
-    // TODO: Wait for fixes from @thepretiso before looking at this.
+    private isInterceptingDataRanges = (firstDataRange: DataRange, secondDataRange: DataRange) => (
+        (firstDataRange[START] < secondDataRange[END]
+            && firstDataRange[START] > secondDataRange[START])
+        || (secondDataRange[START] < firstDataRange[END]
+            && secondDataRange[START] > firstDataRange[START])
+    );
+
+    private findRangeBeforeAndAfter = (currentRange: DataRange) => {
+        const rangeAfterIndex = findIndex(
+            this.dataRanges,
+            (dataRange) => dataRange[END] >= currentRange[END],
+        );
+        if (rangeAfterIndex === -1) {
+            return {
+                rangeAfter: undefined,
+                rangeBefore: this.dataRanges[this.dataRanges.length - 1],
+            };
+        }
+        const rangeAfter = this.dataRanges[rangeAfterIndex];
+        const rangeBefore = this.dataRanges[rangeAfterIndex - 1];
+        return { rangeAfter, rangeBefore };
+    };
+
+    private generateDataRangesForward = (start: number, end: number, cellSize: number) => {
+        const dataRanges: DataRange[] = [[start, start + cellSize]];
+        let currentStart = start + cellSize;
+        let currentEnd = currentStart + cellSize;
+        while (currentStart < end) {
+            if (currentEnd >= end) {
+                dataRanges.push([currentStart, end]);
+                break;
+            }
+            dataRanges.push([currentStart, currentEnd]);
+            currentStart += cellSize;
+            currentEnd += cellSize;
+        }
+        return dataRanges;
+    };
+
+    private generateDataRangesBackward = (start: number, end: number, cellSize: number) => {
+        const dataRanges: DataRange[] = [[start - cellSize, start]];
+        let currentEnd = start - cellSize;
+        let currentStart = currentEnd - cellSize;
+        while (currentEnd > start) {
+            if (currentStart <= start) {
+                dataRanges.push([start, currentEnd]);
+                break;
+            }
+            dataRanges.push([currentStart, currentEnd]);
+            currentStart -= cellSize;
+            currentEnd -= cellSize;
+        }
+        return dataRanges;
+    };
+
     /* eslint-disable complexity */
     // eslint-disable-next-line sonarjs/cognitive-complexity
     private getRangesMissingFromDataInRange([start, end]: DataRange) {
-        const rangesLength = this.dataRanges.length;
+        const currentRange = [start, end] as DataRange;
         const cellSize = TIMELINE_WIDTHS_TO_FETCH * this.timelineWidthMs;
-        if (this.dataRanges.length === 0) return [[start, end]] as DataRange[];
-        const firstRangeFrom = this.dataRanges[0][START];
-        const firstRangeTo = this.dataRanges[0][END];
-        if (end <= firstRangeFrom) return [[start, end]] as DataRange[];
-        if (start < firstRangeFrom && end <= firstRangeTo) {
-            return [
-                [firstRangeFrom - cellSize, firstRangeFrom],
-            ] as DataRange[];
-        }
-        const lastRangeFrom = this.dataRanges[rangesLength - 1][START];
-        const lastRangeTo = this.dataRanges[rangesLength - 1][END];
-        if (end > lastRangeTo && start <= lastRangeTo) {
-            return [
-                [lastRangeTo, lastRangeTo + cellSize],
-            ] as DataRange[];
-        }
-        if (start >= lastRangeTo && end >= lastRangeTo && start - lastRangeTo >= cellSize) {
-            return [
-                [start, end],
-            ] as DataRange[];
-        }
-        const ranges: DataRange[] = [];
-        let newRange: DataRange = [start, end];
-        for (let i = 0; i < rangesLength; i++) {
-            const [rangeFrom, rangeTo] = this.dataRanges[i];
-            if (start >= rangeTo) {
-                if (start - rangeTo <= cellSize) {
-                    newRange[START] = rangeTo;
-                } else {
-                    const newStart = lastRangeFrom - cellSize;
-                    newRange[START] = newStart;
+        if (this.dataRanges.length === 0) return [currentRange] as DataRange[];
+        const { rangeBefore, rangeAfter } = this.findRangeBeforeAndAfter(currentRange);
+        if (rangeAfter == null) {
+            const lastDataRange = this.dataRanges[this.dataRanges.length - 1];
+            if (this.isInterceptingDataRanges(lastDataRange, currentRange)) {
+                if (end > lastDataRange[END]) {
+                    return this.generateDataRangesForward(lastDataRange[END], end, cellSize);
                 }
-                // eslint-disable-next-line no-continue
-                continue;
-            }
-            if (start < rangeFrom) {
-                if (end <= rangeFrom) {
-                    if (newRange[START] !== newRange[END]) ranges.push(newRange);
-                    return ranges;
+                if (start < lastDataRange[START]) {
+                    return this.generateDataRangesBackward(start, lastDataRange[START], cellSize);
                 }
-                newRange[END] = rangeFrom;
-                if (newRange[START] !== newRange[END]) ranges.push(newRange);
-                if (end <= rangeTo) {
-                    return ranges;
+            }
+            return [currentRange] as DataRange[];
+        }
+        if (rangeBefore == null) {
+            const firstDataRange = this.dataRanges[0];
+            if (this.isInterceptingDataRanges(firstDataRange, currentRange)) {
+                if (end > firstDataRange[END]) {
+                    return this.generateDataRangesForward(firstDataRange[END], end, cellSize);
                 }
-                newRange = [rangeTo, end];
-            } else if (start < rangeTo) {
-                if (end <= rangeTo) {
-                    return ranges;
+                if (start < firstDataRange[START]) {
+                    return this.generateDataRangesBackward(firstDataRange[START], start, cellSize);
                 }
-                newRange = [rangeTo, end];
             }
+            return [currentRange] as DataRange[];
+        }
+        const rangeAfterFrom = rangeAfter[START];
+        const rangeBeforeTo = rangeBefore[END];
+        // Ranges are collapsed
+        if (rangeBeforeTo === rangeAfterFrom) return [];
+        // Both are not null and don't intercept
+        if (
+            !this.isInterceptingDataRanges(rangeAfter, currentRange)
+            && !this.isInterceptingDataRanges(rangeBefore, currentRange)
+        ) {
+            return [currentRange];
+        }
+        // Left intercepts
+        if (this.isInterceptingDataRanges(rangeBefore, currentRange)) {
+            return [rangeBefore, ...this.generateDataRangesForward(rangeBeforeTo, end, cellSize)];
+        }
+        // Right intercepts
+        if (this.isInterceptingDataRanges(rangeAfter, currentRange)) {
+            return [
+                ...this.generateDataRangesBackward(rangeAfterFrom, start, cellSize),
+                rangeAfter,
+            ];
         }
-        if (newRange[START] !== newRange[END]) ranges.push(newRange);
-        return ranges;
+        return [currentRange] as DataRange[];
     }
 
     private getMissingRanges(range: DataRange) {

package/packages/menu/src/MenuAndContentContainer/MenuAndContentContainer.tsx

@@ -100,7 +100,7 @@ export class MenuAndContentContainer<T extends string = string>
      * Handles opening with mouse.
      * @param event mouse event
      */
-    onMouseMove = (event: MouseEvent) => {
+    onMouseDown = (event: MouseEvent) => {
         const menu = this.menu.current!;
         if (this.isMenuAvailable() && !menu.isOpen()) {
             menu.open();
@@ -108,6 +108,30 @@ export class MenuAndContentContainer<T extends string = string>
         }
     };
 
+    /**
+     * Handles hover with mouse.
+     * @param event mouse event
+     */
+    onMouseEnter = (event: MouseEvent) => {
+        const menu = this.menu.current!;
+        if (this.isMenuAvailable() && !menu.isOpen() && menu.mrcuEnter) {
+            menu.mrcuEnter();
+            stopEvent(event);
+        }
+    };
+
+    /**
+     * Handles hover end with mouse.
+     * @param event mouse event
+     */
+    onMouseLeave = (event: MouseEvent) => {
+        const menu = this.menu.current!;
+        if (this.isMenuAvailable() && !menu.isOpen() && menu.mrcuLeave) {
+            menu.mrcuLeave();
+            stopEvent(event);
+        }
+    };
+
     /**
      * Handles adding/removing mouse listeners based on whether the mouse is used or not.
      * @param event mouse active event
@@ -137,7 +161,9 @@ export class MenuAndContentContainer<T extends string = string>
         if (!this.listensToMouse) {
             this.listensToMouse = true;
             if (!this.menu.current!.isOpen()) this.mouseTriggerElementDisplayToggler.show();
-            this.mouseTriggerElement.current!.addEventListener('mousemove', this.onMouseMove);
+            this.mouseTriggerElement.current!.addEventListener('mousedown', this.onMouseDown);
+            this.mouseTriggerElement.current!.addEventListener('mouseenter', this.onMouseEnter);
+            this.mouseTriggerElement.current!.addEventListener('mouseleave', this.onMouseLeave);
         }
     }
 
@@ -148,7 +174,9 @@ export class MenuAndContentContainer<T extends string = string>
         if (this.listensToMouse) {
             this.listensToMouse = false;
             if (!this.menu.current!.isOpen()) this.mouseTriggerElementDisplayToggler.hide();
-            this.mouseTriggerElement.current!.removeEventListener('mousemove', this.onMouseMove);
+            this.mouseTriggerElement.current!.removeEventListener('mousedown', this.onMouseDown);
+            this.mouseTriggerElement.current!.removeEventListener('mouseenter', this.onMouseEnter);
+            this.mouseTriggerElement.current!.removeEventListener('mouseleave', this.onMouseLeave);
         }
     }
 

package/packages/menu/src/MenuAndContentContainer/interface.ts

@@ -112,6 +112,14 @@ export interface Menu<
      * Function to close the menu.
      */
     close(): void,
+    /**
+     * Function for "hover" effect on the menu.
+     */
+    mrcuEnter?(): void,
+    /**
+     * Function for ending "hover" effect on the menu.
+     */
+    mrcuLeave?(): void,
     /**
      * Renders new menu items.
      * @param items new items to render

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

@@ -4,6 +4,7 @@ import { stopEvent } from '@24i/bigscreen-sdk/utils/stopEvent';
 import { ITimeUpdateEvent, IDurationChangeEvent } from '@24i/player-base';
 import { createTimeout } from '@24i/bigscreen-sdk/utils/timers';
 import { switchByKey } from '@24i/bigscreen-sdk/device/keymap';
+import { getDisplayToggler } from '@24i/bigscreen-sdk/utils/displayToggler';
 import { PlayerTime } from './PlayerTime';
 import { getLiveProgressBasedOnCurrentTime } from './timeUtils';
 import { PlayerUICommonProps } from './types';
@@ -26,6 +27,8 @@ export class Seekbar extends Component<Props> implements IFocusable {
 
     seekTime = createRef<PlayerTime>();
 
+    displaySeekPoint = getDisplayToggler(this.seekPoint);
+
     leftConsecutiveness = 0;
 
     rightConsecutiveness = 0;
@@ -40,6 +43,8 @@ export class Seekbar extends Component<Props> implements IFocusable {
 
     isMouseDownPressed = false;
 
+    seekingDisabled = false;
+
     static defaultProps = {
         className: '',
     };
@@ -67,7 +72,7 @@ export class Seekbar extends Component<Props> implements IFocusable {
     }
 
     onMouseMove = (event: MouseEvent) => {
-        if (!this.isMouseDownPressed) return;
+        if (!this.isMouseDownPressed || this.seekingDisabled) return;
         const { ui: { seeking } } = this.props;
         const wrapRect = this.wrap.current!.getBoundingClientRect();
         const clientX = event.clientX - wrapRect.left;
@@ -79,6 +84,7 @@ export class Seekbar extends Component<Props> implements IFocusable {
     };
 
     onMouseClick = (event: MouseEvent) => {
+        if (this.seekingDisabled) return;
         const { ui: { seeking } } = this.props;
         const wrapWidth = this.wrap.current!.offsetWidth;
         const percentage = (TO_PERCENT * event.offsetX) / wrapWidth;
@@ -115,6 +121,7 @@ export class Seekbar extends Component<Props> implements IFocusable {
     };
 
     onLeft = () => {
+        if (this.seekingDisabled) return true;
         const { ui } = this.props;
         this.leftConsecutiveness += 1;
         if (ui.seeking.isAutomaticallySeeking()) {
@@ -128,6 +135,7 @@ export class Seekbar extends Component<Props> implements IFocusable {
     };
 
     onRight = () => {
+        if (this.seekingDisabled) return true;
         const { ui } = this.props;
         const { seekTime } = ui.seeking;
         if (seekTime == null && this.currentTime + SLOW_TIME >= this.duration) return true;
@@ -222,6 +230,20 @@ export class Seekbar extends Component<Props> implements IFocusable {
         this.seekPoint.current!.style.left = `${percentTime}%`;
     }
 
+    disableSeeking() {
+        this.seekingDisabled = true;
+        this.displaySeekPoint.hide();
+    }
+
+    enableSeeking() {
+        this.seekingDisabled = false;
+        this.displaySeekPoint.show();
+    }
+
+    isSeekingDisabled() {
+        return this.seekingDisabled;
+    }
+
     render() {
         const { className } = this.props;
         return (

package/packages/utils/README.md

@@ -21,6 +21,7 @@ import { generateUuid } from '@24i/bigscreen-sdk/utils/generateUuid';
 - **[addClass](#addClass)** - safely adds class to reference.
 - **[debounce](#debounce)** - debounced function is only executed again after a period of not being called, supports leading, trailing (default) and both executions.
 - **[displayToggler](#displayToggler)** - exports `getDisplayToggler` that allows you to easily show/hide an element with guard preventing unnecessary DOM calls.
+- **[forceReflow](#forceReflow)** - To force a DOM reflow on given DOM element.
 - **[generateUuid](#generateUuid)** - function to get UUIDv4 according to RFC 4122.
 - **[isMouseUsed](#isMouseUsed)** - **DEPRECATED** moved to `device` package.
 - **[memoryInfo](#memoryInfo)** - two functions that returns currently active segment size and total allocated size of JS heap, in bytes.
@@ -92,6 +93,18 @@ And returns `IDisplayToggler` interface with 4 functions:
 - `isVisible: () => boolean;` - returns true if the element is visible, false otherwise
 - `isHidden: () => boolean;` - returns true if the element is hidden, false otherwise
 
+### forceReflow
+To force a DOM reflow on given DOM element. It can be needed for transitions
+or other purposes.
+
+It takes 1 param:
+- `elementOrReference: HTMLElement | Reference<HTMLElement>` - DOM element or
+reference to element on which reflow is called.
+
+```ts
+forceReflow(elementRef);
+```
+
 ### generateUuid
 Returns an UUIDv4 according to RFC 4122, like ex. "123e4567-e89b-12d3-a456-426614174000".
 

package/packages/utils/src/forceReflow.ts

@@ -0,0 +1,14 @@
+import { Reference, unwrapReference } from '@24i/bigscreen-sdk/jsx';
+
+/**
+ * To force a DOM reflow on given DOM element. It can be needed for transitions
+ * or other purposes.
+ * @param elementOrReference DOM element or reference to element on which reflow is called.
+ */
+export const forceReflow = (
+    elementOrReference: HTMLElement | Reference<HTMLElement>,
+) => {
+    const element = unwrapReference(elementOrReference);
+    if (!element) return;
+    void element.offsetHeight; // eslint-disable-line no-void
+};

package/packages/utils/src/index.ts

@@ -6,6 +6,7 @@ export { addClass } from './addClass';
 export { removeClass } from './removeClass';
 export { debounce } from './debounce';
 export { wait } from './wait';
+export { forceReflow } from './forceReflow';
 export { scaledImage } from './scaledImage';
 export { nTimes } from './nTimes';
 export { getDisplayToggler, DISPLAY_NONE } from './displayToggler';

package/packages/utils/src/xhr/xhrSend.ts

@@ -84,7 +84,9 @@ function xhrSend(url: string, options: Partial<XhrOptions> = {}): Promise<XhrRes
         const xhr = new XMLHttpRequest();
 
         function onLoad() {
-            const dataText = 'response' in xhr ? xhr.response : xhr.responseText;
+            const dataText = 'response' in (xhr as XMLHttpRequest)
+                ? xhr.response
+                : xhr.responseText;
             const dataJson = parseJson(dataText);
             const status = xhr.status === undefined ? HttpStatusCode.OK : xhr.status;
             const statusText = xhr.statusText === undefined ? 'OK' : xhr.statusText;