Mirrors
/
matrix-public-archive
mirror of https://github.com/matrix-org/matrix-public-archive.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Protect from no IntersectionObserver while SSR (#206)

This commit is contained in:
Eric Eastwood 2023-05-02 00:28:10 -05:00 committed by GitHub
parent f3318446f8
commit 8bea5e0355
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 30 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

56
shared/views/TimeSelectorView.js
View File

@ -130,33 +130,37 @@ class TimeSelectorView extends TemplateView {
} }
); );
// Since this lives in the right-panel which is conditionally hidden from view with // Avoid an error when server-side rendering (SSR) because it doesn't have all the
// `display: none;`, we have to re-evaluate the scrubber scroll position when it // DOM API's available (and doesn't need it for this case)
// becomes visible because client dimensions evaluate to `0` when something is if (typeof IntersectionObserver === 'function') {
// hidden in the DOM. // Since this lives in the right-panel which is conditionally hidden from view with
t.mapSideEffect( // `display: none;`, we have to re-evaluate the scrubber scroll position when it
// We do this so it only runs once. We only need to run this once to bind the // becomes visible because client dimensions evaluate to `0` when something is
// `IntersectionObserver` // hidden in the DOM.
(/*vm*/) => null, t.mapSideEffect(
() => { // We do this so it only runs once. We only need to run this once to bind the
// This makes the side-effect always run after the initial `render` and after // `IntersectionObserver`
// bindings evaluate. (/*vm*/) => null,
// () => {
// For the initial render, this does assume this view will be mounted in the // This makes the side-effect always run after the initial `render` and after
// parent DOM straight away. #hydrogen-assume-view-mounted-right-away - // bindings evaluate.
// https://github.com/vector-im/hydrogen-web/issues/1069 //
requestAnimationFrame(() => { // For the initial render, this does assume this view will be mounted in the
// Bind IntersectionObserver to the target element // parent DOM straight away. #hydrogen-assume-view-mounted-right-away -
this._interSectionObserverForVisibility = new IntersectionObserver((entries) => { // https://github.com/vector-im/hydrogen-web/issues/1069
const isScrubberVisible = entries[0].isIntersecting; requestAnimationFrame(() => {
if (isScrubberVisible) { // Bind IntersectionObserver to the target element
this.updateScrubberScrollBasedOnActiveDate(); this._interSectionObserverForVisibility = new IntersectionObserver((entries) => {
} const isScrubberVisible = entries[0].isIntersecting;
if (isScrubberVisible) {
this.updateScrubberScrollBasedOnActiveDate();
}
});
this._interSectionObserverForVisibility.observe(this.scrubberScrollNode);
}); });
this._interSectionObserverForVisibility.observe(this.scrubberScrollNode); }
}); );
} }
);
const timeInput = t.input({ const timeInput = t.input({
type: 'time', type: 'time',