changes:

- closes #154
- add uptime for piped instances
- update readme

README.md

@@ -91,7 +91,7 @@ You can use the [Redirector](https://github.com/einaregilsson/Redirector) extens
 
 Hyperpipe
 
-Copyright (C) 2022-23  Shiny Nematoda
+Copyright (C) 2022-24  Shiny Nematoda
 
 This program is free software: you can redistribute it and/or modify
 it under the terms of the GNU Affero General Public License as
@@ -137,7 +137,7 @@ You can reach out to me personally on:
 
 - [Beatbump](https://github.com/snuffyDev/Beatbump) -> Alternative YouTube Music frontend built with Svelte/SvelteKit
 
-- [MellowMusic](https://github.com/you-apps/MellowMusic) -> Music player app using Piped API to fetch music
+- [VibeYou](https://github.com/you-apps/VibeYou) -> Privacy focused music player built with MD3
 
 ---
 

package.json

@@ -19,9 +19,9 @@
     "vue": "^3.2.38"
   },
   "devDependencies": {
-    "@vitejs/plugin-vue": "^4.5.2",
+    "@vitejs/plugin-vue": "^4.6.2",
     "prettier": "^3.1.1",
-    "vite": "^5.0.7",
+    "vite": "^5.0.10",
     "vite-plugin-pwa": "^0.17.4"
   }
 }

src/assets/version.json

@@ -1,3 +1,3 @@
 {
-  "date": "2023-12-12"
+  "date": "2024-01-01"
 }

src/components/Playlists.vue

@@ -86,10 +86,10 @@ onMounted(() => {
         </span>
         <div v-else-if="plurl.thumbnails" class="pl-img">
           <img
+            loading="lazy"
             :src="plurl.thumbnails[0].url"
             :height="plurl.thumbnails[0].height"
-            :width="plurl.thumbnails[0].width"
-            loading="lazy" />
+            :width="plurl.thumbnails[0].width" />
         </div>
         <span class="pl-main caps">{{ plurl.title }}</span>
         <span class="bi bi-grip-horizontal pl-handle clickable"></span>

src/components/Prefs.vue

@@ -25,8 +25,7 @@ const { t, setupLocale } = useI18n(),
   compact = ref(false),
   prm = ref(false),
   cc = ref(false),
-  restoreUrl = ref(''),
-  prompt = txt => window.prompt(txt);
+  restoreUrl = ref('');
 
 getJson('https://piped-instances.kavin.rocks').then(i => (instances.value = i));
 
@@ -86,7 +85,18 @@ function getStoreBool(key, ele, def) {
   ele.value = getStore(key) || def;
 }
 
-async function setAuth(key) {
+function toPerc(n) {
+  return n.toFixed(0) + '%'
+}
+
+function setCustom(key, e) {
+  
+        let v = e.target.value;
+        v = v == 'x' ? prompt('instance') : v
+        v && setStore(key, v);
+}
+
+async function setAuth(e) {
   if (getStore('authapi')) {
     if (!confirm('This requires a logout. Confirm logout?')) return;
 
@@ -98,7 +108,7 @@ async function setAuth(key) {
   }
 
   store.removeItem('auth');
-  setStore('authapi', key);
+  setCustom('authapi', e);
 }
 
 const verifyApi = computed(() =>
@@ -264,7 +274,7 @@ onMounted(() => {
     v-if="hypInstances"
     class="input"
     :value="getStore('api') || HYPERPIPE_INSTANCE"
-    @change="setStore('api', $event.target.value)">
+    @change="setCustom('api', $event)">
     <option
       v-for="i in hypInstances"
       :key="i.name"
@@ -275,6 +285,8 @@ onMounted(() => {
     <option v-if="!verifyApi">
       {{ getStore('api') || HYPERPIPE_INSTANCE }}
     </option>
+
+    <option value="x">Custom</option>
   </select>
 
   <div class="table-wrap">
@@ -310,12 +322,7 @@ onMounted(() => {
     v-if="instances"
     class="input"
     :value="getStore('pipedapi') || PIPED_INSTANCE"
-    @change="
-      e => {
-        const v = e.target.value;
-        setStore('pipedapi', v == 'x' ? prompt('instance') : v);
-      }
-    ">
+    @change="setCustom('pipedapi', $event)">
     <option
       v-for="i in instances"
       :key="i.name"
@@ -336,7 +343,7 @@ onMounted(() => {
     v-if="instances"
     class="input"
     :value="getStore('authapi') || PIPED_INSTANCE"
-    @change="setAuth($event.target.value)">
+    @change="setAuth">
     <option
       v-for="i in instances"
       :key="i.name"
@@ -347,6 +354,8 @@ onMounted(() => {
     <option v-if="!verifyAuthApi">
       {{ getStore('authapi') || PIPED_INSTANCE }}
     </option>
+
+    <option value="x">Custom</option>
   </select>
 
   <div class="table-wrap">
@@ -358,6 +367,9 @@ onMounted(() => {
           <th>{{ t('instances.cdn') }}</th>
           <th>{{ t('instances.up_to_date') }}</th>
           <th>{{ t('instances.version') }}</th>
+          <th>{{ t('instances.uptime_24h') }}</th>
+          <th>{{ t('instances.uptime_7d') }}</th>
+          <th>{{ t('instances.uptime_30d') }}</th>
         </tr>
       </thead>
       <tbody v-for="i in instances" :key="i.name">
@@ -373,6 +385,9 @@ onMounted(() => {
           <td>
             {{ i.version }}
           </td>
+          <td>{{ toPerc(i.uptime_24h) }}</td>
+          <td>{{ toPerc(i.uptime_7d) }}</td>
+          <td>{{ toPerc(i.uptime_30d) }}</td>
         </tr>
       </tbody>
     </table>

src/locales/en.json

@@ -90,7 +90,10 @@
     "cdn": "CDN",
     "up_to_date": "Up to Date",
     "version": "Version",
-    "default": "Default"
+    "default": "Default",
+    "uptime_7d": "Uptime (7d)",
+    "uptime_24h": "Uptime (24h)",
+    "uptime_30d": "Uptime (30d)"
   },
   "lyrics": {
     "load": "Fetching Lyrics",