From 601e0d4a6c92a9b07e4c6ffa88506716bd59bf81 Mon Sep 17 00:00:00 2001
From: N-Pex <npexdev@gmail.com>
Date: Fri, 7 May 2021 09:15:15 +0200
Subject: [PATCH] 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/MessageIncoming.vue   | 37 +++++++++++++++++
 .../messages/MessageIncomingAudio.vue         | 28 +++----------
 .../messages/MessageIncomingFile.vue          | 28 +++----------
 .../messages/MessageIncomingImage.vue         | 29 +++-----------
 .../messages/MessageIncomingSticker.vue       | 27 +++----------
 .../messages/MessageIncomingText.vue          | 25 +++---------
 .../messages/MessageIncomingVideo.vue         | 28 +++----------
 src/components/messages/MessageOutgoing.vue   | 40 +++++++++++++++++++
 .../messages/MessageOutgoingAudio.vue         | 32 +++------------
 .../messages/MessageOutgoingFile.vue          | 31 +++-----------
 .../messages/MessageOutgoingImage.vue         | 31 +++-----------
 .../messages/MessageOutgoingSticker.vue       | 31 +++-----------
 .../messages/MessageOutgoingText.vue          | 31 +++-----------
 .../messages/MessageOutgoingVideo.vue         | 32 +++------------
 14 files changed, 142 insertions(+), 288 deletions(-)
 create mode 100644 src/components/messages/MessageIncoming.vue
 create mode 100644 src/components/messages/MessageOutgoing.vue

diff --git a/src/components/messages/MessageIncoming.vue b/src/components/messages/MessageIncoming.vue
new file mode 100644
index 0000000..55a3c4b
--- /dev/null
+++ b/src/components/messages/MessageIncoming.vue
@@ -0,0 +1,37 @@
+<template>
+  <!-- BASE CLASS FOR INCOMING MESSAGE -->
+  <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">{{
+        messageEventDisplayName(event).substring(0, 1).toUpperCase()
+      }}</span>
+    </v-avatar>
+    <QuickReactions :event="event" :reactions="reactions" />
+    <!-- SLOT FOR CONTENT -->
+    <slot></slot>
+    <div class="op-button" ref="opbutton">
+      <v-btn icon @click.stop="showContextMenu($refs.opbutton)"
+        ><v-icon>more_vert</v-icon></v-btn
+      >
+    </div>
+    <div v-if="showSenderAndTime" class="senderAndTime">
+      <div class="sender">{{ messageEventDisplayName(event) }}</div>
+      <div class="time">
+        {{ formatTime(event.event.origin_server_ts) }}
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import messageMixin from "./messageMixin";
+
+export default {
+  mixins: [messageMixin],
+};
+</script>
+
+<style lang="scss">
+@import "@/assets/css/chat.scss";
+</style>
\ No newline at end of file
diff --git a/src/components/messages/MessageIncomingAudio.vue b/src/components/messages/MessageIncomingAudio.vue
index 391316c..1c0106b 100644
--- a/src/components/messages/MessageIncomingAudio.vue
+++ b/src/components/messages/MessageIncomingAudio.vue
@@ -1,35 +1,19 @@
 <template>
-  <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">{{
-        messageEventDisplayName(event).substring(0, 1).toUpperCase()
-      }}</span>
-    </v-avatar>
-    <QuickReactions :event="event" :reactions="reactions" />
+  <message-incoming v-bind="{...$props, ...$attrs}">
     <div class="audio-bubble">
       <audio controls :src="src">Audio file</audio>
     </div>
-    <div class="op-button" ref="opbutton">
-      <v-btn icon @click.stop="showContextMenu($refs.opbutton)"
-        ><v-icon>more_vert</v-icon></v-btn
-      >
-    </div>
-    <div v-if="showSenderAndTime" class="senderAndTime">
-      <div class="sender">{{ messageEventDisplayName(event) }}</div>
-      <div class="time">
-        {{ formatTime(event.event.origin_server_ts) }}
-      </div>
-    </div>
-  </div>
+  </message-incoming>
 </template>
 
 <script>
-import messageMixin from "./messageMixin";
 import attachmentMixin from "./attachmentMixin";
+import MessageIncoming from './MessageIncoming.vue';
 
 export default {
-  mixins: [messageMixin, attachmentMixin],
+  extends: MessageIncoming,
+  mixins: [attachmentMixin],
+  components: { MessageIncoming }
 };
 </script>
 
