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

package/packages/developer-tools/src/DeveloperConsole/DeveloperConsole.tsx

@@ -0,0 +1,388 @@
+import {
+    FC,
+    Component,
+    Reference,
+    createRef,
+    clearNode,
+    DeclareProps,
+} from '@24i/bigscreen-sdk/jsx';
+import {
+    DISPLAY_NONE,
+    getDisplayToggler,
+    addClass,
+    removeClass,
+    stopEvent,
+} from '@24i/bigscreen-sdk/utils';
+import { IStorage, Storage } from '@24i/bigscreen-sdk/storage';
+import { YELLOW, switchByKey } from '@24i/bigscreen-sdk/device/keymap';
+import { map } from '@24i/bigscreen-sdk/perf-utils/array';
+import {
+    setActiveElementAsFocusCandidate, focusCandidate,
+} from '@24i/bigscreen-sdk/focus';
+import { IDeveloperTool } from '../IDeveloperTool';
+import { ConsoleMessage, NetworkMessage } from './PanelMessage';
+import { Queue, addInstrument } from './helpers';
+import { ControlButton } from './ControlButton';
+import { Panel } from './Panel';
+import {
+    DeveloperConsoleButtons,
+    InstrumentOptions,
+    ButtonActions,
+    NetworkData,
+    ConsoleData,
+    HandlerData,
+    PanelType,
+    PanelData,
+} from './types';
+
+const FOCUS_CLASS = 'focus';
+const SELECTED_CLASS = 'selected';
+const ENABLED_CLASS = 'enabled';
+
+const MAX_CONSOLE_QUEUE_LENGTH = 100;
+const MAX_NETWORK_QUEUE_LENGTH = 50;
+
+const Buttons: DeveloperConsoleButtons = {
+    hide: { key: 0, id: 'item-hide', text: 'Hide' },
+    console: { key: 1, id: 'item-console', text: 'Console' },
+    network: { key: 2, id: 'item-network', text: 'Network' },
+    'reload-app': { key: 3, id: 'item-reload-app', text: 'Reload app' },
+    'clear-storage': { key: 4, id: 'item-clear-storage', text: 'Clear storage' },
+};
+
+export type Props = {
+    storage?: IStorage;
+    maxConsoleQueueLength?: number;
+    maxNetworkQueueLength?: number;
+    instrumentOptions?: Partial<InstrumentOptions>;
+    preserveScrollOnUpdate?: boolean;
+    onShow?: () => void;
+    onFocusOut?: () => void;
+    onClose?: () => void;
+};
+
+export class DeveloperConsole extends Component<Props> implements IDeveloperTool<Props> {
+    readonly name = 'Developer console';
+
+    rootRef = createRef<HTMLDivElement>();
+
+    developerConsoleRef = createRef<HTMLDivElement>();
+
+    developerConsolePanelRef = createRef<HTMLDivElement>();
+
+    panelComponentRef = createRef<Panel>();
+
+    selectedButtonRef: Reference<HTMLDivElement> | null = null;
+
+    consoleQueue: Queue<ConsoleData>;
+
+    networkQueue: Queue<NetworkData>;
+
+    displayToggler = getDisplayToggler(this.rootRef, true);
+
+    static defaultProps = {
+        storage: Storage,
+        maxConsoleQueueLength: MAX_CONSOLE_QUEUE_LENGTH,
+        maxNetworkQueueLength: MAX_NETWORK_QUEUE_LENGTH,
+    };
+
+    declare props: DeclareProps<Props, typeof DeveloperConsole.defaultProps>;
+
+    constructor(props: Props) {
+        super(props);
+        const { maxConsoleQueueLength, maxNetworkQueueLength, instrumentOptions } = this.props;
+        this.consoleQueue = new Queue<ConsoleData>(maxConsoleQueueLength);
+        this.networkQueue = new Queue<NetworkData>(maxNetworkQueueLength);
+        this.setInstruments(instrumentOptions);
+    }
+
+    onKeyDown = (event: KeyboardEvent) => {
+        const processed = switchByKey(event, {
+            NUM_0: this.onHidePanel,
+            NUM_1: this.onToggleConsolePanel,
+            NUM_2: this.onToggleNetworkPanel,
+            NUM_3: this.onReloadApp,
+            NUM_4: this.onClearStorage,
+            RED: this.onClearPanel,
+            BACK: this.onCloseDeveloperConsole,
+        });
+        if (processed) stopEvent(event);
+    };
+
+    onHidePanel = () => {
+        if (this.panelComponentRef.current) {
+            clearNode(this.developerConsolePanelRef);
+            this.panelComponentRef.current = null;
+            this.toggleHideButton();
+            removeClass(this.selectedButtonRef!, SELECTED_CLASS);
+            this.selectedButtonRef = null;
+            this.developerConsoleRef.current!.focus();
+        }
+        return true;
+    };
+
+    onToggleConsolePanel = () => {
+        this.renderPanel('console', this.consoleQueue, ConsoleMessage as FC<PanelData>);
+        this.selectButton('console');
+        return true;
+    };
+
+    onToggleNetworkPanel = () => {
+        this.renderPanel('network', this.networkQueue, NetworkMessage as FC<PanelData>);
+        this.selectButton('network');
+        return true;
+    };
+
+    onReloadApp = () => {
+        window.location.reload();
+        return true;
+    };
+
+    onClearStorage = () => {
+        const { storage } = this.props;
+        storage.clear();
+        console.info('Storage cleared...');
+        return true;
+    };
+
+    onClearPanel = () => {
+        if (this.panelComponentRef.current) {
+            this.panelComponentRef.current.clear();
+        }
+        return true;
+    };
+
+    onFocusOut() {
+        const { onFocusOut } = this.props;
+        removeClass(this.rootRef, FOCUS_CLASS);
+        focusCandidate();
+        onFocusOut?.();
+    }
+
+    onCloseDeveloperConsole = () => {
+        this.closeDeveloperConsole();
+        return true;
+    };
+
+    setInstruments(instrumentOptions: Partial<InstrumentOptions> = {}) {
+        if (instrumentOptions?.onerror !== false) {
+            addInstrument({
+                type: 'error',
+                callback: (handlerData: HandlerData) => {
+                    const logLevel = { level: 'error' };
+                    this.sendToConsolePanel({ ...logLevel, ...handlerData });
+                },
+            });
+        }
+        if (instrumentOptions?.console !== false) {
+            addInstrument({
+                type: 'console',
+                callback: (handlerData: HandlerData) => {
+                    this.sendToConsolePanel(handlerData);
+                },
+            });
+        }
+        if (instrumentOptions?.fetch !== false) {
+            addInstrument({
+                type: 'fetch',
+                callback: (handlerData: HandlerData) => {
+                    this.sendToNetworkPanel(handlerData);
+                },
+            });
+        }
+        if (instrumentOptions?.xhr !== false) {
+            addInstrument({
+                type: 'xhr',
+                callback: (handlerData: HandlerData) => {
+                    this.sendToNetworkPanel(handlerData);
+                },
+            });
+        }
+    }
+
+    onGlobalKeyDown = (event: KeyboardEvent) => {
+        if (
+            this.developerConsoleRef.current
+            && YELLOW.is(event)
+        ) {
+            if (!this.isFocused()) {
+                this.focus();
+                stopEvent(event);
+            } else {
+                this.onFocusOut();
+                stopEvent(event);
+            }
+        }
+    };
+
+    addFocusKeyListener() {
+        window.document.addEventListener('keydown', this.onGlobalKeyDown, true);
+    }
+
+    removeFocusKeyListener() {
+        window.document.removeEventListener('keydown', this.onGlobalKeyDown, true);
+    }
+
+    openDeveloperConsole() {
+        const { onShow } = this.props;
+        this.displayToggler.show();
+        this.renderDeveloperConsole();
+        this.focus();
+        this.addFocusKeyListener();
+        onShow?.();
+    }
+
+    closeDeveloperConsole() {
+        const { onClose } = this.props;
+        this.displayToggler.hide();
+        this.clear();
+        focusCandidate();
+        this.removeFocusKeyListener();
+        onClose?.();
+    }
+
+    show() {
+        this.openDeveloperConsole();
+    }
+
+    hide() {
+        this.closeDeveloperConsole();
+    }
+
+    focus() {
+        setActiveElementAsFocusCandidate();
+        if (this.panelComponentRef.current) {
+            this.panelComponentRef.current.focus();
+        } else {
+            this.developerConsoleRef.current!.focus();
+        }
+        addClass(this.rootRef, FOCUS_CLASS);
+    }
+
+    isFocused() {
+        return !!this.developerConsoleRef.current
+            && this.developerConsoleRef.current.contains(document.activeElement);
+    }
+
+    toggleHideButton() {
+        const hideButtonRef = Buttons.hide.ref!;
+        if (this.panelComponentRef.current) {
+            addClass(hideButtonRef, ENABLED_CLASS);
+        } else {
+            removeClass(hideButtonRef, ENABLED_CLASS);
+        }
+    }
+
+    selectButton(action: ButtonActions) {
+        const buttonToSelect = Buttons[action];
+        this.selectedButtonRef = buttonToSelect.ref!;
+        addClass(this.selectedButtonRef, SELECTED_CLASS);
+    }
+
+    isPanelTypeOpen(panelType: PanelType) {
+        if (this.panelComponentRef.current) {
+            const currentPanel = this.panelComponentRef.current.getPanelType();
+            return currentPanel === panelType;
+        }
+        return false;
+    }
+
+    sendToConsolePanel(handlerData: HandlerData) {
+        const { level, args } = handlerData;
+        const timestamp = Date.now();
+        const data: ConsoleData = { timestamp, level, args };
+
+        if (this.isPanelTypeOpen('console')) {
+            this.panelComponentRef.current!.appendMessage(data);
+        } else {
+            this.consoleQueue.enqueue(data);
+        }
+    }
+
+    sendToNetworkPanel(handlerData: HandlerData) {
+        const { method, url, statusCode } = handlerData;
+        const timestamp = Date.now();
+        const data: NetworkData = { timestamp, method, url, statusCode };
+
+        if (this.isPanelTypeOpen('network')) {
+            this.panelComponentRef.current!.appendMessage(data);
+        } else {
+            this.networkQueue.enqueue(data);
+        }
+    }
+
+    clear() {
+        clearNode(this.rootRef);
+        this.developerConsoleRef.current = null;
+        this.panelComponentRef.current = null;
+        removeClass(this.rootRef, FOCUS_CLASS);
+    }
+
+    renderPanel(
+        panelType: PanelType,
+        dataQueue: Queue<PanelData>,
+        MessageComponent: FC<PanelData>,
+    ) {
+        const { preserveScrollOnUpdate } = this.props;
+        if (!this.isPanelTypeOpen(panelType)) {
+            if (this.selectedButtonRef) removeClass(this.selectedButtonRef, SELECTED_CLASS);
+            this.clearMount(
+                <Panel
+                    ref={this.panelComponentRef}
+                    panelType={panelType}
+                    dataQueue={dataQueue}
+                    MessageComponent={MessageComponent}
+                    preserveScrollOnUpdate={preserveScrollOnUpdate}
+                />,
+                this.developerConsolePanelRef,
+            );
+            this.toggleHideButton();
+            this.panelComponentRef.current!.focus();
+        }
+    }
+
+    renderDeveloperConsole() {
+        this.rootRef.current!.style.display = 'block';
+        const buttonKeys = Object.keys(Buttons) as ButtonActions[];
+
+        this.clearMount(
+            <div
+                className="developer-console-container"
+                ref={this.developerConsoleRef}
+                onKeyDown={this.onKeyDown}
+                tabIndex={0}
+            >
+                <div className="developer-console-panel" ref={this.developerConsolePanelRef} />
+                <div className="developer-console-controls">
+                    <div className="developer-console-control-items">
+                        {map(buttonKeys, (buttonKey: ButtonActions) => {
+                            const buttonProps = Buttons[buttonKey];
+                            Buttons[buttonKey].ref = createRef<HTMLDivElement>();
+                            return (<ControlButton {...buttonProps} />);
+                        })}
+                    </div>
+                    <div className="developer-console-control-legend">
+                        <div id="item-focus" className="control-item">
+                            <span className="control-item-button">Y</span>
+                            <span className="control-item-action">Focus</span>
+                        </div>
+                        <div id="item-clear" className="control-item">
+                            <span className="control-item-button">R</span>
+                            <span className="control-item-action">Clear</span>
+                        </div>
+                    </div>
+                </div>
+            </div>,
+            this.rootRef,
+        );
+    }
+
+    render() {
+        return (
+            <div
+                ref={this.rootRef}
+                className={`developer-console ${DISPLAY_NONE}`}
+            />
+        );
+    }
+}

