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

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

@@ -1,42 +1,33 @@
 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';
 import { PlayerTime } from './PlayerTime';
 import { getLiveProgressBasedOnCurrentTime } from './timeUtils';
-import { IPlayerUIWithSeeking, PlayerUICommonProps } from './types';
+import { PlayerUICommonProps } from './types';
 
 const CONSECUTIVE_TIMEOUT = 500;
 const FAST_TRESHOLD = 5;
 const SLOW_TIME = 10000;
-const FAST_TIME = 30000;
-const SAFE_END_MARGIN = 10000;
+const FAST_TIME = 20000;
 const TO_PERCENT = 100;
 
-type Props = {
-    ui: IPlayerUIWithSeeking;
-    children?: JSX.Element;
-} & PlayerUICommonProps;
+type Props = PlayerUICommonProps;
 
 export class Seekbar extends Component<Props> implements IFocusable {
     wrap = createRef<HTMLDivElement>();
 
-    seekBarWrap = createRef<HTMLDivElement>();
-
     seekBar = createRef<HTMLDivElement>();
 
     seekPoint = createRef<HTMLDivElement>();
 
     seekTime = createRef<PlayerTime>();
 
-    displaySeekPoint = getDisplayToggler(this.seekPoint);
-
-    leftConsecutiveness = 0;
+    leftConsecutives = 0;
 
-    rightConsecutiveness = 0;
+    rightConsecutives = 0;
 
     leftConsecutiveTimeout = createTimeout();
 
@@ -46,10 +37,6 @@ export class Seekbar extends Component<Props> implements IFocusable {
 
     duration = 0;
 
-    isMouseDownPressed = false;
-
-    seekingDisabled = false;
-
     static defaultProps = {
         className: '',
     };
@@ -58,59 +45,18 @@ export class Seekbar extends Component<Props> implements IFocusable {
         const { ui } = this.props;
         const playerInstance = ui.getPlayer();
         this.duration = playerInstance.duration;
-        document.addEventListener('mouseup', this.onMouseUp);
-        document.addEventListener('mousemove', this.onMouseMove);
         ui.seeking.addEventListener('seektimeupdate', this.onSeekTimeUpdate);
-        ui.seeking.addEventListener('stopautomaticseek', this.onStopAutomaticSeek);
         ui.getPlayer().addEventListener('timeupdate', this.onTimeUpdate);
         ui.getPlayer().addEventListener('durationchange', this.onDurationUpdate);
     }
 
     componentWillUnmount() {
         const { ui } = this.props;
-        document.removeEventListener('mouseup', this.onMouseUp);
-        document.removeEventListener('mousemove', this.onMouseMove);
         ui.seeking.removeEventListener('seektimeupdate', this.onSeekTimeUpdate);
-        ui.seeking.removeEventListener('stopautomaticseek', this.onStopAutomaticSeek);
         ui.getPlayer().removeEventListener('timeupdate', this.onTimeUpdate);
         ui.getPlayer().removeEventListener('durationchange', this.onDurationUpdate);
     }
 
-    onMouseMove = (event: MouseEvent) => {
-        if (!this.isMouseDownPressed || this.seekingDisabled) return;
-        const { ui: { seeking } } = this.props;
-        const wrapRect = this.wrap.current!.getBoundingClientRect();
-        const clientX = event.clientX - wrapRect.left;
-        const wrapRight = wrapRect.right - wrapRect.left;
-        let percentage = (TO_PERCENT * clientX) / wrapRight;
-        percentage = Math.max(0, Math.min(TO_PERCENT, percentage));
-        const seekTo = Math.round((this.duration / TO_PERCENT) * percentage);
-        seeking.setSeekTime(seekTo);
-    };
-
-    onMouseClick = (event: MouseEvent) => {
-        if (this.seekingDisabled) return;
-        const { ui: { seeking } } = this.props;
-        const wrapWidth = this.wrap.current!.offsetWidth;
-        const percentage = (TO_PERCENT * event.offsetX) / wrapWidth;
-        const seekTo = Math.round((this.duration / TO_PERCENT) * percentage);
-        seeking.setSeekTime(seekTo);
-        seeking.confirmSeek();
-    };
-
-    onMouseDown = () => {
-        const { ui } = this.props;
-        this.isMouseDownPressed = true;
-        ui.disableHiding();
-    };
-
-    onMouseUp = () => {
-        const { ui } = this.props;
-        this.isMouseDownPressed = false;
-        ui.seeking.confirmSeek();
-        ui.enableHiding();
-    };
-
     onKeyDown = (event: KeyboardEvent) => {
         const processed = switchByKey(event, {
             LEFT: this.onLeft,
@@ -126,50 +72,34 @@ export class Seekbar extends Component<Props> implements IFocusable {
     };
 
     onLeft = () => {
-        if (this.seekingDisabled) return true;
         const { ui } = this.props;
-        this.leftConsecutiveness += 1;
+        this.leftConsecutives += 1;
         if (ui.seeking.isAutomaticallySeeking()) {
             ui.seeking.stopAutomaticSeek();
         }
-        ui.seeking.seekBackward(this.leftConsecutiveness >= FAST_TRESHOLD ? FAST_TIME : SLOW_TIME);
+        ui.seeking.seekBackward(this.leftConsecutives >= FAST_TRESHOLD ? FAST_TIME : SLOW_TIME);
         this.leftConsecutiveTimeout.set(() => {
-            this.leftConsecutiveness = 0;
+            this.leftConsecutives = 0;
         }, CONSECUTIVE_TIMEOUT);
         return true;
     };
 
     onRight = () => {
-        if (this.seekingDisabled) return true;
         const { ui } = this.props;
-        const { seekTime } = ui.seeking;
-        if (seekTime == null && this.currentTime + SLOW_TIME >= this.duration) return true;
-        this.rightConsecutiveness += 1;
+        this.rightConsecutives += 1;
         if (ui.seeking.isAutomaticallySeeking()) {
             ui.seeking.stopAutomaticSeek();
         }
-        const isFastSeeking = this.rightConsecutiveness >= FAST_TRESHOLD;
-        if (
-            (seekTime != null
-              && (seekTime + SLOW_TIME >= this.duration - SAFE_END_MARGIN
-              || (isFastSeeking && seekTime + FAST_TIME >= this.duration - SAFE_END_MARGIN)))
-            || (seekTime == null && this.currentTime >= this.duration - SAFE_END_MARGIN)
-        ) {
-            ui.seeking.setSeekTime(this.duration - SAFE_END_MARGIN);
-        } else {
-            ui.seeking.seekForward(isFastSeeking ? FAST_TIME : SLOW_TIME);
-        }
+        ui.seeking.seekForward(this.rightConsecutives >= FAST_TRESHOLD ? FAST_TIME : SLOW_TIME);
         this.rightConsecutiveTimeout.set(() => {
-            this.rightConsecutiveness = 0;
+            this.rightConsecutives = 0;
         }, CONSECUTIVE_TIMEOUT);
         return true;
     };
 
     onEnter = () => {
-        const { ui: { seeking, getPlayer } } = this.props;
-        const player = getPlayer();
-        if (!player.playing) player.play();
-        return seeking.confirmSeek();
+        const { ui } = this.props;
+        return ui.seeking.confirmSeek();
     };
 
     onSeekTimeUpdate = (seekTime: number) => {
@@ -178,11 +108,6 @@ export class Seekbar extends Component<Props> implements IFocusable {
         this.updateSeekBar();
     };
 
-    onStopAutomaticSeek = () => {
-        const { ui } = this.props;
-        ui.enableHiding();
-    };
-
     onTimeUpdate = ({ currentTime }: ITimeUpdateEvent) => {
         const { ui } = this.props;
         this.currentTime = currentTime;
@@ -196,7 +121,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;
@@ -208,7 +133,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,
@@ -235,34 +160,17 @@ export class Seekbar extends Component<Props> implements IFocusable {
         this.seekPoint.current!.style.left = `${percentTime}%`;
     }
 
-    disableSeeking() {
-        this.seekingDisabled = true;
-        this.displaySeekPoint.hide();
-    }
-
-    enableSeeking() {
-        this.seekingDisabled = false;
-        this.displaySeekPoint.show();
-    }
-
-    isSeekingDisabled() {
-        return this.seekingDisabled;
-    }
-
     render() {
-        const { children, className } = this.props;
+        const { className } = this.props;
         return (
             <div
                 className={`seek-bar ${className}`}
                 ref={this.wrap}
                 tabIndex={0}
                 onKeyDown={this.onKeyDown}
-                onMouseDown={this.onMouseDown}
-                onClick={this.onMouseClick}
                 onBlur={this.onBlur}
             >
-                {children}
-                <div className="bar" ref={this.seekBarWrap}>
+                <div className="bar">
                     <div className="bg" ref={this.seekBar} />
                 </div>
                 <div className="point" ref={this.seekPoint}>

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

@@ -1,12 +1,9 @@
 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 { createInterval } from '@24i/bigscreen-sdk/utils/timers';
+import { PlayerBase } from '@24i/player-base';
 
-const DEFAULT_SEEK_TIME = 10000;
-const FAST_SEEK_TIME = 30000;
+const DEFAULT_SEEK_TIME = 20000;
 const AUTOMATIC_SEEK_INTERVAL = 300;
-const FAST_THRESHOLD = 5;
-const CONSECUTIVE_TIMEOUT = 500;
 
 interface SeekingEventsMap extends EventMapType {
     'seektimeupdate': (payload: number) => void,
@@ -26,21 +23,13 @@ export class Seeking implements IEvents<SeekingEventsMap> {
 
     automaticSeekInterval = createInterval();
 
-    player: PlayerBase | null;
+    player: PlayerBase<any> | null;
 
     isAutomaticallySeekingForward = false;
 
     isAutomaticallySeekingBackward = false;
 
-    ffConsecutiveness = 0;
-
-    rewConsecutiveness = 0;
-
-    ffConsecutiveTimeout = createTimeout();
-
-    rewConsecutiveTimeout = createTimeout();
-
-    constructor(player: PlayerBase | null = null) {
+    constructor(player: PlayerBase<any> | null = null) {
         this.player = player;
     }
 
@@ -52,7 +41,7 @@ export class Seeking implements IEvents<SeekingEventsMap> {
         this.player!.removeEventListener('seeked', this.nullSeekTime);
     }
 
-    setPlayer(player: PlayerBase) {
+    setPlayer(player: PlayerBase<any>) {
         this.player = player;
     }
 
@@ -87,53 +76,28 @@ export class Seeking implements IEvents<SeekingEventsMap> {
         this.triggerEvent('seektimeupdate', this.seekTime!);
     }
 
-    automaticSeekForward() {
-        if (this.isAutomaticallySeekingForward) {
-            this.ffConsecutiveTimeout.set(() => {
-                this.ffConsecutiveness = 0;
-            }, CONSECUTIVE_TIMEOUT);
-            this.ffConsecutiveness += 1;
-            if (this.ffConsecutiveness === FAST_THRESHOLD) {
-                this.automaticSeekInterval.set(
-                    () => this.seekForward(FAST_SEEK_TIME),
-                    AUTOMATIC_SEEK_INTERVAL,
-                );
-            }
-            return;
-        }
+    startAutomaticSeekForward() {
+        this.stopAutomaticSeek();
         this.isAutomaticallySeekingForward = true;
-        this.ffConsecutiveness += 1;
         this.seekForward();
-        this.automaticSeekInterval.set(() => this.seekForward(), AUTOMATIC_SEEK_INTERVAL);
+        this.automaticSeekInterval.set(() => {
+            this.seekForward();
+        }, AUTOMATIC_SEEK_INTERVAL);
     }
 
-    automaticSeekBackward() {
-        if (this.isAutomaticallySeekingBackward) {
-            this.rewConsecutiveTimeout.set(() => {
-                this.rewConsecutiveness = 0;
-            }, CONSECUTIVE_TIMEOUT);
-            this.rewConsecutiveness += 1;
-            if (this.rewConsecutiveness === FAST_THRESHOLD) {
-                this.automaticSeekInterval.set(
-                    () => this.seekBackward(FAST_SEEK_TIME),
-                    AUTOMATIC_SEEK_INTERVAL,
-                );
-            }
-            return;
-        }
+    startAutomaticSeekBackward() {
+        this.stopAutomaticSeek();
         this.isAutomaticallySeekingBackward = true;
-        this.rewConsecutiveness += 1;
         this.seekBackward();
-        this.automaticSeekInterval.set(() => this.seekBackward(), AUTOMATIC_SEEK_INTERVAL);
+        this.automaticSeekInterval.set(() => {
+            this.seekBackward();
+        }, AUTOMATIC_SEEK_INTERVAL);
     }
 
     stopAutomaticSeek() {
-        if (this.isAutomaticallySeeking()) this.triggerEvent('stopautomaticseek');
         this.automaticSeekInterval.clear();
         this.isAutomaticallySeekingForward = false;
         this.isAutomaticallySeekingBackward = false;
-        this.ffConsecutiveness = 0;
-        this.rewConsecutiveness = 0;
     }
 
     cancelSeek() {
@@ -146,11 +110,6 @@ export class Seeking implements IEvents<SeekingEventsMap> {
         this.triggerEvent('seektimeupdate', this.seekTime!);
     };
 
-    setSeekTime = (seekTime: number) => {
-        this.seekTime = seekTime;
-        this.triggerEvent('seektimeupdate', this.seekTime!);
-    };
-
     confirmSeek() {
         if (!this.player) return false;
         this.stopAutomaticSeek();

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/index.ts

@@ -1,6 +1,5 @@
 export { PlayerUI } from './PlayerUI';
 export type { PlayerUIState } from './PlayerUI';
-export type { IPlayerUIWithSeeking } from './types';
 export { BackwardButton } from './BackwardButton';
 export { CurrentTime } from './CurrentTime';
 export { Duration } from './Duration';

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

@@ -1,8 +1,8 @@
-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';
+import { IPlayerUI } from './types';
 
-const getSeekingMock = (): jest.Mocked<IPlayerUIWithSeeking['seeking']> => ({
+const getSeekingMock = (): jest.Mocked<IPlayerUI['seeking']> => ({
     events: {} as EventsManager<{}>,
     addEventListener: jest.fn(),
     removeEventListener: jest.fn(),
@@ -13,16 +13,12 @@ const getSeekingMock = (): jest.Mocked<IPlayerUIWithSeeking['seeking']> => ({
     isAutomaticallySeeking: jest.fn(),
     isAutomaticallySeekingForward: false,
     isAutomaticallySeekingBackward: false,
-    ffConsecutiveness: 0,
-    rewConsecutiveness: 0,
-    ffConsecutiveTimeout: null!,
-    rewConsecutiveTimeout: null!,
     isSeeking: jest.fn(),
     startSeeking: jest.fn(),
     seekForward: jest.fn(),
     seekBackward: jest.fn(),
-    automaticSeekForward: jest.fn(),
-    automaticSeekBackward: jest.fn(),
+    startAutomaticSeekForward: jest.fn(),
+    startAutomaticSeekBackward: jest.fn(),
     stopAutomaticSeek: jest.fn(),
     cancelSeek: jest.fn(),
     confirmSeek: jest.fn(),
@@ -30,36 +26,16 @@ const getSeekingMock = (): jest.Mocked<IPlayerUIWithSeeking['seeking']> => ({
     unsubscribeEvents: jest.fn(),
     setPlayer: jest.fn(),
     nullSeekTime: jest.fn(),
-    setSeekTime: jest.fn(),
 });
 
-const PLAYER_MOCK_DURATION = 60000;
+export const getPlayerMock = (): PlayerBase<any> => new PlayerBaseMock();
 
-export const getPlayerMock = (): PlayerBase => {
-    const initialConfig: IPlayerProperties = {
-        source: {
-            url: '',
-        },
-    };
-    const parentElement = document.createElement('div');
-
-    const playerMock = new PlayerBaseMock(initialConfig, parentElement);
-    playerMock.source = initialConfig.source;
-    jest.spyOn(playerMock, 'duration', 'get').mockReturnValue(PLAYER_MOCK_DURATION);
-
-    return playerMock;
-};
-
-export const getUiMock = (): { ui: jest.Mocked<IPlayerUIWithSeeking> } => ({
+export const getUiMock = (): { ui: jest.Mocked<IPlayerUI> } => ({
     ui: {
-        getPlayer: jest.fn((): PlayerBase => getPlayerMock()),
+        getPlayer: jest.fn((): PlayerBase<any> => getPlayerMock()),
         heartbeat: jest.fn(),
         trigger: jest.fn(),
         isPlaying: jest.fn(),
-        enableHiding: jest.fn(),
-        disableHiding: jest.fn(),
-        enableSeeking: jest.fn(),
-        disableSeeking: jest.fn(),
         seeking: getSeekingMock(),
     },
 });

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/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}
+            />
         );
     }
 }