@24i/bigscreen-sdk 1.0.23-alpha.2405 → 1.0.23-alpha.2409

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@24i/bigscreen-sdk",
-    "version": "1.0.23-alpha.2405",
+    "version": "1.0.23-alpha.2409",
     "description": "SmartApps BIGscreen SDK monorepo",
     "main": "index.js",
     "scripts": {
@@ -37,7 +37,7 @@
     },
     "homepage": "https://github.com/24i/smartapps-bigscreen-sdk#readme",
     "dependencies": {
-        "@24i/appstage-shared-analytics": "1.0.16-alpha.58",
+        "@24i/appstage-shared-analytics": "1.0.17-alpha.60",
         "@24i/appstage-shared-events-manager": "1.0.11",
         "@24i/appstage-shared-perf-utils": "1.0.11",
         "@24i/bigscreen-players-engine-base": "1.0.2",
@@ -90,6 +90,7 @@
         "./analytics/interface": "./packages/analytics/src/interface.ts",
         "./analytics/ConsoleAnalytics": "./packages/analytics/src/clients/ConsoleAnalytics/index.ts",
         "./analytics/GoogleAnalytics": "./packages/analytics/src/clients/GoogleAnalytics/index.ts",
+        "./analytics/TwentyFourIQ": "./packages/analytics/src/clients/TwentyFourIQ/index.ts",
         "./analytics": "./packages/analytics/src/index.ts",
         "./animations/mock": "./packages/animations/src/__mocks__/JSAnimations.ts",
         "./animations": "./packages/animations/src/index.ts",

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

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

package/packages/analytics/src/clients/TwentyFourIQ/TwentyFourIQClient.ts

@@ -0,0 +1,116 @@
+import { Storage } from '@24i/bigscreen-sdk/storage';
+import { device } from '@24i/bigscreen-sdk/device';
+import { MINUTE_IN_MS } from '@24i/bigscreen-sdk/utils/timeConstants';
+import { createTimeout } from '@24i/bigscreen-sdk/utils/timers';
+import { AnalyticsTriggers } from '@24i/appstage-shared-analytics';
+import {
+    TRIGGER_NAME_TO_24IQ_EVENTS,
+} from './constants';
+import { EVENTS_MAPPING } from './interface';
+import type { AnalyticsClient, AnyPayload } from '../../interface';
+import { generateSessionId } from './generateSessionId';
+import { CorePayload, DeviceInfo, EventBody, Payload, SessionInfo } from './types';
+
+// eslint-disable-next-line no-magic-numbers
+const SESSION_TIMEOUT = 30 * MINUTE_IN_MS;
+
+const TWENYFOURIQ_SESSION_COUNTER = '24iQ_session_counter';
+
+export class TwentyFourIQClient implements AnalyticsClient {
+    name = '24iQ';
+
+    deviceInfo = {
+        manufacturer: '',
+        platform: '',
+        platformVersion: '',
+        deviceId: '',
+        appVersion: '',
+        applicationId: '',
+        deviceType: '',
+    };
+
+    constantPayload: CorePayload & SessionInfo & DeviceInfo = {
+        sessionNumber: 0,
+        sessionId: 0,
+        ...this.deviceInfo,
+    };
+
+    sessionTimeout = createTimeout();
+
+    isSessionActive = false;
+
+    sessionStartSent = false;
+
+    constructor(private baseURL: string, private appVersion: string = '') {
+        this.init();
+    }
+
+    async init() {
+        this.deviceInfo.manufacturer = await device.getManufacturerName();
+        this.deviceInfo.platform = await device.getPlatformName();
+        this.deviceInfo.platformVersion = await device.getPlatformVersion();
+        this.deviceInfo.deviceId = await device.getUuid();
+        await this.startSession();
+    }
+
+    async startSession() {
+        const sessionNumber = parseInt(
+            await Storage.getItem(TWENYFOURIQ_SESSION_COUNTER) ?? '0', 10,
+        ) + 1;
+        this.constantPayload.sessionNumber = sessionNumber;
+        this.constantPayload.sessionId = generateSessionId();
+        this.constantPayload.manufacturer = this.deviceInfo.manufacturer;
+        this.constantPayload.platform = this.deviceInfo.platform;
+        this.constantPayload.platformVersion = this.deviceInfo.platformVersion;
+        this.constantPayload.appVersion = this.appVersion;
+        await Storage.setItem(TWENYFOURIQ_SESSION_COUNTER, sessionNumber.toString());
+        this.isSessionActive = true;
+        this.setSessionTimeout();
+    }
+
+    setSessionTimeout() {
+        this.sessionTimeout.set(() => {
+            this.isSessionActive = false;
+            this.sessionStartSent = false;
+        }, SESSION_TIMEOUT);
+    }
+
+    async sendEvent(eventBody: EventBody) {
+        try {
+            await fetch(this.baseURL, {
+                method: 'POST',
+                body: JSON.stringify(eventBody),
+                headers: {
+                    Accept: 'application/json',
+                    'Content-Type': 'application/json;charset=UTF-8',
+                },
+            });
+        } catch (error) {
+            console.warn(`[${this.name}] Error sendEvent: `, error);
+        }
+    }
+
+    async onEvent(triggerName: AnalyticsTriggers, payload: AnyPayload): Promise<void> {
+        const events = TRIGGER_NAME_TO_24IQ_EVENTS[triggerName];
+        if (this.isSessionActive) {
+            this.setSessionTimeout();
+        } else {
+            await this.startSession();
+        }
+        if (!events) return;
+        await Promise.all(
+            events.map(async (event) => {
+                const mappingFunction = EVENTS_MAPPING[event];
+                try {
+                    const eventBody = mappingFunction?.(triggerName, {
+                        ...this.constantPayload,
+                        ...payload,
+                    } as unknown as Payload);
+                    if (eventBody) await this.sendEvent(eventBody);
+                } catch (e) {
+                    console.warn(`[${this.name}] Error onEvent: `, e);
+                }
+            }),
+        );
+    }
+}

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

@@ -0,0 +1,99 @@
+import { AnalyticsTriggers } from '@24i/appstage-shared-analytics';
+
+export enum AnalyticsPrefix {
+    SCROLL = 'SCROLL_',
+    PLAYBACK = 'PLAYBACK_',
+}
+
+export enum AnalyticsEvents {
+    INSTALLED_APP = 'Installed app',
+    LOADED_APP = 'Loaded App',
+    LOGGED_IN = 'Logged In',
+    LOGGED_OUT = 'Logged Out',
+    CANCELLED_PURCHASE = 'Cancelled Purchase',
+    PURCHASE_COMPLETE = 'Purchase Complete',
+    HOME = 'home',
+    DETAILS = 'details',
+    PLAYER = 'player',
+    TECHNICAL_INFO = 'Technical information',
+}
+
+export enum DefaultScreens {
+    PLAYBACK = 'playback',
+}
+
+export const TWENTY_FOUR_IQ_TRIGGERS = [
+    // App
+    AnalyticsTriggers.APP_CLOSE,
+
+    // Scenes
+    AnalyticsTriggers.SCENE_VIEW,
+
+    // Data loading / Player buffering
+    AnalyticsTriggers.BUFFERING_START,
+    AnalyticsTriggers.BUFFERING_STOP,
+
+    // Playback
+    AnalyticsTriggers.PLAYBACK_10,
+    AnalyticsTriggers.PLAYBACK_25,
+    AnalyticsTriggers.PLAYBACK_50,
+    AnalyticsTriggers.PLAYBACK_75,
+    AnalyticsTriggers.PLAYBACK_90,
+    AnalyticsTriggers.PLAYBACK_PAUSE,
+    AnalyticsTriggers.PLAYBACK_START,
+    AnalyticsTriggers.PLAYBACK_STOP,
+
+    // Player
+    AnalyticsTriggers.PLAYER_CLOSE,
+    AnalyticsTriggers.PLAYER_OPEN,
+
+    // Scrolling in scene
+    AnalyticsTriggers.SCROLL_25,
+    AnalyticsTriggers.SCROLL_50,
+    AnalyticsTriggers.SCROLL_75,
+    AnalyticsTriggers.SCROLL_90,
+
+    // Ads
+    AnalyticsTriggers.AD_LOADED,
+    AnalyticsTriggers.AD_SKIPPED,
+];
+
+export enum EVENTS {
+    SCENE_VIEW = 'scene_view',
+    BUFFERING = 'buffering',
+    VIDEO_PROGRESS = 'video_progress',
+    VIDEO_START = 'video_start',
+    VIDEO_COMPLETE = 'video_complete',
+    VIDEO_STOP = 'video_stop',
+    VIDEO_PAUSE = 'video_pause',
+    PLAYER_CLOSE = 'player_close',
+    PLAYER_OPEN = 'player_open',
+    SCROLL = 'scroll',
+    AD_LOADED = 'ad_loaded',
+    AD_SKIPPED = 'ad_skipped',
+}
+
+export const TRIGGER_NAME_TO_24IQ_EVENTS: { [K in AnalyticsTriggers]?: EVENTS[]; } = {
+    [AnalyticsTriggers.SCENE_VIEW]: [EVENTS.SCENE_VIEW],
+    [AnalyticsTriggers.BUFFERING_START]: [EVENTS.BUFFERING],
+    [AnalyticsTriggers.BUFFERING_STOP]: [EVENTS.BUFFERING],
+    [AnalyticsTriggers.PLAYBACK_10]: [EVENTS.VIDEO_PROGRESS],
+    [AnalyticsTriggers.PLAYBACK_25]: [EVENTS.VIDEO_PROGRESS],
+    [AnalyticsTriggers.PLAYBACK_50]: [EVENTS.VIDEO_PROGRESS],
+    [AnalyticsTriggers.PLAYBACK_75]: [EVENTS.VIDEO_PROGRESS],
+    [AnalyticsTriggers.PLAYBACK_90]: [EVENTS.VIDEO_COMPLETE],
+    [AnalyticsTriggers.PLAYBACK_PAUSE]: [EVENTS.VIDEO_PAUSE],
+    [AnalyticsTriggers.PLAYBACK_START]: [EVENTS.VIDEO_START],
+    [AnalyticsTriggers.PLAYBACK_STOP]: [EVENTS.VIDEO_STOP],
+    [AnalyticsTriggers.PLAYER_CLOSE]: [EVENTS.PLAYER_CLOSE],
+    [AnalyticsTriggers.PLAYER_OPEN]: [EVENTS.PLAYER_OPEN],
+    [AnalyticsTriggers.SCROLL_25]: [EVENTS.SCROLL],
+    [AnalyticsTriggers.SCROLL_50]: [EVENTS.SCROLL],
+    [AnalyticsTriggers.SCROLL_75]: [EVENTS.SCROLL],
+    [AnalyticsTriggers.SCROLL_90]: [EVENTS.SCROLL],
+    [AnalyticsTriggers.APP_CLOSE]: [EVENTS.VIDEO_STOP, EVENTS.PLAYER_CLOSE],
+    [AnalyticsTriggers.AD_LOADED]: [EVENTS.AD_LOADED],
+    [AnalyticsTriggers.AD_SKIPPED]: [EVENTS.AD_SKIPPED],
+};
+
+export const HUNDRED_PERCENT = 100;

package/packages/analytics/src/clients/TwentyFourIQ/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/TwentyFourIQ/helper.ts

@@ -0,0 +1,34 @@
+import { time } from '@24i/bigscreen-sdk/time';
+import { MINUTES_PER_HOUR } from '@24i/bigscreen-sdk/utils';
+
+export const getTimezoneOffsetString = (): string => {
+    const timezoneOffset = time.getTimezoneOffset();
+    const offsetHours = Math.floor(Math.abs(timezoneOffset) / MINUTES_PER_HOUR);
+    const offsetMinutesRemainder = Math.abs(timezoneOffset) % MINUTES_PER_HOUR;
+
+    const sign = timezoneOffset <= 0 ? '+' : '-';
+
+    const offsetHoursString = offsetHours.toString().padStart(2, '0');
+    const offsetMinutesString = offsetMinutesRemainder.toString().padStart(2, '0');
+    return `${sign}${offsetHoursString}:${offsetMinutesString}`;
+};
+
+export const formatDateTime = (date: Date): string => {
+    if (Number.isNaN(date.getTime())) {
+        return '';
+    }
+    const year = date.getUTCFullYear();
+    const month = (date.getUTCMonth() + 1).toString().padStart(2, '0');
+    const day = date.getUTCDate().toString().padStart(2, '0');
+    const hours = date.getUTCHours().toString().padStart(2, '0');
+    const minutes = date.getUTCMinutes().toString().padStart(2, '0');
+    const seconds = date.getUTCSeconds().toString().padStart(2, '0');
+
+    return `${year}-${month}-${day}T${hours}:${minutes}:${seconds}+00:00`;
+};
+
+export const getAssetId = (url: string = ''): string => {
+    const urlParts = url.split('/');
+    const lastPart = urlParts[urlParts.length - 1];
+    return lastPart !== '' ? lastPart : '';
+};

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

@@ -0,0 +1,2 @@
+export { TwentyFourIQClient } from './TwentyFourIQClient';
+export { TWENTY_FOUR_IQ_TRIGGERS } from './constants';

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

@@ -0,0 +1,31 @@
+import {
+    EVENTS,
+} from './constants';
+import { mapSceneView } from './mappers/mapSceneView';
+import { mapBuffering } from './mappers/mapBuffering';
+import { mapScroll } from './mappers/mapScroll';
+import { mapVideoProgress } from './mappers/mapVideoProgress';
+import { mapVideoStop } from './mappers/mapVideoStop';
+import { mapVideoComplete } from './mappers/mapVideoComplete';
+import { mapPlayerOpen } from './mappers/mapPlayerOpen';
+import { mapPlayerClose } from './mappers/mapPlayerClose';
+import { mapVideoStart } from './mappers/mapVideoStart';
+import { mapVideoPause } from './mappers/mapVideoPause';
+import { mapAdLoaded } from './mappers/mapAdLoaded';
+import { mapAdSkipped } from './mappers/mapAdSkipped';
+import { EventMappingFunction } from './types';
+
+export const EVENTS_MAPPING: Record<EVENTS, EventMappingFunction> = {
+    [EVENTS.SCENE_VIEW]: mapSceneView,
+    [EVENTS.BUFFERING]: mapBuffering,
+    [EVENTS.SCROLL]: mapScroll,
+    [EVENTS.PLAYER_OPEN]: mapPlayerOpen,
+    [EVENTS.PLAYER_CLOSE]: mapPlayerClose,
+    [EVENTS.VIDEO_START]: mapVideoStart,
+    [EVENTS.VIDEO_STOP]: mapVideoStop,
+    [EVENTS.VIDEO_PROGRESS]: mapVideoProgress,
+    [EVENTS.VIDEO_COMPLETE]: mapVideoComplete,
+    [EVENTS.VIDEO_PAUSE]: mapVideoPause,
+    [EVENTS.AD_LOADED]: mapAdLoaded,
+    [EVENTS.AD_SKIPPED]: mapAdSkipped,
+};

package/packages/analytics/src/clients/TwentyFourIQ/mappers/mapAdLoaded.ts

@@ -0,0 +1,13 @@
+import { AnalyticsTriggers } from '@24i/appstage-shared-analytics';
+import { getAssetId } from '../helper';
+import { Payload, AdLoadedResult } from '../types';
+import { mapBase } from './mapBase';
+
+export const mapAdLoaded = (triggerName: AnalyticsTriggers, payload: Payload): AdLoadedResult => ({
+    ...mapBase(payload),
+    action: triggerName,
+    event_trigger: triggerName,
+    thing_id: getAssetId(payload.sceneId),
+    player_advertisment_name: '', // TODO: adPayload?.adName,
+    player_advertisment_position: 0, // TODO: adPayload?.adPosition,
+});

package/packages/analytics/src/clients/TwentyFourIQ/mappers/mapAdSkipped.ts

@@ -0,0 +1,16 @@
+import { AnalyticsTriggers } from '@24i/appstage-shared-analytics';
+import { getAssetId } from '../helper';
+import { Payload, AdSkippedResult } from '../types';
+import { mapBase } from './mapBase';
+
+export const mapAdSkipped = (
+    triggerName: AnalyticsTriggers,
+    payload: Payload,
+): AdSkippedResult => ({
+    ...mapBase(payload),
+    action: triggerName,
+    event_trigger: triggerName,
+    thing_id: getAssetId(payload.sceneId),
+    player_advertisment_name: '', // TODO: adPayload?.adName,
+    player_advertisment_position: 0, // TODO:  adPayload?.adPosition,
+});

package/packages/analytics/src/clients/TwentyFourIQ/mappers/mapBase.ts

@@ -0,0 +1,21 @@
+import { time } from '@24i/bigscreen-sdk/time';
+import { Payload, BaseResult } from '../types';
+import { formatDateTime, getTimezoneOffsetString } from '../helper';
+
+export const mapBase = (payload: Payload): BaseResult => {
+    const timestampDate = time.getCurrentTime();
+    const formatedTimestamp = getTimezoneOffsetString();
+    return {
+        session_id: payload.sessionId.toString(),
+        timestamp_initiated: formatDateTime(timestampDate),
+        device_id: payload.deviceId,
+        device_type: payload.deviceType,
+        device_platform: payload.platform || '',
+        device_timezone: formatedTimestamp,
+        service_id: payload.serviceId || '',
+        user_id: payload.userId || '',
+        user_profile_id: payload.userProfileId,
+        custom_gdpr_status: payload.gdprStatus,
+        ...(!payload.userId && { user_anon_id: payload.deviceId }),
+    };
+};

package/packages/analytics/src/clients/TwentyFourIQ/mappers/mapBuffering.ts

@@ -0,0 +1,15 @@
+import { AnalyticsTriggers } from '@24i/appstage-shared-analytics';
+import { getAssetId } from '../helper';
+import { Payload, BufferingResult } from '../types';
+import { mapBase } from './mapBase';
+
+export const mapBuffering = (
+    triggerName: AnalyticsTriggers,
+    payload: Payload,
+): BufferingResult => ({
+    ...mapBase(payload),
+    action: triggerName,
+    event_trigger: triggerName,
+    thing_id: getAssetId(payload.sceneId),
+    source_page: payload.sceneName,
+});

package/packages/analytics/src/clients/TwentyFourIQ/mappers/mapPlayerClose.ts

@@ -0,0 +1,24 @@
+import { SECOND_IN_MS } from '@24i/bigscreen-sdk/utils';
+import { AnalyticsTriggers } from '@24i/appstage-shared-analytics';
+import { EVENTS, HUNDRED_PERCENT } from '../constants';
+import { PlayerCloseResult, Payload } from '../types';
+import { mapBase } from './mapBase';
+import { getAssetId } from '../helper';
+
+export const mapPlayerClose = (
+    triggerName: AnalyticsTriggers,
+    payload: Payload,
+): PlayerCloseResult | undefined => {
+    const progressPercent = Number(payload.percentOfPlayback);
+    const assetDuration = Number(payload.duration) / SECOND_IN_MS
+        || payload?.asset?.duration || 0;
+    const duration = Math.round((assetDuration * progressPercent) / HUNDRED_PERCENT);
+    return {
+        ...mapBase(payload),
+        action: EVENTS.PLAYER_CLOSE,
+        event_trigger: triggerName,
+        thing_id: getAssetId(payload.sceneId),
+        duration,
+        progress_pct: progressPercent,
+    };
+};

package/packages/analytics/src/clients/TwentyFourIQ/mappers/mapPlayerOpen.ts

@@ -0,0 +1,18 @@
+import { AnalyticsTriggers } from '@24i/appstage-shared-analytics';
+import { DefaultScreens } from '../constants';
+import { getAssetId } from '../helper';
+
+import { PlayerOpenResult, Payload } from '../types';
+import { mapBase } from './mapBase';
+
+export const mapPlayerOpen = (
+    triggerName: AnalyticsTriggers,
+    payload: Payload,
+): PlayerOpenResult => ({
+    ...mapBase(payload),
+    action: triggerName,
+    event_trigger: triggerName,
+    source_page: DefaultScreens.PLAYBACK,
+    thing_id: getAssetId(payload.sceneId),
+    source_rail: '', // TODO: payload.payload.asset.sectionLabel,
+});

package/packages/analytics/src/clients/TwentyFourIQ/mappers/mapSceneView.ts

@@ -0,0 +1,15 @@
+import { AnalyticsTriggers } from '@24i/appstage-shared-analytics';
+import { getAssetId } from '../helper';
+import { Payload, SceneViewResult } from '../types';
+import { mapBase } from './mapBase';
+
+export const mapSceneView = (
+    triggerName: AnalyticsTriggers,
+    payload: Payload,
+): SceneViewResult | undefined => ({
+    ...mapBase(payload),
+    action: triggerName,
+    event_trigger: triggerName,
+    source_page: payload.sceneName,
+    thing_id: getAssetId(payload.sceneId),
+});

package/packages/analytics/src/clients/TwentyFourIQ/mappers/mapScroll.ts

@@ -0,0 +1,17 @@
+import { AnalyticsTriggers } from '@24i/appstage-shared-analytics';
+import { EVENTS } from '../constants';
+import { getAssetId } from '../helper';
+import { Payload, ScrollResult } from '../types';
+import { mapBase } from './mapBase';
+
+export const mapScroll = (triggerName: AnalyticsTriggers, payload: Payload): ScrollResult => {
+    const percentScrolled = triggerName.split('_')[1];
+    return {
+        ...mapBase(payload),
+        action: EVENTS.SCROLL,
+        event_trigger: triggerName,
+        source_page: payload.sceneName,
+        thing_id: getAssetId(payload.sceneId),
+        percent_scrolled: percentScrolled,
+    };
+};

package/packages/analytics/src/clients/TwentyFourIQ/mappers/mapVideoComplete.ts

@@ -0,0 +1,21 @@
+import { AnalyticsTriggers } from '@24i/appstage-shared-analytics';
+import { SECOND_IN_MS } from '@24i/bigscreen-sdk/utils';
+import { EVENTS } from '../constants';
+import { Payload, VideoCompleteResult } from '../types';
+import { mapBase } from './mapBase';
+import { getAssetId } from '../helper';
+
+export const mapVideoComplete = (
+    triggerName: AnalyticsTriggers,
+    payload: Payload,
+): VideoCompleteResult => {
+    const assetDuration = (payload.duration || 0) / SECOND_IN_MS;
+    return {
+        ...mapBase(payload),
+        action: EVENTS.VIDEO_COMPLETE,
+        event_trigger: triggerName,
+        thing_id: getAssetId(payload.sceneId),
+        progress_pct: 90,
+        duration: assetDuration,
+    };
+};

package/packages/analytics/src/clients/TwentyFourIQ/mappers/mapVideoPause.ts

@@ -0,0 +1,24 @@
+import { AnalyticsTriggers } from '@24i/appstage-shared-analytics';
+import { SECOND_IN_MS } from '@24i/bigscreen-sdk/utils';
+import { EVENTS, HUNDRED_PERCENT } from '../constants';
+import { VideoPauseResult, Payload } from '../types';
+import { mapBase } from './mapBase';
+import { getAssetId } from '../helper';
+
+export const mapVideoPause = (
+    triggerName: AnalyticsTriggers,
+    payload: Payload,
+): VideoPauseResult => {
+    const { asset, duration = 0 } = payload;
+    const progressPercent = Number(payload.percentOfPlayback);
+    const assetDuration = duration / SECOND_IN_MS || asset?.duration || 0;
+    const overallDuration = Math.round((assetDuration * progressPercent) / HUNDRED_PERCENT);
+    return {
+        ...mapBase(payload),
+        action: EVENTS.VIDEO_PAUSE,
+        event_trigger: triggerName,
+        thing_id: getAssetId(payload.sceneId),
+        duration: overallDuration,
+        progress_pct: progressPercent,
+    };
+};

package/packages/analytics/src/clients/TwentyFourIQ/mappers/mapVideoProgress.ts

@@ -0,0 +1,24 @@
+import { AnalyticsTriggers } from '@24i/appstage-shared-analytics';
+import { SECOND_IN_MS } from '@24i/bigscreen-sdk/utils';
+import { Payload, VideoProgressResult } from '../types';
+import { EVENTS, HUNDRED_PERCENT } from '../constants';
+import { mapBase } from './mapBase';
+import { getAssetId } from '../helper';
+
+export const mapVideoProgress = (
+    triggerName: AnalyticsTriggers,
+    payload: Payload,
+): VideoProgressResult => {
+    const { asset, duration = 0 } = payload;
+    const progressPercent = Number(triggerName.split('_')[1]);
+    const assetDuration = duration / SECOND_IN_MS || asset?.duration || 0;
+    const durationInSeconds = Math.round((assetDuration * progressPercent) / HUNDRED_PERCENT);
+    return {
+        ...mapBase(payload),
+        action: EVENTS.VIDEO_PROGRESS,
+        event_trigger: triggerName,
+        thing_id: getAssetId(payload.sceneId),
+        progress_pct: progressPercent,
+        duration: durationInSeconds,
+    };
+};

package/packages/analytics/src/clients/TwentyFourIQ/mappers/mapVideoStart.ts

@@ -0,0 +1,34 @@
+import { AnalyticsTriggers } from '@24i/appstage-shared-analytics';
+import { PropertyType } from '@24i/smartapps-datalayer/models';
+import { SECOND_IN_MS } from '@24i/bigscreen-sdk/utils';
+import { DefaultScreens, EVENTS } from '../constants';
+import { VideoStartResult, Payload } from '../types';
+import { mapBase } from './mapBase';
+import { getAssetId } from '../helper';
+
+const HUNDRED_PERCENT = 100;
+
+export const mapVideoStart = (
+    triggerName: AnalyticsTriggers,
+    payload: Payload,
+): VideoStartResult => {
+    const { duration = 0, asset } = payload;
+    const assetDuration = duration / SECOND_IN_MS || asset?.duration || 0;
+    const startPosition = Number(asset?.properties?.find(
+        (property) => property.type === PropertyType.WATCH_PROGRESS,
+    ) || 0);
+    let progressPercent = 0;
+    if (assetDuration !== 0 && startPosition !== 0) {
+        progressPercent = Number(((startPosition / assetDuration) * HUNDRED_PERCENT).toFixed(2));
+    }
+    return {
+        ...mapBase(payload),
+        action: EVENTS.VIDEO_START,
+        event_trigger: triggerName,
+        thing_id: getAssetId(payload.sceneId),
+        duration: assetDuration,
+        progress_pct: progressPercent,
+        source_page: DefaultScreens.PLAYBACK,
+        source_rail: '', // TODO: asset.sectionLabel,
+    };
+};

package/packages/analytics/src/clients/TwentyFourIQ/mappers/mapVideoStop.ts

@@ -0,0 +1,32 @@
+import { AnalyticsTriggers } from '@24i/appstage-shared-analytics';
+import { SECOND_IN_MS } from '@24i/bigscreen-sdk/utils';
+import { PropertyType } from '@24i/smartapps-datalayer/models';
+import { DefaultScreens, EVENTS, HUNDRED_PERCENT } from '../constants';
+import { Payload, VideoStopResult } from '../types';
+import { mapBase } from './mapBase';
+import { getAssetId } from '../helper';
+
+export const mapVideoStop = (
+    triggerName: AnalyticsTriggers,
+    payload: Payload,
+): VideoStopResult | undefined => {
+    const { duration = 0, asset } = payload;
+    const assetDuration = duration / SECOND_IN_MS || asset?.duration || 0;
+    const startPosition = Number(asset?.properties?.find(
+        (property) => property.type === PropertyType.WATCH_PROGRESS,
+    ) || 0);
+    let progressPercent = 0;
+    if (assetDuration !== 0 && startPosition !== 0) {
+        progressPercent = Number(((startPosition / assetDuration) * HUNDRED_PERCENT));
+    }
+    return {
+        ...mapBase(payload),
+        action: EVENTS.VIDEO_STOP,
+        event_trigger: triggerName,
+        thing_id: getAssetId(payload.sceneId),
+        progress_pct: progressPercent,
+        duration,
+        source_page: DefaultScreens.PLAYBACK,
+        source_rail: '', // TODO: payload.payload.asset.sectionLabel,
+    };
+};

package/packages/analytics/src/clients/TwentyFourIQ/types.ts

@@ -0,0 +1,115 @@
+import { Asset } from '@24i/smartapps-datalayer/models';
+import { AnalyticsTriggers } from '@24i/appstage-shared-analytics';
+import type { AnyPayload, UserInfo, AppInfo } from '../../interface';
+
+interface ScreenParams {
+    screen: string;
+    screenName: string;
+    id: string;
+    asset: Asset;
+}
+export interface CorePayload {
+    timestamp?: number;
+    params?: ScreenParams;
+    asset?: Asset;
+    source?: string;
+    duration?: number;
+    id?: string;
+    percentOfPlayback?: number;
+}
+
+export interface SessionInfo {
+    sessionId: number;
+    sessionNumber: number;
+}
+
+export interface DeviceInfo {
+    appVersion: string,
+    manufacturer: string,
+    platform: string,
+    platformVersion: string,
+    deviceId: string,
+}
+
+export interface SceneInfo {
+    sceneName: string,
+    sceneId: string,
+    sceneType?: string,
+}
+
+export type Payload = CorePayload & SceneInfo & SessionInfo & UserInfo & AppInfo;
+
+export type EventBody = AnyPayload;
+
+export type EventMappingFunction = (
+    triggerName: AnalyticsTriggers,
+    payload: Payload
+) => AnyPayload | void;
+
+export type BaseResult = {
+    session_id: string;
+    timestamp_initiated: string;
+    device_id: string;
+    device_type: string;
+    device_platform: string;
+    device_timezone: string;
+    service_id: string;
+    user_id?: string;
+    user_profile_id?: string;
+    custom_gdpr_status?: boolean;
+};
+
+export type CoreResult = BaseResult & {
+    action: string;
+    event_trigger: string;
+};
+export type SceneViewResult = CoreResult & {
+    source_page: string;
+    thing_id: string;
+};
+export type BufferingResult = SceneViewResult;
+
+export type ScrollResult = SceneViewResult & {
+    percent_scrolled: string;
+};
+export type VideoProgressResult = CoreResult & {
+    thing_id: string;
+    progress_pct: number;
+    duration: number;
+};
+
+export type PlayerOpenResult = CoreResult & {
+    thing_id: string;
+    source_page: string;
+    source_rail?: string | null;
+};
+
+export type VideoStartResult = CoreResult & {
+    thing_id: string;
+    duration: number;
+    progress_pct: number;
+    source_page: string;
+    source_rail?: string | null;
+};
+
+export type VideoPauseResult = CoreResult & {
+    thing_id: string;
+    duration: number;
+    progress_pct: number;
+};
+
+export type AdLoadedResult = CoreResult & {
+    thing_id: string;
+    player_advertisment_name: string;
+    player_advertisment_position: number;
+};
+
+export type AdSkippedResult = CoreResult & {
+    thing_id: string;
+    player_advertisment_name: string;
+    player_advertisment_position: number;
+};
+
+export type VideoCompleteResult = VideoPauseResult;
+export type VideoStopResult = VideoStartResult;
+export type PlayerCloseResult = VideoPauseResult;

package/packages/analytics/src/constants.ts

@@ -1 +1 @@
-export * from '@24i/appstage-shared-analytics/dist/constants';
+export * from '@24i/appstage-shared-analytics';

package/packages/utils/src/index.ts

@@ -37,5 +37,6 @@ export type { XhrOptions, XhrResponse, RetryConfig, RSOptions, ShouldRetryParam
 export {
     registerKeyPressSimulator,
     unregisterKeyPressSimulator,
+    dispatchKeyboardEvent,
     simulateKeyPress,
 } from './keyPress';

package/packages/utils/src/keyPress/index.ts

@@ -1,2 +1,6 @@
-export { registerKeyPressSimulator, unregisterKeyPressSimulator } from './keyPressSimulator';
+export {
+    registerKeyPressSimulator,
+    unregisterKeyPressSimulator,
+    dispatchKeyboardEvent,
+} from './keyPressSimulator';
 export { simulateKeyPress } from './simulateKeyPress';

package/packages/utils/src/keyPress/keyPressSimulator.ts

@@ -3,9 +3,19 @@ import { stopEvent } from '@24i/bigscreen-sdk/utils';
 
 let keysPressed: Record<number, boolean>;
 
+interface CustomKeyboardEvent extends KeyboardEvent {
+    skipKeyPressSimulation: boolean;
+}
+
+const shouldSkipEvent = (e: KeyboardEvent) => (
+    Boolean((e as CustomKeyboardEvent).skipKeyPressSimulation)
+);
+
 const onKeyDown = (e: KeyboardEvent) => {
+    if (shouldSkipEvent(e)) return;
     const { keyCode } = e;
     if (keysPressed[keyCode] === true) {
+        console.warn(`Key ${e.code} (${e.keyCode}) is skipped by the key press simulator`);
         stopEvent(e);
     } else if (typeof keysPressed[keyCode] !== 'undefined') {
         keysPressed[keyCode] = true;
@@ -42,3 +52,23 @@ export const unregisterKeyPressSimulator = () => {
     window.document.removeEventListener('keydown', onKeyDown, true);
     window.document.removeEventListener('keyup', onKeyUp, true);
 };
+
+/**
+ * This should be the main method for manually dispatching keyboard events when the
+ * key press simulator is registered in the app. When parameter `skipKeyPressSimulation`
+ * is `true`, those event's won't be caught by the key press simulator and
+ * are no longer under it's influence. Key press simulator should work only with events
+ * generated from input device.
+ * @param target element target to dispatch event
+ * @param event dispatching event
+ * @param skipKeyPressSimulation default value is `true`, when false, the event
+ * will be caught by the simulator and other dispatched events will be stopped.
+ */
+export const dispatchKeyboardEvent = (
+    target: HTMLElement,
+    event: KeyboardEvent,
+    skipKeyPressSimulation = true,
+) => {
+    (event as CustomKeyboardEvent).skipKeyPressSimulation = skipKeyPressSimulation;
+    target.dispatchEvent(event);
+};