Run binding when isLoading changes

.gitignore

@@ -10,4 +10,3 @@ lib
 *.tar.gz
 .eslintcache
 .tmp
-tmp/

.woodpecker.yml

@@ -1,18 +0,0 @@
-pipeline:
-    buildfrontend:
-        image: node:16
-        commands:
-            - yarn install --prefer-offline --frozen-lockfile
-            - yarn test
-            - yarn run lint-ci
-            - yarn run tsc
-            - yarn build
-
-    deploy:
-        image: python
-        when:
-            event: push
-            branch: master
-        commands:
-            - make ci-deploy
-        secrets: [ GITEA_WRITE_DEPLOY_KEY, LIBREPAGES_DEPLOY_SECRET ]

Makefile

@@ -1,14 +0,0 @@
-ci-deploy: ## Deploy from CI/CD. Only call from within CI
-	@if [ "${CI}" != "woodpecker" ]; \
-	then echo "Only call from within CI. Will re-write your local Git configuration. To override, set export CI=woodpecker"; \
-		 exit 1; \
-	fi
-	git config --global user.email "${CI_COMMIT_AUTHOR_EMAIL}"
-	git config --global user.name "${CI_COMMIT_AUTHOR}"
-	./scripts/ci.sh --commit-files librepages target "${CI_COMMIT_AUTHOR} <${CI_COMMIT_AUTHOR_EMAIL}>"
-	./scripts/ci.sh --init "$$GITEA_WRITE_DEPLOY_KEY"
-	./scripts/ci.sh --deploy ${LIBREPAGES_DEPLOY_SECRET}  librepages
-	./scripts/ci.sh --clean
-
-help: ## Prints help for targets with comments
-	@cat $(MAKEFILE_LIST) | grep -E '^[a-zA-Z_-]+:.*?## .*$$' | awk 'BEGIN {FS = ":.*?## "}; {printf "\033[36m%-30s\033[0m %s\n", $$1, $$2}'

README.md

