mirror of
https://codeberg.org/Hyperpipe/Hyperpipe
synced 2025-06-28 13:08:01 +02:00
Switched to Pinia, Added Save for Albums
This commit is contained in:
Shiny Nematoda
parent
a43b0907e2
commit
f303f91108
25 changed files with 945 additions and 799 deletions
|
|
@ -2,7 +2,10 @@
|
|||
import { ref, onUpdated } from 'vue';
|
||||
import PlayBtn from './PlayBtn.vue';
|
||||
|
||||
defineProps(['title', 'desc', 'subs', 'thumbs', 'play']);
|
||||
import { useArtist } from '@/stores/results.js';
|
||||
|
||||
const artist = useArtist();
|
||||
|
||||
defineEmits(['playall']);
|
||||
|
||||
const show = ref(-1);
|
||||
|
|
@ -14,14 +17,21 @@ onUpdated(() => {
|
|||
</script>
|
||||
|
||||
<template>
|
||||
<div v-if="show == 0 && title" class="us-wrap">
|
||||
<div class="bg-imgfill" :style="'--art: url(' + thumbs[1].url + ');'"></div>
|
||||
<div v-if="show == 0 && artist.state.title" class="us-wrap">
|
||||
<div
|
||||
class="bg-imgfill"
|
||||
:style="'--art: url(' + artist.state.thumbnails[1].url + ');'"></div>
|
||||
<div class="us-main">
|
||||
<h2>{{ title }}</h2>
|
||||
<p @click="$event.target.classList.toggle('more')">{{ desc }}</p>
|
||||
<h2>{{ artist.state.title }}</h2>
|
||||
<p @click="$event.target.classList.toggle('more')">
|
||||
{{ artist.state.description }}
|
||||
</p>
|
||||
<div class="us-playwrap">
|
||||
<PlayBtn @click="$emit('playall', '/playlist?list=' + play)" />
|
||||
<span class="us-box subs">{{ subs || 0 }}</span>
|
||||
<PlayBtn
|
||||
@click="
|
||||
$emit('playall', '/playlist?list=' + artist.state.playlistId)
|
||||
" />
|
||||
<span class="us-box subs">{{ artist.state.subscriberCount || 0 }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -132,9 +132,9 @@ onMounted(get);
|
|||
|
||||
@media (min-width: 1024px) {
|
||||
.btn-grid {
|
||||
grid-template-columns: calc(100% / 5) calc(100% / 5) calc(100% / 5) calc(
|
||||
100% / 5
|
||||
) calc(100% / 5);
|
||||
grid-template-columns:
|
||||
calc(100% / 5) calc(100% / 5) calc(100% / 5) calc(100% / 5)
|
||||
calc(100% / 5);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -10,7 +10,18 @@ const parse = d =>
|
|||
<template>
|
||||
<TextModal>
|
||||
<template #content>
|
||||
<pre>{{ parse(text.replaceAll('<br>', '\n')) }}</pre>
|
||||
<pre class="placeholder">{{
|
||||
text ? parse(text.replaceAll('<br>', '\n')) : ''
|
||||
}}</pre>
|
||||
</template>
|
||||
</TextModal>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.placeholder:empty::before {
|
||||
--ico: '\F3B9';
|
||||
}
|
||||
.placeholder:empty::after {
|
||||
--text: 'No Information Available...';
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,38 +1,31 @@
|
|||
<script setup>
|
||||
import { ref, watch } from 'vue';
|
||||
|
||||
import { getJson } from '../scripts/fetch.js';
|
||||
import { getJson } from '@/scripts/fetch.js';
|
||||
import { useData } from '@/stores/player.js';
|
||||
|
||||
import TextModal from './TextModal.vue';
|
||||
|
||||
const props = defineProps({
|
||||
id: String,
|
||||
curl: String,
|
||||
iniurl: String,
|
||||
}),
|
||||
const data = useData(),
|
||||
text = ref(''),
|
||||
source = ref(''),
|
||||
status = ref(false);
|
||||
|
||||
console.log(props);
|
||||
|
||||
function get() {
|
||||
status.value = false;
|
||||
|
||||
if (props.id && props.curl === props.iniurl) {
|
||||
console.log(props.id);
|
||||
|
||||
getJson('https://hyperpipeapi.onrender.com/browse/' + props.id).then(
|
||||
res => {
|
||||
text.value = res.text;
|
||||
source.value = res.source;
|
||||
status.value = true;
|
||||
},
|
||||
);
|
||||
} else if (props.curl) {
|
||||
if (data.state.lyrics && data.state.urls === data.state.urls[0]?.url) {
|
||||
getJson(
|
||||
'https://hyperpipeapi.onrender.com/browse/' + data.state.lyrics,
|
||||
).then(res => {
|
||||
text.value = res.text;
|
||||
source.value = res.source;
|
||||
status.value = true;
|
||||
});
|
||||
} else if (data.state.urls[0]?.url) {
|
||||
getJson(
|
||||
'https://hyperpipeapi.onrender.com/next/' +
|
||||
props.curl.replace('/watch?v=', ''),
|
||||
data.state.urls[0]?.url.replace('/watch?v=', ''),
|
||||
).then(next => {
|
||||
if (next.lyricsId) {
|
||||
getJson(
|
||||
|
|
@ -50,7 +43,7 @@ function get() {
|
|||
get();
|
||||
|
||||
watch(
|
||||
() => props.curl,
|
||||
() => data.state.urls[0]?.url,
|
||||
() => {
|
||||
get();
|
||||
},
|
||||
|
|
@ -60,22 +53,24 @@ watch(
|
|||
<template>
|
||||
<TextModal>
|
||||
<template #content>
|
||||
<pre class="placeholder" :data-loaded="curl ? status : true">{{
|
||||
text
|
||||
}}</pre>
|
||||
<pre
|
||||
class="placeholder"
|
||||
:data-loaded="data.state.urls[0]?.url ? status : true"
|
||||
>{{ text }}</pre
|
||||
>
|
||||
<div>{{ source }}</div>
|
||||
</template>
|
||||
</TextModal>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
pre:empty::before {
|
||||
.placeholder:empty::before {
|
||||
--ico: '\f3a5';
|
||||
}
|
||||
pre[data-loaded='false']:empty::after {
|
||||
.placeholder[data-loaded='false']:empty::after {
|
||||
--text: 'Fetching Lyrics...';
|
||||
}
|
||||
pre[data-loaded='true']:empty::after {
|
||||
.placeholder[data-loaded='true']:empty::after {
|
||||
--text: 'No Lyrics...';
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -2,30 +2,9 @@
|
|||
import { reactive } from 'vue';
|
||||
import SearchBar from '../components/SearchBar.vue';
|
||||
|
||||
defineProps({
|
||||
search: String,
|
||||
});
|
||||
import { useNav } from '@/stores/misc.js';
|
||||
|
||||
const emit = defineEmits(['update-page', 'update-search']),
|
||||
page = reactive({
|
||||
home: true,
|
||||
playlist: false,
|
||||
prefs: false,
|
||||
genres: false,
|
||||
});
|
||||
|
||||
const Toggle = p => {
|
||||
for (let pg in page) {
|
||||
page[pg] = false;
|
||||
}
|
||||
page[p] = true;
|
||||
emit('update-page', p);
|
||||
|
||||
console.log(page[p], p);
|
||||
},
|
||||
home = () => {
|
||||
history.pushState('', {}, '/');
|
||||
};
|
||||
const nav = useNav();
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
|
@ -35,30 +14,24 @@ const Toggle = p => {
|
|||
<div class="wrap">
|
||||
<span
|
||||
class="nav-ico bi bi-house"
|
||||
:data-active="page.home"
|
||||
@click="Toggle('home')"></span>
|
||||
:data-active="nav.state.page == 'home'"
|
||||
@click="nav.state.page = 'home'"></span>
|
||||
<span
|
||||
class="nav-ico bi bi-compass"
|
||||
:data-active="page.genres"
|
||||
@click="Toggle('genres')"></span>
|
||||
:data-active="nav.state.page == 'genres'"
|
||||
@click="nav.state.page = 'genres'"></span>
|
||||
<span
|
||||
class="nav-ico bi bi-collection"
|
||||
:data-active="page.playlist"
|
||||
@click="Toggle('playlist')"></span>
|
||||
:data-active="nav.state.page == 'playlist'"
|
||||
@click="nav.state.page = 'playlist'"></span>
|
||||
<span
|
||||
class="nav-ico bi bi-gear"
|
||||
:data-active="page.prefs"
|
||||
@click="Toggle('prefs')"></span>
|
||||
:data-active="nav.state.page == 'prefs'"
|
||||
@click="nav.state.page = 'prefs'"></span>
|
||||
</div>
|
||||
|
||||
<div class="wrap">
|
||||
<SearchBar
|
||||
:search="search"
|
||||
@update-search="
|
||||
e => {
|
||||
$emit('update-search', e);
|
||||
}
|
||||
" />
|
||||
<SearchBar />
|
||||
</div>
|
||||
</nav>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -1,28 +1,20 @@
|
|||
<script setup>
|
||||
defineProps({
|
||||
title: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
artist: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
artistUrl: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
});
|
||||
import { useData } from '@/stores/player.js';
|
||||
|
||||
const data = useData();
|
||||
|
||||
defineEmits(['get-artist']);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div v-if="title && artist" class="wrap">
|
||||
<h1>{{ title }}</h1>
|
||||
<div v-if="data.state.title && data.state.artist" class="wrap">
|
||||
<h1>{{ data.state.title }}</h1>
|
||||
<h3>
|
||||
<a :href="artistUrl" @click.prevent="$emit('get-artist', artistUrl)">{{
|
||||
artist
|
||||
}}</a>
|
||||
<a
|
||||
:href="data.state.artistUrl"
|
||||
@click.prevent="$emit('get-artist', data.state.artistUrl)"
|
||||
>{{ data.state.artist }}</a
|
||||
>
|
||||
</h3>
|
||||
</div>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -1,13 +1,16 @@
|
|||
<script setup>
|
||||
defineProps(['ico']);
|
||||
defineEmits(['click']);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<button class="bi bi-play" @click="$emit('click')"></button>
|
||||
<button
|
||||
:class="'bi bi-' + (ico ? ico : 'play')"
|
||||
@click="$emit('click')"></button>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
button {
|
||||
.bi {
|
||||
height: 4rem;
|
||||
width: 4rem;
|
||||
font-size: 4rem;
|
||||
|
|
@ -21,10 +24,14 @@ button {
|
|||
transition: background 0.4s ease;
|
||||
margin-right: auto;
|
||||
}
|
||||
button:before {
|
||||
.bi-play:before {
|
||||
padding-left: 0.2rem;
|
||||
}
|
||||
button:hover {
|
||||
.bi:hover,
|
||||
.bi:not(.bi-play) {
|
||||
background: transparent;
|
||||
}
|
||||
.bi:not(.bi-play) {
|
||||
font-size: 3rem;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,19 +1,18 @@
|
|||
<script setup>
|
||||
defineProps({
|
||||
url: String,
|
||||
urls: Array,
|
||||
show: Boolean,
|
||||
});
|
||||
import { useData, usePlayer } from '@/stores/player.js';
|
||||
|
||||
const player = usePlayer(),
|
||||
data = useData();
|
||||
|
||||
defineEmits(['playthis']);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Transition name="fade">
|
||||
<div v-if="show" class="pl-modal placeholder">
|
||||
<template v-for="plurl in urls">
|
||||
<div class="pl-modal placeholder">
|
||||
<template v-for="plurl in data.state.urls">
|
||||
<div class="pl-item" @click="$emit('playthis', plurl)">
|
||||
<span v-if="url == plurl.url" class="bars-wrap">
|
||||
<span v-if="data.state.url == plurl.url" class="bars-wrap">
|
||||
<div class="bars"></div>
|
||||
<div class="bars"></div>
|
||||
<div class="bars"></div>
|
||||
|
|
@ -22,7 +21,8 @@ defineEmits(['playthis']);
|
|||
<img
|
||||
:src="plurl.thumbnails[0].url"
|
||||
:height="plurl.thumbnails[0].height"
|
||||
:width="plurl.thumbnails[0].width" />
|
||||
:width="plurl.thumbnails[0].width"
|
||||
loading="lazy" />
|
||||
</div>
|
||||
<span class="pl-main caps">{{ plurl.title }}</span>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -63,6 +63,7 @@ onMounted(() => {
|
|||
@change="setTheme($event.target.value)">
|
||||
<option value="dark">Dark (Default)</option>
|
||||
<option value="light">Light</option>
|
||||
<option value="dracula">Dracula</option>
|
||||
<option value="nord">Nord</option>
|
||||
</select>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,40 +1,45 @@
|
|||
<script setup>
|
||||
import { ref, reactive, watch } from 'vue';
|
||||
import { ref, reactive, watch, onUpdated } from 'vue';
|
||||
|
||||
import PlayBtn from './PlayBtn.vue';
|
||||
import SongItem from './SongItem.vue';
|
||||
import AlbumItem from './AlbumItem.vue';
|
||||
|
||||
import { getJsonPiped, getPipedQuery } from '../scripts/fetch.js';
|
||||
import { useLazyLoad } from '../scripts/util.js';
|
||||
import { useLazyLoad, useRoute } from '../scripts/util.js';
|
||||
import { useCreatePlaylist } from '../scripts/db.js';
|
||||
|
||||
const props = defineProps(['search', 'songItems', 'items']),
|
||||
emit = defineEmits(['get-album', 'get-artist', 'play-urls', 'add-song']),
|
||||
import { useResults, useArtist } from '@/stores/results.js';
|
||||
import { useNav } from '@/stores/misc.js';
|
||||
|
||||
const results = useResults(),
|
||||
nav = useNav(),
|
||||
artist = useArtist();
|
||||
|
||||
const emit = defineEmits(['get-album', 'get-artist', 'play-urls', 'add-song']),
|
||||
filters = ['music_songs', 'music_albums', 'music_artists'],
|
||||
filter = ref('music_songs'),
|
||||
isSearch = ref(/search/.test(location.pathname)),
|
||||
data = reactive({
|
||||
notes: null,
|
||||
albums: null,
|
||||
albumTitle: null,
|
||||
songs: null,
|
||||
artists: null,
|
||||
recommendedArtists: null,
|
||||
});
|
||||
isSearch = ref(/search/.test(location.pathname));
|
||||
|
||||
const Reset = () => {
|
||||
isSearch.value = /search/.test(location.pathname);
|
||||
|
||||
for (let i in data) {
|
||||
data[i] = null;
|
||||
}
|
||||
},
|
||||
playAlbum = () => {
|
||||
const urls = data.songs.items.map(item => {
|
||||
const playAlbum = () => {
|
||||
const urls = results.items?.songs?.items?.map(item => {
|
||||
return { url: item.url, title: item.title };
|
||||
});
|
||||
|
||||
emit('play-urls', urls);
|
||||
},
|
||||
saveAlbum = () => {
|
||||
const urls = results.items?.songs?.items?.map(item => {
|
||||
return { url: item.url, title: item.title };
|
||||
}),
|
||||
title = results.items?.songs?.title;
|
||||
|
||||
if (title) {
|
||||
useCreatePlaylist(title, urls, () => {
|
||||
alert('Saved!');
|
||||
});
|
||||
}
|
||||
},
|
||||
getSearch = q => {
|
||||
if (q) {
|
||||
const pq = q.split(' ').join('+');
|
||||
|
|
@ -47,74 +52,60 @@ const Reset = () => {
|
|||
getResults(pq);
|
||||
useLazyLoad();
|
||||
} else {
|
||||
Reset();
|
||||
results.resetItems();
|
||||
|
||||
history.pushState({}, '', '/');
|
||||
useRoute('/');
|
||||
document.title = 'Hyperpipe';
|
||||
|
||||
console.log('No Search');
|
||||
}
|
||||
},
|
||||
getResults = async q => {
|
||||
const f = filter.value || 'music_songs',
|
||||
json = await getJsonPiped(`/search?q=${q}&filter=${f}`);
|
||||
results.resetItems();
|
||||
|
||||
data[f.split('_')[1]] = json;
|
||||
console.log(json, data);
|
||||
const f = filter.value || 'music_songs',
|
||||
json = await getJsonPiped(`/search?q=${q}&filter=${f}`),
|
||||
key = f.split('_')[1];
|
||||
|
||||
results.setItem(key, json);
|
||||
|
||||
console.log(json, key);
|
||||
};
|
||||
|
||||
watch(
|
||||
() => props.search,
|
||||
() => nav.state.search,
|
||||
n => {
|
||||
if (n) {
|
||||
Reset();
|
||||
|
||||
n = n.replace(location.search || '', '');
|
||||
|
||||
console.log(n);
|
||||
|
||||
artist.reset();
|
||||
getSearch(n);
|
||||
}
|
||||
},
|
||||
);
|
||||
|
||||
watch(
|
||||
() => props.songItems,
|
||||
i => {
|
||||
console.log(i);
|
||||
|
||||
Reset();
|
||||
|
||||
data.songs = i;
|
||||
data.albumTitle = i.title;
|
||||
},
|
||||
);
|
||||
|
||||
watch(
|
||||
() => props.items,
|
||||
itms => {
|
||||
Reset();
|
||||
|
||||
console.log(itms);
|
||||
|
||||
for (let i in itms) {
|
||||
data[i] = {};
|
||||
data[i].items = itms[i];
|
||||
|
||||
console.log(i, data[i]);
|
||||
}
|
||||
},
|
||||
);
|
||||
onUpdated(() => {
|
||||
isSearch.value = /search/.test(location.pathname);
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div v-if="data.songs && data.songs.corrected" class="text-full">
|
||||
Did you mean, "<span class="caps">{{ data.songs.suggestion }}</span
|
||||
<div
|
||||
v-if="results.items.songs && results.items.songs.corrected"
|
||||
class="text-full">
|
||||
Did you mean, "<span class="caps">{{
|
||||
results.items?.songs?.suggestion
|
||||
}}</span
|
||||
>"!!
|
||||
</div>
|
||||
|
||||
<div v-if="data.albumTitle" class="text-full flex">
|
||||
<div v-if="results.items?.songs?.title" class="text-full flex">
|
||||
<PlayBtn @click="playAlbum" />
|
||||
<span>{{ data.albumTitle }}</span>
|
||||
<PlayBtn ico="plus" @click="saveAlbum" />
|
||||
|
||||
<span>{{ results.items?.songs?.title }}</span>
|
||||
</div>
|
||||
|
||||
<div v-if="isSearch" class="filters">
|
||||
|
|
@ -123,18 +114,19 @@ watch(
|
|||
class="filter caps"
|
||||
@click="
|
||||
filter = f;
|
||||
Reset();
|
||||
getSearch(search);
|
||||
getSearch(nav.state.search);
|
||||
"
|
||||
:data-active="f == filter">
|
||||
{{ f.split('_')[1] }}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div v-if="data.songs && data.songs.items[0]" class="search-songs">
|
||||
<div
|
||||
v-if="results.items.songs && results.items.songs.items[0]"
|
||||
class="search-songs">
|
||||
<h2>Songs</h2>
|
||||
<div class="grid">
|
||||
<template v-for="song in data.songs.items">
|
||||
<template v-for="song in results.items.songs.items">
|
||||
<SongItem
|
||||
:author="song.uploaderName || song.subtitle"
|
||||
:title="song.title || song.name"
|
||||
|
|
@ -163,18 +155,22 @@ watch(
|
|||
</template>
|
||||
</div>
|
||||
<a
|
||||
v-if="data.notes"
|
||||
@click.prevent="$emit('get-album', '/playlist?list=' + data.notes.items)"
|
||||
v-if="results.items.notes"
|
||||
@click.prevent="
|
||||
$emit('get-album', '/playlist?list=' + results.items.notes.items)
|
||||
"
|
||||
class="more"
|
||||
:href="'/playlist?list=' + data.notes.items"
|
||||
:href="'/playlist?list=' + results.items.notes.items"
|
||||
>See All</a
|
||||
>
|
||||
</div>
|
||||
|
||||
<div v-if="data.albums && data.albums.items[0]" class="search-albums">
|
||||
<div
|
||||
v-if="results.items.albums && results.items.albums.items[0]"
|
||||
class="search-albums">
|
||||
<h2>Albums</h2>
|
||||
<div class="grid-3">
|
||||
<template v-for="album in data.albums.items">
|
||||
<template v-for="album in results.items.albums.items">
|
||||
<AlbumItem
|
||||
:author="album.uploaderName || album.subtitle"
|
||||
:name="album.name || album.title"
|
||||
|
|
@ -186,10 +182,12 @@ watch(
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="data.singles && data.singles.items[0]" class="search-albums">
|
||||
<div
|
||||
v-if="results.items.singles && results.items.singles.items[0]"
|
||||
class="search-albums">
|
||||
<h2>Singles</h2>
|
||||
<div class="grid-3">
|
||||
<template v-for="single in data.singles.items">
|
||||
<template v-for="single in results.items.singles.items">
|
||||
<AlbumItem
|
||||
:author="single.subtitle"
|
||||
:name="single.title"
|
||||
|
|
@ -201,16 +199,17 @@ watch(
|
|||
|
||||
<div
|
||||
v-if="
|
||||
(data.recommendedArtists && data.recommendedArtists.items[0]) ||
|
||||
(data.artists && data.artists.items[0])
|
||||
(results.items.recommendedArtists &&
|
||||
results.items.recommendedArtists.items[0]) ||
|
||||
(results.items.artists && results.items.artists.items[0])
|
||||
"
|
||||
class="search-artists">
|
||||
<h2>{{ data.artists ? 'Artists' : 'Similar Artists' }}</h2>
|
||||
<h2>{{ results.items.artists ? 'Artists' : 'Similar Artists' }}</h2>
|
||||
<div class="grid-3 circle">
|
||||
<template
|
||||
v-for="artist in data.artists
|
||||
? data.artists.items
|
||||
: data.recommendedArtists.items">
|
||||
v-for="artist in results.items.artists
|
||||
? results.items.artists.items
|
||||
: results.items.recommendedArtists.items">
|
||||
<AlbumItem
|
||||
:author="artist.subtitle"
|
||||
:name="artist.name || artist.title"
|
||||
|
|
@ -241,6 +240,9 @@ watch(
|
|||
.search-artists {
|
||||
text-align: center;
|
||||
}
|
||||
:deep(.bi-play) {
|
||||
margin-right: 0.75rem;
|
||||
}
|
||||
.filters {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
|
|
|
|||
|
|
@ -1,13 +1,9 @@
|
|||
<script setup>
|
||||
import { ref } from 'vue';
|
||||
import { useNav } from '@/stores/misc.js';
|
||||
|
||||
defineProps({
|
||||
search: String,
|
||||
});
|
||||
|
||||
defineEmits(['update-search']);
|
||||
|
||||
const show = ref(false);
|
||||
const show = ref(false),
|
||||
nav = useNav();
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
|
@ -22,8 +18,8 @@ const show = ref(false);
|
|||
type="text"
|
||||
aria-label="Search Input"
|
||||
placeholder="Search..."
|
||||
@change="$emit('update-search', $event.target.value)"
|
||||
:value="search" />
|
||||
@change="nav.state.search = $event.target.value"
|
||||
:value="nav.state.search" />
|
||||
</div>
|
||||
</Transition>
|
||||
</button>
|
||||
|
|
|
|||
|
|
@ -6,16 +6,12 @@ import Modal from './Modal.vue';
|
|||
import { useStore } from '../scripts/util.js';
|
||||
import { useListPlaylists } from '../scripts/db.js';
|
||||
|
||||
defineProps({
|
||||
state: String,
|
||||
time: Number,
|
||||
show: Boolean,
|
||||
loop: Boolean,
|
||||
lyrics: Boolean,
|
||||
});
|
||||
import { usePlayer } from '../stores/player.js';
|
||||
|
||||
const emit = defineEmits(['vol', 'play', 'toggle', 'save', 'change-time']),
|
||||
vol = ref(useStore().vol / 100 || 1),
|
||||
const player = usePlayer(),
|
||||
store = useStore();
|
||||
|
||||
const emit = defineEmits(['vol', 'save', 'change-time']),
|
||||
showme = reactive({
|
||||
menu: false,
|
||||
pl: false,
|
||||
|
|
@ -76,13 +72,13 @@ function Save() {
|
|||
<button
|
||||
id="btn-play-pause"
|
||||
aria-label="Play or Pause"
|
||||
:class="'bi bi-' + state"
|
||||
@click="$emit('play')"></button>
|
||||
:class="'bi bi-' + player.state.status"
|
||||
@click="player.toggle('play')"></button>
|
||||
|
||||
<div id="statusbar-progress" class="range-wrap">
|
||||
<input
|
||||
aria-label="Change Time"
|
||||
:value="time"
|
||||
:value="player.state.time"
|
||||
type="range"
|
||||
name="statusbar-progress"
|
||||
max="100"
|
||||
|
|
@ -102,13 +98,10 @@ function Save() {
|
|||
id="vol-input"
|
||||
aria-label="Volume Input"
|
||||
type="range"
|
||||
:value="vol"
|
||||
:value="player.state.vol"
|
||||
max="1"
|
||||
step=".01"
|
||||
@input="
|
||||
$emit('vol', $event.target.value);
|
||||
vol = $event.target.value;
|
||||
" />
|
||||
@input="player.state.vol = $event.target.value" />
|
||||
</div>
|
||||
</Transition>
|
||||
</button>
|
||||
|
|
@ -117,15 +110,15 @@ function Save() {
|
|||
aria-label="More Controls"
|
||||
@click="
|
||||
showme.menu = !showme.menu;
|
||||
show ? $emit('toggle', 'showplaylist') : '';
|
||||
lyrics ? $emit('toggle', 'showlyrics') : '';
|
||||
player.state.playlist ? player.toggle('playlist') : '';
|
||||
player.state.lyrics ? player.toggle('lyrics') : '';
|
||||
"></button>
|
||||
<div id="menu" v-if="showme.menu" class="popup">
|
||||
<button
|
||||
id="info-btn"
|
||||
class="bi bi-info-circle"
|
||||
aria-label="Show Information About Song"
|
||||
@click="$emit('toggle', 'showinfo')"></button>
|
||||
@click="player.toggle('info')"></button>
|
||||
<button
|
||||
id="addToPlaylist"
|
||||
title="Add Current Song to a Playlist"
|
||||
|
|
@ -136,18 +129,21 @@ function Save() {
|
|||
id="list-btn"
|
||||
title="Current Playlist"
|
||||
aria-label="Current Playlist"
|
||||
:class="'bi bi-music-note-list ' + show"
|
||||
@click="$emit('toggle', 'showplaylist')"></button>
|
||||
class="bi bi-music-note-list"
|
||||
:data-active="player.state.playlist"
|
||||
@click="player.toggle('playlist')"></button>
|
||||
<button
|
||||
id="btn-lyrics"
|
||||
:class="'bi bi-file-music ' + lyrics"
|
||||
@click="$emit('toggle', 'showlyrics')"></button>
|
||||
class="bi bi-file-music"
|
||||
:data-active="player.state.lyrics"
|
||||
@click="player.toggle('lyrics')"></button>
|
||||
<button
|
||||
id="loop-btn"
|
||||
title="Loop"
|
||||
aria-label="Loop"
|
||||
:class="'bi bi-infinity ' + loop"
|
||||
@click="$emit('toggle', 'loop')"></button>
|
||||
class="bi bi-infinity"
|
||||
:data-active="player.state.loop"
|
||||
@click="player.toggle('loop')"></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -302,7 +298,7 @@ input[type='range']::-moz-range-track {
|
|||
top: 0;
|
||||
}
|
||||
#statusbar-progress {
|
||||
--fw: v-bind('time + "%"');
|
||||
--fw: v-bind('player.state.time + "%"');
|
||||
width: 50vw;
|
||||
min-width: 200px;
|
||||
max-width: 500px;
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue