@24i/bigscreen-sdk 1.0.4-alpha.2106 → 1.0.4-alpha.2112

package/package.json

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

package/packages/animations/README.md

@@ -40,7 +40,7 @@ If you use it in combination with *JSAnimations* then you will need only static
 
 ## JSAnimations
 Create your own instance in your component. To start the animation you call start and pass callback;
-```javascript
+```ts
 animations = new JSAnimations();
 ...
 animations.start(from, to, timeInMs, AnimationUtils.ease).onFrame(this.onFrame);
@@ -50,6 +50,17 @@ animations.start(from, to, timeInMs, AnimationUtils.ease).onFrame(this.onFrame);
 If you start another animation (with the same instance) before the previous ends.
 Then the from is not what you passed but current position of running animation.
 
+## Frame callback
+Frame callback is called each time animation progresses. It has two parameters.
+Parameter `value` is the current value of the animation between `from` and `to`.
+Parameter `percentage` is optional and it is the percentual progress of the animation
+between 0 and 1. The value is not linear, it is based on the ease function used in
+the animation.
+
+```ts
+frameCallback = (value: number, percentage?: number) => void;
+```
+
 ## Timing Example
 Time | Call | Result
 ---|---|---
@@ -63,7 +74,7 @@ To the root of your package add this file:
 __mocks__/@24i/smartapps-bigscreenen-animations.ts
 ```
 with this content
-```js
+```ts
 export { AnimationUtils } from '@24i/bigscreen-sdk/animations';
 export { JSAnimations } from '@24i/bigscreen-sdk/animations/mock';
 

package/packages/animations/src/AnimationUtils.ts

@@ -162,16 +162,22 @@ export class AnimationUtils {
     static easeInOutBack: EasingType = [0.68, -0.55, 0.265, 1.55];
 
     /**
-     * Returns value at given percentage
+     * Returns value at given time percentage with percentage in easing function
      * @param {number} min - minimal value
      * @param {number} max - maximal value
      * @param {number} percentage - percentage of time
      * @param {EasingType} easingFunction - easing function for calculation
-     * @returns {number} calculated value
-     */
-    xInTime(min: number, max: number, percentage: number, easingFunction: EasingType): number {
-        const percentageInTime = this.getPercentageAt(percentage, easingFunction);
-        return this.linearInterpolation(min, max, percentageInTime);
+     * @returns {Object} calculated value and percentual value in easing
+     */
+    xInTime(min: number, max: number, percentage: number, easingFunction: EasingType): {
+        value: number,
+        percentage: number,
+    } {
+        const percentageInEasing = this.getPercentageAt(percentage, easingFunction);
+        return {
+            value: this.linearInterpolation(min, max, percentageInEasing),
+            percentage: percentageInEasing,
+        };
     }
 
     /**

package/packages/animations/src/JSAnimations.ts

@@ -71,10 +71,12 @@ export class JSAnimations {
     easingFunction: EasingType = AnimationUtils.ease;
 
     /**
-     * @member {FrameCallback} frameCallback - callback being called on evry frame
+     * @member {FrameCallback} frameCallback - callback being called on every frame
      * @private
+     * @param {number} value - current value of the animation
+     * @param {number} [percentage] - current progress of the animation in percents
      */
-    frameCallback?: (value: number) => void;
+    frameCallback?: (value: number, percentage?: number) => void;
 
     /**
      * Starts animation
@@ -115,7 +117,7 @@ export class JSAnimations {
             this.animationRunning = false;
         }
         const timePercentage = this.currentTime / this.animationTime;
-        const value = this.animations.xInTime(
+        const { value, percentage } = this.animations.xInTime(
             this.from,
             this.to,
             timePercentage,
@@ -123,7 +125,7 @@ export class JSAnimations {
         );
         this.currentPosition = value;
         if (this.frameCallback) {
-            this.frameCallback(value);
+            this.frameCallback(value, percentage);
         }
         if (this.animationRunning) {
             this.animationFrameID = window.requestAnimationFrame(this.frame);
@@ -134,7 +136,7 @@ export class JSAnimations {
      * Frame callback handler
      * @param {FrameCallback} callback - callback to run on every animation frame
      */
-    onFrame(callback: (value: number) => void) {
+    onFrame(callback: (value: number, percentage?: number) => void) {
         if (typeof callback === 'function') {
             this.frameCallback = callback;
         }

package/packages/developer-tools/src/EnvironmentSelection/EnvironmentListItem.tsx

@@ -53,7 +53,7 @@ export class EnvironmentListItem extends Component<Props> implements Item<ItemDa
     trimRows() {
         const { leadingEllipses } = this.props;
         if (leadingEllipses) {
-            trimWithLeadingEllipsis(this.labelRef.current!);
+            trimWithLeadingEllipsis(this.labelRef.current!, 2);
         }
     }
 

package/packages/developer-tools/src/EnvironmentSelection/styles/EnvironmentSelection.scss

@@ -43,7 +43,11 @@
             padding-right: $environment-config-name-padding-right;
             line-height: $environment-config-name-height;
             height: $environment-config-name-height;
+            max-width: $environment-config-name-width;
+            text-align: left;
             white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
         }
     }
 

package/packages/developer-tools/src/EnvironmentSelection/styles/_sizes.1080.scss

@@ -9,6 +9,7 @@ $environment-config-name-font-size: 22px;
 $environment-config-name-padding-left: 12px;
 $environment-config-name-padding-right: 7px;
 $environment-config-name-height: 33px;
+$environment-config-name-width: 400px;
 
 $environment-list-width: 479px;
 

package/packages/developer-tools/src/EnvironmentSelection/styles/_sizes.scss

@@ -9,6 +9,7 @@ $environment-config-name-font-size: 15px;
 $environment-config-name-padding-left: 8px;
 $environment-config-name-padding-right: 5px;
 $environment-config-name-height: 22px;
+$environment-config-name-width: 200px;
 
 $environment-list-width: 319px;
 

package/packages/epg/README.md

@@ -20,6 +20,7 @@ This package contains a prepared Electronic Program Guide component.
 - `fetchPrograms` - the function to fetch more programs for a channel in a given time range
 - `timelineWidthMs` - optional - the width of the timeline (the part where the programs are) in milliseconds (defaults to `90 minutes`)
 - `scrollStepMs` - optional - the amount of movement step left/right in milliseconds (defaults to `0.5 hours`)
+- `idleTimerMs` - optional - the amount of ms without user input after which epg jumps to the current time (defaults to `scrollStepMs`)
 - `timelineSectionWidthMs` - optional - the width of timeline header section (above rows) in milliseconds (defaults to `0.5 hours`)
 - `limitFromMs` - optional - left limit for movement (cannot go more into history) (defaults to `-Infinity`)
 - `limitToMs` - optional - right limit for movement (cannot go further into future) (defaults to `Infinity`)

package/packages/epg/src/v2/Epg.tsx

@@ -15,6 +15,7 @@ import { TimelineSection } from './TimelineSection';
 import { EpgMouseNavigation } from './MouseNavigation';
 import { DataManager } from './DataManager';
 import { InputEvents } from './InputEvents';
+import { IdleController } from './IdleController';
 import { shouldRenderDatePicker, clamp } from './utils';
 import {
     Props,
@@ -73,7 +74,9 @@ export class Epg<
 
     focused: EpgFocus = 'epg';
 
-    private readonly inputEvents = new InputEvents(this);
+    private readonly idleController: IdleController;
+
+    private readonly inputEvents: InputEvents;
 
     static defaultProps = {
         timelineWidthMs: DEFAULT_TIMELINE_WIDTH_IN_MIN * MINUTE_IN_MS,
@@ -128,7 +131,7 @@ export class Epg<
     constructor(props: Props<T, U, V, W>) {
         super(props);
         const {
-            initialTimestamp, timeProvider,
+            initialTimestamp, timeProvider, scrollStepMs, idleTimerMs,
             channelData, timelineWidthMs, fetchPrograms,
         } = this.props;
 
@@ -143,6 +146,8 @@ export class Epg<
         this.dataManagers = map(channelData, (channel) => (
             new DataManager(channel, timelineWidthMs, fetchPrograms, this)
         ));
+        this.idleController = new IdleController(idleTimerMs ?? scrollStepMs, this.onIdle);
+        this.inputEvents = new InputEvents(this, this.idleController.onKeyDown);
     }
 
     componentDidMount() {
@@ -153,6 +158,7 @@ export class Epg<
 
     componentWillUnmount() {
         this.time.destroy();
+        this.idleController.clear();
     }
 
     private readonly onDatePickerChange = (timestamp: number) => {
@@ -211,6 +217,13 @@ export class Epg<
         }
     };
 
+    private readonly onIdle = () => {
+        const now = this.time.getCurrentTime();
+        this.setCurrentTime(now);
+        this.setFocusTimestamp(now);
+        this.setFocusToEpg();
+    };
+
     setFocusTimestamp(timestamp: number, allowScroll = true) {
         const { timelineWidthMs, scrollStepMs, limitFromMs, limitToMs } = this.props;
         this.focusTimestamp = timestamp;
@@ -363,6 +376,10 @@ export class Epg<
         return this.inputEvents.isVerticallyFastScrolling();
     }
 
+    isFocusInRows = () => {
+        return this.focused === 'epg';
+    };
+
     render() {
         const {
             datePickerProps, timelineWidthPx, channelHeaderWidthPx, scrollStepMs, rowHeightPx,
@@ -426,6 +443,7 @@ export class Epg<
                     onMouseEnter={this.onMouseEnter}
                     renderChannelHeader={renderChannelHeader}
                     renderProgram={renderProgram}
+                    isFocusInRows={this.isFocusInRows}
                 />
                 <EpgMouseNavigation
                     // @ts-ignore - needed to convert fallback (false) to interface

package/packages/epg/src/v2/IdleController.ts

@@ -0,0 +1,25 @@
+import { createTimeout } from '@24i/bigscreen-sdk/utils/timers';
+
+export class IdleController {
+    private timeout = createTimeout();
+
+    constructor(
+        private intervalMs: number,
+        private onIdleCallback: () => void,
+    ) {
+        this.timeout.set(this.onTimeout, this.intervalMs);
+    }
+
+    onKeyDown = () => {
+        this.timeout.set(this.onTimeout, this.intervalMs);
+    };
+
+    onTimeout = () => {
+        this.timeout.set(this.onTimeout, this.intervalMs);
+        this.onIdleCallback();
+    };
+
+    clear() {
+        this.timeout.clear();
+    }
+}

package/packages/epg/src/v2/InputEvents.ts

@@ -23,6 +23,7 @@ export class InputEvents {
 
     constructor(
         private readonly epg: InternalEpg<any, any, any, any>,
+        private readonly onUserInput: () => void,
     ) {}
 
     onKeyDown = (event: KeyboardEvent) => {
@@ -44,6 +45,7 @@ export class InputEvents {
             this.stopFastHorizontalScrolling();
             this.stopFastVerticalScrolling();
         }
+        this.onUserInput();
     };
 
     onKeyUp = (event: KeyboardEvent) => {
@@ -188,6 +190,7 @@ export class InputEvents {
 
     onWheel = (e: WheelEvent) => {
         const processed = e.deltaY > 0 ? this.onWheelDown() : this.onWheelUp();
+        this.onUserInput();
         if (processed) {
             stopEvent(e);
             this.setVerticalScroll(ARROWS_FACTOR);
@@ -266,21 +269,25 @@ export class InputEvents {
     }
 
     onMouseClickUp = () => {
+        this.onUserInput();
         this.onUp();
         this.fakeMouseClickStop();
     };
 
     onMouseClickDown = () => {
+        this.onUserInput();
         this.onDown();
         this.fakeMouseClickStop();
     };
 
     onMouseClickLeft = () => {
+        this.onUserInput();
         this.onLeft();
         this.fakeMouseClickStop();
     };
 
     onMouseClickRight = () => {
+        this.onUserInput();
         this.onRight();
         this.fakeMouseClickStop();
     };

package/packages/epg/src/v2/basic/RowsManager.tsx

@@ -72,6 +72,7 @@ export class RowsManager<
     }
 
     onFastScrollingEnd() {
+        const { isFocusInRows } = this.props;
         this.isFastScrolling = false;
         if (this.coiBeforeFastScrolling < this.channelOffsetIndex) {
             const { navigatableRows } = this.props;
@@ -82,7 +83,7 @@ export class RowsManager<
             this.updateRowsBackward();
         }
         // it is same if we scroll horizontally and at that case we do not need to do anything
-        this.focusCurrentRowAtTimestamp();
+        if (isFocusInRows()) this.focusCurrentRowAtTimestamp();
         this.setCurrentRowActive();
         forEach(this.rows, ({ current: row }) => {
             row!.onFastScrollingEnd();

package/packages/epg/src/v2/interface.ts

@@ -212,6 +212,14 @@ type RenderTimeProp<T extends TimelineSection> = {
     renderTime: TimeRenderer<T>,
 };
 
+type IsFocusInRowsProp = {
+    /**
+     * Returns whether the focus is in Rows part of the epg.
+     * @returns true fif cosu is in rows part, false otherwise
+     */
+    isFocusInRows: () => boolean,
+};
+
 type RowHeightPxProp = {
     /**
      * The height of the EPG row in pixels
@@ -233,6 +241,14 @@ type ScrollStepMsProp = {
     scrollStepMs: number,
 };
 
+type IdleTimerMsProp = {
+    /**
+     * The number of milliseconds of inactivity (no input) after which EPG starts jumps
+     * to the current time.
+     */
+    idleTimerMs: number,
+};
+
 type TimeProp = {
     /**
      * The time interface that provides current time and time change events
@@ -806,6 +822,7 @@ export type RowsManagerProps<
     & OnFocusChangeProp<U>
     & RenderChannelHeaderProp<T>
     & RenderProgramProp<U>
+    & IsFocusInRowsProp
 );
 
 /**
@@ -1250,6 +1267,7 @@ export type Props<
     & FetchProgramsProp
     & Partial<TimelineWidthMsProp>
     & Partial<ScrollStepMsProp>
+    & Partial<IdleTimerMsProp>
     & Partial<TimelineSectionWidthMsProp>
     & Partial<LimitFromMsProp>
     & Partial<LimitToMsProp>
@@ -1267,7 +1285,6 @@ export type Props<
     & Partial<RenderTimeProp<W>>
     & Partial<DatePickerProp>
     & Partial<PluginsProp<U>>
-
 );
 
 /**

package/packages/keyboard/src/WhitelabelKeyboard/Keyboard.scss

@@ -152,8 +152,7 @@
     }
 
     &.caps-active .key.key-shift .key-background::before {
-        content: '⬤';
+        content: '•';
         position: absolute;
-        font-size: 0.35em;
     }
 }

package/packages/utils/src/textUtils.ts

@@ -1,12 +1,12 @@
 const ELLIPSIS = '...';
 
-export const trimWithLeadingEllipsis = (row: HTMLSpanElement) => {
+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 >= 2) {
+        if (numberOfLines > requestedNumberOfLines) {
             const originalTextContent = row.textContent;
             row.textContent = ELLIPSIS;
             let stringBuffer = '';
@@ -17,7 +17,7 @@ export const trimWithLeadingEllipsis = (row: HTMLSpanElement) => {
                 row.textContent = `${ELLIPSIS}${stringBuffer}`;
                 currentPosition -= 1;
                 numberOfLines = Math.floor(row.offsetHeight / lineHeight);
-            } while (numberOfLines < 2 && currentPosition >= 0);
+            } while (numberOfLines <= requestedNumberOfLines && currentPosition >= 0);
             row.textContent = `${ELLIPSIS}${stringBuffer.substring(1)}`;
         }
         row.style.visibility = '';