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

package/package.json

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

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/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);

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/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);
 };