@24i/bigscreen-sdk 0.9.9-alpha.2147

package/packages/key-sequence/src/KeySequence.ts

@@ -0,0 +1,56 @@
+import { arrayEndsWithKeyCombo } from './arrayEndsWithKeyCombo';
+import { ArrayKeys, Options } from './types';
+
+const defaultOptions: Options = {
+    keystrokeDelayMs: 2000,
+};
+
+const MAX_BUFFER_SIZE = 100; // Performance optimalization
+
+class KeySequence {
+    keySequence: ArrayKeys;
+
+    options: Options;
+
+    callback?: Function;
+
+    buffer: ArrayKeys = [];
+
+    lastKeyTimeMs = 0;
+
+    constructor(keySequence: ArrayKeys, options: Partial<Options> = {}, callback?: () => void) {
+        this.keySequence = keySequence;
+        this.options = { ...defaultOptions, ...options };
+        this.callback = callback;
+    }
+
+    onKeyDown(event: KeyboardEvent) {
+        const { keyCode, code } = event;
+        const { keystrokeDelayMs } = this.options;
+        const currentTimeMs = Date.now();
+
+        if (keystrokeDelayMs !== false && currentTimeMs - this.lastKeyTimeMs > keystrokeDelayMs) {
+            this.buffer = [{ keyCode, code }];
+        } else {
+            this.buffer.push({ keyCode, code });
+        }
+
+        if (this.buffer.length > MAX_BUFFER_SIZE) {
+            console.warn('[KeySequence] buffer size has been reached.The oldest item has been cut');
+            this.buffer.shift();
+        }
+
+        this.lastKeyTimeMs = currentTimeMs;
+
+        if (this.callback && this.isPassed()) {
+            this.callback();
+        }
+    }
+
+    isPassed() {
+        const { buffer, keySequence } = this;
+        return arrayEndsWithKeyCombo(buffer, keySequence);
+    }
+}
+
+export { KeySequence };

package/packages/key-sequence/src/arrayEndsWithKeyCombo.ts

@@ -0,0 +1,22 @@
+import { Key } from './types';
+
+/**
+ * Determines whether a array ends with the items of a specified array.
+ * @param keys The array to be checked
+ * @param keysPattern The sequence of items to be searched for at the end of array
+ * @return true if the given array of items are found at the end of the array; otherwise, false.
+ */
+export function arrayEndsWithKeyCombo(keys: Array<Key>, keysPattern: Array<Key>) {
+    const keysLength = keys.length;
+    const keysPatternLength = keysPattern.length;
+    if (keysLength < keysPatternLength) return false;
+
+    for (let i = 1; i <= keysPatternLength; i++) {
+        const patternKey = keysPattern[keysPatternLength - i];
+        const key = keys[keysLength - i];
+        if (key.code !== patternKey.code && key.keyCode !== patternKey.keyCode) {
+            return false;
+        }
+    }
+    return true;
+}

package/packages/key-sequence/src/index.ts

@@ -0,0 +1 @@
+export { KeySequence } from './KeySequence';

package/packages/key-sequence/src/types.ts

@@ -0,0 +1,13 @@
+export type Options = {
+    /**
+     * The max. time delay (in milliseconds) between the keystrokes. False to ignore delay.
+     */
+    keystrokeDelayMs: number | false,
+};
+
+export type Key = {
+    code: string,
+    keyCode: number,
+};
+
+export type ArrayKeys = Array<Key>;

package/packages/keyboard/README.md

