From b7b00db726aafbef8ffa4a0477158028b320ea80 Mon Sep 17 00:00:00 2001
From: marcsello <punkosdmarcell@rocketmail.com>
Date: Mon, 14 Jun 2021 01:55:43 +0200
Subject: [PATCH] Added loader and stuff

---
 src/views/Home.vue | 36 +++++++++++++++++++++++++-----------
 1 file changed, 25 insertions(+), 11 deletions(-)

diff --git a/src/views/Home.vue b/src/views/Home.vue
index 6e9bf90..d1c1b3d 100644
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@@ -1,7 +1,9 @@
 <template>
   <b-container fluid style="height: 100vh">
-    <b-row v-if="errorCondition">
-      {{ errorCondition }}
+    <b-row v-if="errorText || soundsLoaded < totalSounds">
+      <b>{{ errorText }}</b>
+      <br>
+      Loaded {{ soundsLoaded }} of {{ totalSounds }} sound files...
     </b-row>
     <b-row v-else class="mb-2 h-100">
       <b-col v-for="(snd,id) in availableSounds" :key="id" class="my-2" :cols="columnWidth" align-v="stretch">
@@ -24,9 +26,15 @@ export default {
     return {
       nowPlaying: -1,
       availableSounds: [],
-      columnWidth: 6,
-      errorCondition: false,
-      bgSound: null
+      bgSound: null,
+      soundsLoaded: 0,
+      errorText: null,
+      columnWidth: 6
+    }
+  },
+  computed: {
+    totalSounds() {
+      return this.availableSounds.length + 1 // because bg
     }
   },
   methods: {
@@ -42,9 +50,9 @@ export default {
       } else {
         this.bgSound.pause() // the background sound must be paused
 
-        this.availableSounds.forEach((snd) => { // Stop all other effects
-          snd.howl.stop()
-        })
+        if (this.nowPlaying !== -1) {
+          this.availableSounds[this.nowPlaying].howl.stop()
+        }
 
         sample.play()
         this.nowPlaying = sampleId
@@ -57,7 +65,10 @@ export default {
       this.columnWidth = response.data['columnWidth'] || 6
       this.bgSound = new Howl({
         src: response.data['bg'],
-        loop: true
+        loop: true,
+        onload: () => this.soundsLoaded++,
+        preload: true,
+        onloaderror: (id, err) => this.errorText = id + err
       })
 
       response.data['availableSounds'].forEach((sndData) => {
@@ -69,12 +80,15 @@ export default {
             onend: () => {
               this.nowPlaying = -1
               this.bgSound.play() // Continue background sound
-            }
+            },
+            onload: () => this.soundsLoaded++,
+            preload: true,
+            onloaderror: (id, err) => this.errorText = `${id} ${err}`
           })
         })
       })
 
-    }).catch((err) => this.errorCondition = err)
+    }).catch((err) => this.errorText = err)
   }
 }
 </script>