Compare commits
No commits in common. "8f6baeba91676b5f47fd28d538ad54b7584fe145" and "fdfde8636033ed56977a5395e97bb36acf0ee14f" have entirely different histories.
8f6baeba91
...
fdfde86360
@ -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)))
|
||||
}
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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>
|
||||
}
|
||||
|
||||
File diff suppressed because one or more lines are too long
Loading…
Reference in New Issue
Block a user