您最多选择25个主题 主题必须以字母或数字开头,可以包含连字符 (-),并且长度不得超过35个字符

App.web.js 3.5KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124
  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. let promise;
  76. if (!route || windowLocation.pathname === path) {
  77. // The browser is at the specified path already and what remains is
  78. // to make this App instance aware of the route to be rendered at
  79. // the current location.
  80. // XXX Refer to the super's _navigate for an explanation why a
  81. // Promise is returned.
  82. promise = super._navigate(route);
  83. } else {
  84. // The browser must go to the specified location. Once the specified
  85. // location becomes current, the App will be made aware of the route
  86. // to be rendered at it.
  87. windowLocation.pathname = path;
  88. }
  89. return promise || Promise.resolve();
  90. }
  91. /**
  92. * Converts a specific Route path to a window.location.pathname.
  93. *
  94. * @param {string} path - A Route path to be converted to/represeted as a
  95. * window.location.pathname.
  96. * @private
  97. * @returns {string} A window.location.pathname-compatible representation of
  98. * the specified Route path.
  99. */
  100. _routePath2WindowLocationPathname(path) {
  101. let pathname = this.state.windowLocationContextRoot;
  102. pathname.endsWith('/') || (pathname += '/');
  103. pathname += path.startsWith('/') ? path.substring(1) : path;
  104. return pathname;
  105. }
  106. }