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

package/package.json

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

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

@@ -1,143 +1,59 @@
 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, 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';
+import type { AnalyticsClient, AnalyticsEventsMap } from '../../interface';
+import { mapPayload } from './mapPayload';
+import { TRIGGER_NAME_TO_GA_EVENTS } from './constants';
+import { GAEventsNames } 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 GA_SESSION_COUNTER = 'GA_session_counter';
-const GA_FIRST_VISIT = 'GA_first_visit';
+
+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}`
+);
 
 export class GoogleAnalytics implements AnalyticsClient {
     name = 'GoogleAnalytics';
 
-    constantUrlParams: ConstantUrlParams = {
-        cid: '',
-        sid: 0,
-        uamb: 0,
-        uap: '',
-        uapv: '',
-        uam: '',
-        seg: 0,
-        sct: 0,
-        _p: generateUuid(),
-    };
-
-    a24iOperational = false;
-
-    lastOnEvent: number | undefined = undefined;
-
-    eventsQueue: QueuedEvent[] = [];
+    clientId = '';
 
-    sessionTimeout = createTimeout();
+    sessionId = generateUuid();
 
-    isSessionActive = false;
-
-    sessionStartSent = false;
-
-    firstEvent = true;
+    a24iOperational = false;
 
-    firstVisit: boolean | undefined = undefined;
+    eventsQueue: { name: GAEventsNames, params: Record<string, any> }[] = [];
 
-    constructor(private id: string) {
+    constructor(private id: string, private secret: string) {
         this.init();
     }
 
     async init() {
-        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.clientId = await Storage.getItem(GA_CLIENT_ID) ?? '';
+        if (!this.clientId) {
+            this.clientId = generateUuid();
+            await Storage.setItem(GA_CLIENT_ID, this.clientId);
         }
-        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);
     }
 
-    // @ts-ignore - cross event typing
-    async onEvent<Event extends keyof AnalyticsEventsMap>(
+    onEvent<Event extends keyof AnalyticsEventsMap>(
         triggerName: 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) => {
+        payload: Parameters<AnalyticsEventsMap[Event]>,
+    ): void {
+        const events = TRIGGER_NAME_TO_GA_EVENTS[triggerName];
+        events.forEach(async (event) => {
             if (event === 'a24i_operational' && !this.shouldContinueWithA24iOperational()) return;
-            const gtagPayload = mapPayload(
-                event, triggerName, await this.getSessionInfo(
-                    index === 0 ? engagementTime : undefined,
-                ),
-            );
-            const urlParams = mapEventParamsToUrlParams(payload as SceneInfo);
-            this.send(event, gtagPayload, urlParams);
-        }));
+            const gtagPayload = mapPayload(event, triggerName, this.sessionId, payload);
+            this.send(event, gtagPayload);
+        });
     }
 
-    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 });
+    private send(name: GAEventsNames, params: Record<string, any>) {
+        this.eventsQueue.push({ name, params });
         if (this.eventsQueue.length >= MAX_QUEUE_LENGTH) {
             this.sendQueue();
         } else {
@@ -146,15 +62,13 @@ export class GoogleAnalytics implements AnalyticsClient {
     }
 
     private sendQueue = () => {
-        if (this.eventsQueue.length === 0) return;
-        const body = prepareBody(this.eventsQueue);
-        const { urlParams } = this.eventsQueue[0];
+        const body = JSON.stringify({
+            client_id: this.clientId,
+            events: this.eventsQueue,
+        });
         this.eventsQueue.length = 0;
         try {
-            fetch(getUrl(this.id, {
-                ...this.constantUrlParams,
-                ...urlParams,
-            }), { method: 'POST', body });
+            fetch(getGAUrl(this.id, this.secret), { method: 'POST', body });
         } catch (e) {
             // Effort to send was made.
         }
@@ -167,19 +81,4 @@ 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,30 +1,17 @@
+import { AnalyticsEventsNames } from '../../interface';
 import { GAEventsNames } from './interface';
 
-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[]
-> = {
+export const TRIGGER_NAME_TO_GA_EVENTS: Record<AnalyticsEventsNames, 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/index.ts

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

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

@@ -8,50 +8,3 @@ 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,29 +1,76 @@
-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;
+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;
 };
 
 export const mapPayload = (
     eventName: GAEventsNames,
     triggerName: AnalyticsEventsNames,
-    sessionInfo: SessionInfo,
+    sessionId: string,
+    payload: Record<string, any>,
 ) => {
-    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,
+    let gtagPayload: Record<string, any> = {
+        session_id: sessionId,
+        event_trigger: triggerName,
+        timestamp_micros: Date.now() * MILI_TO_MICRO,
+        ...mapGeneralData(payload),
+        ...mapAppData(payload),
+        ...mapUserData(payload),
     };
+    if (eventName === 'page_view' || eventName === 'buffering_start') {
+        gtagPayload = {
+            ...gtagPayload,
+            ...mapSceneInfo(payload),
+        };
+    }
     if (eventName === 'scroll') {
-        gtagPayload['epn.percent_scroll'] = parseInt(triggerName.split('_')[1], 10);
+        gtagPayload.percent_scroll = parseInt(triggerName.split('_')[1], 10);
     }
     return gtagPayload;
 };

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

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

package/packages/utils/src/textUtils.ts

@@ -1,25 +1,59 @@
 const ELLIPSIS = '...';
 
-export const trimWithLeadingEllipsis = (row: HTMLSpanElement, requestedNumberOfLines: number) => {
-    if (row && row.textContent != null) {
-        row.style.visibility = 'hidden';
-        const lineHeightString = window.getComputedStyle(row, null).getPropertyValue('line-height');
-        const lineHeight = parseInt(lineHeightString, 10);
-        let numberOfLines = row.offsetHeight / lineHeight;
-        if (numberOfLines > requestedNumberOfLines) {
-            const originalTextContent = row.textContent;
-            row.textContent = ELLIPSIS;
-            let stringBuffer = '';
+const trimWithEllipsis = (
+    row: HTMLSpanElement | HTMLDivElement,
+    requestedNumberOfLines: number,
+    ellipsis = ELLIPSIS,
+    ending = false
+) : void => {
+    if (!row.textContent) {
+        return;
+    }
+    row.style.visibility = 'hidden';
+    const lineHeightString = window.getComputedStyle(row, null).getPropertyValue('line-height');
+    const lineHeight = parseInt(lineHeightString, 10);
+    let numberOfLines = row.offsetHeight / lineHeight;
+    if (numberOfLines > requestedNumberOfLines) {
+        const originalTextContent = row.textContent!;
+        row.textContent = ellipsis;
+        let stringBuffer = '';
+        if (ending) {
+            let currentPosition = 0;
+            do {
+                stringBuffer += originalTextContent.charAt(currentPosition);
+                row.textContent = stringBuffer + ellipsis;
+                currentPosition += 1;
+                numberOfLines = row.offsetHeight / lineHeight;
+            } while (numberOfLines <= requestedNumberOfLines
+                && currentPosition < originalTextContent.length);
+            row.textContent = stringBuffer.substring(0, stringBuffer.length - 1) + ellipsis;
+        } else {
             let currentPosition = originalTextContent.length - 1;
             do {
                 const charToAdd = originalTextContent.at(currentPosition);
                 stringBuffer = `${charToAdd}${stringBuffer}`;
-                row.textContent = `${ELLIPSIS}${stringBuffer}`;
+                row.textContent = `${ellipsis}${stringBuffer}`;
                 currentPosition -= 1;
                 numberOfLines = Math.floor(row.offsetHeight / lineHeight);
             } while (numberOfLines <= requestedNumberOfLines && currentPosition >= 0);
-            row.textContent = `${ELLIPSIS}${stringBuffer.substring(1)}`;
+            row.textContent = `${ellipsis}${stringBuffer.substring(1)}`;
         }
-        row.style.visibility = '';
     }
+    row.style.visibility = '';
+};
+
+export const trimWithLeadingEllipsis = (
+    row: HTMLSpanElement | HTMLDivElement,
+    requestedNumberOfLines: number,
+    ellipsis = ELLIPSIS,
+) => {
+    return trimWithEllipsis(row, requestedNumberOfLines, ellipsis, false);
+};
+
+export const trimWithEndingEllipsis = (
+    row: HTMLSpanElement | HTMLDivElement,
+    requestedNumberOfLines: number,
+    ellipsis = ELLIPSIS,
+) => {
+    return trimWithEllipsis(row, requestedNumberOfLines, ellipsis, true);
 };

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

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

@@ -1,17 +0,0 @@
-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/prepareBody.ts

@@ -1,14 +0,0 @@
-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');
-};