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

package/package.json

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

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