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

Search Improvements

Browse source
This commit is contained in:
Shiny Nematoda 2022-05-03 19:17:48 +05:30
parent 51c56abe16
commit 19fc65e6c0
19 changed files with 545 additions and 404 deletions
Download patch file Download diff file Expand all files Collapse all files

173
src/components/NewPlaylist.vue
View file

@ -1,90 +1,111 @@
<script setup>
import { ref, onMounted } from 'vue'
import AlbumItem from './AlbumItem.vue'
import Modal from './Modal.vue'
import { ref, onMounted } from 'vue';
import AlbumItem from './AlbumItem.vue';
import Modal from './Modal.vue';
import { useRand } from '../scripts/colors.js'
import { useListPlaylists, useGetPlaylist, useCreatePlaylist } from '../scripts/db.js'
import { useRand } from '../scripts/colors.js';
const emit = defineEmits(['play-urls'])
import {
useListPlaylists,
useGetPlaylist,
useCreatePlaylist,
} from '../scripts/db.js';
const list = ref([]),
show = ref(false),
text = ref('');
const emit = defineEmits(['play-urls']),
function Play(key) {
console.log(key);
list = ref([]),
show = ref(false),
text = ref(''),
useGetPlaylist(key, res => {
console.log(res);
emit('play-urls', res.urls)
})
}
function List() {
useListPlaylists((res) => {
list.value = res
})
}
function Create() {
if (text.value) {
useCreatePlaylist(text.value, [], () => {
List()
show.value = false
})
}
}
Play = (key) => {
console.log(key);
onMounted(() => {
List()
})
useGetPlaylist(key, (res) => {
console.log(res);
emit('play-urls', res.urls);
});
},
List = () => {
useListPlaylists((res) => {
list.value = res;
});
},
Create = () => {
if (text.value) {
useCreatePlaylist(text.value, [], () => {
List();
show.value = false;
});
}
};
onMounted(() => {
List();
});
</script>
<template>
<div class="npl-wrap">
<Modal n="2" :display="show" title="Create a new Playlist..." @show="(e) => { show = e }" >
<template #content>
<input type="text" placeholder="Playlist name..." class="textbox" v-model="text" />
</template>
<template #buttons>
<button @click="show = false">Cancel</button>
<button @click="Create">Create</button>
</template>
</Modal>
<div class="npl-wrap">
<Modal
n="2"
:display="show"
title="Create a new Playlist..."
@show="
(e) => {
show = e;
}
">
<template #content>
<input
type="text"
placeholder="Playlist name..."
class="textbox"
v-model="text" />
</template>
<template #buttons>
<button @click="show = false">Cancel</button>
<button @click="Create">Create</button>
</template>
</Modal>
<div class="npl-box bi bi-plus-lg pop" @click="show = true"></div>
<div class="grid-3">
<template v-for="i in list">
<AlbumItem :name="i.name" :grad="useRand()" @open-album="Play(i.name)" />
</template>
</div>
</div>
<div class="npl-box bi bi-plus-lg pop" @click="show = true"></div>
<div class="grid-3">
<template v-for="i in list">
<AlbumItem
:name="i.name"
:grad="useRand()"
@open-album="Play(i.name)" />
</template>
</div>
</div>
</template>
<style scoped>
.npl-wrap {
padding-bottom: 5rem;
}
.npl-box {
margin: 0 auto 5rem auto;
border-radius: .5rem;
background-color: var(--color-background-mute);
padding: 2rem 3rem;
font-size: 4rem;
width: 10rem;
}
.npl-box:hover {
background-color: var(--color-background-soft);
}
.npl-round {
float: left;
display: inline-block;
height: 5rem;
width: 5rem;
border-radius: 50%;
background: v-bind('bg');
}
.text-box {
padding: 2rem;
}
</style>
.npl-wrap {
padding-bottom: 5rem;
}
.npl-box {
margin: 0 auto 5rem auto;
border-radius: 0.5rem;
background-color: var(--color-background-mute);
padding: 2rem 3rem;
font-size: 4rem;
width: 10rem;
}
.npl-box:hover {
background-color: var(--color-background-soft);
}
.npl-round {
float: left;
display: inline-block;
height: 5rem;
width: 5rem;
border-radius: 50%;
background: v-bind('bg');
}
.text-box {
padding: 2rem;
}
</style>