@@ -1,5 +1,3 @@
-[![status-badge](https://ci.batsense.net/api/badges/mystiq/hydrogen-web/status.svg)](https://ci.batsense.net/mystiq/hydrogen-web)
-
 # Hydrogen
 
 A minimal [Matrix](https://matrix.org/) chat client, focused on performance, offline functionality, and broad browser support. This is work in progress and not yet ready for primetime. Bug reports are welcome, but please don't file any feature requests or other missing things to be on par with Element Web.

scripts/ci.sh

@@ -1,165 +0,0 @@
-#!/bin/bash
-# ci.sh: Helper script to automate deployment operations on CI/CD
-# Copyright © 2022 Aravinth Manivannan <realaravinth@batsense.net>
-# 
-# This program is free software: you can redistribute it and/or modify
-# it under the terms of the GNU Affero General Public License as
-# published by the Free Software Foundation, either version 3 of the
-# License, or (at your option) any later version.
-# 
-# This program is distributed in the hope that it will be useful,
-# but WITHOUT ANY WARRANTY; without even the implied warranty of
-# MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
-# GNU Affero General Public License for more details.
-# 
-# You should have received a copy of the GNU Affero General Public License
-# along with this program.  If not, see <http://www.gnu.org/licenses/>.
-
-set -xEeuo  pipefail
-#source $(pwd)/scripts/lib.sh
-
-readonly SSH_ID_FILE=/tmp/ci-ssh-id
-readonly SSH_REMOTE_NAME=origin-ssh
-readonly PROJECT_ROOT=$(pwd)
-
-match_arg() {
-    if [ $1 == $2 ] || [ $1 == $3 ]
-    then
-        return 0
-    else
-        return 1
-    fi
-}
-
-help() {
-	cat << EOF
-USAGE: ci.sh [SUBCOMMAND]
-Helper script to automate deployment operations on CI/CD
-
-Subcommands
-
-  -c  --clean	cleanup secrets, SSH key and other runtime data
-  -i  --init <SSH_PRIVATE_KEY>	initialize environment, write SSH private to file
-  -d  --deploy <PAGES-SECRET> <TARGET BRANCH>	push branch to Gitea and call Pages server
-  -h  --help	print this help menu
-EOF
-}
-
-# $1: SSH private key
-write_ssh(){
-	truncate --size 0 $SSH_ID_FILE
-	echo "$1" > $SSH_ID_FILE
-	chmod 600 $SSH_ID_FILE
-}
-
-set_ssh_remote() {
-	http_remote_url=$(git remote get-url origin)
-	remote_hostname=$(echo $http_remote_url | cut -d '/' -f 3) 
-	repository_owner=$(echo $http_remote_url | cut -d '/' -f 4)
-	repository_name=$(echo $http_remote_url | cut -d '/' -f 5)
-	ssh_remote="git@$remote_hostname:$repository_owner/$repository_name"
-	ssh_remote="git@git.batsense.net:mystiq/hydrogen-web.git"
-	git remote add $SSH_REMOTE_NAME $ssh_remote
-}
-
-clean() {
-	if [ -f $SSH_ID_FILE ]
-	then
-		shred $SSH_ID_FILE
-		rm $SSH_ID_FILE
-	fi
-}
-
-# $1: branch name
-# $2: directory containing build assets
-# $3: Author in <author-name author@example.com> format
-commit_files() {
-	cd $PROJECT_ROOT
-	original_branch=$(git branch --show-current)
-	tmp_dir=$(mktemp -d)
-	cp -r $2/* $tmp_dir
-
-	if [[ -z $(git ls-remote --heads origin ${1}) ]]
-	then
-		echo "[*] Creating deployment branch $1"
-		git checkout --orphan $1
-	else
-		echo "[*] Deployment branch $1 exists, pulling changes from remote"
-		git fetch origin $1
-		git switch $1 
-	fi
-
-	git rm -rf .
-	/bin/rm -rf *
-	cp -r $tmp_dir/* .
-	git add --all
-	if [ $(git status --porcelain | xargs | sed '/^$/d' | wc -l) -gt 0 ];
-	then
-		echo "[*] Repository has changed, committing changes"
-		git commit \
-			--author="$3" \
-			--message="new deploy: $(date --iso-8601=seconds)"
-	fi
-	git checkout $original_branch
-}
-
-# $1: Pages API secret
-# $2: Deployment target branch
-deploy() {
-	if (( "$#" < 2 ))
-	then
-		help
-	else
-		git -c core.sshCommand="/usr/bin/ssh -oStrictHostKeyChecking=no -i $SSH_ID_FILE"\
-			push --force  $SSH_REMOTE_NAME $2
-		curl -vv --location --request \
-				POST "https://deploy.batsense.net/api/v1/update"\
-				--header 'Content-Type: application/json' \
-				--data-raw "{ \"secret\": \"$1\", \"branch\": \"$2\" }"
-	fi
-}
-
-if (( "$#" < 1 ))
-then
-	help
-	exit -1
-fi
-
-
-if match_arg $1 '-i' '--init'
-then
-	if (( "$#" < 2 ))
-	then
-		help
-		exit -1
-	fi
-	set_ssh_remote
-	write_ssh "$2"
-elif match_arg $1 '-c' '--clean'
-then
-	clean
-elif match_arg $1 '-cf' '--commit-files'
-then
-	if (( "$#" < 4 ))
-	then
-		help
-		exit -1
-	fi
-    commit_files $2 $3 $4
-elif match_arg $1 '-d' '--deploy'
-then
-	if (( "$#" < 3 ))
-	then
-		help
-		exit -1
-	fi
-	deploy $2 $3
-elif match_arg $1 '-h' '--help'
-then
-	help
-else
-	help
-fi
-
-
-

src/domain/session/room/timeline/tiles/GapTile.js

@@ -16,6 +16,8 @@ limitations under the License.
 
 import {SimpleTile} from "./SimpleTile.js";
 import {UpdateAction} from "../UpdateAction.js";
+import {ConnectionError} from "../../../../../matrix/error.js";
+import {ConnectionStatus} from "../../../../../matrix/net/Reconnector";
 
 export class GapTile extends SimpleTile {
     constructor(entry, options) {
@@ -29,13 +31,26 @@ export class GapTile extends SimpleTile {
     async fill() {
         if (!this._loading && !this._entry.edgeReached) {
             this._loading = true;
+            this._error = null;
             this.emitChange("isLoading");
             try {
                 await this._room.fillGap(this._entry, 10);
             } catch (err) {
                 console.error(`room.fillGap(): ${err.message}:\n${err.stack}`);
                 this._error = err;
+                this._loading = false;
                 this.emitChange("error");
+                if (err instanceof ConnectionError) {
+                    /*
+                    We need to wait for reconnection here rather than in
+                    notifyVisible() because when we return/throw here
+                    this._loading is set to false and other queued invocations of
+                    this method will succeed and attempt further room.fillGap() calls - 
+                    resulting in multiple error entries in logs and elsewhere!
+                    */
+                    await this._waitForReconnection();
+                    return true;
+                }
                 // rethrow so caller of this method
                 // knows not to keep calling this for now
                 throw err;
@@ -55,7 +70,18 @@ export class GapTile extends SimpleTile {
         let canFillMore;
         this._siblingChanged = false;
         do {
+            try {
                 canFillMore = await this.fill();
+            }
+            catch (e) {
+                if (e instanceof ConnectionError) {
+                    // Don't increase depth because this gap fill was a noop
+                    continue;
+                }
+                else {
+                    canFillMore = false;
+                }
+            }
             depth = depth + 1;
         } while (depth < 10 && !this._siblingChanged && canFillMore && !this.isDisposed);
     }
@@ -90,6 +116,10 @@ export class GapTile extends SimpleTile {
         }
     }
 
+    async _waitForReconnection() {
+        await this.options.client.reconnector.connectionStatus.waitFor(status => status === ConnectionStatus.Online).promise;
+    }
+
     get shape() {
         return "gap";
     }
@@ -100,8 +130,11 @@ export class GapTile extends SimpleTile {
 
     get error() {
         if (this._error) {
+            if (this._error instanceof ConnectionError) {
+                return { message: "Waiting for reconnection", showSpinner: true };
+            }
             const dir = this._entry.prev_batch ? "previous" : "next";
-            return `Could not load ${dir} messages: ${this._error.message}`;
+            return { message: `Could not load ${dir} messages: ${this._error.message}`, showSpinner: false };
         }
         return null;
     }

src/platform/web/assets/config.json

@@ -4,6 +4,6 @@
     "gatewayUrl": "https://matrix.org",
     "applicationServerKey": "BC-gpSdVHEXhvHSHS0AzzWrQoukv2BE7KzpoPO_FfPacqOo3l1pdqz7rSgmB04pZCWaHPz7XRe6fjLaC-WPDopM"
   },
-  "defaultHomeServer": "matrix.test.mystiq.app",
-  "bugReportEndpointUrl": "https://rageshake.test.mystiq.app/api/submit"
+  "defaultHomeServer": "matrix.org",
+  "bugReportEndpointUrl": "https://element.io/bugreports/submit"
 }

src/platform/web/ui/css/themes/element/timeline.css

@@ -422,3 +422,12 @@ only loads when the top comes into view*/
 .GapView.isAtTop {
     padding: 52px 20px 12px 20px;
 }
+
+.GapView__container {
+    display: flex;
+    align-items: center;
+}
+
+.GapView__container .spinner {
+    margin-right: 10px;
+}

src/platform/web/ui/session/room/timeline/GapView.js

@@ -30,9 +30,24 @@ export class GapView extends TemplateView {
             isAtTop: vm => vm.isAtTop,
         };
         return t.li({ className }, [
-            spinner(t),
-            t.div(vm => vm.isLoading ? vm.i18n`Loading more messages …` : vm.i18n`Not loading!`),
-            t.if(vm => vm.error, t => t.strong(vm => vm.error))
+            t.map(vm => vm.isLoading,
+                (isLoading, t, vm) => {
+                    let elements;
+                    const error = vm.error;
+                    if (error) {
+                        elements = [t.strong(() => error.message)]; 
+                        if (error.showSpinner) {
+                            elements.unshift(spinner(t));
+                        }
+                    }
+                    else if (isLoading) {
+                        elements = [spinner(t), t.span(vm.i18n`Loading more messages …`)];
+                    }
+                    else {
+                        elements = t.span(vm.i18n`Not loading!`);
+                    }
+                    return t.div({ className: "GapView__container" }, elements);
+                })
         ]);
     }