Toggle room mute when changed from other client

Signed-off-by: Ajay Bura <ajbura@gmail.com>

.github/dependabot.yml

@@ -1,28 +1,22 @@
-# Docs: <https://docs.github.com/en/code-security/supply-chain-security/keeping-your-dependencies-updated-automatically/customizing-dependency-updates>
+# Docs: <https://docs.github.com/en/free-pro-team@latest/github/administering-a-repository/customizing-dependency-updates>
 
 version: 2
 
 updates:
   - package-ecosystem: github-actions
     directory: /
-    schedule: 
-      interval: weekly
-      day: "tuesday"
-      time: "01:00"
-      timezone: "Asia/Kolkata"
+    schedule: {interval: weekly}
+    reviewers: [ajbura]
+    assignees: [ajbura]
 
   - package-ecosystem: docker
     directory: /
-    schedule: 
-      interval: weekly
-      day: "tuesday"
-      time: "01:00"
-      timezone: "Asia/Kolkata"
+    schedule: {interval: weekly}
+    reviewers: [ajbura]
+    assignees: [ajbura]
 
   - package-ecosystem: npm
     directory: /
-    schedule: 
-      interval: weekly
-      day: "tuesday"
-      time: "01:00"
-      timezone: "Asia/Kolkata"
+    schedule: {interval: weekly}
+    reviewers: [ajbura]
+    assignees: [ajbura]

.github/workflows/build-pull-request.yml

@@ -1,39 +1,32 @@
-name: 'Build pull request'
+name: 'Build PR'
 
 on:
   pull_request:
     types: ['opened', 'synchronize']
 
 jobs:
-  build-pull-request:
-    runs-on: ubuntu-latest
-    env:
-      PR_NUMBER: ${{github.event.number}}
-    steps:
-      - name: Check out the repo
-        uses: actions/checkout@v3.0.0
-      - name: Build app
-        run: npm ci && npm run build
-      - name: Upload artifact
-        uses: actions/upload-artifact@v3.0.0
-        with:
-          name: previewbuild
-          path: dist
-          retention-days: 1
-      - name: Get PR info
-        uses: actions/github-script@v6.0.0
-        with:
-          script: |
-            var fs = require('fs');
-            fs.writeFileSync('${{github.workspace}}/pr.json', JSON.stringify(context.payload.pull_request));
-      - name: Upload PR Info
-        uses: actions/upload-artifact@v3.0.0
-        with:
-          name: pr.json
-          path: pr.json
-          retention-days: 1
-      - name: Build Docker image
-        uses: docker/build-push-action@v2.10.0
-        with:
-          context: .
-          push: false
+    build:
+        runs-on: ubuntu-latest
+        env:
+          PR_NUMBER: ${{github.event.number}}
+        steps:
+            - uses: actions/checkout@v3.0.0
+            - name: Build
+              run: npm ci && npm run build
+            - name: Upload Artifact
+              uses: actions/upload-artifact@v3.0.0
+              with:
+                  name: previewbuild
+                  path: dist
+                  retention-days: 1
+            - uses: actions/github-script@v6.0.0
+              with:
+                script: |
+                    var fs = require('fs');
+                    fs.writeFileSync('${{github.workspace}}/pr.json', JSON.stringify(context.payload.pull_request));
+            - name: Upload PR Info
+              uses: actions/upload-artifact@v3.0.0
+              with:
+                  name: pr.json
+                  path: pr.json
+                  retention-days: 1

.github/workflows/deploy-pull-request.yml

@@ -1,78 +1,78 @@
 name: Upload Preview Build to Netlify
 on:
-  workflow_run:
-      workflows: ["Build pull request"]
-      types:
-        - completed
+    workflow_run:
+        workflows: ["Build PR"]
+        types:
+            - completed
 jobs:
