@24i/bigscreen-sdk 1.0.4 → 1.0.5-4.alpha-2832

package/packages/utils/src/elementUtils.ts

@@ -4,6 +4,12 @@ import { SCREEN_WIDTH } from './sizes';
 
 const SAFE_TIMEOUT = 100;
 
+/**
+ * Test if the element (or element in the reference) is wrapped visible. This means that the
+ * element does not have `display: none` or `visibility: hidden`.
+ * @param elementOrReference DOM element or reference to element on which we test wrapping
+ * @returns true if element is visible
+ */
 export const isElementVisible = (
     elementOrReference: HTMLElement | Reference<HTMLElement>,
 ) => {
@@ -13,10 +19,18 @@ export const isElementVisible = (
     return style.display !== 'none' && style.visibility !== 'hidden';
 };
 
+/**
+ * Test if the element (or element in the reference) is wrapped fully visible. This means that the
+ * element does not have `display: none` or `visibility: hidden` and exists
+ * inside visible DOM tree, which exists in the document.body.
+ * @param elementOrReference DOM element or reference to element on which we test wrapping
+ * @returns true if element is visible
+ */
 export const isElementFullyVisible = (
     elementOrReference: HTMLElement | Reference<HTMLElement>,
 ) => {
     const element = unwrapReference(elementOrReference);
+    if (!element) return false;
     if (isElementVisible(element)) {
         let parent = element.parentElement;
         while (parent) {
@@ -33,6 +47,16 @@ export const isElementFullyVisible = (
     return false;
 };
 
+/**
+ * Test if the element (or element in the reference) is wrapped by another element.
+ * @param elementOrReference DOM element or reference to element on which we test wrapping
+ * @param wrapperElementOrReferenceOrCondition wrapper element or certain condition (utils is
+ * running upwards in the DOM tree from first element till some element has some specific condition)
+ * @param includesElementItself if true, test will check also provided element itself.
+ * This is useful in some cases when we need to include also provided element as wrapper
+ * in one run of the util.
+ * @returns true if the element is wrapped by provided wrapper
+ */
 export const isElementWrappedBy = (
     elementOrReference: HTMLElement | Reference<HTMLElement>,
     wrapperElementOrReferenceOrCondition:
@@ -40,6 +64,7 @@ export const isElementWrappedBy = (
     includesElementItself = false,
 ) => {
     const element = unwrapReference(elementOrReference);
+    if (!element) return false;
     let currentParent = includesElementItself ? element : element.parentElement;
     let wrapperElement: HTMLElement | null = null;
     let condition: ((currentWrapper: HTMLElement) => boolean) | null = null;

package/packages/utils/src/forceReflow.ts

@@ -0,0 +1,14 @@
+import { Reference, unwrapReference } from '@24i/bigscreen-sdk/jsx';
+
+/**
+ * To force a DOM reflow on given DOM element. It can be needed for transitions
+ * or other purposes.
+ * @param elementOrReference DOM element or reference to element on which reflow is called.
+ */
+export const forceReflow = (
+    elementOrReference: HTMLElement | Reference<HTMLElement>,
+) => {
+    const element = unwrapReference(elementOrReference);
+    if (!element) return;
+    void element.offsetHeight; // eslint-disable-line no-void
+};

package/packages/utils/src/index.ts

@@ -6,6 +6,7 @@ export { addClass } from './addClass';
 export { removeClass } from './removeClass';
 export { debounce } from './debounce';
 export { wait } from './wait';
+export { forceReflow } from './forceReflow';
 export { scaledImage } from './scaledImage';
 export { nTimes } from './nTimes';
 export { getDisplayToggler, DISPLAY_NONE } from './displayToggler';
@@ -15,6 +16,7 @@ export {
     isElementVisible,
     isElementFullyVisible,
     isElementWrappedBy,
+    preventDefaultScroll,
 } from './elementUtils';
 export { createInterval, createTimeout, runAsync } from './timers';
 export type { TimedFunction } from './timers';
@@ -33,3 +35,9 @@ export {
 } from './timeConstants';
 export { xhrSend, xhrSendRetry, defaultRetryConfig, mockXhr } from './xhr';
 export type { XhrOptions, XhrResponse, RetryConfig, RSOptions, ShouldRetryParam } from './xhr';
+export {
+    registerKeyPressSimulator,
+    unregisterKeyPressSimulator,
+    dispatchKeyboardEvent,
+    simulateKeyPress,
+} from './keyPress';

package/packages/utils/src/keyPress/index.ts

@@ -0,0 +1,6 @@
+export {
+    registerKeyPressSimulator,
+    unregisterKeyPressSimulator,
+    dispatchKeyboardEvent,
+} from './keyPressSimulator';
+export { simulateKeyPress } from './simulateKeyPress';

package/packages/utils/src/keyPress/keyPressSimulator.ts

@@ -0,0 +1,74 @@
+import { Key } from '@24i/bigscreen-sdk/driver-base/keymap';
+import { stopEvent } from '@24i/bigscreen-sdk/utils';
+
+let keysPressed: Record<number, boolean>;
+
+interface CustomKeyboardEvent extends KeyboardEvent {
+    skipKeyPressSimulation: boolean;
+}
+
+const shouldSkipEvent = (e: KeyboardEvent) => (
+    Boolean((e as CustomKeyboardEvent).skipKeyPressSimulation)
+);
+
+const onKeyDown = (e: KeyboardEvent) => {
+    if (shouldSkipEvent(e)) return;
+    const { keyCode } = e;
+    if (keysPressed[keyCode] === true) {
+        console.warn(`Key ${e.code} (${e.keyCode}) is skipped by the key press simulator`);
+        stopEvent(e);
+    } else if (typeof keysPressed[keyCode] !== 'undefined') {
+        keysPressed[keyCode] = true;
+    }
+};
+
+const onKeyUp = (e: KeyboardEvent) => {
+    const { keyCode } = e;
+    if (keysPressed[keyCode] === true) keysPressed[keyCode] = false;
+};
+
+/**
+ * Modifies `keydown` event behavior to similar to `keypress` and causes
+ * triggering `keydown` event only once before the key is released. This is
+ * because `keypress` event is deprecated and it is not implemented with the same
+ * behavior on all platforms. This functionality is applied across the board for
+ * all provided keys globally. To use in one specific handler only
+ * use `simulateKeyPress` util.
+ * @param keys array with keys to behave as keypress
+ */
+export const registerKeyPressSimulator = (keys: Key[]) => {
+    keysPressed = {};
+    keys.forEach((key) => {
+        keysPressed[key.keyCode] = false;
+    });
+    window.document.addEventListener('keydown', onKeyDown, true);
+    window.document.addEventListener('keyup', onKeyUp, true);
+};
+
+/**
+ * Unregister key press simulator events, turn off the functionality.
+ */
+export const unregisterKeyPressSimulator = () => {
+    window.document.removeEventListener('keydown', onKeyDown, true);
+    window.document.removeEventListener('keyup', onKeyUp, true);
+};
+
+/**
+ * This should be the main method for manually dispatching keyboard events when the
+ * key press simulator is registered in the app. When parameter `skipKeyPressSimulation`
+ * is `true`, those event's won't be caught by the key press simulator and
+ * are no longer under it's influence. Key press simulator should work only with events
+ * generated from input device.
+ * @param target element target to dispatch event
+ * @param event dispatching event
+ * @param skipKeyPressSimulation default value is `true`, when false, the event
+ * will be caught by the simulator and other dispatched events will be stopped.
+ */
+export const dispatchKeyboardEvent = (
+    target: HTMLElement,
+    event: KeyboardEvent,
+    skipKeyPressSimulation = true,
+) => {
+    (event as CustomKeyboardEvent).skipKeyPressSimulation = skipKeyPressSimulation;
+    target.dispatchEvent(event);
+};

package/packages/utils/src/keyPress/simulateKeyPress.ts

@@ -0,0 +1,25 @@
+const NO_KEY = -1;
+
+/**
+ * Returns a new `keydown` handler wrapped with the simulated key press functionality.
+ * Modifies `keydown` event behavior to similar to `keypress` and causes triggering keydown
+ * event only once before the key is released. This is because `keypress` event is deprecated
+ * and it is not implemented with the same behavior on all platforms. Apply this globally for
+ * the specific keys by using `keyPressSimulator` util.
+ * @param onKeyDown original handler for keydown event
+ * @returns decorated handler with key press functionality
+ */
+export const simulateKeyPress = (onKeyDown: (e: KeyboardEvent) => void) => {
+    let keyPressed = NO_KEY;
+    const onKeyUp = (e: KeyboardEvent) => {
+        if (e.keyCode !== keyPressed) return;
+        window.document.removeEventListener('keyup', onKeyUp);
+        keyPressed = NO_KEY;
+    };
+    return (e: KeyboardEvent) => {
+        if (keyPressed !== NO_KEY) return;
+        keyPressed = e.keyCode;
+        window.document.addEventListener('keyup', onKeyUp);
+        onKeyDown(e);
+    };
+};

package/packages/utils/src/scaledImage.ts

@@ -1,15 +1,18 @@
-export const DEFAULT_SCALING_ENDPOINT = 'http://imageresize.24i.com';
-
 type Dimensions = {
     height: number,
     width: number,
     fit?: 'cover' | 'contain' | 'inside',
 };
 
+const getEndpointProtocol = (protocol: string) => (protocol === 'https:' ? 'https:' : 'http:');
+
 const attention = (fit: Dimensions['fit']) => (
     fit === 'cover' ? '&a=attention' : ''
 );
 
+// eslint-disable-next-line max-len
+export const DEFAULT_SCALING_ENDPOINT = `${getEndpointProtocol(window.location.protocol)}//imageresize.24i.com`;
+
 const scaledImage = (
     url: string,
     { height, width, fit = 'cover' }: Dimensions,
@@ -18,4 +21,4 @@ const scaledImage = (
     `${scalingEndpoint}?url=${url}&h=${height}&w=${width}&fit=${fit}${attention(fit)}`
 );
 
-export { scaledImage, Dimensions };
+export { scaledImage, Dimensions, getEndpointProtocol };

package/packages/utils/src/textUtils.ts

@@ -1,25 +1,57 @@
 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;
+    }
+    const { visibility } = row.style;
+    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);
+                const charToAdd = originalTextContent.charAt(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 = visibility;
 };
+
+export const trimWithLeadingEllipsis = (
+    row: HTMLSpanElement | HTMLDivElement,
+    requestedNumberOfLines: number,
+    ellipsis = ELLIPSIS,
+) => trimWithEllipsis(row, requestedNumberOfLines, ellipsis, false);
+
+export const trimWithEndingEllipsis = (
+    row: HTMLSpanElement | HTMLDivElement,
+    requestedNumberOfLines: number,
+    ellipsis = ELLIPSIS,
+) => trimWithEllipsis(row, requestedNumberOfLines, ellipsis, true);

package/packages/utils/src/wait.ts

@@ -1 +1,3 @@
-export const wait = (waitMs: number) => new Promise((r) => setTimeout(r, waitMs));
+export const wait = (waitMs: number) => new Promise((r) => {
+    setTimeout(r, waitMs);
+});

package/packages/utils/src/xhr/xhrSend.ts

@@ -84,7 +84,9 @@ function xhrSend(url: string, options: Partial<XhrOptions> = {}): Promise<XhrRes
         const xhr = new XMLHttpRequest();
 
         function onLoad() {
-            const dataText = 'response' in xhr ? xhr.response : xhr.responseText;
+            const dataText = 'response' in (xhr as XMLHttpRequest)
+                ? xhr.response
+                : xhr.responseText;
             const dataJson = parseJson(dataText);
             const status = xhr.status === undefined ? HttpStatusCode.OK : xhr.status;
             const statusText = xhr.statusText === undefined ? 'OK' : xhr.statusText;

package/packages/utils/src/xhr/xhrSendRetry.ts

@@ -68,7 +68,9 @@ Promise<XhrResponse | TypeError> {
     const shouldRetryFn = config.shouldRetry || defaultRetryConfig.shouldRetry;
     const shouldRetry = shouldRetryFn({ options, response, error });
     if (shouldRetry) {
-        await new Promise((res) => window.setTimeout(res, config.retryDelay));
+        await new Promise((res) => {
+            window.setTimeout(res, config.retryDelay);
+        });
         config.currentRetryAttempt += 1;
         return xhrSendRetry(url, options);
     }

package/packages/zapping/src/ChannelZapping.ts

@@ -99,6 +99,15 @@ export class ChannelZapping<T extends Asset = Asset> {
         }
     }
 
+    /**
+     * Updates the current index of channel zapping.
+     * @param channels the array of all channels
+     * @param currentChannel currently active channel
+     */
+    onUpdate(channels: T[], currentChannel: T) {
+        this.currentIndex = getCurrentChannelIndex(channels, currentChannel);
+    }
+
     /**
      * Changes to the next/previous channel.
      * @param direction direction of the change

package/packages/zapping/src/Zapping.tsx

@@ -96,10 +96,20 @@ export class Zapping<T extends Asset = Asset> extends Component<Props<T>> {
         this.channelZapping!.onKeyDown(event);
     };
 
+    /**
+     * Updates channel zapping with new data.
+     * @param channels the array of all channels
+     * @param currentChannel currently active channel
+     */
+    onUpdate(channels: T[], currentChannel: T) {
+        this.channelZapping!.onUpdate(channels, currentChannel);
+    }
+
     render() {
         const { numericZapper } = this.props;
         return numericZapper
             ? <NumericZapper {...numericZapper} ref={zapperServiceRef} />
+            // eslint-disable-next-line react/jsx-no-useless-fragment
             : <></>;
     }
 }

package/utils/release/release.ts

@@ -0,0 +1,156 @@
+import { ok } from 'assert';
+import { execSync, ExecSyncOptions } from 'child_process';
+
+const NO_VERIFY_PARAM = '--no-verify';
+const branchNames = {
+    dev: 'development',
+    main: 'master',
+    release: 'release',
+};
+
+const cmdSync = (command: string, options?: ExecSyncOptions) => execSync(command, options);
+const cmdSyncInheritOut = (command: string) => cmdSync(command, { stdio: 'inherit' });
+const cmdSyncPipeOut = (command: string) => cmdSync(command, { stdio: 'pipe' });
+const cmdSyncTrimOut = (command: string) => cmdSync(command).toString().trim();
+
+const splitByNewLine = (string = '') => string.split(/\r?\n/);
+
+const statusList = () => {
+    const gitCmd = 'git status --porcelain';
+    const outputString = cmdSyncTrimOut(gitCmd);
+
+    if (!outputString) return [];
+    const handleMultipleWhitespaces = (rowString: string) => {
+        const spaceChar = ' ';
+        const parts = rowString.split(spaceChar);
+        return parts.filter(Boolean).join(spaceChar);
+    };
+
+    return splitByNewLine(outputString).map(handleMultipleWhitespaces);
+};
+const createBranch = (branchName: string) => cmdSyncPipeOut(`git branch ${branchName}`);
+const checkout = (branchName: string) => cmdSyncPipeOut(`git checkout ${branchName}`);
+const addAll = () => cmdSyncPipeOut('git add --all');
+
+const commit = (commitMessage: string, noVerify = false) => {
+    const maybeNoVerifyParam = noVerify ? NO_VERIFY_PARAM : '';
+    return cmdSyncPipeOut(`git commit -m "${commitMessage}" ${maybeNoVerifyParam}`.trimEnd());
+};
+
+const push = (branchName: string, noVerify = false) => {
+    const maybeNoVerifyParam = noVerify ? NO_VERIFY_PARAM : '';
+    const cmd = `git push --set-upstream origin ${branchName} ${maybeNoVerifyParam}`.trimEnd();
+    return cmdSyncPipeOut(cmd);
+};
+
+const pushTag = (version: string, noVerify = false) => {
+    const maybeNoVerifyParam = noVerify ? NO_VERIFY_PARAM : '';
+    const cmd = `git push origin v${version} ${maybeNoVerifyParam}`.trimEnd();
+    return cmdSyncPipeOut(cmd);
+};
+
+const assertEmptyStatusList = () => {
+    ok(statusList().length === 0, 'An empty GIT stage is expected!');
+};
+
+const getCurrentBranchName = () => cmdSyncTrimOut('git branch --show-current');
+
+const remoteBranchExists = (expectedBranchName: string) => {
+    const gitCmd = `git ls-remote --heads origin ${expectedBranchName}`;
+    const output = cmdSyncTrimOut(gitCmd);
+    return Boolean(output);
+};
+
+// only for GitHub
+const pullRequest = (fromBranch: string, toBranch: string, prTitle: string) => {
+    const cmdTool = 'hub';
+    const installDocUrl = 'https://github.com/github/hub#installation';
+    const errorMsg = `${cmdTool} is not installed! See ${installDocUrl}\n`;
+
+    try {
+        const toolPath = cmdSyncTrimOut(`${cmdTool} --version`);
+        ok(toolPath, errorMsg);
+    } catch (error) {
+        throw new Error(errorMsg);
+    }
+
+    const cmd = `${cmdTool} pull-request -m "${prTitle}" --head ${fromBranch} --base ${toBranch}`;
+    cmdSyncInheritOut(cmd);
+};
+
+const assertCurrentBranch = (expectedBranchName: string) => {
+    const currentGitBranchName = getCurrentBranchName();
+    // eslint-disable-next-line max-len
+    const errorMsg = `The ${expectedBranchName} branch is expected to be active, not "${currentGitBranchName}"`;
+    ok(currentGitBranchName === expectedBranchName, errorMsg);
+};
+
+const bumpVersion = (version: string | 'major' | 'minor' | 'patch') => {
+    // it bumps version, creates commit and GIT tag
+    execSync(`npm version ${version}`, { stdio: 'inherit' });
+};
+
+const getNewReleaseBranchName = () => {
+    const date = new Date();
+    const yyyy = date.getFullYear();
+    const mm = String(date.getMonth() + 1).padStart(2, '0');
+    const dd = String(date.getDate()).padStart(2, '0');
+    let bod = 0;
+    const dateString = `${yyyy}-${mm}-${dd}`;
+    while (true) {
+        bod += 1;
+        const bodString = String(bod).padStart(2, '0');
+        const branchName = `${branchNames.release}/${dateString}-${bodString}`;
+        if (!remoteBranchExists(branchName)) {
+            return branchName;
+        }
+    }
+};
+
+/**
+ * Release process.
+ * @param versionType Version type one of 'major', 'minor', 'patch' or specific
+ * version like '0.0.2'.
+ */
+const release = (versionType: string | 'major' | 'minor' | 'patch') => {
+    console.log(`Start release with version: ${versionType}`);
+    assertCurrentBranch(branchNames.dev);
+    assertEmptyStatusList();
+    const newReleaseBranchName = getNewReleaseBranchName();
+
+    console.log(`Creating "${newReleaseBranchName}" branch ...`);
+    createBranch(newReleaseBranchName);
+    checkout(newReleaseBranchName);
+
+    console.log(`Bumping version with "${versionType}" ...`);
+    bumpVersion(versionType);
+    const version = cmdSyncTrimOut('npm pkg get version').replace(/"/g, '');
+    ok(version, 'Oops, cannot get current version from package.json');
+
+    console.log(`Publishing package version: ${version} ...`);
+    cmdSyncInheritOut('npm publish');
+
+    console.log(`Generating changelog: ${version} ...`);
+    cmdSyncInheritOut('npm run generate-changelog');
+    addAll(); // add version changes (changelog) into a git stage
+
+    console.log('Creating commit with changed version and changelog ...');
+    commit('chore(CHANGELOG): generated changelog', true);
+
+    console.log(`Pushing ${newReleaseBranchName} branch ...`);
+    push(newReleaseBranchName, true);
+
+    console.log(`Pushing ${version} tag ...`);
+    pushTag(version, true);
+
+    const prTitle = `Release: ${newReleaseBranchName.split('/')[1]}`;
+    // eslint-disable-next-line max-len
+    console.log(`Creating Pull Request from ${newReleaseBranchName} branch to ${branchNames.main} branch...`);
+    console.log(`Applied PR title: "${prTitle}"`);
+    pullRequest(newReleaseBranchName, branchNames.main, prTitle);
+
+    console.log('Done!');
+};
+
+const version = process.argv[2] || 'patch'; // 'major' | 'minor' | 'patch'
+release(version);

package/packages/driver-tizen/src/types.ts

@@ -1,14 +0,0 @@
-export {
-    ITizen,
-    SystemInfo,
-    TVAudioControl,
-    TVInputDevice,
-    TizenApplication,
-    WebSetting,
-} from './ITizen';
-export {
-    AppCommon,
-    IWebapis,
-    Network,
-    ProductInfo,
-} from './IWebapis';