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

package/packages/router/src/Router.tsx

@@ -10,6 +10,7 @@ type Props = {
     children: JSX.Element[],
     defaultPath?: string,
     detachInactiveRoutes?: boolean,
+    canBack?: (event: KeyboardEvent) => boolean,
 };
 
 type RoutePath = {
@@ -28,9 +29,12 @@ const filterNulls = (allChildren: (JSX.Element | null)[]) => (
 export class Router extends Component<Props> {
     paths: { [key: string]: RoutePath } = {};
 
+    routerDomRef = createRef<HTMLDivElement>();
+
     static defaultProps = {
         defaultPath: '/',
         detachInactiveRoutes: true,
+        canBack: () => true,
     };
 
     declare props: DeclareProps<Props, typeof Router.defaultProps>;
@@ -38,12 +42,14 @@ export class Router extends Component<Props> {
     constructor(props: Props) {
         super(props);
         routerRef.current = this;
-        this.createRefs();
+        const { children } = this.props;
+        this.createRefs(children);
     }
 
     componentDidMount() {
         window.document.addEventListener('keydown', this.onKeyDown, false);
         window.addEventListener('hashchange', this.onHashChange, false);
+        this.hideAllRoutes();
         this.goToDefaultPath();
     }
 
@@ -57,7 +63,8 @@ export class Router extends Component<Props> {
     };
 
     onKeyDown = (event: KeyboardEvent) => {
-        if (history.length > 1 && device.isBackOrEscape(event)) {
+        const { canBack } = this.props;
+        if (history.length > 1 && device.isBackOrEscape(event) && canBack(event)) {
             back();
             stopEventImmediately(event);
         }
@@ -91,6 +98,8 @@ export class Router extends Component<Props> {
         return activeRoutePath?.ref.current || null;
     }
 
+    // TODO: refactor to reduce complexity
+    // eslint-disable-next-line sonarjs/cognitive-complexity
     switchRoutes(
         routePathToHide: RoutePath | null,
         routePathToShow: RoutePath | null,
@@ -104,18 +113,31 @@ export class Router extends Component<Props> {
             } else if (routePathToShow) {
                 routeToHide!.hide();
                 routePathToHide.isVisible = false;
-                if (detachInactiveRoutes) routeToHide!.replace(routeToShow!);
+                if (detachInactiveRoutes) {
+                    routeToHide!.replace(routeToShow!);
+                } else {
+                    routeToHide!.hideRoute();
+                    routeToShow!.showRoute();
+                }
                 routeToShow!.show();
                 routePathToShow.isVisible = true;
                 return;
             } else {
                 routeToHide!.hide();
                 routePathToHide.isVisible = false;
-                if (detachInactiveRoutes) routeToHide!.detach();
+                if (detachInactiveRoutes) {
+                    routeToHide!.detach();
+                } else {
+                    routeToHide!.hideRoute();
+                }
             }
         }
         if (routePathToShow) {
-            if (detachInactiveRoutes) routeToShow!.attach();
+            if (detachInactiveRoutes) {
+                routeToShow!.attach();
+            } else {
+                routeToShow!.showRoute();
+            }
             routeToShow!.show();
             routePathToShow.isVisible = true;
         }
@@ -125,11 +147,10 @@ export class Router extends Component<Props> {
         this.getActiveRoute()?.focus();
     }
 
-    createRefs() {
-        const { children } = this.props;
-        forEach(children, (child: JSX.Element) => {
-            if (child.type === Route) {
-                const { path } = child.props;
+    createRefs(routes: JSX.Element[]) {
+        forEach(routes, (route: JSX.Element) => {
+            if (route.type === Route) {
+                const { path } = route.props;
                 const { regexpPath, paramNames } = pathToRegExp(path);
                 this.paths[path] = {
                     ref: createRef<Route>(),
@@ -151,9 +172,28 @@ export class Router extends Component<Props> {
         }
     }
 
-    render() {
-        const { children, detachInactiveRoutes } = this.props;
-        return filterNulls(map(children, (child: JSX.Element) => {
+    hideAllRoutes() {
+        const { detachInactiveRoutes } = this.props;
+        forEach(Object.keys(this.paths), (key: string) => {
+            const route = this.paths[key];
+            if (!route.isVisible) {
+                if (detachInactiveRoutes) {
+                    route.ref.current!.detach();
+                } else {
+                    route.ref.current!.hideRoute();
+                }
+            }
+        });
+    }
+
+    appendRoutes(routes: JSX.Element[]) {
+        this.createRefs(routes);
+        this.appendMount(this.renderRoutes(routes), this.routerDomRef);
+        this.hideAllRoutes();
+    }
+
+    renderRoutes(routes: JSX.Element[]) {
+        return filterNulls(map(routes, (child: JSX.Element) => {
             if (child.type === Route) {
                 const { path, Component: RouteComponent } = child.props;
                 const route = this.paths[path];
@@ -161,14 +201,23 @@ export class Router extends Component<Props> {
                     <Route
                         ref={route.ref}
                         path={path}
+                        domParent={this.routerDomRef}
                         regexpPath={route.regexpPath}
                         Component={RouteComponent}
                         paramNames={route.paramNames}
-                        isDetachable={detachInactiveRoutes}
                     />
                 );
             }
             return null;
         }));
     }
+
+    render() {
+        const { children } = this.props;
+        return (
+            <div ref={this.routerDomRef} className="router">
+                {this.renderRoutes(children)}
+            </div>
+        );
+    }
 }

package/packages/router/src/history.ts

@@ -2,8 +2,10 @@ import { NavigationConfig } from './types';
 
 export const history: string[] = [];
 
+const pathWithHash = (path:string) => `#${path}`;
+
 const navigate = (path: string) => {
-    window.location.href = `#${path}`;
+    window.location.href = pathWithHash(path);
 };
 
 export const go = (path: string, { skipHistory, replaceHistory }: NavigationConfig = {}) => {
@@ -22,3 +24,8 @@ export const back = () => {
 export const clearHistory = () => {
     history.length = 0;
 };
+
+export const replaceState = (path: string) => {
+    history[history.length - 1] = path;
+    window.history.replaceState(null, '', pathWithHash(path));
+};

package/packages/router/src/index.ts

@@ -1,6 +1,6 @@
 export { Router } from './Router';
 export { Route } from './Route';
 export type { IRoute } from './types';
-export { history, go, back, clearHistory } from './history';
+export { history, go, back, clearHistory, replaceState } from './history';
 export { focusActiveRoute } from './focusActiveRoute';
 export { fromSafeUrl, toSafeUrl } from './utils';

package/packages/router/src/utils.ts

@@ -6,14 +6,16 @@ export const isPathVisible = (hash: string, regexpPath?: RegExp) => (
 
 export const getCurrentHash = () => window.location.href.split('#')[1] || '';
 
-const PARAM = '([a-zA-Z0-9-=.:%_()\\[\\]{}]+)';
+// eslint-disable-next-line no-useless-escape
+const PARAM_REGEX = /([^/]+)/;
+export const PARAM_REGEX_STR = PARAM_REGEX.source;
 
 export const pathToRegExp = (path: string) => {
     const regexpParts: string[] = [];
     const paramNames: string[] = [];
     forEach(path.split('/'), (pathPart) => {
         if (pathPart.indexOf(':') === 0) {
-            regexpParts.push(PARAM);
+            regexpParts.push(PARAM_REGEX_STR);
             paramNames.push(pathPart.replace(':', ''));
         } else regexpParts.push(pathPart);
     });
@@ -23,10 +25,13 @@ export const pathToRegExp = (path: string) => {
     };
 };
 
+const toUrlSafeBase64 = (param: string) => btoa(param).replace('/', '_');
+const fromUrlSafeBase64 = (base64: string) => atob(base64.replace('_', '/'));
+
 export const toSafeUrl = (param: string) => (
-    btoa(unescape(encodeURIComponent(param)))
+    toUrlSafeBase64(unescape(encodeURIComponent(param)))
 );
 
 export const fromSafeUrl = (base64: string) => (
-    decodeURIComponent(escape(atob(base64)))
+    decodeURIComponent(escape(fromUrlSafeBase64(base64)))
 );

package/packages/sass-utils/src/linear-gradient.scss

@@ -1,3 +1,8 @@
+@use 'sass:list';
+@use 'sass:math';
+@use 'sass:meta';
+@use 'sass:map';
+
 @function legacy-direction($value) {
     @if is-direction($value) == false {
         @error "Cannot convert `#{$value}` to legacy syntax because it doesn't seem to be a direction.";
@@ -16,18 +21,18 @@
         to left top     : right bottom,
         to top left     : bottom right
     );
-    @if map-has-key($conversion-map, $value) {
-        @return map-get($conversion-map, $value);
+    @if map.has-key($conversion-map, $value) {
+        @return map.get($conversion-map, $value);
     }
     @return 90deg - $value;
 }
 
 @function is-direction($value) {
-    $is-keyword: index((
+    $is-keyword: list.index((
         to top, to top right, to right top, to right, to bottom right, to right bottom,
         to bottom, to bottom left, to left bottom, to left, to left top, to top left,
     ), $value);
-    $is-angle: type-of($value) == 'number' and index('deg' 'grad' 'turn' 'rad', unit($value));
+    $is-angle: meta.type-of($value) == 'number' and list.index('deg' 'grad' 'turn' 'rad', math.unit($value));
 
     @return $is-keyword or $is-angle;
 }

package/packages/sass-utils/src/scale.1080.scss

@@ -1,3 +1,5 @@
+@use 'sass:math';
+
 @function scale($value) {
-    @return round($number: $value);
+    @return math.round($number: $value);
 }

package/packages/sass-utils/src/scale.720.scss

@@ -1,5 +1,5 @@
 @use 'sass:math';
 
 @function scale($value) {
-    @return round($number: math.div($value, 1.5));
+    @return math.round($number: math.div($value, 1.5));
 }

package/packages/time/README.md

@@ -52,7 +52,7 @@ await time.init({
 ```
 
 ### `getCurrentTime(): Date`
-It returns date object having local time set to server current time.
+It returns date object having UTC time set to local time.
 
 ### `getCurrentUnixTime(): number`
 It returns UNIX time in milliseconds of server UTC time.
@@ -60,6 +60,9 @@ It returns UNIX time in milliseconds of server UTC time.
 ### `getTimezoneOffset(): number`
 It returns timezone offset in minutes, for UTC+1 (Germany) is 60.
 
+### `getTimezoneOffsetMs(): number`
+It returns timezone offset in milliseconds, for UTC+1 (Germany) is 3600000.
+
 ### `initStatus: InitStatus`
 To check what time you are using, just check the `initStatus` property.
 

package/packages/time/src/Time.ts

@@ -1,6 +1,6 @@
 import { createInterval } from '@24i/bigscreen-sdk/utils/timers';
 import { parseIsoDate, getDayStart, getDayEnd } from './utils';
-import { InitStatus, ErrorCode } from './constants';
+import { InitStatus, ErrorCode, MS_PER_MINUTE } from './constants';
 import { Config, TimeServiceResp } from './types';
 
 /**
@@ -22,6 +22,9 @@ class Time {
     /** The difference in milliseconds between System Date and Server Date */
     offsetMs = 0;
 
+    /** The difference Date object internally adds to timestamp if not asking for UTC time. */
+    deviceOffset = new Date().getTimezoneOffset() * MS_PER_MINUTE;
+
     /** Timer for periodical time update */
     syncInterval = createInterval();
 
@@ -113,7 +116,7 @@ class Time {
         this.currentTime = currentTime;
         this.serverTime = date;
         this.serverUnixTime = unixTime;
-        this.offsetMs = this.currentTime.getTime() - this.serverTime.getTime();
+        this.offsetMs = this.currentTime.getTime() - this.serverTime.getTime() + this.deviceOffset;
         this.timezoneOffset = timezoneOffset;
     }
 
@@ -168,6 +171,15 @@ class Time {
         return this.timezoneOffset;
     }
 
+    /**
+     * Returns the timezone offset in milliseconds.
+     *
+     * @returns Timezone offset in milliseconds, e.g. for UTC+1 (Germany) is 3600000.
+     */
+    getTimezoneOffsetMs() {
+        return this.timezoneOffset * MS_PER_MINUTE;
+    }
+
     /**
      * Returns offset (milliseconds) between System and Server Date object.
      *
@@ -192,24 +204,34 @@ class Time {
     }
 
     /**
-     * Returns current time.
+     * Returns time, which is manipulated, based on the fact, that UI is displaying values in UTC.
      *
-     * @returns Current time.
+     * @returns Current time values as being in UTC zone.
      */
     getCurrentTime() {
         const now = new Date().getTime();
         return new Date(now - this.offsetMs);
     }
 
+    /**
+     * Returns current time.
+     *
+     * @returns Current time.
+     */
+    getCurrentTimeReal() {
+        const nowShifted = this.getCurrentTime().getTime();
+        return new Date(nowShifted + this.deviceOffset);
+    }
+
     /**
      * Returns whether the timestamp belongs to today
      * @param timestamp to check
      * @returns true if the timestamp falls between start and end of today
      */
     isToday(timestamp: number) {
-        const currentTime = this.getCurrentTime();
-        const startOfToday = getDayStart(currentTime);
-        const endOfToday = getDayEnd(currentTime);
+        const currentDate = this.getCurrentTimeReal();
+        const startOfToday = getDayStart(currentDate) - this.deviceOffset; // We must get 00:00 UTC
+        const endOfToday = getDayEnd(currentDate) - this.deviceOffset;
         return startOfToday <= timestamp && timestamp < endOfToday;
     }
 
@@ -219,10 +241,10 @@ class Time {
      * @returns true if the timestamp falls between start and end of tomorrow
      */
     isTomorrow(timestamp: number) {
-        const currentTime = this.getCurrentTime();
-        const startOfTomorrow = getDayEnd(currentTime);
+        const currentDate = this.getCurrentTimeReal();
+        const startOfTomorrow = getDayEnd(currentDate) - this.deviceOffset;
         const tommorow = new Date(startOfTomorrow + 1);
-        const endOfTomorrow = getDayEnd(tommorow);
+        const endOfTomorrow = getDayEnd(tommorow) - this.deviceOffset;
         return startOfTomorrow <= timestamp && timestamp < endOfTomorrow;
     }
 
@@ -232,10 +254,10 @@ class Time {
      * @returns true if the timestamp falls between start and end of yesterday
      */
     isYesterday(timestamp: number) {
-        const currentTime = this.getCurrentTime();
-        const endOfYesterday = getDayStart(currentTime);
+        const currentDate = this.getCurrentTimeReal();
+        const endOfYesterday = getDayStart(currentDate) - this.deviceOffset;
         const yesterday = new Date(endOfYesterday - 1);
-        const startOfYesterday = getDayStart(yesterday);
+        const startOfYesterday = getDayStart(yesterday) - this.deviceOffset;
         return startOfYesterday <= timestamp && timestamp < endOfYesterday;
     }
 }

package/packages/time/src/adapters/24iMediaTimeApi.ts

@@ -0,0 +1,47 @@
+import { HOUR_IN_MS, MINUTE_IN_MS } from '@24i/bigscreen-sdk/utils';
+import * as TwentyFourIMediaTimeApi from '../services/24iMediaTimeApi';
+
+type ParamOptions = TwentyFourIMediaTimeApi.ParamOptions;
+
+const defaultOptions: ParamOptions = {
+    timeoutInMs: 30000,
+    retryConfig: {
+        retry: 2,
+    },
+};
+
+/**
+ * Returns a tring in ISO format followed by +/-hh:mm suffix for timezone offset.
+ * @param resp Time api response.
+ * @returns ISO string with timezone data.
+ */
+const getIsoDateString = (resp: TwentyFourIMediaTimeApi.ServiceDataResponse): string => {
+    let datetime = new Date(resp.timestamp + resp.timezone_offset).toISOString();
+    const offset = resp.timezone_offset / HOUR_IN_MS;
+    if (offset) {
+        const sign = offset > 0 ? '+' : '-';
+        const hours = Math.abs(offset);
+        const minutes = Math.floor((resp.timezone_offset % HOUR_IN_MS) / MINUTE_IN_MS);
+        // eslint-disable-next-line no-magic-numbers, sonarjs/no-nested-template-literals
+        const timeString = `${sign + `0${hours}`.slice(-2)}:${`0${minutes}`.slice(-2)}`;
+        datetime = datetime.replace('Z', timeString);
+    }
+    return datetime;
+};
+
+/**
+ * Wrapper over "TwentyFourIMediaTimeApi.getTime" method requesting the current time
+ * from timekeeping server. Transforms the result to ISO string with timezone offset data
+ * included.
+ *
+ * @param options Options object
+ */
+export const getTime = async (options: ParamOptions = {}) => {
+    const opts = { ...defaultOptions, ...options };
+    const resp = await TwentyFourIMediaTimeApi.getTime(opts);
+
+    if ('timestamp' in resp && 'timezone_offset' in resp && 'in_dst' in resp) {
+        return { datetime: getIsoDateString(resp) };
+    }
+    return null;
+};

package/packages/time/src/constants.ts

@@ -9,5 +9,6 @@ export const ErrorCode = {
     NO_TIME_SERVICE_PROVIDER: 'NO_TIME_SERVICE_PROVIDER',
 };
 
+export const MS_PER_MINUTE = 60000;
 export const MINUTES_PER_HOUR = 60;
 export const HOURS_PER_DAY = 24;

package/packages/time/src/services/24iMediaTimeApi/24iMediaTimeApi.ts

@@ -0,0 +1,43 @@
+/**
+ * Package "24iMediaTimeApi" provides a single function to obtain the current time
+ * adjusted by local timezone and daylight savings time for use in time package,
+ * from 24i time API at https://time.24imedia.tv/
+ */
+import {
+    xhrSendRetry, type RetryConfig, type XhrResponse,
+} from '@24i/bigscreen-sdk/utils/xhr';
+
+const API_URL = 'https://time.24imedia.tv/';
+
+export type Options = {
+    /** The request timeout in milliseconds. The value 0 for no timeout */
+    timeoutInMs: number,
+    /** Retry configuration */
+    retryConfig: RetryConfig,
+};
+export type ParamOptions = Partial<Options>;
+
+export type ServiceDataResponse = {
+    /** Is dailight savings time */
+    in_dst: boolean,
+    /** Current time in GMT, in milliseconds */
+    timestamp: number,
+    /** Timezeone offset in milliseconds */
+    timezone_offset: number,
+};
+
+/**
+ * Request the current time based on public IP of request.
+ *
+ * @param options Options object
+ */
+export async function getTime(options?: ParamOptions): Promise<ServiceDataResponse> {
+    try {
+        const resp = (await xhrSendRetry(API_URL, options)) as XhrResponse;
+        const data: any = resp.dataJson || {};
+        return data as ServiceDataResponse;
+    } catch (e) {
+        console.error('[24iMediaTimeApi] Failed to get time', e);
+        throw e;
+    }
+}

package/packages/time/src/services/24iMediaTimeApi/index.ts

@@ -0,0 +1,6 @@
+export {
+    Options,
+    ParamOptions,
+    ServiceDataResponse,
+    getTime,
+} from './24iMediaTimeApi';

package/packages/toast/src/ToastService.scss

@@ -1,6 +1,7 @@
 .toast-service-root {
     position: absolute;
     left: 0;
+    right: 0;
     top: 0;
     width: 0;
     height: 0;

package/packages/toast/src/ToastService.tsx

@@ -34,11 +34,22 @@ export class ToastService<T extends MinimalToastProps> extends Component<Props<T
                 this.serviceContinue();
             },
         } as T);
-        if (!this.isShowingToast) {
-            this.appendMount(toastElement, this.rootDivRef);
-            this.isShowingToast = true;
-        } else {
-            this.toastElementBuffer.push(toastElement);
+
+        // Check if toast element with the same message already exists in stack
+        const elementExists = this.toastElementBuffer.find((item) => {
+            const { message: newMessage } = toastElement.props;
+            const { message } = item.props;
+
+            return message === newMessage;
+        }) !== undefined;
+
+        if (!elementExists) {
+            if (!this.isShowingToast) {
+                this.appendMount(toastElement, this.rootDivRef);
+                this.isShowingToast = true;
+            } else {
+                this.toastElementBuffer.push(toastElement);
+            }
         }
     }
 

package/packages/types-bigscreen-jsx/README.md

@@ -1,11 +1,12 @@
 # BIGscreen JSX Types
 BIGscreen JSX is a set of tools that allow you to write JSX and converts it to JS Dom API.
-This package contains types originally from @types/react, modified for smartapps-bigscreen-jsx needs.
+This package contains types originally from @types/react, modified for bigscreen-jsx needs.
 
 # Contributing
-Navigate to `<root>/packages/types-smartapps-bigscreen-jsx/node_modules/@types/react/`.
-All react types are inside files `index.d.ts` and `global.d.ts`. Modify them to suit your needs and afterwards run this command in the `packages/types-smartapps-bigscreen-jsx/` directory:
+Navigate to `<root>/node_modules/@types/react/`.
+All react types are inside files `index.d.ts` and `global.d.ts`. Modify them to suit your needs and afterwards run this commands in the `<root>` directory:
 
 `npx patch-package @types/react`
+`npm install`
 
-You can confirm everything worked by looking into `packages/types-smartapps-bigscreen-jsx/patches/`. You should see a file named `@types+react+<version-etc>.patch` that includes diff of your changes.
+You can confirm everything worked by looking into `<root>/patches/`. You should see a file named `@types+react+<version-etc>.patch` that includes diff of your changes.