-  get-build-and-deploy:
-    runs-on: ubuntu-latest
-    if: >
-      ${{ github.event.workflow_run.conclusion == 'success' }}
-    steps:
-      # There's a 'download artifact' action but it hasn't been updated for the
-      # workflow_run action (https://github.com/actions/download-artifact/issues/60)
-      # so instead we get this mess:
-      - name: 'Download artifact'
-        uses: actions/github-script@v6.0.0
-        with:
-          script: |
-            var artifacts = await github.rest.actions.listWorkflowRunArtifacts({
-              owner: context.repo.owner,
-              repo: context.repo.repo,
-              run_id: ${{github.event.workflow_run.id }},
-            });
-            var matchArtifact = artifacts.data.artifacts.filter((artifact) => {
-              return artifact.name == "previewbuild"
-            })[0];
-            var download = await github.rest.actions.downloadArtifact({
-              owner: context.repo.owner,
-              repo: context.repo.repo,
-              artifact_id: matchArtifact.id,
-              archive_format: 'zip',
-            });
-            var fs = require('fs');
-            fs.writeFileSync('${{github.workspace}}/previewbuild.zip', Buffer.from(download.data));
-            var prInfoArtifact = artifacts.data.artifacts.filter((artifact) => {
-              return artifact.name == "pr.json"
-            })[0];
-            var download = await github.rest.actions.downloadArtifact({
-              owner: context.repo.owner,
-              repo: context.repo.repo,
-              artifact_id: prInfoArtifact.id,
-              archive_format: 'zip',
-            });
-            var fs = require('fs');
-            fs.writeFileSync('${{github.workspace}}/pr.json.zip', Buffer.from(download.data));
-      - name: Extract Artifacts
-        run: unzip -d dist previewbuild.zip && rm previewbuild.zip && unzip pr.json.zip && rm pr.json.zip
-      - name: 'Read PR Info'
-        id: readctx
-        uses: actions/github-script@v6.0.0
-        with:
-          script: |
-            var fs = require('fs');
-            var pr = JSON.parse(fs.readFileSync('${{github.workspace}}/pr.json'));
-            console.log(`::set-output name=prnumber::${pr.number}`);
-      - name: Deploy to Netlify
-        id: netlify
-        uses: nwtgck/actions-netlify@v1.2.3
-        with:
-          publish-dir: dist
-          deploy-message: "Deploy from GitHub Actions"
-          # These don't work because we're in workflow_run
-          enable-pull-request-comment: false
-          enable-commit-comment: false
-        env:
-          NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }}
-          NETLIFY_SITE_ID: ${{ secrets.NETLIFY_SITE3_ID }}
-        timeout-minutes: 1
-      - name: Edit PR Description
-        uses: velas/pr-description@v1.0.1
-        env:
-          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-        with:
-          pull-request-number: ${{ steps.readctx.outputs.prnumber }}
-          description-message: |
-              Preview: ${{ steps.netlify.outputs.deploy-url }}
-              ⚠️ Exercise caution. Use test accounts. ⚠️
+    build:
+        runs-on: ubuntu-latest
+        if: >
+            ${{ github.event.workflow_run.conclusion == 'success' }}
+        steps:
+            # There's a 'download artifact' action but it hasn't been updated for the
+            # workflow_run action (https://github.com/actions/download-artifact/issues/60)
+            # so instead we get this mess:
+            - name: 'Download artifact'
+              uses: actions/github-script@v6.0.0
+              with:
+                script: |
+                  var artifacts = await github.rest.actions.listWorkflowRunArtifacts({
+                     owner: context.repo.owner,
+                     repo: context.repo.repo,
+                     run_id: ${{github.event.workflow_run.id }},
+                  });
+                  var matchArtifact = artifacts.data.artifacts.filter((artifact) => {
+                    return artifact.name == "previewbuild"
+                  })[0];
+                  var download = await github.rest.actions.downloadArtifact({
+                     owner: context.repo.owner,
+                     repo: context.repo.repo,
+                     artifact_id: matchArtifact.id,
+                     archive_format: 'zip',
+                  });
+                  var fs = require('fs');
+                  fs.writeFileSync('${{github.workspace}}/previewbuild.zip', Buffer.from(download.data));
+                  var prInfoArtifact = artifacts.data.artifacts.filter((artifact) => {
+                    return artifact.name == "pr.json"
+                  })[0];
+                  var download = await github.rest.actions.downloadArtifact({
+                     owner: context.repo.owner,
+                     repo: context.repo.repo,
+                     artifact_id: prInfoArtifact.id,
+                     archive_format: 'zip',
+                  });
+                  var fs = require('fs');
+                  fs.writeFileSync('${{github.workspace}}/pr.json.zip', Buffer.from(download.data));
+            - name: Extract Artifacts
+              run: unzip -d dist previewbuild.zip && rm previewbuild.zip && unzip pr.json.zip && rm pr.json.zip
+            - name: 'Read PR Info'
+              id: readctx
+              uses: actions/github-script@v6.0.0
+              with:
+                script: |
+                    var fs = require('fs');
+                    var pr = JSON.parse(fs.readFileSync('${{github.workspace}}/pr.json'));
+                    console.log(`::set-output name=prnumber::${pr.number}`);
+            - name: Deploy to Netlify
+              id: netlify
+              uses: nwtgck/actions-netlify@v1.2.3
+              with:
+                  publish-dir: dist
+                  deploy-message: "Deploy from GitHub Actions"
+                  # These don't work because we're in workflow_run
+                  enable-pull-request-comment: false
+                  enable-commit-comment: false
+              env:
+                  NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }}
+                  NETLIFY_SITE_ID: ${{ secrets.NETLIFY_SITE3_ID }}
+              timeout-minutes: 1
+            - name: Edit PR Description
+              uses: velas/pr-description@v1.0.1
+              env:
+                  GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+              with:
+                  pull-request-number: ${{ steps.readctx.outputs.prnumber }}
+                  description-message: |
+                      Preview: ${{ steps.netlify.outputs.deploy-url }}
+                      ⚠️ Exercise caution. Use test accounts. ⚠️

