Fix analytics service and audio recorder

src/assets/css/components/_voice-recorder.scss

@@ -17,14 +17,21 @@
 .fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
   opacity: 0;
 }
-.voice-recorder-btn {
-  padding: 30px;
-  background-color: $voice-recorder-color;
 
-  &.recording {
+.voice-recorder {
-    background-color: $voice-recording-color;
+  .v-btn {
+    background-color: black;
+    color: white;
   }
-  &.recorded {
+
-    background-color: $voice-recorded-color;
+  .voice-recorder-btn {
+    background-color: $voice-recorder-color;
+
+    &.recording {
+      background-color: $voice-recording-color;
+    }
+    &.recorded {
+      background-color: $voice-recorded-color;
+    }
   }
 }

src/components/VoiceRecorder.vue

@@ -9,10 +9,10 @@
         <v-row align="center" class="mt-3">
           <v-col cols="4" align="center">
             <v-btn v-show="state == states.RECORDED" icon @click.stop="redo">
-              <v-icon color="white">undo</v-icon>
+              <v-icon>undo</v-icon>
             </v-btn>
             <v-btn v-show="state == states.INITIAL" icon @click.stop="importAudio">
-              <v-icon color="white">$vuetify.icons.audio_import</v-icon>
+              <v-icon>$vuetify.icons.audio_import</v-icon>
               <input
               ref="audio_import"
               type="file"
@@ -23,10 +23,10 @@
             />
             </v-btn>
             <v-btn v-show="state == states.IMPORTED" icon @click.stop="previewAudio">
-              <v-icon color="white">$vuetify.icons.audio_import_play</v-icon>
+              <v-icon>$vuetify.icons.audio_import_play</v-icon>
             </v-btn>
             <v-btn v-show="state == states.PLAYING" icon @click.stop="pauseAudio">
-              <v-icon color="white">pause</v-icon>
+              <v-icon>pause</v-icon>
             </v-btn>
           </v-col>
           <v-col cols="4" align="center">
@@ -36,6 +36,7 @@
               icon
               class="voice-recorder-btn recording"
               @click.stop="pauseRecording"
+              size="60"
             >
               <v-icon color="white">stop</v-icon>
             </v-btn>
@@ -46,6 +47,7 @@
               icon
               :disabled="!recordedFile"
               @click.stop="send"
+              size="60"
             >
               <v-icon color="black">arrow_upward</v-icon>
             </v-btn>
@@ -55,13 +57,14 @@
               class="voice-recorder-btn"
               icon
               @click.stop="startRecording"
+              size="60"
             >
-              <v-icon color="white">fiber_manual_record</v-icon>
+              <v-icon>fiber_manual_record</v-icon>
             </v-btn>
           </v-col>
           <v-col cols="4" align="center">
             <v-btn id="btn-record-cancel" icon @click.stop="cancelRecording">
-              <v-icon color="white">close</v-icon>
+              <v-icon>close</v-icon>
             </v-btn>
           </v-col>
         </v-row>

src/components/createRoomMixin.js

@@ -31,6 +31,7 @@ export default {
         //autofocus: true,
         variant: "solo",
         required: true,
+        class: "text-left"
       };
     },
     roomNameInputListeners() {

src/plugins/vuetify.js

@@ -61,6 +61,13 @@ export default {
           customProperties: true,
         },
         dark: false,
+        themes: {
+          light: {
+            colors: {
+              error: "#ff5252",
+            }
+          },
+        },
       },
     };
     const vuetify = createVuetify(options);

src/services/analytics.service.js

@@ -1,67 +1,64 @@
-import cleaninsights from './cleaninsights.service'
+import cleaninsights from "./cleaninsights.service";
-import matomo from './matomo.service'
+import matomo from "./matomo.service";
 
 export default {
-    install(app) {
+  install(app) {
-        const analyticsService = ({
+    class AnalyticsServiceClass {
-            data() {
+      constructor() {
-                return {
+        this.engines = [];
-                    engines: [],
+        this.cachedEvents = [];
-                    cachedEvents: [],
+        this.initialized = false;
-                    initialized: false
-                }
-            },
-            created() {
-                this.$config.promise.then((config) => {
-                    var analytics = config.analytics || {};
-                    if (!Array.isArray(analytics)) {
-                        analytics = [analytics];
-                    }
-                    for (const engineConfig of analytics) {
-                        if (engineConfig.enabled) {
-                            let type = engineConfig.type || "ci";
-                            switch (type) {
-                                case "ci":
-                                    {
-                                        let engine = cleaninsights.install(Vue, engineConfig.config);
-                                        this.engines.push(engine);
-                                    }
-                                    break;
-                                case "matomo":
-                                    {
-                                        let engine = matomo.install(Vue, engineConfig.config);
-                                        this.engines.push(engine);
-                                    }
-                                    break;
-                                }
-                        }
-                    }
 
-                    this.initialized = true;
+        app.$config.promise.then((config) => {
-
+          var analytics = config.analytics || {};
-                    // Handle cached events
+          if (!Array.isArray(analytics)) {
-                    this.cachedEvents.forEach(([category, action]) => {
+            analytics = [analytics];
-                        this.event(category, action);
+          }
-                    })
+          for (const engineConfig of analytics) {
-                    this.cachedEvents = [];
+            if (engineConfig.enabled) {
-                });
+              let type = engineConfig.type || "ci";
-            },
+              switch (type) {
-            methods: {
+                case "ci":
-                event(category, action) {
+                  {
-                    if (!this.initialized) {
+                    let engine = cleaninsights.install(Vue, engineConfig.config);
-                        this.cachedEvents.push([category, action]);
+                    this.engines.push(engine);
-                        return
+                  }
-                    }
+                  break;
-
+                case "matomo":
-                    // Send the event to each configured analytics engine.
+                  {
-                    this.engines.forEach((engine) => {
+                    let engine = matomo.install(Vue, engineConfig.config);
-                        engine.event(category, action);
+                    this.engines.push(engine);
-                    });
+                  }
-                }
+                  break;
+              }
             }
-        });
+          }
 
-        app.$analytics = analyticsService;
+          this.initialized = true;
-        app.config.globalProperties.$analytics = analyticsService;
+
+          // Handle cached events
+          this.cachedEvents.forEach(([category, action]) => {
+            this.event(category, action);
+          });
+          this.cachedEvents = [];
+        });
+      }
+
+      event(category, action) {
+        if (!this.initialized) {
+          this.cachedEvents.push([category, action]);
+          return;
+        }
+
+        // Send the event to each configured analytics engine.
+        this.engines.forEach((engine) => {
+          engine.event(category, action);
+        });
+      }
     }
-}
+
+    const analyticsService = new AnalyticsServiceClass();
+    app.$analytics = analyticsService;
+    app.config.globalProperties.$analytics = analyticsService;
+  },
+};