Merge branch 'main' of gitlab.com:keanuapp/keanuapp-weblite into main

package.json

@@ -1,6 +1,6 @@
 {
   "name": "keanuapp-weblite",
-  "version": "0.1.15",
+  "version": "0.1.16",
   "private": true,
   "scripts": {
     "serve": "vue-cli-service serve",
@@ -17,12 +17,12 @@
     "fix-webm-duration": "^1.0.0",
     "image-resize": "^1.1.5",
     "image-size": "^1.0.0",
-    "intersection-observer": "^0.11.0",
+    "intersection-observer": "^0.12",
     "js-sha256": "^0.9.0",
     "json-web-key": "^0.4.0",
-    "linkifyjs": "^2.1.9",
+    "linkifyjs": "3.0.0-beta.3",
-    "material-design-icons-iconfont": "^5.0.1",
+    "material-design-icons-iconfont": "^6.1",
-    "matrix-js-sdk": "^9.4.1",
+    "matrix-js-sdk": "^12.4",
     "md-gum-polyfill": "^1.0.0",
     "olm": "https://packages.matrix.org/npm/olm/olm-3.2.1.tgz",
     "pretty-bytes": "^5.6.0",
@@ -34,7 +34,7 @@
     "vue": "^2.6.11",
     "vue-clipboard2": "^0.3.1",
     "vue-i18n": "^8.24.4",
-    "vue-resize": "^0.5.0",
+    "vue-resize": "^1.0",
     "vue-router": "^3.2.0",
     "vue-sanitize": "^0.2.1",
     "vue-swipeable-bottom-sheet": "^0.0.5",
@@ -47,11 +47,11 @@
     "@vue/cli-plugin-eslint": "~4.5.0",
     "@vue/cli-service": "~4.5.0",
     "babel-eslint": "^10.1.0",
-    "eslint": "^6.7.2",
+    "eslint": "^7.0",
-    "eslint-plugin-vue": "^6.2.2",
+    "eslint-plugin-vue": "^7.0",
     "sass": "^1.19.0",
-    "sass-loader": "^8.0.0",
+    "sass-loader": "^10",
-    "vue-cli-plugin-vuetify": "~2.0.7",
+    "vue-cli-plugin-vuetify": "^2.4",
     "vue-template-compiler": "^2.6.11",
     "vuetify-loader": "^1.3.0"
   },

package.json.bak

@@ -1,6 +1,6 @@
 {
   "name": "keanuapp-weblite",
-  "version": "0.1.14",
+  "version": "0.1.15",
   "private": true,
   "scripts": {
     "serve": "vue-cli-service serve",
@@ -10,19 +10,19 @@
   "dependencies": {
     "aes-js": "^3.1.2",
     "axios": "^0.21.0",
-    "clean-insights-sdk": "^2.4.1",
+    "clean-insights-sdk": "^2.4",
     "core-js": "^3.6.5",
     "data-uri-to-buffer": "^3.0.1",
     "dayjs": "^1.10.3",
     "fix-webm-duration": "^1.0.0",
     "image-resize": "^1.1.5",
     "image-size": "^1.0.0",
-    "intersection-observer": "^0.11.0",
+    "intersection-observer": "^0.12",
     "js-sha256": "^0.9.0",
     "json-web-key": "^0.4.0",
-    "linkifyjs": "^2.1.9",
+    "linkifyjs": "3.0.0-beta.3",
-    "material-design-icons-iconfont": "^5.0.1",
+    "material-design-icons-iconfont": "^6.1",
-    "matrix-js-sdk": "^9.4.1",
+    "matrix-js-sdk": "^12.4",
     "md-gum-polyfill": "^1.0.0",
     "olm": "https://packages.matrix.org/npm/olm/olm-3.2.1.tgz",
     "pretty-bytes": "^5.6.0",
@@ -34,7 +34,7 @@
     "vue": "^2.6.11",
     "vue-clipboard2": "^0.3.1",
     "vue-i18n": "^8.24.4",
-    "vue-resize": "^0.5.0",
+    "vue-resize": "^1.0",
     "vue-router": "^3.2.0",
     "vue-sanitize": "^0.2.1",
     "vue-swipeable-bottom-sheet": "^0.0.5",
@@ -47,11 +47,11 @@
     "@vue/cli-plugin-eslint": "~4.5.0",
     "@vue/cli-service": "~4.5.0",
     "babel-eslint": "^10.1.0",
-    "eslint": "^6.7.2",
+    "eslint": "^7.0",
-    "eslint-plugin-vue": "^6.2.2",
+    "eslint-plugin-vue": "^7.0",
     "sass": "^1.19.0",
-    "sass-loader": "^8.0.0",
+    "sass-loader": "^10",
-    "vue-cli-plugin-vuetify": "~2.0.7",
+    "vue-cli-plugin-vuetify": "^2.4",
     "vue-template-compiler": "^2.6.11",
     "vuetify-loader": "^1.3.0"
   },

src/App.vue

@@ -24,7 +24,7 @@
               indeterminate
               color="primary"
             ></v-progress-circular>
-            <div>{{$t('menu.loading', {appName: appName})}}</div>
+            <div>{{ $t("menu.loading", { appName: appName }) }}</div>
           </v-col>
         </v-row>
       </v-container>
@@ -90,8 +90,7 @@ export default {
         if (this.$matrix.currentRoom) {
           title +=
             " - " +
-            (this.$matrix.currentRoom.summary.info.title ||
+            (this.$matrix.currentRoom.name || this.$matrix.currentRoom.roomId);
-              this.$matrix.currentRoom.roomId);
         } else if (this.$matrix.currentRoomId) {
           title += " - " + this.$matrix.currentRoomId;
         }

src/components/Chat.vue

@@ -93,13 +93,13 @@
               :event="event"
               :nextEvent="events[index + 1]"
               :reactions="
-                timelineWindow._timelineSet.getRelationsForEvent(
+                timelineSet.getRelationsForEvent(
                   event.getId(),
                   'm.annotation',
                   'm.reaction'
                 )
               "
-              :timelineSet="timelineWindow._timelineSet"
+              :timelineSet="timelineSet"
               v-on:send-quick-reaction="sendQuickReaction"
               v-on:context-menu="showContextMenuForEvent($event)"
               v-on:own-avatar-clicked="viewProfile"
@@ -559,6 +559,7 @@ export default {
       events: [],
       currentInput: "",
       typingMembers: [],
+      timelineSet: null,
       timelineWindow: null,
 
       /** true if we are currently paginating */
@@ -824,10 +825,10 @@ export default {
       console.log("Read up to " + initialEventId);
 
       //initialEventId = null;
-
+      this.timelineSet = this.room.getUnfilteredTimelineSet();
       this.timelineWindow = new TimelineWindow(
         this.$matrix.matrixClient,
-        this.room.getUnfilteredTimelineSet(),
+        this.timelineSet,
         {}
       );
       const self = this;
@@ -903,15 +904,17 @@ export default {
       ) {
         this.loading = true;
         // Instead of paging though ALL history, just reload a timeline at the live marker...
+        var timelineSet = this.room.getUnfilteredTimelineSet();
         var timelineWindow = new TimelineWindow(
           this.$matrix.matrixClient,
-          this.room.getUnfilteredTimelineSet(),
+          timelineSet,
           {}
         );
         const self = this;
         timelineWindow
           .load(null, 20)
           .then(() => {
+            self.timelineSet = timelineSet;
             self.timelineWindow = timelineWindow;
             self.events = self.timelineWindow.getEvents();
           })

src/components/ChatHeader.vue

@@ -18,7 +18,7 @@
         @click.stop="onHeaderClicked"
       >
         <div class="d-flex flex-nowrap room-name-inline">
-          {{ room.summary.info.title }}
+          {{ room.name }}
           <!--<v-icon>expand_more</v-icon>-->
         </div>
         <div class="num-members">{{ $tc("room.members", memberCount) }}</div>
@@ -104,7 +104,7 @@ export default {
 
   methods: {
     onEvent(event) {
-      if (event.getRoomId() !== this.roomId) {
+      if (!this.room || event.getRoomId() !== this.room.roomId) {
         return; // Not for this room
       }
       if (event.getType() == "m.room.member") {

src/components/CreateRoom.vue

@@ -66,7 +66,11 @@
               <div class="ms-2">{{ data.item.name }}</div>
             </template>
           </v-select>
-          <v-checkbox class="mt-0" v-model="sharedComputer" :label="$t('join.shared_computer')" />
+          <v-checkbox
+            class="mt-0"
+            v-model="sharedComputer"
+            :label="$t('join.shared_computer')"
+          />
         </v-col>
       </v-row>
     </v-container>
@@ -283,6 +287,14 @@ export default {
       }
       return true;
     },
+    sharedComputer: {
+      get: function () {
+        return !this.$store.state.useLocalStorage;
+      },
+      set: function (sharedComputer) {
+        this.$store.commit("setUseLocalStorage", !sharedComputer);
+      },
+    },
   },
 
   methods: {
@@ -352,8 +364,6 @@ export default {
       const hasUser = this.currentUser ? true : false;
       var setProfileData = false;
 
-      var uniqueAliasPromise = Promise.resolve(true);
-
       var roomId;
       this.status = this.$t("new_room.status_creating");
       var createRoomOptions = {};
@@ -372,18 +382,6 @@ export default {
             },
           ],
         };
-
-        // Promise to get a unique alias and use it in room creation options.
-        //
-        uniqueAliasPromise = util
-          .getUniqueAliasForRoomName(
-            this.$matrix.matrixClient,
-            this.roomName,
-            this.$matrix.currentUserHomeServer
-          )
-          .then((alias) => {
-            createRoomOptions.room_alias_name = alias;
-          });
       } else {
         //if (this.joinRule == "invite") {
         createRoomOptions = {
@@ -467,7 +465,21 @@ export default {
           }.bind(this)
         )
         .then(() => {
-          return uniqueAliasPromise;
+          if (this.joinRule == "public") {
+            // Promise to get a unique alias and use it in room creation options.
+            //
+            return util
+              .getUniqueAliasForRoomName(
+                this.$matrix.matrixClient,
+                this.roomName,
+                this.$matrix.currentUserHomeServer
+              )
+              .then((alias) => {
+                createRoomOptions.room_alias_name = alias;
+              });
+          } else {
+            return Promise.resolve(true);
+          }
         })
         .then(() => {
           return this.$matrix.matrixClient

src/components/Profile.vue

@@ -159,9 +159,11 @@ import ImageResize from "image-resize";
 const sizeOf = require("image-size");
 //const dataUriToBuffer = require("data-uri-to-buffer");
 import util from "../plugins/utils";
+import profileInfoMixin from "./profileInfoMixin";
 
 export default {
   name: "Profile",
+  mixins: [profileInfoMixin],
   components: {
     ActionRow,
     SelectLanguageDialog,

src/components/QRCodePopup.vue

@@ -1,13 +1,8 @@
 <template>
   <v-dialog v-model="showDialog" class="ma-0 pa-0" width="80%">
     <div class="dialog-content text-center" ref="qrContainer">
-      <div class="d-flex flex-column text-center" style="align-items:center">
+      <div class="d-flex flex-column text-center" style="align-items: center">
-      <canvas
+        <canvas ref="qr" class="qr" id="qr" :style="qrStyle"></canvas>
-        ref="qr"
-        class="qr"
-        id="qr"
-        :style="qrStyle"
-      ></canvas>
       </div>
       <div>{{ $t("room_info.scan_code") }}</div>
     </div>
@@ -30,7 +25,7 @@ export default {
     message: {
       type: String,
       default: function () {
-        return false;
+        return null;
       },
     },
   },
@@ -46,9 +41,9 @@ export default {
     qrStyle() {
       const w = document.documentElement.clientWidth;
       const h = document.documentElement.clientHeight;
-      const s = 0.6 * Math.min(w,h);
+      const s = 0.6 * Math.min(w, h);
       return "width: " + s + "px;height:" + s + "px;";
-    }
+    },
   },
   watch: {
     show: {
@@ -84,7 +79,10 @@ export default {
             {
               type: "image/png",
               margin: 1,
-              width: Math.min(0.7 * canvasContainer.clientWidth, 0.7 * canvasContainer.clientHeight),
+              width: Math.min(
+                0.7 * canvasContainer.clientWidth,
+                0.7 * canvasContainer.clientHeight
+              ),
             },
             function (error) {
               if (error) console.error(error);
@@ -92,7 +90,7 @@ export default {
           );
         });
       }
-    }
+    },
   },
 };
 </script>

src/components/RoomList.vue

@@ -21,17 +21,23 @@
           <v-img :src="room.avatar" />
         </v-list-item-avatar>
         <v-list-item-content>
-          <v-list-item-title>{{
+          <v-list-item-title>{{ room.name }}</v-list-item-title>
-            room.name || room.summary.info.title
-          }}</v-list-item-title>
           <v-list-item-subtitle>{{ room.topic }}</v-list-item-subtitle>
         </v-list-item-content>
         <v-list-item-action>
-          <v-btn class="filled-button" depressed color="black" @click.stop="acceptInvitation(room)"
+          <v-btn
-            >{{$t('menu.join')}}</v-btn
+            class="filled-button"
+            depressed
+            color="black"
+            @click.stop="acceptInvitation(room)"
+            >{{ $t("menu.join") }}</v-btn
           >
-          <v-btn class="filled-button" color="black" @click.stop="rejectInvitation(room)" text
+          <v-btn
-            >{{$t('menu.ignore')}}</v-btn
+            class="filled-button"
+            color="black"
+            @click.stop="rejectInvitation(room)"
+            text
+            >{{ $t("menu.ignore") }}</v-btn
           >
         </v-list-item-action>
       </v-list-item>
@@ -49,7 +55,7 @@
           {{ notificationCount(room) }}
         </div>
         <v-list-item-content>
-          <v-list-item-title>{{ room.summary.info.title }}</v-list-item-title>
+          <v-list-item-title>{{ room.name }}</v-list-item-title>
           <v-list-item-subtitle>{{ room.topic }}</v-list-item-subtitle>
         </v-list-item-content>
       </v-list-item>
@@ -99,9 +105,9 @@ export default {
       if (items == null) {
         return [];
       }
-      return items.sort(function(a, b) {
+      return items.sort(function (a, b) {
         const titleA = a.name || a.summary.info.title;
-        const titleB = b.name || b.summary.info.title
+        const titleB = b.name || b.summary.info.title;
         if (titleA == null) {
           return 1;
         } else if (titleB == null) {

src/components/VoiceRecorder.vue

@@ -56,7 +56,9 @@
             </div>
           </v-col>
           <v-col cols="6" v-if="ptt">
-            <div class="swipe-info">&lt;&lt; {{$t('voice_recorder.swipe_to_cancel')}}</div>
+            <div class="swipe-info">
+              &lt;&lt; {{ $t("voice_recorder.swipe_to_cancel") }}
+            </div>
           </v-col>
         </v-row>
       </v-container>
@@ -72,7 +74,9 @@
                 <v-icon color="white">delete_outline</v-icon>
               </v-col>
               <v-col cols="6">
-                <div class="swipe-info">{{$t('voice_recorder.release_to_cancel')}}</div>
+                <div class="swipe-info">
+                  {{ $t("voice_recorder.release_to_cancel") }}
+                </div>
               </v-col>
             </v-row>
           </v-container>
@@ -93,9 +97,9 @@
                 </div>
               </v-col>
               <v-col cols="3">
-                <v-btn @click.stop="cancelRecording" text class="swipe-info"
+                <v-btn @click.stop="cancelRecording" text class="swipe-info">{{
-                  >{{$t('menu.cancel')}}</v-btn
+                  $t("menu.cancel")
-                >
+                }}</v-btn>
               </v-col>
               <v-col cols="3">
                 <v-btn @click.stop="stopRecording" icon class="swipe-info"
@@ -116,7 +120,7 @@
           <v-row align="center">
             <v-col>
               <div class="swipe-info">
-                {{ errorMessage || $t('voice_recorder.failed_to_record') }}
+                {{ errorMessage || $t("voice_recorder.failed_to_record") }}
               </div>
             </v-col>
             <v-col align="right">
@@ -236,6 +240,7 @@ export default {
           this.startRecording();
         } else {
           console.log("Not PTT");
+          //eslint-disable-next-line
           this.micButtonRef.$el.style.display = "none";
         }
       } else {
@@ -250,6 +255,7 @@ export default {
         this.startCoordinateX = null;
         this.startCoordinateY = null;
         this.recordingLocked = false;
+        //eslint-disable-next-line
         this.micButtonRef.$el.style.display = "block";
       }
     },
@@ -341,7 +347,7 @@ export default {
             mimeType: "audio/webm",
             sampleRate: 16000,
             desiredSampRate: 16000,
-            numberOfAudioChannels: 1
+            numberOfAudioChannels: 1,
           });
           this.recorder.startRecording();
           this.state = State.RECORDING;

src/services/matrix.service.js

@@ -76,13 +76,13 @@ export default {
 
                 joinedRooms() {
                     return this.rooms.filter(room => {
-                        return room._selfMembership === 'join'
+                        return room.selfMembership === 'join'
                     });
                 },
 
                 invites() {
                     return this.rooms.filter(room => {
-                        return room._selfMembership === 'invite'
+                        return room.selfMembership === 'invite'
                     });
                 }
             },
@@ -124,10 +124,12 @@ export default {
                             })
                             .then((response) => {
                                 console.log("Response", response);
-                                response.password = pass;
+                                var u = Object.assign({}, response);
-                                response.is_guest = true;
+                                u.home_server = tempMatrixClient.baseUrl; // Don't use deprecated field from response.
-                                this.$store.commit("setUser", response);
+                                u.password = pass;
-                                return response;
+                                u.is_guest = true;
+                                this.$store.commit("setUser", u);
+                                return u;
                             })
                     } else {
                         var data = { user: User.localPart(user.user_id), password: user.password, type: "m.login.password", initial_device_display_name: config.appName };
@@ -137,13 +139,14 @@ export default {
                         promiseLogin = tempMatrixClient
                             .login("m.login.password", data)
                             .then((response) => {
-                                var u = response;
+                                var u = Object.assign({}, response);
                                 if (user.is_guest) {
                                     // Copy over needed properties
                                     u = Object.assign(user, response);
                                 }
+                                u.home_server = tempMatrixClient.baseUrl; // Don't use deprecated field from response.
                                 this.$store.commit("setUser", u);
-                                return response;
+                                return u;
                             })
                     }
 
@@ -348,13 +351,13 @@ export default {
                 },
 
                 onRoom(ignoredroom) {
-                    console.log("Got room: " + ignoredroom);
+                    console.log("Got room", ignoredroom);
                     this.reloadRooms();
                     this.updateNotificationCount();
                 },
 
                 onRoomMyMembership(room) {
-                    if (room._selfMembership === "invite") {
+                    if (room.selfMembership === "invite") {
                         // Invitation. Need to call "recalculate" to pick
                         // up room name, not sure why exactly.
                         room.recalculate();
@@ -394,7 +397,7 @@ export default {
                     // each time!
                     var updatedRooms = this.matrixClient.getVisibleRooms();
                     updatedRooms = updatedRooms.filter(room => {
-                        return room._selfMembership && (room._selfMembership == "invite" || room._selfMembership == "join");
+                        return room.selfMembership && (room.selfMembership == "invite" || room.selfMembership == "join");
                     });
                     updatedRooms.forEach(room => {
                         if (!room.avatar) {
@@ -438,7 +441,7 @@ export default {
                     var ids = {};
                     const ret = [];
                     for (const room of this.rooms) {
-                        if (room._selfMembership == 'join' && this.getRoomJoinRule(room) == 'invite') {
+                        if (room.selfMembership == 'join' && this.getRoomJoinRule(room) == 'invite') {
                             for (const member of room.getJoinedMembers()) {
                                 if (member.userId != this.currentUserId && !ids[member.userId]) {
                                     ids[member.userId] = member;
@@ -661,7 +664,7 @@ export default {
                  * @param {*} userId 
                  */
                 isDirectRoomWith(room, userId) {
-                    if (room._selfMembership == "join" && room.getInvitedAndJoinedMemberCount() == 2) {
+                    if (room.selfMembership == "join" && room.getInvitedAndJoinedMemberCount() == 2) {
                         // Is the other member the one we are looking for?
                         if (room.getMembersWithMembership("join").some(item => item.userId == userId)) {
                             return true;