Added music player beta

src/main.go

@@ -20,11 +20,13 @@ func main() {
 	aboutpage := NewAboutPage()
 	galaxiespage := NewGalaxiesPage()
 	undertalePage := NewUndertalePage()
+	musicPage := NewMusicPage()
 	app.Route("/", homepage)
 	app.Route("/about", aboutpage)
 	app.Route("/galaxies", galaxiespage)
 	app.Route("/undertale", undertalePage)
 	app.Route("/blog", NewBlogPage())
+	app.Route("/music", musicPage)
 
 	app.Handle(getHTML, handleGetHTML)
 

src/music.go

@@ -0,0 +1,51 @@
+// Idea for this page:
+// - Make a navbar on the top for different genres and switch the pages content when clicked
+
+package main
+
+import "github.com/maxence-charriere/go-app/v9/pkg/app"
+
+type MusicPage struct {
+	app.Compo
+}
+
+func NewMusicPage() *MusicPage {
+	return &MusicPage{}
+}
+
+func (f *MusicPage) Render() app.UI {
+	return newPage().
+		Title("Music!").
+		LeftBar(
+			newHTMLBlock().
+				Class("left").
+				Class("leftbarblock").
+				Src("/web/blocks/snippets/bannerpanel.html"),
+		).
+		Main(
+			// Genre navbar above this
+			newUIBlock().
+				Class("right").
+				Class("contentblock").
+				UI(
+					app.Div().
+						Body(
+							app.P().
+								Class("m-t5").
+								Text(`I am quite picky with my music most of the time. I rarely enjoy an entire album of an artist and most artists for me have only a couple amazing songs.
+						My tastes in music are almost exclusively Japanese songs. Vocaloid is how I began and nowadays I listen to all sorts of Japanese music.
+						Here are some of the songs, artists and albums I like the most.`),
+							app.P().
+								Class("p-h3").
+								Style("color", "red").
+								Text("Warning! Player feature still in beta. Stuff can break and design is most certainly not final at all!"),
+							app.P().
+								Text("Just click one of the songs to play it."),
+							app.P().
+								Class("p-h2").
+								Text("Songs"),
+							newMusicPlayer(),
+						),
+				),
+		)
+}

src/musicplayer.go

@@ -0,0 +1,136 @@
+package main
+
+import (
+	"fmt"
+
+	"github.com/maxence-charriere/go-app/v9/pkg/app"
+)
+
+const (
+	songRepoURL string = "" // URL where the music files are stored. Made a bit like the ApiURL
+)
+
+type song struct {
+	ITitle string
+	IID    string
+	IURL   string
+}
+
+func newSong() *song {
+	return &song{}
+}
+
+func (f *song) Title(v string) *song {
+	f.ITitle = v
+	return f
+}
+
+func (f *song) URL(v string) *song {
+	f.IURL = v
+	return f
+}
+
+func (f *song) ID(v string) *song {
+	f.IID = v
+	return f
+}
+
+type musicPlayer struct {
+	app.Compo
+
+	songs                 map[string](*song)
+	currentlySelectedSong string
+}
+
+func newMusicPlayer() *musicPlayer {
+	return &musicPlayer{
+		songs: make(map[string]*song),
+	}
+}
+
+// On... handlers
+
+func (f *musicPlayer) OnMount(ctx app.Context) {
+	ctx.Handle("switchSong", f.handleSwitchSong)
+	// Statically create all the music.
+	// I am not making a database for this shit lmao
+	// Also do not forget to at least set the currentlySelectedSong to the first one added, or at least make it point somewhere
+	f.songs["ievan-polka"] = newSong().
+		Title("Ievan Polka - Hatsune Miku").
+		URL("https://files.catbox.moe/lh229f.mp3").
+		ID("ievan-polka")
+	f.songs["tokusya-seizon"] = newSong().
+		Title("Tokusya-Seizon Wonder-la-der!! - Amane Kanata").
+		URL("https://music-website.s3.nl-ams.scw.cloud/Tokusya-Seizon%20Wonder-la-der%21%21.mp3").
+		ID("tokusya-seizon")
+
+}
+
+// Action handlers
+
+// Call with a value called "title" to switch to the right song
+func (f *musicPlayer) handleSwitchSong(ctx app.Context, a app.Action) {
+	title, ok := a.Value.(string)
+	if !ok {
+		app.Log("Error calling handleSwitchSong function. Title value was not found")
+		return
+	}
+	v, ok := f.songs[title]
+	if !ok {
+		app.Log("Error getting song. Song with title does not exist")
+		return
+	}
+
+	f.currentlySelectedSong = v.IID
+	f.Update()
+}
+
+func (f *musicPlayer) Render() app.UI {
+	// Don't forget to handle the possibility of no songs having been added and the currentlySelectedSong to be empty
+	if f.currentlySelectedSong == "" {
+		return app.Div().
+			Body(
+				app.Range(f.songs).Map(func(s string) app.UI {
+					return app.Div().
+						Style("border", "solid 1px red").
+						Style("width", "fit-content").
+						Body(
+							app.Span().
+								Style("text-decoration", "underline").
+								Style("width", "fit-content").
+								Text(f.songs[s].ITitle).
+								OnClick(func(ctx app.Context, e app.Event) {
+									ctx.NewActionWithValue("switchSong", f.songs[s].IID)
+								}),
+						)
+				}),
+			)
+	}
+	return app.Div().Body(
+		app.P().
+			Class("p-h3").
+			Text(fmt.Sprintf("Currently playing: %s", f.songs[f.currentlySelectedSong].ITitle)),
+		app.Audio().
+			Src(f.songs[f.currentlySelectedSong].IURL).
+			Controls(true).
+			AutoPlay(true),
+		// Lots of buttons of songs
+		app.Div().
+			Body(
+				app.Range(f.songs).Map(func(s string) app.UI {
+					return app.Div().
+						Style("border", "solid 1px red").
+						Style("width", "fit-content").
+						Body(
+							app.Span().
+								Style("text-decoration", "underline").
+								Style("width", "fit-content").
+								Text(f.songs[s].ITitle).
+								OnClick(func(ctx app.Context, e app.Event) {
+									ctx.NewActionWithValue("switchSong", f.songs[s].IID)
+								}),
+						)
+				}),
+			),
+	)
+}

src/navbar.go

@@ -20,6 +20,9 @@ func (n *navbar) Render() app.UI {
 			app.Li().Body(
 				app.A().Href("/galaxies").Text("Galaxies"),
 			),
+			app.Li().Body(
+				app.A().Href("/music").Text("Music"),
+			),
 			// Disabled for now since there are none anyway
 			app.Li().Body(
 				app.A().Href("/blog").Text("Blog"),