diff --git a/src/components/messages/MessageIncomingFile.vue b/src/components/messages/MessageIncomingFile.vue
index 240bbd8..7235d12 100644
--- a/src/components/messages/MessageIncomingFile.vue
+++ b/src/components/messages/MessageIncomingFile.vue
@@ -1,12 +1,5 @@
 <template>
-  <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">{{
-        messageEventDisplayName(event).substring(0, 1).toUpperCase()
-      }}</span>
-    </v-avatar>
-    <QuickReactions :event="event" :reactions="reactions" />
+  <message-incoming v-bind="{...$props, ...$attrs}">
     <div class="bubble">
       <div class="original-message" v-if="inReplyToText">
         <div class="original-message-sender">
@@ -28,27 +21,16 @@
           >(edited)</span
         >
       </div>
-      <!-- <div>{{ JSON.stringify(event) }}</div> -->
     </div>
-    <div class="op-button" ref="opbutton">
-      <v-btn icon @click.stop="showContextMenu($refs.opbutton)"
-        ><v-icon>more_vert</v-icon></v-btn
-      >
-    </div>
-    <div v-if="showSenderAndTime" class="senderAndTime">
-      <div class="sender">{{ messageEventDisplayName(event) }}</div>
-      <div class="time">
-        {{ formatTime(event.event.origin_server_ts) }}
-      </div>
-    </div>
-  </div>
+  </message-incoming>
 </template>
 
 <script>
-import messageMixin from "./messageMixin";
+import MessageIncoming from "./MessageIncoming.vue";
 
 export default {
-  mixins: [messageMixin],
+  extends: MessageIncoming,
+  components: { MessageIncoming }
 };
 </script>
 
diff --git a/src/components/messages/MessageIncomingImage.vue b/src/components/messages/MessageIncomingImage.vue
index b393570..b869840 100644
--- a/src/components/messages/MessageIncomingImage.vue
+++ b/src/components/messages/MessageIncomingImage.vue
@@ -1,13 +1,6 @@
 <template>
-  <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">{{
-        messageEventDisplayName(event).substring(0, 1).toUpperCase()
-      }}</span>
-    </v-avatar>
-    <QuickReactions :event="event" :reactions="reactions" />
-    <div class="bubble image-bubble">
+<message-incoming v-bind="{...$props, ...$attrs}">
+      <div class="bubble image-bubble">
       <v-img
         :aspect-ratio="16 / 9"
         ref="image"
@@ -16,26 +9,16 @@
         :contain="contain"
       />
     </div>
-    <div class="op-button" ref="opbutton">
-      <v-btn icon @click.stop="showContextMenu($refs.opbutton)"
-        ><v-icon>more_vert</v-icon></v-btn
-      >
-    </div>
-    <div v-if="showSenderAndTime" class="senderAndTime">
-      <div class="sender">{{ messageEventDisplayName(event) }}</div>
-      <div class="time">
-        {{ formatTime(event.event.origin_server_ts) }}
-      </div>
-    </div>
-  </div>
+</message-incoming>  
 </template>
 
 <script>
-import messageMixin from "./messageMixin";
 import util from "../../plugins/utils";