package/packages/developer-tools/src/DeveloperConsole/Panel.tsx

@@ -0,0 +1,108 @@
+import { Component, createRef, clearNode, FC } from '@24i/bigscreen-sdk/jsx';
+import { ScrollText } from '@24i/bigscreen-sdk/scroll-text/basic';
+import { map } from '@24i/bigscreen-sdk/perf-utils/array';
+import { PanelType, PanelData } from './types';
+import { Queue } from './helpers';
+
+type Props = {
+    preserveScrollOnUpdate?: boolean;
+    panelType: PanelType;
+    dataQueue: Queue<PanelData>;
+    MessageComponent: FC<PanelData>;
+};
+
+export class Panel extends Component<Props> {
+    panelRef = createRef<HTMLDivElement>();
+
+    scrollTextRef = createRef<ScrollText>();
+
+    panelContentRef = createRef<HTMLDivElement>();
+
+    componentDidMount() {
+        this.updateScrollPosition(true);
+    }
+
+    getPanelType() {
+        const { panelType } = this.props;
+        return panelType;
+    }
+
+    private getMessageElements() {
+        return this.panelContentRef.current!.children;
+    }
+
+    private removeFirstChildMessage() {
+        const messageElements = this.getMessageElements();
+        const messageElement = messageElements[0];
+        const elementHeight = messageElement.clientHeight;
+        this.panelContentRef.current!.removeChild(messageElement);
+        if (this.shouldScrollOnRemove()) {
+            const { scrollOffsetPx } = this.scrollTextRef.current!;
+            this.scrollTextRef.current!.scrollToPx(scrollOffsetPx - elementHeight);
+        }
+    }
+
+    private shouldScrollOnRemove() {
+        const { preserveScrollOnUpdate } = this.props;
+        return preserveScrollOnUpdate
+            && !this.scrollTextRef.current!.isAtEnd()
+            && !this.scrollTextRef.current!.isAtBeginning();
+    }
+
+    private manageNumberOfPanelMessages() {
+        const { dataQueue } = this.props;
+        const capacity = dataQueue.getCapacity();
+        const numberOfMessages = this.getMessageElements().length;
+        if (numberOfMessages + 1 > capacity) {
+            this.removeFirstChildMessage();
+        }
+    }
+
+    private updateScrollPosition(forceScroll = false) {
+        const { preserveScrollOnUpdate } = this.props;
+        const { scrollLimitPx } = this.scrollTextRef.current!;
+        if (forceScroll || !preserveScrollOnUpdate || this.scrollTextRef.current!.isAtEnd()) {
+            this.scrollTextRef.current!.scrollToPx(scrollLimitPx);
+        }
+    }
+
+    focus() {
+        this.scrollTextRef.current!.focus();
+    }
+
+    appendMessage(data: PanelData) {
+        const { MessageComponent, dataQueue } = this.props;
+        dataQueue.enqueue(data);
+        this.manageNumberOfPanelMessages();
+        this.appendMount(<MessageComponent {...data} />, this.panelContentRef);
+        this.scrollTextRef.current!.updateScrollLimit();
+        this.updateScrollPosition();
+    }
+
+    clear() {
+        const { dataQueue } = this.props;
+        dataQueue.clear();
+        clearNode(this.panelContentRef);
+        this.scrollTextRef.current!.updateScrollLimit();
+        this.scrollTextRef.current!.scrollToPx(0);
+    }
+
+    render() {
+        const { dataQueue, MessageComponent } = this.props;
+        const data = dataQueue.getData();
+
+        return (
+            <div className="panel" ref={this.panelRef}>
+                <ScrollText className="scroller" scrollStepPx={20} ref={this.scrollTextRef}>
+                    <div className="content" ref={this.panelContentRef}>
+                        {
+                            data.length
+                                ? map(data, (panelData) => <MessageComponent {...panelData} />)
+                                : ''
+                        }
+                    </div>
+                </ScrollText>
+            </div>
+        );
+    }
+}

