Resolve "No history message for new room members"

src/components/Chat.vue

@@ -42,7 +42,7 @@
 
       <CreatedRoomWelcomeHeader v-if="showCreatedRoomWelcomeHeader" v-on:close="closeCreateRoomWelcomeHeader" />
 
-      <div v-for="(event, index) in events" :key="event.getId()" :eventId="event.getId()">
+      <div v-for="(event, index) in filteredEvents" :key="event.getId()" :eventId="event.getId()">
         <!-- DAY Marker, shown for every new day in the timeline -->
         <div v-if="showDayMarkerBeforeEvent(event) && !!componentForEvent(event, isForExport = false)" class="day-marker" :title="dayForEvent(event)" />
 
@@ -69,6 +69,8 @@
           </div>
         </div>
       </div>
+
+      <NoHistoryRoomWelcomeHeader v-if="showNoHistoryRoomWelcomeHeader" />
     </div>
 
     <!-- Input area -->
@@ -268,6 +270,7 @@ import ChatHeader from "./ChatHeader";
 import VoiceRecorder from "./VoiceRecorder";
 import RoomInfoBottomSheet from "./RoomInfoBottomSheet";
 import CreatedRoomWelcomeHeader from "./CreatedRoomWelcomeHeader";
+import NoHistoryRoomWelcomeHeader from "./NoHistoryRoomWelcomeHeader.vue";
 import MessageOperationsBottomSheet from "./MessageOperationsBottomSheet";
 import StickerPickerBottomSheet from "./StickerPickerBottomSheet";
 import BottomSheet from "./BottomSheet.vue";
@@ -317,6 +320,7 @@ export default {
     VoiceRecorder,
     RoomInfoBottomSheet,
     CreatedRoomWelcomeHeader,
+    NoHistoryRoomWelcomeHeader,
     MessageOperationsBottomSheet,
     StickerPickerBottomSheet,
     BottomSheet,
@@ -529,6 +533,34 @@ export default {
         return util.useVoiceMode(this.room);
       },
     },
+    /**
+     * If we have no events and the room is encrypted, show info about this
+     * to the user.
+     */
+    showNoHistoryRoomWelcomeHeader() {
+      return this.filteredEvents.length == 0 && this.room && this.$matrix.matrixClient.isRoomEncrypted(this.room.roomId);
+    },
+
+    filteredEvents() {
+      if (this.room && this.$matrix.matrixClient.isRoomEncrypted(this.room.roomId)) {
+        if (this.room.getHistoryVisibility() == "joined") {
+          // For encrypted rooms where history is set to "joined" we can't read old events.
+          // We might, however, have old status events from room creation etc.
+          // We filter out anything that happened before our own join event.
+          for (let idx = this.events.length - 1; idx >= 0; idx--) {
+            const e = this.events[idx];
+            if (e.getType() == "m.room.member" &&
+              e.getContent().membership == "join" &&
+              (!e.getPrevContent() || e.getPrevContent().membership != "join") &&
+              e.getStateKey() == this.$matrix.currentUserId) {
+              // Our own join event.
+              return this.events.slice(idx + 1);
+            }
+          }
+        }
+      }
+      return this.events;
+    }
   },
 
   watch: {

src/components/NoHistoryRoomWelcomeHeader.vue

@@ -0,0 +1,19 @@
+<template>
+  <div class="text-center">
+    <v-icon size="27" class="shield">$vuetify.icons.ic_security-shield</v-icon>
+    <div>{{ $t("room_welcome.no_past_messages") }}</div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "NoHistoryRoomWelcomeHeader",
+};
+</script>
+
+<style lang="scss">
+@import "@/assets/css/chat.scss";
+.shield {
+  margin-bottom: 12px;  
+}
+</style>