You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

App.web.js 3.6KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130
  1. import { appInit } from '../actions';
  2. import { AbstractApp } from './AbstractApp';
  3. import '../../room-lock';
  4. /**
  5. * Root application component.
  6. *
  7. * @extends AbstractApp
  8. */
  9. export class App extends AbstractApp {
  10. /**
  11. * App component's property types.
  12. *
  13. * @static
  14. */
  15. static propTypes = AbstractApp.propTypes
  16. /**
  17. * Initializes a new App instance.
  18. *
  19. * @param {Object} props - The read-only React Component props with which
  20. * the new instance is to be initialized.
  21. */
  22. constructor(props) {
  23. super(props);
  24. this.state = {
  25. ...this.state,
  26. /**
  27. * The context root of window.location i.e. this Web App.
  28. *
  29. * @type {string}
  30. */
  31. windowLocationContextRoot: this._getWindowLocationContextRoot()
  32. };
  33. }
  34. /**
  35. * Inits the app before component will mount.
  36. *
  37. * @inheritdoc
  38. */
  39. componentWillMount(...args) {
  40. super.componentWillMount(...args);
  41. this._getStore().dispatch(appInit());
  42. }
  43. /**
  44. * Gets a Location object from the window with information about the current
  45. * location of the document.
  46. *
  47. * @inheritdoc
  48. */
  49. getWindowLocation() {
  50. return window.location;
  51. }
  52. /**
  53. * Gets the context root of this Web App from window.location.
  54. *
  55. * @private
  56. * @returns {string} The context root of window.location i.e. this Web App.
  57. */
  58. _getWindowLocationContextRoot() {
  59. const pathname = this.getWindowLocation().pathname;
  60. const contextRootEndIndex = pathname.lastIndexOf('/');
  61. return (
  62. contextRootEndIndex === -1
  63. ? '/'
  64. : pathname.substring(0, contextRootEndIndex + 1));
  65. }
  66. /**
  67. * Navigates to a specific Route (via platform-specific means).
  68. *
  69. * @param {Route} route - The Route to which to navigate.
  70. * @protected
  71. * @returns {void}
  72. */
  73. _navigate(route) {
  74. let path = route.path;
  75. const store = this._getStore();
  76. // The syntax :room bellow is defined by react-router. It "matches a URL
  77. // segment up to the next /, ?, or #. The matched string is called a
  78. // param."
  79. path
  80. = path.replace(
  81. /:room/g,
  82. store.getState()['features/base/conference'].room);
  83. path = this._routePath2WindowLocationPathname(path);
  84. // Navigate to the specified Route.
  85. const windowLocation = this.getWindowLocation();
  86. if (windowLocation.pathname === path) {
  87. // The browser is at the specified path already and what remains is
  88. // to make this App instance aware of the route to be rendered at
  89. // the current location.
  90. super._navigate(route);
  91. } else {
  92. // The browser must go to the specified location. Once the specified
  93. // location becomes current, the App will be made aware of the route
  94. // to be rendered at it.
  95. windowLocation.pathname = path;
  96. }
  97. }
  98. /**
  99. * Converts a specific Route path to a window.location.pathname.
  100. *
  101. * @param {string} path - A Route path to be converted to/represeted as a
  102. * window.location.pathname.
  103. * @private
  104. * @returns {string} A window.location.pathname-compatible representation of
  105. * the specified Route path.
  106. */
  107. _routePath2WindowLocationPathname(path) {
  108. let pathname = this.state.windowLocationContextRoot;
  109. pathname.endsWith('/') || (pathname += '/');
  110. pathname += path.startsWith('/') ? path.substring(1) : path;
  111. return pathname;
  112. }
  113. }