Added Repeat for a single song

src/components/StatusBar.vue

@@ -205,9 +205,14 @@ function Save() {
             id="loop-btn"
             title="Loop"
             aria-label="Loop"
-            class="bi bi-infinity"
-            :data-active="player.state.loop"
-            @click="player.toggle('loop')"></button>
+            class="bi"
+            :class="player.state.loop < 2 ? 'bi-repeat' : 'bi-repeat-1'"
+            :data-active="player.state.loop > 0"
+            @click="
+              player.state.loop < 2
+                ? player.state.loop++
+                : (player.state.loop = 0)
+            "></button>
         </div>
       </Transition>
     </div>
@@ -237,12 +242,11 @@ function Save() {
   font-size: 2rem;
   animation: blink infinite ease 1s;
 }
-.bi-volume-up {
+.bi-volume-up,
+.bi-repeat,
+.bi-repeat-1 {
   font-size: 1.5rem !important;
 }
-.bi-infinity {
-  font-size: 1.75rem !important;
-}
 .ml-auto {
   margin-left: auto;
 }

src/stores/player.js

@@ -97,21 +97,21 @@ export const useData = defineStore('data', () => {
 
   function playNext(u) {
     const now = state.urls.filter(s => s.url === state.url)[0],
-      i = state.urls.indexOf(now),
-      next = state.urls[i + 1];
+      i = state.urls.indexOf(now);
 
-    console.log('Index: ' + i);
-    console.log(state.url, state.urls, next);
-
-    if (state.urls.length > i && state.urls.length != 0 && next) {
-      getSong(next.url);
-    } else if (player.state.loop) {
+    if (player.state.loop == 2) getSong(state.url);
+    else if (
+      state.urls.length > i &&
+      state.urls.length != 0 &&
+      state.urls[i + 1]
+    )
+      getSong(state.urls[i + 1].url);
+    else if (player.state.loop == 1) {
       console.log(state.url, state.urls[0]);
+
       state.url = state.urls[0].url;
       getSong(state.urls[0].url);
-    } else {
-      state.urls = [];
-    }
+    } else state.urls = [];
   }
 
   return { state, getSong, playNext };
@@ -119,7 +119,7 @@ export const useData = defineStore('data', () => {
 
 export const usePlayer = defineStore('player', () => {
   const state = reactive({
-    loop: false,
+    loop: 0,
     play: false,
     status: 'play',
     hls: '',