Merge branch '591-feedback-on-channels-implementation-29-apr-2024' into 'dev'

Resolve "Feedback on Channels Implementation [29 Apr 2024]"

See merge request keanuapp/keanuapp-weblite!308

README.md

@@ -53,7 +53,7 @@ The app loads runtime configutation from the server at "./config.json" and merge
 * **accentColor**   -   The accent color of the app UI. Use a HTML-style color value string, like "#ff0080".
 * **show_status_messages**  -   Whether to show only user joins/leaves and display name updates, or the full range of room status updates. Possible values are "never" (only the above), "moderators" (moderators will see all status updates) or "always" (everyone will see all status updates). Defaults to "always".
 * **maxSizeAutoDownloads** -    Attachments smaller than this will be auto downloaded. Default is 10Mb.
-
+* **auto_join_rooms** -     Whether to show the normal "join" screen or just auto join the user to the room link. Default to false.
 
 ### Sticker short codes - To enable sticker short codes, follow these steps:
 * Run the "create sticker config" script using "npm run create-sticker-config <path-to-sticker-packs>"

src/assets/translations/en.json

@@ -142,6 +142,7 @@
     "join_channel": "All set! Invite people to join you: {link}",
     "info_retention": "🕓 Messages sent within {time} are viewable by anyone with the link.",
     "info_retention_user": "🕓 Messages older than {time} will be deleted from the history.",
+    "info_auto_join": "Welcome to {room}.\nYou are joining as {you}.",
     "change": "Change"
   },
   "new_room": {

src/components/Chat.vue

@@ -37,7 +37,6 @@
       <div ref="messageOperationsStrut" class="message-operations-strut">
         <message-operations ref="messageOperations" :style="opStyle" :emojis="recentEmojis" v-on:close="
           showContextMenu = false;
-          showContextMenuAnchor = null;
         " v-if="showMessageOperations" v-on:addreaction="addReaction" v-on:addquickreaction="addQuickReaction"
           v-on:addreply="addReply(selectedEvent)" v-on:edit="edit(selectedEvent)" v-on:redact="redact(selectedEvent)"
           v-on:download="download(selectedEvent)" v-on:more="
@@ -862,8 +861,8 @@ export default {
         this.onRoomJoined(this.readMarker);
       }
     },
-    showMessageOperations() {
-      if (this.showMessageOperations) {
+    showMessageOperations(show) {
+      if (show) {
         this.$nextTick(() => {
           // Calculate where to show the context menu.
           //

src/components/Join.vue

@@ -306,7 +306,14 @@ export default {
       return roomName ? roomName : "";
     },
     getRoomInfo() {
-      if (this.roomId.startsWith("#")) {
+      if (this.$config.auto_join_rooms) {
+        // Auto-join room
+        this.waitingForRoomCreation = true;
+        this.$nextTick(() => {
+          this.handleJoin();
+        });
+      }
+      else if (this.roomId.startsWith("#")) {
         this.$matrix
           .getPublicRoomInfo(this.roomId)
           .then((room) => {

src/components/messages/ContactJoin.vue

@@ -1,6 +1,14 @@
 <template>
+  <div v-if="$config.auto_join_rooms && !roomCreatedByYou() && event.getSender() == $matrix.currentUserId" class="created-room-welcome-header" style="white-space: pre-line;">
+    {{ $t('room_welcome.info_auto_join',{room: room ? room.name : "",you: $matrix.currentUserDisplayName}) }}
+    <div class="ma-0">
+      <a href="#" text @click.prevent="viewProfile">
+        {{ $t("room_welcome.change") }}
+      </a>
+    </div>
+  </div>
   <!-- Contact joined the chat -->
-  <div class="messageJoin">
+  <div v-else class="messageJoin">
     {{ $t('message.user_joined',{user: eventSenderDisplayName(event)}) }}
   </div>
 </template>
@@ -10,6 +18,19 @@ import messageMixin from "./messageMixin";
 
 export default {
   mixins: [messageMixin],
+  methods: {
+    viewProfile() {
+      this.$navigation.push({ name: "Profile" }, 1);
+    },
+    roomCreatedByYou() {
+      const createEvent = this.room && this.room.currentState.getStateEvents("m.room.create", "");
+      if (createEvent) {
+        const creatorId = createEvent.getContent().creator;
+        return (creatorId == this.$matrix.currentUserId);
+      }
+      return false;
+    },
+  }
 };
 </script>