Use base classes for message types

This avoids unnecessary duplication of code for "avatar", "sender" etc in the general layout of messages.

src/components/messages/MessageOutgoingVideo.vue

@@ -1,11 +1,5 @@
 <template>
-  <div class="messageOut">
-    <div class="op-button" ref="opbutton">
-      <v-btn icon @click.stop="showContextMenu($refs.opbutton)"
-        ><v-icon>more_vert</v-icon></v-btn
-      >
-    </div>
-    <QuickReactions :event="event" :reactions="reactions" />
+  <message-outgoing v-bind="{ ...$props, ...$attrs }">
     <div class="bubble image-bubble">
       <v-responsive :aspect-ratio="16 / 9" class="ma-0 pa-0">
         <video :src="src" controls style="width: 100%; height: 100%">
@@ -13,31 +7,17 @@
         </video>
       </v-responsive>
     </div>
-    <v-avatar
-      class="avatar"
-      size="32"
-      color="#ededed"
-      @click.stop="ownAvatarClicked"
-    >
-      <img v-if="userAvatar" :src="userAvatar" />
-      <span v-else class="white--text headline">{{ userAvatarLetter }}</span>
-    </v-avatar>
-    <div class="senderAndTime">
-      <!-- <div class="sender">{{ "You" }}</div> -->
-      <div class="time">
-        {{ formatTime(event.event.origin_server_ts) }}
-      </div>
-      <div class="status">{{ event.status }}</div>
-    </div>
-  </div>
+  </message-outgoing>
 </template>
 
 <script>
-import messageMixin from "./messageMixin";
 import attachmentMixin from "./attachmentMixin";
+import MessageOutgoing from "./MessageOutgoing.vue";
 
 export default {
-  mixins: [messageMixin, attachmentMixin],
+  extends: MessageOutgoing,
+  components: { MessageOutgoing },
+  mixins: [attachmentMixin],
 };
 </script>