mirrors/Hyperpipe
1
0
Fork 0
mirror of https://codeberg.org/Hyperpipe/Hyperpipe synced 2025-06-28 13:08:01 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions

Playlists, Play Next, Code Refactor

Browse source
This commit is contained in:
Shiny Nematoda 2022-04-21 18:38:21 +05:30
parent 5486be7613
commit 51c56abe16
17 changed files with 664 additions and 204 deletions
Download patch file Download diff file Expand all files Collapse all files

92
src/components/StatusBar.vue
View file

@ -1,13 +1,44 @@
<script setup>
import { ref, watch } from 'vue';
import Modal from './Modal.vue'
import { useListPlaylists } from '../scripts/db.js'
defineProps({
state: String,
time: Number,
show: Boolean,
loop: Boolean,
});
defineEmits(['vol', 'play', 'list', 'loop', 'change-time']);
const emit = defineEmits(['vol', 'play', 'list', 'loop', 'save', 'change-time']),
showVol = ref(false), vol = ref(1), showmenu = ref(false), showpl = ref(false), pl = ref(''), list = ref([]);
function Save() {
showpl.value = true;
useListPlaylists((res) => {
console.log(res);
list.value = res;
showmenu.value = false;
})
}
</script>
<template>
<Teleport to="body">
<Transition name="fade">
<Modal n="2" :display="showpl" title="Select Playlist to Add" @show="(e) => { showpl = e }">
<template #content>
<template v-for="i in list">
<div class="flex" @click="pl = i.name"><span>{{ i.name }}</span><span class="ml-auto">{{ i.urls.length || '' }}</span></div>
</template>
</template>
<template #buttons>
<button @click="showpl = false">Cancel</button>
<button @click="if (pl) $emit('save', pl); showpl = false">Add</button>
</template>
</Modal>
</Transition>
</Teleport>
<div id="statusbar" class="flex">
<div class="flex statusbar-left">
<button
@ -29,25 +60,36 @@ defineEmits(['vol', 'play', 'list', 'loop', 'change-time']);
</div>
<div class="flex statusbar-right">
<button id="vol-btn" class="popup-wrap bi bi-volume-up">
<div id="vol" class="popup">
<input
id="vol-input"
type="range"
value="1"
max="1"
step=".01"
@input="$emit('vol', $event.target.value)" />
</div>
<button
id="vol-btn"
@click="showVol = !showVol"
class="popup-wrap bi bi-volume-up">
<Transition name="fade">
<div v-if="showVol" id="vol" class="popup">
<input
id="vol-input"
type="range"
:value="vol"
max="1"
step=".01"
@input="$emit('vol', $event.target.value); vol = $event.target.value" />
</div>
</Transition>
</button>
<button
id="list-btn"
:class="'bi bi-music-note-list ' + show"
@click="$emit('list', 'showplaylist')"></button>
<button
id="loop-btn"
:class="'bi bi-infinity ' + loop"
@click="$emit('loop', 'loop')"></button>
<button class="bi bi-three-dots" @click="showmenu = !showmenu; if (show) $emit('list', 'showplaylist')"></button>
<div id="menu" v-if="showmenu" class="popup">
<button id="addToPlaylist" title="Add Current Song to a Playlist" class="bi bi-collection" @click="Save"></button>
<button
id="list-btn"
title="Current Playlist"
:class="'bi bi-music-note-list ' + show"
@click="$emit('list', 'showplaylist')"></button>
<button
id="loop-btn"
title="Loop"
:class="'bi bi-infinity ' + loop"
@click="$emit('loop', 'loop')"></button>
</div>
</div>
</div>
</template>
@ -80,9 +122,19 @@ defineEmits(['vol', 'play', 'list', 'loop', 'change-time']);
.bi-infinity {
font-size: 1.75rem !important;
}
.popup {
.ml-auto {
margin-left: auto;
}
#menu {
bottom: 1.5rem;
left: -1.75rem;
box-shadow: .5rem .5rem 2rem var(--color-shadow);
}
#vol {
--h: 6.5rem;
--w: 1rem;
display: flex;
box-shadow: -.5rem -.5rem 2rem var(--color-shadow);
transform: rotateZ(270deg) translateX(calc(calc(var(--h) / 2) - 0.5rem))
translateY(calc(calc(var(--w) + 2rem) * -1));
}