matrix-react-sdk
Version:
SDK for matrix.org using React
838 lines (820 loc) • 121 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _react = _interopRequireWildcard(require("react"));
var _logger = require("matrix-js-sdk/src/logger");
var _SettingsStore = _interopRequireDefault(require("../../settings/SettingsStore"));
var _Timer = _interopRequireDefault(require("../../utils/Timer"));
var _AutoHideScrollbar = _interopRequireDefault(require("./AutoHideScrollbar"));
var _KeyBindingsManager = require("../../KeyBindingsManager");
var _KeyboardShortcuts = require("../../accessibility/KeyboardShortcuts");
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
/*
Copyright 2024 New Vector Ltd.
Copyright 2015-2022 The Matrix.org Foundation C.I.C.
SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
Please see LICENSE files in the repository root for full details.
*/
// The amount of extra scroll distance to allow prior to unfilling.
// See getExcessHeight.
const UNPAGINATION_PADDING = 6000;
// The number of milliseconds to debounce calls to onUnfillRequest,
// to prevent many scroll events causing many unfilling requests.
const UNFILL_REQUEST_DEBOUNCE_MS = 200;
// updateHeight makes the height a `Math.ceil` multiple of this, so we don't have to update the height too often.
// It also allows the user to scroll past the pagination spinner a bit, so they don't feel blocked so
// much while the content loads.
const PAGE_SIZE = 400;
const debuglog = (...args) => {
if (_SettingsStore.default.getValue("debug_scroll_panel")) {
_logger.logger.log.call(console, "ScrollPanel debuglog:", ...args);
}
};
/* This component implements an intelligent scrolling list.
*
* It wraps a list of <li> children; when items are added to the start or end
* of the list, the scroll position is updated so that the user still sees the
* same position in the list.
*
* It also provides a hook which allows parents to provide more list elements
* when we get close to the start or end of the list.
*
* Each child element should have a 'data-scroll-tokens'. This string of
* comma-separated tokens may contain a single token or many, where many indicates
* that the element contains elements that have scroll tokens themselves. The first
* token in 'data-scroll-tokens' is used to serialise the scroll state, and returned
* as the 'trackedScrollToken' attribute by getScrollState().
*
* IMPORTANT: INDIVIDUAL TOKENS WITHIN 'data-scroll-tokens' MUST NOT CONTAIN COMMAS.
*
* Some notes about the implementation:
*
* The saved 'scrollState' can exist in one of two states:
*
* - stuckAtBottom: (the default, and restored by resetScrollState): the
* viewport is scrolled down as far as it can be. When the children are
* updated, the scroll position will be updated to ensure it is still at
* the bottom.
*
* - fixed, in which the viewport is conceptually tied at a specific scroll
* offset. We don't save the absolute scroll offset, because that would be
* affected by window width, zoom level, amount of scrollback, etc. Instead,
* we save an identifier for the last fully-visible message, and the number
* of pixels the window was scrolled below it - which is hopefully near
* enough.
*
* The 'stickyBottom' property controls the behaviour when we reach the bottom
* of the window (either through a user-initiated scroll, or by calling
* scrollToBottom). If stickyBottom is enabled, the scrollState will enter
* 'stuckAtBottom' state - ensuring that new additions cause the window to
* scroll down further. If stickyBottom is disabled, we just save the scroll
* offset as normal.
*/
class ScrollPanel extends _react.default.Component {
constructor(props) {
super(props);
(0, _defineProperty2.default)(this, "pendingFillRequests", {
b: null,
f: null
});
(0, _defineProperty2.default)(this, "itemlist", /*#__PURE__*/(0, _react.createRef)());
(0, _defineProperty2.default)(this, "unmounted", false);
(0, _defineProperty2.default)(this, "scrollTimeout", void 0);
// Are we currently trying to backfill?
(0, _defineProperty2.default)(this, "isFilling", false);
// Is the current fill request caused by a props update?
(0, _defineProperty2.default)(this, "isFillingDueToPropsUpdate", false);
// Did another request to check the fill state arrive while we were trying to backfill?
(0, _defineProperty2.default)(this, "fillRequestWhileRunning", false);
// Is that next fill request scheduled because of a props update?
(0, _defineProperty2.default)(this, "pendingFillDueToPropsUpdate", false);
(0, _defineProperty2.default)(this, "scrollState", void 0);
(0, _defineProperty2.default)(this, "preventShrinkingState", null);
(0, _defineProperty2.default)(this, "unfillDebouncer", null);
(0, _defineProperty2.default)(this, "bottomGrowth", void 0);
(0, _defineProperty2.default)(this, "minListHeight", void 0);
(0, _defineProperty2.default)(this, "heightUpdateInProgress", false);
(0, _defineProperty2.default)(this, "divScroll", null);
(0, _defineProperty2.default)(this, "onScroll", ev => {
// skip scroll events caused by resizing
if (this.props.resizeNotifier && this.props.resizeNotifier.isResizing) return;
debuglog("onScroll called past resize gate; scroll node top:", this.getScrollNode().scrollTop);
this.scrollTimeout?.restart();
this.saveScrollState();
this.updatePreventShrinking();
this.props.onScroll?.(ev);
// noinspection JSIgnoredPromiseFromCall
this.checkFillState();
});
(0, _defineProperty2.default)(this, "onResize", () => {
debuglog("onResize called");
this.checkScroll();
// update preventShrinkingState if present
if (this.preventShrinkingState) {
this.preventShrinking();
}
});
// after an update to the contents of the panel, check that the scroll is
// where it ought to be, and set off pagination requests if necessary.
(0, _defineProperty2.default)(this, "checkScroll", (isFromPropsUpdate = false) => {
if (this.unmounted) {
return;
}
// We don't care if these two conditions race - they're different trees.
// noinspection JSIgnoredPromiseFromCall
this.restoreSavedScrollState();
// noinspection JSIgnoredPromiseFromCall
this.checkFillState(0, isFromPropsUpdate);
});
// return true if the content is fully scrolled down right now; else false.
//
// note that this is independent of the 'stuckAtBottom' state - it is simply
// about whether the content is scrolled down right now, irrespective of
// whether it will stay that way when the children update.
(0, _defineProperty2.default)(this, "isAtBottom", () => {
const sn = this.getScrollNode();
// fractional values (both too big and too small)
// for scrollTop happen on certain browsers/platforms
// when scrolled all the way down. E.g. Chrome 72 on debian.
//
// We therefore leave a bit of wiggle-room and assume we're at the
// bottom if the unscrolled area is less than one pixel high.
//
// non-standard DPI settings also seem to have effect here and can
// actually lead to scrollTop+clientHeight being *larger* than
// scrollHeight. (observed in element-desktop on Ubuntu 20.04)
//
return sn.scrollHeight - (sn.scrollTop + sn.clientHeight) <= 1;
});
// check the scroll state and send out backfill requests if necessary.
(0, _defineProperty2.default)(this, "checkFillState", async (depth = 0, isFromPropsUpdate = false) => {
if (this.unmounted) {
return;
}
const isFirstCall = depth === 0;
const sn = this.getScrollNode();
// if there is less than a screen's worth of messages above or below the
// viewport, try to get some more messages.
//
// scrollTop is the number of pixels between the top of the content and
// the top of the viewport.
//
// scrollHeight is the total height of the content.
//
// clientHeight is the height of the viewport (excluding borders,
// margins, and scrollbars).
//
//
// .---------. - -
// | | | scrollTop |
// .-+---------+-. - - |
// | | | | | |
// | | | | | clientHeight | scrollHeight
// | | | | | |
// `-+---------+-' - |
// | | |
// | | |
// `---------' -
//
// as filling is async and recursive,
// don't allow more than 1 chain of calls concurrently
// do make a note when a new request comes in while already running one,
// so we can trigger a new chain of calls once done.
// However, we make an exception for when we're already filling due to a
// props (or children) update, because very often the children include
// spinners to say whether we're paginating or not, so this would cause
// infinite paginating.
if (isFirstCall) {
if (this.isFilling && !this.isFillingDueToPropsUpdate) {
debuglog("isFilling: not entering while request is ongoing, marking for a subsequent request");
this.fillRequestWhileRunning = true;
this.pendingFillDueToPropsUpdate = isFromPropsUpdate;
return;
}
debuglog("isFilling: setting");
this.isFilling = true;
this.isFillingDueToPropsUpdate = isFromPropsUpdate;
}
const itemlist = this.itemlist.current;
const firstTile = itemlist?.firstElementChild;
const fillPromises = [];
// if scrollTop gets to 1 screen from the top of the first tile,
// try backward filling
if (!firstTile || sn.scrollTop - firstTile.offsetTop < sn.clientHeight) {
// need to back-fill
fillPromises.push(this.maybeFill(depth, true));
}
// if scrollTop gets to 2 screens from the end (so 1 screen below viewport),
// try forward filling
if (sn.scrollHeight - sn.scrollTop < sn.clientHeight * 2) {
// need to forward-fill
fillPromises.push(this.maybeFill(depth, false));
}
if (fillPromises.length) {
try {
await Promise.all(fillPromises);
} catch (err) {
_logger.logger.error(err);
}
}
if (isFirstCall) {
debuglog("isFilling: clearing");
this.isFilling = false;
this.isFillingDueToPropsUpdate = false;
}
if (this.fillRequestWhileRunning) {
const refillDueToPropsUpdate = this.pendingFillDueToPropsUpdate;
this.fillRequestWhileRunning = false;
this.pendingFillDueToPropsUpdate = false;
// noinspection ES6MissingAwait
this.checkFillState(0, refillDueToPropsUpdate);
}
});
/* get the current scroll state. This returns an object with the following
* properties:
*
* boolean stuckAtBottom: true if we are tracking the bottom of the
* scroll. false if we are tracking a particular child.
*
* string trackedScrollToken: undefined if stuckAtBottom is true; if it is
* false, the first token in data-scroll-tokens of the child which we are
* tracking.
*
* number bottomOffset: undefined if stuckAtBottom is true; if it is false,
* the number of pixels the bottom of the tracked child is above the
* bottom of the scroll panel.
*/
(0, _defineProperty2.default)(this, "getScrollState", () => this.scrollState);
/* reset the saved scroll state.
*
* This is useful if the list is being replaced, and you don't want to
* preserve scroll even if new children happen to have the same scroll
* tokens as old ones.
*
* This will cause the viewport to be scrolled down to the bottom on the
* next update of the child list. This is different to scrollToBottom(),
* which would save the current bottom-most child as the active one (so is
* no use if no children exist yet, or if you are about to replace the
* child list.)
*/
(0, _defineProperty2.default)(this, "resetScrollState", () => {
this.scrollState = {
stuckAtBottom: this.props.startAtBottom
};
this.bottomGrowth = 0;
this.minListHeight = 0;
this.scrollTimeout = new _Timer.default(100);
this.heightUpdateInProgress = false;
});
/**
* jump to the top of the content.
*/
(0, _defineProperty2.default)(this, "scrollToTop", () => {
this.getScrollNode().scrollTop = 0;
this.saveScrollState();
});
/**
* jump to the bottom of the content.
*/
(0, _defineProperty2.default)(this, "scrollToBottom", () => {
// the easiest way to make sure that the scroll state is correctly
// saved is to do the scroll, then save the updated state. (Calculating
// it ourselves is hard, and we can't rely on an onScroll callback
// happening, since there may be no user-visible change here).
const sn = this.getScrollNode();
sn.scrollTop = sn.scrollHeight;
this.saveScrollState();
});
/**
* Page up/down.
*
* @param {number} multiple: -1 to page up, +1 to page down
*/
(0, _defineProperty2.default)(this, "scrollRelative", multiple => {
const scrollNode = this.getScrollNode();
// TODO: Document what magic number 0.9 is doing
const delta = multiple * scrollNode.clientHeight * 0.9;
scrollNode.scrollBy(0, delta);
this.saveScrollState();
});
/**
* Scroll up/down in response to a scroll key
* @param {object} ev the keyboard event
*/
(0, _defineProperty2.default)(this, "handleScrollKey", ev => {
const roomAction = (0, _KeyBindingsManager.getKeyBindingsManager)().getRoomAction(ev);
switch (roomAction) {
case _KeyboardShortcuts.KeyBindingAction.ScrollUp:
this.scrollRelative(-1);
break;
case _KeyboardShortcuts.KeyBindingAction.ScrollDown:
this.scrollRelative(1);
break;
case _KeyboardShortcuts.KeyBindingAction.JumpToFirstMessage:
this.scrollToTop();
break;
case _KeyboardShortcuts.KeyBindingAction.JumpToLatestMessage:
this.scrollToBottom();
break;
}
});
/* Scroll the panel to bring the DOM node with the scroll token
* `scrollToken` into view.
*
* 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.
*/
(0, _defineProperty2.default)(this, "scrollToToken", (scrollToken, pixelOffset = 0, offsetBase = 0) => {
// set the trackedScrollToken, so we can get the node through getTrackedNode
this.scrollState = {
stuckAtBottom: false,
trackedScrollToken: scrollToken
};
const trackedNode = this.getTrackedNode();
const scrollNode = this.getScrollNode();
if (trackedNode) {
// set the scrollTop to the position we want.
// note though, that this might not succeed if the combination of offsetBase and pixelOffset
// would position the trackedNode towards the top of the viewport.
// This because when setting the scrollTop only 10 or so events might be loaded,
// not giving enough content below the trackedNode to scroll downwards
// enough, so it ends up in the top of the viewport.
debuglog("scrollToken: setting scrollTop", {
offsetBase,
pixelOffset,
offsetTop: trackedNode.offsetTop
});
scrollNode.scrollTop = trackedNode.offsetTop - scrollNode.clientHeight * offsetBase + pixelOffset;
this.saveScrollState();
}
});
(0, _defineProperty2.default)(this, "collectScroll", divScroll => {
this.divScroll = divScroll;
});
/**
Mark the bottom offset of the last tile, so we can balance it out when
anything below it changes, by calling updatePreventShrinking, to keep
the same minimum bottom offset, effectively preventing the timeline to shrink.
*/
(0, _defineProperty2.default)(this, "preventShrinking", () => {
const messageList = this.itemlist.current;
const tiles = messageList?.children;
if (!tiles) {
return;
}
let lastTileNode;
for (let i = tiles.length - 1; i >= 0; i--) {
const node = tiles[i];
if (node.dataset.scrollTokens) {
lastTileNode = node;
break;
}
}
if (!lastTileNode) {
return;
}
this.clearPreventShrinking();
const offsetFromBottom = messageList.clientHeight - (lastTileNode.offsetTop + lastTileNode.clientHeight);
this.preventShrinkingState = {
offsetFromBottom: offsetFromBottom,
offsetNode: lastTileNode
};
debuglog("prevent shrinking, last tile ", offsetFromBottom, "px from bottom");
});
/** Clear shrinking prevention. Used internally, and when the timeline is reloaded. */
(0, _defineProperty2.default)(this, "clearPreventShrinking", () => {
const messageList = this.itemlist.current;
const balanceElement = messageList && messageList.parentElement;
if (balanceElement) balanceElement.style.removeProperty("paddingBottom");
this.preventShrinkingState = null;
debuglog("prevent shrinking cleared");
});
/**
update the container padding to balance
the bottom offset of the last tile since
preventShrinking was called.
Clears the prevent-shrinking state ones the offset
from the bottom of the marked tile grows larger than
what it was when marking.
*/
(0, _defineProperty2.default)(this, "updatePreventShrinking", () => {
if (this.preventShrinkingState && this.itemlist.current) {
const sn = this.getScrollNode();
const scrollState = this.scrollState;
const messageList = this.itemlist.current;
const {
offsetNode,
offsetFromBottom
} = this.preventShrinkingState;
// element used to set paddingBottom to balance the typing notifs disappearing
const balanceElement = messageList.parentElement;
// if the offsetNode got unmounted, clear
let shouldClear = !offsetNode.parentElement;
// also if 200px from bottom
if (!shouldClear && !scrollState.stuckAtBottom) {
const spaceBelowViewport = sn.scrollHeight - (sn.scrollTop + sn.clientHeight);
shouldClear = spaceBelowViewport >= 200;
}
// try updating if not clearing
if (!shouldClear) {
const currentOffset = messageList.clientHeight - (offsetNode.offsetTop + offsetNode.clientHeight);
const offsetDiff = offsetFromBottom - currentOffset;
if (offsetDiff > 0 && balanceElement) {
balanceElement.style.paddingBottom = `${offsetDiff}px`;
debuglog("update prevent shrinking ", offsetDiff, "px from bottom");
} else if (offsetDiff < 0) {
shouldClear = true;
}
}
if (shouldClear) {
this.clearPreventShrinking();
}
}
});
this.props.resizeNotifier?.on("middlePanelResizedNoisy", this.onResize);
this.resetScrollState();
}
componentDidMount() {
this.checkScroll();
}
componentDidUpdate() {
// after adding event tiles, we may need to tweak the scroll (either to
// keep at the bottom of the timeline, or to maintain the view after
// adding events to the top).
//
// This will also re-check the fill state, in case the pagination was inadequate
this.checkScroll(true);
this.updatePreventShrinking();
}
componentWillUnmount() {
// set a boolean to say we've been unmounted, which any pending
// promises can use to throw away their results.
//
// (We could use isMounted(), but facebook have deprecated that.)
this.unmounted = true;
this.props.resizeNotifier?.removeListener("middlePanelResizedNoisy", this.onResize);
this.divScroll = null;
}
// returns the vertical height in the given direction that can be removed from
// the content box (which has a height of scrollHeight, see checkFillState) without
// pagination occurring.
//
// padding* = UNPAGINATION_PADDING
//
// ### Region determined as excess.
//
// .---------. - -
// |#########| | |
// |#########| - | scrollTop |
// | | | padding* | |
// | | | | |
// .-+---------+-. - - | |
// : | | : | | |
// : | | : | clientHeight | |
// : | | : | | |
// .-+---------+-. - - |
// | | | | | |
// | | | | | clientHeight | scrollHeight
// | | | | | |
// `-+---------+-' - |
// : | | : | |
// : | | : | clientHeight |
// : | | : | |
// `-+---------+-' - - |
// | | | padding* |
// | | | |
// |#########| - |
// |#########| |
// `---------' -
getExcessHeight(backwards) {
const sn = this.getScrollNode();
const contentHeight = this.getMessagesHeight();
const listHeight = this.getListHeight();
const clippedHeight = contentHeight - listHeight;
const unclippedScrollTop = sn.scrollTop + clippedHeight;
if (backwards) {
return unclippedScrollTop - sn.clientHeight - UNPAGINATION_PADDING;
} else {
return contentHeight - (unclippedScrollTop + 2 * sn.clientHeight) - UNPAGINATION_PADDING;
}
}
// check if unfilling is possible and send an unfill request if necessary
checkUnfillState(backwards) {
let excessHeight = this.getExcessHeight(backwards);
if (excessHeight <= 0 || !this.itemlist.current) {
return;
}
const origExcessHeight = excessHeight;
const tiles = this.itemlist.current.children;
// The scroll token of the first/last tile to be unpaginated
let markerScrollToken = null;
// Subtract heights of tiles to simulate the tiles being unpaginated until the
// excess height is less than the height of the next tile to subtract. This
// prevents excessHeight becoming negative, which could lead to future
// pagination.
//
// If backwards is true, we unpaginate (remove) tiles from the back (top).
let tile;
for (let i = 0; i < tiles.length; i++) {
tile = tiles[backwards ? i : tiles.length - 1 - i];
// Subtract height of tile as if it were unpaginated
excessHeight -= tile.clientHeight;
//If removing the tile would lead to future pagination, break before setting scroll token
if (tile.clientHeight > excessHeight) {
break;
}
// The tile may not have a scroll token, so guard it
if (tile.dataset.scrollTokens) {
markerScrollToken = tile.dataset.scrollTokens.split(",")[0];
}
}
if (markerScrollToken) {
// Use a debouncer to prevent multiple unfill calls in quick succession
// This is to make the unfilling process less aggressive
if (this.unfillDebouncer) {
clearTimeout(this.unfillDebouncer);
}
this.unfillDebouncer = window.setTimeout(() => {
this.unfillDebouncer = null;
debuglog("unfilling now", {
backwards,
origExcessHeight
});
this.props.onUnfillRequest?.(backwards, markerScrollToken);
}, UNFILL_REQUEST_DEBOUNCE_MS);
}
}
// check if there is already a pending fill request. If not, set one off.
maybeFill(depth, backwards) {
const dir = backwards ? "b" : "f";
if (this.pendingFillRequests[dir]) {
debuglog("Already a fill in progress - not starting another; direction=", dir);
return Promise.resolve();
}
debuglog("starting fill; direction=", dir);
// onFillRequest can end up calling us recursively (via onScroll
// events) so make sure we set this before firing off the call.
this.pendingFillRequests[dir] = true;
// wait 1ms before paginating, because otherwise
// this will block the scroll event handler for +700ms
// if messages are already cached in memory,
// This would cause jumping to happen on Chrome/macOS.
return new Promise(resolve => window.setTimeout(resolve, 1)).then(() => {
return this.props.onFillRequest?.(backwards);
}).finally(() => {
this.pendingFillRequests[dir] = false;
}).then(hasMoreResults => {
if (this.unmounted) {
return;
}
// Unpaginate once filling is complete
this.checkUnfillState(!backwards);
debuglog("fill complete; hasMoreResults=", hasMoreResults, "direction=", dir);
if (hasMoreResults) {
// further pagination requests have been disabled until now, so
// it's time to check the fill state again in case the pagination
// was insufficient.
return this.checkFillState(depth + 1);
}
});
}
saveScrollState() {
if (this.props.stickyBottom && this.isAtBottom()) {
this.scrollState = {
stuckAtBottom: true
};
debuglog("saved stuckAtBottom state");
return;
}
const scrollNode = this.getScrollNode();
const viewportBottom = scrollNode.scrollHeight - (scrollNode.scrollTop + scrollNode.clientHeight);
const itemlist = this.itemlist.current;
if (!itemlist) return;
const messages = itemlist.children;
let node = null;
// TODO: do a binary search here, as items are sorted by offsetTop
// loop backwards, from bottom-most message (as that is the most common case)
for (let i = messages.length - 1; i >= 0; --i) {
const htmlMessage = messages[i];
if (!htmlMessage.dataset?.scrollTokens) {
// dataset is only specified on HTMLElements
continue;
}
node = htmlMessage;
// break at the first message (coming from the bottom)
// that has it's offsetTop above the bottom of the viewport.
if (this.topFromBottom(node) > viewportBottom) {
// Use this node as the scrollToken
break;
}
}
if (!node) {
debuglog("unable to save scroll state: found no children in the viewport");
return;
}
const scrollToken = node.dataset.scrollTokens?.split(",")[0];
debuglog("saving anchored scroll state to message", scrollToken);
const bottomOffset = this.topFromBottom(node);
this.scrollState = {
stuckAtBottom: false,
trackedNode: node,
trackedScrollToken: scrollToken,
bottomOffset: bottomOffset,
pixelOffset: bottomOffset - viewportBottom //needed for restoring the scroll position when coming back to the room
};
}
async restoreSavedScrollState() {
const scrollState = this.scrollState;
if (scrollState.stuckAtBottom) {
const sn = this.getScrollNode();
if (sn.scrollTop !== sn.scrollHeight) {
sn.scrollTop = sn.scrollHeight;
}
} else if (scrollState.trackedScrollToken) {
const itemlist = this.itemlist.current;
const trackedNode = this.getTrackedNode();
if (trackedNode) {
const newBottomOffset = this.topFromBottom(trackedNode);
const bottomDiff = newBottomOffset - (scrollState.bottomOffset ?? 0);
this.bottomGrowth += bottomDiff;
scrollState.bottomOffset = newBottomOffset;
const newHeight = `${this.getListHeight()}px`;
if (itemlist && itemlist.style.height !== newHeight) {
itemlist.style.height = newHeight;
}
debuglog("balancing height because messages below viewport grew by", bottomDiff);
}
}
if (!this.heightUpdateInProgress) {
this.heightUpdateInProgress = true;
try {
await this.updateHeight();
} finally {
this.heightUpdateInProgress = false;
}
} else {
debuglog("not updating height because request already in progress");
}
}
// need a better name that also indicates this will change scrollTop? Rebalance height? Reveal content?
async updateHeight() {
// wait until user has stopped scrolling
if (this.scrollTimeout?.isRunning()) {
debuglog("updateHeight waiting for scrolling to end ... ");
await this.scrollTimeout.finished();
debuglog("updateHeight actually running now");
} else {
debuglog("updateHeight running without delay");
}
// We might have unmounted since the timer finished, so abort if so.
if (this.unmounted) {
debuglog("updateHeight: abort due to unmount");
return;
}
const sn = this.getScrollNode();
const itemlist = this.itemlist.current;
const contentHeight = this.getMessagesHeight();
// Only round to the nearest page when we're basing the height off the content, not off the scrollNode height
// otherwise it'll cause too much overscroll which makes it possible to entirely scroll content off-screen.
if (contentHeight < sn.clientHeight) {
this.minListHeight = sn.clientHeight;
} else {
this.minListHeight = Math.ceil(contentHeight / PAGE_SIZE) * PAGE_SIZE;
}
this.bottomGrowth = 0;
const newHeight = `${this.getListHeight()}px`;
const scrollState = this.scrollState;
if (scrollState.stuckAtBottom) {
if (itemlist && itemlist.style.height !== newHeight) {
itemlist.style.height = newHeight;
}
if (sn.scrollTop !== sn.scrollHeight) {
sn.scrollTop = sn.scrollHeight;
}
debuglog("updateHeight to", newHeight);
} else if (scrollState.trackedScrollToken) {
const trackedNode = this.getTrackedNode();
// if the timeline has been reloaded
// this can be called before scrollToBottom or whatever has been called
// so don't do anything if the node has disappeared from
// the currently filled piece of the timeline
if (trackedNode) {
const oldTop = trackedNode.offsetTop;
if (itemlist && itemlist.style.height !== newHeight) {
itemlist.style.height = newHeight;
}
const newTop = trackedNode.offsetTop;
const topDiff = newTop - oldTop;
// important to scroll by a relative amount as
// reading scrollTop and then setting it might
// yield out of date values and cause a jump
// when setting it
sn.scrollBy(0, topDiff);
debuglog("updateHeight to", {
newHeight,
topDiff
});
}
}
}
getTrackedNode() {
const scrollState = this.scrollState;
const trackedNode = scrollState.trackedNode;
if (!trackedNode?.parentElement && this.itemlist.current) {
let node = undefined;
const messages = this.itemlist.current.children;
const scrollToken = scrollState.trackedScrollToken;
for (let i = messages.length - 1; i >= 0; --i) {
const m = messages[i];
// 'data-scroll-tokens' is a DOMString of comma-separated scroll tokens
// There might only be one scroll token
if (scrollToken && m.dataset.scrollTokens?.split(",").includes(scrollToken)) {
node = m;
break;
}
}
if (node) {
debuglog("had to find tracked node again for token:", scrollState.trackedScrollToken);
}
scrollState.trackedNode = node;
}
if (!scrollState.trackedNode) {
debuglog("No node with token:", scrollState.trackedScrollToken);
return;
}
return scrollState.trackedNode;
}
getListHeight() {
return this.bottomGrowth + this.minListHeight;
}
getMessagesHeight() {
const itemlist = this.itemlist.current;
const lastNode = itemlist?.lastElementChild;
const lastNodeBottom = lastNode ? lastNode.offsetTop + lastNode.clientHeight : 0;
const firstNodeTop = itemlist?.firstElementChild?.offsetTop ?? 0;
// 18 is itemlist padding
return lastNodeBottom - firstNodeTop + 18 * 2;
}
topFromBottom(node) {
if (!this.itemlist.current) return -1;
// current capped height - distance from top = distance from bottom of container to top of tracked element
return this.itemlist.current.clientHeight - node.offsetTop;
}
/* get the DOM node which has the scrollTop property we care about for our
* message panel.
*/
getScrollNode() {
if (this.unmounted) {
// this shouldn't happen, but when it does, turn the NPE into
// something more meaningful.
throw new Error("ScrollPanel.getScrollNode called when unmounted");
}
if (!this.divScroll) {
// Likewise, we should have the ref by this point, but if not
// turn the NPE into something meaningful.
throw new Error("ScrollPanel.getScrollNode called before AutoHideScrollbar ref collected");
}
return this.divScroll;
}
render() {
// TODO: the classnames on the div and ol could do with being updated to
// reflect the fact that we don't necessarily contain a list of messages.
// it's not obvious why we have a separate div and ol anyway.
// give the <ol> an explicit role=list because Safari+VoiceOver seems to think an ordered-list with
// list-style-type: none; is no longer a list
return /*#__PURE__*/_react.default.createElement(_AutoHideScrollbar.default, {
wrappedRef: this.collectScroll,
onScroll: this.onScroll,
className: `mx_ScrollPanel ${this.props.className}`,
style: this.props.style
}, this.props.fixedChildren, /*#__PURE__*/_react.default.createElement("div", {
className: "mx_RoomView_messageListWrapper"
}, /*#__PURE__*/_react.default.createElement("ol", {
ref: this.itemlist,
className: "mx_RoomView_MessageList",
"aria-live": "polite"
}, this.props.children)));
}
}
exports.default = ScrollPanel;
// noinspection JSUnusedLocalSymbols
(0, _defineProperty2.default)(ScrollPanel, "defaultProps", {
stickyBottom: true,
startAtBottom: true,
onFillRequest: function (backwards) {
return Promise.resolve(false);
},
onUnfillRequest: function (backwards, scrollToken) {},
onScroll: function () {}
});
//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJuYW1lcyI6WyJfcmVhY3QiLCJfaW50ZXJvcFJlcXVpcmVXaWxkY2FyZCIsInJlcXVpcmUiLCJfbG9nZ2VyIiwiX1NldHRpbmdzU3RvcmUiLCJfaW50ZXJvcFJlcXVpcmVEZWZhdWx0IiwiX1RpbWVyIiwiX0F1dG9IaWRlU2Nyb2xsYmFyIiwiX0tleUJpbmRpbmdzTWFuYWdlciIsIl9LZXlib2FyZFNob3J0Y3V0cyIsIl9nZXRSZXF1aXJlV2lsZGNhcmRDYWNoZSIsImUiLCJXZWFrTWFwIiwiciIsInQiLCJfX2VzTW9kdWxlIiwiZGVmYXVsdCIsImhhcyIsImdldCIsIm4iLCJfX3Byb3RvX18iLCJhIiwiT2JqZWN0IiwiZGVmaW5lUHJvcGVydHkiLCJnZXRPd25Qcm9wZXJ0eURlc2NyaXB0b3IiLCJ1IiwiaGFzT3duUHJvcGVydHkiLCJjYWxsIiwiaSIsInNldCIsIlVOUEFHSU5BVElPTl9QQURESU5HIiwiVU5GSUxMX1JFUVVFU1RfREVCT1VOQ0VfTVMiLCJQQUdFX1NJWkUiLCJkZWJ1Z2xvZyIsImFyZ3MiLCJTZXR0aW5nc1N0b3JlIiwiZ2V0VmFsdWUiLCJsb2dnZXIiLCJsb2ciLCJjb25zb2xlIiwiU2Nyb2xsUGFuZWwiLCJSZWFjdCIsIkNvbXBvbmVudCIsImNvbnN0cnVjdG9yIiwicHJvcHMiLCJfZGVmaW5lUHJvcGVydHkyIiwiYiIsImYiLCJjcmVhdGVSZWYiLCJldiIsInJlc2l6ZU5vdGlmaWVyIiwiaXNSZXNpemluZyIsImdldFNjcm9sbE5vZGUiLCJzY3JvbGxUb3AiLCJzY3JvbGxUaW1lb3V0IiwicmVzdGFydCIsInNhdmVTY3JvbGxTdGF0ZSIsInVwZGF0ZVByZXZlbnRTaHJpbmtpbmciLCJvblNjcm9sbCIsImNoZWNrRmlsbFN0YXRlIiwiY2hlY2tTY3JvbGwiLCJwcmV2ZW50U2hyaW5raW5nU3RhdGUiLCJwcmV2ZW50U2hyaW5raW5nIiwiaXNGcm9tUHJvcHNVcGRhdGUiLCJ1bm1vdW50ZWQiLCJyZXN0b3JlU2F2ZWRTY3JvbGxTdGF0ZSIsInNuIiwic2Nyb2xsSGVpZ2h0IiwiY2xpZW50SGVpZ2h0IiwiZGVwdGgiLCJpc0ZpcnN0Q2FsbCIsImlzRmlsbGluZyIsImlzRmlsbGluZ0R1ZVRvUHJvcHNVcGRhdGUiLCJmaWxsUmVxdWVzdFdoaWxlUnVubmluZyIsInBlbmRpbmdGaWxsRHVlVG9Qcm9wc1VwZGF0ZSIsIml0ZW1saXN0IiwiY3VycmVudCIsImZpcnN0VGlsZSIsImZpcnN0RWxlbWVudENoaWxkIiwiZmlsbFByb21pc2VzIiwib2Zmc2V0VG9wIiwicHVzaCIsIm1heWJlRmlsbCIsImxlbmd0aCIsIlByb21pc2UiLCJhbGwiLCJlcnIiLCJlcnJvciIsInJlZmlsbER1ZVRvUHJvcHNVcGRhdGUiLCJzY3JvbGxTdGF0ZSIsInN0dWNrQXRCb3R0b20iLCJzdGFydEF0Qm90dG9tIiwiYm90dG9tR3Jvd3RoIiwibWluTGlzdEhlaWdodCIsIlRpbWVyIiwiaGVpZ2h0VXBkYXRlSW5Qcm9ncmVzcyIsIm11bHRpcGxlIiwic2Nyb2xsTm9kZSIsImRlbHRhIiwic2Nyb2xsQnkiLCJyb29tQWN0aW9uIiwiZ2V0S2V5QmluZGluZ3NNYW5hZ2VyIiwiZ2V0Um9vbUFjdGlvbiIsIktleUJpbmRpbmdBY3Rpb24iLCJTY3JvbGxVcCIsInNjcm9sbFJlbGF0aXZlIiwiU2Nyb2xsRG93biIsIkp1bXBUb0ZpcnN0TWVzc2FnZSIsInNjcm9sbFRvVG9wIiwiSnVtcFRvTGF0ZXN0TWVzc2FnZSIsInNjcm9sbFRvQm90dG9tIiwic2Nyb2xsVG9rZW4iLCJwaXhlbE9mZnNldCIsIm9mZnNldEJhc2UiLCJ0cmFja2VkU2Nyb2xsVG9rZW4iLCJ0cmFja2VkTm9kZSIsImdldFRyYWNrZWROb2RlIiwiZGl2U2Nyb2xsIiwibWVzc2FnZUxpc3QiLCJ0aWxlcyIsImNoaWxkcmVuIiwibGFzdFRpbGVOb2RlIiwibm9kZSIsImRhdGFzZXQiLCJzY3JvbGxUb2tlbnMiLCJjbGVhclByZXZlbnRTaHJpbmtpbmciLCJvZmZzZXRGcm9tQm90dG9tIiwib2Zmc2V0Tm9kZSIsImJhbGFuY2VFbGVtZW50IiwicGFyZW50RWxlbWVudCIsInN0eWxlIiwicmVtb3ZlUHJvcGVydHkiLCJzaG91bGRDbGVhciIsInNwYWNlQmVsb3dWaWV3cG9ydCIsImN1cnJlbnRPZmZzZXQiLCJvZmZzZXREaWZmIiwicGFkZGluZ0JvdHRvbSIsIm9uIiwib25SZXNpemUiLCJyZXNldFNjcm9sbFN0YXRlIiwiY29tcG9uZW50RGlkTW91bnQiLCJjb21wb25lbnREaWRVcGRhdGUiLCJjb21wb25lbnRXaWxsVW5tb3VudCIsInJlbW92ZUxpc3RlbmVyIiwiZ2V0RXhjZXNzSGVpZ2h0IiwiYmFja3dhcmRzIiwiY29udGVudEhlaWdodCIsImdldE1lc3NhZ2VzSGVpZ2h0IiwibGlzdEhlaWdodCIsImdldExpc3RIZWlnaHQiLCJjbGlwcGVkSGVpZ2h0IiwidW5jbGlwcGVkU2Nyb2xsVG9wIiwiY2hlY2tVbmZpbGxTdGF0ZSIsImV4Y2Vzc0hlaWdodCIsIm9yaWdFeGNlc3NIZWlnaHQiLCJtYXJrZXJTY3JvbGxUb2tlbiIsInRpbGUiLCJzcGxpdCIsInVuZmlsbERlYm91bmNlciIsImNsZWFyVGltZW91dCIsIndpbmRvdyIsInNldFRpbWVvdXQiLCJvblVuZmlsbFJlcXVlc3QiLCJkaXIiLCJwZW5kaW5nRmlsbFJlcXVlc3RzIiwicmVzb2x2ZSIsInRoZW4iLCJvbkZpbGxSZXF1ZXN0IiwiZmluYWxseSIsImhhc01vcmVSZXN1bHRzIiwic3RpY2t5Qm90dG9tIiwiaXNBdEJvdHRvbSIsInZpZXdwb3J0Qm90dG9tIiwibWVzc2FnZXMiLCJodG1sTWVzc2FnZSIsInRvcEZyb21Cb3R0b20iLCJib3R0b21PZmZzZXQiLCJuZXdCb3R0b21PZmZzZXQiLCJib3R0b21EaWZmIiwibmV3SGVpZ2h0IiwiaGVpZ2h0IiwidXBkYXRlSGVpZ2h0IiwiaXNSdW5uaW5nIiwiZmluaXNoZWQiLCJNYXRoIiwiY2VpbCIsIm9sZFRvcCIsIm5ld1RvcCIsInRvcERpZmYiLCJ1bmRlZmluZWQiLCJtIiwiaW5jbHVkZXMiLCJsYXN0Tm9kZSIsImxhc3RFbGVtZW50Q2hpbGQiLCJsYXN0Tm9kZUJvdHRvbSIsImZpcnN0Tm9kZVRvcCIsIkVycm9yIiwicmVuZGVyIiwiY3JlYXRlRWxlbWVudCIsIndyYXBwZWRSZWYiLCJjb2xsZWN0U2Nyb2xsIiwiY2xhc3NOYW1lIiwiZml4ZWRDaGlsZHJlbiIsInJlZiIsImV4cG9ydHMiXSwic291cmNlcyI6WyIuLi8uLi8uLi9zcmMvY29tcG9uZW50cy9zdHJ1Y3R1cmVzL1Njcm9sbFBhbmVsLnRzeCJdLCJzb3VyY2VzQ29udGVudCI6WyIvKlxuQ29weXJpZ2h0IDIwMjQgTmV3IFZlY3RvciBMdGQuXG5Db3B5cmlnaHQgMjAxNS0yMDIyIFRoZSBNYXRyaXgub3JnIEZvdW5kYXRpb24gQy5JLkMuXG5cblNQRFgtTGljZW5zZS1JZGVudGlmaWVyOiBBR1BMLTMuMC1vbmx5IE9SIEdQTC0zLjAtb25seVxuUGxlYXNlIHNlZSBMSUNFTlNFIGZpbGVzIGluIHRoZSByZXBvc2l0b3J5IHJvb3QgZm9yIGZ1bGwgZGV0YWlscy5cbiovXG5cbmltcG9ydCBSZWFjdCwgeyBjcmVhdGVSZWYsIENTU1Byb3BlcnRpZXMsIFJlYWN0Tm9kZSB9IGZyb20gXCJyZWFjdFwiO1xuaW1wb3J0IHsgbG9nZ2VyIH0gZnJvbSBcIm1hdHJpeC1qcy1zZGsvc3JjL2xvZ2dlclwiO1xuXG5pbXBvcnQgU2V0dGluZ3NTdG9yZSBmcm9tIFwiLi4vLi4vc2V0dGluZ3MvU2V0dGluZ3NTdG9yZVwiO1xuaW1wb3J0IFRpbWVyIGZyb20gXCIuLi8uLi91dGlscy9UaW1lclwiO1xuaW1wb3J0IEF1dG9IaWRlU2Nyb2xsYmFyIGZyb20gXCIuL0F1dG9IaWRlU2Nyb2xsYmFyXCI7XG5pbXBvcnQgeyBnZXRLZXlCaW5kaW5nc01hbmFnZXIgfSBmcm9tIFwiLi4vLi4vS2V5QmluZGluZ3NNYW5hZ2VyXCI7XG5pbXBvcnQgUmVzaXplTm90aWZpZXIgZnJvbSBcIi4uLy4uL3V0aWxzL1Jlc2l6ZU5vdGlmaWVyXCI7XG5pbXBvcnQgeyBLZXlCaW5kaW5nQWN0aW9uIH0gZnJvbSBcIi4uLy4uL2FjY2Vzc2liaWxpdHkvS2V5Ym9hcmRTaG9ydGN1dHNcIjtcblxuLy8gVGhlIGFtb3VudCBvZiBleHRyYSBzY3JvbGwgZGlzdGFuY2UgdG8gYWxsb3cgcHJpb3IgdG8gdW5maWxsaW5nLlxuLy8gU2VlIGdldEV4Y2Vzc0hlaWdodC5cbmNvbnN0IFVOUEFHSU5BVElPTl9QQURESU5HID0gNjAwMDtcbi8vIFRoZSBudW1iZXIgb2YgbWlsbGlzZWNvbmRzIHRvIGRlYm91bmNlIGNhbGxzIHRvIG9uVW5maWxsUmVxdWVzdCxcbi8vIHRvIHByZXZlbnQgbWFueSBzY3JvbGwgZXZlbnRzIGNhdXNpbmcgbWFueSB1bmZpbGxpbmcgcmVxdWVzdHMuXG5jb25zdCBVTkZJTExfUkVRVUVTVF9ERUJPVU5DRV9NUyA9IDIwMDtcbi8vIHVwZGF0ZUhlaWdodCBtYWtlcyB0aGUgaGVpZ2h0IGEgYE1hdGguY2VpbGAgbXVsdGlwbGUgb2YgdGhpcywgc28gd2UgZG9uJ3QgaGF2ZSB0byB1cGRhdGUgdGhlIGhlaWdodCB0b28gb2Z0ZW4uXG4vLyBJdCBhbHNvIGFsbG93cyB0aGUgdXNlciB0byBzY3JvbGwgcGFzdCB0aGUgcGFnaW5hdGlvbiBzcGlubmVyIGEgYml0LCBzbyB0aGV5IGRvbid0IGZlZWwgYmxvY2tlZCBzb1xuLy8gbXVjaCB3aGlsZSB0aGUgY29udGVudCBsb2Fkcy5cbmNvbnN0IFBBR0VfU0laRSA9IDQwMDtcblxuY29uc3QgZGVidWdsb2cgPSAoLi4uYXJnczogYW55W10pOiB2b2lkID0+IHtcbiAgICBpZiAoU2V0dGluZ3NTdG9yZS5nZXRWYWx1ZShcImRlYnVnX3Njcm9sbF9wYW5lbFwiKSkge1xuICAgICAgICBsb2dnZXIubG9nLmNhbGwoY29uc29sZSwgXCJTY3JvbGxQYW5lbCBkZWJ1Z2xvZzpcIiwgLi4uYXJncyk7XG4gICAgfVxufTtcblxuaW50ZXJmYWNlIElQcm9wcyB7XG4gICAgLyogc3RpY2t5Qm90dG9tOiBpZiBzZXQgdG8gdHJ1ZSwgdGhlbiBvbmNlIHRoZSB1c2VyIGhpdHMgdGhlIGJvdHRvbSBvZlxuICAgICAqIHRoZSBsaXN0LCBhbnkgbmV3IGNoaWxkcmVuIGFkZGVkIHRvIHRoZSBsaXN0IHdpbGwgY2F1c2UgdGhlIGxpc3QgdG9cbiAgICAgKiBzY3JvbGwgZG93biB0byBzaG93IHRoZSBuZXcgZWxlbWVudCwgcmF0aGVyIHRoYW4gcHJlc2VydmluZyB0aGVcbiAgICAgKiBleGlzdGluZyB2aWV3LlxuICAgICAqL1xuICAgIHN0aWNreUJvdHRvbT86IGJvb2xlYW47XG5cbiAgICAvKiBzdGFydEF0Qm90dG9tOiBpZiBzZXQgdG8gdHJ1ZSwgdGhlIHZpZXcgaXMgYXNzdW1lZCB0byBzdGFydFxuICAgICAqIHNjcm9sbGVkIHRvIHRoZSBib3R0b20uXG4gICAgICogWFhYOiBJdCdzIGxpa2VseSB0aGlzIGlzIHVubmVjZXNzYXJ5IGFuZCBjYW4gYmUgZGVyaXZlZCBmcm9tXG4gICAgICogc3RpY2t5Qm90dG9tLCBidXQgSSdtIGFkZGluZyBhbiBleHRyYSBwYXJhbWV0ZXIgdG8gZW5zdXJlXG4gICAgICogYmVoYXZpb3VyIHN0YXlzIHRoZSBzYW1lIGZvciBvdGhlciB1c2VzIG9mIFNjcm9sbFBhbmVsLlxuICAgICAqIElmIHNvLCBsZXQncyByZW1vdmUgdGhpcyBwYXJhbWV0ZXIgZG93biB0aGUgbGluZS5cbiAgICAgKi9cbiAgICBzdGFydEF0Qm90dG9tPzogYm9vbGVhbjtcblxuICAgIC8qIGNsYXNzTmFtZTogY2xhc3NuYW1lcyB0byBhZGQgdG8gdGhlIHRvcC1sZXZlbCBkaXZcbiAgICAgKi9cbiAgICBjbGFzc05hbWU/OiBzdHJpbmc7XG5cbiAgICAvKiBzdHlsZTogc3R5bGVzIHRvIGFkZCB0byB0aGUgdG9wLWxldmVsIGRpdlxuICAgICAqL1xuICAgIHN0eWxlPzogQ1NTUHJvcGVydGllcztcblxuICAgIC8qIHJlc2l6ZU5vdGlmaWVyOiBSZXNpemVOb3RpZmllciB0byBrbm93IHdoZW4gbWlkZGxlIGNvbHVtbiBoYXMgY2hhbmdlZCBzaXplXG4gICAgICovXG4gICAgcmVzaXplTm90aWZpZXI/OiBSZXNpemVOb3RpZmllcjtcblxuICAgIC8qIGZpeGVkQ2hpbGRyZW46IGFsbG93cyBmb3IgY2hpbGRyZW4gdG8gYmUgcGFzc2VkIHdoaWNoIGFyZSByZW5kZXJlZCBvdXRzaWRlXG4gICAgICogb2YgdGhlIHdyYXBwZXJcbiAgICAgKi9cbiAgICBmaXhlZENoaWxkcmVuPzogUmVhY3ROb2RlO1xuICAgIGNoaWxkcmVuPzogUmVhY3ROb2RlO1xuXG4gICAgLyogb25GaWxsUmVxdWVzdChiYWNrd2FyZHMpOiBhIGNhbGxiYWNrIHdoaWNoIGlzIGNhbGxlZCBvbiBzY3JvbGwgd2hlblxuICAgICAqIHRoZSB1c2VyIG5lYXJzIHRoZSBzdGFydCAoYmFja3dhcmRzID0gdHJ1ZSkgb3IgZW5kIChiYWNrd2FyZHMgPVxuICAgICAqIGZhbHNlKSBvZiB0aGUgbGlzdC5cbiAgICAgKlxuICAgICAqIFRoaXMgc2hvdWxkIHJldHVybiBhIHByb21pc2U7IG5vIG1vcmUgY2FsbHMgd2lsbCBiZSBtYWRlIHVudGlsIHRoZVxuICAgICAqIHByb21pc2UgY29tcGxldGVzLlxuICAgICAqXG4gICAgICogVGhlIHByb21pc2Ugc2hvdWxkIHJlc29sdmUgdG8gdHJ1ZSBpZiB0aGVyZSBpcyBtb3JlIGRhdGEgdG8gYmVcbiAgICAgKiByZXRyaWV2ZWQgaW4gdGhpcyBkaXJlY3Rpb24gKGluIHdoaWNoIGNhc2Ugb25GaWxsUmVxdWVzdCBtYXkgYmVcbiAgICAgKiBjYWxsZWQgYWdhaW4gaW1tZWRpYXRlbHkpLCBvciBmYWxzZSBpZiB0aGVyZSBpcyBubyBtb3JlIGRhdGEgaW4gdGhpc1xuICAgICAqIGRpcmVjdGlvbiAoYXQgdGhpcyB0aW1lKSAtIHdoaWNoIHdpbGwgc3RvcCB0aGUgcGFnaW5hdGlvbiBjeWNsZSB1bnRpbFxuICAgICAqIHRoZSB1c2VyIHNjcm9sbHMgYWdhaW4uXG4gICAgICovXG4gICAgb25GaWxsUmVxdWVzdD8oYmFja3dhcmRzOiBib29sZWFuKTogUHJvbWlzZTxib29sZWFuPjtcblxuICAgIC8qIG9uVW5maWxsUmVxdWVzdChiYWNrd2FyZHMpOiBhIGNhbGxiYWNrIHdoaWNoIGlzIGNhbGxlZCBvbiBzY3JvbGwgd2hlblxuICAgICAqIHRoZXJlIGFyZSBjaGlsZHJlbiBlbGVtZW50cyB0aGF0IGFyZSBmYXIgb3V0IG9mIHZpZXcgYW5kIGNvdWxkIGJlIHJlbW92ZWRcbiAgICAgKiB3aXRob3V0IGNhdXNpbmcgcGFnaW5hdGlvbiB0byBvY2N1ci5cbiAgICAgKlxuICAgICAqIFRoaXMgZnVuY3Rpb24gc2hvdWxkIGFjY2VwdCBhIGJvb2xlYW4sIHdoaWNoIGlzIHRydWUgdG8gaW5kaWNhdGUgdGhlIGJhY2svdG9wXG4gICAgICogb2YgdGhlIHBhbmVsIGFuZCBmYWxzZSBvdGhlcndpc2UsIGFuZCBhIHNjcm9sbCB0b2tlbiwgd2hpY2ggcmVmZXJzIHRvIHRoZVxuICAgICAqIGZpcnN0IGVsZW1lbnQgdG8gcmVtb3ZlIGlmIHJlbW92aW5nIGZyb20gdGhlIGZyb250L2JvdHRvbSwgYW5kIGxhc3QgZWxlbWVudFxuICAgICAqIHRvIHJlbW92ZSBpZiByZW1vdmluZyBmcm9tIHRoZSBiYWNrL3RvcC5cbiAgICAgKi9cbiAgICBvblVuZmlsbFJlcXVlc3Q/KGJhY2t3YXJkczogYm9vbGVhbiwgc2Nyb2xsVG9rZW46IHN0cmluZyk6IHZvaWQ7XG5cbiAgICAvKiBvblNjcm9sbDogYSBjYWxsYmFjayB3aGljaCBpcyBjYWxsZWQgd2hlbmV2ZXIgYW55IHNjcm9sbCBoYXBwZW5zLlxuICAgICAqL1xuICAgIG9uU2Nyb2xsPyhldmVudDogRXZlbnQpOiB2b2lkO1xufVxuXG4vKiBUaGlzIGNvbXBvbmVudCBpbXBsZW1lbnRzIGFuIGludGVsbGlnZW50IHNjcm9sbGluZyBsaXN0LlxuICpcbiAqIEl0IHdyYXBzIGEgbGlzdCBvZiA8bGk+IGNoaWxkcmVuOyB3aGVuIGl0ZW1zIGFyZSBhZGRlZCB0byB0aGUgc3RhcnQgb3IgZW5kXG4gKiBvZiB0aGUgbGlzdCwgdGhlIHNjcm9sbCBwb3NpdGlvbiBpcyB1cGRhdGVkIHNvIHRoYXQgdGhlIHVzZXIgc3RpbGwgc2VlcyB0aGVcbiAqIHNhbWUgcG9zaXRpb24gaW4gdGhlIGxpc3QuXG4gKlxuICogSXQgYWxzbyBwcm92aWRlcyBhIGhvb2sgd2hpY2ggYWxsb3dzIHBhcmVudHMgdG8gcHJvdmlkZSBtb3JlIGxpc3QgZWxlbWVudHNcbiAqIHdoZW4gd2UgZ2V0IGNsb3NlIHRvIHRoZSBzdGFydCBvciBlbmQgb2YgdGhlIGxpc3QuXG4gKlxuICogRWFjaCBjaGlsZCBlbGVtZW50IHNob3VsZCBoYXZlIGEgJ2RhdGEtc2Nyb2xsLXRva2VucycuIFRoaXMgc3RyaW5nIG9mXG4gKiBjb21tYS1zZXBhcmF0ZWQgdG9rZW5zIG1heSBjb250YWluIGEgc2luZ2xlIHRva2VuIG9yIG1hbnksIHdoZXJlIG1hbnkgaW5kaWNhdGVzXG4gKiB0aGF0IHRoZSBlbGVtZW50IGNvbnRhaW5zIGVsZW1lbnRzIHRoYXQgaGF2ZSBzY3JvbGwgdG9rZW5zIHRoZW1zZWx2ZXMuIFRoZSBmaXJzdFxuICogdG9rZW4gaW4gJ2RhdGEtc2Nyb2xsLXRva2VucycgaXMgdXNlZCB0byBzZXJpYWxpc2UgdGhlIHNjcm9sbCBzdGF0ZSwgYW5kIHJldHVybmVkXG4gKiBhcyB0aGUgJ3RyYWNrZWRTY3JvbGxUb2tlbicgYXR0cmlidXRlIGJ5IGdldFNjcm9sbFN0YXRlKCkuXG4gKlxuICogSU1QT1JUQU5UOiBJTkRJVklEVUFMIFRPS0VOUyBXSVRISU4gJ2RhdGEtc2Nyb2xsLXRva2VucycgTVVTVCBOT1QgQ09OVEFJTiBDT01NQVMuXG4gKlxuICogU29tZSBub3RlcyBhYm91dCB0aGUgaW1wbGVtZW50YXRpb246XG4gKlxuICogVGhlIHNhdmVkICdzY3JvbGxTdGF0ZScgY2FuIGV4aXN0IGluIG9uZSBvZiB0d28gc3RhdGVzOlxuICpcbiAqICAgLSBzdHVja0F0Qm90dG9tOiAodGhlIGRlZmF1bHQsIGFuZCByZXN0b3JlZCBieSByZXNldFNjcm9sbFN0YXRlKTogdGhlXG4gKiAgICAgdmlld3BvcnQgaXMgc2Nyb2xsZWQgZG93biBhcyBmYXIgYXMgaXQgY2FuIGJlLiBXaGVuIHRoZSBjaGlsZHJlbiBhcmVcbiAqICAgICB1cGRhdGVkLCB0aGUgc2Nyb2xsIHBvc2l0aW9uIHdpbGwgYmUgdXBkYXRlZCB0byBlbnN1cmUgaXQgaXMgc3RpbGwgYXRcbiAqICAgICB0aGUgYm90dG9tLlxuICpcbiAqICAgLSBmaXhlZCwgaW4gd2hpY2ggdGhlIHZpZXdwb3J0IGlzIGNvbmNlcHR1YWxseSB0aWVkIGF0IGEgc3BlY2lmaWMgc2Nyb2xsXG4gKiAgICAgb2Zmc2V0LiAgV2UgZG9uJ3Qgc2F2ZSB0aGUgYWJzb2x1dGUgc2Nyb2xsIG9mZnNldCwgYmVjYXVzZSB0aGF0IHdvdWxkIGJlXG4gKiAgICAgYWZmZWN0ZWQgYnkgd2luZG93IHdpZHRoLCB6b29tIGxldmVsLCBhbW91bnQgb2Ygc2Nyb2xsYmFjaywgZXRjLiBJbnN0ZWFkLFxuICogICAgIHdlIHNhdmUgYW4gaWRlbnRpZmllciBmb3IgdGhlIGxhc3QgZnVsbHktdmlzaWJsZSBtZXNzYWdlLCBhbmQgdGhlIG51bWJlclxuICogICAgIG9mIHBpeGVscyB0aGUgd2luZG93IHdhcyBzY3JvbGxlZCBiZWxvdyBpdCAtIHdoaWNoIGlzIGhvcGVmdWxseSBuZWFyXG4gKiAgICAgZW5vdWdoLlxuICpcbiAqIFRoZSAnc3RpY2t5Qm90dG9tJyBwcm9wZXJ0eSBjb250cm9scyB0aGUgYmVoYXZpb3VyIHdoZW4gd2UgcmVhY2ggdGhlIGJvdHRvbVxuICogb2YgdGhlIHdpbmRvdyAoZWl0aGVyIHRocm91Z2ggYSB1c2VyLWluaXRpYXRlZCBzY3JvbGwsIG9yIGJ5IGNhbGxpbmdcbiAqIHNjcm9sbFRvQm90dG9tKS4gSWYgc3RpY2t5Qm90dG9tIGlzIGVuYWJsZWQsIHRoZSBzY3JvbGxTdGF0ZSB3aWxsIGVudGVyXG4gKiAnc3R1Y2tBdEJvdHRvbScgc3RhdGUgLSBlbnN1cmluZyB0aGF0IG5ldyBhZGRpdGlvbnMgY2F1c2UgdGhlIHdpbmRvdyB0b1xuICogc2Nyb2xsIGRvd24gZnVydGhlci4gSWYgc3RpY2t5Qm90dG9tIGlzIGRpc2FibGVkLCB3ZSBqdXN0IHNhdmUgdGhlIHNjcm9sbFxuICogb2Zmc2V0IGFzIG5vcm1hbC5cbiAqL1xuXG5leHBvcnQgaW50ZXJmYWNlIElTY3JvbGxTdGF0ZSB7XG4gICAgc3R1Y2tBdEJvdHRvbT86IGJvb2xlYW47XG4gICAgdHJhY2tlZE5vZGU/OiBIVE1MRWxlbWVudDtcbiAgICB0cmFja2VkU2Nyb2xsVG9rZW4/OiBzdHJpbmc7XG4gICAgYm90dG9tT2Zmc2V0PzogbnVtYmVyO1xuICAgIHBpeGVsT2Zmc2V0PzogbnVtYmVyO1xufVxuXG5pbnRlcmZhY2UgSVByZXZlbnRTaHJpbmtpbmdTdGF0ZSB7XG4gICAgb2Zmc2V0RnJvbUJvdHRvbTogbnVtYmVyO1xuICAgIG9mZnNldE5vZGU6IEhUTUxFbGVtZW50O1xufVxuXG5leHBvcnQgZGVmYXVsdCBjbGFzcyBTY3JvbGxQYW5lbCBleHRlbmRzIFJlYWN0LkNvbXBvbmVudDxJUHJvcHM+IHtcbiAgICAvLyBub2luc3BlY3Rpb24gSlNVbnVzZWRMb2NhbFN5bWJvbHNcbiAgICBwdWJsaWMgc3RhdGljIGRlZmF1bHRQcm9wcyA9IHtcbiAgICAgICAgc3RpY2t5Qm90dG9tOiB0cnVlLFxuICAgICAgICBzdGFydEF0Qm90dG9tOiB0cnVlLFxuICAgICAgICBvbkZpbGxSZXF1ZXN0OiBmdW5jdGlvbiAoYmFja3dhcmRzOiBib29sZWFuKSB7XG4gICAgICAgICAgICByZXR1cm4gUHJvbWlzZS5yZXNvbHZlKGZhbHNlKTtcbiAgICAgICAgfSxcbiAgICAgICAgb25VbmZpbGxSZXF1ZXN0OiBmdW5jdGlvbiAoYmFja3dhcmRzOiBib29sZWFuLCBzY3JvbGxUb2tlbjogc3RyaW5nKSB7fSxcbiAgICAgICAgb25TY3JvbGw6IGZ1bmN0aW9uICgpIHt9LFxuICAgIH07XG5cbiAgICBwcml2YXRlIHJlYWRvbmx5IHBlbmRpbmdGaWxsUmVxdWVzdHM6IFJlY29yZDxcImJcIiB8IFwiZlwiLCBib29sZWFuIHwgbnVsbD4gPSB7XG4gICAgICAgIGI6IG51bGwsXG4gICAgICAgIGY6IG51bGwsXG4gICAgfTtcbiAgICBwcml2YXRlIHJlYWRvbmx5IGl0ZW1saXN0ID0gY3JlYXRlUmVmPEhUTUxPTGlzdEVsZW1lbnQ+KCk7XG4gICAgcHJpdmF0ZSB1bm1vdW50ZWQgPSBmYWxzZTtcbiAgICBwcml2YXRlIHNjcm9sbFRpbWVvdXQ/OiBUaW1lcjtcbiAgICAvLyBBcmUgd2UgY3VycmVudGx5IHRyeWluZyB0byBiYWNrZmlsbD9cbiAgICBwcml2YXRlIGlzRmlsbGluZyA9IGZhbHNlO1xuICAgIC8vIElzIHRoZSBjdXJyZW50IGZpbGwgcmVxdWVzdCBjYXVzZWQgYnkgYSBwcm9wcyB1cGRhdGU/XG4gICAgcHJpdmF0ZSBpc0ZpbGxpbmdEdWVUb1Byb3BzVXBkYXRlID0gZmFsc2U7XG4gICAgLy8gRGlkIGFub3RoZXIgcmVxdWVzdCB0byBjaGVjayB0aGUgZmlsb