Code cleaning + fix related to #86

src/components/AlbumItem.vue

@@ -3,7 +3,7 @@ import { useRand } from '@/scripts/colors.js';
 
 const rand = useRand();
 
-const props = defineProps({
+defineProps({
   name: String,
   author: {
     type: String,

src/components/Artist.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { ref, onUpdated } from 'vue';
+import { ref } from 'vue';
 import Btn from './Btn.vue';
 
 import { useStore } from '@/scripts/util.js';

src/components/Charts.vue

@@ -51,7 +51,9 @@ onMounted(() => {
 <template>
   <template v-if="data.options.length > 0">
     <select :value="id" class="input" @input="id = $event.target.value">
-      <option v-for="i in data.options" :value="i.id">{{ i.title }}</option>
+      <option v-for="i in data.options" :value="i.id" :key="i.id">
+        {{ i.title }}
+      </option>
     </select>
   </template>
 
@@ -60,6 +62,7 @@ onMounted(() => {
     <div class="grid-3 circle">
       <AlbumItem
         v-for="i in data.artists"
+        :key="i.id"
         :name="i.title"
         :author="i.subtitle"
         :art="i.thumbnails[1].url"
@@ -72,6 +75,7 @@ onMounted(() => {
     <div class="grid">
       <SongItem
         v-for="i in data.songs"
+        :key="i.id"
         :title="i.title"
         :author="i.subtitle"
         :channel="'/channel/' + i.subId"

src/components/Genres.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { reactive, ref, onMounted, onUnmounted } from 'vue';
+import { reactive, onMounted } from 'vue';
 
 import { useResults } from '@/stores/results.js';
 
@@ -62,19 +62,21 @@ onMounted(get);
 
     <h2 class="head">{{ data.title }}</h2>
 
-    <template v-for="type in ['featured', 'spotlight', 'community']">
+    <template
+      v-for="type in ['featured', 'spotlight', 'community']"
+      :key="type">
       <h3 class="head">{{ t('title.' + type) }}</h3>
       <div class="grid-3">
-        <template v-for="i in data[type]">
-          <AlbumItem
-            :name="i.title"
-            :author="i.subtitle"
-            :art="i.thumbnails[0].url"
-            @open-album="
-              getAlbum('/playlist?list=' + i.id);
-              nav.state.page = 'home';
-            " />
-        </template>
+        <AlbumItem
+          v-for="i in data[type]"
+          :key="i.id"
+          :name="i.title"
+          :author="i.subtitle"
+          :art="i.thumbnails[0].url"
+          @open-album="
+            getAlbum('/playlist?list=' + i.id);
+            nav.state.page = 'home';
+          " />
       </div>
     </template>
   </template>
@@ -86,6 +88,7 @@ onMounted(get);
       <button
         v-for="i in btns.moods"
         class="btn"
+        :key="i.id"
         :style="`--btn-color: ${i.subtitle};`"
         @click="get(i.id)">
         {{ i.title }}
@@ -98,6 +101,7 @@ onMounted(get);
       <button
         v-for="i in btns.genres"
         class="btn"
+        :key="i.id"
         :style="`--btn-color: ${i.subtitle};`"
         @click="get(i.id)">
         {{ i.title }}

src/components/NavBar.vue

@@ -1,6 +1,4 @@
 <script setup>
-import { reactive } from 'vue';
-
 import SearchBar from '@/components/SearchBar.vue';
 import IcoHyp from '@/assets/icons/IcoHyp.vue';
 

src/components/NewPlaylist.vue

@@ -30,8 +30,9 @@ const { t } = useI18n(),
   results = useResults(),
   nav = useNav();
 
-const emit = defineEmits(['play-urls', 'open-playlist']),
-  list = ref([]),
+defineEmits(['play-urls', 'open-playlist']);
+
+const list = ref([]),
   show = reactive({
     new: false,
     sync: false,
@@ -137,7 +138,7 @@ const Login = async () => {
   },
   createPlaylist = async () => {
     if (text.value) {
-      const res = await useAuthCreatePlaylist(text.value);
+      await useAuthCreatePlaylist(text.value);
 
       getPlaylists();
       show.new = false;
@@ -312,24 +313,24 @@ onMounted(async () => {
     <h2 v-if="list.length > 0">{{ t('playlist.local') }}</h2>
 
     <div class="grid-3">
-      <template v-for="i in list">
-        <AlbumItem
-          :name="i.name"
-          :author="t('title.songs') + ' • ' + i.urls.length"
-          :grad="useRand()"
-          @open-album="Open(i.name)" />
-      </template>
+      <AlbumItem
+        v-for="i in list"
+        :key="i.name"
+        :name="i.name"
+        :author="t('title.songs') + ' • ' + i.urls.length"
+        :grad="useRand()"
+        @open-album="Open(i.name)" />
     </div>
 
     <h2 class="login-h">{{ t('playlist.remote') }}</h2>
 
     <div v-if="auth" class="grid-3">
-      <template v-for="i in user.playlists">
-        <AlbumItem
-          :name="i.name.replace('Playlist - ', '')"
-          :art="pathname(i.thumbnail) != '/' ? i.thumbnail : undefined"
-          @open-album="$emit('open-playlist', '/playlists?list=' + i.id)" />
-      </template>
+      <AlbumItem
+        v-for="i in user.playlists"
+        :key="i.id"
+        :name="i.name.replace('Playlist - ', '')"
+        :art="pathname(i.thumbnail) != '/' ? i.thumbnail : undefined"
+        @open-album="$emit('open-playlist', '/playlists?list=' + i.id)" />
     </div>
     <form v-else class="login" @submit.prevent>
       <input

src/components/Player.vue

@@ -1,12 +1,5 @@
 <script setup>
-import {
-  ref,
-  watch,
-  onMounted,
-  onUpdated,
-  onBeforeUnmount,
-  onUnmounted,
-} from 'vue';
+import { ref, watch, onMounted, onBeforeUnmount, onUnmounted } from 'vue';
 
 import muxjs from 'mux.js';
 window.muxjs = muxjs;
@@ -64,7 +57,7 @@ async function Stream() {
         if (shaka.Player.isBrowserSupported) {
           const audioPlayer = new shaka.Player(audio.value);
 
-          const codecs = useStore().getItem('codec');
+          const codecs = store.getItem('codec');
 
           audioPlayer
             .getNetworkingEngine()
@@ -94,7 +87,7 @@ async function Stream() {
       });
   }
 
-  const quality = useStore().getItem('quality');
+  const quality = store.getItem('quality');
 
   if (url) {
     window.audioPlayer

src/components/Playlists.vue

@@ -12,26 +12,28 @@ defineEmits(['playthis']);
 <template>
   <Transition name="fade">
     <div class="pl-modal placeholder" :data-placeholder="t('playlist.add')">
-      <template v-for="plurl in data.state.urls">
-        <div class="pl-item" @click="$emit('playthis', plurl)">
-          <span
-            v-if="data.state.url == plurl.url"
-            class="bars-wrap"
-            :class="player.state.status">
-            <div class="bars"></div>
-            <div class="bars"></div>
-            <div class="bars"></div>
-          </span>
-          <div v-else-if="plurl.thumbnails" class="pl-img">
-            <img
-              :src="plurl.thumbnails[0].url"
-              :height="plurl.thumbnails[0].height"
-              :width="plurl.thumbnails[0].width"
-              loading="lazy" />
-          </div>
-          <span class="pl-main caps">{{ plurl.title }}</span>
+      <div
+        v-for="plurl in data.state.urls"
+        class="pl-item"
+        :key="plurl.url"
+        @click="$emit('playthis', plurl)">
+        <span
+          v-if="data.state.url == plurl.url"
+          class="bars-wrap"
+          :class="player.state.status">
+          <div class="bars"></div>
+          <div class="bars"></div>
+          <div class="bars"></div>
+        </span>
+        <div v-else-if="plurl.thumbnails" class="pl-img">
+          <img
+            :src="plurl.thumbnails[0].url"
+            :height="plurl.thumbnails[0].height"
+            :width="plurl.thumbnails[0].width"
+            loading="lazy" />
         </div>
-      </template>
+        <span class="pl-main caps">{{ plurl.title }}</span>
+      </div>
     </div>
   </Transition>
 </template>

src/components/Prefs.vue

@@ -107,7 +107,9 @@ onMounted(() => {
     class="input"
     :value="getStore('locale') || 'en'"
     @change="setLang($event.target.value)">
-    <option v-for="i in SUPPORTED_LOCALES" :value="i.code">{{ i.name }}</option>
+    <option v-for="i in SUPPORTED_LOCALES" :value="i.code" :key="i.code">
+      {{ i.name }}
+    </option>
   </select>
 
   <h2>{{ t('pref.tab') }}</h2>
@@ -205,7 +207,7 @@ onMounted(() => {
           <th>{{ t('instances.loc') }}</th>
         </tr>
       </thead>
-      <tbody v-for="i in hypInstances">
+      <tbody v-for="i in hypInstances" :key="i.name">
         <tr>
           <td>
             {{ i.name }}
@@ -273,7 +275,7 @@ onMounted(() => {
           <th>{{ t('instances.version') }}</th>
         </tr>
       </thead>
-      <tbody v-for="i in instances">
+      <tbody v-for="i in instances" :key="i.name">
         <tr>
           <td>
             {{ i.name.replace('Official', 'Default') }}

src/components/Search.vue

@@ -1,12 +1,5 @@
 <script setup>
-import {
-  ref,
-  reactive,
-  watch,
-  onActivated,
-  onUpdated,
-  onDeactivated,
-} from 'vue';
+import { ref, watch, onActivated, onUpdated, onDeactivated } from 'vue';
 
 import Btn from './Btn.vue';
 import SongItem from './SongItem.vue';
@@ -241,11 +234,12 @@ onDeactivated(() => {
     <button
       v-for="f in filters"
       class="filter caps"
+      :key="f"
+      :data-active="f == filter"
       @click="
         filter = f;
         getSearch(nav.state.search);
-      "
-      :data-active="f == filter">
+      ">
       {{ t('title.' + f.split('_')[1]) }}
     </button>
   </div>
@@ -255,35 +249,35 @@ onDeactivated(() => {
     class="search-wrap">
     <h2 v-if="!isSearch">{{ t('title.songs') }}</h2>
     <div class="grid">
-      <template v-for="(song, index) in results.items.songs.items">
-        <SongItem
-          :index="index"
-          :playlistId="song.playlistId"
-          :author="song.uploaderName || song.subtitle"
-          :title="song.title || song.name"
-          :channel="song.uploaderUrl || '/channel/' + song.subId"
-          :play="song.url || '/watch?v=' + song.id"
-          :art="
-            song.thumbnail || song.thumbnails[1]?.url || song.thumbnails[0]?.url
-          "
-          @remove="removeSong"
-          @open-song="
-            $emit('play-urls', [
-              {
-                url: song.url || '/watch?v=' + song.id,
-                title: song.title || song.name,
-                thumbnails: [
-                  {
-                    url:
-                      song.thumbnail ||
-                      song.thumbnails[1]?.url ||
-                      song.thumbnails[0]?.url,
-                  },
-                ],
-              },
-            ])
-          " />
-      </template>
+      <SongItem
+        v-for="(song, index) in results.items.songs.items"
+        :key="song.url || song.id"
+        :index="index"
+        :playlistId="song.playlistId"
+        :author="song.uploaderName || song.subtitle"
+        :title="song.title || song.name"
+        :channel="song.uploaderUrl || '/channel/' + song.subId"
+        :play="song.url || '/watch?v=' + song.id"
+        :art="
+          song.thumbnail || song.thumbnails[1]?.url || song.thumbnails[0]?.url
+        "
+        @remove="removeSong"
+        @open-song="
+          $emit('play-urls', [
+            {
+              url: song.url || '/watch?v=' + song.id,
+              title: song.title || song.name,
+              thumbnails: [
+                {
+                  url:
+                    song.thumbnail ||
+                    song.thumbnails[1]?.url ||
+                    song.thumbnails[0]?.url,
+                },
+              ],
+            },
+          ])
+        " />
     </div>
     <a
       v-if="artist.state.playlistId"
@@ -301,15 +295,15 @@ onDeactivated(() => {
     class="search-wrap">
     <h2 v-if="!isSearch">{{ t('title.albums') }}</h2>
     <div class="grid-3">
-      <template v-for="album in results.items.albums.items">
-        <AlbumItem
-          :author="album.uploaderName || album.subtitle"
-          :name="album.name || album.title"
-          :art="album.thumbnail || album.thumbnails[0].url"
-          @open-album="
-            results.getAlbum(album.url || '/playlist?list=' + album.id)
-          " />
-      </template>
+      <AlbumItem
+        v-for="album in results.items.albums.items"
+        :key="album.url || album.id"
+        :author="album.uploaderName || album.subtitle"
+        :name="album.name || album.title"
+        :art="album.thumbnail || album.thumbnails[0].url"
+        @open-album="
+          results.getAlbum(album.url || '/playlist?list=' + album.id)
+        " />
     </div>
   </div>
 
@@ -320,6 +314,7 @@ onDeactivated(() => {
     <div class="grid-3">
       <AlbumItem
         v-for="pl in results.items.playlists.items"
+        :key="pl.url"
         :author="pl.videos + ' Songs • ' + pl.uploaderName"
         :name="pl.name"
         :art="pl.thumbnail"
@@ -332,13 +327,13 @@ onDeactivated(() => {
     class="search-wrap">
     <h2>{{ t('title.singles') }}</h2>
     <div class="grid-3">
-      <template v-for="single in results.items.singles.items">
-        <AlbumItem
-          :author="single.subtitle"
-          :name="single.title"
-          :art="single.thumbnails[0].url"
-          @open-album="results.getAlbum('/playlist?list=' + single.id)" />
-      </template>
+      <AlbumItem
+        v-for="single in results.items.singles.items"
+        :key="single.id"
+        :author="single.subtitle"
+        :name="single.title"
+        :art="single.thumbnails[0].url"
+        @open-album="results.getAlbum('/playlist?list=' + single.id)" />
     </div>
   </div>
 
@@ -355,18 +350,17 @@ onDeactivated(() => {
       }}
     </h2>
     <div class="grid-3 circle">
-      <template
+      <AlbumItem
         v-for="a in results.items.artists
           ? results.items.artists.items
-          : results.items.recommendedArtists.items">
-        <AlbumItem
-          :author="a.subtitle"
-          :name="a.name || a.title"
-          :art="a.thumbnail || a.thumbnails[0].url"
-          @open-album="
-            artist.getArtist(a.id || a.url.replace('/channel/', ''))
-          " />
-      </template>
+          : results.items.recommendedArtists.items"
+        :key="a.id || a.url"
+        :author="a.subtitle"
+        :name="a.name || a.title"
+        :art="a.thumbnail || a.thumbnails[0].url"
+        @open-album="
+          artist.getArtist(a.id || a.url.replace('/channel/', ''))
+        " />
     </div>
   </div>
 </template>

src/components/SearchBar.vue

@@ -5,6 +5,13 @@ import { useNav, useI18n } from '@/stores/misc.js';
 const { t } = useI18n(),
   show = ref(false),
   nav = useNav();
+
+function search(e) {
+  nav.state.search = e.target.value;
+  nav.state.page = 'home';
+  e.target.blur();
+  console.log(e);
+}
 </script>
 
 <template>
@@ -19,11 +26,8 @@ const { t } = useI18n(),
           type="search"
           aria-label="Search Input"
           :placeholder="t('title.search') + '...'"
-          @change="
-            nav.state.search = $event.target.value;
-            nav.state.page = 'home';
-            $event.target.blur();
-          "
+          @change="search"
+          @keyup.enter="search"
           :value="nav.state.search" />
       </div>
     </Transition>

src/components/SongItem.vue

@@ -5,7 +5,7 @@ import { getJsonAuth } from '@/scripts/fetch.js';
 import { useRand } from '@/scripts/colors.js';
 import { useStore } from '@/scripts/util.js';
 
-import { useArtist, useResults } from '@/stores/results.js';
+import { useArtist } from '@/stores/results.js';
 import { useData, usePlayer } from '@/stores/player.js';
 
 const rand = useRand(),

src/components/StatusBar.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { ref, reactive, watch } from 'vue';
+import { ref, reactive } from 'vue';
 
 import Modal from './Modal.vue';
 
@@ -19,8 +19,9 @@ const { t } = useI18n(),
   player = usePlayer(),
   store = useStore();
 
-const emit = defineEmits(['save']),
-  showme = reactive({
+defineEmits(['save']);
+
+const showme = reactive({
     menu: false,
     pl: false,
     vol: false,
@@ -112,29 +113,29 @@ async function Like() {
           }
         ">
         <template #content>
-          <template v-for="i in list">
-            <div
-              class="flex item"
-              @click="
-                pl = i.name;
-                plRemote = false;
-              "
-              :data-active="pl == i.name && plRemote == false">
-              <span>{{ i.name }}</span
-              ><span class="ml-auto">{{ i.urls.length || '' }}</span>
-            </div>
-          </template>
-          <template v-for="i in remote">
-            <div
-              class="flex item"
-              @click="
-                pl = i.id;
-                plRemote = true;
-              "
-              :data-active="pl == i.id && plRemote == true">
-              <span>{{ i.name }}</span>
-            </div>
-          </template>
+          <div
+            v-for="i in list"
+            :key="i.name"
+            class="flex item"
+            @click="
+              pl = i.name;
+              plRemote = false;
+            "
+            :data-active="pl == i.name && plRemote == false">
+            <span>{{ i.name }}</span
+            ><span class="ml-auto">{{ i.urls.length || '' }}</span>
+          </div>
+          <div
+            v-for="i in remote"
+            :key="i.id"
+            class="flex item"
+            @click="
+              pl = i.id;
+              plRemote = true;
+            "
+            :data-active="pl == i.id && plRemote == true">
+            <span>{{ i.name }}</span>
+          </div>
         </template>
         <template #buttons>
           <button aria-label="Cancel" @click="showme.pl = false">