Merge branch '498-file-drop-mode-file-sent-from-the-user-in-file-drop-mode-is-not-received-by-another-user' into 'dev'

Resolve "(File Drop Mode) : File sent from the user in file drop mode is not received by another user"

See merge request keanuapp/keanuapp-weblite!217

src/assets/css/filedrop.scss

@@ -355,6 +355,11 @@ $small-button-height: 36px;
       right: unset;
       left: 8px;
       background: linear-gradient(0deg, #000 0%, #000 100%), #4642f1;
+      &.close {
+        right: 8px;
+        left: unset;
+        background: $hiliteColor !important;
+      }
     }
   }
 }

src/assets/translations/en.json

@@ -386,7 +386,8 @@
     "sending": "Sending",
     "files_sent":"1 file sent! | {count} files sent!",
     "files_sent_with_note":"1 file sent with a note! | {count} files sent with a note!",
-    "return_to_home": "Return to home",
+    "send_more_files": "Send more files",
+    "close": "Close",
     "files": "Files"
   }
 }

src/assets/translations/pt_BR.json

@@ -372,7 +372,6 @@
         "sending_progress": "Enviando...",
         "files_sent": "1 arquivo enviado! | {count} arquivos enviados!",
         "files_sent_with_note": "1 arquivo enviado com uma nota! | {count} arquivos enviados com uma nota!",
-        "return_to_home": "Retornar ao início",
         "add_a_message": "Adicionar uma mensagem",
         "sending": "Enviando",
         "any_file_format_accepted": "Qualquer formato de arquivo é aceito",

src/components/LeaveRoomDialog.vue

@@ -117,22 +117,10 @@ export default {
     },
 
     onLeaveRoom() {
-      const lastRoom = this.onlyJoinedToThisRoom();
-      //this.$matrix.matrixClient.forget(this.room.roomId, true, undefined)
-      const roomId = this.room.roomId;
-      this.$matrix
-        .leaveRoom(roomId)
+      this.$matrix.leaveRoomAndNavigate(this.room.roomId)
         .then(() => {
           this.showDialog = false;
           console.log("Left room");
-          if (lastRoom) {
-            this.$navigation.push({ name: "Goodbye" }, -1);
-          } else {
-            this.$navigation.push(
-              { name: "Home", params: { roomId: null } },
-              -1
-            );
-          }
         })
         .catch((err) => {
           console.log("Error leaving", err);

src/components/chatMixin.js

@@ -154,7 +154,7 @@ export default {
 
         case "m.room.message":
           if (event.getSender() != this.$matrix.currentUserId) {
-              if (event.isThreadRoot) {
+              if (event.isThreadRoot || event.isThread) {
                 // Incoming thread, e.g. a file drop!
                 return MessageIncomingThread;
               }

src/components/file_mode/FileDropLayout.vue

@@ -95,7 +95,8 @@
               color="#4642F1"></v-progress-circular></v-btn>
         </div>
         <div v-else-if="status == mainStatuses.SENT" class="file-drop-sent-input-container">
-          <v-btn @click.stop="reset">{{ $t("file_mode.return_to_home") }}</v-btn>
+          <v-btn @click.stop="reset">{{ $t("file_mode.send_more_files") }}</v-btn>
+          <v-btn class="close" @click.stop="close">{{ $t("file_mode.close") }}</v-btn>
         </div>
       </div>
     </template>
@@ -211,6 +212,12 @@ export default {
       this.messageInput = "";
       this.currentItemIndex = 0;
     },
+    close() {
+      this.$matrix.leaveRoomAndNavigate(this.room.roomId)
+        .catch((err) => {
+          console.log("Error leaving", err);
+        });
+    },
     send() {
       this.status = this.mainStatuses.SENDING;
       this.sendInfo = this.attachments.map((attachment) => {

src/components/messages/messageMixin.js

@@ -2,6 +2,7 @@ import QuickReactions from "./QuickReactions.vue";
 import * as linkify from 'linkifyjs';
 import linkifyHtml from 'linkify-html';
 import utils from "../../plugins/utils"
+import Vue from "vue";
 
 linkify.options.defaults.className = "link";
 linkify.options.defaults.target = { url: "_blank" };
@@ -58,7 +59,26 @@ export default {
       }
     }
   },
+  beforeUnmount() {
+    if (this.validEvent) {
+      this.event.off("Event.relationsCreated", this.onRelationsCreated);
+    }
+  },
   watch: {
+    event: {
+      immediate: true,
+      handler(newValue, oldValue) {
+        if (oldValue && oldValue.getId) {
+          oldValue.off("Event.relationsCreated", this.onRelationsCreated);   
+        }
+        if (newValue && newValue.getId) {
+          newValue.on("Event.relationsCreated", this.onRelationsCreated);  
+          if (newValue.isThreadRoot) {
+            Vue.set(newValue, "isThread", true);
+          }
+        } 
+      }
+    },
     originalEvent: {
       immediate: true,
       handler(originalEvent, ignoredOldValue) {
@@ -70,7 +90,7 @@ export default {
           });
         }
       },
-    },
+    }
   },
   computed: {
     /**
@@ -164,6 +184,11 @@ export default {
     },
   },
   methods: {
+    onRelationsCreated(relationType, ignoredEventType) {
+      if (relationType === "m.thread") {
+        Vue.set(this.event, "isThread", true);
+      }
+    },
     ownAvatarClicked() {
       this.$emit("own-avatar-clicked", { event: this.event });
     },

src/services/matrix.service.js

@@ -526,6 +526,31 @@ export default {
           });
         },
 
+        /**
+         * Leave the room, and if this is the last room we are in, navigate to the "goodbye" page.
+         * Otherwise, navigate to home.
+         * @param roomId 
+         */
+        leaveRoomAndNavigate(roomId) {
+          const joinedRooms = this.joinedRooms;
+          const isLastRoomWeAreJoinedTo = (
+            joinedRooms &&
+            joinedRooms.length == 1 &&
+            joinedRooms[0].roomId == roomId
+          );
+          return this.leaveRoom(roomId)
+            .then(() => {
+              if (isLastRoomWeAreJoinedTo) {
+                this.$navigation.push({ name: "Goodbye" }, -1);
+              } else {
+                this.$navigation.push(
+                  { name: "Home", params: { roomId: null } },
+                  -1
+                );
+              }
+            })
+        },
+
         kickUser(roomId, userId) {
           if (this.matrixClient && roomId && userId) {
             this.matrixClient.kick(roomId, userId, "");