.github/workflows/docker.yaml

@@ -0,0 +1,34 @@
+name: Publish Docker image
+
+on:
+  release:
+    types: [published]
+
+jobs:
+   push_to_registry:
+    name: Push Docker image to Docker Hub
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Check out the repo
+        uses: actions/checkout@v3.0.0
+
+      - name: Log in to Docker Hub
+        uses: docker/login-action@v1.14.1
+        with:
+          username: ${{ secrets.DOCKER_USERNAME }}
+          password: ${{ secrets.DOCKER_PASSWORD }}
+
+      - name: Extract metadata (tags, labels) for Docker
+        id: meta
+        uses: docker/metadata-action@v3.6.2
+        with:
+          images: ajbura/cinny
+
+      - name: Build and push Docker image
+        uses: docker/build-push-action@v2.9.0
+        with:
+          context: .
+          push: true
+          tags: ${{ steps.meta.outputs.tags }}
+          labels: ${{ steps.meta.outputs.labels }}

.github/workflows/netlify-prod.yaml

@@ -0,0 +1,21 @@
+name: 'Deploy to Netlify (prod)'
+
+on:
+  release:
+    types: [published]
+
+jobs:
+  deploy:
+    name: 'Deploy'
+    runs-on: ubuntu-latest
+
+    steps:
+      - uses: actions/checkout@v3.0.0
+      - uses: jsmrcaga/action-netlify-deploy@v1.7.2
+        with:
+          install_command: "npm ci"
+          NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }}
+          NETLIFY_SITE_ID: ${{ secrets.NETLIFY_SITE_ID }}
+          BUILD_DIRECTORY: "dist"
+          NETLIFY_DEPLOY_MESSAGE: "Prod deploy v${{ github.ref }}"
+          NETLIFY_DEPLOY_TO_PROD: true