@@ -0,0 +1,235 @@
+---
+id: README
+title: Keyboard
+hide_title: true
+sidebar_label: Keyboard
+---
+
+# Keyboard
+This package holds various keyboard implementations.
+
+List of available keyboards:
+- DefaultKeyboard
+- MobiKeyboard
+- AndroidKeyboard
+- WhitelabelKeyboard
+
+## Props
+All default values are general. Each keyboard implementation can change this default behaviour.
+For details, check your keyboard implementation code.
+```typescript
+/**
+ * Sets the layout of the keyboard. Set by keyboards but adjustable if needed.
+ * @default provided by keyboard implementation
+ */
+layouts?: Record<Layouts, KeyMatrixCell[][]>,
+/**
+ * { x, y } index of the first key to focus.
+ * @default provided by keyboard implementation
+ */
+initialFocus?: Index2D,
+/**
+ * Whether the keyboard should initially render as hidden.
+ * @default true
+ */
+initiallyIsHidden?: boolean,
+/**
+ * Whether the keyboard should handle key digits pressed on the remote control or HW keyboard.
+ * @default true
+ */
+handleRemoteDigits?: boolean;
+/**
+ * Whether the keyboard should handle keys pressed on HW keyboard.
+ * @default true
+ */
+handleHWKeyboard?: boolean;
+/**
+ * Circular navigation of the keyboard.
+ * @default CircularDirection.HORIZONTAL
+ */
+circular?: CircularDirection;
+/**
+ * Whether the keyboard should hide if mouse/pointer clicks outside of keyboard.
+ * @default true
+ */
+shouldHideOnBackdropClick?: boolean;
+/**
+ * Mode in which shift key operates.
+ * @default ShiftMode.COMBINED
+ */
+shiftMode?: ShiftMode,
+```
+
+### ShiftMode
+The mode in which the shift key operates.
+- SHIFT_ONLY - The first key after the shift key is uppercase. Then it switches back to lowercase.
+Pressing shift again just turns it off.
+- CAPS_ONLY - All keys after pressing the shift key are uppercase until the shift key is pressed again.
+- COMBINED - If pressed once, it behaves as Shift, first letter is uppercase, other are lowercase.
+If pressed twice it behaves as CapsLock, all keys are uppercase. Third press returns to lowercase.
+
+`ShiftMode` union can be imported from `@24i/bigscreen-sdk/keyboard/ShiftMode`;
+
+## Usage
+```tsx
+import { ime } from '@24i/bigscreen-sdk/ime';
+import { Keyboard } from '@24i/bigscreen-sdk/keyboard/DefaultKeyboard';
+
+class App extends Component {
+    componentDidMount() {
+        ime.setKeyboard(this.keyboard.current);
+    }
+
+    render() {
+        return (
+            // App JSX
+            <Keyboard ref={this.keyboard} />
+        );
+    }
+}
+```
+
+## Disabling MRCU interaction with scene elements during inputting
+When inputting, rest of the scene elements are not accessible with MRCU device,
+because of `keyboard-backdrop` element. It is stretched by default to the whole
+screen behind keyboard elements. If you need to move it or change it,
+you can do it with your own `keyboard-backdrop` class style.
+
+### Mobi keyboard
+
+```tsx
+import { ime } from '@24i/bigscreen-sdk/ime';
+import { CircularDirection } from '@24i/bigscreen-sdk/focus';
+import { Keyboard } from '@24i/bigscreen-sdk/keyboard/MobiKeyboard';
+
+class App extends Component {
+    componentDidMount() {
+        ime.setKeyboard(this.keyboard.current);
+    }
+
+    render() {
+        return (
+            // App JSX
+            <Keyboard
+                ref={this.keyboard}
+                texts={{ clear: '', ... }} // Texts for buttons like clear, cancel, done etc.
+                circular={CircularDirection.ALL} // Read more in Focus readme, passed directly to matrix
+                layout={{ // Can contain custom keyboard layouts
+                    normal: [
+                        ['1', '2', ...],
+                        ['q', 'w', ...],
+                        ['a', 'b', ...],
+                        ['z', 'x', ...],
+                    ],
+                    special: [
+                        ['+', ...],
+                        ['!', ...],
+                        ['$', ...],
+                        ['~', ...],
+                    ]
+                }}
+                focusMatrix={{
+                    normal: [...], // Similar to layout, but has extra strings for default buttons: done, clear, special, backspace, space, left, right, cancel, shift
+                    special: [...], // Similar to layout, same extra strings as normal focus matrix
+                }}
+            />
+        );
+    }
+}
+```
+
+### Android Keyboard
+
+Keyboard is fully based on MobiKeyboard, the only difference is styling and layout.
+
+```tsx
+import { Keyboard } from '@24i/bigscreen-sdk/keyboard/AndroidKeyboard';
+```
+
+### Whitelabel Keyboard and Whitelabel Numeric keyboard
+
+These keyboards are expected to be customizable using the backstage.
+If you do not use backstage, you must import default Whitelabel styles.
+
+```tsx
+import { ime } from '@24i/bigscreen-sdk/ime';
+import { CircularDirection } from '@24i/bigscreen-sdk/focus';
+import { Keyboard } from '@24i/bigscreen-sdk/keyboard/WhitelabelKeyboard';
+import { NumericKeyboard } from '@24i/bigscreen-sdk/keyboard/WhitelabelNumericKeyboard';
+
+// default styles import
+import '@24i/bigscreen-sdk/keyboard/WhitelabelKeyboard/WhitelabelStyles';
+import '@24i/bigscreen-sdk/keyboard/WhitelabelNumericKeyboard/WhitelabelStyles';
+
+class App extends Component {
+    componentDidMount() {
+        ime.setKeyboard(this.keyboard.current);
+        // or
+        ime.setKeyboard(this.numericKeyboard.current);
+    }
+
+    render() {
+        return (
+            <Keyboard
+                ref={this.keyboard}
+                circular={CircularDirection.NONE}
+                layout={{
+                    normal: [
+                        ['1', '2', ...],
+                        ['q', 'w', ...],
+                        ['a', 'b', ...],
+                        ['z', 'x', ...],
+                    ],
+                    special: [
+                        ['+', ...],
+                        ['!', ...],
+                        ['$', ...],
+                        ['~', ...],
+                    ]
+                }}
+                texts={{
+                    toNormalLayout: 'Abc',
+                    toSpecialLayout: '+/#',
+                    space: 'Space',
+                    domain: '.com',
+                    clear: 'Clear',
+                    continue: 'Continue',
+                }}
+                initialFocus={{ x: 5, y: 2 }}
+            />
+            <NumericKeyboard
+                ref={this.numericKeyboard}
+                circular={CircularDirection.NONE}
+                texts={{
+                    clear: 'Clear',
+                    continue: 'Continue',
+                }}
+                initialFocus={{ x: 0, y: 0 }}
+            />
+        )
+    }
+}
+```
+
+## Contributing
+If you wish to add custom keyboard to this package, it will be nice addition to the collection.
+1. Create a folder for your keyboard in `src`.
+2. Add your implementation
+3. Add `YouKeyboardName.ts` file to the package root with reexport from your `src/YourKeyboardName` folder so the app could easily import only your implementation.
+
+### Tips
+There is no base for the Keyboard as it is expected that keyboards will extend `Component`.
+You need to implement `IKeyboard` interface from 'ime' package.
+
+There are several utils that you can use to make implementing the keyboard easier:
+- Matrix - use this component from focus to handle your focus needs.
+- generateFocusMatrixFromStringMatrix - takes object with key references and string matrix and prepares ref matrix to be used with Matrix
+- input/insertCharAtCaret - inserts char at current caret position to given input
+- input/backspace - removes the char in front of the current caret position
+- input/del - removes the char after the current caret position
+- caret/caretLeft - moves caret to the left
+- caret/caretRight - moves caret to the right
+- caret/caretHome - moves caret to the beginning
+- caret/caretEnd - moves caret to the end
+
+Look at the code of existing keyboards for inspiration on where to start.

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

