/* Copyright 2016 OpenMarket Ltd Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0 Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. */ import React from 'react'; import ReactDOM from 'react-dom'; import classNames from 'classnames'; import UserSettingsStore from '../../UserSettingsStore'; import shouldHideEvent from '../../shouldHideEvent'; import dis from "../../dispatcher"; import sdk from '../../index'; import MatrixClientPeg from '../../MatrixClientPeg'; const MILLIS_IN_DAY = 86400000; /* (almost) stateless UI component which builds the event tiles in the room timeline. */ module.exports = React.createClass({ displayName: 'MessagePanel', propTypes: { // true to give the component a 'display: none' style. hidden: React.PropTypes.bool, // true to show a spinner at the top of the timeline to indicate // back-pagination in progress backPaginating: React.PropTypes.bool, // true to show a spinner at the end of the timeline to indicate // forward-pagination in progress forwardPaginating: React.PropTypes.bool, // the list of MatrixEvents to display events: React.PropTypes.array.isRequired, // ID of an event to highlight. If undefined, no event will be highlighted. highlightedEventId: React.PropTypes.string, // Should we show URL Previews showUrlPreview: React.PropTypes.bool, // event after which we should show a read marker readMarkerEventId: React.PropTypes.string, // whether the read marker should be visible readMarkerVisible: React.PropTypes.bool, // the userid of our user. This is used to suppress the read marker // for pending messages. ourUserId: React.PropTypes.string, // true to suppress the date at the start of the timeline suppressFirstDateSeparator: React.PropTypes.bool, // whether to show read receipts showReadReceipts: React.PropTypes.bool, // true if updates to the event list should cause the scroll panel to // scroll down when we are at the bottom of the window. See ScrollPanel // for more details. stickyBottom: React.PropTypes.bool, // callback which is called when the panel is scrolled. onScroll: React.PropTypes.func, // callback which is called when more content is needed. onFillRequest: React.PropTypes.func, // className for the panel className: React.PropTypes.string.isRequired, // shape parameter to be passed to EventTiles tileShape: React.PropTypes.string, // show twelve hour timestamps isTwelveHour: React.PropTypes.bool, // show timestamps always alwaysShowTimestamps: React.PropTypes.bool, }, componentWillMount: function() { // the event after which we put a visible unread marker on the last // render cycle; null if readMarkerVisible was false or the RM was // suppressed (eg because it was at the end of the timeline) this.currentReadMarkerEventId = null; // the event after which we are showing a disappearing read marker // animation this.currentGhostEventId = null; // opaque readreceipt info for each userId; used by ReadReceiptMarker // to manage its animations this._readReceiptMap = {}; // Remember the read marker ghost node so we can do the cleanup that // Velocity requires this._readMarkerGhostNode = null; this._syncedSettings = UserSettingsStore.getSyncedSettings(); this._isMounted = true; }, componentWillUnmount: function() { this._isMounted = false; }, /* get the DOM node representing the given event */ getNodeForEventId: function(eventId) { if (!this.eventNodes) { return undefined; } return this.eventNodes[eventId]; }, /* return true if the content is fully scrolled down right now; else false. */ isAtBottom: function() { return this.refs.scrollPanel && this.refs.scrollPanel.isAtBottom(); }, /* get the current scroll state. See ScrollPanel.getScrollState for * details. * * returns null if we are not mounted. */ getScrollState: function() { if (!this.refs.scrollPanel) { return null; } return this.refs.scrollPanel.getScrollState(); }, // returns one of: // // null: there is no read marker // -1: read marker is above the window // 0: read marker is within the window // +1: read marker is below the window getReadMarkerPosition: function() { const readMarker = this.refs.readMarkerNode; const messageWrapper = this.refs.scrollPanel; if (!readMarker || !messageWrapper) { return null; } const wrapperRect = ReactDOM.findDOMNode(messageWrapper).getBoundingClientRect(); const readMarkerRect = readMarker.getBoundingClientRect(); // the read-marker pretends to have zero height when it is actually // two pixels high; +2 here to account for that. if (readMarkerRect.bottom + 2 < wrapperRect.top) { return -1; } else if (readMarkerRect.top < wrapperRect.bottom) { return 0; } else { return 1; } }, /* jump to the top of the content. */ scrollToTop: function() { if (this.refs.scrollPanel) { this.refs.scrollPanel.scrollToTop(); } }, /* jump to the bottom of the content. */ scrollToBottom: function() { if (this.refs.scrollPanel) { this.refs.scrollPanel.scrollToBottom(); } }, /** * Page up/down. * * mult: -1 to page up, +1 to page down */ scrollRelative: function(mult) { if (this.refs.scrollPanel) { this.refs.scrollPanel.scrollRelative(mult); } }, /** * Scroll up/down in response to a scroll key */ handleScrollKey: function(ev) { if (this.refs.scrollPanel) { this.refs.scrollPanel.handleScrollKey(ev); } }, /* jump to the given event id. * * offsetBase gives the reference point for the pixelOffset. 0 means the * top of the container, 1 means the bottom, and fractional values mean * somewhere in the middle. If omitted, it defaults to 0. * * pixelOffset gives the number of pixels *above* the offsetBase that the * node (specifically, the bottom of it) will be positioned. If omitted, it * defaults to 0. */ scrollToEvent: function(eventId, pixelOffset, offsetBase) { if (this.refs.scrollPanel) { this.refs.scrollPanel.scrollToToken(eventId, pixelOffset, offsetBase); } }, /* check the scroll state and send out pagination requests if necessary. */ checkFillState: function() { if (this.refs.scrollPanel) { this.refs.scrollPanel.checkFillState(); } }, _isUnmounting: function() { return !this._isMounted; }, // TODO: Implement granular (per-room) hide options _shouldShowEvent: function(mxEv) { if (mxEv.sender && MatrixClientPeg.get().isUserIgnored(mxEv.sender.userId)) { return false; // ignored = no show (only happens if the ignore happens after an event was received) } const EventTile = sdk.getComponent('rooms.EventTile'); if (!EventTile.haveTileForEvent(mxEv)) { return false; // no tile = no show } // Always show highlighted event if (this.props.highlightedEventId === mxEv.getId()) return true; return !shouldHideEvent(mxEv, this._syncedSettings); }, _getEventTiles: function() { const DateSeparator = sdk.getComponent('messages.DateSeparator'); const MemberEventListSummary = sdk.getComponent('views.elements.MemberEventListSummary'); this.eventNodes = {}; let i; // first figure out which is the last event in the list which we're // actually going to show; this allows us to behave slightly // differently for the last event in the list. (eg show timestamp) // // we also need to figure out which is the last event we show which isn't // a local echo, to manage the read-marker. let lastShownEvent; let lastShownNonLocalEchoIndex = -1; for (i = this.props.events.length-1; i >= 0; i--) { const mxEv = this.props.events[i]; if (!this._shouldShowEvent(mxEv)) { continue; } if (lastShownEvent === undefined) { lastShownEvent = mxEv; } if (mxEv.status) { // this is a local echo continue; } lastShownNonLocalEchoIndex = i; break; } const ret = []; let prevEvent = null; // the last event we showed // assume there is no read marker until proven otherwise let readMarkerVisible = false; // if the readmarker has moved, cancel any active ghost. if (this.currentReadMarkerEventId && this.props.readMarkerEventId && this.props.readMarkerVisible && this.currentReadMarkerEventId != this.props.readMarkerEventId) { this.currentGhostEventId = null; } const isMembershipChange = (e) => e.getType() === 'm.room.member'; for (i = 0; i < this.props.events.length; i++) { const mxEv = this.props.events[i]; const eventId = mxEv.getId(); const last = (mxEv === lastShownEvent); const wantTile = this._shouldShowEvent(mxEv); // Wrap consecutive member events in a ListSummary, ignore if redacted if (isMembershipChange(mxEv) && wantTile) { let readMarkerInMels = false; const ts1 = mxEv.getTs(); // Ensure that the key of the MemberEventListSummary does not change with new // member events. This will prevent it from being re-created unnecessarily, and // instead will allow new props to be provided. In turn, the shouldComponentUpdate // method on MELS can be used to prevent unnecessary renderings. // // Whilst back-paginating with a MELS at the top of the panel, prevEvent will be null, // so use the key "membereventlistsummary-initial". Otherwise, use the ID of the first // membership event, which will not change during forward pagination. const key = "membereventlistsummary-" + (prevEvent ? mxEv.getId() : "initial"); if (this._wantsDateSeparator(prevEvent, mxEv.getDate())) { const dateSeparator =