Merge branch 'dev'

src/App.vue

@@ -63,6 +63,13 @@ export default {
         })
         .catch((error) => {
           console.log("Error creating client", error);
+          if (error.data.errcode ==='M_FORBIDDEN' && this.currentUser.is_guest) {
+            // Guest account and password don't work. We are in a strange state, probably because
+            // of server cleanup of accounts or similar. Wipe account and restart...
+            this.$store.commit("setUser", null);
+            this.$store.commit("setCurrentRoomId", null);
+            this.$navigation.push({ path: "/login" }, -1);
+          }
         })
         .finally(() => {
           this.loading = false;
@@ -87,6 +94,8 @@ export default {
       // Assigns available language for ex 'zh_Hans' when browser header language is 'zh' or 'zh-HK'
       this.availableJsonTranslation= LocalesArr[LocalesArr.findIndex(locale => locale.includes(lang))];
 
+      if (!this.$store.state.language) {
+        // Set default language if not set already
         if (this.$i18n.messages[this.browserLanguage]) {
           this.$store.commit("setLanguage", this.browserLanguage);
         } else if (this.browserLanguage.includes("-")) {
@@ -98,6 +107,7 @@ export default {
         } else {
           this.$store.commit("setLanguage", this.availableJsonTranslation);
         }
+      }
 
       // Set language
       this.$i18n.locale = this.$store.state.language || "en";

src/assets/css/_utilities.scss

@@ -18,3 +18,9 @@
 .white-space-pre {
     white-space: pre;
 }
+.v-visible {
+    visibility: visible;
+}
+.v-hidden {
+    visibility: hidden;
+}

src/assets/css/chat.scss

@@ -115,6 +115,11 @@ $admin-fg: white;
     background-color: $chat-background;
     overflow: hidden;
 
+    .chat-room-invitations {
+        padding: 10px;
+        background-color: #f2f2f2;
+    }
+      
     .chat-content {
         margin: 0;
         padding-top: $chat-standard-padding-s;
@@ -818,14 +823,24 @@ $admin-fg: white;
     }
 
     .filled-button {
+        @media #{map-get($display-breakpoints, 'sm-and-up')} {
             min-width: 180px !important;
         }
+    }
 
     .v-card {
         background-color: white;
         border-radius: 20px;
     }
 
+    .member .user-name {
+        margin-left: 6px;
+    }
+
+    .member .start-private-chat {
+        margin-left: 38px;
+    }
+
     .member::after {
         content: " ";
         display: block;

src/assets/css/join.scss

@@ -161,4 +161,8 @@
     @media #{map-get($display-breakpoints, 'sm-and-down')} {
         margin: 10px;
     }
+    @media #{map-get($display-breakpoints, 'md-and-up')} {
+        width: $main-desktop-width;
+        margin: 0 auto;
+    }
 }

src/assets/translations/en.json

@@ -62,9 +62,11 @@
     "user_changed_guest_access_open": "{user} allowed guests to join the room",
     "reply_image": "Image",
     "reply_audio_message": "Audio message",
-        "reply_video": "Video"
+    "reply_video": "Video",
+    "time_ago": "Today | Yesterday | {count} days ago"
   },
   "room": {
+    "invitations": "You have no invitations | You have 1 invitation | You have {count} invitations",
     "members": "no members | 1 member | {count} members",
     "leave": "Leave",
     "purge_set_room_state": "Setting room state",

src/components/BottomSheet.vue

@@ -48,6 +48,7 @@ export default {
       mc: null,
       y: 0,
       startY: 0,
+      startYCoord: 0,
       isMove: false,
       state: this.defaultState,
       rect: {},
@@ -65,14 +66,20 @@ export default {
     const self = this;
 
     this.mc.on("panup pandown", (evt) => {
-      self.y = evt.center.y - 16;
+      self.y = self.startYCoord - (self.startY - evt.center.y);
     });
 
     this.mc.on("panstart", (evt) => {
       self.startY = evt.center.y;
+      self.startYCoord = this.calcY();
       self.isMove = true;
     });
 
+    this.mc.on("pancancel", (ignoredEvt) => {
+      self.y = self.startYCoord;
+      self.isMove = false;
+    });
+
     this.mc.on("panend", (evt) => {
       self.isMove = false;
 

src/components/Chat.vue

@@ -1,5 +1,8 @@
 <template>
   <div class="chat-root fill-height d-flex flex-column">
+    <div class="chat-room-invitations clickable" v-if="invitationCount > 0" @click.stop="onInvitationsClick">
+      {{ $tc("room.invitations", invitationCount)}}
+    </div>
     <ChatHeader
       class="chat-header flex-grow-0 flex-shrink-0"
       v-on:header-click="onHeaderClick"
@@ -137,7 +140,7 @@
           <div v-if="replyToEvent" class="row">
             <div class="col">
               <div class="font-weight-medium">{{ $t("message.replying_to", { user: replyToEvent.sender.name }) }}</div>
-              <div v-if="replyToContentType === 'm.text'" class="reply-text" :title="replyToEvent.getContent().body"> {{ replyToEvent.getContent().body }} </div>
+              <div v-if="replyToContentType === 'm.text'" class="reply-text" :title="replyToEvent.getContent().body"> {{ replyToEvent.getContent().body | latestReply }} </div>
               <div v-if="replyToContentType === 'm.image'"> {{ $t("message.reply_image") }} </div>
               <div v-if="replyToContentType === 'm.audio'"> {{ $t("message.reply_audio_message") }} </div>
               <div v-if="replyToContentType === 'm.video'"> {{ $t("message.reply_video") }} </div>
@@ -643,6 +646,16 @@ export default {
     };
   },
 
+  filters: {
+    latestReply(contents) {
+      const contentArr =  contents.split('\n').reverse();
+      if (contentArr[0] === '') {
+        contentArr.shift();
+      }
+      return contentArr[0].replace(/^> (<.*> )?/g, '');
+    }
+  },
+
   mounted() {
     const container = this.$refs.chatContainer;
     this.scrollPosition = new ScrollPosition(container);
@@ -750,6 +763,9 @@ export default {
     debugging() {
       return (window.location.host || "").startsWith("localhost");
     },
+    invitationCount() {
+      return this.$matrix.invites.length;
+    }
   },
 
   watch: {
@@ -771,6 +787,7 @@ export default {
         this.timelineWindow = null;
         this.typingMembers = [];
         this.initialLoadDone = false;
+        this.showCreatedRoomWelcomeHeader = false;
 
         // Stop RR timer
         this.stopRRTimer();
@@ -814,8 +831,8 @@ export default {
                 this.$refs.messageOperationsStrut.getBoundingClientRect();
               var rectOps =
                 this.$refs.messageOperations.$el.getBoundingClientRect();
-              top = rectAnchor.top - rectChat.top;
+              top = rectAnchor.top - rectChat.top - 50;
-              left = rectAnchor.left - rectChat.left;
+              left = rectAnchor.left - rectChat.left - 30;
               if (left + rectOps.width >= rectChat.right) {
                 left = rectChat.right - rectOps.width - 10; // No overflow
               }
@@ -1581,7 +1598,7 @@ export default {
       const event = e.event;
       this.selectedEvent = event;
       this.updateRecentEmojis();
-      this.showContextMenu = true;
+      this.showContextMenu = !this.showContextMenu;
       this.showContextMenuAnchor = e.anchor;
     },
 
@@ -1597,6 +1614,7 @@ export default {
     },
 
     startPrivateChat(e) {
+      this.loading = true;
       this.$matrix
         .getOrCreatePrivateChat(e.event.getSender())
         .then((room) => {
@@ -1616,6 +1634,9 @@ export default {
         })
         .catch((err) => {
           console.error(err);
+        })
+        .finally(() => {
+          this.loading = false;
         });
     },
 
@@ -1718,7 +1739,12 @@ export default {
     },
 
     dayForEvent(event) {
+      let dayDiff = util.dayDiffToday(event.getTs());
+      if (dayDiff < 7) {
+        return this.$tc("message.time_ago", dayDiff);
+      } else {
         return util.formatDay(event.getTs());
+      }
     },
 
     showRecordingUI() {
@@ -1787,6 +1813,9 @@ export default {
       }
       this.$refs.roomInfoSheet.open();
     },
+    onInvitationsClick() {
+       this.$navigation.push({ name: "Home" }, -1);
+    }
   },
 };
 </script>

src/components/ChatHeader.vue

@@ -22,9 +22,25 @@
         <div class="num-members">{{ $tc("room.members", memberCount) }}</div>
       </v-col>
       <v-col cols="auto" class="text-end ma-0 pa-0">
-        <v-btn id="btn-leave-room" text class="leave-button" @click.stop="leaveRoom">{{
+        <v-btn
-          $t("room.leave")
+          id="btn-purge-room"
-        }}</v-btn>
+          v-if="userCanPurgeRoom"
+          color="red"
+          depressed
+          class="filled-button"
+          @click.stop="showPurgeConfirmation = true"
+        >
+          {{ $t("room_info.purge") }}
+        </v-btn>
+        <v-btn
+          id="btn-leave-room"
+          text
+          class="leave-button"
+          @click.stop="leaveRoom"
+          v-else
+        >
+          {{ $t("room.leave") }}
+        </v-btn>
       </v-col>
       <v-col cols="auto" class="text-end ma-0 pa-0 ms-2">
         <v-avatar
@@ -51,6 +67,12 @@
       :show="showProfileInfo"
       @close="showProfileInfo = false"
     />
+    <!-- PURGE ROOM POPUP -->
+    <PurgeRoomDialog
+      :show="showPurgeConfirmation"
+      :room="room"
+      @close="showPurgeConfirmation = false"
+    />
   </v-container>
 </template>
 
@@ -58,19 +80,24 @@
 import LeaveRoomDialog from "../components/LeaveRoomDialog";
 import ProfileInfoPopup from "../components/ProfileInfoPopup";
 import profileInfoMixin from "../components/profileInfoMixin";
+import PurgeRoomDialog from "../components/PurgeRoomDialog";
+
+import roomInfoMixin from "./roomInfoMixin";
 
 export default {
   name: "ChatHeader",
-  mixins: [profileInfoMixin],
+  mixins: [profileInfoMixin, roomInfoMixin],
   components: {
     LeaveRoomDialog,
     ProfileInfoPopup,
+    PurgeRoomDialog
   },
   data() {
     return {
       memberCount: null,
       showLeaveConfirmation: false,
       showProfileInfo: false,
+      showPurgeConfirmation: false
     };
   },
   mounted() {

src/components/CreateRoom.vue

@@ -12,7 +12,7 @@
           :disabled="step > steps.NAME_SET"
         >
           <v-icon>arrow_back</v-icon>
-          <span>{{ $t("menu.back") }}</span>
+          <span class="d-none d-sm-block">{{ $t("menu.back") }}</span>
         </v-btn>
         <!-- <v-btn
           text

src/components/CreatedRoomWelcomeHeader.vue

@@ -4,7 +4,18 @@
     <div class="mt-2" v-if="roomJoinRule == 'public'">
       <i18n path="room_welcome.join_public" tag="span">
         <template v-slot:link>
-          <a :href="publicRoomLink" class="text-break">{{ publicRoomLink }}</a>
+          <div style="position:relative;display:inline-block">
+            <a @click.stop="copyPublicLink" :href="publicRoomLink" class="text-break">{{ publicRoomLink }}</a>
+            <v-btn
+              v-if="publicRoomLinkCopied"
+              id="btn-copy-room-link"
+              color="#444444"
+              depressed
+              style="position:absolute;left:0;top:0"
+              class="filled-button link-copied-in-place"
+              >{{ $t("room_info.link_copied") }}</v-btn
+            >
+          </div>
         </template>
       </i18n>
     </div>
@@ -54,6 +65,29 @@ export default {
       return null;
     },
   },
+  data() {
+    return {
+      publicRoomLinkCopied: false
+    }
+  },
+  methods: {
+    copyPublicLink() {
+      const self = this;
+      this.$copyText(this.publicRoomLink).then(
+        function (ignored) {
+          // Success!
+          self.publicRoomLinkCopied = true;
+          setInterval(() => {
+            // Hide again
+            self.publicRoomLinkCopied = false;
+          }, 3000);
+        },
+        function (e) {
+          console.log(e);
+        }
+      );
+    }
+  }
 };
 </script>
 

src/components/Join.vue

@@ -272,6 +272,10 @@ export default {
         }
       },
     },
+    activeLanguage() {
+      // Null status on language change, we don't know what status we are in so we can't get the right string.
+      this.loadingMessage = null;
+    }
   },
   methods: {
     getRoomInfo() {

src/components/RoomInfo.vue

@@ -1,23 +1,22 @@
 <template>
   <div v-if="room" class="room-info">
     <div class="chat-header">
-      <v-container fluid>
+      <v-container fluid class="d-flex justify-space-between align-center">
-        <div class="room-name no-upper">{{ $t("room_info.title") }}</div>
         <v-btn
           id="btn-back"
           text
-          class="header-button-left"
+          :class="$navigation && $navigation.canPop() ? 'v-visible' : 'v-hidden'"
-          v-show="$navigation && $navigation.canPop()"
           @click.stop="$navigation.pop"
         >
           <v-icon>arrow_back</v-icon>
-          <span>{{ $t("menu.back") }}</span>
+          <span class="d-none d-sm-block">{{ $t("menu.back") }}</span>
         </v-btn>
+        <div class="room-name no-upper">{{ $t("room_info.title") }}</div>
         <v-btn
           id="btn-leave-room"
           color="black"
           depressed
-          class="header-button-right filled-button me-3"
+          class="filled-button"
           @click.stop="showLeaveConfirmation = true"
           >👋 {{ $t("room_info.leave_room") }}</v-btn
         >
@@ -134,7 +133,7 @@
           class="member ma-2"
           v-for="(member, index) in joinedMembers"
           :key="member.userId"
-          v-show="showAllMembers || index < 5"
+          v-show="showAllMembers || index < SHOW_MEMBER_LIMIT"
           @click="toggleMemberExpanded(member)"
         >
           <v-avatar class="avatar" size="32" color="grey">
@@ -143,6 +142,7 @@
               member.name.substring(0, 1).toUpperCase()
             }}</span>
           </v-avatar>
+          <span class="user-name">
           {{
             member.userId == $matrix.currentUserId
               ? $t("room_info.user_you", {
@@ -152,12 +152,14 @@
                   user: member.user ? member.user.displayName : member.name,
                 })
           }}
+          </span>
+          <div v-if="member.userId != $matrix.currentUserId && !$matrix.isDirectRoomWith(room, member.userId) && expandedMembers.includes(member)" class="start-private-chat clickable" @click="startPrivateChat(member.userId)">Start private chat</div>
           <DeviceList
             v-if="expandedMembers.includes(member)"
             :member="member"
           />
         </div>
-        <div class="show-all" @click="showAllMembers = !showAllMembers">
+        <div class="show-all" @click="showAllMembers = !showAllMembers" v-if="joinedMembers.length > SHOW_MEMBER_LIMIT">
           {{
             showAllMembers ? $t("room_info.hide_all") : $t("room_info.show_all")
           }}
@@ -165,19 +167,6 @@
       </v-card-text>
     </v-card>
 
-    <!-- PURGE ROOM -->
-    <div class="members ma-3 pa-3 text-center">
-      <v-btn
-        id="btn-purge-room"
-        v-if="userCanPurgeRoom"
-        color="red"
-        depressed
-        class="filled-button"
-        @click.stop="showPurgeConfirmation = true"
-        >{{ $t("room_info.purge") }}</v-btn
-      >
-    </div>
-
     <div class="build-version">
       {{ $t("room_info.version_info", { version: buildVersion }) }}
     </div>
@@ -188,12 +177,6 @@
       @close="showLeaveConfirmation = false"
     />
 
-    <PurgeRoomDialog
-      :show="showPurgeConfirmation"
-      :room="room"
-      @close="showPurgeConfirmation = false"
-    />
-
     <QRCodePopup :show="showFullScreenQR" :message="publicRoomLink" @close="showFullScreenQR = false" />
 
   </div>
@@ -201,18 +184,17 @@
 
 <script>
 import LeaveRoomDialog from "../components/LeaveRoomDialog";
-import PurgeRoomDialog from "../components/PurgeRoomDialog";
 import DeviceList from "../components/DeviceList";
 import QRCode from "qrcode";
 import roomInfoMixin from "./roomInfoMixin";
 import QRCodePopup from './QRCodePopup.vue';
+import util from "../plugins/utils";
 
 export default {
   name: "RoomInfo",
   mixins: [roomInfoMixin],
   components: {
     LeaveRoomDialog,
-    PurgeRoomDialog,
     DeviceList,
     QRCodePopup,
   },
@@ -223,7 +205,6 @@ export default {
       displayName: "",
       showAllMembers: false,
       showLeaveConfirmation: false,
-      showPurgeConfirmation: false,
       showFullScreenQR: false,
       expandedMembers: [],
       buildVersion: "",
@@ -241,6 +222,7 @@ export default {
           icon: "person_add",
         },
       ],
+      SHOW_MEMBER_LIMIT: 5
     };
   },
   mounted() {
@@ -439,6 +421,28 @@ export default {
           this.updateQRCode();
         });
     },
+    startPrivateChat(userId) {
+      this.$matrix
+        .getOrCreatePrivateChat(userId)
+        .then((room) => {
+          this.$nextTick(() => {
+            this.$navigation.push(
+              {
+                name: "Chat",
+                params: {
+                  roomId: util.sanitizeRoomId(
+                    room.getCanonicalAlias() || room.roomId
+                  ),
+                },
+              },
+              -1
+            );
+          });
+        })
+        .catch((err) => {
+          console.error(err);
+        });
+    },
   },
 };
 </script>

