Unify room welcome header handling

Also, add the "WelcomeHeaderChannel" component

src/components/Chat.vue

@@ -49,8 +49,7 @@
       <!-- Handle resizes, e.g. when soft keyboard is shown/hidden -->
       <resize-observer ref="chatContainerResizer" @notify="handleChatContainerResize" />
 
-      <CreatedRoomWelcomeHeader v-if="showCreatedRoomWelcomeHeader" v-on:close="closeCreateRoomWelcomeHeader" />
-      <DirectChatWelcomeHeader v-if="showDirectChatWelcomeHeader" v-on:close="closeDirectChatWelcomeHeader" />
+      <component :is="roomWelcomeHeader" v-on:close="closeRoomWelcomeHeader"></component>
 
       <div v-for="(event, index) in filteredEvents" :key="event.getId()" :eventId="event.getId()">
         <!-- DAY Marker, shown for every new day in the timeline -->
@@ -328,14 +327,15 @@
 <script>
 import Vue from "vue";
 import { TimelineWindow, EventTimeline } from "matrix-js-sdk";
-import util, { ROOM_TYPE_VOICE_MODE, ROOM_TYPE_FILE_MODE } from "../plugins/utils";
+import util, { ROOM_TYPE_VOICE_MODE, ROOM_TYPE_FILE_MODE, ROOM_TYPE_CHANNEL } from "../plugins/utils";
 import MessageOperations from "./messages/MessageOperations.vue";
 import ChatHeader from "./ChatHeader";
 import ChatHeaderPrivate from "./ChatHeaderPrivate.vue";
 import VoiceRecorder from "./VoiceRecorder";
 import RoomInfoBottomSheet from "./RoomInfoBottomSheet";
-import CreatedRoomWelcomeHeader from "./CreatedRoomWelcomeHeader";
-import DirectChatWelcomeHeader from "./DirectChatWelcomeHeader";
+import WelcomeHeaderRoom from "./welcome_headers/WelcomeHeaderRoom";
+import WelcomeHeaderDirectChat from "./welcome_headers/WelcomeHeaderDirectChat";
+import WelcomeHeaderChannel from "./welcome_headers/WelcomeHeaderChannel";
 import NoHistoryRoomWelcomeHeader from "./NoHistoryRoomWelcomeHeader.vue";
 import MessageOperationsBottomSheet from "./MessageOperationsBottomSheet";
 import StickerPickerBottomSheet from "./StickerPickerBottomSheet";
