@24i/bigscreen-sdk 1.0.18-bs-player.2373 → 1.0.18

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@24i/bigscreen-sdk",
-    "version": "1.0.18-bs-player.2373",
+    "version": "1.0.18",
     "description": "SmartApps BIGscreen SDK monorepo",
     "main": "index.js",
     "scripts": {
@@ -40,8 +40,8 @@
         "@24i/appstage-shared-analytics": "1.0.16-alpha.58",
         "@24i/appstage-shared-events-manager": "1.0.7",
         "@24i/appstage-shared-perf-utils": "1.0.5",
-        "@24i/bigscreen-players-engine-base": "0.1.3",
-        "@24i/smartapps-datalayer": "3.0.8-alpha.1006",
+        "@24i/player-base": "6.10.0",
+        "@24i/smartapps-datalayer": "3.0.7-alpha.998",
         "@sentry/browser": "7.35.0",
         "@sentry/types": "7.35.0",
         "@types/gtag.js": "^0.0.12",
@@ -55,11 +55,11 @@
         "@24i/bigscreen-sdk": "file:.",
         "@24i/eslint-config-smartapps-bigscreen-linters": "file:./libs/linters",
         "@24i/smartapps-bigscreen-changelog-generator": "0.17.0",
-        "@babel/core": "^7.22.1",
-        "@babel/preset-env": "^7.22.4",
+        "@babel/core": "^7.21.0",
+        "@babel/preset-env": "^7.20.2",
         "@types/fs-extra": "^11.0.1",
         "@types/inquirer": "^9.0.3",
-        "@types/jest": "^29.5.2",
+        "@types/jest": "^29.2.3",
         "@types/minimist": "^1.2.2",
         "@types/node": "^18.7.18",
         "@types/react": "^18.0.33",
@@ -70,7 +70,7 @@
         "fs-extra": "^11.1.0",
         "full-icu": "^1.5.0",
         "identity-obj-proxy": "^3.0.0",
-        "inquirer": "^9.2.6",
+        "inquirer": "^9.1.4",
         "jest": "^29.3.1",
         "jest-canvas-mock": "^2.4.0",
         "jest-environment-jsdom": "^29.0.3",

package/packages/adobe-heartbeat/src/AdobeHeartbeat.ts

@@ -1,5 +1,5 @@
 /// <reference path='./__external__/Adobe/Adobe.d.ts' />
-import { IErrorEvent, PlayerBase } from '@24i/bigscreen-players-engine-base';
+import { IErrorEvent, PlayerBase } from '@24i/player-base';
 import { time } from '@24i/bigscreen-sdk/time';
 import { SECOND_IN_MS } from '@24i/bigscreen-sdk/utils';
 import { va as Adobe } from './__external__/Adobe/MediaSDK.min';
@@ -15,7 +15,7 @@ import {
 export class AdobeHeartbeat<CustomMetadata extends CustomerMetadata | void = void> {
     static StreamType = Adobe.MediaHeartbeat.StreamType;
 
-    private player?: PlayerBase;
+    private player?: PlayerBase<any>;
 
     /**
      * Heartbeat configuration object
@@ -32,7 +32,7 @@ export class AdobeHeartbeat<CustomMetadata extends CustomerMetadata | void = voi
      * @param config - Heartbeat configuration object
      * @param player - 24i universal player instance
      */
-    constructor(config: HeartbeatConfig, player?: PlayerBase) {
+    constructor(config: HeartbeatConfig, player?: PlayerBase<any>) {
         if (!window.s || !AppMeasurement) throw new Error('Missing Adobe Launch library!');
         this.config = config;
         this.player = player;
@@ -67,10 +67,10 @@ export class AdobeHeartbeat<CustomMetadata extends CustomerMetadata | void = voi
         return {
             getCurrentPlaybackTime: () => {
                 if (!this.player) return 0;
-                const { currentTime } = this.player.mediaInfo || {};
+                const { currentTime } = this.player.getMediaInfo() || {};
                 if (this.player.live) {
                     try {
-                        const { programEnd = NaN } = this.player.metadata;
+                        const { programEnd = NaN } = this.player.getMetadata();
                         return Math.floor((programEnd - currentTime) / SECOND_IN_MS)
                             || time.getCurrentUnixTime();
                     } catch (e) {
@@ -81,7 +81,7 @@ export class AdobeHeartbeat<CustomMetadata extends CustomerMetadata | void = voi
             },
             getQoSObject: () => {
                 if (!this.player) return Adobe.MediaHeartbeat.createQoSObject();
-                const { bitrate, droppedVideoFrames } = this.player.mediaInfo || {};
+                const { bitrate, droppedVideoFrames } = this.player.getMediaInfo() || {};
                 return Adobe.MediaHeartbeat.createQoSObject(
                     bitrate, undefined, undefined, droppedVideoFrames,
                 );
@@ -89,7 +89,7 @@ export class AdobeHeartbeat<CustomMetadata extends CustomerMetadata | void = voi
         };
     }
 
-    private attachPlayerListeners(player: PlayerBase) {
+    private attachPlayerListeners(player: PlayerBase<any>) {
         player.addEventListener('play', this.onPlay);
         player.addEventListener('pause', this.onPause);
         player.addEventListener('ended', this.onEnded);
@@ -98,7 +98,7 @@ export class AdobeHeartbeat<CustomMetadata extends CustomerMetadata | void = voi
         player.addEventListener('error', this.onError);
     }
 
-    private dettachPlayerListeners(player: PlayerBase) {
+    private dettachPlayerListeners(player: PlayerBase<any>) {
         player.removeEventListener('play', this.onPlay);
         player.removeEventListener('pause', this.onPause);
         player.removeEventListener('ended', this.onEnded);
@@ -143,7 +143,7 @@ export class AdobeHeartbeat<CustomMetadata extends CustomerMetadata | void = voi
      * this will replace the old one.
      * @param player - 24i universal player instance
      */
-    attachPlayer(player: PlayerBase) {
+    attachPlayer(player: PlayerBase<any>) {
         if (this.player) this.dettachPlayerListeners(this.player);
         this.player = player;
         if (this.player) this.attachPlayerListeners(this.player);

package/packages/developer-tools/PlayerDebugWindow/README.md

@@ -45,7 +45,7 @@ playerDebugWindowRef.current?.setPlayerInstance(playerInstance);
 
 ```ts
 type Props = {
-    playerInstance?: PlayerBase;
+    playerInstance?: PlayerBase<any>;
     updateInterval?: number;
     onClose?: () => void;
 };

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

@@ -1,12 +1,12 @@
 import { Component, createRef, DeclareProps } from '@24i/bigscreen-sdk/jsx';
 import { DISPLAY_NONE, getDisplayToggler } from '@24i/bigscreen-sdk/utils';
 import { createInterval } from '@24i/bigscreen-sdk/utils/timers';
-import { IMediaInfo, PlayerBase } from '@24i/bigscreen-players-engine-base';
+import { IMediaInfo, PlayerBase } from '@24i/player-base';
 import { IDeveloperTool } from '../IDeveloperTool';
 import { MEDIA_INFO_DESCRIPTION, MediaInfo } from './constants';
 
 export type Props = {
-    playerInstance?: PlayerBase;
+    playerInstance?: PlayerBase<any>;
     updateInterval?: number;
     onClose?: () => void;
 };
@@ -16,7 +16,7 @@ export class PlayerDebugWindow extends Component<Props> implements IDeveloperToo
 
     div = createRef<HTMLDivElement>();
 
-    playerInstance: PlayerBase | null = null;
+    playerInstance: PlayerBase<any> | null = null;
 
     interval = createInterval();
 
@@ -34,12 +34,12 @@ export class PlayerDebugWindow extends Component<Props> implements IDeveloperToo
         if (playerInstance) this.setPlayerInstance(playerInstance);
     }
 
-    setPlayerInstance(playerInstance: PlayerBase) {
+    setPlayerInstance(playerInstance: PlayerBase<any>) {
         this.playerInstance = playerInstance;
     }
 
     getMediaInfo() {
-        return this.playerInstance?.mediaInfo || {};
+        return this.playerInstance?.getMediaInfo() || {};
     }
 
     getFormattedValue(item: MediaInfo, value: any) {

package/packages/developer-tools/src/TechnicalInfo/TechnicalInfoProvider.ts

@@ -4,7 +4,7 @@ import { IStorage } from '@24i/bigscreen-sdk/storage/interface';
 import { getUsedJSHeapSize, getTotalJSHeapSize } from '@24i/bigscreen-sdk/utils/memoryInfo';
 import { ipify } from '@24i/bigscreen-sdk/ipify';
 import { map } from '@24i/bigscreen-sdk/perf-utils/array';
-import { PlayerBase } from '@24i/bigscreen-players-engine-base';
+import { PlayerBase } from '@24i/player-base';
 import { hasEMESupport, getListOfSupportedDRM } from './utils/emeSupport';
 import {
     hasEMESupport as hasEMESupport01b,

package/packages/driver-androidtv/src/__mocks__/javaScriptBridge.ts

@@ -14,17 +14,5 @@ export const mockJavaScriptBridge: IJavaScriptBridge = {
             })
         ),
         bridgeJavaScriptToAndroid_Back: () => {},
-        bridgeJavaScriptToAndroid_StopVideo: () => {},
-        bridgeJavaScriptToAndroid_FullScreenVideo: () => {},
-        // eslint-disable-next-line @typescript-eslint/no-unused-vars
-        bridgeJavaScriptToAndroid_SetVideoPath: (url: string) => {},
-        bridgeJavaScriptToAndroid_IsPlaying: () => true,
-        bridgeJavaScriptToAndroid_PauseVideo: () => {},
-        bridgeJavaScriptToAndroid_PlayVideo: () => {},
-        bridgeJavaScriptToAndroid_IsLive: () => false,
-        bridgeJavaScriptToAndroid_GetCurrentTime: () => Date.now(),
-        bridgeJavaScriptToAndroid_GetTotalTime: () => Date.now(),
-        // eslint-disable-next-line @typescript-eslint/no-unused-vars
-        bridgeJavaScriptToAndroid_SeekTo: (milliseconds: number) => {},
     },
 };

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

@@ -11,46 +11,6 @@ interface JavaScriptBridge {
      * It simulates a native Android back press.
      */
     bridgeJavaScriptToAndroid_Back: () => void,
-    /**
-     * It simulates a native Android stop button press.
-     */
-    bridgeJavaScriptToAndroid_StopVideo: () => void;
-    /**
-     * It sets the video to fullscreen mode
-     */
-    bridgeJavaScriptToAndroid_FullScreenVideo: () => void;
-    /**
-     * It sets the video url
-     */
-    bridgeJavaScriptToAndroid_SetVideoPath: (url: string) => void;
-    /**
-     * It returns whether the video is playing
-     */
-    bridgeJavaScriptToAndroid_IsPlaying: () => boolean;
-    /**
-     * It pauses the video
-     */
-    bridgeJavaScriptToAndroid_PauseVideo: () => void;
-    /**
-     * It plays the video
-     */
-    bridgeJavaScriptToAndroid_PlayVideo: () => void;
-    /**
-     * It returns whether the video is live
-     */
-    bridgeJavaScriptToAndroid_IsLive: () => boolean;
-    /**
-     * It returns current time of currently played video
-     */
-    bridgeJavaScriptToAndroid_GetCurrentTime: () => number;
-    /**
-     * It returns total duration of the video
-     */
-    bridgeJavaScriptToAndroid_GetTotalTime: () => number;
-    /**
-     * It seeks the video to specified milliseconds
-     */
-    bridgeJavaScriptToAndroid_SeekTo: (milliseconds: number) => void;
 }
 
 export type DeviceInfo = {

package/packages/gallup/src/Gallup.ts

@@ -1,4 +1,4 @@
-import { PlayerBase } from '@24i/bigscreen-players-engine-base';
+import { PlayerBase } from '@24i/player-base';
 import './__external__/SpringStreams';
 
 const SECOND_IN_MS = 1000;
@@ -16,7 +16,7 @@ export class Gallup {
      */
     constructor(
         siteCode: string,
-        private readonly player: PlayerBase,
+        private readonly player: PlayerBase<any>,
         private readonly playerName: string,
     ) {
         this.sensors = new SpringStreams(siteCode);
@@ -67,7 +67,7 @@ export class Gallup {
             getPosition: () => Math.floor(player.currentTime / SECOND_IN_MS),
             getMeta: () => {
                 const { width, height } = window.screen;
-                const { playerVersion } = player.mediaInfo;
+                const { playerVersion } = player.getMediaInfo();
                 return {
                     pl: playerName,
                     plv: playerVersion || '',

package/packages/player-ui/src/CurrentTime.tsx

@@ -1,5 +1,5 @@
 import { Component, createRef, DeclareProps } from '@24i/bigscreen-sdk/jsx';
-import { ITimeUpdateEvent } from '@24i/bigscreen-players-engine-base';
+import { ITimeUpdateEvent } from '@24i/player-base';
 import { PlayerTime } from './PlayerTime';
 import { PlayerUICommonProps, PlayerUITimeProps } from './types';
 
@@ -26,7 +26,7 @@ export class CurrentTime extends Component<Props> {
         const playerInstance = ui.getPlayer();
         this.isLive = playerInstance.live;
         playerInstance.addEventListener('timeupdate', this.onTimeUpdate);
-        const { programStart = 0 } = playerInstance.metadata || {};
+        const { programStart = 0 } = playerInstance.getMetadata() || {};
         this.liveStartTime = programStart || Date.now();
     }
 

package/packages/player-ui/src/Duration.tsx

@@ -1,5 +1,5 @@
 import { Component, createRef, DeclareProps } from '@24i/bigscreen-sdk/jsx';
-import { IDurationChangeEvent } from '@24i/bigscreen-players-engine-base';
+import { IDurationChangeEvent } from '@24i/player-base';
 import { PlayerTime } from './PlayerTime';
 import { PlayerUICommonProps, PlayerUITimeProps } from './types';
 
@@ -20,7 +20,7 @@ export class Duration extends Component<Props> {
     componentDidMount() {
         const { ui } = this.props;
         const playerInstance = ui.getPlayer();
-        const { programStart = 0, programEnd = 0 } = playerInstance.metadata || {};
+        const { programStart = 0, programEnd = 0 } = playerInstance.getMetadata() || {};
         const isLive = playerInstance.live;
         if (isLive && programStart < programEnd) {
             this.time.current!.updateTime(programEnd - programStart);

package/packages/player-ui/src/PlayerUI.tsx

@@ -1,5 +1,5 @@
 import { Component, createRef, DeclareProps } from '@24i/bigscreen-sdk/jsx';
-import { PlayerBase } from '@24i/bigscreen-players-engine-base';
+import { PlayerBase } from '@24i/player-base';
 import { FF, REW, switchByKey } from '@24i/bigscreen-sdk/device/keymap';
 import { stopEvent } from '@24i/bigscreen-sdk/utils/stopEvent';
 import {
@@ -16,7 +16,7 @@ export type PlayerUIState = {
 
 type Props = {
     children: (state: PlayerUIState) => JSX.Element | JSX.Element[] | string | null | null[],
-    player: PlayerBase,
+    player: PlayerBase<any>,
     timeout?: number,
     className?: string,
     hidden?: boolean,
@@ -44,7 +44,7 @@ export class PlayerUI extends Component<Props>
     // eslint-disable-next-line react/destructuring-assignment
     divDisplay: IDisplayToggler = getDisplayToggler(this.div, this.props.hidden);
 
-    player: PlayerBase | null = null;
+    player: PlayerBase<any> | null = null;
 
     static defaultProps = {
         timeout: 5000,
@@ -175,7 +175,7 @@ export class PlayerUI extends Component<Props>
 
     getPlayer = () => this.player!;
 
-    setPlayer(player: PlayerBase) {
+    setPlayer(player: PlayerBase<any>) {
         this.player = player;
         if (this.seeking) this.seeking.setPlayer(player);
     }

package/packages/player-ui/src/RemainingTime.tsx

@@ -1,5 +1,5 @@
 import { Component, createRef, DeclareProps } from '@24i/bigscreen-sdk/jsx';
-import { IDurationChangeEvent, ITimeUpdateEvent } from '@24i/bigscreen-players-engine-base';
+import { IDurationChangeEvent, ITimeUpdateEvent } from '@24i/player-base';
 import { PlayerTime } from './PlayerTime';
 import { PlayerUICommonProps, PlayerUITimeProps } from './types';
 
@@ -32,7 +32,7 @@ export class RemainingTime extends Component<Props> {
         this.duration = playerInstance.duration;
         playerInstance.addEventListener('timeupdate', this.onTimeUpdate);
         playerInstance.addEventListener('durationchange', this.onDurationChange);
-        const { programEnd = 0 } = playerInstance.metadata || {};
+        const { programEnd = 0 } = playerInstance.getMetadata() || {};
         this.liveEndTime = programEnd || Date.now();
     }
 

package/packages/player-ui/src/Seekbar.tsx

@@ -1,7 +1,7 @@
 import { Component, createRef } from '@24i/bigscreen-sdk/jsx';
 import { IFocusable } from '@24i/bigscreen-sdk/focus';
 import { stopEvent } from '@24i/bigscreen-sdk/utils/stopEvent';
-import { ITimeUpdateEvent, IDurationChangeEvent } from '@24i/bigscreen-players-engine-base';
+import { ITimeUpdateEvent, IDurationChangeEvent } from '@24i/player-base';
 import { createTimeout } from '@24i/bigscreen-sdk/utils/timers';
 import { switchByKey } from '@24i/bigscreen-sdk/device/keymap';
 import { getDisplayToggler } from '@24i/bigscreen-sdk/utils/displayToggler';
@@ -195,7 +195,7 @@ export class Seekbar extends Component<Props> implements IFocusable {
         const { ui } = this.props;
         const player = ui.getPlayer();
         if (player.live) {
-            const { programStart = 0, programEnd = 0 } = player.metadata;
+            const { programStart = 0, programEnd = 0 } = player.getMetadata();
             this.duration = programEnd - programStart || Date.now();
         } else {
             this.duration = duration;
@@ -207,7 +207,7 @@ export class Seekbar extends Component<Props> implements IFocusable {
         const { ui } = this.props;
         const player = ui.getPlayer();
         if (player.live) {
-            const { programStart = 0, programEnd = 0 } = player.metadata;
+            const { programStart = 0, programEnd = 0 } = player.getMetadata();
             const { start, end } = player.seekableRange;
             return getLiveProgressBasedOnCurrentTime(
                 programStart,

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

@@ -1,6 +1,6 @@
 import { IEvents, EventMapType, EventsManager } from '@24i/bigscreen-sdk/events-manager';
 import { createInterval, createTimeout } from '@24i/bigscreen-sdk/utils/timers';
-import { PlayerBase } from '@24i/bigscreen-players-engine-base';
+import { PlayerBase } from '@24i/player-base';
 
 const DEFAULT_SEEK_TIME = 10000;
 const FAST_SEEK_TIME = 30000;
@@ -26,7 +26,7 @@ export class Seeking implements IEvents<SeekingEventsMap> {
 
     automaticSeekInterval = createInterval();
 
-    player: PlayerBase | null;
+    player: PlayerBase<any> | null;
 
     isAutomaticallySeekingForward = false;
 
@@ -40,7 +40,7 @@ export class Seeking implements IEvents<SeekingEventsMap> {
 
     rewConsecutiveTimeout = createTimeout();
 
-    constructor(player: PlayerBase | null = null) {
+    constructor(player: PlayerBase<any> | null = null) {
         this.player = player;
     }
 
@@ -52,7 +52,7 @@ export class Seeking implements IEvents<SeekingEventsMap> {
         this.player!.removeEventListener('seeked', this.nullSeekTime);
     }
 
-    setPlayer(player: PlayerBase) {
+    setPlayer(player: PlayerBase<any>) {
         this.player = player;
     }
 

package/packages/player-ui/src/Subtitles.tsx

@@ -1,11 +1,11 @@
-import { PlayerBase, ITimeUpdateEvent } from '@24i/bigscreen-players-engine-base';
+import { PlayerBase, ITimeUpdateEvent } from '@24i/player-base';
 import { Component, createRef, DeclareProps, setText } from '@24i/bigscreen-sdk/jsx';
 import { getDisplayToggler } from '@24i/bigscreen-sdk/utils';
 import { SubtitlesType } from '@24i/smartapps-datalayer/src/models';
 import { timeToMs } from './timeUtils';
 
 type Props = {
-    player: PlayerBase,
+    player: PlayerBase<any>,
     className?: string,
 };
 

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

@@ -1,4 +1,4 @@
-import { IPlayerProperties, PlayerBase, PlayerBaseMock } from '@24i/bigscreen-players-engine-base';
+import { PlayerBase, PlayerBaseMock } from '@24i/player-base';
 import { EventsManager } from '@24i/bigscreen-sdk/events-manager';
 import { IPlayerUIWithSeeking } from './types';
 
@@ -35,16 +35,8 @@ const getSeekingMock = (): jest.Mocked<IPlayerUIWithSeeking['seeking']> => ({
 
 const PLAYER_MOCK_DURATION = 60000;
 
-export const getPlayerMock = (): PlayerBase => {
-    const initialConfig: IPlayerProperties = {
-        source: {
-            url: '',
-        },
-    };
-    const parentElement = document.createElement('div');
-
-    const playerMock = new PlayerBaseMock(initialConfig, parentElement);
-    playerMock.source = initialConfig.source;
+export const getPlayerMock = (): PlayerBase<any> => {
+    const playerMock = new PlayerBaseMock();
     jest.spyOn(playerMock, 'duration', 'get').mockReturnValue(PLAYER_MOCK_DURATION);
 
     return playerMock;
@@ -52,7 +44,7 @@ export const getPlayerMock = (): PlayerBase => {
 
 export const getUiMock = (): { ui: jest.Mocked<IPlayerUIWithSeeking> } => ({
     ui: {
-        getPlayer: jest.fn((): PlayerBase => getPlayerMock()),
+        getPlayer: jest.fn((): PlayerBase<any> => getPlayerMock()),
         heartbeat: jest.fn(),
         trigger: jest.fn(),
         isPlaying: jest.fn(),

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 {
@@ -21,7 +21,7 @@ export interface ActionsWithPayloadMap {
 
 export interface IPlayerUI {
     seeking?: Seeking;
-    getPlayer: () => PlayerBase,
+    getPlayer: () => PlayerBase<any>,
     disableHiding: () => void,
     enableHiding: () => void,
     disableSeeking: () => void,

package/packages/router/src/Route.tsx

@@ -3,7 +3,6 @@ import {
     Component,
     createRef,
     detachNode,
-    Reference,
     replaceNode,
 } from '@24i/bigscreen-sdk/jsx';
 import { filter, forEach } from '@24i/bigscreen-sdk/perf-utils/array';
@@ -14,9 +13,9 @@ import { IRoute, RouteParams } from './types';
 
 type Props = {
     path: string,
-    domParent?: Reference<HTMLElement>;
     regexpPath?: RegExp,
     paramNames?: string[],
+    isDetachable?: boolean;
     Component: Function,
 };
 
@@ -27,10 +26,18 @@ export class Route extends Component<Props> {
 
     isDetached = false;
 
+    domParent: HTMLElement | null = null;
+
     domRef = createRef<HTMLDivElement>();
 
     component = createRef<IRoute | null>();
 
+    componentDidMount() {
+        const { isDetachable } = this.props;
+        this.domParent = this.domRef.current?.parentElement!;
+        if (isDetachable) this.detach();
+    }
+
     getParams(): RouteParams {
         const { regexpPath, paramNames } = this.props;
         if (!paramNames || !regexpPath) return {};
@@ -56,6 +63,7 @@ export class Route extends Component<Props> {
 
     show() {
         menuService.addEventListener('visibilitychange', this.onMenuVisibilityChange);
+        this.showRoute();
         if (!this.wasCreated) {
             this.mountRoute();
             this.component.current?.activate(this.getParams());
@@ -66,7 +74,10 @@ export class Route extends Component<Props> {
 
     hide() {
         menuService.removeEventListener('visibilitychange', this.onMenuVisibilityChange);
-        this.deactivate();
+        if (this.wasCreated) {
+            this.component.current?.deactivate();
+            this.hideRoute();
+        }
     }
 
     replace(newRoute: Route) {
@@ -78,9 +89,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;
         }
     }
@@ -104,12 +114,14 @@ export class Route extends Component<Props> {
         }
     }
 
-    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() {
@@ -122,8 +134,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

@@ -28,8 +28,6 @@ const filterNulls = (allChildren: (JSX.Element | null)[]) => (
 export class Router extends Component<Props> {
     paths: { [key: string]: RoutePath } = {};
 
-    routerDomRef = createRef<HTMLDivElement>();
-
     static defaultProps = {
         defaultPath: '/',
         detachInactiveRoutes: true,
@@ -40,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();
     }
 
@@ -95,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,
@@ -110,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;
         }
@@ -144,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>(),
@@ -169,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];
@@ -198,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>
-        );
-    }
 }