@24i/bigscreen-sdk 1.0.54-alpha.2836 → 2.1.1-alpha.2133

package/packages/player-ui/src/timeUtils.ts

@@ -63,9 +63,9 @@ export const formatTime = (duration: number, pattern: string) => {
     const unitValues = calculateUnitValues(duration, units);
     let result: string = pattern;
     forEach(matches, (match) => {
-        const formatedValue = Number.isNaN(unitValues[match.unit])
-            ? '--'
-            : unitValues[match.unit]!.toString().padStart(match.count, '0');
+        const formatedValue = Number.isNaN(unitValues[match.unit]) ?
+            '--' :
+            unitValues[match.unit]!.toString().padStart(match.count, '0');
         result = result.replace(
             match.completeMatch,
             formatedValue,

package/packages/player-ui/src/types.ts

@@ -1,4 +1,4 @@
-import { PlayerBase } from '@24i/bigscreen-players-engine-base';
+import { PlayerBase } from '@24i/player-base';
 import { Seeking } from './Seeking';
 
 export enum PlayerAction {
@@ -20,12 +20,8 @@ export interface ActionsWithPayloadMap {
 }
 
 export interface IPlayerUI {
-    seeking?: Seeking;
-    getPlayer: () => PlayerBase,
-    disableHiding: () => void,
-    enableHiding: () => void,
-    disableSeeking: () => void,
-    enableSeeking: () => void,
+    seeking: Seeking;
+    getPlayer: () => PlayerBase<any>,
     heartbeat: () => void,
     trigger<K extends keyof ActionsWithoutPayloadMap>(action: K): void,
     trigger<K extends keyof ActionsWithPayloadMap>(
@@ -34,8 +30,6 @@ export interface IPlayerUI {
     isPlaying: () => boolean,
 }
 
-export type IPlayerUIWithSeeking = Required<IPlayerUI>;
-
 export type PlayerUICommonProps = {
     ui: IPlayerUI,
     className?: string,

package/packages/router/README.md

@@ -16,7 +16,6 @@ It will take care of route switching based on hash changes. It also supports par
 - `children` - Routes
 - `defaultPath` - optional path to which go after Router is mounted (default: `/`)
 - `detachInactiveRoutes` - optional flag if routes should detach from DOM entirely during route switching (default: `true`)
-- `canBack` - optional function whether the router can route back
 
 ### Interface
 - `getActiveRoute()`*: Route | null* - Returns active route component

package/packages/router/src/Route.tsx

@@ -3,38 +3,36 @@ import {
     Component,
     createRef,
     detachNode,
-    Reference,
     replaceNode,
 } from '@24i/bigscreen-sdk/jsx';
 import { filter, forEach } from '@24i/bigscreen-sdk/perf-utils/array';
-import { addClass, removeClass } from '@24i/bigscreen-sdk/utils';
-import { ModalService } from '@24i/bigscreen-sdk/modal-service';
-import { menuService } from '@24i/bigscreen-sdk/menu';
 import { getCurrentHash } from './utils';
 import { IRoute, RouteParams } from './types';
 
 type Props = {
     path: string,
-    domParent?: Reference<HTMLElement>;
     regexpPath?: RegExp,
     paramNames?: string[],
+    isDetachable?: boolean;
     Component: Function,
 };
 
-const MRCU_DISABLED = 'mrcu-disabled';
-
 export class Route extends Component<Props> {
     wasCreated = false;
 
     isDetached = false;
 
+    domParent: HTMLElement | null = null;
+
     domRef = createRef<HTMLDivElement>();
 
     component = createRef<IRoute | null>();
 
-    modalService = createRef<ModalService>();
-
-    shouldCallReactivateOnCloseModal = false;
+    componentDidMount() {
+        const { isDetachable } = this.props;
+        this.domParent = this.domRef.current?.parentElement!;
+        if (isDetachable) this.detach();
+    }
 
     getParams(): RouteParams {
         const { regexpPath, paramNames } = this.props;
@@ -51,50 +49,21 @@ export class Route extends Component<Props> {
         return {};
     }
 
-    onMenuVisibilityChange = (isVisible: boolean) => {
-        if (isVisible) {
-            addClass(this.domRef, MRCU_DISABLED);
-        } else {
-            removeClass(this.domRef, MRCU_DISABLED);
-        }
-    };
-
-    onCloseModalService = () => {
-        if (this.shouldCallReactivateOnCloseModal) {
-            this.component.current?.reactivate(this.getParams());
-        }
-        this.shouldCallReactivateOnCloseModal = false;
-    };
-
-    getModalService() {
-        if (!this.modalService.current) {
-            this.appendMount(
-                <ModalService
-                    ref={this.modalService}
-                    onCloseLastModal={this.onCloseModalService}
-                />,
-                this.domRef,
-            );
-        }
-        return this.modalService;
-    }
-
     show() {
-        menuService.addEventListener('visibilitychange', this.onMenuVisibilityChange);
+        this.showRoute();
         if (!this.wasCreated) {
             this.mountRoute();
             this.component.current?.activate(this.getParams());
-        } else if (this.modalService.current?.isOpen()) {
-            this.focusModal();
-            this.shouldCallReactivateOnCloseModal = true;
         } else {
             this.component.current?.reactivate(this.getParams());
         }
     }
 
     hide() {
-        menuService.removeEventListener('visibilitychange', this.onMenuVisibilityChange);
-        this.deactivate();
+        if (this.wasCreated) {
+            this.component.current?.deactivate();
+            this.hideRoute();
+        }
     }
 
     replace(newRoute: Route) {
@@ -106,9 +75,8 @@ export class Route extends Component<Props> {
     }
 
     attach() {
-        const { domParent } = this.props;
         if (this.isDetached) {
-            attachNode(this.domRef, domParent!);
+            attachNode(this.domRef, this.domParent!);
             this.isDetached = false;
         }
     }
@@ -126,27 +94,20 @@ export class Route extends Component<Props> {
         }
     }
 
-    private focusModal() {
-        const mountedComponent = this.modalService.current!.getMountedComponent();
-        mountedComponent.current?.focus();
-    }
-
     focus() {
         if (this.wasCreated) {
-            if (this.modalService.current?.isOpen()) {
-                this.focusModal();
-            } else {
-                this.component.current?.focus();
-            }
+            this.component.current?.focus();
         }
     }
 
-    showRoute() {
-        this.domRef.current!.style.display = 'block';
+    private showRoute() {
+        const { isDetachable } = this.props;
+        if (!isDetachable) this.domRef.current!.style.display = 'block';
     }
 
-    hideRoute() {
-        this.domRef.current!.style.display = 'none';
+    private hideRoute() {
+        const { isDetachable } = this.props;
+        if (!isDetachable) this.domRef.current!.style.display = 'none';
     }
 
     private mountRoute() {
@@ -159,8 +120,13 @@ export class Route extends Component<Props> {
     }
 
     render() {
+        const { isDetachable } = this.props;
         return (
-            <div className="route" ref={this.domRef} />
+            <div
+                className="route"
+                style={!isDetachable ? { display: 'none' } : {}}
+                ref={this.domRef}
+            />
         );
     }
 }

package/packages/router/src/Router.tsx

@@ -10,7 +10,6 @@ type Props = {
     children: JSX.Element[],
     defaultPath?: string,
     detachInactiveRoutes?: boolean,
-    canBack?: (event: KeyboardEvent) => boolean,
 };
 
 type RoutePath = {
@@ -29,12 +28,9 @@ 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>;
@@ -42,14 +38,12 @@ export class Router extends Component<Props> {
     constructor(props: Props) {
         super(props);
         routerRef.current = this;
-        const { children } = this.props;
-        this.createRefs(children);
+        this.createRefs();
     }
 
     componentDidMount() {
         window.document.addEventListener('keydown', this.onKeyDown, false);
         window.addEventListener('hashchange', this.onHashChange, false);
-        this.hideAllRoutes();
         this.goToDefaultPath();
     }
 
@@ -63,8 +57,7 @@ export class Router extends Component<Props> {
     };
 
     onKeyDown = (event: KeyboardEvent) => {
-        const { canBack } = this.props;
-        if (history.length > 1 && device.isBackOrEscape(event) && canBack(event)) {
+        if (history.length > 1 && device.isBackOrEscape(event)) {
             back();
             stopEventImmediately(event);
         }
@@ -98,8 +91,6 @@ 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,
@@ -113,31 +104,18 @@ export class Router extends Component<Props> {
             } else if (routePathToShow) {
                 routeToHide!.hide();
                 routePathToHide.isVisible = false;
-                if (detachInactiveRoutes) {
-                    routeToHide!.replace(routeToShow!);
-                } else {
-                    routeToHide!.hideRoute();
-                    routeToShow!.showRoute();
-                }
+                if (detachInactiveRoutes) routeToHide!.replace(routeToShow!);
                 routeToShow!.show();
                 routePathToShow.isVisible = true;
                 return;
             } else {
                 routeToHide!.hide();
                 routePathToHide.isVisible = false;
-                if (detachInactiveRoutes) {
-                    routeToHide!.detach();
-                } else {
-                    routeToHide!.hideRoute();
-                }
+                if (detachInactiveRoutes) routeToHide!.detach();
             }
         }
         if (routePathToShow) {
-            if (detachInactiveRoutes) {
-                routeToShow!.attach();
-            } else {
-                routeToShow!.showRoute();
-            }
+            if (detachInactiveRoutes) routeToShow!.attach();
             routeToShow!.show();
             routePathToShow.isVisible = true;
         }
@@ -147,10 +125,11 @@ export class Router extends Component<Props> {
         this.getActiveRoute()?.focus();
     }
 
-    createRefs(routes: JSX.Element[]) {
-        forEach(routes, (route: JSX.Element) => {
-            if (route.type === Route) {
-                const { path } = route.props;
+    createRefs() {
+        const { children } = this.props;
+        forEach(children, (child: JSX.Element) => {
+            if (child.type === Route) {
+                const { path } = child.props;
                 const { regexpPath, paramNames } = pathToRegExp(path);
                 this.paths[path] = {
                     ref: createRef<Route>(),
@@ -172,28 +151,9 @@ export class Router extends Component<Props> {
         }
     }
 
-    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) => {
+    render() {
+        const { children, detachInactiveRoutes } = this.props;
+        return filterNulls(map(children, (child: JSX.Element) => {
             if (child.type === Route) {
                 const { path, Component: RouteComponent } = child.props;
                 const route = this.paths[path];
@@ -201,23 +161,14 @@ 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,10 +2,8 @@ import { NavigationConfig } from './types';
 
 export const history: string[] = [];
 
-const pathWithHash = (path:string) => `#${path}`;
-
 const navigate = (path: string) => {
-    window.location.href = pathWithHash(path);
+    window.location.href = `#${path}`;
 };
 
 export const go = (path: string, { skipHistory, replaceHistory }: NavigationConfig = {}) => {
@@ -24,8 +22,3 @@ 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, replaceState } from './history';
+export { history, go, back, clearHistory } from './history';
 export { focusActiveRoute } from './focusActiveRoute';
 export { fromSafeUrl, toSafeUrl } from './utils';

package/packages/router/src/utils.ts

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

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

@@ -1,8 +1,3 @@
-@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.";
@@ -21,18 +16,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: list.index((
+    $is-keyword: 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: meta.type-of($value) == 'number' and list.index('deg' 'grad' 'turn' 'rad', math.unit($value));
+    $is-angle: type-of($value) == 'number' and index('deg' 'grad' 'turn' 'rad', unit($value));
 
     @return $is-keyword or $is-angle;
 }

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

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

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

@@ -1,5 +1,5 @@
 @use 'sass:math';
 
 @function scale($value) {
-    @return math.round($number: math.div($value, 1.5));
+    @return 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 UTC time set to local time.
+It returns date object having local time set to server current time.
 
 ### `getCurrentUnixTime(): number`
 It returns UNIX time in milliseconds of server UTC time.
@@ -60,9 +60,6 @@ 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, MS_PER_MINUTE } from './constants';
+import { InitStatus, ErrorCode } from './constants';
 import { Config, TimeServiceResp } from './types';
 
 /**
@@ -22,9 +22,6 @@ 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();
 
@@ -116,7 +113,7 @@ class Time {
         this.currentTime = currentTime;
         this.serverTime = date;
         this.serverUnixTime = unixTime;
-        this.offsetMs = this.currentTime.getTime() - this.serverTime.getTime() + this.deviceOffset;
+        this.offsetMs = this.currentTime.getTime() - this.serverTime.getTime();
         this.timezoneOffset = timezoneOffset;
     }
 
@@ -171,15 +168,6 @@ 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.
      *
@@ -204,34 +192,24 @@ class 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.
+     * @returns Current time.
      */
     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 currentDate = this.getCurrentTimeReal();
-        const startOfToday = getDayStart(currentDate) - this.deviceOffset; // We must get 00:00 UTC
-        const endOfToday = getDayEnd(currentDate) - this.deviceOffset;
+        const currentTime = this.getCurrentTime();
+        const startOfToday = getDayStart(currentTime);
+        const endOfToday = getDayEnd(currentTime);
         return startOfToday <= timestamp && timestamp < endOfToday;
     }
 
@@ -241,10 +219,10 @@ class Time {
      * @returns true if the timestamp falls between start and end of tomorrow
      */
     isTomorrow(timestamp: number) {
-        const currentDate = this.getCurrentTimeReal();
-        const startOfTomorrow = getDayEnd(currentDate) - this.deviceOffset;
+        const currentTime = this.getCurrentTime();
+        const startOfTomorrow = getDayEnd(currentTime);
         const tommorow = new Date(startOfTomorrow + 1);
-        const endOfTomorrow = getDayEnd(tommorow) - this.deviceOffset;
+        const endOfTomorrow = getDayEnd(tommorow);
         return startOfTomorrow <= timestamp && timestamp < endOfTomorrow;
     }
 
@@ -254,10 +232,10 @@ class Time {
      * @returns true if the timestamp falls between start and end of yesterday
      */
     isYesterday(timestamp: number) {
-        const currentDate = this.getCurrentTimeReal();
-        const endOfYesterday = getDayStart(currentDate) - this.deviceOffset;
+        const currentTime = this.getCurrentTime();
+        const endOfYesterday = getDayStart(currentTime);
         const yesterday = new Date(endOfYesterday - 1);
-        const startOfYesterday = getDayStart(yesterday) - this.deviceOffset;
+        const startOfYesterday = getDayStart(yesterday);
         return startOfYesterday <= timestamp && timestamp < endOfYesterday;
     }
 }

package/packages/time/src/constants.ts

@@ -9,6 +9,5 @@ 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/toast/src/ToastService.tsx

@@ -34,22 +34,11 @@ export class ToastService<T extends MinimalToastProps> extends Component<Props<T
                 this.serviceContinue();
             },
         } as T);
-
-        // 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);
-            }
+        if (!this.isShowingToast) {
+            this.appendMount(toastElement, this.rootDivRef);
+            this.isShowingToast = true;
+        } else {
+            this.toastElementBuffer.push(toastElement);
         }
     }
 

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

@@ -1,12 +1,11 @@
 # 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 bigscreen-jsx needs.
+This package contains types originally from @types/react, modified for smartapps-bigscreen-jsx needs.
 
 # Contributing
-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:
+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:
 
 `npx patch-package @types/react`
-`npm install`
 
-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.
+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.