@24i/bigscreen-sdk 1.0.43-alpha.2726 → 1.0.44

package/package.json

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

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

@@ -2,7 +2,7 @@ import { Storage } from '@24i/bigscreen-sdk/storage';
 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 { findIdForLanguage } from './findIdForLanguage';
+import { findForLanguage } from './findForLanguage';
 import {
     BIGSCREEN_APP_TYPE,
     BIGSCREEN_OTT_TYPE,
@@ -18,8 +18,8 @@ import type {
     TealiumAnalyticsConfiguration,
     TeaResult,
     TealiumDataMapper,
-    TealiumCustomConfiguration,
     CustomMappers,
+    TeaDynamicCoreResult,
 } from './types';
 
 // eslint-disable-next-line no-magic-numbers
@@ -30,11 +30,7 @@ const TEALIUM_BASE_URL = 'https://collect.tealiumiq.com/event';
 const DEFAULT_PAYLOAD: TeaStaticCoreResult = {
     tealium_account: '',
     tealium_profile: '',
-    language: '',
-    language_service: '',
     entity: '',
-    property_id: '',
-    short_language_service: '',
     platform_short: BIGSCREEN_PLATFORM_SHORT,
     platform_type: BIGSCREEN_PLATFORM_TYPE,
     app_type: BIGSCREEN_APP_TYPE,
@@ -78,27 +74,15 @@ export class TealiumAnalytics implements AnalyticsClient {
             datasource,
             customMappers,
             dataMapper = {} as TealiumDataMapper,
-        } = this.config || {} as TealiumCustomConfiguration;
-        const {
-            entity,
-            property_ids: propertyIds,
-            language,
-            short_language_service: shortLanguageService,
-            platform_short: platformShort,
-            platform_type: platformType,
-            app_type: appType,
-        } = dataMapper || {} as TealiumDataMapper;
+        } = this.config;
+        const { entity, platformShort, platformType, appType } = dataMapper;
         this.customMappers = customMappers;
         this.constantPayload = {
             tealium_account: account,
             tealium_profile: profile,
             tealium_environment: environment,
-            ...(datasource && { tealium_datasource: datasource }),
-            language: language || '',
-            language_service: `${entity} ${language}`,
             entity,
-            property_id: findIdForLanguage(propertyIds, language || '').toString(),
-            short_language_service: shortLanguageService || '',
+            ...(datasource && { tealium_datasource: datasource }),
             platform_short: platformShort ?? BIGSCREEN_PLATFORM_SHORT,
             platform_type: platformType ?? BIGSCREEN_PLATFORM_TYPE,
             app_type: appType ?? BIGSCREEN_APP_TYPE,
@@ -107,6 +91,24 @@ export class TealiumAnalytics implements AnalyticsClient {
         };
     }
 
+    getDynamicPayload({ language: payloadLanguage }: AnyPayload): TeaDynamicCoreResult {
+        if (!this.config || !this.config.dataMapper) {
+            console.warn(`[${this.name}] getDynamicPayload missing configuration`);
+            return {
+                language: '', language_service: '', property_id: '', short_language_service: '',
+            };
+        }
+        const { dataMapper } = this.config;
+        const { entity, languageMap, propertyIdsMap, shortLanguageServiceMap } = dataMapper;
+        const tealiumLanguage = findForLanguage(languageMap, payloadLanguage) || '';
+        return {
+            language: tealiumLanguage || '',
+            language_service: `${entity} ${tealiumLanguage}`,
+            property_id: findForLanguage(propertyIdsMap, payloadLanguage) || '',
+            short_language_service: findForLanguage(shortLanguageServiceMap, payloadLanguage) || '',
+        };
+    }
+
     async startSession() {
         const sessionNumber = parseInt(
             await Storage.getItem(TEALIUM_SESSION_COUNTER) ?? '0', 10,
@@ -157,6 +159,7 @@ export class TealiumAnalytics implements AnalyticsClient {
                     }
                     const eventBody = {
                         ...this.constantPayload,
+                        ...this.getDynamicPayload(payload),
                         ...mappingFunction(triggerName, payload as Payload, this.config),
                     };
                     const filteredEventBody: TeaResult = Object.entries(eventBody).reduce(

package/packages/analytics/src/clients/TealiumAnalytics/findForLanguage.ts

@@ -0,0 +1,9 @@
+import { LanguageMapper } from '@24i/bigscreen-sdk/analytics/TealiumAnalytics';
+
+export const findForLanguage = (
+    languageMapper: LanguageMapper = {},
+    language: string = '',
+) => {
+    const languageKey = Object.keys(languageMapper).find((key) => key === language);
+    return languageKey ? languageMapper[languageKey] : null;
+};

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

@@ -1,4 +1,4 @@
 export { TealiumAnalytics } from './TealiumAnalytics';
-export { findIdForLanguage } from './findIdForLanguage';
+export { findForLanguage } from './findForLanguage';
 export * from './constants';
 export * from './types';

package/packages/analytics/src/clients/TealiumAnalytics/mappers/__mocks__/mediaPayload.ts

@@ -29,6 +29,8 @@ export const MEDIA_PAYLOAD: Payload = {
     section: 'BROWSE',
     subcontentType: 'section',
     seriesTitle: 'section',
+    language: 'en',
+    resolution: '1920x1080',
 };
 
 export const TEALIUM_PAGEINFO_PAYLOAD = {

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

@@ -1,7 +1,7 @@
 import { AnalyticsTriggers } from '@24i/appstage-shared-analytics';
 import { AppEvents, EVENTS, TrackEventType as TrackEventTypeEnum } from './constants';
 import type {
-    UserInfo, AppInfo, VideoProgress, SceneInfo, PlayerSession, ErrorInfo,
+    UserInfo, GeneralAppData, AppInfo, VideoProgress, SceneInfo, PlayerSession, ErrorInfo,
 } from '../../interface';
 
 export type TeaEventType = 'view' | 'link';
@@ -12,20 +12,20 @@ type TeaTrackEventType = `${TrackEventTypeEnum}`;
 type TeaAppEventValues = typeof AppEvents[keyof typeof AppEvents];
 type TeaAnalyticsTriggerValues = `${AnalyticsTriggers}`;
 
-export interface PropertyIds {
-    [key: string]: number;
+export interface LanguageMapper {
+    [key: string]: string;
 }
 
 export type CustomMappers = Partial<Record<EVENTS, EventMappingFunction>>;
 
 export type TealiumDataMapper = {
-    app_type: TeaAppType, // e.g. 'html5' for bigscreen
+    appType?: TeaAppType,
     entity: string, // e.g: 'rfe'
-    property_ids: PropertyIds, // e.g: 414
-    language?: string, // e.g: 'english'
-    platform_short?: string,
-    platform_type?: string,
-    short_language_service?: string, // e.g: 'eng'
+    platformShort?: string,
+    platformType?: string,
+    languageMap: LanguageMapper, // e.g: 'english'
+    propertyIdsMap: LanguageMapper, // e.g: 414
+    shortLanguageServiceMap: LanguageMapper, // e.g: 'eng'
 };
 
 export type TealiumCustomConfiguration = {
@@ -71,6 +71,7 @@ export type SubPageInfo = {
 };
 
 export type Payload = CorePayload &
+GeneralAppData &
 AppInfo &
 SceneInfo &
 SubPageInfo &
@@ -87,6 +88,13 @@ export type EventMappingFunction = (
     config?: TealiumAnalyticsConfiguration,
 ) => TeaResult;
 
+export type TeaDynamicCoreResult = {
+    language: string;
+    language_service: string;
+    property_id: string;
+    short_language_service: string;
+};
+
 export type TeaStaticCoreResult = {
     tealium_account: string,
     tealium_profile: string,
@@ -96,13 +104,9 @@ export type TeaStaticCoreResult = {
     app_id: string;
     app_type: TeaAppType;
     entity: string;
-    language: string;
-    language_service: string;
     ott_type: TeaOttType;
     platform_short: string;
     platform_type: string;
-    property_id: string;
-    short_language_service: string;
 };
 
 export type TeaCoreResult = {

package/packages/input/README.md

@@ -60,6 +60,3 @@ The reason for no styling is to limit unnecessary CSS code that would be overrid
 `.native-input-wrap` is set to `display: none`. This is the native input used on the background.
 
 `.input-field` is a custom component that should look like input field with possibility of custom styling.
-
-`.caret` position is counted from the left side of the input in LTR layout and from the right side of the
-input in RTL layout.

package/packages/input/src/Input.tsx

@@ -1,4 +1,4 @@
-import { createRef, Component, DeclareProps } from '@24i/bigscreen-sdk/jsx';
+import { createRef, Component, setText, DeclareProps } from '@24i/bigscreen-sdk/jsx';
 import { Interactable } from '@24i/bigscreen-sdk/interactable';
 import { IFocusable } from '@24i/bigscreen-sdk/focus';
 import { isRtl } from '@24i/bigscreen-sdk/i18n';
@@ -9,7 +9,7 @@ import { stopEvent } from '@24i/bigscreen-sdk/utils/stopEvent';
 import { addClass } from '@24i/bigscreen-sdk/utils/addClass';
 import { removeClass } from '@24i/bigscreen-sdk/utils/removeClass';
 import { offsetPosition } from '@24i/bigscreen-sdk/utils/offsetPosition';
-import { checkCharOrderMishmash, handleOverflow } from './utils';
+import { handleOverflow } from './handleOverflow';
 import './Input.scss';
 
 type Props = {
@@ -42,8 +42,6 @@ export class Input extends Component<Props> implements IFocusable {
 
     caret = createRef<HTMLDivElement>();
 
-    caretPosition = 0;
-
     isInputting = false;
 
     lastValue: string;
@@ -70,11 +68,6 @@ export class Input extends Component<Props> implements IFocusable {
         this.isPlaceholderVisible = value.length === 0;
     }
 
-    componentDidMount() {
-        const { value } = this.props;
-        if (value) this.setText(value);
-    }
-
     getType() {
         return this.nativeInput.current?.type;
     }
@@ -92,10 +85,13 @@ export class Input extends Component<Props> implements IFocusable {
 
     onCaretPositionChange = (position: number | null) => {
         if (position === null) return;
+        const { shouldHandleOverflow } = this.props;
         const value = this.getValue();
-        this.setText(value);
-        this.updateCaretPosition(position);
-        this.updateTextOverflow();
+        setText(this.text, this.filterText(value));
+        this.setCaretPosition(position);
+        if (shouldHandleOverflow) {
+            handleOverflow(this.wrap.current, this.caret.current, this.text.current);
+        }
         if (this.lastValue !== value) {
             const { onChange } = this.props;
             this.lastValue = value;
@@ -110,59 +106,33 @@ export class Input extends Component<Props> implements IFocusable {
 
     setValue(value: string) {
         this.nativeInput.current!.value = value;
-        this.setText(value);
     }
 
     setType(type: Props['type']) {
         if (this.getType() === type) return;
         const value = this.getValue();
         this.nativeInput.current!.type = type;
-        this.setText(value);
+        setText(this.text, this.filterText(value));
     }
 
-    setText(text: string): void {
-        const filtered = this.filterText(text);
-        this.renderText(filtered);
-    }
-
-    updateCaretPosition(position: number) {
+    setCaretPosition(position: number) {
         const textNode = this.text.current!.firstChild;
-        if (!textNode || position <= 0) {
-            this.caretPosition = 0;
+        if (!textNode) {
             offsetPosition(this.caret, { x: 0 });
             return;
         }
-        const wholeTextDimensions = this.text.current!.getBoundingClientRect();
-        if (position >= this.text.current!.children.length) {
-            const offset = wholeTextDimensions.right - wholeTextDimensions.left;
-            this.caretPosition = isRtl() ? -offset : offset;
-            offsetPosition(this.caret, { x: this.caretPosition }, false);
-            return;
-        }
-        const charNode = this.text.current!.children[position - 1];
-        const charDimensions = charNode!.getBoundingClientRect();
-        const isCharMishmash = checkCharOrderMishmash(this.text.current!, position - 1);
-        if (isRtl()) {
-            if (isCharMishmash) {
-                this.caretPosition = charDimensions.right - wholeTextDimensions.right;
-            } else {
-                this.caretPosition = charDimensions.left - wholeTextDimensions.right;
-            }
-        } else if (isCharMishmash) {
-            this.caretPosition = charDimensions.left - wholeTextDimensions.left;
-        } else {
-            this.caretPosition = charDimensions.right - wholeTextDimensions.left;
-        }
-        offsetPosition(this.caret, { x: this.caretPosition }, false);
-    }
-
-    updateTextOverflow() {
-        const { shouldHandleOverflow } = this.props;
-        if (!shouldHandleOverflow) return;
-        const textMargin = handleOverflow(
-            this.wrap.current, this.caret.current, this.text.current,
-        );
-        offsetPosition(this.caret, { x: this.caretPosition - textMargin }, false);
+        const range = new Range();
+        range.selectNode(textNode);
+        const wholeText = range.getBoundingClientRect();
+        range.setStart(textNode, 0);
+        range.setEnd(textNode, position);
+        const caretText = range.getBoundingClientRect();
+        const [initialCaretPosition, currentCarretPosition, offsetBase] = isRtl()
+            ? [wholeText.right, caretText.left, wholeText.left]
+            : [wholeText.left, caretText.right, wholeText.right];
+        const caretPos = position === 0 ? initialCaretPosition : currentCarretPosition;
+        const offset = offsetBase - caretPos;
+        offsetPosition(this.caret, { x: -offset }, false);
     }
 
     /**
@@ -226,14 +196,6 @@ export class Input extends Component<Props> implements IFocusable {
         return text.replace(/ /g, NBSP);
     }
 
-    renderText(text: string): void {
-        const chars: JSX.Element[] = [];
-        for (let i = 0; i < text.length; i++) {
-            chars.push(<span className="char">{text[i]}</span>);
-        }
-        this.clearMount(chars, this.text);
-    }
-
     render() {
         const { value, type, placeholder, onFocus, onBlur } = this.props;
         return (
@@ -258,7 +220,9 @@ export class Input extends Component<Props> implements IFocusable {
                     >
                         {placeholder}
                     </div>
-                    <div ref={this.text} className="text" />
+                    <div ref={this.text} className="text">
+                        {this.filterText(value)}
+                    </div>
                     <div ref={this.caret} className="caret" />
                 </div>
             </Interactable>

package/packages/input/src/handleOverflow.ts

@@ -0,0 +1,29 @@
+import { isRtl } from '@24i/bigscreen-sdk/i18n';
+
+export const handleOverflow = (
+    wrap: HTMLDivElement | null,
+    caret: HTMLDivElement | null,
+    text: HTMLDivElement | null,
+) => {
+    if (!wrap || !caret || !text) return;
+    const { width: wrapWidth, left: wrapLeft } = wrap.getBoundingClientRect();
+    const { width: caretWidth, left: caretLeft } = caret.getBoundingClientRect();
+    const textMargin = parseInt(text.dataset.margin!, 10) || 0;
+    const caretOffset = isRtl()
+        ? caretLeft + textMargin - caretWidth
+        : caretLeft - textMargin + caretWidth;
+    if (!isRtl() && wrapWidth + wrapLeft < caretOffset) {
+        const margin = -(caretOffset - wrapWidth - wrapLeft);
+        text.style.marginLeft = `${margin}px`;
+        text.style.marginRight = '0px';
+        text.dataset.margin = margin.toString();
+    } else if (isRtl() && caretOffset < wrapLeft) {
+        const margin = -(wrapLeft - caretOffset);
+        text.style.marginLeft = '0px';
+        text.style.marginRight = `${margin}px`;
+        text.dataset.margin = margin.toString();
+    } else {
+        text.style.marginLeft = '0px';
+        text.style.marginRight = '0px';
+    }
+};

package/packages/analytics/src/clients/TealiumAnalytics/findIdForLanguage.ts

@@ -1,9 +0,0 @@
-import { PropertyIds } from '@24i/bigscreen-sdk/analytics/TealiumAnalytics';
-
-export const findIdForLanguage = (
-    property_ids: PropertyIds = {},
-    language: string,
-): number => {
-    const languageKey = Object.keys(property_ids).find((key) => key.endsWith(language));
-    return languageKey ? property_ids[languageKey] : -1;
-};

package/packages/input/src/utils.ts

@@ -1,71 +0,0 @@
-import { isRtl } from '@24i/bigscreen-sdk/i18n';
-
-/**
- * Handles overflowing text in the input by moving with the inner
- * text element.
- * @param wrap input wrapper
- * @param caret caret element
- * @param text input inner text element
- * @returns value how much is text element moved
- */
-export const handleOverflow = (
-    wrap: HTMLDivElement | null,
-    caret: HTMLDivElement | null,
-    text: HTMLDivElement | null,
-) => {
-    if (!wrap || !caret || !text) return 0;
-    const { width: wrapWidth, left: wrapLeft } = wrap.getBoundingClientRect();
-    const { width: caretWidth, left: caretLeft } = caret.getBoundingClientRect();
-    const caretOffset = isRtl() ? caretLeft - caretWidth : caretLeft + caretWidth;
-    if (!isRtl() && wrapWidth + wrapLeft < caretOffset) {
-        const margin = -(caretOffset - wrapWidth - wrapLeft);
-        text.style.marginLeft = `${margin}px`;
-        text.style.marginRight = '0px';
-        return margin;
-    }
-    if (isRtl() && caretOffset < wrapLeft) {
-        const margin = -(wrapLeft - caretOffset);
-        text.style.marginLeft = '0px';
-        text.style.marginRight = `${margin}px`;
-        return margin;
-    }
-    text.style.marginLeft = '0px';
-    text.style.marginRight = '0px';
-    return 0;
-};
-
-/**
- * Check for char element position mishmash in the input's text element. This is
- * necessary to recognize if the char is in the wrong direction than it's position
- * in children collection, this means that the char is LTR char in RTL scheme or RTL
- * char in LTR scheme.
- * @param text input inner text element
- * @param position position of the char in children collection
- * @returns true if char has position mishmash
- */
-export const checkCharOrderMishmash = (text: HTMLDivElement, position: number) => {
-    const { children } = text!;
-    if (!children.length) return false;
-    const charOffsets: {
-        index: number,
-        offset: number,
-    }[] = [];
-    for (let i = 0; i < children.length; i++) {
-        charOffsets.push({
-            index: i,
-            offset: (children[i] as HTMLElement).getBoundingClientRect().left,
-        });
-    }
-    charOffsets.sort((a, b) => {
-        if (a.offset < b.offset) return isRtl() ? 1 : -1;
-        if (a.offset > b.offset) return isRtl() ? -1 : 1;
-        return 0;
-    });
-    const lastPos = children.length - 1;
-    const posBefore = position - 1;
-    const mishmashBefore = posBefore < 0
-        ? false : charOffsets[posBefore].index !== posBefore;
-    const mishmashCurrent = charOffsets[position].index !== position;
-    if (mishmashCurrent) return true;
-    return !mishmashCurrent && mishmashBefore && position !== lastPos;
-};