src/components/RoomList.vue

@@ -52,7 +52,7 @@
         <v-list-item-avatar size="40" color="#e0e0e0">
           <v-img :src="room.avatar" />
         </v-list-item-avatar>
-        <div class="room-list-notification-count">
+        <div class="room-list-notification-count" v-if="notificationCount(room) > 0">
           {{ notificationCount(room) }}
         </div>
         <v-list-item-content>

src/components/messages/AudioPlayer.vue

@@ -45,6 +45,7 @@ export default {
     };
   },
   mounted() {
+    this.$root.$on('playback-start', this.onPlaybackStart);
     this.player = this.$refs.player;
     this.player.addEventListener("timeupdate", this.updateProgressBar);
     this.player.addEventListener("play", () => {
@@ -58,6 +59,9 @@ export default {
       this.playing = false;
     });
   },
+  beforeDestroy() {
+    this.$root.$off('playback-start', this.onPlaybackStart);
+  },
   computed: {
     currentTime() {
       return util.formatDuration(this.playTime);
@@ -80,6 +84,7 @@ export default {
   methods: {
     play() {
       if (this.player.src) {
+        this.$root.$emit("playback-start", this);
         if (this.player.paused) {
           this.player.play();
         } else if (this.player.ended) {
@@ -107,6 +112,11 @@ export default {
     updateDuration() {
       this.duration = 1000 * this.player.duration;
     },
+    onPlaybackStart(item) {
+      if (item != this && this.playing) {
+        this.pause();
+      }
+    }
   },
 };
 </script>

src/components/messages/messageMixin.js

@@ -88,10 +88,7 @@ export default {
         while (lines.length && !lines[0].startsWith('> ')) lines.shift();
         // Reply fallback has a blank line after it, so remove it to prevent leading newline
         if (lines[0] === '') lines.shift();
-        const text = lines
+        const text = lines[0].replace(/^> (<.*> )?/g, '');
-        .map((item) => { return item.replace(/^> (<.*> )?/g, ''); })
-        .reverse()
-        .join('\n');
         if (text) {
           return text;
         }

src/components/profileInfoMixin.js

@@ -1,7 +1,7 @@
 export default {
   computed: {
     user() {
-      if (!this.$matrix.matrixClient) {
+      if (!this.$matrix.ready) {
         return null;
       }
       return this.$matrix.matrixClient.getUser(this.$matrix.currentUserId);

src/plugins/utils.js

@@ -546,19 +546,15 @@ class Util {
         return t2.diff(t1, 'day');
     }
 
-    formatDay(timestamp) {
+    dayDiffToday(timestamp) {
         var then = dayjs(timestamp).endOf('day');
         var now = dayjs().endOf('day');
-        const dayDiff = now.diff(then, 'day');
+        return now.diff(then, 'day');
-        if (dayDiff < 1) {
-            return "Today";
-        } else if (dayDiff < 2) {
-            return "Yesterday";
-        } else if (dayDiff < 7) {
-            return "" + dayDiff + " days ago";
-        } else {
-            return then.format('L');
     }
+
+    formatDay(timestamp) {
+        var then = dayjs(timestamp).endOf('day');
+        return then.format('L');
     }
 
     formatRecordDuration(ms) {

src/services/matrix.service.js

@@ -391,8 +391,8 @@ export default {
             // Invitation. Need to call "recalculate" to pick
             // up room name, not sure why exactly.
             room.recalculate();
-            this.reloadRooms();
           }
+          this.reloadRooms();
         },
 
         onSessionLoggedOut() {
@@ -409,12 +409,21 @@ export default {
           // we need to hang on to the generated password and use that to login to a new
           // session, so only wipe the token in s that case.
           // Clear the access token
-          var user = JSON.parse(this.$store.state.auth.user);
+          var user = this.$store.state.auth.user;
           if (user.is_guest) {
             delete user.access_token;
             this.$store.commit("setUser", user);
+
             // Login again
-            this.login(user);
+            this.login(user).catch(error => {
+              if (error.data.errcode ==='M_FORBIDDEN' && this.currentUser.is_guest) {
+                // Guest account and password don't work. We are in a strange state, probably because
+                // of server cleanup of accounts or similar. Wipe account and restart...
+                this.$store.commit("setUser", null);
+              }
+              this.$store.commit("setCurrentRoomId", null);
+              this.$navigation.push({ path: "/login" }, -1);
+            })
           } else {
             this.$store.commit("setUser", null);
             this.$store.commit("setCurrentRoomId", null);
@@ -688,11 +697,15 @@ export default {
             for (const room of this.rooms) {
               // Is the other member the one we are looking for?
               if (this.isDirectRoomWith(room, userId)) {
+                if (room.getMyMembership() == "invite") {
+                  this.matrixClient.joinRoom(room.roomId);
+                } else {
                   var member = room.getMember(userId);
                   if (member && member.membership != "join") {
                     // Resend invite
                     this.matrixClient.invite(room.roomId, userId);
                   }
+                }
                 resolve(room);
                 return;
               }
@@ -703,6 +716,7 @@ export default {
             const createRoomOptions = {
               visibility: "private", // Not listed!
               preset: "private_chat",
+              is_direct: true,
               initial_state: [
                 {
                   type: "m.room.encryption",
@@ -746,22 +760,18 @@ export default {
          */
         isDirectRoomWith(room, userId) {
           if (
-            room.selfMembership == "join" &&
+            room.getJoinRule() == "invite" &&
-            room.getInvitedAndJoinedMemberCount() == 2
+            room.getMembers().length == 2
-          ) {
-            // Is the other member the one we are looking for?
-            if (
-              room
-                .getMembersWithMembership("join")
-                .some((item) => item.userId == userId)
           ) {
+            let other = room.getMember(userId);
+            if (other) {
+              if (room.getMyMembership() == "invite" && other.membership == "join") {
                 return true;
-            } else if (
+              } else if (room.getMyMembership() == "join" && room.canInvite(this.currentUserId)) {
-              room
-                .getMembersWithMembership("invite")
-                .some((item) => item.userId == userId)
-            ) {
                 return true;
+              } else if (room.getMyMembership() == "join" && other.membership == "join") {
+                return true;
+              }
             }
           }
           return false;