Changes:

- Added a few basic keybindings
- Closes #142

src/components/Player.vue

@@ -10,7 +10,8 @@ import { useAlert } from '@/stores/misc';
 
 const player = usePlayer(),
   data = useData(),
-  store = useStore();
+  store = useStore(),
+  a = useAlert();
 
 const audio = ref(null);
 
@@ -61,7 +62,7 @@ async function Stream() {
           window.offline = new shaka.offline.Storage(audioPlayer);
           window.offline.configure({
             offline: {
-              progressCallback: (data, prog) => console.log(data, prog),
+              progressCallback: ({ appMetadata: { title, artist } }, prog) => a.add(`${title} by ${artist}: ${Math.floor(prog*100)}%`),
               trackSelectionCallback: tracks => [
                 tracks
                   .sort((a, b) => a.bandwidth - b.bandwidth)
@@ -112,7 +113,7 @@ async function Stream() {
       })
       .catch(err => {
         console.error(err);
-        useAlert.add('error: ' + e.code);
+        a.add('Error: ' + err.code);
       });
   }
 }

src/components/SearchBar.vue

@@ -1,28 +1,38 @@
 <script setup>
-import { ref } from 'vue';
+import { ref, watch } from 'vue';
 import { useNav, useI18n } from '@/stores/misc.js';
 
 const { t } = useI18n(),
   show = ref(false),
-  nav = useNav();
+  nav = useNav(),
+  searchEl = ref(null);
 
 function search(e) {
   nav.state.search = e.target.value;
   nav.state.page = 'home';
   e.target.blur();
 }
+
+watch(
+  () => nav.state.show,
+  e => {
+    if (e === true) setTimeout(() => searchEl.value.focus(), 0)
+  }
+)
 </script>
 
 <template>
   <button
     class="bi bi-search popup-wrap"
-    @mouseenter="show = true"
-    @mouseleave="show = false"
-    @keydown.enter="show = !show">
+    @mouseenter="nav.state.show = true"
+    @mouseleave="nav.state.show = false"
+    @keydown.enter="nav.show()">
     <Transition name="fade">
-      <div v-show="show" class="popup">
+      <div v-show="nav.state.show" class="popup">
         <input
           type="search"
+          ref="searchEl"
+          name="searchEl"
           aria-label="Search Input"
           :placeholder="t('title.search') + '...'"
           @change="search"

src/components/StatusBar.vue

@@ -9,12 +9,13 @@ import {
 } from '@/scripts/fetch.js';
 
 import { useData, usePlayer } from '@/stores/player.js';
-import { useI18n } from '@/stores/misc.js';
+import { useI18n, useAlert } from '@/stores/misc.js';
 
 const { t } = useI18n(),
   data = useData(),
   player = usePlayer(),
-  store = useStore();
+  store = useStore(),
+  a = useAlert();
 
 const showme = reactive({
     menu: false,
@@ -44,8 +45,11 @@ async function Offline() {
       url: data.state.url,
       artist: data.state.artist,
       artistUrl: data.state.artistUrl,
+    }).promise.catch(e => {
+      console.error(e)
+      a.add('Error: ' + e.code)
     });
-  } else console.error('no offline storage found');
+  } else a.add('offline storage not found');
 }
 
 async function Like() {