mirror of
https://codeberg.org/Hyperpipe/Hyperpipe
synced 2025-06-27 20:58:01 +02:00
Playlists, Play Next, Code Refactor
This commit is contained in:
Shiny Nematoda
parent
5486be7613
commit
51c56abe16
17 changed files with 664 additions and 204 deletions
|
|
@ -1,23 +1,23 @@
|
|||
<script setup>
|
||||
defineProps({
|
||||
name: String,
|
||||
author: String,
|
||||
author: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
grad: String,
|
||||
art: {
|
||||
type: String,
|
||||
default: '--art: linear-gradient(45deg, #88c0d0, #5e81ac);',
|
||||
default: 'linear-gradient(45deg, #88c0d0, #5e81ac)',
|
||||
},
|
||||
});
|
||||
|
||||
const emit = defineEmits(['open-album']);
|
||||
|
||||
function onClick() {
|
||||
emit('open-album');
|
||||
}
|
||||
defineEmits(['open-album']);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="album card pop" @click="onClick">
|
||||
<div class="card-bg bg-img pop-2" :style="art"></div>
|
||||
<div class="album card pop" @click="$emit('open-album')">
|
||||
<div class="card-bg bg-img pop-2"></div>
|
||||
|
||||
<div class="card-text">
|
||||
<h4>{{ name }}</h4>
|
||||
|
|
@ -38,6 +38,8 @@ function onClick() {
|
|||
background-color: var(--color-background);
|
||||
}
|
||||
.card-bg {
|
||||
--art: v-bind('grad || art');
|
||||
background: v-bind('grad');
|
||||
height: 13rem;
|
||||
width: 13rem;
|
||||
}
|
||||
|
|
|
|||
104
src/components/Modal.vue
Normal file
104
src/components/Modal.vue
Normal file
|
|
@ -0,0 +1,104 @@
|
|||
<script setup>
|
||||
import { ref, watch } from 'vue'
|
||||
|
||||
const props = defineProps(['display', 'title', 'n']),
|
||||
emit = defineEmits(['show']),
|
||||
show = ref(props.display);
|
||||
|
||||
watch(() => props.display, (n) => {
|
||||
console.log(n, props.display)
|
||||
show.value = n
|
||||
})
|
||||
watch(show, (n) => {
|
||||
emit('show', show.value)
|
||||
})
|
||||
</script>
|
||||
<template>
|
||||
<Transition name="fade">
|
||||
<div class="modal" v-if="show">
|
||||
<span class="bi bi-x modal-close" @click="show = false"></span>
|
||||
<div class="modal-box">
|
||||
<div class="modal-title">{{ title }}</div>
|
||||
<div class="modal-content">
|
||||
<slot name="content"></slot>
|
||||
</div>
|
||||
<div class="modal-buttons">
|
||||
<slot name="buttons"></slot>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Transition>
|
||||
</template>
|
||||
|
||||
<style>
|
||||
.modal {
|
||||
display: flex;
|
||||
position: fixed;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background-color: #00000066;
|
||||
z-index: 9999;
|
||||
}
|
||||
.modal-box {
|
||||
width: 50vw;
|
||||
border-radius: .5rem;
|
||||
background-color: var(--color-background-soft);
|
||||
}
|
||||
.modal-title {
|
||||
font-size: 1.25rem;
|
||||
padding: 1rem 2rem;
|
||||
border-bottom: 1px solid var(--color-shadow);
|
||||
}
|
||||
.modal-content {
|
||||
padding: 1rem;
|
||||
}
|
||||
.modal-content * {
|
||||
width: 100%;
|
||||
padding: 1rem;
|
||||
}
|
||||
.modal-close {
|
||||
color: var(--color-background);
|
||||
font-size: 2rem;
|
||||
position: fixed;
|
||||
top: 1rem;
|
||||
right: 1rem;
|
||||
}
|
||||
.modal-buttons {
|
||||
width: 100%;
|
||||
border-top: 1px solid var(--color-shadow);
|
||||
}
|
||||
.modal-buttons button {
|
||||
padding: 1rem 2rem;
|
||||
color: var(--color-foreground);
|
||||
width: calc(100% / v-bind('n'));
|
||||
font-size: 1rem;
|
||||
font-weight: bold;
|
||||
border-right: 1px solid var(--color-shadow);
|
||||
}
|
||||
.modal-buttons button:first-child {
|
||||
color: indianred;
|
||||
border-bottom-left-radius: .5rem;
|
||||
}
|
||||
.modal-buttons button:last-child {
|
||||
border: none;
|
||||
border-bottom-right-radius: .5rem;
|
||||
}
|
||||
.modal-buttons button:hover {
|
||||
background-color: var(--color-background-mute);
|
||||
}
|
||||
|
||||
@media (max-width: 530px) {
|
||||
.modal-box {
|
||||
width: 80vw;
|
||||
}
|
||||
}
|
||||
@media (min-width: 1024px) {
|
||||
.modal-box {
|
||||
width: 40vw;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,12 +1,35 @@
|
|||
<script setup>
|
||||
import { reactive } from 'vue'
|
||||
import SearchBar from '../components/SearchBar.vue';
|
||||
|
||||
defineEmits(['update-search']);
|
||||
const emit = defineEmits(['update-page', 'update-search']);
|
||||
|
||||
const page = reactive({
|
||||
home: true,
|
||||
playlist: false
|
||||
})
|
||||
|
||||
function Toggle(p) {
|
||||
for (let pg in page) {
|
||||
page[pg] = false
|
||||
}
|
||||
page[p] = true
|
||||
emit('update-page', p);
|
||||
}
|
||||
function home() {
|
||||
history.pushState('', {}, '/')
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<nav>
|
||||
<h1>Hyperpipe</h1>
|
||||
<h1 class="bi bi-vinyl" @click="home"></h1>
|
||||
|
||||
<div class="wrap">
|
||||
<span :class="'nav-ico bi bi-house ' + page.home" @click="Toggle('home')"></span>
|
||||
<span :class="'nav-ico bi bi-collection ' + page.playlist" @click="Toggle('playlist')"></span>
|
||||
</div>
|
||||
|
||||
<div class="wrap">
|
||||
<SearchBar
|
||||
|
|
@ -26,10 +49,18 @@ nav {
|
|||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
h1 {
|
||||
font-size: 2rem;
|
||||
h1.bi {
|
||||
font-size: calc(1.75rem + 1.5vw);
|
||||
}
|
||||
.bi {
|
||||
font-size: calc(1rem + 1vw);
|
||||
}
|
||||
.wrap {
|
||||
text-align: center;
|
||||
margin-left: auto;
|
||||
margin-right: .5rem;
|
||||
}
|
||||
.nav-ico {
|
||||
margin: 0 .5rem;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
90
src/components/NewPlaylist.vue
Normal file
90
src/components/NewPlaylist.vue
Normal file
|
|
@ -0,0 +1,90 @@
|
|||
<script setup>
|
||||
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'
|
||||
|
||||
const emit = defineEmits(['play-urls'])
|
||||
|
||||
const list = ref([]),
|
||||
show = ref(false),
|
||||
text = ref('');
|
||||
|
||||
function Play(key) {
|
||||
console.log(key);
|
||||
|
||||
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
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
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-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>
|
||||
|
|
@ -8,22 +8,24 @@ defineEmits(['playthis']);
|
|||
</script>
|
||||
|
||||
<template>
|
||||
<div v-if="show" class="modal placeholder">
|
||||
<template v-for="plurl in urls">
|
||||
<div class="pl-item" @click="$emit('playthis', plurl)">
|
||||
<span v-if="url == plurl.url" class="bars-wrap">
|
||||
<div class="bars"></div>
|
||||
<div class="bars"></div>
|
||||
<div class="bars"></div>
|
||||
</span>
|
||||
<span class="pl-main caps">{{ plurl.title }}</span>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
<Transition name="fade">
|
||||
<div v-if="show" class="pl-modal placeholder">
|
||||
<template v-for="plurl in urls">
|
||||
<div class="pl-item" @click="$emit('playthis', plurl)">
|
||||
<span v-if="url == plurl.url" class="bars-wrap">
|
||||
<div class="bars"></div>
|
||||
<div class="bars"></div>
|
||||
<div class="bars"></div>
|
||||
</span>
|
||||
<span class="pl-main caps">{{ plurl.title }}</span>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</Transition>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.modal {
|
||||
.pl-modal {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: fixed;
|
||||
|
|
@ -37,8 +39,6 @@ defineEmits(['playthis']);
|
|||
z-index: 99999;
|
||||
box-shadow: 0.1rem 0.1rem 1rem var(--color-shadow);
|
||||
padding: 1rem;
|
||||
transition: width 0.4s ease;
|
||||
animation: fade 0.4s ease;
|
||||
overflow-y: auto;
|
||||
}
|
||||
.placeholder:empty:before {
|
||||
|
|
|
|||
|
|
@ -5,16 +5,11 @@ import SongItem from './SongItem.vue';
|
|||
import AlbumItem from './AlbumItem.vue';
|
||||
|
||||
import { getJsonPiped, getPipedQuery } from '../scripts/fetch.js';
|
||||
import { useLazyLoad } from '../scripts/util.js';
|
||||
|
||||
const props = defineProps(['search', 'songItems', 'items']);
|
||||
|
||||
const emit = defineEmits([
|
||||
'get-album',
|
||||
'get-artist',
|
||||
'lazy',
|
||||
'play-urls',
|
||||
'add-song',
|
||||
]);
|
||||
const emit = defineEmits(['get-album', 'get-artist', 'play-urls', 'add-song']);
|
||||
|
||||
const data = reactive({
|
||||
notes: null,
|
||||
|
|
@ -47,7 +42,7 @@ function getSearch(q) {
|
|||
document.title = 'Search Results for ' + q;
|
||||
|
||||
getResults(pq);
|
||||
emit('lazy');
|
||||
useLazyLoad();
|
||||
} else {
|
||||
Reset();
|
||||
|
||||
|
|
@ -103,7 +98,7 @@ watch(
|
|||
data[i] = {};
|
||||
data[i].items = itms[i];
|
||||
|
||||
console.log(i + ': ' + data[i]);
|
||||
console.log(i, data[i]);
|
||||
}
|
||||
},
|
||||
);
|
||||
|
|
@ -111,7 +106,7 @@ watch(
|
|||
|
||||
<template>
|
||||
<div v-if="data.songs && data.songs.corrected" class="text-full">
|
||||
I Fixed your Typo, "<span class="caps">{{ data.songs.suggestion }}</span
|
||||
Did you mean, "<span class="caps">{{ data.songs.suggestion }}</span
|
||||
>"!!
|
||||
</div>
|
||||
|
||||
|
|
@ -129,11 +124,12 @@ watch(
|
|||
:title="song.title || song.name"
|
||||
:channel="song.uploaderUrl || ''"
|
||||
:play="song.url || '/watch?v=' + song.id"
|
||||
:art="'url(' + (song.thumbnail || song.thumbnails[1].url) + ')'"
|
||||
@open-song="
|
||||
$emit('play-urls', [
|
||||
{
|
||||
url: song.url || '/watch?v=' + song.id,
|
||||
title: song.title || song.name,
|
||||
title: (song.title || song.name),
|
||||
},
|
||||
])
|
||||
"
|
||||
|
|
@ -141,15 +137,7 @@ watch(
|
|||
(e) => {
|
||||
$emit('get-artist', e);
|
||||
}
|
||||
">
|
||||
<template #art>
|
||||
<div
|
||||
:style="`--art: url(${
|
||||
song.thumbnail || song.thumbnails[1].url
|
||||
});`"
|
||||
class="pop-2 bg-img song-bg"></div>
|
||||
</template>
|
||||
</SongItem>
|
||||
" />
|
||||
</template>
|
||||
</div>
|
||||
<a
|
||||
|
|
@ -168,9 +156,7 @@ watch(
|
|||
<AlbumItem
|
||||
:author="album.uploaderName || album.subtitle"
|
||||
:name="album.name || album.title"
|
||||
:art="
|
||||
'--art: url(' + (album.thumbnail || album.thumbnails[0].url) + ');'
|
||||
"
|
||||
:art="'url(' + (album.thumbnail || album.thumbnails[0].url) + ')'"
|
||||
@open-album="
|
||||
$emit('get-album', album.url || '/playlist?list=' + album.id)
|
||||
" />
|
||||
|
|
@ -185,7 +171,7 @@ watch(
|
|||
<AlbumItem
|
||||
:author="single.subtitle"
|
||||
:name="single.title"
|
||||
:art="'--art: url(' + single.thumbnails[0].url + ');'"
|
||||
:art="'url(' + single.thumbnails[0].url + ')'"
|
||||
@open-album="$emit('get-album', '/playlist?list=' + single.id)" />
|
||||
</template>
|
||||
</div>
|
||||
|
|
@ -200,7 +186,7 @@ watch(
|
|||
<AlbumItem
|
||||
:author="artist.subtitle"
|
||||
:name="artist.title"
|
||||
:art="'--art: url(' + artist.thumbnails[0].url + ');'"
|
||||
:art="'url(' + artist.thumbnails[0].url + ')'"
|
||||
@open-album="$emit('get-artist', artist.id)" />
|
||||
</template>
|
||||
</div>
|
||||
|
|
@ -219,11 +205,6 @@ watch(
|
|||
.search-albums h2 {
|
||||
text-align: center;
|
||||
}
|
||||
.search-albums .grid-3,
|
||||
.search-artists .grid-3 {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
.search-artists {
|
||||
text-align: center;
|
||||
}
|
||||
|
|
@ -236,26 +217,9 @@ watch(
|
|||
.text-right {
|
||||
text-align: right;
|
||||
}
|
||||
.song-bg {
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
}
|
||||
.more {
|
||||
margin: 1.5rem 0.5rem;
|
||||
font-weight: bold;
|
||||
font-size: 1rem;
|
||||
}
|
||||
@media (min-width: 530px) {
|
||||
.search-albums .grid-3,
|
||||
.search-artists .grid-3 {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
}
|
||||
}
|
||||
@media (min-width: 1024px) {
|
||||
.search-albums .grid-3,
|
||||
.search-artists .grid-3 {
|
||||
grid-template-columns: 1fr 1fr 1fr;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,17 +1,26 @@
|
|||
<script setup>
|
||||
import { ref } from 'vue';
|
||||
|
||||
defineProps(['search']);
|
||||
defineEmits(['update-search']);
|
||||
|
||||
const show = ref(false);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<button class="bi bi-search popup-wrap">
|
||||
<div class="popup">
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Search..."
|
||||
@change="$emit('update-search', $event.target.value)"
|
||||
:value="search" />
|
||||
</div>
|
||||
<button
|
||||
class="bi bi-search popup-wrap"
|
||||
@mouseenter="show = true"
|
||||
@mouseleave="show = false">
|
||||
<Transition name="fade">
|
||||
<div v-if="show" class="popup">
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Search..."
|
||||
@change="$emit('update-search', $event.target.value)"
|
||||
:value="search" />
|
||||
</div>
|
||||
</Transition>
|
||||
</button>
|
||||
</template>
|
||||
|
||||
|
|
@ -24,8 +33,7 @@ defineEmits(['update-search']);
|
|||
}
|
||||
.popup input {
|
||||
color: var(--color-text);
|
||||
--width: calc(100vw - 4rem);
|
||||
width: 1.5rem;
|
||||
width: calc(100vw - 4rem);
|
||||
max-width: 600px;
|
||||
font-size: 1rem;
|
||||
border: none;
|
||||
|
|
@ -33,10 +41,5 @@ defineEmits(['update-search']);
|
|||
background: var(--color-background-mute);
|
||||
outline: none;
|
||||
text-align: center;
|
||||
animation: fill 0.4s ease;
|
||||
transform: width 0.4s ease;
|
||||
}
|
||||
.popup input:hover {
|
||||
width: var(--width);
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,13 +1,18 @@
|
|||
<script setup>
|
||||
import { ref, onMounted } from 'vue';
|
||||
|
||||
const props = defineProps({
|
||||
author: String,
|
||||
title: String,
|
||||
channel: String,
|
||||
play: String,
|
||||
art: String,
|
||||
});
|
||||
|
||||
const emit = defineEmits(['get-artist', 'open-song']);
|
||||
|
||||
const show = ref(false);
|
||||
|
||||
function openSong(el) {
|
||||
if (!el.classList.contains('ign')) {
|
||||
emit('open-song', props.play);
|
||||
|
|
@ -38,10 +43,14 @@ async function Share() {
|
|||
);
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
console.log(props)
|
||||
})
|
||||
</script>
|
||||
<template>
|
||||
<div class="song card flex pop" @click="openSong($event.target)">
|
||||
<slot name="art"></slot>
|
||||
<div class="pop-2 bg-img song-bg"></div>
|
||||
|
||||
<span class="flex content">
|
||||
<h4>{{ title }}</h4>
|
||||
|
|
@ -53,16 +62,21 @@ async function Share() {
|
|||
</a>
|
||||
</span>
|
||||
|
||||
<span class="bi bi-three-dots-vertical popup-wrap ign">
|
||||
<div class="popup ign">
|
||||
<span
|
||||
class="bi bi-plus-lg ign"
|
||||
@click="
|
||||
$parent.$emit('add-song', { url: play, title: title })
|
||||
"></span>
|
||||
<span
|
||||
class="bi bi-three-dots-vertical popup-wrap ign"
|
||||
@mouseenter="show = true"
|
||||
@mouseleave="show = false">
|
||||
<Transition name="fade">
|
||||
<div v-if="show" class="popup ign">
|
||||
<span
|
||||
class="bi bi-plus-lg ign"
|
||||
@click="
|
||||
$parent.$emit('add-song', { url: play, title: title })
|
||||
"></span>
|
||||
|
||||
<span class="bi bi-share ign" @click="Share"></span>
|
||||
</div>
|
||||
<span class="bi bi-share ign" @click="Share"></span>
|
||||
</div>
|
||||
</Transition>
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -92,4 +106,9 @@ span.bi-three-dots-vertical {
|
|||
.popup span {
|
||||
padding: 0.5rem;
|
||||
}
|
||||
.song-bg {
|
||||
--art: v-bind('art');
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -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));
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue