@24i/bigscreen-sdk 1.0.8 → 1.0.9-alpha.2203

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@24i/bigscreen-sdk",
-    "version": "1.0.8",
+    "version": "1.0.9-alpha.2203",
     "description": "SmartApps BIGscreen SDK monorepo",
     "main": "index.js",
     "scripts": {
@@ -54,11 +54,11 @@
         "@babel/core": "^7.19.0",
         "@babel/preset-env": "^7.19.0",
         "@types/fs-extra": "^9.0.13",
-        "@types/inquirer": "^9.0.1",
-        "@types/jest": "^29.0.2",
+        "@types/inquirer": "^9.0.3",
+        "@types/jest": "^29.2.3",
         "@types/minimist": "^1.2.2",
         "@types/node": "^18.7.18",
-        "@types/react": "^18.0.20",
+        "@types/react": "^18.0.25",
         "babel-jest": "^29.0.3",
         "chalk": "^5.0.1",
         "coveralls": "^3.1.1",
@@ -66,15 +66,15 @@
         "fs-extra": "^10.1.0",
         "full-icu": "^1.5.0",
         "identity-obj-proxy": "^3.0.0",
-        "inquirer": "^9.1.1",
-        "jest": "^29.0.3",
+        "inquirer": "^9.1.4",
+        "jest": "^29.3.1",
         "jest-canvas-mock": "^2.4.0",
         "jest-environment-jsdom": "^29.0.3",
         "minimist": "^1.2.6",
         "patch-package": "^6.4.7",
         "sass": "^1.54.9",
         "sass-true": "^6.1.0",
-        "ts-jest": "^29.0.1",
+        "ts-jest": "^29.0.3",
         "ts-node": "^10.9.1",
         "tsconfig-paths-jest": "0.0.1",
         "typescript": "^4.8.3"

package/packages/analytics/README.md

@@ -44,7 +44,7 @@ class DetailScene {
         });
         this.a('buffering_stop');
         // render
-        this.a('screen_view');
+        this.a('scene_view');
     }
 }
 ```
@@ -60,6 +60,6 @@ Clients have to opt-in to events they wish to listen to. This can be done by lis
 using a regular expression.
 
 ```typescript
