janishutz/MusicPlayer
1
0
Fork 0
mirror of https://github.com/janishutz/MusicPlayer.git synced 2026-09-10 14:25:24 +02:00
Code Issues Packages Projects Releases Wiki Activity

feat: start queue view

Browse Source
This commit is contained in:
janishutz
2026-08-31 14:28:35 +02:00
parent 4d9064f5c2
commit 1d492d5922
7 changed files with 122 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/src/components/QueueViewer.vue
+66
View File
@@ -0,0 +1,66 @@
<script setup lang="ts">
import {
beautifyTime
} from '@/ts/util/time';
import player from '@/ts/player';
const queue = player.queue;
const idx = player.queueIdx;
const isPlaying = player.isPlaying;
</script>
<template>
<div>
<div>
<button>
<i class="fa-solid fa-plus"></i>
Add
</button>
<button>
<i class="fa-solid fa-xmark"></i>
Clear
</button>
<button>
<i class="fa-solid fa-save"></i>
Save
</button>
<!-- TODO: Should only appear when sharing -->
<button>
<i class="fa-solid fa-paper-plane"></i>
Transmit
</button>
</div>
<div>
<div v-for="(song, index) in queue" :key="index">
<div class="song-cover-wrapper">
<img
v-if="song.cover"
:src="song.cover"
alt="Song cover"
class="song-cover"
>
<i v-else class="fa-solid fa-music song-cover"></i>
<div v-if="isPlaying && index === idx" class="playing-symbols">
<div id="bar-1" class="playing-bar"></div>
<div id="bar-2" class="playing-bar"></div>
<div id="bar-3" class="playing-bar"></div>
</div>
<i v-else class="fa-solid fa-play play-pause" @click="() => player.playIndex( index )"></i>
<i class="fa-solid fa-pause play-pause" @click="player.pause"></i>
</div>
<div>
<h3>{{ song.name }}</h3>
<p>{{ song.artist }}</p>
<p>{{ beautifyTime( song.duration ) }}</p>
<p>{{ song['additional-info'] }}</p>
</div>
<div>
<i class="fa-solid fa-trash-can"></i>
<i class="fa-solid fa-pen-to-square"></i>
<i class="fa-solid fa-grip-vertical"></i>
</div>
</div>
</div>
</div>
</template>