+import MessageIncoming from './MessageIncoming.vue';
 
 export default {
-  mixins: [messageMixin],
+  extends: MessageIncoming,
+  components: { MessageIncoming },
   data() {
     return {
       src: null,
diff --git a/src/components/messages/MessageIncomingSticker.vue b/src/components/messages/MessageIncomingSticker.vue
index 191e3e3..0a3a020 100644
--- a/src/components/messages/MessageIncomingSticker.vue
+++ b/src/components/messages/MessageIncomingSticker.vue
@@ -1,12 +1,5 @@
 <template>
-  <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">{{
-        messageEventDisplayName(event).substring(0, 1).toUpperCase()
-      }}</span>
-    </v-avatar>
-    <QuickReactions :event="event" :reactions="reactions" />
+  <message-incoming v-bind="{ ...$props, ...$attrs }">
     <div class="bubble sticker-bubble">
       <v-img
         :aspect-ratio="16 / 9"
@@ -16,26 +9,16 @@
         :contain="contain"
       />
     </div>
-    <div class="op-button" ref="opbutton">
-      <v-btn icon @click.stop="showContextMenu($refs.opbutton)"
-        ><v-icon>more_vert</v-icon></v-btn
-      >
-    </div>
-    <div v-if="showSenderAndTime" class="senderAndTime">
-      <div class="sender">{{ messageEventDisplayName(event) }}</div>
-      <div class="time">
-        {{ formatTime(event.event.origin_server_ts) }}
-      </div>
-    </div>
-  </div>
+  </message-incoming>
 </template>
 
 <script>
-import messageMixin from "./messageMixin";
 import stickers from "../../plugins/stickers";
+import MessageIncoming from "./MessageIncoming.vue";
 
 export default {
-  mixins: [messageMixin],
+  extends: MessageIncoming,
+  components: { MessageIncoming },
   data() {
     return {
       src: null,
diff --git a/src/components/messages/MessageIncomingText.vue b/src/components/messages/MessageIncomingText.vue
index 5bc0d30..4c87a5c 100644
--- a/src/components/messages/MessageIncomingText.vue
+++ b/src/components/messages/MessageIncomingText.vue
@@ -1,12 +1,5 @@
 <template>
-  <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">{{
-        messageEventDisplayName(event).substring(0, 1).toUpperCase()
-      }}</span>
-    </v-avatar>
-    <QuickReactions :event="event" :reactions="reactions" />
+  <message-incoming v-bind="{...$props, ...$attrs}">
     <div class="bubble">
       <div class="original-message" v-if="inReplyToText">
         <div class="original-message-sender">
@@ -25,24 +18,16 @@
       </div>
       <!-- <div>{{ JSON.stringify(event) }}</div> -->
     </div>
-    <div class="op-button" ref="opbutton">
-      <v-btn icon @click.stop="showContextMenu($refs.opbutton)"
-        ><v-icon>more_vert</v-icon></v-btn
-      >
-    </div>
-    <div v-if="showSenderAndTime" class="senderAndTime">
-      <div class="sender">{{ messageEventDisplayName(event) }}</div>
-      <div class="time">
-        {{ formatTime(event.event.origin_server_ts) }}
-      </div>
-    </div>
-  </div>
+  </message-incoming>
 </template>
 
 <script>
+import MessageIncoming from "./MessageIncoming.vue";
 import messageMixin from "./messageMixin";
 
 export default {
+  extends: MessageIncoming,
+  components: { MessageIncoming },
   mixins: [messageMixin],
 };
 </script>
diff --git a/src/components/messages/MessageIncomingVideo.vue b/src/components/messages/MessageIncomingVideo.vue
index fe944cc..ca784d1 100644
--- a/src/components/messages/MessageIncomingVideo.vue
+++ b/src/components/messages/MessageIncomingVideo.vue
@@ -1,12 +1,5 @@
 <template>
-  <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">{{
-        messageEventDisplayName(event).substring(0, 1).toUpperCase()
-      }}</span>
-    </v-avatar>
-    <QuickReactions :event="event" :reactions="reactions" />
+  <message-incoming v-bind="{ ...$props, ...$attrs }">
     <div class="bubble image-bubble">
       <v-responsive :aspect-ratio="16 / 9" :src="src">
         <video :src="src" controls style="width: 100%; height: 100%">
@@ -19,26 +12,17 @@
         </div>
       </v-responsive>
     </div>
-    <div class="op-button" ref="opbutton">
-      <v-btn icon @click.stop="showContextMenu($refs.opbutton)"
-        ><v-icon>more_vert</v-icon></v-btn
-      >
-    </div>
-    <div v-if="showSenderAndTime" class="senderAndTime">
-      <div class="sender">{{ messageEventDisplayName(event) }}</div>
-      <div class="time">
-        {{ formatTime(event.event.origin_server_ts) }}
-      </div>
-    </div>
-  </div>
+  </message-incoming>
 </template>
 
 <script>
-import messageMixin from "./messageMixin";
 import attachmentMixin from "./attachmentMixin";
+import MessageIncoming from "./MessageIncoming.vue";
 
 export default {
-  mixins: [messageMixin, attachmentMixin],
+  extends: MessageIncoming,
+  components: { MessageIncoming },
+  mixins: [attachmentMixin],
 };
 </script>
 
