@24i/bigscreen-sdk 1.0.8-alpha.2178 → 1.0.8-alpha.2180

package/package.json

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

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

@@ -1,59 +1,143 @@
 import { Storage } from '@24i/bigscreen-sdk/storage';
+import { device } from '@24i/bigscreen-sdk/device';
 import { debounce } from '@24i/bigscreen-sdk/utils/debounce';
+import { createTimeout } from '@24i/bigscreen-sdk/utils/timers';
+import { MINUTE_IN_MS } from '@24i/bigscreen-sdk/utils/timeConstants';
 import { generateUuid } from '@24i/bigscreen-sdk/utils/generateUuid';
-import type { AnalyticsClient, AnalyticsEventsMap } from '../../interface';
-import { mapPayload } from './mapPayload';
-import { TRIGGER_NAME_TO_GA_EVENTS } from './constants';
-import { GAEventsNames } from './interface';
+import type { AnalyticsClient, AnalyticsEventsMap, SceneInfo } from '../../interface';
+import { mapEventParamsToUrlParams, mapPayload } from './mapPayload';
+import { prepareBody } from './prepareBody';
+import { getUrl } from './getUrl';
+import { generateSessionId } from './generateSessionId';
+import { GOOGLE_ANALYTICS_TRIGGERS, TRIGGER_NAME_TO_GA_EVENTS } from './constants';
+import {
+    GAEventsNames,
+    QueuedEvent,
+    ConstantUrlParams,
+    SessionInfo,
+    EventUrlParams,
+} from './interface';
 
 const SEND_DEBOUNCE_MS = 5000;
 const MAX_QUEUE_LENGTH = 10;
+// eslint-disable-next-line no-magic-numbers
+const SESSION_TIMEOUT = 30 * MINUTE_IN_MS;
 
 const GA_CLIENT_ID = 'GA_client_id';
