Add timed message retention feature

src/components/RoomInfo.vue

@@ -159,6 +159,14 @@
         v-model="readOnlyRoom"
       ></v-switch>
       </v-card-text>
+      <v-card-text class="with-right-label" style="align-items:center" v-if="canViewRetentionPolicy">
+        <div>
+          <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> 
+        <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>
 
     <v-card class="members ma-3" flat>
@@ -261,6 +269,12 @@
       @close="showPurgeConfirmation = false"
     />
 
+    <MessageRetentionDialog
+      :show="showMessageRetentionDialog"
+      :room="room"
+      @close="showMessageRetentionDialog = false"
+    />
+
     <RoomExport :room="room" v-if="exporting" v-on:close="exporting = false" />
   </div>
 </template>
@@ -268,6 +282,7 @@
 <script>
 import LeaveRoomDialog from "../components/LeaveRoomDialog";
 import PurgeRoomDialog from "../components/PurgeRoomDialog";
+import MessageRetentionDialog from "../components/MessageRetentionDialog";
 import DeviceList from "../components/DeviceList";
 import RoomExport from "../components/RoomExport";
 import RoomAvatarPicker from "../components/RoomAvatarPicker";
@@ -283,6 +298,7 @@ export default {
   components: {
     LeaveRoomDialog,
     PurgeRoomDialog,
+    MessageRetentionDialog,
     DeviceList,
     RoomExport,
     RoomAvatarPicker,
@@ -296,6 +312,8 @@ export default {
       showAllMembers: false,
       showLeaveConfirmation: false,
       showPurgeConfirmation: false,
+      showMessageRetentionDialog: false,
+      messageRetention: "",
       buildVersion: "",
       updatingJoinRule: false, // Flag if we are processing update curerntly
       joinRules: [
@@ -311,12 +329,13 @@ export default {
         },
       ],
       SHOW_MEMBER_LIMIT: 5,
-      exporting: false,
-   };
+      exporting: false
+    };
   },
   mounted() {
     this.$matrix.on("Room.timeline", this.onEvent);
     this.updateMembers();
+    this.updateMessageRetention();
     this.user = this.$matrix.matrixClient.getUser(this.$matrix.currentUserId);
 
     // Display build version
@@ -395,6 +414,7 @@ export default {
       handler() {
         console.log("RoomInfo: Current room changed");
         this.updateMembers();
+        this.updateMessageRetention();
       },
     },
   },
@@ -404,11 +424,17 @@ export default {
       if (this.room && this.room.roomId == event.getRoomId()) {
         // For this room
         if (event.getType() == "m.room.member") {
-        this.updateMembers();
-      }
+          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;