package/packages/developer-tools/src/DeveloperConsole/PanelMessage.tsx

@@ -0,0 +1,33 @@
+import { FC } from '@24i/bigscreen-sdk/jsx';
+import { map } from '@24i/bigscreen-sdk/perf-utils/array';
+import { formatTimeToHMS, stringifyObjectData, getStatusCodeClass } from './utils';
+import { ConsoleData, NetworkData } from './types';
+
+export const ConsoleMessage: FC<ConsoleData> = ({ timestamp, level, args }: ConsoleData) => {
+    const formattedTime = formatTimeToHMS(timestamp);
+    const argsArray = args ? Array.prototype.slice.apply(args) : [];
+    const outputLine = map(argsArray, stringifyObjectData);
+    const formattedMessage = outputLine.join(' ');
+    const message = `[${formattedTime}] ${formattedMessage}`;
+
+    return (
+        <div className={`log-message console-message ${level}`}>{message}</div>
+    );
+};
+
+export const NetworkMessage: FC<NetworkData> = ({
+    timestamp, method, url, statusCode,
+}: NetworkData) => {
+    const formattedTime = formatTimeToHMS(timestamp);
+
+    const statusCodeClass = getStatusCodeClass(statusCode);
+
+    return (
+        <div className="log-message network-message">
+            <span className="time">{`[${formattedTime}] `}</span>
+            <span className="method">{method}</span>
+            <span className="url">{url}</span>
+            <span className={`status-code ${statusCodeClass}`}>{`[${statusCode}]`}</span>
+        </div>
+    );
+};

package/packages/developer-tools/src/DeveloperConsole/helpers/Queue.ts

@@ -0,0 +1,38 @@
+export class Queue<T> {
+    private storage: T[] = [];
+
+    constructor(
+        private readonly storageCapacity = Infinity,
+    ) {}
+
+    enqueue(item: T) {
+        if (this.isFull()) {
+            this.dequeue();
+        }
+        this.storage.push(item);
+    }
+
+    dequeue() {
+        this.storage.shift();
+    }
+
+    getSize() {
+        return this.storage.length;
+    }
+
+    getCapacity() {
+        return this.storageCapacity;
+    }
+
+    isFull() {
+        return this.storage.length >= this.storageCapacity;
+    }
+
+    getData() {
+        return this.storage;
+    }
+
+    clear() {
+        this.storage = [];
+    }
+}

package/packages/developer-tools/src/DeveloperConsole/helpers/index.ts

@@ -0,0 +1,2 @@
+export { addInstrument } from './instrumentHandler';
+export { Queue } from './Queue';