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.3KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118
  1. import { getLocationContextRoot } from '../../base/util';
  2. import '../../room-lock';
  3. import { AbstractApp } from './AbstractApp';
  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. * Gets a Location object from the window with information about the current
  36. * location of the document.
  37. *
  38. * @inheritdoc
  39. */
  40. getWindowLocation() {
  41. return window.location;
  42. }
  43. /**
  44. * Gets the context root of this Web App from window.location.
  45. *
  46. * @private
  47. * @returns {string} The context root of window.location i.e. this Web App.
  48. */
  49. _getWindowLocationContextRoot() {
  50. return getLocationContextRoot(this.getWindowLocation());
  51. }
  52. /**
  53. * Navigates to a specific Route (via platform-specific means).
  54. *
  55. * @param {Route} route - The Route to which to navigate.
  56. * @protected
  57. * @returns {void}
  58. */
  59. _navigate(route) {
  60. let path;
  61. if (route) {
  62. path = route.path;
  63. const store = this._getStore();
  64. // The syntax :room bellow is defined by react-router. It "matches a
  65. // URL segment up to the next /, ?, or #. The matched string is
  66. // called a param."
  67. path
  68. = path.replace(
  69. /:room/g,
  70. store.getState()['features/base/conference'].room);
  71. path = this._routePath2WindowLocationPathname(path);
  72. }
  73. // Navigate to the specified Route.
  74. const windowLocation = this.getWindowLocation();
  75. if (!route || windowLocation.pathname === path) {
  76. // The browser is at the specified path already and what remains is
  77. // to make this App instance aware of the route to be rendered at
  78. // the current location.
  79. super._navigate(route);
  80. } else {
  81. // The browser must go to the specified location. Once the specified
  82. // location becomes current, the App will be made aware of the route
  83. // to be rendered at it.
  84. windowLocation.pathname = path;
  85. }
  86. }
  87. /**
  88. * Converts a specific Route path to a window.location.pathname.
  89. *
  90. * @param {string} path - A Route path to be converted to/represeted as a
  91. * window.location.pathname.
  92. * @private
  93. * @returns {string} A window.location.pathname-compatible representation of
  94. * the specified Route path.
  95. */
  96. _routePath2WindowLocationPathname(path) {
  97. let pathname = this.state.windowLocationContextRoot;
  98. pathname.endsWith('/') || (pathname += '/');
  99. pathname += path.startsWith('/') ? path.substring(1) : path;
  100. return pathname;
  101. }
  102. }