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

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

@@ -1,33 +1,42 @@
 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/player-base';
+import { ITimeUpdateEvent, IDurationChangeEvent } from '@24i/bigscreen-players-engine-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 { PlayerUICommonProps } from './types';
+import { IPlayerUIWithSeeking, PlayerUICommonProps } from './types';
 
 const CONSECUTIVE_TIMEOUT = 500;
 const FAST_TRESHOLD = 5;
 const SLOW_TIME = 10000;
-const FAST_TIME = 20000;
+const FAST_TIME = 30000;
+const SAFE_END_MARGIN = 10000;
 const TO_PERCENT = 100;
 
-type Props = PlayerUICommonProps;
+type Props = {
+    ui: IPlayerUIWithSeeking;
+    children?: JSX.Element;
+} & PlayerUICommonProps;
 
 export class Seekbar extends Component<Props> implements IFocusable {
     wrap = createRef<HTMLDivElement>();
 
+    seekBarWrap = createRef<HTMLDivElement>();
+
     seekBar = createRef<HTMLDivElement>();
 
     seekPoint = createRef<HTMLDivElement>();
 
     seekTime = createRef<PlayerTime>();
 
-    leftConsecutives = 0;
+    displaySeekPoint = getDisplayToggler(this.seekPoint);
+
+    leftConsecutiveness = 0;
 
-    rightConsecutives = 0;
+    rightConsecutiveness = 0;
 
     leftConsecutiveTimeout = createTimeout();
 
@@ -37,6 +46,10 @@ export class Seekbar extends Component<Props> implements IFocusable {
 
     duration = 0;
 
+    isMouseDownPressed = false;
+
+    seekingDisabled = false;
+
     static defaultProps = {
         className: '',
     };
@@ -45,18 +58,59 @@ 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,
@@ -72,34 +126,50 @@ export class Seekbar extends Component<Props> implements IFocusable {
     };
 
     onLeft = () => {
+        if (this.seekingDisabled) return true;
         const { ui } = this.props;
-        this.leftConsecutives += 1;
+        this.leftConsecutiveness += 1;
         if (ui.seeking.isAutomaticallySeeking()) {
             ui.seeking.stopAutomaticSeek();
         }
-        ui.seeking.seekBackward(this.leftConsecutives >= FAST_TRESHOLD ? FAST_TIME : SLOW_TIME);
+        ui.seeking.seekBackward(this.leftConsecutiveness >= FAST_TRESHOLD ? FAST_TIME : SLOW_TIME);
         this.leftConsecutiveTimeout.set(() => {
-            this.leftConsecutives = 0;
+            this.leftConsecutiveness = 0;
         }, CONSECUTIVE_TIMEOUT);
         return true;
     };
 
     onRight = () => {
+        if (this.seekingDisabled) return true;
         const { ui } = this.props;
-        this.rightConsecutives += 1;
+        const { seekTime } = ui.seeking;
+        if (seekTime == null && this.currentTime + SLOW_TIME >= this.duration) return true;
+        this.rightConsecutiveness += 1;
         if (ui.seeking.isAutomaticallySeeking()) {
             ui.seeking.stopAutomaticSeek();
         }
-        ui.seeking.seekForward(this.rightConsecutives >= FAST_TRESHOLD ? FAST_TIME : SLOW_TIME);
+        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);
+        }
         this.rightConsecutiveTimeout.set(() => {
-            this.rightConsecutives = 0;
+            this.rightConsecutiveness = 0;
         }, CONSECUTIVE_TIMEOUT);
         return true;
     };
 
     onEnter = () => {
-        const { ui } = this.props;
-        return ui.seeking.confirmSeek();
+        const { ui: { seeking, getPlayer } } = this.props;
+        const player = getPlayer();
+        if (!player.playing) player.play();
+        return seeking.confirmSeek();
     };
 
     onSeekTimeUpdate = (seekTime: number) => {
@@ -108,6 +178,11 @@ 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;
@@ -121,7 +196,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.getMetadata();
+            const { programStart = 0, programEnd = 0 } = player.metadata;
             this.duration = programEnd - programStart || Date.now();
         } else {
             this.duration = duration;
@@ -133,7 +208,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.getMetadata();
+            const { programStart = 0, programEnd = 0 } = player.metadata;
             const { start, end } = player.seekableRange;
             return getLiveProgressBasedOnCurrentTime(
                 programStart,
@@ -160,17 +235,34 @@ 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 { className } = this.props;
+        const { children, 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}
             >
-                <div className="bar">
+                {children}
+                <div className="bar" ref={this.seekBarWrap}>
                     <div className="bg" ref={this.seekBar} />
                 </div>
                 <div className="point" ref={this.seekPoint}>

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

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

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

@@ -1,5 +1,6 @@
 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 { PlayerBase, PlayerBaseMock } from '@24i/player-base';
+import { IPlayerProperties, PlayerBase, PlayerBaseMock } from '@24i/bigscreen-players-engine-base';
 import { EventsManager } from '@24i/bigscreen-sdk/events-manager';
-import { IPlayerUI } from './types';
+import { IPlayerUIWithSeeking } from './types';
 
-const getSeekingMock = (): jest.Mocked<IPlayerUI['seeking']> => ({
+const getSeekingMock = (): jest.Mocked<IPlayerUIWithSeeking['seeking']> => ({
     events: {} as EventsManager<{}>,
     addEventListener: jest.fn(),
     removeEventListener: jest.fn(),
@@ -13,12 +13,16 @@ const getSeekingMock = (): jest.Mocked<IPlayerUI['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(),
-    startAutomaticSeekForward: jest.fn(),
-    startAutomaticSeekBackward: jest.fn(),
+    automaticSeekForward: jest.fn(),
+    automaticSeekBackward: jest.fn(),
     stopAutomaticSeek: jest.fn(),
     cancelSeek: jest.fn(),
     confirmSeek: jest.fn(),
@@ -26,16 +30,36 @@ const getSeekingMock = (): jest.Mocked<IPlayerUI['seeking']> => ({
     unsubscribeEvents: jest.fn(),
     setPlayer: jest.fn(),
     nullSeekTime: jest.fn(),
+    setSeekTime: jest.fn(),
 });
 
-export const getPlayerMock = (): PlayerBase<any> => new PlayerBaseMock();
+const PLAYER_MOCK_DURATION = 60000;
 
-export const getUiMock = (): { ui: jest.Mocked<IPlayerUI> } => ({
+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> } => ({
     ui: {
-        getPlayer: jest.fn((): PlayerBase<any> => getPlayerMock()),
+        getPlayer: jest.fn((): PlayerBase => 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/player-base';
+import { PlayerBase } from '@24i/bigscreen-players-engine-base';
 import { Seeking } from './Seeking';
 
 export enum PlayerAction {
@@ -20,8 +20,12 @@ export interface ActionsWithPayloadMap {
 }
 
 export interface IPlayerUI {
-    seeking: Seeking;
-    getPlayer: () => PlayerBase<any>,
+    seeking?: Seeking;
+    getPlayer: () => PlayerBase,
+    disableHiding: () => void,
+    enableHiding: () => void,
+    disableSeeking: () => void,
+    enableSeeking: () => void,
     heartbeat: () => void,
     trigger<K extends keyof ActionsWithoutPayloadMap>(action: K): void,
     trigger<K extends keyof ActionsWithPayloadMap>(
@@ -30,6 +34,8 @@ export interface IPlayerUI {
     isPlaying: () => boolean,
 }
 
+export type IPlayerUIWithSeeking = Required<IPlayerUI>;
+
 export type PlayerUICommonProps = {
     ui: IPlayerUI,
     className?: string,

package/packages/router/README.md

@@ -16,6 +16,7 @@ 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,36 +3,38 @@ 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>();
 
-    componentDidMount() {
-        const { isDetachable } = this.props;
-        this.domParent = this.domRef.current?.parentElement!;
-        if (isDetachable) this.detach();
-    }
+    modalService = createRef<ModalService>();
+
+    shouldCallReactivateOnCloseModal = false;
 
     getParams(): RouteParams {
         const { regexpPath, paramNames } = this.props;
@@ -49,21 +51,50 @@ 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() {
-        this.showRoute();
+        menuService.addEventListener('visibilitychange', this.onMenuVisibilityChange);
         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() {
-        if (this.wasCreated) {
-            this.component.current?.deactivate();
-            this.hideRoute();
-        }
+        menuService.removeEventListener('visibilitychange', this.onMenuVisibilityChange);
+        this.deactivate();
     }
 
     replace(newRoute: Route) {
@@ -75,8 +106,9 @@ export class Route extends Component<Props> {
     }
 
     attach() {
+        const { domParent } = this.props;
         if (this.isDetached) {
-            attachNode(this.domRef, this.domParent!);
+            attachNode(this.domRef, domParent!);
             this.isDetached = false;
         }
     }
@@ -94,20 +126,27 @@ export class Route extends Component<Props> {
         }
     }
 
+    private focusModal() {
+        const mountedComponent = this.modalService.current!.getMountedComponent();
+        mountedComponent.current?.focus();
+    }
+
     focus() {
         if (this.wasCreated) {
-            this.component.current?.focus();
+            if (this.modalService.current?.isOpen()) {
+                this.focusModal();
+            } else {
+                this.component.current?.focus();
+            }
         }
     }
 
-    private showRoute() {
-        const { isDetachable } = this.props;
-        if (!isDetachable) this.domRef.current!.style.display = 'block';
+    showRoute() {
+        this.domRef.current!.style.display = 'block';
     }
 
-    private hideRoute() {
-        const { isDetachable } = this.props;
-        if (!isDetachable) this.domRef.current!.style.display = 'none';
+    hideRoute() {
+        this.domRef.current!.style.display = 'none';
     }
 
     private mountRoute() {
@@ -120,13 +159,8 @@ export class Route extends Component<Props> {
     }
 
     render() {
-        const { isDetachable } = this.props;
         return (
-            <div
-                className="route"
-                style={!isDetachable ? { display: 'none' } : {}}
-                ref={this.domRef}
-            />
+            <div className="route" ref={this.domRef} />
         );
     }
 }