-
-const getGAUrl = (id: string, secret: string) => (
-    // You can use the following URL for debugging if the events are not getting collected.
-    // `https://www.google-analytics.com/debug/mp/collect?measurement_id=${id}&api_secret=${secret}`
-    `https://www.google-analytics.com/mp/collect?measurement_id=${id}&api_secret=${secret}`
-);
+const GA_SESSION_COUNTER = 'GA_session_counter';
+const GA_FIRST_VISIT = 'GA_first_visit';
 
 export class GoogleAnalytics implements AnalyticsClient {
     name = 'GoogleAnalytics';
 
-    clientId = '';
-
-    sessionId = generateUuid();
+    constantUrlParams: ConstantUrlParams = {
+        cid: '',
+        sid: 0,
+        uamb: 0,
+        uap: '',
+        uapv: '',
+        uam: '',
+        seg: 0,
+        sct: 0,
+        _p: generateUuid(),
+    };
 
     a24iOperational = false;
 
-    eventsQueue: { name: GAEventsNames, params: Record<string, any> }[] = [];
+    lastOnEvent: number | undefined = undefined;
+
+    eventsQueue: QueuedEvent[] = [];
+
+    sessionTimeout = createTimeout();
+
+    isSessionActive = false;
 
-    constructor(private id: string, private secret: string) {
+    sessionStartSent = false;
+
+    firstEvent = true;
+
+    firstVisit: boolean | undefined = undefined;
+
+    constructor(private id: string) {
         this.init();
     }
 
     async init() {
-        this.clientId = await Storage.getItem(GA_CLIENT_ID) ?? '';
-        if (!this.clientId) {
-            this.clientId = generateUuid();
-            await Storage.setItem(GA_CLIENT_ID, this.clientId);
+        const params = this.constantUrlParams;
+        params.cid = await Storage.getItem(GA_CLIENT_ID) ?? '';
+        if (!params.cid) {
+            params.cid = generateUuid();
+            await Storage.setItem(GA_CLIENT_ID, params.cid);
         }
+        this.firstVisit = !(await Storage.getItem(GA_FIRST_VISIT)) ?? true;
+        if (this.firstVisit) {
+            await Storage.setItem(GA_FIRST_VISIT, '0');
+        }
+        await this.startSession();
+        params.uap = await device.getPlatformName();
+        params.uapv = await device.getPlatformVersion();
+        params.uam = await device.getModelName();
+    }
+
+    async startSession() {
+        const sessionNumber = parseInt(await Storage.getItem(GA_SESSION_COUNTER) ?? '0') + 1;
+        this.constantUrlParams.sct = sessionNumber;
+        this.constantUrlParams.sid = generateSessionId();
+        await Storage.setItem(GA_SESSION_COUNTER, sessionNumber.toString());
+        this.isSessionActive = true;
+        this.setSessionTimeout();
+    }
+
+    setSessionTimeout() {
+        this.sessionTimeout.set(() => {
+            this.isSessionActive = false;
+            this.sessionStartSent = false;
+            this.constantUrlParams.seg = 0;
+        }, SESSION_TIMEOUT);
     }
 
-    onEvent<Event extends keyof AnalyticsEventsMap>(
+    // @ts-ignore - cross event typing
+    async onEvent<Event extends keyof AnalyticsEventsMap>(
         triggerName: Event,
-        payload: Parameters<AnalyticsEventsMap[Event]>,
-    ): void {
-        const events = TRIGGER_NAME_TO_GA_EVENTS[triggerName];
-        events.forEach(async (event) => {
+        payload: Parameters<AnalyticsEventsMap[Event]>[0],
+    ) {
+        if (this.isSessionActive) {
+            this.setSessionTimeout();
+        } else {
+            await this.startSession();
+        }
+        const events = TRIGGER_NAME_TO_GA_EVENTS[
+            triggerName as typeof GOOGLE_ANALYTICS_TRIGGERS[number]
+        ];
+        const now = Date.now();
+        const engagementTime = this.lastOnEvent ? now - this.lastOnEvent : undefined;
+        this.lastOnEvent = now;
+        await Promise.all(events.map(async (event, index) => {
             if (event === 'a24i_operational' && !this.shouldContinueWithA24iOperational()) return;
-            const gtagPayload = mapPayload(event, triggerName, this.sessionId, payload);
-            this.send(event, gtagPayload);
-        });
+            const gtagPayload = mapPayload(
+                event, triggerName, await this.getSessionInfo(
+                    index === 0 ? engagementTime : undefined,
+                ),
+            );
+            const urlParams = mapEventParamsToUrlParams(payload as SceneInfo);
+            this.send(event, gtagPayload, urlParams);
+        }));
     }
 
-    private send(name: GAEventsNames, params: Record<string, any>) {
-        this.eventsQueue.push({ name, params });
+    private send(name: GAEventsNames, params: Record<string, any>, urlParams: EventUrlParams) {
+        const lastUrlParams = JSON.stringify(
+            this.eventsQueue[this.eventsQueue.length - 1]?.urlParams ?? {},
+        );
+        if (lastUrlParams !== '{}' && lastUrlParams !== JSON.stringify(urlParams)) {
+            this.sendQueue();
+        }
+        if (this.constantUrlParams.seg === 0) {
+            this.eventsQueue.push({ name, params, urlParams });
+            this.sendQueue();
+            this.constantUrlParams.seg = 1;
+            return;
+        }
+        this.eventsQueue.push({ name, params, urlParams });
         if (this.eventsQueue.length >= MAX_QUEUE_LENGTH) {
             this.sendQueue();
         } else {
@@ -62,13 +146,15 @@ export class GoogleAnalytics implements AnalyticsClient {
     }
 
     private sendQueue = () => {
-        const body = JSON.stringify({
-            client_id: this.clientId,
-            events: this.eventsQueue,
-        });
+        if (this.eventsQueue.length === 0) return;
+        const body = prepareBody(this.eventsQueue);
+        const { urlParams } = this.eventsQueue[0];
         this.eventsQueue.length = 0;
         try {
-            fetch(getGAUrl(this.id, this.secret), { method: 'POST', body });
+            fetch(getUrl(this.id, {
+                ...this.constantUrlParams,
+                ...urlParams,
+            }), { method: 'POST', body });
         } catch (e) {
             // Effort to send was made.
         }
@@ -81,4 +167,19 @@ export class GoogleAnalytics implements AnalyticsClient {
         if (!a24iOperational) this.a24iOperational = true;
         return !a24iOperational;
     }
+
+    private async getSessionInfo(engagementTime: number | undefined): Promise<SessionInfo> {
+        const sessionStarted = !this.sessionStartSent;
+        this.sessionStartSent = true;
+        const { firstEvent } = this;
+        this.firstEvent = false;
+        const { firstVisit } = this;
+        this.firstVisit = false;
+        return {
+            sessionStarted,
+            engagementTime,
+            firstEvent,
+            firstVisit: firstVisit as boolean,
+        };
+    }
 }

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

@@ -1,17 +1,30 @@
-import { AnalyticsEventsNames } from '../../interface';
 import { GAEventsNames } from './interface';
 
-export const TRIGGER_NAME_TO_GA_EVENTS: Record<AnalyticsEventsNames, GAEventsNames[]> = {
+export const GOOGLE_ANALYTICS_TRIGGERS = [
+    'app_close',
+    'playback_10',
+    'playback_25',
+    'playback_50',
+    'playback_75',
+    'playback_90',
+    'playback_pause',
+    'playback_start',
+    'playback_stop',
+    'player_close',
+    'player_open',
+    'screen_view',
+    'scroll_25',
+    'scroll_50',
+    'scroll_75',
+    'scroll_90',
+] as const;
+
+export const TRIGGER_NAME_TO_GA_EVENTS: Record<
+    typeof GOOGLE_ANALYTICS_TRIGGERS[number], GAEventsNames[]
+> = {
     // App
     'app_close': ['app_close', 'video_progress'],
 
-    // Data loading / Player buffering
-    'buffering_start': ['buffering_start'],
-    'buffering_stop': ['buffering_start'],
-
-    // Heartbeat
-    'heartbeat_5': ['a24i_content'],
-
     // Playback
     'playback_10': ['video_progress'],
     'playback_25': ['video_progress'],

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

@@ -0,0 +1,8 @@
+/* eslint-disable no-magic-numbers */
+/**
+ * Recommended way to generate session id by Google.
+ * Blackbox
+ */
+export const generateSessionId = () => (
+    Math.floor(Math.random() * (2147483647 - 0 + 1) + 0)
+);

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

@@ -0,0 +1,17 @@
+import { ConstantUrlParams, EventUrlParams } from './interface';
+
+const TRANSPORT_URL = 'https://www.google-analytics.com/g/collect?';
+// You can use the following URL for debugging if the events are not getting collected.
+// const TRANSPORT_URL = 'https://www.google-analytics.com/debug/g/collec?';
+
+export const getUrl = (id: string, params: ConstantUrlParams & EventUrlParams) => {
+    const urlParts = [
+        TRANSPORT_URL,
+        `v=2&tid=${id}`,
+    ];
+    (Object.keys(params) as (keyof (ConstantUrlParams & EventUrlParams))[])
+        .forEach((paramName: keyof (ConstantUrlParams & EventUrlParams)) => {
+            urlParts.push(`&${paramName}=${encodeURIComponent(params[paramName])}`);
+        });
+    return urlParts.join('');
+};

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

@@ -1 +1,2 @@
 export { GoogleAnalytics } from './GoogleAnalytics';
+export { GOOGLE_ANALYTICS_TRIGGERS } from './constants';

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

@@ -8,3 +8,50 @@ export type GAEventsNames = (
     | 'video_progress'
     | 'video_start'
 );
+
+export type QueuedEvent = {
+    name: string,
+    params: Record<string, any>,
+    urlParams: EventUrlParams,
+};
+
+export type SessionInfo = {
+    engagementTime: number | undefined,
+    sessionStarted: boolean,
+    firstEvent: boolean,
+    firstVisit: boolean,
+};
+
+export type ConstantUrlParams = {
+    /** Client ID (UUIv4 string) */
+    cid: string,
+    /** Session ID (random number) */
+    sid: number,
+    /** 1 for mobile devices, 0 otherwise */
+    uamb: number,
+    /** Platform name */
+    uap: string,
+    /** Platform version */
+    uapv: string,
+    /** Device model name */
+    uam: string,
+    /** Session engagement 0 for first event of session, 1 otherwise */
+    seg: number,
+    /** Session count */
+    sct: number,
+    /** Random page hash */
+    _p: string,
+};
+
+export type EventUrlParams = {
+    /** Language iso639-1 */
+    ul: string,
+    /** Device resolution as WIDTHxHEIGHT */
+    sr: string,
+    /** Page hash route */
+    dl: string,
+    /** Page title */
+    dt: string,
+    /** Page referrer hash route */
+    dr: string,
+};

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

@@ -1,76 +1,29 @@
-import type {
-    AnalyticsEventsNames,
-    GeneralAppData,
-    SceneInfo,
-    AppInfo,
-    UserInfo,
-} from '../../interface';
-import type { GAEventsNames } from './interface';
-
-const MILI_TO_MICRO = 10;
-
-const camelToSnake = (name: string) => (
-    name.replace(/[A-Z]/g, (match) => `_${match.toLowerCase()}`)
-);
-
-const addKeyIfExists = <T extends string>(
-    keyName: T,
-    payload: { [key in typeof keyName]?: any },
-    gtagPayload: Record<string, any>,
-) => {
-    if (payload[keyName]) gtagPayload[camelToSnake(keyName)] = payload[keyName];
-};
-
-const mapGeneralData = (payload: Partial<GeneralAppData>) => {
-    const gtagPayloadGeneralData: Partial<GeneralAppData> = {};
-    addKeyIfExists('language', payload, gtagPayloadGeneralData);
-    addKeyIfExists('resolution', payload, gtagPayloadGeneralData);
-    return gtagPayloadGeneralData;
-};
-
-const mapSceneInfo = (payload: Partial<SceneInfo>) => {
-    const gtagPayloadSceneInfo: Partial<SceneInfo> = {};
-    addKeyIfExists('sceneId', payload, gtagPayloadSceneInfo);
-    addKeyIfExists('sceneType', payload, gtagPayloadSceneInfo);
-    addKeyIfExists('sceneName', payload, gtagPayloadSceneInfo);
-    return gtagPayloadSceneInfo;
-};
-
-const mapAppData = (payload: Partial<AppInfo>) => {
-    const gtagPayloadAppInfo: Partial<AppInfo> = {};
-    addKeyIfExists('applicationId', payload, gtagPayloadAppInfo);
-    addKeyIfExists('serviceId', payload, gtagPayloadAppInfo);
-    return gtagPayloadAppInfo;
-};
-
-const mapUserData = (payload: Partial<UserInfo>) => {
-    const gtagPayloadUserInfo: Partial<UserInfo> = {};
-    addKeyIfExists('userId', payload, gtagPayloadUserInfo);
-    return gtagPayloadUserInfo;
+import type { AnalyticsEventsNames } from '../../interface';
+import type { EventUrlParams, GAEventsNames, SessionInfo } from './interface';
+
+export const mapEventParamsToUrlParams = (eventParams: Record<string, any>) => {
+    const urlParams: Partial<EventUrlParams> = {};
+    if (eventParams.language) urlParams.ul = eventParams.language;
+    if (eventParams.resolution) urlParams.sr = eventParams.resolution;
+    if (eventParams.sceneId) urlParams.dl = eventParams.sceneId;
+    if (eventParams.sceneName) urlParams.dt = eventParams.sceneName;
+    return urlParams as EventUrlParams;
 };
 
 export const mapPayload = (
     eventName: GAEventsNames,
     triggerName: AnalyticsEventsNames,
-    sessionId: string,
-    payload: Record<string, any>,
+    sessionInfo: SessionInfo,
 ) => {
-    let gtagPayload: Record<string, any> = {
-        session_id: sessionId,
-        event_trigger: triggerName,
-        timestamp_micros: Date.now() * MILI_TO_MICRO,
-        ...mapGeneralData(payload),
-        ...mapAppData(payload),
-        ...mapUserData(payload),
+    const gtagPayload: Record<string, any> = {
+        'ep.event_trigger': triggerName,
+        _et: sessionInfo.engagementTime ?? 0,
+        _ee: sessionInfo.firstEvent ? 1 : 0,
+        _fv: sessionInfo.firstVisit ? 1 : 0,
+        _ss: sessionInfo.sessionStarted ? 1 : 0,
     };
-    if (eventName === 'page_view' || eventName === 'buffering_start') {
-        gtagPayload = {
-            ...gtagPayload,
-            ...mapSceneInfo(payload),
-        };
-    }
     if (eventName === 'scroll') {
-        gtagPayload.percent_scroll = parseInt(triggerName.split('_')[1], 10);
+        gtagPayload['epn.percent_scroll'] = parseInt(triggerName.split('_')[1], 10);
     }
     return gtagPayload;
 };

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

@@ -0,0 +1,14 @@
+import { QueuedEvent } from './interface';
+
+export const prepareBody = (events: QueuedEvent[]) => {
+    const eventLines = events.map((event: QueuedEvent) => {
+        const eventParams = [
+            `en=${event.name}`,
+        ];
+        Object.keys(event.params).forEach((paramName) => {
+            eventParams.push(`${paramName}=${encodeURIComponent(event.params[paramName])}`);
+        });
+        return eventParams.join('&');
+    });
+    return eventLines.join('\r\n');
+};

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

@@ -61,6 +61,8 @@ 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));
         }
     };
 
@@ -77,8 +79,8 @@ export class FirstOnlyGrid<T extends Item<U>, U>
         this.controller.scroll(targetScrollIndex);
     }
 
-    scrollBackward() {
-        const targetScrollIndex = this.controller.scrollIndex - 1;
+    scrollBackward(diff = 1) {
+        const targetScrollIndex = this.controller.scrollIndex - diff;
         this.controller.scroll(targetScrollIndex);
     }
 

package/packages/keyboard/src/Backdrop/Backdrop.scss

@@ -1,6 +1,7 @@
 .keyboard-backdrop {
     position: fixed;
     left: 0;
+    right: 0;
     top: 0;
     width: $backdrop-width;
     height: $backdrop-height;
@@ -9,6 +10,7 @@
 .keyboard-backdrop-disabled {
     position: absolute;
     left: 0;
+    right: 0;
     top: 0;
     width: 100%;
     height: 100%;

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 { switchByKey } from '@24i/bigscreen-sdk/device/keymap';
+import { FF, REW, switchByKey } from '@24i/bigscreen-sdk/device/keymap';
 import { stopEvent } from '@24i/bigscreen-sdk/utils/stopEvent';
 import {
     IDisplayToggler, getDisplayToggler, DISPLAY_NONE,
@@ -22,6 +22,7 @@ type Props = {
     hidden?: boolean,
     onClose?: () => void,
     onHide?: () => void,
+    isPauseAllowed?: () => boolean,
 };
 
 export class PlayerUI extends Component<Props>
@@ -47,6 +48,7 @@ export class PlayerUI extends Component<Props>
         hidden: false,
         onClose: noop,
         onHide: noop,
+        isPauseAllowed: () => true,
     };
 
     declare props: DeclareProps<Props, typeof PlayerUI.defaultProps>;
@@ -83,7 +85,7 @@ export class PlayerUI extends Component<Props>
             FF: this.onKeyForward,
             REW: this.onKeyRewind,
         });
-        if (processed) stopEvent(event);
+        if (processed && !FF.is(event) && !REW.is(event)) stopEvent(event);
     };
 
     onKeyPlay = () => {
@@ -101,6 +103,7 @@ export class PlayerUI extends Component<Props>
     };
 
     onKeyPause = () => {
+        if (!this.props.isPauseAllowed()) return false;
         if (this.seeking.isAutomaticallySeeking()) {
             this.seeking.stopAutomaticSeek();
             if (this.isPlaying()) this.trigger(PlayerAction.PAUSE);
@@ -115,6 +118,7 @@ export class PlayerUI extends Component<Props>
     };
 
     onKeyPlayPause = () => {
+        if (!this.props.isPauseAllowed()) return false;
         if (this.seeking.isSeeking()) {
             this.seeking.confirmSeek();
             if (!this.isPlaying()) this.trigger(PlayerAction.PLAY);
@@ -139,6 +143,7 @@ export class PlayerUI extends Component<Props>
         }
         if (!this.seeking.isAutomaticallySeekingForward) {
             this.seeking.startAutomaticSeekForward();
+            this.disableHiding();
             return true;
         }
         return false;
@@ -151,6 +156,7 @@ export class PlayerUI extends Component<Props>
         }
         if (!this.seeking.isAutomaticallySeekingBackward) {
             this.seeking.startAutomaticSeekBackward();
+            this.disableHiding();
             return true;
         }
         return false;

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

@@ -51,6 +51,7 @@ 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);
     }
@@ -60,6 +61,7 @@ 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);
     }
@@ -163,6 +165,8 @@ 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

@@ -95,6 +95,7 @@ export class Seeking implements IEvents<SeekingEventsMap> {
     }
 
     stopAutomaticSeek() {
+        if (this.isAutomaticallySeeking()) this.triggerEvent('stopautomaticseek');
         this.automaticSeekInterval.clear();
         this.isAutomaticallySeekingForward = false;
         this.isAutomaticallySeekingBackward = false;

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

@@ -0,0 +1,47 @@
+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

@@ -0,0 +1,43 @@
+/**
+ * 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

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

package/packages/utils/src/textUtils.ts

@@ -9,6 +9,7 @@ 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);
@@ -27,6 +28,7 @@ const trimWithEllipsis = (
             } while (numberOfLines <= requestedNumberOfLines
                 && currentPosition < originalTextContent.length);
             row.textContent = stringBuffer.substring(0, stringBuffer.length - 1) + ellipsis;
+
         } else {
             let currentPosition = originalTextContent.length - 1;
             do {
@@ -39,7 +41,7 @@ const trimWithEllipsis = (
             row.textContent = `${ellipsis}${stringBuffer.substring(1)}`;
         }
     }
-    row.style.visibility = '';
+    row.style.visibility = visibility;
 };
 
 export const trimWithLeadingEllipsis = (