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

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@24i/bigscreen-sdk",
-    "version": "1.0.9-alpha.2201",
+    "version": "1.0.9-alpha.2203",
     "description": "SmartApps BIGscreen SDK monorepo",
     "main": "index.js",
     "scripts": {

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/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/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/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/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/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

@@ -2824,7 +2824,6 @@ declare namespace React {
         button: DetailedHTMLFactory<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>;
         canvas: DetailedHTMLFactory<CanvasHTMLAttributes<HTMLCanvasElement>, HTMLCanvasElement>;
         caption: DetailedHTMLFactory<HTMLAttributes<HTMLElement>, HTMLElement>;
-        center: DetailedHTMLFactory<HTMLAttributes<HTMLElement>, HTMLElement>;
         cite: DetailedHTMLFactory<HTMLAttributes<HTMLElement>, HTMLElement>;
         code: DetailedHTMLFactory<HTMLAttributes<HTMLElement>, HTMLElement>;
         col: DetailedHTMLFactory<ColHTMLAttributes<HTMLTableColElement>, HTMLTableColElement>;
@@ -3162,7 +3161,6 @@ declare global {
             button: React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>;
             canvas: React.DetailedHTMLProps<React.CanvasHTMLAttributes<HTMLCanvasElement>, HTMLCanvasElement>;
             caption: React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>;
-            center: React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>;
             cite: React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>;
             code: React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>;
             col: React.DetailedHTMLProps<React.ColHTMLAttributes<HTMLTableColElement>, HTMLTableColElement>;