diff --git a/src/components/messages/MessageOutgoing.vue b/src/components/messages/MessageOutgoing.vue
new file mode 100644
index 0000000..197588d
--- /dev/null
+++ b/src/components/messages/MessageOutgoing.vue
@@ -0,0 +1,40 @@
+<template>
+  <!-- BASE CLASS FOR OUTGOING MESSAGE -->
+  <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" />
+    <!-- SLOT FOR CONTENT -->
+    <slot></slot>
+    <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="sender">{{ "You" }}</div> -->
+    <div class="senderAndTime">
+      <div class="time">
+        {{ formatTime(event.event.origin_server_ts) }}
+      </div>
+      <div class="status">{{ event.status }}</div>
+    </div>
+  </div>
+</template>
+
+<script>
+import messageMixin from "./messageMixin";
+
+export default {
+  mixins: [messageMixin],
+};
+</script>
+<style lang="scss">
+@import "@/assets/css/chat.scss";
+</style>
\ No newline at end of file
diff --git a/src/components/messages/MessageOutgoingAudio.vue b/src/components/messages/MessageOutgoingAudio.vue
index a923214..87969e4 100644
--- a/src/components/messages/MessageOutgoingAudio.vue
+++ b/src/components/messages/MessageOutgoingAudio.vue
@@ -1,39 +1,19 @@
 <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="audio-bubble">
       <audio controls :src="src">Audio file</audio>
     </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>
 
diff --git a/src/components/messages/MessageOutgoingFile.vue b/src/components/messages/MessageOutgoingFile.vue
index 83f5ddf..cfa8a45 100644
--- a/src/components/messages/MessageOutgoingFile.vue
+++ b/src/components/messages/MessageOutgoingFile.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">
       <div class="original-message" v-if="inReplyToText">
         <div class="original-message-sender">
@@ -29,30 +23,15 @@
         >
       </div>
     </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="sender">{{ "You" }}</div> -->
-    <div class="senderAndTime">
-      <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 MessageOutgoing from "./MessageOutgoing.vue";
 
 export default {
-  mixins: [messageMixin],
+  extends: MessageOutgoing,
+  components: { MessageOutgoing },
 };
 </script>
 <style lang="scss">
diff --git a/src/components/messages/MessageOutgoingImage.vue b/src/components/messages/MessageOutgoingImage.vue
index f3d3146..8045739 100644
--- a/src/components/messages/MessageOutgoingImage.vue
+++ b/src/components/messages/MessageOutgoingImage.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-img
         :aspect-ratio="16 / 9"
@@ -15,31 +9,16 @@
         :contain="contain"
       />
     </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 class="status">{{ event.status }}</div>
-      </div>
-    </div>
-  </div>
+  </message-outgoing>
 </template>
 
 <script>
-import messageMixin from "./messageMixin";
 import util from "../../plugins/utils";
+import MessageOutgoing from "./MessageOutgoing.vue";
 
 export default {
-  mixins: [messageMixin],
+  extends: MessageOutgoing,
+  components: { MessageOutgoing },
   data() {
     return {
       src: null,
diff --git a/src/components/messages/MessageOutgoingSticker.vue b/src/components/messages/MessageOutgoingSticker.vue
index 03bcce2..5aa7417 100644
--- a/src/components/messages/MessageOutgoingSticker.vue
+++ b/src/components/messages/MessageOutgoingSticker.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 sticker-bubble">
       <v-img
         :aspect-ratio="16 / 9"
@@ -15,31 +9,16 @@
         :contain="contain"
       />
     </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 class="status">{{ event.status }}</div>
-      </div>
-    </div>
-  </div>
+  </message-outgoing>
 </template>
 
 <script>
-import messageMixin from "./messageMixin";
 import stickers from "../../plugins/stickers";
+import MessageOutgoing from "./MessageOutgoing.vue";
 
 export default {
-  mixins: [messageMixin],
+  extends: MessageOutgoing,
+  components: { MessageOutgoing },
   data() {
     return {
       src: null,
diff --git a/src/components/messages/MessageOutgoingText.vue b/src/components/messages/MessageOutgoingText.vue
index edc1a92..f051a2b 100644
--- a/src/components/messages/MessageOutgoingText.vue
+++ b/src/components/messages/MessageOutgoingText.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">
       <div class="original-message" v-if="inReplyToText">
         <div class="original-message-sender">
@@ -24,30 +18,15 @@
         >
       </div>
     </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="sender">{{ "You" }}</div> -->
-    <div class="senderAndTime">
-      <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 MessageOutgoing from "./MessageOutgoing.vue";
 
 export default {
-  mixins: [messageMixin],
+  extends: MessageOutgoing,
+  components: { MessageOutgoing },
 };
 </script>
 <style lang="scss">
diff --git a/src/components/messages/MessageOutgoingVideo.vue b/src/components/messages/MessageOutgoingVideo.vue
index 76e8793..8dd25af 100644
--- a/src/components/messages/MessageOutgoingVideo.vue
+++ b/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>