Changes:

- closes #129
- closes #130
- minor cleanup

package.json

@@ -14,7 +14,7 @@
     "dompurify": "^3.0.3",
     "mux.js": "^6.3.0",
     "peerjs": "^1.4.7",
-    "pinia": "^2.0.36",
+    "pinia": "^2.1.3",
     "shaka-player": "^4.3.6",
     "sortablejs": "^1.15.0",
     "vue": "^3.2.38"
@@ -22,7 +22,7 @@
   "devDependencies": {
     "@vitejs/plugin-vue": "^4.2.3",
     "prettier": "^2.8.8",
-    "vite": "^4.3.6",
+    "vite": "^4.3.9",
     "vite-plugin-pwa": "^0.14.7"
   }
 }

src/App.vue

@@ -2,7 +2,6 @@
 /* Imports */
 import {
   ref,
-  watch,
   reactive,
   defineAsyncComponent,
   onBeforeMount,
@@ -35,7 +34,7 @@ import { useSetupDB, useUpdatePlaylist } from '@/scripts/db.js';
 /* Stores */
 import { useData, usePlayer } from '@/stores/player.js';
 import { useResults, useArtist } from '@/stores/results.js';
-import { useNav, useI18n } from '@/stores/misc.js';
+import { useNav, useI18n, useAlert } from '@/stores/misc.js';
 
 const { t, setupLocale } = useI18n(),
   store = useStore(),
@@ -43,7 +42,8 @@ const { t, setupLocale } = useI18n(),
   player = usePlayer(),
   results = useResults(),
   artist = useArtist(),
-  nav = useNav();
+  nav = useNav(),
+  errs = useAlert();
 
 const genreid = ref(''),
   path = ref(location.pathname);
@@ -187,6 +187,12 @@ onMounted(() => {
     <Info v-if="player.state.info" :text="data.state.description" />
   </Transition>
 
+  <Transition name="fade">
+    <div v-if="errs.msg" class="alert">
+      {{ errs.msg }}
+    </div>
+  </Transition>
+
   <StatusBar />
 
   <Player />
@@ -259,6 +265,19 @@ a:focus-visible {
 .flex .bi {
   line-height: 0;
 }
+.alert {
+  position: fixed;
+  font-weight: bold;
+  letter-spacing: 0.1rem;
+  max-width: 20rem;
+  right: 1rem;
+  bottom: 10rem;
+  padding: 1rem;
+  background: linear-gradient(135deg, indianred, #bf616a);
+  color: var(--color-background);
+  border-radius: 0.25rem;
+  box-shadow: 0.3rem 0.3rem 0.4rem indianred;
+}
 
 @media (hover: hover) {
   a:hover {

src/assets/version.json

@@ -1,3 +1,3 @@
 {
-  "date": "2023-05-20"
+  "date": "2023-06-13"
 }

src/components/Player.vue

@@ -1,5 +1,6 @@
 <script setup>
 import { ref, watch, onMounted, onBeforeUnmount, onUnmounted } from 'vue';
+import { useManifest } from '@/scripts/util.js';
 
 import muxjs from 'mux.js';
 window.muxjs = muxjs;
@@ -31,22 +32,7 @@ async function Stream() {
   const res = player.state,
     shaka = import('shaka-player/dist/shaka-player.compiled.js');
 
-  let url, mime;
-
-  if (window.MediaSource !== undefined && res.streams.length > 0) {
-    const { useDash } = await import('../scripts/dash.js');
-
-    const dash = useDash(res.streams, res.duration);
-
-    url = 'data:application/dash+xml;charset=utf-8;base64,' + btoa(dash);
-    mime = 'application/dash+xml';
-  } else if (res.hls) {
-    url = res.hls;
-    mime = 'application/x-mpegURL';
-  } else if (res.streams.length > 0) {
-    url = res.streams[0].url;
-    mime = res.streams[0].mimeType;
-  }
+  const { url, mime } = await useManifest(res);
 
   if (!window.audioPlayer) {
     shaka
@@ -54,10 +40,9 @@ async function Stream() {
       .then(shaka => {
         shaka.polyfill.installAll();
 
-        if (shaka.Player.isBrowserSupported) {
-          const audioPlayer = new shaka.Player(audio.value);
-
-          const codecs = store.getItem('codec');
+        if (shaka.Player.isBrowserSupported()) {
+          const audioPlayer = new shaka.Player(audio.value),
+            codecs = store.getItem('codec');
 
           audioPlayer
             .getNetworkingEngine()
@@ -125,6 +110,8 @@ function destroy() {
   }
 }
 
+const titleState = ['Playing', 'Paused'];
+
 watch(
   () => player.state.play,
   () => {
@@ -139,15 +126,13 @@ watch(
       audio.value.pause();
     }
 
-    const state = ['Playing', 'Paused'];
-
     if (
-      document.title.startsWith(state[0] + ':') ||
-      document.title.startsWith(state[1] + ':')
+      document.title.startsWith(titleState[0] + ':') ||
+      document.title.startsWith(titleState[1] + ':')
     )
       document.title = audio.value.paused
-        ? document.title.replace(state[0], state[1])
-        : document.title.replace(state[1], state[0]);
+        ? document.title.replace(titleState[0], titleState[1])
+        : document.title.replace(titleState[1], titleState[0]);
   },
 );
 
@@ -167,16 +152,19 @@ onMounted(() => {
   if ('mediaSession' in navigator) {
     navigator.mediaSession.setActionHandler('play', () => {
       player.state.status = 'pause';
+      document.title = document.title.replace(titleState[1], titleState[0]);
 
       audio.value.play().catch(err => {
         console.log(err);
         player.state.status = 'play';
+        document.title = document.title.replace(titleState[0], titleState[1]);
       });
     });
 
     navigator.mediaSession.setActionHandler('pause', () => {
       audio.value.pause();
       player.state.status = 'play';
+      document.title = document.title.replace(titleState[0], titleState[1]);
     });
 
     navigator.mediaSession.setActionHandler('previoustrack', () => {

src/components/Search.vue

@@ -108,7 +108,13 @@ const shuffleAdd = () => {
     }
   },
   removePlaylist = async id => {
-    if (!id && !prompt('Confirm?')) return;
+    const consent = confirm('Confirm?');
+
+    console.log(id, consent);
+
+    if (!id || !consent) return;
+
+    console.log(id, consent);
 
     if (useVerifyAuth(id)) {
       const { message } = await useAuthRemovePlaylist(id);

src/components/StatusBar.vue

@@ -19,8 +19,6 @@ const { t } = useI18n(),
   player = usePlayer(),
   store = useStore();
 
-defineEmits(['save']);
-
 const showme = reactive({
     menu: false,
     pl: false,
@@ -495,7 +493,7 @@ input[type='range']::-moz-range-track {
     min-width: initial;
   }
   #menu {
-    left: initial;
+    left: auto;
     right: -0.5rem;
   }
 }

src/scripts/fetch.js

@@ -1,4 +1,5 @@
 import { useStore, useSanitize } from './util.js';
+import { useAlert } from '@/stores/misc.js';
 
 export const PIPED_INSTANCE = 'pipedapi.kavin.rocks';
 export const HYPERPIPE_INSTANCE = 'hyperpipeapi.onrender.com';
@@ -12,15 +13,16 @@ export function getPipedQuery() {
 }
 
 export async function getJson(url, opts) {
-  const res = await fetch(url, opts)
+  const errs = useAlert(),
+    res = await fetch(url, opts)
       .then(res => res.json())
       .catch(err => {
         console.error(err);
-      alert(err);
+        errs.add(err);
       });
 
   if (res && res.error) {
-    alert(
+    errs.add(
       res.message
         ? res.message
             .replaceAll('Video', 'Audio')
@@ -28,6 +30,7 @@ export async function getJson(url, opts) {
             .replaceAll('watched', 'heard')
         : res.error,
     );
+
     console.error(res.message);
   } else if (res) return JSON.parse(useSanitize(JSON.stringify(res)));
 }
@@ -53,7 +56,7 @@ export async function getJsonAuth(path, opts = {}) {
   return await fetch('https://' + root + path, opts)
     .then(res => res.json())
     .catch(err => {
-      alert(err);
+      useAlert.add(err);
     });
 }
 

src/scripts/util.js

@@ -87,3 +87,24 @@ export function useMetadata(url, urls, data) {
     });
   }
 }
+
+export async function useManifest(res) {
+  let url, mime;
+
+  if (window.MediaSource !== undefined && res.streams.length > 0) {
+    const { useDash } = await import('./dash.js');
+
+    const dash = useDash(res.streams, res.duration);
+
+    url = 'data:application/dash+xml;charset=utf-8;base64,' + btoa(dash);
+    mime = 'application/dash+xml';
+  } else if (res.hls) {
+    url = res.hls;
+    mime = 'application/x-mpegURL';
+  } else if (res.streams.length > 0) {
+    url = res.streams[0].url;
+    mime = res.streams[0].mimeType;
+  }
+
+  return { url, mime };
+}

src/stores/misc.js

@@ -142,3 +142,19 @@ export const useI18n = defineStore('i18n', () => {
 
   return { locale, map, t, setupLocale };
 });
+
+export const useAlert = defineStore('alert', () => {
+  const msg = ref('');
+
+  function add(m) {
+    if (!m) return;
+
+    msg.value = m;
+
+    setTimeout(() => {
+      if (msg.value == m) msg.value = '';
+    }, 3000);
+  }
+
+  return { msg, add };
+});

vite.config.js

@@ -12,7 +12,7 @@ export default defineConfig({
       registerType: 'autoUpdate',
       workbox: {
         globPatterns: [
-          '**/*.{css,html,png,svg}',
+          '**/*.{css,html,png,svg,woff,woff2}',
           'manifest.webmanifest',
           '**/index*.js',
           '**/shaka*.js',