-analytics.addClient(new GoogleAnalytics(), ['screen_view', 'buffering_start', 'buffering_stop']);
+analytics.addClient(new GoogleAnalytics(), ['scene_view', 'buffering_start', 'buffering_stop']);
 analytics.addClient(new ConsoleAnalytics(), /.*/);
 ```

package/packages/analytics/src/A.ts

@@ -16,8 +16,8 @@ export class A {
      * // Creates a function and sets the basic payload.
      * const a = A.of({ sceneType: 'HOME', sceneId: 'home' });
      *
-     * // Sends 'screen_view' event with the basic payload.
-     * a('screen_view');
+     * // 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 });

package/packages/analytics/src/Analytics.ts

@@ -51,7 +51,7 @@ class Analytics {
             registeredEvents[eventName] = listener;
         });
         this.clients[client.name] = {
-            client: client,
+            client,
             registeredEvents,
         };
     }

package/packages/analytics/src/clients/GoogleAnalytics/GoogleAnalytics.ts

@@ -80,7 +80,7 @@ export class GoogleAnalytics implements AnalyticsClient {
     }
 
     async startSession() {
-        const sessionNumber = parseInt(await Storage.getItem(GA_SESSION_COUNTER) ?? '0') + 1;
+        const sessionNumber = parseInt(await Storage.getItem(GA_SESSION_COUNTER) ?? '0', 10) + 1;
         this.constantUrlParams.sct = sessionNumber;
         this.constantUrlParams.sid = generateSessionId();
         await Storage.setItem(GA_SESSION_COUNTER, sessionNumber.toString());

package/packages/analytics/src/clients/GoogleAnalytics/constants.ts

@@ -12,7 +12,7 @@ export const GOOGLE_ANALYTICS_TRIGGERS = [
     'playback_stop',
     'player_close',
     'player_open',
-    'screen_view',
+    'scene_view',
     'scroll_25',
     'scroll_50',
     'scroll_75',
@@ -23,31 +23,31 @@ export const TRIGGER_NAME_TO_GA_EVENTS: Record<
     typeof GOOGLE_ANALYTICS_TRIGGERS[number], GAEventsNames[]
 > = {
     // App
-    'app_close': ['app_close', 'video_progress'],
+    app_close: ['app_close', 'video_progress'],
 
     // Playback
-    'playback_10': ['video_progress'],
-    'playback_25': ['video_progress'],
-    'playback_50': ['video_progress'],
-    'playback_75': ['video_progress'],
-    'playback_90': ['video_progress'],
-    'playback_pause': ['video_progress'],
-    'playback_start': ['video_start'],
-    'playback_stop': ['video_progress'],
+    playback_10: ['video_progress'],
+    playback_25: ['video_progress'],
+    playback_50: ['video_progress'],
+    playback_75: ['video_progress'],
+    playback_90: ['video_progress'],
+    playback_pause: ['video_progress'],
+    playback_start: ['video_start'],
+    playback_stop: ['video_progress'],
 
     // Player
-    'player_close': ['a24i_content', 'video_progress'],
-    'player_open': ['a24i_content'],
+    player_close: ['a24i_content', 'video_progress'],
+    player_open: ['a24i_content'],
 
     // Scenes
-    'screen_view': [
+    scene_view: [
         'page_view',
         'a24i_operational',
     ],
 
     // Scrolling in scene
-    'scroll_25': ['scroll'],
-    'scroll_50': ['scroll'],
-    'scroll_75': ['scroll'],
-    'scroll_90': ['scroll'],
+    scroll_25: ['scroll'],
+    scroll_50: ['scroll'],
+    scroll_75: ['scroll'],
+    scroll_90: ['scroll'],
 };

package/packages/analytics/src/constants.ts

@@ -26,7 +26,7 @@ export const EVENT_NAMES = [
     'player_open',
 
     // Scenes
-    'screen_view',
+    'scene_view',
 
     // Scrolling in scene
     'scroll_25',
@@ -52,5 +52,5 @@ export const ONLY_ONCE_EVENTS: AnalyticsEventsNames[] = [
 
 export const UNREPEATABLE_EVENTS: AnalyticsEventsNames[] = [
     // Scenes
-    'screen_view',
+    'scene_view',
 ];

package/packages/analytics/src/interface.ts

@@ -47,7 +47,7 @@ export type AnalyticsEventsMap = {
     'player_open': (payload: void) => void,
 
     // Scenes
-    'screen_view': (payload: SceneInfo) => void,
+    'scene_view': (payload: SceneInfo) => void,
 
     // Scrolling in scene
     'scroll_25': (payload: SceneInfo) => void,

package/packages/developer-tools/src/PlayerDebugWindow/constants.ts

@@ -49,6 +49,21 @@ export const MEDIA_INFO_DESCRIPTION: Record<string, MediaInfo> = {
     audioCodec: {
         title: 'Audio codec',
     },
+    audioBitrate: {
+        title: 'Audio bitrate',
+    },
+    audioSamplingRate: {
+        title: 'Audio sampling rate',
+    },
+    audioLanguage: {
+        title: 'Audio language',
+    },
+    subtitlesAvailable: {
+        title: 'Subtitles available',
+    },
+    availableSubtitlesListString: {
+        title: 'List of available subtitles',
+    },
     drmProtection: {
         title: 'DRM protection',
     },

package/packages/digital-clock/src/DigitalClock.tsx

@@ -40,7 +40,7 @@ export class DigitalClock extends Component<Props> {
 
     setTime() {
         const { withSeconds } = this.props;
-        const currentTimestampMs = time.getCurrentUnixTime();
+        const currentTimestampMs = time.getCurrentTime().getTime();
         if (this.oldUnixTimestampMs !== currentTimestampMs) {
             const options = withSeconds ? WITH_SECONDS_OPTIONS : WITHOUT_SECONDS_OPTIONS;
             this.clearMount((

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

@@ -122,6 +122,7 @@ export class DataManager implements IDataManager {
                     const newStart = lastRangeFrom - cellSize;
                     newRange[START] = newStart;
                 }
+                // eslint-disable-next-line no-continue
                 continue;
             }
             if (start < rangeFrom) {

package/packages/epg/src/v2/DatePicker.tsx

@@ -1,4 +1,5 @@
 import { Component, createRef, DeclareProps } from '@24i/bigscreen-sdk/jsx';
+import { time } from '@24i/bigscreen-sdk/time';
 import { Picker } from '@24i/bigscreen-sdk/picker';
 import { DatePicker as NativeDatePicker } from '@24i/bigscreen-sdk/picker/DatePicker';
 import { DAY_IN_MS, HOUR_IN_MS, MINUTE_IN_MS, SECOND_IN_MS } from '@24i/bigscreen-sdk/utils';
@@ -46,9 +47,9 @@ const prepareDateData = ({
 
 const defaultFormat = (date: Date) => {
     const locale = i18n.getLanguage();
-    return l10n.date(date, locale).toLocaleDateString(
-        { weekday: 'short', day: 'numeric', month: 'short' }
-    );
+    return l10n
+        .date(date.getTime() + time.getTimezoneOffsetMs(), locale)
+        .toLocaleDateString({ weekday: 'short', day: 'numeric', month: 'short' });
 };
 
 export class DatePicker extends Component<Props> implements IDatePicker {

package/packages/epg/src/v2/DateToast/DateToast.tsx

@@ -6,28 +6,30 @@ import { time } from '@24i/bigscreen-sdk/time';
 import { HOUR_IN_MS } from '@24i/bigscreen-sdk/utils/timeConstants';
 import { InternalEpg, Plugin } from '../interface';
 
-const formatTime = (timestamp: number) => l10n.date(timestamp).toLocaleTimeString(
+const formatTime = (localTimestamp: number) => l10n.date(localTimestamp).toLocaleTimeString(
     { hour: 'numeric', minute: '2-digit' },
 );
 
-const formatDate = (timestamp: number) => {
-    if (time.isToday(timestamp)) {
+const formatDate = (localTimestamp: number) => {
+    if (time.isToday(localTimestamp)) {
         return i18n.t('date.today');
     }
-    if (time.isYesterday(timestamp)) {
+    if (time.isYesterday(localTimestamp)) {
         return i18n.t('date.yesterday');
     }
-    if (time.isTomorrow(timestamp)) {
+    if (time.isTomorrow(localTimestamp)) {
         return i18n.t('date.tomorrow');
     }
-    return l10n.date(timestamp).toLocaleString({
+    return l10n.date(localTimestamp).toLocaleString({
         weekday: 'short',
         day: 'numeric',
         month: 'short',
     });
 };
 
-const formatDatetime = (timestamp: number) => `${formatDate(timestamp)} • ${formatTime(timestamp)}`;
+const formatDatetime = (localTimestamp: number) => (
+    `${formatDate(localTimestamp)} • ${formatTime(localTimestamp)}`
+);
 
 type Props = {
     epg: InternalEpg<any, any, any, any>,
@@ -44,7 +46,7 @@ export class DateToast extends Component<Props> implements Plugin {
 
     onScrolledToTimestamp(timestamp: number) {
         const { epg } = this.props;
-        const day = formatDatetime(timestamp);
+        const day = formatDatetime(timestamp + time.getTimezoneOffsetMs());
         if (this.lastDay === null) { // we do not want to display it after render and first move
             this.lastDay = day;
             return;

package/packages/epg/src/v2/Day.tsx

@@ -1,4 +1,5 @@
 import { Component, createRef, setText } from '@24i/bigscreen-sdk/jsx';
+import { time } from '@24i/bigscreen-sdk/time';
 import { l10n } from '@24i/bigscreen-sdk/l10n';
 import { DayProps as Props, Day as IDay } from './interface';
 
@@ -15,9 +16,9 @@ export class Day extends Component<Props> implements IDay {
     }
 
     private formatCurrentTimestamp() {
-        return l10n.date(this.timestamp).toLocaleDateString(
-            { weekday: 'long', day: 'numeric', month: 'short' },
-        );
+        return l10n
+            .date(this.timestamp + time.getTimezoneOffsetMs())
+            .toLocaleDateString({ weekday: 'long', day: 'numeric', month: 'short' });
     }
 
     render() {

package/packages/epg/src/v2/Epg.tsx

@@ -297,6 +297,8 @@ export class Epg<
         return ref;
     }
 
+    isFocusInRows = () => this.focused === 'epg';
+
     focus(options?: FocusOptions) {
         if (this.focused === 'datepicker') {
             this.datePickerComponent.current!.focus(options);
@@ -376,10 +378,6 @@ export class Epg<
         return this.inputEvents.isVerticallyFastScrolling();
     }
 
-    isFocusInRows = () => {
-        return this.focused === 'epg';
-    };
-
     render() {
         const {
             datePickerProps, timelineWidthPx, channelHeaderWidthPx, scrollStepMs, rowHeightPx,

package/packages/epg/src/v2/ProgramInfo/utils.ts

@@ -1,4 +1,5 @@
 import { l10n } from '@24i/bigscreen-sdk/l10n';
+import { time } from '@24i/bigscreen-sdk/time';
 import { Asset } from '@24i/smartapps-datalayer/models';
 
 export const cutString = (string: string, length: number) => {
@@ -16,9 +17,9 @@ export const getSubtitle = (asset: Asset) => (
         : ''
 );
 
-const toLocaleTimeString = (timestamp: number) => l10n.date(timestamp).toLocaleTimeString(
-    { hour: 'numeric', minute: '2-digit' },
-);
+const toLocaleTimeString = (timestamp: number) => l10n
+    .date(timestamp + time.getTimezoneOffsetMs())
+    .toLocaleTimeString({ hour: 'numeric', minute: '2-digit' });
 
 export const getBroadcastTime = (asset: Asset) => {
     const start = toLocaleTimeString(asset.program!.startTime);

package/packages/epg/src/v2/TimelineSection.tsx

@@ -1,4 +1,5 @@
 import { Component, createRef, setText } from '@24i/bigscreen-sdk/jsx';
+import { time } from '@24i/bigscreen-sdk/time';
 import { l10n } from '@24i/bigscreen-sdk/l10n';
 import { offsetPosition } from '@24i/bigscreen-sdk/utils';
 import { TimelineSectionProps as Props, TimelineSection as ITimelineSection } from './interface';
@@ -23,7 +24,9 @@ export class TimelineSection extends Component<Props> implements ITimelineSectio
     }
 
     private formatCurrentTimestamp() {
-        return l10n.date(this.timestamp).toLocaleTimeString({ hour: 'numeric', minute: '2-digit' });
+        return l10n
+            .date(this.timestamp + time.getTimezoneOffsetMs())
+            .toLocaleTimeString({ hour: 'numeric', minute: '2-digit' });
     }
 
     render() {

package/packages/focus/src/Layout/Matrix.tsx

@@ -144,24 +144,6 @@ export class Matrix extends Component<Props> implements IFocusable {
         return false;
     }
 
-    isDirectionLeft(event: KeyboardEvent) {
-        const { dir } = this.props;
-        const rtl = isRtl(dir);
-        return (
-            (!rtl && LEFT.is(event))
-            || (rtl && RIGHT.is(event))
-        );
-    }
-
-    isDirectionRight(event: KeyboardEvent) {
-        const { dir } = this.props;
-        const rtl = isRtl(dir);
-        return (
-            (!rtl && RIGHT.is(event))
-            || (rtl && LEFT.is(event))
-        );
-    }
-
     moveForwards = (isCircular: boolean) => (x: number, length: number) => {
         if (x === length - 1) {
             return isCircular ? 0 : length - 1;
@@ -204,6 +186,24 @@ export class Matrix extends Component<Props> implements IFocusable {
         return this.searchVertical(column, fromY, this.moveForwards(!!isCircular));
     };
 
+    isDirectionLeft(event: KeyboardEvent) {
+        const { dir } = this.props;
+        const rtl = isRtl(dir);
+        return (
+            (!rtl && LEFT.is(event))
+            || (rtl && RIGHT.is(event))
+        );
+    }
+
+    isDirectionRight(event: KeyboardEvent) {
+        const { dir } = this.props;
+        const rtl = isRtl(dir);
+        return (
+            (!rtl && RIGHT.is(event))
+            || (rtl && LEFT.is(event))
+        );
+    }
+
     isDifferentReferenceFromCurrent(index: Index2D): boolean {
         const { current } = this.getRefAt(this.index);
         const { current: searched } = this.getRefAt(index);

package/packages/grid/src/Base/Base.tsx

@@ -178,16 +178,6 @@ export class GridBase<T extends Item<U>, U>
         }
     };
 
-    shouldPreventBlur(event: KeyboardEvent) {
-        const { horizontal, preventBlurOnLongPress } = this.props;
-        return (this.preventBlurCounter >= PREVENT_BLUR_ON_LONG_PRESS_KEYDOWNS && (
-            (preventBlurOnLongPress.forward && isForward(event, horizontal))
-            || (preventBlurOnLongPress.backward && isBackward(event, horizontal))
-            || (preventBlurOnLongPress.forwardGroup && isFwGroup(event, horizontal))
-            || (preventBlurOnLongPress.backwardGroup && isBwGroup(event, horizontal))
-        ));
-    }
-
     getRefAtIndex(i: number): Reference<T> {
         const ref = this.itemRefs[i];
         if (!ref) {
@@ -253,6 +243,16 @@ export class GridBase<T extends Item<U>, U>
         this.fastScrollingCounter.reset();
     };
 
+    shouldPreventBlur(event: KeyboardEvent) {
+        const { horizontal, preventBlurOnLongPress } = this.props;
+        return (this.preventBlurCounter >= PREVENT_BLUR_ON_LONG_PRESS_KEYDOWNS && (
+            (preventBlurOnLongPress.forward && isForward(event, horizontal))
+            || (preventBlurOnLongPress.backward && isBackward(event, horizontal))
+            || (preventBlurOnLongPress.forwardGroup && isFwGroup(event, horizontal))
+            || (preventBlurOnLongPress.backwardGroup && isBwGroup(event, horizontal))
+        ));
+    }
+
     animatedScrollStarted() {
         this.isAnimatedScrollRunning = true;
     }

package/packages/icon/src/Icon.tsx

@@ -62,8 +62,7 @@ export class Icon<T> extends Component<Props<T>> {
         return (
             <div
                 ref={this.ref}
-                className={`${className
-                    ? className : ''} icon ${icon
+                className={`${className || ''} icon ${icon
                     ? this.getClass(icon) : ''} ${initialIsHidden
                     ? DISPLAY_NONE : ''}`}
             />

package/packages/keyboard/src/WhitelabelKeyboard/Keyboard.tsx

@@ -56,7 +56,7 @@ export class Keyboard extends KeyboardBase<Layouts, Props> {
     createLanguageFocusMatrix() {
         const { languageLayout } = this.props;
         this.languageFocusMatrix = generateFocusMatrixFromStringMatrix(
-            this.keyRefs, languageLayout!.makeFocusStrings(languageLayout!.layout, true)
+            this.keyRefs, languageLayout!.makeFocusStrings(languageLayout!.layout, true),
         );
     }
 
@@ -257,23 +257,25 @@ export class Keyboard extends KeyboardBase<Layouts, Props> {
                         <div className="key-row">
                             <div className="key key-wide key-empty">&nbsp;</div>
                         </div>
-                        {!!languageLayout ?
-                            <div className="key-row rounded-border-container">
-                                <Interactable
-                                    ref={this.keyRefs.language}
-                                    className="key key-wide key-with-icon key-language"
-                                    onPress={() => this.onLanguage()}
-                                >
-                                    <div className="key-background">
-                                        <div className="key-mask-icon" />
-                                    </div>
-                                </Interactable>
-                            </div>
-                            :
-                            <div className="key-row">
-                                <div className="key key-wide key-empty">&nbsp;</div>
-                            </div>
-                        }
+                        {languageLayout
+                            ? (
+                                <div className="key-row rounded-border-container">
+                                    <Interactable
+                                        ref={this.keyRefs.language}
+                                        className="key key-wide key-with-icon key-language"
+                                        onPress={() => this.onLanguage()}
+                                    >
+                                        <div className="key-background">
+                                            <div className="key-mask-icon" />
+                                        </div>
+                                    </Interactable>
+                                </div>
+                            )
+                            : (
+                                <div className="key-row">
+                                    <div className="key key-wide key-empty">&nbsp;</div>
+                                </div>
+                            )}
                     </div>
                     <div className="keys-container key-layout">
                         {layout}

package/packages/l10n/src/date/common.ts

@@ -7,7 +7,7 @@ const NOON = 12;
 
 export const SECOND_FROM_END = 2;
 
-export const h24 = (date: Date) => date.getHours().toString();
+export const h24 = (date: Date) => date.getUTCHours().toString();
 
 export const hh24 = (date: Date) => {
     const h = h24(date);
@@ -15,7 +15,7 @@ export const hh24 = (date: Date) => {
 };
 
 export const h12 = (date: Date) => {
-    const h = date.getHours() % NOON;
+    const h = date.getUTCHours() % NOON;
     return h === 0 ? '12' : h.toString();
 };
 
@@ -24,14 +24,14 @@ export const hh12 = (date: Date) => {
     return h.length === 1 ? `0${h}` : h;
 };
 
-export const m = (date: Date) => date.getMinutes().toString();
+export const m = (date: Date) => date.getUTCMinutes().toString();
 
 export const mm = (date: Date) => {
     const min = m(date);
     return min.length === 1 ? `0${min}` : min;
 };
 
-export const s = (date: Date) => date.getSeconds().toString();
+export const s = (date: Date) => date.getUTCSeconds().toString();
 
 export const ss = (date: Date) => {
     const sec = s(date);
@@ -39,7 +39,7 @@ export const ss = (date: Date) => {
 };
 
 export const amOrPm = (date: Date) => (
-    date.getHours() < NOON ? 'AM' : 'PM'
+    date.getUTCHours() < NOON ? 'AM' : 'PM'
 );
 
 export const h24Mm = (date: Date) => `${h24(date)}:${mm(date)}`;
@@ -107,7 +107,7 @@ export const collonSeparatedHour12MinuteSecond = (date: Date, options: DateTimeF
 
 export const processYear = (dateStringParts: string[], year: Year | undefined, date: Date) => {
     if (typeof year === 'undefined') return;
-    const fullYear = date.getFullYear().toString();
+    const fullYear = date.getUTCFullYear().toString();
     dateStringParts.push(
         year === '2-digit'
             ? fullYear.substring(fullYear.length - SECOND_FROM_END)

package/packages/l10n/src/date/de.ts

@@ -1,7 +1,7 @@
 import { processYear, dateFormatter, toTwoDigitLocaleTimeString } from './common';
 import { DateTimeFormatOptions, Day, Month, Weekday, Year } from './types';
 
-//https://web.library.yale.edu/cataloging/months
+// https://web.library.yale.edu/cataloging/months
 const DE_MONTHS = {
     narrow: [
         'J', 'F', 'M', 'A', 'M', 'J', 'J', 'A', 'S', 'O', 'N', 'D',
@@ -40,7 +40,7 @@ const processMonth = (
 ) => {
     if (typeof month === 'undefined') return;
     if (month === '2-digit' || month === 'numeric') {
-        const strMonth = (date.getMonth() + 1).toString() + '.';
+        const strMonth = `${(date.getMonth() + 1).toString()}.`;
         dateParts.push(strMonth);
     } else {
         const finalMonth = DE_MONTHS[month][date.getMonth()];
@@ -80,10 +80,10 @@ const toLocaleDateString = (date: Date) => (
     const dateConnection = '';
     const dateParts: string[] = [];
     processDay(dateParts, day, date);
-    if ((month === 'narrow' ||
-        month === 'short' ||
-        month === 'long') &&
-        day != null
+    if ((month === 'narrow'
+        || month === 'short'
+        || month === 'long')
+        && day != null
     ) {
         dateParts.push(' ');
     }

package/packages/l10n/src/date/en-common.ts

@@ -32,7 +32,7 @@ export const processWeekday = (
     day: Day | undefined,
     weekday: Weekday | undefined,
     date: Date,
-    weekdaysLocaleData: LocaleData = EN_WEEKDAYS
+    weekdaysLocaleData: LocaleData = EN_WEEKDAYS,
 ) => {
     if (typeof weekday === 'undefined') return;
     let weekdayString = weekdaysLocaleData[weekday][date.getDay()];

package/packages/l10n/src/date/fr.ts

@@ -1,7 +1,7 @@
 import { dateFormatter, processYear, toTwoDigitLocaleTimeString } from './common';
 import { DateTimeFormatOptions, Day, Month, Weekday, Year } from './types';
 
-//https://web.library.yale.edu/cataloging/months
+// https://web.library.yale.edu/cataloging/months
 const FR_MONTHS = {
     narrow: [
         'J', 'F', 'M', 'A', 'M', 'J', 'J', 'A', 'S', 'O', 'N', 'D',
@@ -38,7 +38,7 @@ const processWeekday = (
     if (typeof weekday === 'undefined') return;
     let weekdayString = FR_WEEKDAYS[weekday][date.getDay()];
     if (
-        ( typeof year !== 'undefined'
+        (typeof year !== 'undefined'
         || typeof month !== 'undefined'
         || typeof day !== 'undefined') && weekday !== 'long'
     ) {
@@ -48,11 +48,12 @@ const processWeekday = (
 };
 
 const processDay = (
-    dateParts: string[], day: Day | undefined, month: Month | undefined, date: Date) => {
+    dateParts: string[], day: Day | undefined, month: Month | undefined, date: Date,
+) => {
     if (typeof day === 'undefined') return;
     const strDate = date.getDate().toString();
     dateParts.push(
-        strDate.length === 1 && month !== 'short' && month !== 'long'  ? `0${strDate}` : strDate
+        strDate.length === 1 && month !== 'short' && month !== 'long' ? `0${strDate}` : strDate,
     );
 };
 

package/packages/l10n/src/date/he.ts

@@ -81,14 +81,14 @@ const toLocaleDateString = (date: Date) => (
     },
 ) => {
     const dateStringParts: string[] = [];
-    processWeekday(dateStringParts,  weekday, date);
-    const dateConnection = month === 'numeric' || month === '2-digit' ?  '.' : '';
+    processWeekday(dateStringParts, weekday, date);
+    const dateConnection = month === 'numeric' || month === '2-digit' ? '.' : '';
     const dateParts: string[] = [];
     processDay(dateParts, day, date);
-    if ((month === 'narrow' ||
-        month === 'short' ||
-        month === 'long') &&
-        day != null
+    if ((month === 'narrow'
+        || month === 'short'
+        || month === 'long')
+        && day != null
     ) {
         dateParts.push(' ');
     }

package/packages/l10n/src/date/types.ts

@@ -46,7 +46,7 @@ export type Props = {
     options?: DateTimeFormatOptions,
 };
 
-export type LocaleData  = {
+export type LocaleData = {
     narrow: string[];
     short: string[];
     long: string[];

package/packages/list/src/Base/Base.tsx

@@ -152,14 +152,6 @@ export class ListBase<T extends Item<U>, U>
         }
     };
 
-    shouldPreventBlur(event: KeyboardEvent) {
-        const { horizontal, preventBlurOnLongPress } = this.props;
-        return (this.preventBlurCounter >= PREVENT_BLUR_ON_LONG_PRESS_KEYDOWNS && (
-            (preventBlurOnLongPress.forward && isForward(event, horizontal))
-            || (preventBlurOnLongPress.backward && isBackward(event, horizontal))
-        ));
-    }
-
     getRefAtIndex(i: number): Reference<T> {
         const ref = this.itemRefs[i];
         if (!ref) {
@@ -201,6 +193,14 @@ export class ListBase<T extends Item<U>, U>
         this.fastScrollingCounter.reset();
     }
 
+    shouldPreventBlur(event: KeyboardEvent) {
+        const { horizontal, preventBlurOnLongPress } = this.props;
+        return (this.preventBlurCounter >= PREVENT_BLUR_ON_LONG_PRESS_KEYDOWNS && (
+            (preventBlurOnLongPress.forward && isForward(event, horizontal))
+            || (preventBlurOnLongPress.backward && isBackward(event, horizontal))
+        ));
+    }
+
     animatedScrollStarted() {
         this.isAnimatedScrollRunning = true;
     }

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

@@ -113,7 +113,8 @@ export class PlayerUI extends Component<Props>
     };
 
     onKeyPause = () => {
-        if (!this.props.isPauseAllowed()) return false;
+        const { isPauseAllowed } = this.props;
+        if (!isPauseAllowed()) return false;
         if (this.seeking.isAutomaticallySeeking()) {
             this.seeking.stopAutomaticSeek();
             if (this.isPlaying()) this.trigger(PlayerAction.PAUSE);
@@ -128,7 +129,8 @@ export class PlayerUI extends Component<Props>
     };
 
     onKeyPlayPause = () => {
-        if (!this.props.isPauseAllowed()) return false;
+        const { isPauseAllowed } = this.props;
+        if (!isPauseAllowed()) return false;
         if (this.seeking.isSeeking()) {
             this.seeking.confirmSeek();
             if (!this.isPlaying()) this.trigger(PlayerAction.PLAY);
@@ -161,9 +163,7 @@ export class PlayerUI extends Component<Props>
 
     };
 
-    getPlayer = () => {
-        return this.player!;
-    };
+    getPlayer = () => this.player!;
 
     setPlayer(player: PlayerBase<any>) {
         this.player = player;

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

@@ -137,8 +137,8 @@ export class Seekbar extends Component<Props> implements IFocusable {
         }
         const isFastSeeking = this.rightConsecutiveness >= FAST_TRESHOLD;
         if (
-            (seekTime != null &&
-              (seekTime + SLOW_TIME >= this.duration - SAFE_END_MARGIN
+            (seekTime != null
+              && (seekTime + SLOW_TIME >= this.duration - SAFE_END_MARGIN
               || (isFastSeeking && seekTime + FAST_TIME >= this.duration - SAFE_END_MARGIN)))
             || (seekTime == null && this.currentTime >= this.duration - SAFE_END_MARGIN)
         ) {
@@ -165,7 +165,10 @@ export class Seekbar extends Component<Props> implements IFocusable {
         this.updateSeekBar();
     };
 
-    onStopAutomaticSeek = () =>  this.props.ui.enableHiding();
+    onStopAutomaticSeek = () => {
+        const { ui } = this.props;
+        ui.enableHiding();
+    };
 
     onTimeUpdate = ({ currentTime }: ITimeUpdateEvent) => {
         const { ui } = this.props;

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

@@ -96,7 +96,7 @@ export class Seeking implements IEvents<SeekingEventsMap> {
             if (this.ffConsecutiveness === FAST_THRESHOLD) {
                 this.automaticSeekInterval.set(
                     () => this.seekForward(FAST_SEEK_TIME),
-                    AUTOMATIC_SEEK_INTERVAL
+                    AUTOMATIC_SEEK_INTERVAL,
                 );
             }
             return;
@@ -116,7 +116,7 @@ export class Seeking implements IEvents<SeekingEventsMap> {
             if (this.rewConsecutiveness === FAST_THRESHOLD) {
                 this.automaticSeekInterval.set(
                     () => this.seekBackward(FAST_SEEK_TIME),
-                    AUTOMATIC_SEEK_INTERVAL
+                    AUTOMATIC_SEEK_INTERVAL,
                 );
             }
             return;

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

@@ -35,8 +35,8 @@ const getSeekingMock = (): jest.Mocked<IPlayerUI['seeking']> => ({
 
 const PLAYER_MOCK_DURATION = 60000;
 
-export const getPlayerMock = (): PlayerBase<any> =>{
-    const playerMock =  new PlayerBaseMock();
+export const getPlayerMock = (): PlayerBase<any> => {
+    const playerMock = new PlayerBaseMock();
     jest.spyOn(playerMock, 'duration', 'get').mockReturnValue(PLAYER_MOCK_DURATION);
 
     return playerMock;

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

@@ -63,9 +63,9 @@ export const formatTime = (duration: number, pattern: string) => {
     const unitValues = calculateUnitValues(duration, units);
     let result: string = pattern;
     forEach(matches, (match) => {
-        const formatedValue = Number.isNaN(unitValues[match.unit]) ?
-            '--' :
-            unitValues[match.unit]!.toString().padStart(match.count, '0');
+        const formatedValue = Number.isNaN(unitValues[match.unit])
+            ? '--'
+            : unitValues[match.unit]!.toString().padStart(match.count, '0');
         result = result.replace(
             match.completeMatch,
             formatedValue,

package/packages/time/README.md

@@ -52,7 +52,7 @@ await time.init({
 ```
 
 ### `getCurrentTime(): Date`
-It returns date object having local time set to server current time.
+It returns date object having UTC time set to local time.
 
 ### `getCurrentUnixTime(): number`
 It returns UNIX time in milliseconds of server UTC time.
@@ -60,6 +60,9 @@ It returns UNIX time in milliseconds of server UTC time.
 ### `getTimezoneOffset(): number`
 It returns timezone offset in minutes, for UTC+1 (Germany) is 60.
 
+### `getTimezoneOffsetMs(): number`
+It returns timezone offset in milliseconds, for UTC+1 (Germany) is 3600000.
+
 ### `initStatus: InitStatus`
 To check what time you are using, just check the `initStatus` property.
 

package/packages/time/src/Time.ts

@@ -1,6 +1,6 @@
 import { createInterval } from '@24i/bigscreen-sdk/utils/timers';
 import { parseIsoDate, getDayStart, getDayEnd } from './utils';
-import { InitStatus, ErrorCode } from './constants';
+import { InitStatus, ErrorCode, MS_PER_MINUTE } from './constants';
 import { Config, TimeServiceResp } from './types';
 
 /**
@@ -22,6 +22,9 @@ class Time {
     /** The difference in milliseconds between System Date and Server Date */
     offsetMs = 0;
 
+    /** The difference Date object internally adds to timestamp if not asking for UTC time. */
+    deviceOffset = new Date().getTimezoneOffset() * MS_PER_MINUTE;
+
     /** Timer for periodical time update */
     syncInterval = createInterval();
 
@@ -113,7 +116,7 @@ class Time {
         this.currentTime = currentTime;
         this.serverTime = date;
         this.serverUnixTime = unixTime;
-        this.offsetMs = this.currentTime.getTime() - this.serverTime.getTime();
+        this.offsetMs = this.currentTime.getTime() - this.serverTime.getTime() + this.deviceOffset;
         this.timezoneOffset = timezoneOffset;
     }
 
@@ -168,6 +171,15 @@ class Time {
         return this.timezoneOffset;
     }
 
+    /**
+     * Returns the timezone offset in milliseconds.
+     *
+     * @returns Timezone offset in milliseconds, e.g. for UTC+1 (Germany) is 3600000.
+     */
+    getTimezoneOffsetMs() {
+        return this.timezoneOffset * MS_PER_MINUTE;
+    }
+
     /**
      * Returns offset (milliseconds) between System and Server Date object.
      *

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

@@ -22,8 +22,8 @@ const getIsoDateString = (resp: TwentyFourIMediaTimeApi.ServiceDataResponse): st
         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);
+        // eslint-disable-next-line no-magic-numbers, sonarjs/no-nested-template-literals
+        const timeString = `${sign + `0${hours}`.slice(-2)}:${`0${minutes}`.slice(-2)}`;
         datetime = datetime.replace('Z', timeString);
     }
     return datetime;

package/packages/time/src/constants.ts

@@ -9,5 +9,6 @@ export const ErrorCode = {
     NO_TIME_SERVICE_PROVIDER: 'NO_TIME_SERVICE_PROVIDER',
 };
 
+export const MS_PER_MINUTE = 60000;
 export const MINUTES_PER_HOUR = 60;
 export const HOURS_PER_DAY = 24;

package/packages/types-bigscreen-jsx/index.d.ts

@@ -27,6 +27,7 @@
 //                 Victor Magalhães <https://github.com/vhfmag>
 //                 Dale Tan <https://github.com/hellatan>
 //                 Priyanshu Rav <https://github.com/priyanshurav>
+//                 Dmitry Semigradsky <https://github.com/Semigradsky>
 // Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
 // TypeScript Version: 2.8
 
@@ -1250,6 +1251,8 @@ declare namespace React {
         target: EventTarget & T;
     }
 
+    export type ModifierKey = "Alt" | "AltGraph" | "CapsLock" | "Control" | "Fn" | "FnLock" | "Hyper" | "Meta" | "NumLock" | "ScrollLock" | "Shift" | "Super" | "Symbol" | "SymbolLock";
+
     interface KeyboardEvent<T = Element> extends UIEvent<T, NativeKeyboardEvent> {
         altKey: boolean;
         /** @deprecated */
@@ -1259,7 +1262,7 @@ declare namespace React {
         /**
          * See [DOM Level 3 Events spec](https://www.w3.org/TR/uievents-key/#keys-modifier). for a list of valid (case-sensitive) arguments to this method.
          */
-        getModifierState(key: string): boolean;
+        getModifierState(key: ModifierKey): boolean;
         /**
          * See the [DOM Level 3 Events spec](https://www.w3.org/TR/uievents-key/#named-key-attribute-values). for possible values
          */
@@ -1285,7 +1288,7 @@ declare namespace React {
         /**
          * See [DOM Level 3 Events spec](https://www.w3.org/TR/uievents-key/#keys-modifier). for a list of valid (case-sensitive) arguments to this method.
          */
-        getModifierState(key: string): boolean;
+        getModifierState(key: ModifierKey): boolean;
         metaKey: boolean;
         movementX: number;
         movementY: number;
@@ -1304,7 +1307,7 @@ declare namespace React {
         /**
          * See [DOM Level 3 Events spec](https://www.w3.org/TR/uievents-key/#keys-modifier). for a list of valid (case-sensitive) arguments to this method.
          */
-        getModifierState(key: string): boolean;
+        getModifierState(key: ModifierKey): boolean;
         metaKey: boolean;
         shiftKey: boolean;
         targetTouches: TouchList;
@@ -1459,6 +1462,8 @@ declare namespace React {
         onProgressCapture?: ReactEventHandler<T> | undefined;
         onRateChange?: ReactEventHandler<T> | undefined;
         onRateChangeCapture?: ReactEventHandler<T> | undefined;
+        onResize?: ReactEventHandler<T> | undefined;
+        onResizeCapture?: ReactEventHandler<T> | undefined;
         onSeeked?: ReactEventHandler<T> | undefined;
         onSeekedCapture?: ReactEventHandler<T> | undefined;
         onSeeking?: ReactEventHandler<T> | undefined;
@@ -1858,6 +1863,7 @@ declare namespace React {
         hidden?: boolean | undefined;
         id?: string | undefined;
         lang?: string | undefined;
+        nonce?: string | undefined;
         placeholder?: string | undefined;
         slot?: string | undefined;
         spellCheck?: Booleanish | undefined;
@@ -1978,7 +1984,6 @@ declare namespace React {
         multiple?: boolean | undefined;
         muted?: boolean | undefined;
         name?: string | undefined;
-        nonce?: string | undefined;
         noValidate?: boolean | undefined;
         open?: boolean | undefined;
         optimum?: number | undefined;
@@ -2391,7 +2396,6 @@ declare namespace React {
         defer?: boolean | undefined;
         integrity?: string | undefined;
         noModule?: boolean | undefined;
-        nonce?: string | undefined;
         referrerPolicy?: HTMLAttributeReferrerPolicy | undefined;
         src?: string | undefined;
         type?: string | undefined;
@@ -2422,7 +2426,6 @@ declare namespace React {
 
     interface StyleHTMLAttributes<T> extends HTMLAttributes<T> {
         media?: string | undefined;
-        nonce?: string | undefined;
         scoped?: boolean | undefined;
         type?: string | undefined;
     }

package/packages/utils/src/textUtils.ts

@@ -4,7 +4,7 @@ const trimWithEllipsis = (
     row: HTMLSpanElement | HTMLDivElement,
     requestedNumberOfLines: number,
     ellipsis = ELLIPSIS,
-    ending = false
+    ending = false,
 ) : void => {
     if (!row.textContent) {
         return;
@@ -48,14 +48,10 @@ export const trimWithLeadingEllipsis = (
     row: HTMLSpanElement | HTMLDivElement,
     requestedNumberOfLines: number,
     ellipsis = ELLIPSIS,
-) => {
-    return trimWithEllipsis(row, requestedNumberOfLines, ellipsis, false);
-};
+) => trimWithEllipsis(row, requestedNumberOfLines, ellipsis, false);
 
 export const trimWithEndingEllipsis = (
     row: HTMLSpanElement | HTMLDivElement,
     requestedNumberOfLines: number,
     ellipsis = ELLIPSIS,
-) => {
-    return trimWithEllipsis(row, requestedNumberOfLines, ellipsis, true);
-};
+) => trimWithEllipsis(row, requestedNumberOfLines, ellipsis, true);