website: finish up html responses in SSE API

R-a-dio · Jan 27, 2024 · 49ecc97 · 49ecc97
1 parent ad9157e
commit 49ecc97
Show file tree

Hide file tree

Showing 8 changed files with 136 additions and 111 deletions.
diff --git a/templates/base.tmpl b/templates/base.tmpl
@@ -1,5 +1,5 @@
 {{define "full-page"}}
-<html>
+<!DOCTYPE html>
 <head>
     {{ template "head" . }}
     {{ template "scripts" . }}

diff --git a/templates/default/home.tmpl b/templates/default/home.tmpl
@@ -21,7 +21,17 @@
                         <button class="button is-fullwidth">More Options<span class="caret"></span></button>
                     </div>
                 </div>
-                {{template "nowplaying" .Status}}
+                <div sse-swap="metadata">
+                    {{template "nowplaying" .Status}}
+                </div>
+                <div class="columns">
+                    <div class="column is-6">
+                        <p class="has-text-centered">Listeners: <span id="listener-count">{{.Status.Listeners}}</span></p>
+                    </div>
+                    <div class="column is-6">
+                        <p class="has-text-centered"><span id="progress-current" data-start="{{.Status.SongInfo.Start.UnixMilli}}">00:00</span> / <span id="progress-max">00:00<span></p>
+                    </div>
+                </div>
             </div>
             <div class="column is-3">
                 <div id="dj-image">
@@ -31,8 +41,12 @@
             </div>
         </div>
         <div class="columns">
-            {{template "lastplayed" .LastPlayed}}
-            {{template "queue" .Queue}}   
+            <div class="column is-6" sse-swap="lastplayed">
+                {{template "lastplayed" .LastPlayed}}
+            </div>
+            <div class="column is-6" sse-swap="queue">
+                {{template "queue" .Queue}}   
+            </div>
         </div>
         <div class="columns">
             <article class="column message is-small m-3 p-0">
@@ -66,46 +80,34 @@ Home {{printjson .}}
 {{end}}
 {{define "nowplaying"}}
 <h2 id="current-song">
-    <p sse-swap="metadata" class="title is-2 has-text-centered" style="cursor: pointer;">{{.Song.Metadata}}</p>
+    <p class="title is-2 has-text-centered" style="cursor: pointer;">{{.Song.Metadata}}</p>
     <p class="subtitle is-4 has-text-centered" style="font-size: 14px;">{{if .Song.DatabaseTrack}}{{.Song.Tags}}{{end}}</p>
 </h2>
 <progress id="current-song-progress" class="progress is-large" value="0" max="{{.Song.Length.Seconds}}"></progress>
-<div class="columns">
-    <div class="column is-6">
-        <p class="has-text-centered">Listeners: <span id="listener-count">{{.Listeners}}</span></p>
-    </div>
-    <div class="column is-6">
-        <p class="has-text-centered"><span id="progress-current">00:00</span> / <span id="progress-max">00:00<span></p>
-    </div>
-</div>
 {{end}}
 {{define "lastplayed"}}
-    <div class="column is-6">
-        <p class="title is-4 has-text-centered">Last Played</p>
-        <div class="notification">
-            <ul id="lastplayed">
-                {{range $song := .}}
-                <li class="lp-item columns is-mobile">
-                    <time datetime="{{$song.LastPlayed.Unix}}" class="lp-time column is-4 has-text-left">{{Until $song.LastPlayed | PrettyDuration}}</time>
-                    <span class="lp-meta column is-8 has-text-centered">{{$song.Metadata}}</span>
-                </li>
-                {{end}}
-            </ul>
-        </div>
-    </div>
+<p class="title is-4 has-text-centered">Last Played</p>
+<div class="notification">
+    <ul id="lastplayed">
+        {{range $song := .}}
+        <li class="lp-item columns is-mobile">
+            <time datetime="{{$song.LastPlayed.Unix}}" class="lp-time column is-4 has-text-left">{{Until $song.LastPlayed | PrettyDuration}}</time>
+            <span class="lp-meta column is-8 has-text-centered">{{$song.Metadata}}</span>
+        </li>
+        {{end}}
+    </ul>
+</div>
 {{end}}
 {{define "queue"}}
-    <div class="column is-6">
-        <p class="title is-4 has-text-centered">Queue</p>
-        <div class="notification">
-            <ul>
-                {{range $song := .}}
-                <li class="columns is-mobile">
-                    <span class="column is-8 has-text-centered">{{$song.Metadata}}</span>
-                    <time datetime="{{$song.ExpectedStartTime.Unix}}" class="column is-4 has-text-right">{{Until $song.ExpectedStartTime | PrettyDuration}}</time>
-                </li>
-                {{end}}
-            </ul>
-        </div>
-    </div>
+<p class="title is-4 has-text-centered">Queue</p>
+<div class="notification">
+    <ul>
+        {{range $song := .}}
+        <li class="columns is-mobile">
+            <span class="column is-8 has-text-centered">{{$song.Metadata}}</span>
+            <time datetime="{{$song.ExpectedStartTime.Unix}}" class="column is-4 has-text-right">{{Until $song.ExpectedStartTime | PrettyDuration}}</time>
+        </li>
+        {{end}}
+    </ul>
+</div>
 {{end}}
diff --git a/templates/default/partials/head.tmpl b/templates/default/partials/head.tmpl
@@ -6,6 +6,7 @@
 <link rel="stylesheet" href="/assets/css/main.css">
 <script src="/assets/js/htmx.min.js"></script>
 <script src="https://unpkg.com/htmx.org/dist/ext/sse.js"></script>
+<script src="/assets/js/radio.js"></script>
 {{template "styles"}}
 {{end}}
 {{define "title"}}R/a/dio{{end}}

diff --git a/templates/loader.go b/templates/loader.go
@@ -252,6 +252,7 @@ func LoadThemes(fsys fs.FS) (Themes, error) {
 	var state loadState
 	var err error
 
+	state.fs = fsys
 	state.baseTemplates, err = readDirFilterString(fsys, ".", isTemplate)
 	if err != nil {
 		return nil, errors.E(op, err)

diff --git a/util/sse/sse.go b/util/sse/sse.go
@@ -2,6 +2,7 @@ package sse
 
 import (
 	"bytes"
+	"slices"
 	"strconv"
 	"time"
 
@@ -49,5 +50,5 @@ func (e Event) Encode() []byte {
 	}
 	b.WriteString("\n")
 
-	return b.Bytes()
+	return slices.Clone(b.Bytes())
 }
diff --git a/website/api/v1/router.go b/website/api/v1/router.go
@@ -2,64 +2,41 @@ package v1
 
 import (
 	"context"
-	"log"
-	"time"
 
 	radio "github.com/R-a-dio/valkyrie"
 	"github.com/R-a-dio/valkyrie/config"
-	"github.com/R-a-dio/valkyrie/util/eventstream"
+	"github.com/R-a-dio/valkyrie/storage"
+	"github.com/R-a-dio/valkyrie/templates"
 	"github.com/go-chi/chi/v5"
 )
 
-func NewAPI(ctx context.Context, cfg config.Config) (*API, error) {
-	api := &API{
-		Context: ctx,
-		Config:  cfg,
-		sse:     NewStream(),
-		manager: cfg.Conf().Manager.Client(),
+func NewAPI(ctx context.Context, cfg config.Config, templates *templates.Executor) (*API, error) {
+	song, err := storage.Open(cfg)
+	if err != nil {
+		return nil, err
 	}
 
-	go func() {
-		defer api.sse.Shutdown()
-
-		m := cfg.Conf().Manager.Client()
-
-		var s eventstream.Stream[*radio.SongUpdate]
-		var err error
-		for {
-			s, err = m.CurrentSong(ctx)
-			if err == nil {
-				break
-			}
-
-			log.Println("v1/api:setup:", err)
-			time.Sleep(time.Second * 3)
-		}
-
-		for {
-			us, err := s.Next()
-			if err != nil {
-				log.Println("v1/api:loop:", err)
-				break
-			}
-			if us == nil {
-				log.Println("v1/api:loop: nil value")
-				continue
-			}
+	api := &API{
+		Context:  ctx,
+		Config:   cfg,
+		sse:      NewStream(templates),
+		manager:  cfg.Conf().Manager.Client(),
+		streamer: cfg.Conf().Streamer.Client(),
+		song:     song,
+	}
 
-			log.Println("v1/api:sending:", us.Metadata)
-			api.sse.SendEvent(EventMetadata, []byte(us.Metadata))
-		}
-	}()
+	go api.runSSE(ctx)
 
 	return api, nil
 }
 
 type API struct {
-	Context context.Context
-	Config  config.Config
-	sse     *Stream
-	manager radio.ManagerService
+	Context  context.Context
+	Config   config.Config
+	sse      *Stream
+	manager  radio.ManagerService
+	streamer radio.StreamerService
+	song     radio.SongStorageService
 }
 
 func (a *API) Router() chi.Router {