Changes:

- Relocated code from App.vue to their respective stores
- Linked to privacy page in wiki (related to #15)

src/components/AlbumItem.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { useRand } from '../scripts/colors.js';
+import { useRand } from '@/scripts/colors.js';
 
 const rand = useRand();
 
@@ -12,7 +12,7 @@ const props = defineProps({
   grad: String,
   art: {
     type: String,
-    default: 'https://upload.wikimedia.org/wikipedia/commons/c/ca/1x1.png',
+    default: '/1x1.png',
   },
 });
 

src/components/Artist.vue

@@ -2,22 +2,21 @@
 import { ref, onUpdated } from 'vue';
 import Btn from './Btn.vue';
 
-import { useArtist } from '@/stores/results.js';
+import { useResults, useArtist } from '@/stores/results.js';
 
-const artist = useArtist();
+const artist = useArtist(),
+  results = useResults();
 
-defineEmits(['playall']);
-
-const show = ref(-1);
+/*const show = ref(-1);
 show.value = location.pathname.indexOf('/channel/UC');
 
 onUpdated(() => {
   show.value = location.pathname.indexOf('/channel/UC');
-});
+});*/
 </script>
 
 <template>
-  <div v-if="show == 0 && artist.state.title" class="us-wrap">
+  <div class="us-wrap">
     <img class="bg-imgfill" :src="artist.state.thumbnails[1].url" />
     <div class="us-main">
       <h2>{{ artist.state.title }}</h2>
@@ -27,7 +26,7 @@ onUpdated(() => {
       <div class="us-playwrap">
         <Btn
           @click="
-            $emit('playall', '/playlist?list=' + artist.state.playlistId)
+            results.getAlbum('/playlist?list=' + artist.state.playlistId)
           " />
         <span class="us-box subs">{{ artist.state.subscriberCount || 0 }}</span>
       </div>

src/components/Genres.vue

@@ -1,14 +1,16 @@
 <script setup>
 import { reactive, ref, onMounted, onUnmounted } from 'vue';
 
-import { getJsonHyp } from '../scripts/fetch.js';
-import { useRoute } from '../scripts/util.js';
+import { useResults } from '@/stores/results.js';
+
+import { getJsonHyp } from '@/scripts/fetch.js';
+import { useRoute } from '@/scripts/util.js';
 import { useT } from '@/scripts/i18n.js';
 
 import AlbumItem from './AlbumItem.vue';
 
-const props = defineProps(['id']);
-defineEmits(['get-album']);
+const props = defineProps(['id']),
+  { getAlbum } = useResults();
 
 const data = reactive({
     title: '',
@@ -68,7 +70,7 @@ onMounted(get);
             :author="i.subtitle"
             :art="i.thumbnails[0].url"
             @open-album="
-              $emit('get-album', '/playlist?list=' + i.id);
+              getAlbum('/playlist?list=' + i.id);
               nav.state.page = 'home';
             " />
         </template>

src/components/Modal.vue

@@ -20,7 +20,7 @@ watch(show, n => {
 <template>
   <Transition name="fade">
     <div class="modal" v-if="show">
-      <span class="bi bi-x modal-close" @click="show = false"></span>
+      <span class="bi bi-x-lg modal-close" @click="show = false"></span>
       <div class="modal-box">
         <div class="modal-title">{{ title }}</div>
         <div class="modal-content">
@@ -35,6 +35,9 @@ watch(show, n => {
 </template>
 
 <style>
+.bi-x {
+  font-size: 2rem;
+}
 .modal {
   display: flex;
   position: fixed;

src/components/NewPlaylist.vue

@@ -46,7 +46,9 @@ const Play = key => {
 
     useGetPlaylist(key, res => {
       console.log(res);
-      emit('play-urls', res.urls);
+      if (res.urls.length > 0) {
+        emit('play-urls', res.urls);
+      } else alert('No songs to play!');
     });
   },
   List = () => {
@@ -83,7 +85,7 @@ const Play = key => {
 
 const Login = async () => {
     if (user.username && user.password) {
-      const { token } = await getJsonAuth('/login', {
+      const res = await getJsonAuth('/login', {
         method: 'POST',
         body: JSON.stringify({
           username: user.username,
@@ -91,10 +93,25 @@ const Login = async () => {
         }),
       });
 
-      store.setItem('auth', token);
-      auth.value = true;
+      if (!res.error) {
+        store.setItem('auth', res.token);
+        auth.value = true;
+      } else alert(res.error);
     }
   },
+  Logout = async () => {
+    const res = await getJsonAuth('/logout', {
+      method: 'POST',
+      headers: {
+        Authorization: store.auth,
+      },
+    });
+
+    if (!res.error) {
+      store.removeItem('auth');
+      auth.value = false;
+    } else alert(res.error);
+  },
   getPlaylists = async () => {
     const res = await getAuthPlaylists();
 
@@ -175,8 +192,8 @@ watch(
 watch(auth, getPlaylists);
 
 onMounted(async () => {
-  await getPlaylists();
   List();
+  await getPlaylists();
 });
 </script>
 
@@ -291,15 +308,19 @@ onMounted(async () => {
     </div>
     <form v-else class="login" @submit.prevent>
       <input
-        @change="user.username = $event.target.value"
+        class="textbox"
         type="text"
         placeholder="username"
-        class="textbox" />
+        autocomplete="username"
+        @change="user.username = $event.target.value"
+        required />
       <input
-        @change="user.password = $event.target.value"
+        class="textbox"
         type="password"
         placeholder="password"
-        class="textbox" />
+        autocomplete="password"
+        @change="user.password = $event.target.value"
+        required />
       <button @click="Login" class="textbox">{{ useT('title.login') }}</button>
 
       <p>
@@ -312,6 +333,8 @@ onMounted(async () => {
         >
       </p>
     </form>
+
+    <button v-if="auth" @click="Logout" class="logout textbox">Logout</button>
   </div>
 </template>
 
@@ -356,11 +379,17 @@ pre {
   background: var(--color-background);
 }
 .tabs button[data-active='true'],
-.login button {
+.login button,
+button.logout {
   font-weight: bold;
   color: var(--color-background);
   background: linear-gradient(135deg, cornflowerblue, #88c0d0);
 }
+button.logout {
+  margin: 1rem auto;
+  display: block;
+  background: linear-gradient(135deg, indianred, #bf616a);
+}
 .tabs button:first-child {
   border-radius: 0.25rem 0 0 0.25rem;
 }

src/components/Player.vue

@@ -13,8 +13,6 @@ window.muxjs = muxjs;
 import { useStore, useRoute } from '@/scripts/util.js';
 import { useData, usePlayer } from '@/stores/player.js';
 
-defineEmits(['ended']);
-
 const player = usePlayer(),
   data = useData(),
   store = useStore();
@@ -187,6 +185,6 @@ onUnmounted(() => {
     :volume="player.state.vol"
     @canplay="audioCanPlay"
     @timeupdate="player.setTime($event.target.currentTime)"
-    @ended="$emit('ended')"
+    @ended="data.playNext"
     autoplay></audio>
 </template>

src/components/Prefs.vue

@@ -227,6 +227,11 @@ onMounted(() => {
       target="_blank"
       rel="noreferrer noopener"
       href="https://codeberg.org/Hyperpipe/Hyperpipe" />
+    <a
+      class="bi bi-eye"
+      target="_blank"
+      rel="noreferrer noopener"
+      href="https://codeberg.org/Hyperpipe/Hyperpipe/wiki/Privacy" />
   </footer>
 </template>
 
@@ -319,6 +324,12 @@ footer {
 }
 footer .bi:before {
   font-size: 1.75rem;
+  vertical-align: -0.45rem;
+}
+footer .bi {
+  padding: 0.5rem;
+  margin: 0 0.25rem;
+  border-radius: 0.25rem;
 }
 @media (max-width: 500px) {
   select,

src/components/Search.vue

@@ -19,7 +19,7 @@ const results = useResults(),
   nav = useNav(),
   artist = useArtist();
 
-const emit = defineEmits(['get-album', 'get-artist', 'play-urls', 'add-song']),
+const emit = defineEmits(['play-urls']),
   filters = ['music_songs', 'music_albums', 'music_artists'],
   filter = ref('music_songs'),
   isSearch = ref(/search/.test(location.pathname));
@@ -108,6 +108,7 @@ onUpdated(() => {
           results.items?.songs?.items?.map(item => ({
             url: item.url,
             title: item.title,
+            thumbnails: [{ url: item.thumbnail }],
           })),
         )
       " />
@@ -119,6 +120,7 @@ onUpdated(() => {
           ...results.items.songs.items.map(i => ({
             url: i.url,
             title: i.title,
+            thumbnails: [{ url: i.thumbnail }],
           })),
         )
       " />
@@ -158,23 +160,26 @@ onUpdated(() => {
               {
                 url: song.url || '/watch?v=' + song.id,
                 title: song.title || song.name,
+                thumbnails: [
+                  {
+                    url:
+                      song.thumbnail ||
+                      song.thumbnails[1]?.url ||
+                      song.thumbnails[0]?.url,
+                  },
+                ],
               },
             ])
-          "
-          @get-artist="
-            e => {
-              $emit('get-artist', e);
-            }
           " />
       </template>
     </div>
     <a
-      v-if="results.items.notes"
+      v-if="artist.state.playlistId"
       @click.prevent="
-        $emit('get-album', '/playlist?list=' + results.items.notes.items)
+        results.getAlbum('/playlist?list=' + artist.state.playlistId)
       "
       class="more"
-      :href="'/playlist?list=' + results.items.notes.items"
+      :href="'/playlist?list=' + artist.state.playlistId"
       >{{ useT('info.see_all') }}</a
     >
   </div>
@@ -190,7 +195,7 @@ onUpdated(() => {
           :name="album.name || album.title"
           :art="album.thumbnail || album.thumbnails[0].url"
           @open-album="
-            $emit('get-album', album.url || '/playlist?list=' + album.id)
+            results.getAlbum(album.url || '/playlist?list=' + album.id)
           " />
       </template>
     </div>
@@ -206,7 +211,7 @@ onUpdated(() => {
           :author="single.subtitle"
           :name="single.title"
           :art="single.thumbnails[0].url"
-          @open-album="$emit('get-album', '/playlist?list=' + single.id)" />
+          @open-album="results.getAlbum('/playlist?list=' + single.id)" />
       </template>
     </div>
   </div>
@@ -235,10 +240,7 @@ onUpdated(() => {
           :name="artist.name || artist.title"
           :art="artist.thumbnail || artist.thumbnails[0].url"
           @open-album="
-            $emit(
-              'get-artist',
-              artist.id || artist.url.replace('/channel/', ''),
-            )
+            artist.getArtist(artist.id || artist.url.replace('/channel/', ''))
           " />
       </template>
     </div>

src/components/SongItem.vue

@@ -4,8 +4,12 @@ import { ref, onMounted } from 'vue';
 import { useRand } from '../scripts/colors.js';
 
 import { useArtist } from '@/stores/results.js';
+import { useData, usePlayer } from '@/stores/player.js';
 
-const rand = useRand();
+const rand = useRand(),
+  data = useData(),
+  player = usePlayer(),
+  artist = useArtist();
 
 const props = defineProps({
     author: String,
@@ -14,7 +18,7 @@ const props = defineProps({
     play: String,
     art: String,
   }),
-  emit = defineEmits(['get-artist', 'open-song']),
+  emit = defineEmits(['open-song']),
   show = ref(false);
 
 const openSong = el => {
@@ -22,6 +26,23 @@ const openSong = el => {
       emit('open-song', props.play);
     }
   },
+  addSong = () => {
+    data.state.urls.push({
+      url: props.play,
+      title: props.title,
+      thumbnails: [{ url: props.art }],
+    });
+
+    const index = data.state.urls.map(s => s.url).indexOf(data.state.url);
+
+    console.log(data.state.urls);
+
+    if (
+      (index == data.state.urls.length - 1 && player.state.time > 98) ||
+      data.state.urls.length == 1
+    )
+      emit('open-song', props.play);
+  },
   Share = async () => {
     if ('share' in navigator) {
       const data = {
@@ -48,7 +69,7 @@ const openSong = el => {
   };
 
 onMounted(() => {
-  console.log(props.channel, useArtist().state.playlistId);
+  console.log(props.channel, artist.state.playlistId);
 });
 </script>
 <template>
@@ -58,19 +79,14 @@ onMounted(() => {
     <span class="flex content">
       <h4>{{ title }}</h4>
       <a
-        :href="
-          channel != '[]' ? channel : '/channel/' + useArtist().state.playlistId
-        "
+        :href="channel != '[]' ? channel : ''"
         @click.prevent="
-          $emit(
-            'get-artist',
-            channel != '[]'
-              ? channel.replace('/channel/', '')
-              : useArtist().state.playlistId,
-          )
+          channel != '[]'
+            ? artist.getArtist(channel.replace('/channel/', ''))
+            : ''
         "
         class="ign">
-        <i class="ign">{{ author.replaceAll(' - Topic', '') }}</i>
+        <i class="ign">{{ author ? author.replaceAll(' - Topic', '') : '' }}</i>
       </a>
     </span>
 
@@ -80,11 +96,7 @@ onMounted(() => {
       @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-plus-lg ign" @click="addSong"></span>
 
           <span class="bi bi-share ign" @click="Share"></span>
         </div>