Style messages sent by admin differently

src/components/messages/MessageIncomingAudio.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="messageIn">
+  <div :class="messageClasses">
     <v-avatar class="avatar" size="32" color="#ededed">
       <img v-if="messageEventAvatar(event)" :src="messageEventAvatar(event)" />
       <span v-else class="white--text headline">{{

src/components/messages/MessageIncomingImage.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="messageIn">
+  <div :class="messageClasses">
     <v-avatar class="avatar" size="32" color="#ededed">
       <img v-if="messageEventAvatar(event)" :src="messageEventAvatar(event)" />
       <span v-else class="white--text headline">{{

src/components/messages/MessageIncomingText.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="messageIn">
+  <div :class="messageClasses">
     <v-avatar class="avatar" size="32" color="#ededed">
       <img v-if="messageEventAvatar(event)" :src="messageEventAvatar(event)" />
       <span v-else class="white--text headline">{{

src/components/messages/messageMixin.js

@@ -111,6 +111,14 @@ export default {
         return lines.join('\n');
       }
       return this.event.getContent().body;
+    },
+
+    /**
+     * Classes to set for the message. Currently only for "messageIn", TODO: - detect messageIn or messageOut.
+     */
+  
+    messageClasses() {
+      return {'messageIn':true,'from-admin':this.senderIsAdminOrModerator(this.event)}
     }
   },
   methods: {
@@ -154,6 +162,19 @@ export default {
       return null;
     },
 
+    /**
+     * Return true if the event sender has a powel level > 0, e.g. is moderator or admin of some sort.
+     */
+    senderIsAdminOrModerator(event) {
+      if (this.room) {
+        const member = this.room.getMember(event.getSender());
+        if (member) {
+          return member.powerLevel > 0;
+        }
+      }
+      return false;
+    },
+
     formatTime(time) {
       const date = new Date();
       date.setTime(time);