.github/workflows/prod-deploy.yaml

@@ -1,56 +0,0 @@
-name: 'Production deploy'
-
-on:
-  release:
-    types: [published]
-
-jobs:
-  deploy-to-netlify:
-    name: 'Deploy to Netlify'
-    runs-on: ubuntu-latest
-    steps:
-      - name: Check out the repo
-        uses: actions/checkout@v3.0.0
-      - name: Build and deploy to Netlify
-        uses: jsmrcaga/action-netlify-deploy@v1.7.2
-        with:
-          install_command: "npm ci"
-          NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }}
-          NETLIFY_SITE_ID: ${{ secrets.NETLIFY_SITE_ID }}
-          BUILD_DIRECTORY: "dist"
-          NETLIFY_DEPLOY_MESSAGE: "Prod deploy v${{ github.ref }}"
-          NETLIFY_DEPLOY_TO_PROD: true
-      - name: Get version from tag
-        id: vars
-        run: echo ::set-output name=tag::${GITHUB_REF#refs/*/}
-      - name: Create tar.gz
-        run: tar -czvf cinny-${{ steps.vars.outputs.tag }}.tar.gz dist
-      - name: Upload tagged release
-        uses: softprops/action-gh-release@v1
-        with:
-          files: |
-            cinny-${{ steps.vars.outputs.tag }}.tar.gz
-
-  push_to_dockerhub:
-    name: Push Docker image to Docker Hub
-    runs-on: ubuntu-latest
-    steps:
-      - name: Check out the repo
-        uses: actions/checkout@v3.0.0
-      - name: Login to Docker Hub
-        uses: docker/login-action@v1.14.1
-        with:
-          username: ${{ secrets.DOCKER_USERNAME }}
-          password: ${{ secrets.DOCKER_PASSWORD }}
-      - name: Extract metadata (tags, labels) for Docker
-        id: meta
-        uses: docker/metadata-action@v3.6.2
-        with:
-          images: ajbura/cinny
-      - name: Build and push Docker image
-        uses: docker/build-push-action@v2.10.0
-        with:
-          context: .
-          push: true
-          tags: ${{ steps.meta.outputs.tags }}
-          labels: ${{ steps.meta.outputs.labels }}

Dockerfile

@@ -1,5 +1,5 @@
 ## Builder
-FROM node:17.7.1-alpine3.15 as builder
+FROM node:17.6.0-alpine3.15 as builder
 
 WORKDIR /src
 

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "cinny",
-  "version": "1.8.1",
+  "version": "1.8.0",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "cinny",
-      "version": "1.8.1",
+      "version": "1.8.0",
       "license": "MIT",
       "dependencies": {
         "@fontsource/inter": "^4.5.5",
@@ -38,7 +38,7 @@
         "react-modal": "^3.14.4",
         "sanitize-html": "^2.7.0",
         "tippy.js": "^6.3.7",
-        "twemoji": "^14.0.1"
+        "twemoji": "^13.1.0"
       },
       "devDependencies": {
         "@babel/core": "^7.17.7",
@@ -13137,20 +13137,20 @@
       "integrity": "sha1-WuaBd/GS1EViadEIr6k/+HQ/T2Q="
     },
     "node_modules/twemoji": {
-      "version": "14.0.1",
-      "resolved": "https://registry.npmjs.org/twemoji/-/twemoji-14.0.1.tgz",
-      "integrity": "sha512-eoqhea0sUhmC10iTacksyp1v9O4BP1jKmVqtK+Nztw40/dzawSHkXL3/xCpyh+mukmEvJ0Gw9VLvwZfQ9HKXDw==",
+      "version": "13.1.0",
+      "resolved": "https://registry.npmjs.org/twemoji/-/twemoji-13.1.0.tgz",
+      "integrity": "sha512-e3fZRl2S9UQQdBFLYXtTBT6o4vidJMnpWUAhJA+yLGR+kaUTZAt3PixC0cGvvxWSuq2MSz/o0rJraOXrWw/4Ew==",
       "dependencies": {
         "fs-extra": "^8.0.1",
         "jsonfile": "^5.0.0",
-        "twemoji-parser": "14.0.0",
+        "twemoji-parser": "13.1.0",
         "universalify": "^0.1.2"
       }
     },
     "node_modules/twemoji-parser": {
-      "version": "14.0.0",
-      "resolved": "https://registry.npmjs.org/twemoji-parser/-/twemoji-parser-14.0.0.tgz",
-      "integrity": "sha512-9DUOTGLOWs0pFWnh1p6NF+C3CkQ96PWmEFwhOVmT3WbecRC+68AIqpsnJXygfkFcp4aXbOp8Dwbhh/HQgvoRxA=="
+      "version": "13.1.0",
+      "resolved": "https://registry.npmjs.org/twemoji-parser/-/twemoji-parser-13.1.0.tgz",
+      "integrity": "sha512-AQOzLJpYlpWMy8n+0ATyKKZzWlZBJN+G0C+5lhX7Ftc2PeEVdUU/7ns2Pn2vVje26AIZ/OHwFoUbdv6YYD/wGg=="
     },
     "node_modules/type-check": {
       "version": "0.4.0",
@@ -24053,20 +24053,20 @@
       "integrity": "sha1-WuaBd/GS1EViadEIr6k/+HQ/T2Q="
     },
     "twemoji": {
-      "version": "14.0.1",
-      "resolved": "https://registry.npmjs.org/twemoji/-/twemoji-14.0.1.tgz",
-      "integrity": "sha512-eoqhea0sUhmC10iTacksyp1v9O4BP1jKmVqtK+Nztw40/dzawSHkXL3/xCpyh+mukmEvJ0Gw9VLvwZfQ9HKXDw==",
+      "version": "13.1.0",
+      "resolved": "https://registry.npmjs.org/twemoji/-/twemoji-13.1.0.tgz",
+      "integrity": "sha512-e3fZRl2S9UQQdBFLYXtTBT6o4vidJMnpWUAhJA+yLGR+kaUTZAt3PixC0cGvvxWSuq2MSz/o0rJraOXrWw/4Ew==",
       "requires": {
         "fs-extra": "^8.0.1",
         "jsonfile": "^5.0.0",
-        "twemoji-parser": "14.0.0",
+        "twemoji-parser": "13.1.0",
         "universalify": "^0.1.2"
       }
     },
     "twemoji-parser": {
-      "version": "14.0.0",
-      "resolved": "https://registry.npmjs.org/twemoji-parser/-/twemoji-parser-14.0.0.tgz",
-      "integrity": "sha512-9DUOTGLOWs0pFWnh1p6NF+C3CkQ96PWmEFwhOVmT3WbecRC+68AIqpsnJXygfkFcp4aXbOp8Dwbhh/HQgvoRxA=="
+      "version": "13.1.0",
+      "resolved": "https://registry.npmjs.org/twemoji-parser/-/twemoji-parser-13.1.0.tgz",
+      "integrity": "sha512-AQOzLJpYlpWMy8n+0ATyKKZzWlZBJN+G0C+5lhX7Ftc2PeEVdUU/7ns2Pn2vVje26AIZ/OHwFoUbdv6YYD/wGg=="
     },
     "type-check": {
       "version": "0.4.0",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "cinny",
-  "version": "1.8.1",
+  "version": "1.8.0",
   "description": "Yet another matrix client",
   "main": "index.js",
   "engines": {
@@ -44,7 +44,7 @@
     "react-modal": "^3.14.4",
     "sanitize-html": "^2.7.0",
     "tippy.js": "^6.3.7",
-    "twemoji": "^14.0.1"
+    "twemoji": "^13.1.0"
   },
   "devDependencies": {
     "@babel/core": "^7.17.7",

src/app/molecules/message/Message.jsx

@@ -469,18 +469,6 @@ function isMedia(mE) {
   );
 }
 
-// if editedTimeline has mEventId then pass editedMEvent else pass mEvent to openViewSource
-function handleOpenViewSource(mEvent, roomTimeline) {
-  const eventId = mEvent.getId();
-  const { editedTimeline } = roomTimeline ?? {};
-  let editedMEvent;
-  if (editedTimeline?.has(eventId)) {
-    const editedList = editedTimeline.get(eventId);
-    editedMEvent = editedList[editedList.length - 1];
-  }
-  openViewSource(editedMEvent !== undefined ? editedMEvent : mEvent);
-}
-
 const MessageOptions = React.memo(({
   roomTimeline, mEvent, edit, reply,
 }) => {
@@ -528,7 +516,7 @@ const MessageOptions = React.memo(({
             </MenuItem>
             <MenuItem
               iconSrc={CmdIC}
-              onClick={() => handleOpenViewSource(mEvent, roomTimeline)}
+              onClick={() => openViewSource(mEvent)}
             >
               View source
             </MenuItem>

src/app/organisms/room/Room.jsx

@@ -13,46 +13,33 @@ import RoomSettings from './RoomSettings';
 import PeopleDrawer from './PeopleDrawer';
 
 function Room() {
-  const [roomInfo, setRoomInfo] = useState({
-    roomTimeline: null,
-    eventId: null,
-  });
+  const [roomTimeline, setRoomTimeline] = useState(null);
+  const [eventId, setEventId] = useState(null);
   const [isDrawer, setIsDrawer] = useState(settings.isPeopleDrawer);
 
   const mx = initMatrix.matrixClient;
+  const handleRoomSelected = (rId, pRoomId, eId) => {
+    if (mx.getRoom(rId)) {
+      setRoomTimeline(new RoomTimeline(rId, initMatrix.notifications));
+      setEventId(eId);
+    } else {
+      // TODO: add ability to join room if roomId is invalid
+      setRoomTimeline(null);
+      setEventId(null);
+    }
+  };
+  const handleDrawerToggling = (visiblity) => setIsDrawer(visiblity);
 
   useEffect(() => {
-    const handleRoomSelected = (rId, pRoomId, eId) => {
-      roomInfo.roomTimeline?.removeInternalListeners();
-      if (mx.getRoom(rId)) {
-        setRoomInfo({
-          roomTimeline: new RoomTimeline(rId, initMatrix.notifications),
-          eventId: eId ?? null,
-        });
-      } else {
-        // TODO: add ability to join room if roomId is invalid
-        setRoomInfo({
-          roomTimeline: null,
-          eventId: null,
-        });
-      }
-    };
-
     navigation.on(cons.events.navigation.ROOM_SELECTED, handleRoomSelected);
-    return () => {
-      navigation.removeListener(cons.events.navigation.ROOM_SELECTED, handleRoomSelected);
-    };
-  }, [roomInfo]);
-
-  useEffect(() => {
-    const handleDrawerToggling = (visiblity) => setIsDrawer(visiblity);
     settings.on(cons.events.settings.PEOPLE_DRAWER_TOGGLED, handleDrawerToggling);
     return () => {
+      navigation.removeListener(cons.events.navigation.ROOM_SELECTED, handleRoomSelected);
       settings.removeListener(cons.events.settings.PEOPLE_DRAWER_TOGGLED, handleDrawerToggling);
+      roomTimeline?.removeInternalListeners();
     };
   }, []);
 
-  const { roomTimeline, eventId } = roomInfo;
   if (roomTimeline === null) return <Welcome />;
 
   return (

src/app/organisms/room/RoomViewContent.jsx

@@ -145,12 +145,13 @@ function useTimeline(roomTimeline, eventId, readUptoEvtStore, eventLimitRef) {
 
       if (isSpecificEvent) {
         focusEventIndex = roomTimeline.getEventIndex(eId);
-      }
-      if (!readUptoEvtStore.getItem() && roomTimeline.hasEventInTimeline(readUpToId)) {
+      } else if (!readUptoEvtStore.getItem()) {
         // either opening live timeline or jump to unread.
-        readUptoEvtStore.setItem(roomTimeline.findEventByIdInTimelineSet(readUpToId));
-      }
-      if (readUptoEvtStore.getItem() && !isSpecificEvent) {
+        focusEventIndex = roomTimeline.getUnreadEventIndex(readUpToId);
+        if (roomTimeline.hasEventInTimeline(readUpToId)) {
+          readUptoEvtStore.setItem(roomTimeline.findEventByIdInTimelineSet(readUpToId));
+        }
+      } else {
         focusEventIndex = roomTimeline.getUnreadEventIndex(readUptoEvtStore.getItem().getId());
       }
 
@@ -166,6 +167,7 @@ function useTimeline(roomTimeline, eventId, readUptoEvtStore, eventLimitRef) {
     setEventTimeline(eventId);
     return () => {
       roomTimeline.removeListener(cons.events.roomTimeline.READY, initTimeline);
+      roomTimeline.removeInternalListeners();
       limit.setFrom(0);
     };
   }, [roomTimeline, eventId]);
@@ -284,39 +286,44 @@ function useEventArrive(roomTimeline, readUptoEvtStore, timelineScrollRef, event
   useEffect(() => {
     const timelineScroll = timelineScrollRef.current;
     const limit = eventLimitRef.current;
-    const trySendReadReceipt = (event) => {
+    const sendReadReceipt = (event) => {
+      if (event.isSending()) return;
       if (myUserId === event.getSender()) {
-        requestAnimationFrame(() => roomTimeline.markAllAsRead());
+        roomTimeline.markAllAsRead();
         return;
       }
       const readUpToEvent = readUptoEvtStore.getItem();
       const readUpToId = roomTimeline.getReadUpToEventId();
-      const isUnread = readUpToEvent ? readUpToEvent?.getId() === readUpToId : true;
+      const isUnread = readUpToEvent?.getId() === readUpToId;
 
-      if (isUnread === false) {
-        if (document.visibilityState === 'visible' && timelineScroll.bottom < 16) {
-          requestAnimationFrame(() => roomTimeline.markAllAsRead());
-        } else {
-          readUptoEvtStore.setItem(roomTimeline.findEventByIdInTimelineSet(readUpToId));
-        }
+      // if user doesn't have focus on app don't mark messages as read.
+      if (document.visibilityState === 'hidden' || timelineScroll.bottom >= 16) {
+        if (isUnread) return;
+        readUptoEvtStore.setItem(roomTimeline.findEventByIdInTimelineSet(readUpToId));
         return;
       }
 
+      // user has not mark room as read
+      if (!isUnread) {
+        roomTimeline.markAllAsRead();
+      }
       const { timeline } = roomTimeline;
-      const unreadMsgIsLast = timeline[timeline.length - 2].getId() === readUpToId;
+      const unreadMsgIsLast = timeline[timeline.length - 2].getId() === readUpToEvent?.getId();
       if (unreadMsgIsLast) {
-        requestAnimationFrame(() => roomTimeline.markAllAsRead());
+        roomTimeline.markAllAsRead();
       }
     };
 
     const handleEvent = (event) => {
       const tLength = roomTimeline.timeline.length;
-      const isViewingLive = roomTimeline.isServingLiveTimeline() && limit.length >= tLength - 1;
-      const isAttached = timelineScroll.bottom < SCROLL_TRIGGER_POS;
-
-      if (isViewingLive && isAttached) {
+      const isUserViewingLive = (
+        roomTimeline.isServingLiveTimeline()
+        && limit.length >= tLength - 1
+        && timelineScroll.bottom < SCROLL_TRIGGER_POS
+      );
+      if (isUserViewingLive) {
         limit.setFrom(tLength - limit.maxEvents);
-        trySendReadReceipt(event);
+        sendReadReceipt(event);
         setEvent(event);
         return;
       }
@@ -325,8 +332,11 @@ function useEventArrive(roomTimeline, readUptoEvtStore, timelineScrollRef, event
         setEvent(event);
         return;
       }
-
-      if (isViewingLive) {
+      const isUserDitchedLive = (
+        roomTimeline.isServingLiveTimeline()
+        && limit.length >= tLength - 1
+      );
+      if (isUserDitchedLive) {
         // This stateUpdate will help to put the
         // loading msg placeholder at bottom
         setEvent(event);
@@ -343,7 +353,17 @@ function useEventArrive(roomTimeline, readUptoEvtStore, timelineScrollRef, event
     };
   }, [roomTimeline]);
 
-  return newEvent;
+  useEffect(() => {
+    const timelineScroll = timelineScrollRef.current;
+    if (!roomTimeline.initialized) return;
+    if (timelineScroll.bottom < 16
+      && !roomTimeline.canPaginateForward()
+      && document.visibilityState === 'visible') {
+      timelineScroll.scrollToBottom();
+    } else {
+      timelineScroll.tryRestoringScroll();
+    }
+  }, [newEvent, roomTimeline]);
 }
 
 let jumpToItemIndex = -1;
@@ -374,7 +394,7 @@ function RoomViewContent({ eventId, roomTimeline }) {
     timelineScrollRef,
     eventLimitRef,
   );
-  const newEvent = useEventArrive(roomTimeline, readUptoEvtStore, timelineScrollRef, eventLimitRef);
+  useEventArrive(roomTimeline, readUptoEvtStore, timelineScrollRef, eventLimitRef);
 
   const { timeline } = roomTimeline;
 
@@ -428,16 +448,6 @@ function RoomViewContent({ eventId, roomTimeline }) {
     timelineScroll.tryRestoringScroll();
   }, [onLimitUpdate]);
 
-  useEffect(() => {
-    const timelineScroll = timelineScrollRef.current;
-    if (!roomTimeline.initialized) return;
-    if (timelineScroll.bottom < 16 && !roomTimeline.canPaginateForward() && document.visibilityState === 'visible') {
-      timelineScroll.scrollToBottom();
-    } else {
-      timelineScroll.tryRestoringScroll();
-    }
-  }, [newEvent]);
-
   const handleTimelineScroll = (event) => {
     const timelineScroll = timelineScrollRef.current;
     if (!event.target) return;

src/client/state/RoomTimeline.js

@@ -230,18 +230,9 @@ class RoomTimeline extends EventEmitter {
 
   markAllAsRead() {
     const readEventId = this.getReadUpToEventId();
-    const getLatestValidEvent = () => {
-      for (let i = this.timeline.length - 1; i >= 0; i -= 1) {
-        const latestEvent = this.timeline[i];
-        if (latestEvent.getId() === readEventId) return null;
-        if (!latestEvent.isSending()) return latestEvent;
-      }
-      return null;
-    };
     this.notifications.deleteNoti(this.roomId);
     if (this.timeline.length === 0) return;
-    const latestEvent = getLatestValidEvent();
-    if (latestEvent === null) return;
+    const latestEvent = this.timeline[this.timeline.length - 1];
     if (readEventId === latestEvent.getId()) return;
     this.matrixClient.sendReadReceipt(latestEvent);
     this.emit(cons.events.roomTimeline.MARKED_AS_READ, latestEvent);

src/client/state/cons.js

@@ -1,5 +1,5 @@
 const cons = {
-  version: '1.8.1',
+  version: '1.8.0',
   secretKey: {
     ACCESS_TOKEN: 'cinny_access_token',
     DEVICE_ID: 'cinny_device_id',