Use vite as bundler

src/components/AudioLayout.vue

@@ -8,7 +8,7 @@
     <div class="typing-users">
       <transition-group name="list" tag="div">
         <v-avatar v-for="(member) in recordingMembersExceptMe" :key="member.userId" class="typing-user" size="32" color="grey">
-          <img v-if="memberAvatar(member)" :src="memberAvatar(member)" />
+          <AuthedImage v-if="memberAvatar(member)" :src="memberAvatar(member)" />
           <span v-else class="white--text headline">{{
             member.name.substring(0, 1).toUpperCase()
           }}</span>
@@ -33,7 +33,7 @@
     <div class="typing-users">
       <transition-group name="list" tag="div">
         <v-avatar v-for="reaction in reactions" :key="reaction.member.userId" class="typing-user" size="32" color="grey">
-          <img v-if="memberAvatar(reaction.member)" :src="memberAvatar(reaction.member)" />
+          <AuthedImage v-if="memberAvatar(reaction.member)" :src="memberAvatar(reaction.member)" />
           <span v-else class="white--text headline">{{
             reaction.member.name.substring(0, 1).toUpperCase()
           }}</span>
@@ -85,10 +85,12 @@
 <script>
 import messageMixin from "./messages/messageMixin";
 import util from "../plugins/utils";
+import AuthedImage from "./AuthedImage.vue";
+import clapping from "@/assets/sounds/clapping.mp3";
 
 export default {
   mixins: [messageMixin],
-  components: {},
+  components: { AuthedImage },
   props: {
     autoplay: {
       type: Boolean,
@@ -270,7 +272,7 @@ export default {
     },
     audioPlaybackReaction(reaction) {
       // Play sound!
-      const audio = new Audio(require("@/assets/sounds/clapping.mp3"));
+      const audio = new Audio(clapping);
       audio.volume = 0.6;
       audio.play();
 
@@ -407,7 +409,9 @@ export default {
           40,
           40,
           "scale",
-          true
+          true,
+          false,
+          this.$matrix.useAuthedMedia,
         );
       }
       return null;