diff --git a/src/components/structures/RoomView.js b/src/components/structures/RoomView.js index be77a22101..78c206a28a 100644 --- a/src/components/structures/RoomView.js +++ b/src/components/structures/RoomView.js @@ -1554,304 +1554,307 @@ module.exports = React.createClass({ ); } - } else { - var scrollheader_classes = classNames({ - mx_RoomView_scrollheader: true, - loading: this.state.paginating - }); + } - var statusBar; + // We have successfully loaded this room, and are not previewing. + // Display the "normal" room view. - // for testing UI... - // this.state.upload = { - // uploadedBytes: 123493, - // totalBytes: 347534, - // fileName: "testing_fooble.jpg", - // } + var scrollheader_classes = classNames({ + mx_RoomView_scrollheader: true, + loading: this.state.paginating + }); - if (ContentMessages.getCurrentUploads().length > 0) { - var UploadBar = sdk.getComponent('structures.UploadBar'); - statusBar = - } else if (!this.state.searchResults) { - var typingString = this.getWhoIsTypingString(); - // typingString = "S͚͍̭̪̤͙̱͙̖̥͙̥̤̻̙͕͓͂̌ͬ͐̂k̜̝͎̰̥̻̼̂̌͛͗͊̅̒͂̊̍̍͌̈̈́͌̋̊ͬa͉̯͚̺̗̳̩ͪ̋̑͌̓̆̍̂̉̏̅̆ͧ̌̑v̲̲̪̝ͥ̌ͨͮͭ̊͆̾ͮ̍ͮ͑̚e̮̙͈̱̘͕̼̮͒ͩͨͫ̃͗̇ͩ͒ͣͦ͒̄̍͐ͣ̿ͥṘ̗̺͇̺̺͔̄́̊̓͊̍̃ͨ̚ā̼͎̘̟̼͎̜̪̪͚̋ͨͨͧ̓ͦͯͤ̄͆̋͂ͩ͌ͧͅt̙̙̹̗̦͖̞ͫͪ͑̑̅ͪ̃̚ͅ is typing..."; - var unreadMsgs = this.getUnreadMessagesString(); - // no conn bar trumps unread count since you can't get unread messages - // without a connection! (technically may already have some but meh) - // It also trumps the "some not sent" msg since you can't resend without - // a connection! - if (this.state.syncState === "ERROR") { - statusBar = ( -
- /!\ -
-
- Connectivity to the server has been lost. -
-
- Sent messages will be stored until your connection has returned. -
+ var statusBar; + + // for testing UI... + // this.state.upload = { + // uploadedBytes: 123493, + // totalBytes: 347534, + // fileName: "testing_fooble.jpg", + // } + + if (ContentMessages.getCurrentUploads().length > 0) { + var UploadBar = sdk.getComponent('structures.UploadBar'); + statusBar = + } else if (!this.state.searchResults) { + var typingString = this.getWhoIsTypingString(); + // typingString = "S͚͍̭̪̤͙̱͙̖̥͙̥̤̻̙͕͓͂̌ͬ͐̂k̜̝͎̰̥̻̼̂̌͛͗͊̅̒͂̊̍̍͌̈̈́͌̋̊ͬa͉̯͚̺̗̳̩ͪ̋̑͌̓̆̍̂̉̏̅̆ͧ̌̑v̲̲̪̝ͥ̌ͨͮͭ̊͆̾ͮ̍ͮ͑̚e̮̙͈̱̘͕̼̮͒ͩͨͫ̃͗̇ͩ͒ͣͦ͒̄̍͐ͣ̿ͥṘ̗̺͇̺̺͔̄́̊̓͊̍̃ͨ̚ā̼͎̘̟̼͎̜̪̪͚̋ͨͨͧ̓ͦͯͤ̄͆̋͂ͩ͌ͧͅt̙̙̹̗̦͖̞ͫͪ͑̑̅ͪ̃̚ͅ is typing..."; + var unreadMsgs = this.getUnreadMessagesString(); + // no conn bar trumps unread count since you can't get unread messages + // without a connection! (technically may already have some but meh) + // It also trumps the "some not sent" msg since you can't resend without + // a connection! + if (this.state.syncState === "ERROR") { + statusBar = ( +
+ /!\ +
+
+ Connectivity to the server has been lost. +
+
+ Sent messages will be stored until your connection has returned.
- ); - } - else if (this.tabComplete.isTabCompleting()) { - var TabCompleteBar = sdk.getComponent('rooms.TabCompleteBar'); - statusBar = ( -
-
...
-
- -
- - Auto-complete -
-
-
- ); - } - else if (this.state.hasUnsentMessages) { - statusBar = ( -
- /!\ -
-
- Some of your messages have not been sent. -
-
- - Resend all now - or select individual messages to re-send. -
-
-
- ); - } - // unread count trumps who is typing since the unread count is only - // set when you've scrolled up - else if (unreadMsgs) { - statusBar = ( -
- - {unreadMsgs} -
- ); - } - else if (typingString) { - statusBar = ( -
-
...
- {typingString} -
- ); - } - else if (!this.state.atEndOfLiveTimeline) { - statusBar = ( -
- Scroll to bottom of page -
- ); - } - } - - var aux = null; - if (this.state.editingRoomSettings) { - aux = ; - } - else if (this.state.uploadingRoomSettings) { - aux = ; - } - else if (this.state.searching) { - aux = ; - } - else if (this.state.guestsCanJoin && MatrixClientPeg.get().isGuest() && - (!myMember || myMember.membership !== "join")) { - aux = ( - - ); - } - else if (this.state.canPeek && - (!myMember || myMember.membership !== "join")) { - aux = ( - - ); - } - - var conferenceCallNotification = null; - if (this.state.displayConfCallNotification) { - var supportedText; - if (!MatrixClientPeg.get().supportsVoip()) { - supportedText = " (unsupported)"; - } - conferenceCallNotification = ( -
- Ongoing conference call {supportedText}
); } - - var fileDropTarget = null; - if (this.state.draggingFile) { - fileDropTarget =
-
-
- Drop file here to upload -
-
; + else if (this.tabComplete.isTabCompleting()) { + var TabCompleteBar = sdk.getComponent('rooms.TabCompleteBar'); + statusBar = ( +
+
...
+
+ +
+ + Auto-complete +
+
+
+ ); } + else if (this.state.hasUnsentMessages) { + statusBar = ( +
+ /!\ +
+
+ Some of your messages have not been sent. +
+
+ + Resend all now + or select individual messages to re-send. +
+
+
+ ); + } + // unread count trumps who is typing since the unread count is only + // set when you've scrolled up + else if (unreadMsgs) { + statusBar = ( +
+ + {unreadMsgs} +
+ ); + } + else if (typingString) { + statusBar = ( +
+
...
+ {typingString} +
+ ); + } + else if (!this.state.atEndOfLiveTimeline) { + statusBar = ( +
+ Scroll to bottom of page +
+ ); + } + } - var messageComposer, searchInfo; - var canSpeak = ( - // joined and not showing search results - myMember && (myMember.membership == 'join') && !this.state.searchResults + var aux = null; + if (this.state.editingRoomSettings) { + aux = ; + } + else if (this.state.uploadingRoomSettings) { + aux = ; + } + else if (this.state.searching) { + aux = ; + } + else if (this.state.guestsCanJoin && MatrixClientPeg.get().isGuest() && + (!myMember || myMember.membership !== "join")) { + aux = ( + ); - if (canSpeak) { - messageComposer = - + } + else if (this.state.canPeek && + (!myMember || myMember.membership !== "join")) { + aux = ( + + ); + } + + var conferenceCallNotification = null; + if (this.state.displayConfCallNotification) { + var supportedText; + if (!MatrixClientPeg.get().supportsVoip()) { + supportedText = " (unsupported)"; } - - // TODO: Why aren't we storing the term/scope/count in this format - // in this.state if this is what RoomHeader desires? - if (this.state.searchResults) { - searchInfo = { - searchTerm : this.state.searchTerm, - searchScope : this.state.searchScope, - searchCount : this.state.searchResults.count, - }; - } - - var call = CallHandler.getCallForRoom(this.props.roomId); - //var call = CallHandler.getAnyActiveCall(); - var inCall = false; - if (call && (this.state.callState !== 'ended' && this.state.callState !== 'ringing')) { - inCall = true; - var zoomButton, voiceMuteButton, videoMuteButton; - - if (call.type === "video") { - zoomButton = ( -
- -
- ); - - videoMuteButton = -
- {call.isLocalVideoMuted() -
- } - voiceMuteButton = -
- {call.isMicrophoneMuted() -
- - if (!statusBar) { - statusBar = -
- - Active call -
; - } - - statusBar = -
- { voiceMuteButton } - { videoMuteButton } - { zoomButton } - { statusBar } - -
- } - - // if we have search results, we keep the messagepanel (so that it preserves its - // scroll state), but hide it. - var searchResultsPanel; - var hideMessagePanel = false; - - if (this.state.searchResults) { - searchResultsPanel = ( - -
  • - {this.getSearchResultTiles()} -     - ); - hideMessagePanel = true; - } - - var messagePanel; - - // just show a spinner while the timeline loads. - // - // put it in a div of the right class (mx_RoomView_messagePanel) so - // that the order in the roomview flexbox is correct, and - // mx_RoomView_messageListWrapper to position the inner div in the - // right place. - // - // Note that the click-on-search-result functionality relies on the - // fact that the messagePanel is hidden while the timeline reloads, - // but that the RoomHeader (complete with search term) continues to - // exist. - if (this.state.timelineLoading) { - messagePanel = ( -
    - -
    - ); - } else { - // it's important that stickyBottom = false on this, otherwise if somebody hits the - // bottom of the loaded events when viewing historical messages, we get stuck in a - // loop of paginating our way through the entire history of the room. - messagePanel = ( - -
  • - {this.getEventTiles()} -     - ); - } - - return ( -
    - -
    - { fileDropTarget } - - { conferenceCallNotification } - { aux } -
    - { messagePanel } - { searchResultsPanel } -
    -
    -
    - { statusBar } -
    -
    - { messageComposer } + conferenceCallNotification = ( +
    + Ongoing conference call {supportedText}
    ); } + + var fileDropTarget = null; + if (this.state.draggingFile) { + fileDropTarget =
    +
    +
    + Drop file here to upload +
    +
    ; + } + + var messageComposer, searchInfo; + var canSpeak = ( + // joined and not showing search results + myMember && (myMember.membership == 'join') && !this.state.searchResults + ); + if (canSpeak) { + messageComposer = + + } + + // TODO: Why aren't we storing the term/scope/count in this format + // in this.state if this is what RoomHeader desires? + if (this.state.searchResults) { + searchInfo = { + searchTerm : this.state.searchTerm, + searchScope : this.state.searchScope, + searchCount : this.state.searchResults.count, + }; + } + + var call = CallHandler.getCallForRoom(this.props.roomId); + //var call = CallHandler.getAnyActiveCall(); + var inCall = false; + if (call && (this.state.callState !== 'ended' && this.state.callState !== 'ringing')) { + inCall = true; + var zoomButton, voiceMuteButton, videoMuteButton; + + if (call.type === "video") { + zoomButton = ( +
    + +
    + ); + + videoMuteButton = +
    + {call.isLocalVideoMuted() +
    + } + voiceMuteButton = +
    + {call.isMicrophoneMuted() +
    + + if (!statusBar) { + statusBar = +
    + + Active call +
    ; + } + + statusBar = +
    + { voiceMuteButton } + { videoMuteButton } + { zoomButton } + { statusBar } + +
    + } + + // if we have search results, we keep the messagepanel (so that it preserves its + // scroll state), but hide it. + var searchResultsPanel; + var hideMessagePanel = false; + + if (this.state.searchResults) { + searchResultsPanel = ( + +
  • + {this.getSearchResultTiles()} +     + ); + hideMessagePanel = true; + } + + var messagePanel; + + // just show a spinner while the timeline loads. + // + // put it in a div of the right class (mx_RoomView_messagePanel) so + // that the order in the roomview flexbox is correct, and + // mx_RoomView_messageListWrapper to position the inner div in the + // right place. + // + // Note that the click-on-search-result functionality relies on the + // fact that the messagePanel is hidden while the timeline reloads, + // but that the RoomHeader (complete with search term) continues to + // exist. + if (this.state.timelineLoading) { + messagePanel = ( +
    + +
    + ); + } else { + // it's important that stickyBottom = false on this, otherwise if somebody hits the + // bottom of the loaded events when viewing historical messages, we get stuck in a + // loop of paginating our way through the entire history of the room. + messagePanel = ( + +
  • + {this.getEventTiles()} +     + ); + } + + return ( +
    + +
    + { fileDropTarget } + + { conferenceCallNotification } + { aux } +
    + { messagePanel } + { searchResultsPanel } +
    +
    +
    + { statusBar } +
    +
    + { messageComposer } +
    + ); }, });