@@ -391,8 +391,8 @@ export default {
     MessageOperations,
     VoiceRecorder,
     RoomInfoBottomSheet,
-    CreatedRoomWelcomeHeader,
-    DirectChatWelcomeHeader,
+    WelcomeHeaderRoom,
+    WelcomeHeaderDirectChat,
     NoHistoryRoomWelcomeHeader,
     MessageOperationsBottomSheet,
     StickerPickerBottomSheet,
@@ -455,10 +455,7 @@ export default {
       lastRR: null,
 
       /** If we just created this room, show a small welcome header with info */
-      hideCreatedRoomWelcomeHeader: false,
-
-      /** For direct chats, show a small welcome header with info about the other party */
-      hideDirectChatWelcomeHeader: false,
+      hideRoomWelcomeHeader: false,
 
       /** An array of recent emojis. Used in the "message operations" popup. */
       recentEmojis: [],
@@ -688,14 +685,21 @@ export default {
       return this.room && this.room.getJoinRule() == "public";
     },
 
-    showCreatedRoomWelcomeHeader() {
-      return !this.hideCreatedRoomWelcomeHeader && this.roomCreatedByUsRecently && !this.isDirectRoom;
+    showRoomWelcomeHeader() {
+      return this.roomWelcomeHeader != null;
     },
-
-    showDirectChatWelcomeHeader() {
-      return !this.hideDirectChatWelcomeHeader && this.roomCreatedByUsRecently && this.isDirectRoom;
+    roomWelcomeHeader() {
+      if (!this.hideRoomWelcomeHeader && this.roomCreatedByUsRecently) {
+        if (this.roomDisplayType == ROOM_TYPE_CHANNEL) {
+          return WelcomeHeaderChannel;
+        }
+        if (this.isDirectRoom) {
+          return WelcomeHeaderDirectChat;
+        }
+        return WelcomeHeaderRoom;
+      }
+      return null;
     },
-
     chatContainerStyle() {
       if (this.$config.chat_backgrounds && this.room && this.roomId) {
         const roomType =  this.isDirectRoom ? "direct" : this.isPublicRoom ? "public" : "invite";
@@ -788,8 +792,7 @@ export default {
         this.timelineWindow = null;
         this.typingMembers = [];
         this.initialLoadDone = false;
-        this.hideDirectChatWelcomeHeader = false;
-        this.hideCreatedRoomWelcomeHeader = false;
+        this.hideRoomWelcomeHeader = false;
 
         // Stop RR timer
         this.stopRRTimer();
@@ -961,7 +964,7 @@ export default {
 //                     unknownRelations.forEach((event) => this.room.relations.aggregateChildEvent(event));
 
               this.setInitialLoadDone();
-                if (initialEventId && !this.showCreatedRoomWelcomeHeader) {
+                if (initialEventId && !this.showRoomWelcomeHeader) {
                   const event = this.room.findEventById(initialEventId);
                   this.$nextTick(() => {
                     if (event && event.parentThread) {
@@ -970,7 +973,7 @@ export default {
                     self.scrollToEvent(initialEventId);
                   }
                   });
-              } else if (this.showCreatedRoomWelcomeHeader || this.showDirectChatWelcomeHeader) {
+              } else if (this.showRoomWelcomeHeader) {
                 self.onScroll();
               }
               self.restartRRTimer();
@@ -1806,18 +1809,8 @@ export default {
       this.$analytics.event("Audio", "Voice message sent");
     },
 
-    closeCreateRoomWelcomeHeader() {
-      this.hideCreatedRoomWelcomeHeader = true;
-      this.$nextTick(() => {
-        // We change the layout when removing the welcome header, so call
-        // onScroll here to handle updates (e.g. remove the "scroll to last" if we now
-        // can see all messages).
-        this.onScroll();
-      });
-    },
-
-    closeDirectChatWelcomeHeader() {
-      this.hideDirectChatWelcomeHeader = true;
+    closeRoomWelcomeHeader() {
+      this.hideRoomWelcomeHeader = true;
       this.$nextTick(() => {
         // We change the layout when removing the welcome header, so call
         // onScroll here to handle updates (e.g. remove the "scroll to last" if we now

src/components/RoomExport.vue

@@ -87,7 +87,7 @@ import MessageOperations from "./messages/MessageOperations.vue";
 import ChatHeader from "./ChatHeader.vue";
 import VoiceRecorder from "./VoiceRecorder.vue";
 import RoomInfoBottomSheet from "./RoomInfoBottomSheet.vue";
-import CreatedRoomWelcomeHeader from "./CreatedRoomWelcomeHeader.vue";
+import WelcomeHeaderRoom from "./welcome_headers/WelcomeHeaderRoom.vue";
 import MessageOperationsBottomSheet from "./MessageOperationsBottomSheet.vue";
 import StickerPickerBottomSheet from "./StickerPickerBottomSheet.vue";
 import BottomSheet from "./BottomSheet.vue";
@@ -136,7 +136,7 @@ export default {
     MessageOperations,
     VoiceRecorder,
     RoomInfoBottomSheet,
-    CreatedRoomWelcomeHeader,
+    WelcomeHeaderRoom,
     MessageOperationsBottomSheet,
     StickerPickerBottomSheet,
     BottomSheet,

src/components/RoomInfo.vue

@@ -152,7 +152,7 @@
               />
             </v-list-item-avatar>
             <v-list-item-content class="pb-0">
-              {{ messageRetention }}
+              {{ messageRetentionDisplay }}
             </v-list-item-content>
 
             <v-list-item-action class="pb-0 mb-0">
@@ -194,7 +194,7 @@
           <div class="option-title">{{ $t('room_info.message_retention') }}</div>
           <div class="option-text">{{ $t('room_info.message_retention_info') }}</div>
         </div>
-        <div class="text-right">{{ messageRetention }}</div>
+        <div class="text-right">{{ messageRetentionDisplay }}</div>
         <v-btn v-on:click="showMessageRetentionDialog = true" v-if="canChangeRetentionPolicy" icon size="x-small"><v-icon color="black">edit</v-icon></v-btn>
       </v-card-text>
     </v-card>
@@ -336,7 +336,6 @@ export default {
       showLeaveConfirmation: false,
       showPurgeConfirmation: false,
       showMessageRetentionDialog: false,
-      messageRetention: "",
       buildVersion: "",
       updatingJoinRule: false, // Flag if we are processing update curerntly
       joinRules: [
@@ -446,7 +445,7 @@ export default {
   methods: {
     onMessageRetention(retention){
       const retentionPeriodsFound = this.retentionPeriods.find(rp => rp.value===retention)
-      this.messageRetention = retentionPeriodsFound.text
+      this.messageRetentionDisplay = retentionPeriodsFound.text
       },
     onListItemClick(member) {
       this.activeMember = member
@@ -457,16 +456,10 @@ export default {
         // For this room
         if (event.getType() == "m.room.member") {
           this.updateMembers();
-        } else if (event.getType() == "m.room.retention") {
-          this.updateMessageRetention(event);
         }
       }
     },
 
-    updateMessageRetention(event) {
-      this.messageRetention = this.roomMessageRetentionDisplay(event);
-    },
-
     updateMembers() {
       if (this.room) {
         const myUserId = this.$matrix.currentUserId;

src/components/chatMixin.js

@@ -41,7 +41,7 @@ import MessageOperations from "./messages/MessageOperations.vue";
 import ChatHeader from "./ChatHeader";
 import VoiceRecorder from "./VoiceRecorder";
 import RoomInfoBottomSheet from "./RoomInfoBottomSheet";
-import CreatedRoomWelcomeHeader from "./CreatedRoomWelcomeHeader";
+import WelcomeHeaderRoom from "./welcome_headers/WelcomeHeaderRoom.vue";
 import MessageOperationsBottomSheet from "./MessageOperationsBottomSheet";
 import stickers from "../plugins/stickers";
 import StickerPickerBottomSheet from "./StickerPickerBottomSheet";
@@ -95,7 +95,7 @@ export default {
     MessageOperations,
     VoiceRecorder,
     RoomInfoBottomSheet,
-    CreatedRoomWelcomeHeader,
+    WelcomeHeaderRoom,
     MessageOperationsBottomSheet,
     StickerPickerBottomSheet,
     BottomSheet,

src/components/roomInfoMixin.js

@@ -14,6 +14,7 @@ export default {
       editedRoomTopic: "",
       isRoomTopicEditMode: false,
       roomTopicErrorMessage: null,
+      messageRetentionDisplay: "",
       retentionPeriods: [
         {
           text: this.$t("room_info.message_retention_none"),
@@ -49,6 +50,7 @@ export default {
   mounted() {
     this.$matrix.on("Room.timeline", this.roomInfoMixinOnEvent);
     this.updatePermissions();
+    this.updateMessageRetention();
   },
 
   destroyed() {
@@ -253,14 +255,19 @@ export default {
     },
 
     roomInfoMixinOnEvent(event) {
-      if (event.getRoomId() !== this.roomId) {
-        return; // Not for this room
-      }
-      if (event.getType() == "m.room.join_rules" || event.getType() == "m.room.guest_access") {
-        this.updatePermissions();
+      if (this.room && this.room.roomId == event.getRoomId()) {
+        if (event.getType() == "m.room.join_rules" || event.getType() == "m.room.guest_access") {
+          this.updatePermissions();
+        } else if (event.getType() == "m.room.retention") {
+          this.updateMessageRetention(event);
+        }
       }
     },
 
+    updateMessageRetention(event) {
+      this.messageRetentionDisplay = this.roomMessageRetentionDisplay(event);
+    },
+
     privatePartyAvatar(size) {
       const other = this.privateParty;
       if (other) {

src/components/welcome_headers/WelcomeHeaderChannel.vue

@@ -0,0 +1,85 @@
+<template>
+  <div class="created-room-welcome-header">
+    <div class="mt-2" v-if="roomJoinRule == 'public'">
+      <i18n path="room_welcome.join_channel" tag="span">
+        <template v-slot:link>
+          <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>
+    <div class="mt-2" v-else-if="roomJoinRule == 'invite'">
+      {{ $t("room_welcome.join_invite") }}
+    </div>
+    <div class="mt-2" v-if="roomMessageRetention() > 0">
+      <i18n path="room_welcome.info_retention" tag="span">
+        <template v-slot:time>
+          <b>{{ messageRetentionDisplay }}</b>
+        </template>
+      </i18n>
+    </div>
+    <div class="mt-2" v-if="roomMessageRetention() > 0">
+      <a href="#" text @click.prevent="showMessageRetentionDialog = true">
+        {{ $t("room_welcome.change") }}
+      </a>
+    </div>
+    <div class="text-end">
+      <v-btn id="btn-got-it" text @click.stop="$emit('close')" class="text-transform-0">
+        {{ $t("room_welcome.got_it") }}
+      </v-btn>
+    </div>
+
+    <MessageRetentionDialog :show="showMessageRetentionDialog" :room="room" @close="showMessageRetentionDialog = false"
+      v-on:message-retention-update="onMessageRetention" />
+  </div>
+</template>
+
+<script>
+import MessageRetentionDialog from '../MessageRetentionDialog.vue';
+import roomInfoMixin from "../roomInfoMixin";
+
+export default {
+  name: "WelcomeHeaderChannel",
+  mixins: [roomInfoMixin],
+  components: {
+    MessageRetentionDialog
+  },
+  computed: {
+  },
+  data() {
+    return {
+      publicRoomLinkCopied: false,
+      showMessageRetentionDialog: false,
+    }
+  },
+  methods: {
+    onMessageRetention(ignoredretention) {
+      this.updateMessageRetention();
+    },
+    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>
+
+<style lang="scss">
+@import "@/assets/css/chat.scss";
+</style>

src/components/welcome_headers/WelcomeHeaderDirectChat.vue

@@ -7,10 +7,10 @@
 </template>
 
 <script>
-import roomInfoMixin from "./roomInfoMixin";
+import roomInfoMixin from "../roomInfoMixin";
 
 export default {
-  name: "CreatedRoomWelcomeHeader",
+  name: "WelcomeHeaderDirectChat",
   mixins: [roomInfoMixin],
   computed: {
     roomHistoryDescription() {

src/components/welcome_headers/WelcomeHeaderRoom.vue

@@ -38,10 +38,10 @@
 </template>
 
 <script>
-import roomInfoMixin from "./roomInfoMixin";
+import roomInfoMixin from "../roomInfoMixin";
 
 export default {
-  name: "CreatedRoomWelcomeHeader",
+  name: "WelcomeHeaderRoom",
   mixins: [roomInfoMixin],
   computed: {
     roomHistoryDescription() {