botao voltar atras, fix sons, alinhar chamada

luckspt · Dec 6, 2021 · f01e85c · f01e85c
1 parent cea2b9b
commit f01e85c
Show file tree

Hide file tree

Showing 15 changed files with 254 additions and 199 deletions.
diff --git a/src/App.vue b/src/App.vue
@@ -9,6 +9,9 @@
         </transition>
       </vs-col>
     </vs-row>
+
+    <div id="audios" style="display:none;">
+    </div>
   </div>
 </template>
 

diff --git a/src/components/NavBar.vue b/src/components/NavBar.vue
@@ -7,8 +7,7 @@
       </template>
 
       <template #right>
-
-        <vs-tooltip>
+        <vs-tooltip bottom class="mr-1">
           <vs-switch
             v-model="lightMode"
             @click="changeTheme">
@@ -74,7 +73,6 @@ export default Vue.extend({
   },
   methods: {
     changeTheme() {
-      console.log('toggleTheme', this.lightMode ? 'light' : 'dark');
       this.$vs.toggleTheme(this.lightMode ? 'light' : 'dark');
     },
     goHome() {

diff --git a/src/components/dialogs/ConfirmarSaida.vue b/src/components/dialogs/ConfirmarSaida.vue
@@ -12,28 +12,22 @@
         primary
         justify="center"
         align="center">
+        <vs-col w="4">
+          <vs-button
+            @click="closeDialog"
+            v-shortkey="['c']"
+            @shortkey="closeDialog">
+            <u>C</u>ancelar
+          </vs-button>
+        </vs-col>
+
         <vs-col w="5">
           <vs-button
             danger
             @click="submit"
             v-shortkey="['t']"
             @shortkey="submit">
             <u>T</u>erminar sessão
-            <template #animate>
-              <i class="fa-solid fa-right-from-bracket"></i>
-            </template>
-          </vs-button>
-        </vs-col>
-
-        <vs-col w="4">
-          <vs-button
-            @click="closeDialog"
-            v-shortkey="['c']"
-            @shortkey="goHelp">
-            <u>C</u>ancelar
-            <template #animate >
-              <i class="fa-solid fa-face-smile-beam"></i>
-            </template>
           </vs-button>
         </vs-col>
       </vs-row>

diff --git a/src/components/dialogs/Jogos.vue b/src/components/dialogs/Jogos.vue
@@ -216,6 +216,7 @@ export default Vue.extend({
         } as Mensagem,
       });
 
+      this.$emit('iniciado');
       this.closeDialog();
       this.resetFields();
     },

diff --git a/src/components/dialogs/Keybinds.vue b/src/components/dialogs/Keybinds.vue
@@ -58,7 +58,7 @@ export default Vue.extend({
       { keys: ['Ctrl', 'G'], titulo: 'Criar grupo' },
 
       // Navbar -> Criar grupo
-      { keys: ['G'], titulo: 'Criar grupo', excecao: 'Apenas no pop-up criar grupo' },
+      { keys: ['G'], titulo: 'Confirmar criar grupo', excecao: 'Apenas no pop-up criar grupo' },
 
       // ChatContainer
       { keys: ['A'], titulo: 'Chamada de áudio', excecao: 'Apenas numa conversa' },
@@ -67,8 +67,8 @@ export default Vue.extend({
 
       // ChatContainer -> Overwrite chamada
       { keys: ['O'], titulo: 'Entrar numa nova chamada', excecao: 'Apenas no pop-up de confirmação de troca de chamada' },
-      { keys: ['Ctrl', 'fa-arrow-down'], titulo: 'Contacto posterior' },
       { keys: ['Ctrl', 'fa-arrow-up'], titulo: 'Contacto anterior' },
+      { keys: ['Ctrl', 'fa-arrow-down'], titulo: 'Contacto posterior' },
 
       // Chat
       { keys: ['F'], titulo: 'Enviar ficheiro', excecao: 'Apenas numa conversa' },

diff --git a/src/components/dialogs/Soundboard.vue b/src/components/dialogs/Soundboard.vue
@@ -97,7 +97,7 @@
             </vs-button>
             <vs-button
               danger
-              :disabled="aTocar.length === 0"
+              :disabled="aTocar === 0"
               @click="stop"
               style="float:left;"
               v-shortkey="['p']"
@@ -144,6 +144,19 @@ export default Vue.extend({
       type: Object as () => Contacto,
     },
   },
+  watch: {
+    isVisible: {
+      immediate: true,
+      handler(active: boolean) {
+        if (active) {
+          const audios = document.getElementById('audios');
+          if (audios) {
+            this.aTocar = audios.children.length;
+          }
+        }
+      },
+    },
+  },
   data: () => ({
     volume: 75,
     lastVol: 75,
@@ -175,7 +188,7 @@ export default Vue.extend({
       { nome: 'Vine Boom', path: 'vine_boom.mp3', duracao: 1000 },
       { nome: 'Yeah Baby', path: 'yeah_baby.mp3', duracao: 7000 },
     ] as Som[],
-    aTocar: [] as HTMLAudioElement[],
+    aTocar: 0,
   }),
   computed: {
     sortedSongs(): Som[] {
@@ -198,43 +211,49 @@ export default Vue.extend({
     changeVolume(): void {
       if (this.volume !== this.lastVol) {
         this.lastVol = this.volume;
+        const v = this.volume / 100;
 
-        this.aTocar.forEach((audio, i) => {
-          // eslint-disable-next-line no-param-reassign
-          audio.volume = this.volume / 100;
-          this.$set(this.aTocar, i, audio);
-        });
+        const audios = document.getElementById('audios');
+        if (audios) {
+          for (let i = 0; i < audios.children.length; i += 1) { (audios.children[i] as HTMLAudioElement).volume = v; }
+        }
       }
     },
     closeDialog() {
       this.$emit('close');
     },
     stop() {
-      this.aTocar.forEach((audio) => audio.pause());
-      this.aTocar = [];
+      this.aTocar = 0;
+      const audios = document.getElementById('audios');
+      if (audios) { audios.innerHTML = ''; }
     },
     play() {
       try {
         if (!this.selected) return;
 
         // Tocar som
         const audio = new Audio(require(`../../assets/audio/${this.selected.path}`));
-        audio.id = `soundboard_${this.selected.nome}_${Date.now()}`;
+        const id = `soundboard_${this.selected.nome}_${Date.now()}`;
+        audio.id = id;
         audio.volume = this.volume / 100;
         audio.play();
-        this.aTocar.push(audio);
+        this.aTocar += 1;
 
-        // Remover som no fim
-        setTimeout(() => {
-          this.aTocar.splice(this.aTocar.findIndex((i) => i.id === audio.id), 1);
-        }, this.selected.duracao);
+        const $el = document.getElementById('audios');
+        if ($el) $el.append(audio);
+
+        audio.onended = ($event) => {
+          console.log($event);
+          this.aTocar -= 1;
+        };
 
         // Cenário em que o carlos se assusta
         if (this.chat.nome === 'Amigos' && this.volume === 100) {
           setTimeout(() => {
             this.$store.dispatch('contactos/setParticipantCamera', { chat: this.chat, participant: 'Carlos', cameraKey: 'CarlosAssustado' });
           }, 1 * 1000);
         }
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
       } catch (err: any) {
         let msg = err.message;
         if (err.message.startsWith('Cannot find module')) {