@@ -0,0 +1,140 @@
+$background-color: #3e3d40;
+$key-text-color: #fff;
+$focus-color: #f0f0f0;
+$focus-text-color: #000;
+
+@mixin mask-svg-icon($icon-url) {
+    -webkit-mask-image: url($icon-url);
+    -webkit-mask-size: contain;
+    -webkit-mask-repeat: no-repeat;
+    -webkit-mask-position: center;
+    mask-image: url($icon-url);
+    mask-size: contain;
+    mask-repeat: no-repeat;
+    mask-position: center;
+}
+
+.keyboard {
+    position: absolute;
+    bottom: 0;
+    width: 100%;
+    padding-bottom: $keyboard-padding-bottom;
+    outline: none;
+
+    z-index: 10;
+    background-color: $background-color;
+
+    &.shift-active,
+    &.caps-active {
+        text-transform: uppercase;
+
+        .key-shift {
+            position: relative;
+            text-decoration: underline;
+        }
+    }
+
+    &.caps-active .key-shift::before {
+        content: '⬤';
+        position: absolute;
+        left: $caps-indicator-left;
+        font-size: 0.35em;
+    }
+
+    .keyboard-row {
+        position: relative;
+        text-align: center;
+    }
+
+    .key {
+        font-family: Roboto-Light;
+        font-size: $font-size;
+        font-weight: 300;
+        border-radius: 50%;
+        display: inline-block;
+        width: $key-width;
+        height: $key-height;
+        margin: $key-margin;
+        line-height: $key-line-height;
+        text-align: center;
+        color: $key-text-color;
+        outline: none;
+
+        &.key-icon {
+            background-position: center;
+            background-repeat: no-repeat;
+            vertical-align: bottom;
+
+            .key-mask-icon {
+                background-color: $key-text-color;
+                display: inline-block;
+                width: $icon-width;
+                height: 100%;
+            }
+        }
+
+        &:focus {
+            background-color: $focus-color;
+            color: $focus-text-color;
+            font-family: Roboto-Regular;
+            font-weight: normal;
+
+            .key-mask-icon {
+                background-color: $focus-text-color;
+            }
+        }
+
+        &.key-space {
+            box-sizing: border-box;
+            width: $spacebar-button-width;
+            border-radius: 0;
+            background-color: $key-text-color;
+            vertical-align: middle;
+            height: $spacebar-button-height;
+            margin-left: $spacebar-button-margin-left;
+            margin-right: $spacebar-button-margin-right;
+
+            &:focus {
+                background-color: $focus-text-color;
+                border: 1px solid $key-text-color;
+            }
+        }
+
+        &.done-container {
+            position: absolute;
+            background: none;
+            top: $done-container-top;
+            right: $done-container-right;
+        }
+
+        &.key-done {
+            border-radius: 0;
+            width: min-content;
+            padding: $key-done-padding;
+            text-transform: uppercase;
+        }
+
+        &.key-backspace {
+            .key-mask-icon {
+                @include mask-svg-icon('./icons/key_backspace.svg');
+            }
+        }
+
+        &.key-left {
+            .key-mask-icon {
+                @include mask-svg-icon('./icons/arrow_left.svg');
+            }
+        }
+
+        &.key-right {
+            .key-mask-icon {
+                @include mask-svg-icon('./icons/arrow_right.svg');
+            }
+        }
+
+        &.key-fill {
+            background: none;
+            vertical-align: bottom;
+        }
+    }
+}

package/packages/keyboard/src/AndroidKeyboard/Keyboard.styles.1080.scss

@@ -0,0 +1,2 @@
+@import './sizes.1080';
+@import './Keyboard';

package/packages/keyboard/src/AndroidKeyboard/Keyboard.styles.animated.1080.scss

@@ -0,0 +1,3 @@
+@import './sizes.1080';
+@import './Keyboard';
+@import './animated';

package/packages/keyboard/src/AndroidKeyboard/Keyboard.styles.animated.scss

@@ -0,0 +1,3 @@
+@import './sizes';
+@import './Keyboard';
+@import './animated';

package/packages/keyboard/src/AndroidKeyboard/Keyboard.styles.scss

@@ -0,0 +1,2 @@
+@import './sizes';
+@import './Keyboard';