From 855a48b3228971f5ebb68b76b1245e38df622474 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?S=C3=A9bastien=20Cl=C3=A9ment?= <seb6596@gmail.com>
Date: Fri, 1 Jul 2022 11:44:47 +0200
Subject: [PATCH] :ambulance: Fix for vutify beta 5 (#31)

---
 .../guild/Settings/SettingGroupComponent.vue  |  6 +-
 .../guild/home/AudioPreviewComponent.vue      | 63 ++++++++++---------
 2 files changed, 37 insertions(+), 32 deletions(-)

diff --git a/src/components/guild/Settings/SettingGroupComponent.vue b/src/components/guild/Settings/SettingGroupComponent.vue
index 3cc6bf7..e1b138d 100644
--- a/src/components/guild/Settings/SettingGroupComponent.vue
+++ b/src/components/guild/Settings/SettingGroupComponent.vue
@@ -3,8 +3,8 @@
     <v-card>
       <v-card-title>{{ props.descriptor.name }}</v-card-title>
       <v-card-content class="pt-1">
-        <v-container class="py-0">
-          <v-row v-if="props.descriptor.mainField" class="mb-4">
+        <v-container class="pt-0">
+          <v-row v-if="props.descriptor.mainField">
             <v-col>
               <bool-field-component
                 v-if="props.descriptor.mainField.type == 'BOOL'"
@@ -41,7 +41,7 @@
 <script setup lang="ts">
 import type { SettingDescrition } from "@/data/Setting/SettingDescription";
 import { useSettingStore } from "@/stores/setting";
-import { computed } from "@vue/reactivity";
+import { computed } from "vue";
 import { storeToRefs } from "pinia";
 import boolFieldComponent from "./fields/BoolFieldComponent.vue";
 import SelectFieldComponent from "./fields/SelectFieldComponent.vue";
diff --git a/src/components/guild/home/AudioPreviewComponent.vue b/src/components/guild/home/AudioPreviewComponent.vue
index 4949bf8..41718ff 100644
--- a/src/components/guild/home/AudioPreviewComponent.vue
+++ b/src/components/guild/home/AudioPreviewComponent.vue
@@ -3,8 +3,11 @@
     <template v-slot:prepend>
       <v-icon color="primary" size="x-large">mdi-music-circle</v-icon>
     </template>
-    <template v-slot:append v-if="status.connected && status.canView">
-      <v-menu v-model="chanListMenuOpen">
+    <template v-slot:append>
+      <v-menu
+        v-model="chanListMenuOpen"
+        v-if="status.connected && status.canView"
+      >
         <template v-slot:activator="{ props }">
           <v-btn
             color="black"
@@ -156,32 +159,34 @@
                 v-bind="props"
               ></v-btn>
             </template>
-            <v-card min-width="300">
+            <v-card min-width="300" class="rounded-lg">
               <v-card-content>
-                <v-form @submit.prevent="add">
-                  <v-text-field
-                    v-model="url"
-                    density="compact"
-                    variant="outlined"
-                    label="Url"
-                    hide-details="auto"
-                    color="primary"
-                    autofocus
-                    :loading="urlLoading"
-                    :disabled="urlLoading"
-                  >
-                    <template v-slot:append>
-                      <v-icon
-                        @click="add"
-                        color="primary"
-                        :style="urlLoading ? '' : 'opacity: 1'"
-                        :disabled="urlLoading"
-                      >
-                        mdi-plus-circle
-                      </v-icon>
-                    </template>
-                  </v-text-field>
-                </v-form>
+                <v-container>
+                  <v-form @submit.prevent="add">
+                    <v-text-field
+                      v-model="url"
+                      density="compact"
+                      variant="outlined"
+                      label="Url"
+                      hide-details="auto"
+                      color="primary"
+                      autofocus
+                      :loading="urlLoading"
+                      :disabled="urlLoading"
+                    >
+                      <template v-slot:append>
+                        <v-icon
+                          @click="add"
+                          color="primary"
+                          :style="urlLoading ? '' : 'opacity: 1'"
+                          :disabled="urlLoading"
+                        >
+                          mdi-plus-circle
+                        </v-icon>
+                      </template>
+                    </v-text-field>
+                  </v-form>
+                </v-container>
               </v-card-content>
             </v-card>
           </v-menu>
@@ -290,7 +295,7 @@ import type { Status } from "@/data/music/Status";
 import * as audioService from "@/services/audioService";
 import { getVoiceChannels } from "@/services/guildService";
 import { useEventQueuStore } from "@/stores/eventQueu";
-import { computed } from "@vue/reactivity";
+import { computed } from "vue";
 import { ref, watch } from "vue";
 import { onBeforeRouteLeave, onBeforeRouteUpdate } from "vue-router";
 
@@ -500,7 +505,7 @@ audioService.getAudioStatus(properties.guild.id).then((value) => {
   }
 });
 
-let interval = setInterval(() => {
+const interval = setInterval(() => {
   audioService.getAudioStatus(properties.guild.id).then((value) => {
     if (value) {
       status.value = value.data;