jiti-meet/react/features/app/components/App.web.js

144 lines
4.0 KiB
JavaScript
Raw Normal View History

import { AtlasKitThemeProvider } from '@atlaskit/theme';
import React from 'react';
import '../../base/responsive-ui';
2017-07-21 21:12:02 +00:00
import { getLocationContextRoot } from '../../base/util';
import '../../chat';
import '../../room-lock';
2017-07-21 21:12:02 +00:00
import { AbstractApp } from './AbstractApp';
/**
* Root application component.
*
* @extends AbstractApp
*/
export class App extends AbstractApp {
/**
* App component's property types.
*
* @static
*/
static propTypes = AbstractApp.propTypes;
/**
* Initializes a new App instance.
*
* @param {Object} props - The read-only React Component props with which
* the new instance is to be initialized.
*/
constructor(props) {
super(props);
this.state = {
...this.state,
/**
* The context root of window.location i.e. this Web App.
*
* @type {string}
*/
windowLocationContextRoot: this._getWindowLocationContextRoot()
};
}
/**
* Overrides the parent method to inject {@link AtlasKitThemeProvider} as
* the top most component.
*
* @override
*/
_createElement(component, props) {
return (
<AtlasKitThemeProvider mode = 'dark'>
{ super._createElement(component, props) }
</AtlasKitThemeProvider>
);
}
2017-01-15 19:05:17 +00:00
/**
* Gets a Location object from the window with information about the current
* location of the document.
*
* @inheritdoc
*/
2017-03-02 03:33:49 +00:00
getWindowLocation() {
2017-01-15 19:05:17 +00:00
return window.location;
}
/**
* Gets the context root of this Web App from window.location.
*
* @private
* @returns {string} The context root of window.location i.e. this Web App.
*/
_getWindowLocationContextRoot() {
return getLocationContextRoot(this.getWindowLocation());
}
2016-12-12 21:13:17 +00:00
/**
* Navigates to a specific Route (via platform-specific means).
2016-12-12 21:13:17 +00:00
*
* @param {Route} route - The Route to which to navigate.
* @protected
* @returns {void}
2016-12-12 21:13:17 +00:00
*/
_navigate(route) {
let path;
2016-12-12 21:13:17 +00:00
if (route) {
path = route.path;
const store = this._getStore();
// The syntax :room bellow is defined by react-router. It "matches a
// URL segment up to the next /, ?, or #. The matched string is
// called a param."
path
= path.replace(
/:room/g,
store.getState()['features/base/conference'].room);
path = this._routePath2WindowLocationPathname(path);
}
// Navigate to the specified Route.
2017-03-02 03:33:49 +00:00
const windowLocation = this.getWindowLocation();
let promise;
if (!route || windowLocation.pathname === path) {
// The browser is at the specified path already and what remains is
// to make this App instance aware of the route to be rendered at
// the current location.
// XXX Refer to the super's _navigate for an explanation why a
// Promise is returned.
promise = super._navigate(route);
} else {
// The browser must go to the specified location. Once the specified
// location becomes current, the App will be made aware of the route
// to be rendered at it.
windowLocation.pathname = path;
}
return promise || Promise.resolve();
}
/**
* Converts a specific Route path to a window.location.pathname.
*
* @param {string} path - A Route path to be converted to/represeted as a
* window.location.pathname.
* @private
* @returns {string} A window.location.pathname-compatible representation of
* the specified Route path.
*/
_routePath2WindowLocationPathname(path) {
let pathname = this.state.windowLocationContextRoot;
pathname.endsWith('/') || (pathname += '/');
pathname += path.startsWith('/') ? path.substring(1) : path;
return pathname;
}
}