Introduce streams

api/inputs.go

@@ -47,7 +47,7 @@ func declareInputsRoutes(cfg *config.Config, router *gin.RouterGroup) {
 	inputsRoutes.GET("/settings", func(c *gin.Context) {
 		c.JSON(http.StatusOK, c.MustGet("input"))
 	})
-	inputsRoutes.GET("/currently", func(c *gin.Context) {
+	inputsRoutes.GET("/streams", func(c *gin.Context) {
 		src := c.MustGet("input").(inputs.SoundInput)
 
 		if !src.IsActive() {
@@ -58,7 +58,7 @@ func declareInputsRoutes(cfg *config.Config, router *gin.RouterGroup) {
 		c.JSON(http.StatusOK, src.CurrentlyPlaying())
 	})
 
-	streamRoutes := inputsRoutes.Group("/stream/:stream")
+	streamRoutes := inputsRoutes.Group("/streams/:stream")
 	streamRoutes.Use(StreamHandler)
 
 	streamRoutes.POST("/pause", func(c *gin.Context) {

ui/src/lib/components/Inputs.svelte

@@ -39,27 +39,32 @@
     {/each}
     {#each $inputsList as input}
         {#if showInactives || input.active}
-            <li class="list-group-item py-3 d-flex justify-content-between">
+            <li class="list-group-item py-3 d-flex flex-column">
-                <div>
                 <strong>{input.name}</strong>
-                    {#await input.currently()}
+                {#await input.streams()}
                     <div class="spinner-border spinner-border-sm" role="status">
                         <span class="visually-hidden">Loading...</span>
                     </div>
-                    {:then title}
+                {:then streams}
+                    {#each Object.keys(streams) as idstream}
+                        {@const title = streams[idstream]}
+                        <div class="d-flex justify-content-between">
+                            <div>
                                 <span class="text-muted">{title}</span>
-                    {/await}
                             </div>
                             {#if input.controlable}
                                 <div>
                                     <button
                                         class="btn btn-sm btn-primary"
-                            on:click={() => input.playpause()}
+                                        on:click={() => input.playpause(idstream)}
                                     >
                                         <i class="bi bi-pause"></i>
                                     </button>
                                 </div>
                             {/if}
+                        </div>
+                    {/each}
+                {/await}
             </li>
         {/if}
     {/each}

ui/src/lib/input.js

@@ -12,8 +12,8 @@ export class Input {
     this.controlable = controlable;
   }
 
-  async currently() {
+  async streams() {
-    const data = await fetch(`api/inputs/${this.id}/currently`, {headers: {'Accept': 'application/json'}});
+    const data = await fetch(`api/inputs/${this.id}/streams`, {headers: {'Accept': 'application/json'}});
     if (data.status == 200) {
       return await data.json();
     } else {
@@ -21,8 +21,8 @@ export class Input {
     }
   }
 
-  async playpause() {
+  async playpause(idstream) {
-    const data = await fetch(`api/inputs/${this.id}/pause`, {headers: {'Accept': 'application/json'}, method: 'POST'});
+    const data = await fetch(`api/inputs/${this.id}/streams/${idstream}/pause`, {headers: {'Accept': 'application/json'}, method: 'POST'});
     if (data.status != 200) {
       throw new Error((await res.json()).errmsg);
     }

ui/src/routes/+page.svelte

@@ -40,12 +40,16 @@
                 <div class="d-inline-block me-3">
                     <div class="d-flex justify-content-between align-items-center">
                         <div>
-                            {#await input.currently()}
+                            {#await input.streams()}
                                 <div class="spinner-border spinner-border-sm" role="status">
                                     <span class="visually-hidden">Loading...</span>
                                 </div> <span class="text-muted">@ {input.name}</span>
-                            {:then title}
+                            {:then streams}
-                                <strong>{title}</strong> <span class="text-muted">@ {input.name}</span>
+                                {#each Object.keys(streams) as idstream}
+                                    {@const title = streams[idstream]}
+                                    <strong>{title}</strong>
+                                {/each}
+                                <span class="text-muted">@ {input.name}</span>
                             {:catch error}
                                 {input.name} activée
                             {/await}