@24i/bigscreen-sdk 1.0.4-alpha.2116 → 1.0.4-alpha.2118

package/package.json

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

package/packages/input/src/Input.scss

@@ -2,4 +2,8 @@
     .native-input-wrap {
         display: none;
     }
+
+    .text {
+        white-space: pre;
+    }
 }

package/packages/input/src/Input.tsx

@@ -1,12 +1,14 @@
 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';
 import { ime } from '@24i/bigscreen-sdk/ime';
 import { noop } from '@24i/bigscreen-sdk/utils/noop';
 import { device, isClickOrEnter } from '@24i/bigscreen-sdk/device';
 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 { handleOverflow } from './handleOverflow';
 import './Input.scss';
 
@@ -38,9 +40,7 @@ export class Input extends Component<Props> implements IFocusable {
 
     placeholder = createRef<HTMLDivElement>();
 
-    textPreCaret = createRef<HTMLDivElement>();
-
-    textPostCaret = createRef<HTMLDivElement>();
+    text = createRef<HTMLDivElement>();
 
     caret = createRef<HTMLDivElement>();
 
@@ -89,12 +89,10 @@ export class Input extends Component<Props> implements IFocusable {
         if (position === null) return;
         const { shouldHandleOverflow } = this.props;
         const value = this.getValue();
-        const preCaret = value.substring(0, position);
-        const postCaret = value.substring(position);
-        setText(this.textPreCaret, this.filterText(preCaret));
-        setText(this.textPostCaret, this.filterText(postCaret));
+        setText(this.text, this.filterText(value));
+        this.setCaretPosition(position);
         if (shouldHandleOverflow) {
-            handleOverflow(this.wrap.current, this.caret.current, this.textPreCaret.current);
+            handleOverflow(this.wrap.current, this.caret.current, this.text.current);
         }
         if (this.lastValue !== value) {
             const { onChange } = this.props;
@@ -116,7 +114,25 @@ export class Input extends Component<Props> implements IFocusable {
         if (this.getType() === type) return;
         const value = this.getValue();
         this.nativeInput.current!.type = type;
-        setText(this.textPreCaret, this.filterText(value));
+        setText(this.text, this.filterText(value));
+    }
+
+    setCaretPosition(position: number) {
+        const textNode = this.text.current!.firstChild;
+        if (!textNode) {
+            offsetPosition(this.caret, { x: 0 });
+            return;
+        }
+        const range = new Range();
+        range.selectNode(textNode);
+        const wholeText = range.getBoundingClientRect();
+        range.setStart(textNode, position);
+        range.setEnd(textNode, position);
+        const caretText = range.getBoundingClientRect();
+        const offset = isRtl()
+            ? wholeText.left - caretText.left
+            : wholeText.left + wholeText.width - caretText.left;
+        offsetPosition(this.caret, { x: -offset }, false);
     }
 
     /**
@@ -204,11 +220,10 @@ export class Input extends Component<Props> implements IFocusable {
                     >
                         {placeholder}
                     </div>
-                    <div ref={this.textPreCaret} className="text">
+                    <div ref={this.text} className="text" dir="auto">
                         {this.filterText(value)}
                     </div>
                     <div ref={this.caret} className="caret" />
-                    <div ref={this.textPostCaret} className="text" />
                 </div>
             </Interactable>
         );

package/packages/input/src/handleOverflow.ts

@@ -2,18 +2,28 @@ import { isRtl } from '@24i/bigscreen-sdk/i18n';
 
 export const handleOverflow = (
     wrap: HTMLDivElement | null,
-    caretElement: HTMLDivElement | null,
-    textPreCaret: HTMLDivElement | null,
+    caret: HTMLDivElement | null,
+    text: HTMLDivElement | null,
 ) => {
-    if (!wrap || !caretElement || !textPreCaret) return;
-    const wrapWidth = wrap.getBoundingClientRect().width;
-    const caretWidth = caretElement.getBoundingClientRect().width;
-    const preCaretWidth = textPreCaret.getBoundingClientRect().width + caretWidth;
-    const margin = isRtl() ? 'marginRight' : 'marginLeft';
-    if (preCaretWidth >= wrapWidth) {
-        const offset = wrapWidth - preCaretWidth;
-        textPreCaret.style[margin] = `${offset}px`;
-    } else if (textPreCaret.style[margin] !== '0px') {
-        textPreCaret.style[margin] = '0px';
+    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/player-ui/src/timeUtils.ts

@@ -63,9 +63,12 @@ export const formatTime = (duration: number, pattern: string) => {
     const unitValues = calculateUnitValues(duration, units);
     let result: string = pattern;
     forEach(matches, (match) => {
+        const formatedValue = Number.isNaN(unitValues[match.unit]) ?
+            '--' :
+            unitValues[match.unit]!.toString().padStart(match.count, '0');
         result = result.replace(
             match.completeMatch,
-            unitValues[match.unit]!.toString().padStart(match.count, '0'),
+            formatedValue,
         );
     });
     return result;