Can control playlist

ui/src/lib/components/Applications.svelte

@@ -11,14 +11,32 @@
                     <span class="text-muted">{source.currentTitle}</span>
                 {/if}
             </div>
-            {#if source.controlable}
-                <div>
-                    <button
-                        class="btn btn-sm btn-primary"
-                        on:click={() => source.playpause()}
-                    >
-                        <i class="bi bi-pause"></i>
-                    </button>
+            {#if source.controlable || source.hasplaylist}
+                <div class="d-flex gap-1">
+                    {#if source.hasplaylist}
+                        <div class="btn-group" role="group">
+                            <button
+                                class="btn btn-sm btn-primary"
+                                on:click={() => source.prevtrack()}
+                            >
+                                <i class="bi bi-skip-backward-fill"></i>
+                            </button>
+                            <button
+                                class="btn btn-sm btn-primary"
+                                on:click={() => source.nexttrack()}
+                            >
+                                <i class="bi bi-skip-forward-fill"></i>
+                            </button>
+                        </div>
+                    {/if}
+                    {#if source.controlable}
+                        <button
+                            class="btn btn-sm btn-primary"
+                            on:click={() => source.playpause()}
+                        >
+                            <i class="bi bi-pause"></i>
+                        </button>
+                    {/if}
                 </div>
             {/if}
         </li>

ui/src/lib/input.js

@@ -6,10 +6,11 @@ export class Input {
     }
   }
 
-  update({ name, active, controlable, streams, mixable, mixer }) {
+  update({ name, active, controlable, hasplaylist, streams, mixable, mixer }) {
     this.name = name;
     this.active = active;
     this.controlable = controlable;
+    this.hasplaylist = hasplaylist;
     this.streams = streams;
     this.mixable = mixable;
     this.mixer = mixer;
@@ -30,6 +31,20 @@ export class Input {
       throw new Error((await res.json()).errmsg);
     }
   }
+
+  async nexttrack(idstream) {
+    const data = await fetch(`api/inputs/${this.id}/streams/${idstream}/next_track`, {headers: {'Accept': 'application/json'}, method: 'POST'});
+    if (data.status != 200) {
+      throw new Error((await res.json()).errmsg);
+    }
+  }
+
+  async prevtrack(idstream) {
+    const data = await fetch(`api/inputs/${this.id}/streams/${idstream}/prev_track`, {headers: {'Accept': 'application/json'}, method: 'POST'});
+    if (data.status != 200) {
+      throw new Error((await res.json()).errmsg);
+    }
+  }
 }
 
 export async function getInputs() {

ui/src/lib/source.js

@@ -6,11 +6,12 @@ export class Source {
     }
   }
 
-  update({ name, enabled, active, controlable, currentTitle }) {
+  update({ name, enabled, active, controlable, hasplaylist, currentTitle }) {
     this.name = name;
     this.enabled = enabled;
     this.active = active;
     this.controlable = controlable;
+    this.hasplaylist = hasplaylist;
     this.currentTitle = currentTitle;
   }
 
@@ -37,6 +38,20 @@ export class Source {
       throw new Error((await res.json()).errmsg);
     }
   }
+
+  async nexttrack() {
+    const data = await fetch(`api/sources/${this.id}/next_track`, {headers: {'Accept': 'application/json'}, method: 'POST'});
+    if (data.status != 200) {
+      throw new Error((await res.json()).errmsg);
+    }
+  }
+
+  async prevtrack() {
+    const data = await fetch(`api/sources/${this.id}/prev_track`, {headers: {'Accept': 'application/json'}, method: 'POST'});
+    if (data.status != 200) {
+      throw new Error((await res.json()).errmsg);
+    }
+  }
 }
 
 export async function getSources() {