fernando/music-to-go
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Compare commits

base: fernando:8f6baeba91676b5f47fd28d538ad54b7584fe145
Branches Tags
fernando:master
..
compare: fernando:fdfde8636033ed56977a5395e97bb36acf0ee14f
Branches Tags
fernando:master

No commits in common. "8f6baeba91676b5f47fd28d538ad54b7584fe145" and "fdfde8636033ed56977a5395e97bb36acf0ee14f" have entirely different histories.
8f6baeba91 ... fdfde86360

4 changed files with 130 additions and 392 deletions
Show Stats Expand all files Collapse all files

30
src/modules/album/album.go
View File

@ -3,7 +3,6 @@ package album
import (
"acide/src/modules/song"
"acide/src/utils"
"bytes"
"encoding/json"
"net/http"
"sync"
@ -16,7 +15,6 @@ type ClientSong struct {
Title string `json:"title"`
Artist string `json:"artist"`
AlbumId string `json:"albumId"`
Album string `json:"album"`
SongId string `json:"songId"`
}
@ -32,10 +30,21 @@ func allAlbumsPage(c echo.Context) error {
// if there's a search query, do that
searchQuery := c.QueryParam("s")
isHtmxRequest := c.Request().Header.Get("HX-Request") == "true"
// get the first 10 albums
token, server := utils.Credentials(c)
// if searchQuery is empty, this will get the first 30 albums
albums, err := searchAlbums(token, searchQuery, server, 0, 30)
var (
albums []utils.Album
err error
)
if searchQuery != "" {
// search for the requested albums
albums, err = searchAlbums(token, searchQuery, server, 0, 20)
} else {
// get 10 random albums
albums, err = loadAlbums(token, server, 0, 30)
}
if err != nil {
return err
@ -90,25 +99,20 @@ func albumPage(c echo.Context) error {
}
// convert the song list to json
clientSongs := make([]ClientSong, len(songs))
clientSons := make([]ClientSong, len(songs))
for i, song := range songs {
clientSongs[i] = ClientSong{
clientSons[i] = ClientSong{
Title: song.Title,
Artist: song.Artist,
AlbumId: album.ID,
Album: album.Name,
SongId: song.ID,
}
}
var buff bytes.Buffer
enc := json.NewEncoder(&buff)
enc.SetEscapeHTML(false)
if err := enc.Encode(&clientSongs); err != nil {
clientSongsJson, err := json.Marshal(clientSons)
if err != nil {
log.Printf("Error marshaling clientSongs: %s", err)
return err
}
clientSongsJson := buff.String()
return utils.RenderTempl(c, http.StatusOK, albumTempl(albumId, album, songs, string(clientSongsJson)))
}

22
src/modules/album/album.service.go
View File

@ -33,6 +33,28 @@ func searchAlbums(token, query, server string, start, end int) ([]utils.Album, e
return albums, nil
}
func loadAlbums(token, server string, start, end int) ([]utils.Album, error) {
var albums []utils.Album
var error utils.NavError
client := resty.New()
response, err := client.R().
SetHeader("x-nd-authorization", fmt.Sprintf("Bearer %s", token)).
SetResult(&albums).
SetError(&error).
Get(fmt.Sprintf("%s/api/album?_start=%d&_end=%d&_sort=name&_order=ASC", server, start, end))
if err != nil {
return nil, err
}
if !response.IsSuccess() {
return nil, errors.New(error.Error)
}
return albums, nil
}
func loadAlbum(token, server, albumId string) (*utils.Album, error) {
var album utils.Album
var error utils.NavError

215
src/utils/utils.templ
View File

@ -33,16 +33,10 @@ templ MusicPlayer() {
class="fixed bottom-0 left-0 w-screen border-t border-sky-500 grid grid-cols-[3rem_auto_3rem_3rem] gap-2 p-1 bg-white"
x-data="player"
>
<div
class="h-12 bg-sky-200 rounded"
_="on click toggle .hidden on #full-music-player"
>
<div class="h-12 bg-sky-200 rounded">
<img class="rounded" id="music-player-img" :src="queue[idx]? `/covers/${queue[idx]?.albumId}` : ''"/>
</div>
<div
class="w-full overflow-hidden"
_="on click toggle .hidden on #full-music-player"
>
<div class="w-full overflow-hidden">
<p
id="music-player-title"
class="overflow-hidden overflow-ellipsis whitespace-nowrap w-full"
@ -74,7 +68,6 @@ templ MusicPlayer() {
>
@skipForwardIcon(24)
</button>
@fullMusicPlayer()
<script>
document.addEventListener('alpine:init', () => {
Alpine.data("player", () => ({
@ -88,74 +81,33 @@ templ MusicPlayer() {
volume: 0.1,
playing: false,
loading: false,
progress: 0,
// sets the queue, and plays the song at idx
replaceQueueAndPlayAt(queue, idx) {
this.queue = queue;
this.idx = idx;
this.play(idx);
// setup the preload and progress listener
console.log("setting up listener");
setInterval(() => this.checkDuration(), 1000);
this.play();
},
// Plays the song at the current position
async play() {
const songId = this.queue[this.idx].songId;
// Plays the song at the passed idx, sets this.idx to that,
// and plays a preloaded song
//
// If preloaded=true, this function will assume that it is the
// next song. It will trust that idx is correct.
async play(idx) {
const preloaded = this.nextSound !== null && idx === this.idx + 1;
// if a song is currently playing
// then fade it out before playing the next sound
if (this.playing === true
&& this.currentSound !== null
) {
// this will not trigger when next() is called,
// because next() sets this.playing=false
if (this.currentSound !== null) {
this.currentSound.fade(this.volume, 0.0, 250);
await wait(250);
this.currentSound.unload();
}
this.currentSound?.unload?.();
this.playing = false;
this.currentSound = null;
this.idx = idx;
// if a song is preloaded, assume it's the next song and play it
if (preloaded === true && this.nextSound !== null) {
this.currentSound = this.nextSound;
this.nextSound = null;
this.currentSound.play();
this.playing = true;
} else {
// otherwise, load the song at idx and play it
const songId = this.queue[idx].songId;
const sound = new Howl({
src: `https://navidrome.araozu.dev/rest/stream.view?id=${songId}&v=1.13.0&c=music-to-go&u=fernando&s=49805d&t=4148cd1c83ae1bd01334facf4e70a947`,
html5: true,
volume: this.volume,
});
this.currentSound = sound;
this.loading = true;
sound.play();
sound.once("load", () => {
this.loading = false;
this.playing = true;
});
}
// set-up preloading for the next song
const sound = this.currentSound;
sound.once("play", () => {
const sound = new Howl({
src: `https://navidrome.araozu.dev/rest/stream.view?id=${songId}&v=1.13.0&c=music-to-go&u=fernando&s=49805d&t=4148cd1c83ae1bd01334facf4e70a947`,
html5: true,
volume: this.volume,
})
this.loading = true;
sound.play();
let preloadInterval;
sound.once("load", () => {
const length = sound.duration();
const targetLength = length - 5;
let preloadInterval;
preloadInterval = setInterval(() => {
const pos = sound.seek();
if (pos > targetLength) {
@ -163,37 +115,22 @@ templ MusicPlayer() {
clearInterval(preloadInterval);
}
}, 1000);
this.loading = false;
this.playing = true;
});
// set-up playing the next song when the current finishes
sound.once("end", () => {
this.playing = false;
this.next();
});
this.currentSound = sound;
},
// checks the duration of the playing song and:
// - updates the song progress (0-100%)
// - begins preloading
checkDuration() {
const sound = this.currentSound;
if (this.playing) {
const length = sound.duration();
if (length <= 0) return;
const position = sound.seek();
// preload 5s before the song ends
if (position >= length - 5 && this.nextSound === null) {
this.preload();
}
// update the song progress percentage
this.progress = Math.floor((position * 100) / length);
}
async playNext() {
this.currentSound?.unload();
this.nextSound.play();
this.playing = true;
this.currentSound = this.nextSound;
this.nextSound = null;
},
togglePlayPause() {
if (this.playing === true) {
this.playing = false;
@ -205,7 +142,8 @@ templ MusicPlayer() {
},
next() {
if (this.idx + 1 < this.queue.length) {
this.play(this.idx + 1);
this.idx += 1;
this.playNext();
}
},
preload() {
@ -221,13 +159,30 @@ templ MusicPlayer() {
volume: 0,
preload: true,
});
// Attempt to immediately play the song, immediately pause it, rewind it and set volume back up
// Attempt to play immediately the song, immediately pause it, rewind it and set volume back up
nextSound.play();
let preloadInterval;
nextSound.once("load", () => {
nextSound.pause();
nextSound.seek(0);
nextSound.volume(this.volume);
const length = nextSound.duration();
const targetLength = length - 5;
preloadInterval = setInterval(() => {
const pos = nextSound.seek();
if (pos > targetLength) {
this.preload();
clearInterval(preloadInterval);
}
}, 1000);
this.loading = false;
this.playing = true;
});
nextSound.once("end", () => {
this.playing = false;
this.next();
});
this.nextSound = nextSound;
}
@ -241,56 +196,6 @@ templ MusicPlayer() {
</div>
}
templ fullMusicPlayer() {
<div id="full-music-player" class="fixed top-0 left-0 w-screen h-screen bg-white hidden">
<div class="flex justify-center py-6">
<div class="bg-sky-200 rounded w-[20rem] h-[20rem]">
<img
class="rounded inline-block w-full"
id="full-music-player-img"
:src="queue[idx]? `/covers/${queue[idx]?.albumId}` : ''"
/>
</div>
</div>
<div class="text-center">
<div class="px-6">
<progress
class="inline-block w-full"
id="song-progress"
aria-label="Song progress"
min="0"
max="100"
:value="progress"
></progress>
</div>
<div
class="font-bold text-2xl"
x-text="queue[idx]?.title ?? '-'"
></div>
<div
class="text-lg"
x-text="queue[idx]?.album ?? '-'"
></div>
<div
class="text-sm opacity-75"
x-text="queue[idx]?.artist ?? '-'"
></div>
</div>
<div class="absolute bottom-0 w-full grid grid-cols-2 bg-sky-50">
<button type="button" class="inline-block text-center py-4">
@playlistIcon(24)
</button>
<button
type="button"
class="inline-block text-center py-4"
_="on click toggle .hidden on #full-music-player"
>
@caretDoubleDownIcon(24)
</button>
</div>
</div>
}
templ playIcon(size int) {
<svg
id="play-icon"
@ -346,33 +251,3 @@ templ circleNotchIcon(size int) {
<path d="M232,128a104,104,0,0,1-208,0c0-41,23.81-78.36,60.66-95.27a8,8,0,0,1,6.68,14.54C60.15,61.59,40,93.27,40,128a88,88,0,0,0,176,0c0-34.73-20.15-66.41-51.34-80.73a8,8,0,0,1,6.68-14.54C208.19,49.64,232,87,232,128Z"></path>
</svg>
}
templ playlistIcon(size int) {
<svg
class="inline-block"
xmlns="http://www.w3.org/2000/svg"
fill="#000000"
viewBox="0 0 256 256"
style="--darkreader-inline-fill: #000000;"
data-darkreader-inline-fill=""
width={ strconv.Itoa(size) }
height={ strconv.Itoa(size) }
>
<path d="M32,64a8,8,0,0,1,8-8H216a8,8,0,0,1,0,16H40A8,8,0,0,1,32,64Zm8,72H160a8,8,0,0,0,0-16H40a8,8,0,0,0,0,16Zm72,48H40a8,8,0,0,0,0,16h72a8,8,0,0,0,0-16Zm135.66-57.7a8,8,0,0,1-10,5.36L208,122.75V192a32.05,32.05,0,1,1-16-27.69V112a8,8,0,0,1,10.3-7.66l40,12A8,8,0,0,1,247.66,126.3ZM192,192a16,16,0,1,0-16,16A16,16,0,0,0,192,192Z"></path>
</svg>
}
templ caretDoubleDownIcon(size int) {
<svg
class="inline-block"
xmlns="http://www.w3.org/2000/svg"
fill="#000000"
viewBox="0 0 256 256"
style="--darkreader-inline-fill: #000000;"
data-darkreader-inline-fill=""
width={ strconv.Itoa(size) }
height={ strconv.Itoa(size) }
>
<path d="M213.66,130.34a8,8,0,0,1,0,11.32l-80,80a8,8,0,0,1-11.32,0l-80-80a8,8,0,0,1,11.32-11.32L128,204.69l74.34-74.35A8,8,0,0,1,213.66,130.34Zm-91.32,11.32a8,8,0,0,0,11.32,0l80-80a8,8,0,0,0-11.32-11.32L128,124.69,53.66,50.34A8,8,0,0,0,42.34,61.66Z"></path>
</svg>
}

255
src/utils/utils_templ.go
View File

File diff suppressed because one or more lines are too long