+
Singles
-
+
- {{ data.artists ? 'Artists' : 'Similar Artists' }}
+ {{ results.items.artists ? 'Artists' : 'Similar Artists' }}
+ v-for="artist in results.items.artists
+ ? results.items.artists.items
+ : results.items.recommendedArtists.items">
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();
@@ -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" />
diff --git a/src/components/StatusBar.vue b/src/components/StatusBar.vue
index e243ff0..4581d21 100644
--- a/src/components/StatusBar.vue
+++ b/src/components/StatusBar.vue
@@ -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() {
+ :class="'bi bi-' + player.state.status"
+ @click="player.toggle('play')">
+ @input="player.state.vol = $event.target.value" />
@@ -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') : '';
">
@@ -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;
diff --git a/src/main.js b/src/main.js
index c7bd679..7694343 100644
--- a/src/main.js
+++ b/src/main.js
@@ -1,6 +1,10 @@
import { createApp } from 'vue';
+import { createPinia } from 'pinia';
+
import App from './App.vue';
-const app = createApp(App);
+const pinia = createPinia(),
+ app = createApp(App);
+app.use(pinia);
app.mount('#app');
diff --git a/src/stores/misc.js b/src/stores/misc.js
new file mode 100644
index 0000000..ea2596b
--- /dev/null
+++ b/src/stores/misc.js
@@ -0,0 +1,11 @@
+import { reactive } from 'vue';
+import { defineStore } from 'pinia';
+
+export const useNav = defineStore('nav', () => {
+ const state = reactive({
+ search: '',
+ page: 'home',
+ });
+
+ return { state };
+});
diff --git a/src/stores/player.js b/src/stores/player.js
new file mode 100644
index 0000000..202091d
--- /dev/null
+++ b/src/stores/player.js
@@ -0,0 +1,50 @@
+import { reactive } from 'vue';
+import { defineStore } from 'pinia';
+
+import { useStore } from '../scripts/util.js';
+
+const store = useStore();
+
+export const useData = defineStore('data', () => {
+ const state = reactive({
+ title: '',
+ description: '',
+ artist: '',
+ art: '',
+ url: '',
+ artistUrl: '',
+ lyrics: '',
+ src: [],
+ urls: [],
+ });
+
+ return { state };
+});
+
+export const usePlayer = defineStore('player', () => {
+ const state = reactive({
+ loop: false,
+ play: false,
+ status: 'play',
+ duration: 0,
+ time: 0,
+ playlist: false,
+ lyrics: false,
+ info: false,
+ vol: store.vol ? store.vol / 100 : 1,
+ });
+
+ function toggle(i) {
+ console.log(i, state[i]);
+ if (typeof state[i] == 'boolean') {
+ state[i] = !state[i];
+ }
+ console.log(i, state[i]);
+ }
+
+ function setTime(t) {
+ state.time = Math.floor((t / state.duration) * 100);
+ }
+
+ return { state, toggle, setTime };
+});
diff --git a/src/stores/results.js b/src/stores/results.js
new file mode 100644
index 0000000..bec2a33
--- /dev/null
+++ b/src/stores/results.js
@@ -0,0 +1,44 @@
+import { ref, reactive } from 'vue';
+import { defineStore } from 'pinia';
+
+export const useResults = defineStore('results', () => {
+ const items = ref({}),
+ search = ref('');
+
+ function setItem(key, val) {
+ items.value[key] = val;
+ console.log(items.value);
+ }
+
+ function resetItems() {
+ for (let i in items.value) {
+ items.value[i] = undefined;
+ }
+ }
+
+ return { items, search, setItem, resetItems };
+});
+
+export const useArtist = defineStore('artist', () => {
+ const state = reactive({
+ playlistId: null,
+ title: null,
+ description: null,
+ subscriberCount: 0,
+ thumbnails: [],
+ });
+
+ function reset() {
+ for (let i in state) {
+ state[i] = undefined;
+ }
+ }
+
+ function set(obj) {
+ for (let i in obj) {
+ state[i] = obj[i];
+ }
+ }
+
+ return { state, set, reset };
+});