Add Option to shuffle playQueue
This commit is contained in:
parent
e2f8adc5db
commit
19d35589be
5 changed files with 25 additions and 4 deletions
|
@ -62,7 +62,8 @@
|
||||||
<Button onclick={() => playbackState.pause()}>Pause</Button>
|
<Button onclick={() => playbackState.pause()}>Pause</Button>
|
||||||
{/if}
|
{/if}
|
||||||
<Button class="border p-2" onclick={() => playbackState.song.currentTime += 5}>{">>"}</Button>
|
<Button class="border p-2" onclick={() => playbackState.song.currentTime += 5}>{">>"}</Button>
|
||||||
<Button class="border p-2" onclick={() => playbackState.mode.next()}>{playbackState.mode.get()}</Button>
|
<Button class="border p-2" onclick={() => playbackState.loopMode.next()}>{playbackState.loopMode.get()}</Button>
|
||||||
|
<Button class="botder p-2" onclick={() => playbackState.shuffle = !playbackState.shuffle}>{playbackState.shuffle ? "X" : "="}</Button>
|
||||||
</div>
|
</div>
|
||||||
{:else}
|
{:else}
|
||||||
<p>Nothing going on here</p>
|
<p>Nothing going on here</p>
|
||||||
|
|
|
@ -16,6 +16,7 @@ interface QueueState {
|
||||||
firstSong: () => Song,
|
firstSong: () => Song,
|
||||||
findSong: (song: Song) => {found: boolean, index: number},
|
findSong: (song: Song) => {found: boolean, index: number},
|
||||||
addSong: (song: Song) => void,
|
addSong: (song: Song) => void,
|
||||||
|
replaceQueue: (newQueue: Array<Song>) => void,
|
||||||
getPlayQueue: (addNowPlaying: boolean) => Promise<void>,
|
getPlayQueue: (addNowPlaying: boolean) => Promise<void>,
|
||||||
saveQueue: () => Promise<void>,
|
saveQueue: () => Promise<void>,
|
||||||
}
|
}
|
||||||
|
@ -55,6 +56,11 @@ export const queueState: QueueState = $state({
|
||||||
this.queue.push(newSong);
|
this.queue.push(newSong);
|
||||||
this.currentIndex = this.queue.length - 1;
|
this.currentIndex = this.queue.length - 1;
|
||||||
},
|
},
|
||||||
|
replaceQueue(newQueue: Array<Song>): void {
|
||||||
|
console.log(newQueue)
|
||||||
|
this.queue = [...newQueue];
|
||||||
|
this.currentIndex = 0;
|
||||||
|
},
|
||||||
async getPlayQueue(addNowPlaying: boolean = false): Promise<void> {
|
async getPlayQueue(addNowPlaying: boolean = false): Promise<void> {
|
||||||
const queueData: GetPlayQueueResponse = await OpenSubsonic.get("getPlayQueue")
|
const queueData: GetPlayQueueResponse = await OpenSubsonic.get("getPlayQueue")
|
||||||
if (queueData && queueData.playQueue.entry) {
|
if (queueData && queueData.playQueue.entry) {
|
||||||
|
|
|
@ -2,8 +2,17 @@ import {PlaybackMode, PlaybackStateSvelte} from "$lib/player.svelte";
|
||||||
import {OpenSubsonic, type Parameter, type Song} from "$lib/opensubsonic";
|
import {OpenSubsonic, type Parameter, type Song} from "$lib/opensubsonic";
|
||||||
import {queueState} from "$lib/states/play-queue.svelte";
|
import {queueState} from "$lib/states/play-queue.svelte";
|
||||||
|
|
||||||
|
export const shuffle = (array: Array<Song>) => {
|
||||||
|
for (let i: number = array.length - 1; i > 0; i--) {
|
||||||
|
const j: number = Math.floor(Math.random() * (i + 1));
|
||||||
|
[array[i], array[j]] = [array[j], array[i]];
|
||||||
|
}
|
||||||
|
return array;
|
||||||
|
};
|
||||||
|
|
||||||
interface PlaybackState {
|
interface PlaybackState {
|
||||||
mode: PlaybackStateSvelte,
|
loopMode: PlaybackStateSvelte,
|
||||||
|
shuffle: boolean,
|
||||||
song: HTMLAudioElement,
|
song: HTMLAudioElement,
|
||||||
metaData: Song,
|
metaData: Song,
|
||||||
duration: number,
|
duration: number,
|
||||||
|
@ -16,7 +25,8 @@ interface PlaybackState {
|
||||||
}
|
}
|
||||||
|
|
||||||
export const playbackState: PlaybackState = $state({
|
export const playbackState: PlaybackState = $state({
|
||||||
mode: new PlaybackStateSvelte(),
|
loopMode: new PlaybackStateSvelte(),
|
||||||
|
shuffle: false,
|
||||||
song: {},
|
song: {},
|
||||||
metaData: {},
|
metaData: {},
|
||||||
duration: 0,
|
duration: 0,
|
||||||
|
@ -63,7 +73,7 @@ export const playbackState: PlaybackState = $state({
|
||||||
}
|
}
|
||||||
|
|
||||||
this.song.onended = () => {
|
this.song.onended = () => {
|
||||||
switch (this.mode.current) {
|
switch (this.loopMode.current) {
|
||||||
case PlaybackMode.Linear: {
|
case PlaybackMode.Linear: {
|
||||||
this.newSong(queueState.nextSong());
|
this.newSong(queueState.nextSong());
|
||||||
this.play();
|
this.play();
|
||||||
|
@ -75,6 +85,10 @@ export const playbackState: PlaybackState = $state({
|
||||||
}
|
}
|
||||||
case PlaybackMode.LoopQueue: {
|
case PlaybackMode.LoopQueue: {
|
||||||
if (queueState.currentIndex === queueState.queue.length -1) {
|
if (queueState.currentIndex === queueState.queue.length -1) {
|
||||||
|
if (this.shuffle) {
|
||||||
|
const shuffledQueue = shuffle([...queueState.queue])
|
||||||
|
queueState.replaceQueue(shuffledQueue);
|
||||||
|
}
|
||||||
this.newSong(queueState.firstSong());
|
this.newSong(queueState.firstSong());
|
||||||
}
|
}
|
||||||
else {
|
else {
|
||||||
|
|
0
src/routes/album/[albumId]/+page.svelte
Normal file
0
src/routes/album/[albumId]/+page.svelte
Normal file
0
src/routes/album/[albumId]/+page.ts
Normal file
0
src/routes/album/[albumId]/+page.ts
Normal file
Loading…
Reference in a new issue