mirror of https://github.com/vector-im/riot-web
Merge pull request #2345 from matrix-org/bwindels/jumptofirstunread-rebased
Redesign: restyle jump to first unread message & rework read marker logic (rebased)pull/21833/head
commit
9f5a0250bf
|
@ -87,8 +87,12 @@ limitations under the License.
|
|||
flex: 1;
|
||||
}
|
||||
|
||||
.mx_RoomView_body .mx_RoomView_topUnreadMessagesBar {
|
||||
order: 1;
|
||||
.mx_RoomView_body .mx_RoomView_timeline {
|
||||
/* offset parent for mx_RoomView_topUnreadMessagesBar */
|
||||
position: relative;
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.mx_RoomView_body .mx_RoomView_messagePanel {
|
||||
|
|
|
@ -15,39 +15,29 @@ limitations under the License.
|
|||
*/
|
||||
|
||||
.mx_TopUnreadMessagesBar {
|
||||
margin: auto; /* centre horizontally */
|
||||
max-width: 960px;
|
||||
padding-top: 10px;
|
||||
padding-bottom: 10px;
|
||||
border-bottom: 1px solid $primary-hairline-color;
|
||||
z-index: 1000;
|
||||
position: absolute;
|
||||
top: 24px;
|
||||
right: 24px;
|
||||
width: 38px;
|
||||
}
|
||||
|
||||
.mx_TopUnreadMessagesBar_scrollUp {
|
||||
display: inline;
|
||||
cursor: pointer;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.mx_TopUnreadMessagesBar_scrollUp img {
|
||||
padding-left: 10px;
|
||||
padding-right: 31px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.mx_TopUnreadMessagesBar_scrollUp span {
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.mx_TopUnreadMessagesBar_close {
|
||||
float: right;
|
||||
padding-right: 14px;
|
||||
padding-top: 3px;
|
||||
height: 38px;
|
||||
border-radius: 19px;
|
||||
box-sizing: border-box;
|
||||
background: $primary-bg-color;
|
||||
border: 1.3px solid $roomtile-name-color;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.mx_MatrixChat_useCompactLayout {
|
||||
.mx_TopUnreadMessagesBar {
|
||||
padding-top: 4px;
|
||||
padding-bottom: 4px;
|
||||
}
|
||||
.mx_TopUnreadMessagesBar_scrollUp:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 38px;
|
||||
height: 38px;
|
||||
mask: url('../../img/icon-jump-to-first-unread.svg');
|
||||
mask-repeat: no-repeat;
|
||||
mask-position: 9px 13px;
|
||||
background: $roomtile-name-color;
|
||||
}
|
||||
|
|
|
@ -0,0 +1,16 @@
|
|||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<svg
|
||||
xmlns:svg="http://www.w3.org/2000/svg"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
style="fill:none"
|
||||
version="1.1"
|
||||
viewBox="0 0 18.666187 8.7375818"
|
||||
height="8.7375822"
|
||||
width="18.666187">
|
||||
<defs
|
||||
id="defs8" />
|
||||
<path
|
||||
d="M 17.909095,7.981591 9.3330939,0.74997995 0.75709259,7.981591"
|
||||
style="fill:none;stroke:#000000;stroke-width:1.29999995;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
|
||||
id="path2-8-3" />
|
||||
</svg>
|
After Width: | Height: | Size: 559 B |
|
@ -17,21 +17,33 @@ limitations under the License.
|
|||
|
||||
const MatrixClientPeg = require("./MatrixClientPeg");
|
||||
const dis = require("./dispatcher");
|
||||
import Timer from './utils/Timer';
|
||||
|
||||
// Time in ms after that a user is considered as unavailable/away
|
||||
const UNAVAILABLE_TIME_MS = 3 * 60 * 1000; // 3 mins
|
||||
const PRESENCE_STATES = ["online", "offline", "unavailable"];
|
||||
|
||||
class Presence {
|
||||
|
||||
constructor() {
|
||||
this._activitySignal = null;
|
||||
this._unavailableTimer = null;
|
||||
this._onAction = this._onAction.bind(this);
|
||||
this._dispatcherRef = null;
|
||||
}
|
||||
/**
|
||||
* Start listening the user activity to evaluate his presence state.
|
||||
* Any state change will be sent to the Home Server.
|
||||
*/
|
||||
start() {
|
||||
this.running = true;
|
||||
if (undefined === this.state) {
|
||||
this._resetTimer();
|
||||
this.dispatcherRef = dis.register(this._onAction.bind(this));
|
||||
async start() {
|
||||
this._unavailableTimer = new Timer(UNAVAILABLE_TIME_MS);
|
||||
// the user_activity_start action starts the timer
|
||||
this._dispatcherRef = dis.register(this._onAction);
|
||||
while (this._unavailableTimer) {
|
||||
try {
|
||||
await this._unavailableTimer.finished();
|
||||
this.setState("unavailable");
|
||||
} catch(e) { /* aborted, stop got called */ }
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -39,13 +51,14 @@ class Presence {
|
|||
* Stop tracking user activity
|
||||
*/
|
||||
stop() {
|
||||
this.running = false;
|
||||
if (this.timer) {
|
||||
clearInterval(this.timer);
|
||||
this.timer = undefined;
|
||||
dis.unregister(this.dispatcherRef);
|
||||
if (this._dispatcherRef) {
|
||||
dis.unregister(this._dispatcherRef);
|
||||
this._dispatcherRef = null;
|
||||
}
|
||||
if (this._unavailableTimer) {
|
||||
this._unavailableTimer.abort();
|
||||
this._unavailableTimer = null;
|
||||
}
|
||||
this.state = undefined;
|
||||
}
|
||||
|
||||
/**
|
||||
|
@ -56,21 +69,25 @@ class Presence {
|
|||
return this.state;
|
||||
}
|
||||
|
||||
_onAction(payload) {
|
||||
if (payload.action === 'user_activity') {
|
||||
this.setState("online");
|
||||
this._unavailableTimer.restart();
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Set the presence state.
|
||||
* If the state has changed, the Home Server will be notified.
|
||||
* @param {string} newState the new presence state (see PRESENCE enum)
|
||||
*/
|
||||
setState(newState) {
|
||||
async setState(newState) {
|
||||
if (newState === this.state) {
|
||||
return;
|
||||
}
|
||||
if (PRESENCE_STATES.indexOf(newState) === -1) {
|
||||
throw new Error("Bad presence state: " + newState);
|
||||
}
|
||||
if (!this.running) {
|
||||
return;
|
||||
}
|
||||
const old_state = this.state;
|
||||
this.state = newState;
|
||||
|
||||
|
@ -78,42 +95,14 @@ class Presence {
|
|||
return; // don't try to set presence when a guest; it won't work.
|
||||
}
|
||||
|
||||
const self = this;
|
||||
MatrixClientPeg.get().setPresence(this.state).done(function() {
|
||||
try {
|
||||
await MatrixClientPeg.get().setPresence(this.state);
|
||||
console.log("Presence: %s", newState);
|
||||
}, function(err) {
|
||||
} catch(err) {
|
||||
console.error("Failed to set presence: %s", err);
|
||||
self.state = old_state;
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Callback called when the user made no action on the page for UNAVAILABLE_TIME ms.
|
||||
* @private
|
||||
*/
|
||||
_onUnavailableTimerFire() {
|
||||
this.setState("unavailable");
|
||||
}
|
||||
|
||||
_onAction(payload) {
|
||||
if (payload.action === "user_activity") {
|
||||
this._resetTimer();
|
||||
this.state = old_state;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Callback called when the user made an action on the page
|
||||
* @private
|
||||
*/
|
||||
_resetTimer() {
|
||||
const self = this;
|
||||
this.setState("online");
|
||||
// Re-arm the timer
|
||||
clearTimeout(this.timer);
|
||||
this.timer = setTimeout(function() {
|
||||
self._onUnavailableTimerFire();
|
||||
}, UNAVAILABLE_TIME_MS);
|
||||
}
|
||||
}
|
||||
|
||||
module.exports = new Presence();
|
||||
|
|
|
@ -15,32 +15,72 @@ limitations under the License.
|
|||
*/
|
||||
|
||||
import dis from './dispatcher';
|
||||
import Timer from './utils/Timer';
|
||||
|
||||
const MIN_DISPATCH_INTERVAL_MS = 500;
|
||||
const CURRENTLY_ACTIVE_THRESHOLD_MS = 2000;
|
||||
// important this is larger than the timeouts of timers
|
||||
// used with UserActivity.timeWhileActive,
|
||||
// such as READ_MARKER_INVIEW_THRESHOLD_MS,
|
||||
// READ_MARKER_OUTOFVIEW_THRESHOLD_MS,
|
||||
// READ_RECEIPT_INTERVAL_MS in TimelinePanel
|
||||
const CURRENTLY_ACTIVE_THRESHOLD_MS = 2 * 60 * 1000;
|
||||
|
||||
/**
|
||||
* This class watches for user activity (moving the mouse or pressing a key)
|
||||
* and dispatches the user_activity action at times when the user is interacting
|
||||
* with the app (but at a much lower frequency than mouse move events)
|
||||
* and starts/stops attached timers while the user is active.
|
||||
*/
|
||||
class UserActivity {
|
||||
constructor() {
|
||||
this._attachedTimers = [];
|
||||
this._activityTimeout = new Timer(CURRENTLY_ACTIVE_THRESHOLD_MS);
|
||||
this._onUserActivity = this._onUserActivity.bind(this);
|
||||
this._onDocumentBlurred = this._onDocumentBlurred.bind(this);
|
||||
this._onPageVisibilityChanged = this._onPageVisibilityChanged.bind(this);
|
||||
this.lastScreenX = 0;
|
||||
this.lastScreenY = 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* Runs the given timer while the user is active, aborting when the user becomes inactive.
|
||||
* Can be called multiple times with the same already running timer, which is a NO-OP.
|
||||
* Can be called before the user becomes active, in which case it is only started
|
||||
* later on when the user does become active.
|
||||
*/
|
||||
timeWhileActive(timer) {
|
||||
// important this happens first
|
||||
const index = this._attachedTimers.indexOf(timer);
|
||||
if (index === -1) {
|
||||
this._attachedTimers.push(timer);
|
||||
// remove when done or aborted
|
||||
timer.finished().finally(() => {
|
||||
const index = this._attachedTimers.indexOf(timer);
|
||||
if (index !== -1) { // should never be -1
|
||||
this._attachedTimers.splice(index, 1);
|
||||
}
|
||||
// as we fork the promise here,
|
||||
// avoid unhandled rejection warnings
|
||||
}).catch((err) => {});
|
||||
}
|
||||
if (this.userCurrentlyActive()) {
|
||||
timer.start();
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Start listening to user activity
|
||||
*/
|
||||
start() {
|
||||
document.onmousedown = this._onUserActivity.bind(this);
|
||||
document.onmousemove = this._onUserActivity.bind(this);
|
||||
document.onkeydown = this._onUserActivity.bind(this);
|
||||
document.onmousedown = this._onUserActivity;
|
||||
document.onmousemove = this._onUserActivity;
|
||||
document.onkeydown = this._onUserActivity;
|
||||
document.addEventListener("visibilitychange", this._onPageVisibilityChanged);
|
||||
document.addEventListener("blur", this._onDocumentBlurred);
|
||||
document.addEventListener("focus", this._onUserActivity);
|
||||
// can't use document.scroll here because that's only the document
|
||||
// itself being scrolled. Need to use addEventListener's useCapture.
|
||||
// also this needs to be the wheel event, not scroll, as scroll is
|
||||
// fired when the view scrolls down for a new message.
|
||||
window.addEventListener('wheel', this._onUserActivity.bind(this),
|
||||
window.addEventListener('wheel', this._onUserActivity,
|
||||
{ passive: true, capture: true });
|
||||
this.lastActivityAtTs = new Date().getTime();
|
||||
this.lastDispatchAtTs = 0;
|
||||
this.activityEndTimer = undefined;
|
||||
}
|
||||
|
||||
/**
|
||||
|
@ -50,8 +90,12 @@ class UserActivity {
|
|||
document.onmousedown = undefined;
|
||||
document.onmousemove = undefined;
|
||||
document.onkeydown = undefined;
|
||||
window.removeEventListener('wheel', this._onUserActivity.bind(this),
|
||||
window.removeEventListener('wheel', this._onUserActivity,
|
||||
{ passive: true, capture: true });
|
||||
|
||||
document.removeEventListener("visibilitychange", this._onPageVisibilityChanged);
|
||||
document.removeEventListener("blur", this._onDocumentBlurred);
|
||||
document.removeEventListener("focus", this._onUserActivity);
|
||||
}
|
||||
|
||||
/**
|
||||
|
@ -60,10 +104,22 @@ class UserActivity {
|
|||
* @returns {boolean} true if user is currently/very recently active
|
||||
*/
|
||||
userCurrentlyActive() {
|
||||
return this.lastActivityAtTs > new Date().getTime() - CURRENTLY_ACTIVE_THRESHOLD_MS;
|
||||
return this._activityTimeout.isRunning();
|
||||
}
|
||||
|
||||
_onUserActivity(event) {
|
||||
_onPageVisibilityChanged(e) {
|
||||
if (document.visibilityState === "hidden") {
|
||||
this._activityTimeout.abort();
|
||||
} else {
|
||||
this._onUserActivity(e);
|
||||
}
|
||||
}
|
||||
|
||||
_onDocumentBlurred() {
|
||||
this._activityTimeout.abort();
|
||||
}
|
||||
|
||||
async _onUserActivity(event) {
|
||||
if (event.screenX && event.type === "mousemove") {
|
||||
if (event.screenX === this.lastScreenX && event.screenY === this.lastScreenY) {
|
||||
// mouse hasn't actually moved
|
||||
|
@ -73,30 +129,20 @@ class UserActivity {
|
|||
this.lastScreenY = event.screenY;
|
||||
}
|
||||
|
||||
this.lastActivityAtTs = new Date().getTime();
|
||||
if (this.lastDispatchAtTs < this.lastActivityAtTs - MIN_DISPATCH_INTERVAL_MS) {
|
||||
this.lastDispatchAtTs = this.lastActivityAtTs;
|
||||
dis.dispatch({
|
||||
action: 'user_activity',
|
||||
});
|
||||
if (!this.activityEndTimer) {
|
||||
this.activityEndTimer = setTimeout(this._onActivityEndTimer.bind(this), MIN_DISPATCH_INTERVAL_MS);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
_onActivityEndTimer() {
|
||||
const now = new Date().getTime();
|
||||
const targetTime = this.lastActivityAtTs + MIN_DISPATCH_INTERVAL_MS;
|
||||
if (now >= targetTime) {
|
||||
dis.dispatch({
|
||||
action: 'user_activity_end',
|
||||
});
|
||||
this.activityEndTimer = undefined;
|
||||
dis.dispatch({action: 'user_activity'});
|
||||
if (!this._activityTimeout.isRunning()) {
|
||||
this._activityTimeout.start();
|
||||
dis.dispatch({action: 'user_activity_start'});
|
||||
this._attachedTimers.forEach((t) => t.start());
|
||||
try {
|
||||
await this._activityTimeout.finished();
|
||||
} catch (_e) { /* aborted */ }
|
||||
this._attachedTimers.forEach((t) => t.abort());
|
||||
} else {
|
||||
this.activityEndTimer = setTimeout(this._onActivityEndTimer.bind(this), targetTime - now);
|
||||
this._activityTimeout.restart();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
module.exports = new UserActivity();
|
||||
|
|
|
@ -1794,14 +1794,10 @@ module.exports = React.createClass({
|
|||
let topUnreadMessagesBar = null;
|
||||
if (this.state.showTopUnreadMessagesBar) {
|
||||
const TopUnreadMessagesBar = sdk.getComponent('rooms.TopUnreadMessagesBar');
|
||||
topUnreadMessagesBar = (
|
||||
<div className="mx_RoomView_topUnreadMessagesBar">
|
||||
<TopUnreadMessagesBar
|
||||
onScrollUpClick={this.jumpToReadMarker}
|
||||
onCloseClick={this.forgetReadMarker}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
topUnreadMessagesBar = (<TopUnreadMessagesBar
|
||||
onScrollUpClick={this.jumpToReadMarker}
|
||||
onCloseClick={this.forgetReadMarker}
|
||||
/>);
|
||||
}
|
||||
const statusBarAreaClass = classNames(
|
||||
"mx_RoomView_statusArea",
|
||||
|
@ -1838,9 +1834,11 @@ module.exports = React.createClass({
|
|||
<MainSplit panel={rightPanel} collapsedRhs={this.props.collapsedRhs}>
|
||||
<div className={fadableSectionClasses}>
|
||||
{ auxPanel }
|
||||
{ topUnreadMessagesBar }
|
||||
{ messagePanel }
|
||||
{ searchResultsPanel }
|
||||
<div className="mx_RoomView_timeline">
|
||||
{ topUnreadMessagesBar }
|
||||
{ messagePanel }
|
||||
{ searchResultsPanel }
|
||||
</div>
|
||||
<div className={statusBarAreaClass}>
|
||||
<div className="mx_RoomView_statusAreaBox">
|
||||
<div className="mx_RoomView_statusAreaBox_line"></div>
|
||||
|
|
|
@ -33,9 +33,13 @@ const ObjectUtils = require('../../ObjectUtils');
|
|||
const Modal = require("../../Modal");
|
||||
const UserActivity = require("../../UserActivity");
|
||||
import { KeyCode } from '../../Keyboard';
|
||||
import Timer from '../../utils/Timer';
|
||||
|
||||
const PAGINATE_SIZE = 20;
|
||||
const INITIAL_SIZE = 20;
|
||||
const READ_MARKER_INVIEW_THRESHOLD_MS = 1 * 1000;
|
||||
const READ_MARKER_OUTOFVIEW_THRESHOLD_MS = 30 * 1000;
|
||||
const READ_RECEIPT_INTERVAL_MS = 500;
|
||||
|
||||
const DEBUG = false;
|
||||
|
||||
|
@ -188,6 +192,14 @@ var TimelinePanel = React.createClass({
|
|||
this.lastRRSentEventId = undefined;
|
||||
this.lastRMSentEventId = undefined;
|
||||
|
||||
if (this.props.manageReadReceipts) {
|
||||
this.updateReadReceiptOnUserActivity();
|
||||
}
|
||||
if (this.props.manageReadMarkers) {
|
||||
this.updateReadMarkerOnUserActivity();
|
||||
}
|
||||
|
||||
|
||||
this.dispatcherRef = dis.register(this.onAction);
|
||||
MatrixClientPeg.get().on("Room.timeline", this.onRoomTimeline);
|
||||
MatrixClientPeg.get().on("Room.timelineReset", this.onRoomTimelineReset);
|
||||
|
@ -254,6 +266,14 @@ var TimelinePanel = React.createClass({
|
|||
//
|
||||
// (We could use isMounted, but facebook have deprecated that.)
|
||||
this.unmounted = true;
|
||||
if (this._readReceiptActivityTimer) {
|
||||
this._readReceiptActivityTimer.abort();
|
||||
this._readReceiptActivityTimer = null;
|
||||
}
|
||||
if (this._readMarkerActivityTimer) {
|
||||
this._readMarkerActivityTimer.abort();
|
||||
this._readMarkerActivityTimer = null;
|
||||
}
|
||||
|
||||
dis.unregister(this.dispatcherRef);
|
||||
|
||||
|
@ -362,30 +382,25 @@ var TimelinePanel = React.createClass({
|
|||
}
|
||||
|
||||
if (this.props.manageReadMarkers) {
|
||||
const rmPosition = this.getReadMarkerPosition();
|
||||
// we hide the read marker when it first comes onto the screen, but if
|
||||
// it goes back off the top of the screen (presumably because the user
|
||||
// clicks on the 'jump to bottom' button), we need to re-enable it.
|
||||
if (this.getReadMarkerPosition() < 0) {
|
||||
if (rmPosition < 0) {
|
||||
this.setState({readMarkerVisible: true});
|
||||
}
|
||||
|
||||
// if read marker position goes between 0 and -1/1,
|
||||
// (and user is active), switch timeout
|
||||
const timeout = this._readMarkerTimeout(rmPosition);
|
||||
// NO-OP when timeout already has set to the given value
|
||||
this._readMarkerActivityTimer.changeTimeout(timeout);
|
||||
}
|
||||
},
|
||||
|
||||
onAction: function(payload) {
|
||||
switch (payload.action) {
|
||||
case 'user_activity':
|
||||
case 'user_activity_end':
|
||||
// we could treat user_activity_end differently and not
|
||||
// send receipts for messages that have arrived between
|
||||
// the actual user activity and the time they stopped
|
||||
// being active, but let's see if this is actually
|
||||
// necessary.
|
||||
this.sendReadReceipt();
|
||||
this.updateReadMarker();
|
||||
break;
|
||||
case 'ignore_state_changed':
|
||||
this.forceUpdate();
|
||||
break;
|
||||
if (payload.action === 'ignore_state_changed') {
|
||||
this.forceUpdate();
|
||||
}
|
||||
},
|
||||
|
||||
|
@ -531,6 +546,38 @@ var TimelinePanel = React.createClass({
|
|||
this.setState({clientSyncState: state});
|
||||
},
|
||||
|
||||
_readMarkerTimeout(readMarkerPosition) {
|
||||
return readMarkerPosition === 0 ?
|
||||
READ_MARKER_INVIEW_THRESHOLD_MS :
|
||||
READ_MARKER_OUTOFVIEW_THRESHOLD_MS;
|
||||
},
|
||||
|
||||
updateReadMarkerOnUserActivity: async function() {
|
||||
const initialTimeout = this._readMarkerTimeout(this.getReadMarkerPosition());
|
||||
this._readMarkerActivityTimer = new Timer(initialTimeout);
|
||||
|
||||
while (this._readMarkerActivityTimer) { //unset on unmount
|
||||
UserActivity.timeWhileActive(this._readMarkerActivityTimer);
|
||||
try {
|
||||
await this._readMarkerActivityTimer.finished();
|
||||
} catch(e) { continue; /* aborted */ }
|
||||
// outside of try/catch to not swallow errors
|
||||
this.updateReadMarker();
|
||||
}
|
||||
},
|
||||
|
||||
updateReadReceiptOnUserActivity: async function() {
|
||||
this._readReceiptActivityTimer = new Timer(READ_RECEIPT_INTERVAL_MS);
|
||||
while (this._readReceiptActivityTimer) { //unset on unmount
|
||||
UserActivity.timeWhileActive(this._readReceiptActivityTimer);
|
||||
try {
|
||||
await this._readReceiptActivityTimer.finished();
|
||||
} catch(e) { continue; /* aborted */ }
|
||||
// outside of try/catch to not swallow errors
|
||||
this.sendReadReceipt();
|
||||
}
|
||||
},
|
||||
|
||||
sendReadReceipt: function() {
|
||||
if (!this.refs.messagePanel) return;
|
||||
if (!this.props.manageReadReceipts) return;
|
||||
|
@ -634,10 +681,11 @@ var TimelinePanel = React.createClass({
|
|||
// of the screen, so move the marker down to the bottom of the screen.
|
||||
updateReadMarker: function() {
|
||||
if (!this.props.manageReadMarkers) return;
|
||||
if (this.getReadMarkerPosition() !== 0) {
|
||||
if (this.getReadMarkerPosition() === 1) {
|
||||
// the read marker is at an event below the viewport,
|
||||
// we don't want to rewind it.
|
||||
return;
|
||||
}
|
||||
|
||||
// move the RM to *after* the message at the bottom of the screen. This
|
||||
// avoids a problem whereby we never advance the RM if there is a huge
|
||||
// message which doesn't fit on the screen.
|
||||
|
@ -654,7 +702,6 @@ var TimelinePanel = React.createClass({
|
|||
if (lastDisplayedIndex === null) {
|
||||
return;
|
||||
}
|
||||
|
||||
const lastDisplayedEvent = this.state.events[lastDisplayedIndex];
|
||||
this._setReadMarker(lastDisplayedEvent.getId(),
|
||||
lastDisplayedEvent.getTs());
|
||||
|
@ -749,7 +796,6 @@ var TimelinePanel = React.createClass({
|
|||
this._loadTimeline(this.state.readMarkerEventId, 0, 1/3);
|
||||
},
|
||||
|
||||
|
||||
/* update the read-up-to marker to match the read receipt
|
||||
*/
|
||||
forgetReadMarker: function() {
|
||||
|
@ -822,15 +868,12 @@ var TimelinePanel = React.createClass({
|
|||
|
||||
canJumpToReadMarker: function() {
|
||||
// 1. Do not show jump bar if neither the RM nor the RR are set.
|
||||
// 2. Only show jump bar if RR !== RM. If they are the same, there are only fully
|
||||
// read messages and unread messages. We already have a badge count and the bottom
|
||||
// bar to jump to "live" when we have unread messages.
|
||||
// 3. We want to show the bar if the read-marker is off the top of the screen.
|
||||
// 4. Also, if pos === null, the event might not be paginated - show the unread bar
|
||||
const pos = this.getReadMarkerPosition();
|
||||
return this.state.readMarkerEventId !== null && // 1.
|
||||
this.state.readMarkerEventId !== this._getCurrentReadReceipt() && // 2.
|
||||
const ret = this.state.readMarkerEventId !== null && // 1.
|
||||
(pos < 0 || pos === null); // 3., 4.
|
||||
return ret;
|
||||
},
|
||||
|
||||
/**
|
||||
|
@ -917,7 +960,6 @@ var TimelinePanel = React.createClass({
|
|||
}
|
||||
|
||||
this.sendReadReceipt();
|
||||
this.updateReadMarker();
|
||||
});
|
||||
};
|
||||
|
||||
|
|
|
@ -21,6 +21,8 @@ const React = require('react');
|
|||
import PropTypes from 'prop-types';
|
||||
import { _t } from '../../../languageHandler';
|
||||
import AccessibleButton from '../elements/AccessibleButton';
|
||||
import {formatCount} from '../../../utils/FormattingUtils';
|
||||
|
||||
const sdk = require('../../../index');
|
||||
|
||||
module.exports = React.createClass({
|
||||
|
@ -28,28 +30,15 @@ module.exports = React.createClass({
|
|||
|
||||
propTypes: {
|
||||
onScrollUpClick: PropTypes.func,
|
||||
onCloseClick: PropTypes.func,
|
||||
},
|
||||
|
||||
render: function() {
|
||||
return (
|
||||
<div className="mx_TopUnreadMessagesBar">
|
||||
<AccessibleButton className="mx_TopUnreadMessagesBar_scrollUp"
|
||||
onClick={this.props.onScrollUpClick}>
|
||||
<img src="img/scrollto.svg" width="24" height="24"
|
||||
// No point on setting up non empty alt on this image
|
||||
// as it only complements the text which follows it.
|
||||
alt=""
|
||||
title={_t('Scroll to unread messages')}
|
||||
// In order not to use this title attribute for accessible name
|
||||
// calculation of the parent button set the role presentation
|
||||
role="presentation" />
|
||||
{ _t("Jump to first unread message.") }
|
||||
title={_t('Jump to first unread message.')}
|
||||
onClick={this.props.onScrollUpClick}>
|
||||
</AccessibleButton>
|
||||
<AccessibleButton element='img' className="mx_TopUnreadMessagesBar_close mx_filterFlipColor"
|
||||
src="img/cancel.svg" width="18" height="18"
|
||||
alt={_t("Close")} title={_t("Close")}
|
||||
onClick={this.props.onCloseClick} />
|
||||
</div>
|
||||
);
|
||||
},
|
||||
|
|
|
@ -604,7 +604,6 @@
|
|||
"Stickerpack": "Stickerpack",
|
||||
"Hide Stickers": "Hide Stickers",
|
||||
"Show Stickers": "Show Stickers",
|
||||
"Scroll to unread messages": "Scroll to unread messages",
|
||||
"Jump to first unread message.": "Jump to first unread message.",
|
||||
"Invalid alias format": "Invalid alias format",
|
||||
"'%(alias)s' is not a valid format for an alias": "'%(alias)s' is not a valid format for an alias",
|
||||
|
|
|
@ -0,0 +1,123 @@
|
|||
/*
|
||||
Copyright 2018 New Vector 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.
|
||||
*/
|
||||
|
||||
/**
|
||||
A countdown timer, exposing a promise api.
|
||||
A timer starts in a non-started state,
|
||||
and needs to be started by calling `start()`` on it first.
|
||||
|
||||
Timers can be `abort()`-ed which makes the promise reject prematurely.
|
||||
|
||||
Once a timer is finished or aborted, it can't be started again
|
||||
(because the promise should not be replaced). Instead, create
|
||||
a new one through `clone()` or `cloneIfRun()`.
|
||||
*/
|
||||
export default class Timer {
|
||||
|
||||
constructor(timeout) {
|
||||
this._timeout = timeout;
|
||||
this._onTimeout = this._onTimeout.bind(this);
|
||||
this._setNotStarted();
|
||||
}
|
||||
|
||||
_setNotStarted() {
|
||||
this._timerHandle = null;
|
||||
this._startTs = null;
|
||||
this._promise = new Promise((resolve, reject) => {
|
||||
this._resolve = resolve;
|
||||
this._reject = reject;
|
||||
}).finally(() => {
|
||||
this._timerHandle = null;
|
||||
});
|
||||
}
|
||||
|
||||
_onTimeout() {
|
||||
const now = Date.now();
|
||||
const elapsed = now - this._startTs;
|
||||
if (elapsed >= this._timeout) {
|
||||
this._resolve();
|
||||
this._setNotStarted();
|
||||
} else {
|
||||
const delta = this._timeout - elapsed;
|
||||
this._timerHandle = setTimeout(this._onTimeout, delta);
|
||||
}
|
||||
}
|
||||
|
||||
changeTimeout(timeout) {
|
||||
if (timeout === this._timeout) {
|
||||
return;
|
||||
}
|
||||
const isSmallerTimeout = timeout < this._timeout;
|
||||
this._timeout = timeout;
|
||||
if (this.isRunning() && isSmallerTimeout) {
|
||||
clearTimeout(this._timerHandle);
|
||||
this._onTimeout();
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* if not started before, starts the timer.
|
||||
*/
|
||||
start() {
|
||||
if (!this.isRunning()) {
|
||||
this._startTs = Date.now();
|
||||
this._timerHandle = setTimeout(this._onTimeout, this._timeout);
|
||||
}
|
||||
return this;
|
||||
}
|
||||
|
||||
/**
|
||||
* (re)start the timer. If it's running, reset the timeout. If not, start it.
|
||||
*/
|
||||
restart() {
|
||||
if (this.isRunning()) {
|
||||
// don't clearTimeout here as this method
|
||||
// can be called in fast succession,
|
||||
// instead just take note and compare
|
||||
// when the already running timeout expires
|
||||
this._startTs = Date.now();
|
||||
return this;
|
||||
} else {
|
||||
return this.start();
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* if the timer is running, abort it,
|
||||
* and reject the promise for this timer.
|
||||
*/
|
||||
abort() {
|
||||
if (this.isRunning()) {
|
||||
clearTimeout(this._timerHandle);
|
||||
this._reject(new Error("Timer was aborted."));
|
||||
this._setNotStarted();
|
||||
}
|
||||
return this;
|
||||
}
|
||||
|
||||
/**
|
||||
*promise that will resolve when the timer elapses,
|
||||
*or is rejected when abort is called
|
||||
*@return {Promise}
|
||||
*/
|
||||
finished() {
|
||||
return this._promise;
|
||||
}
|
||||
|
||||
isRunning() {
|
||||
return this._timerHandle !== null;
|
||||
}
|
||||
}
|
Loading…
Reference in New Issue