Fixed:

- Blank custom api url
- Collapsing .pl-item without art

.woodpecker/surge.yml

@@ -1,13 +1,19 @@
 pipeline:
-  deploy:
+  build:
     image: node:alpine
     commands:
       - npm install
       - npm run build
-      - npm install surge
+    when:
+      event: [push, pull_request]
+
+  deploy:
+    image: node:alpine
+    commands:
+      - npm install surge && npm audit fix
       - cp dist/index.html dist/200.html
       - npx surge ./dist hyperpipe.surge.sh
-    secrets: [ surge_login, surge_token ]
+    secrets: [surge_login, surge_token]
     when:
       branch: main
       event: push

index.html

@@ -6,8 +6,8 @@
       http-equiv="Content-Security-Policy"
       content="default-src 'self'; img-src *; media-src * blob:; style-src 'unsafe-inline' 'self'; connect-src *" />
     <link rel="icon" href="/favicon.svg" />
-    <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
+    <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
-    <meta name="msapplication-TileColor" content="#181818">
+    <meta name="msapplication-TileColor" content="#181818" />
     <link rel="preconnect" href="https://cdn.jsdelivr.net" />
     <link rel="preconnect" href="https://hyperpipeapi.onrender.com" />
     <link rel="dns-prefetch" href="https://pipedapi.kavin.rocks" />
@@ -20,7 +20,9 @@
     <meta property="og:title" content="Hyperpipe" />
     <meta property="og:type" content="website" />
     <meta property="og:image" content="/android-maskable.png" />
-    <meta property="og:description" content="Privacy respecting YouTube Music Frontend." />
+    <meta
+      property="og:description"
+      content="Privacy respecting YouTube Music Frontend." />
 
     <title>Hyperpipe</title>
   </head>

src/components/NavBar.vue

@@ -34,8 +34,10 @@ function set(page) {
   <nav>
     <h1 class="bi" @click="home">
       <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
-        <path d="M5.097 13.097a2.904 2.904 0 0 1 5.806 0A2.905 2.905 0 0 1 8 16a2.905 2.905 0 0 1-2.903-2.903Z"/>
+        <path
-        <path d="M2.194 11.618a1.614 1.614 0 1 0 2.258 1.479c0-.661-.399-1.23-.968-1.479v-4.87l3.097 2.065v-4.31l1.432-2.18 1.406 2.09v4.4l3.097-2.065v4.87a1.614 1.614 0 1 0 2.258 1.479c0-.661-.398-1.23-.968-1.479v-7.27L10.71 6.413v-2.4L7.987 0 5.29 4.116v2.297L2.194 4.348v7.27Z"/>
+          d="M5.097 13.097a2.904 2.904 0 0 1 5.806 0A2.905 2.905 0 0 1 8 16a2.905 2.905 0 0 1-2.903-2.903Z" />
+        <path
+          d="M2.194 11.618a1.614 1.614 0 1 0 2.258 1.479c0-.661-.399-1.23-.968-1.479v-4.87l3.097 2.065v-4.31l1.432-2.18 1.406 2.09v4.4l3.097-2.065v4.87a1.614 1.614 0 1 0 2.258 1.479c0-.661-.398-1.23-.968-1.479v-7.27L10.71 6.413v-2.4L7.987 0 5.29 4.116v2.297L2.194 4.348v7.27Z" />
       </svg>
     </h1>
 

src/components/Player.vue

@@ -83,33 +83,23 @@ async function Stream() {
     window.audioPlayer
       .load(url, 0, mime)
       .then(() => {
+        window.audioPlayer.configure('abr.enabled', true);
+
         if (quality && quality != 'auto') {
           window.audioPlayer.configure('abr.enabled', false);
 
-          const tracks = window.audioPlayer.getVariantTracks();
+          const tracks = window.audioPlayer.getVariantTracks(),
+            bandwidths = tracks.map(i => i.bandwidth);
 
           let sel;
 
-          if (quality == 'best') {
+          if (quality == 'best') sel = Math.max(...bandwidths);
-            let best = { bandwidth: 0 };
+          else if (quality == 'worst') sel = Math.min(...bandwidths);
-
-            tracks.forEach(track => {
-              if (track.bandwidth > best.bandwidth) best = track;
-            });
-
-            sel = best;
-          } else if (quality == 'worst') {
-            let worst = { bandwidth: 10 ** 8 };
-
-            tracks.forEach(track => {
-              if (track.bandwidth < worst.bandwidth) worst = track;
-            });
-
-            sel = worst;
-          }
 
           if (sel) {
-            window.audioPlayer.selectVariantTrack(sel);
+            window.audioPlayer.selectVariantTrack(
+              tracks[bandwidths.indexOf(sel)],
+            );
           }
         }
       })

src/components/Playlists.vue

@@ -56,9 +56,9 @@ defineEmits(['playthis']);
 .pl-item {
   display: flex;
   align-items: center;
-  grid-column-gap: 1rem;
+  min-height: 3.55rem;
+  grid-column-gap: 0.4rem;
   padding: 0.4rem;
-  padding-right: 1rem;
   margin: 0.125rem;
   border-radius: 0.25rem;
   background: var(--color-background);

src/components/Prefs.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { ref, onMounted } from 'vue';
+import { ref, computed, onMounted } from 'vue';
 
 import { getJson } from '@/scripts/fetch.js';
 import { SUPPORTED_LOCALES, useI18n } from '@/stores/misc.js';
@@ -53,6 +53,22 @@ function getStoreBool(key, ele) {
   ele.value = getStore(key) || true;
 }
 
+const verifyApi = computed(() =>
+    hypInstances.value
+      .map(i => i.api_url.replace('https://', '').replace('http://'))
+      .includes(getStore('api') || 'hyperpipeapi.onrender.com'),
+  ),
+  verifyPipedApi = computed(() =>
+    instances.value
+      .map(i => i.api_url.replace('https://', ''))
+      .includes(getStore('pipedapi') || 'pipedapi.kavin.rocks'),
+  ),
+  verifyAuthApi = computed(() =>
+    instances.value
+      .map(i => i.api_url.replace('https://', ''))
+      .includes(getStore('authapi') || 'pipedapi.kavin.rocks'),
+  );
+
 onMounted(() => {
   getStoreBool('next', next);
 });
@@ -143,6 +159,10 @@ onMounted(() => {
       :value="i.api_url.replace('https://', '').replace('http://', '')">
       {{ i.name }}
     </option>
+
+    <option v-if="!verifyApi">
+      {{ getStore('api') || 'hyperpipeapi.onrender.com' }}
+    </option>
   </select>
 
   <div class="table-wrap">
@@ -174,9 +194,13 @@ onMounted(() => {
     <option
       v-for="i in instances"
       :key="i.name"
-      :value="i.api_url.replace('https://', '').replace('http://', '')">
+      :value="i.api_url.replace('https://', '')">
       {{ i.name.replace('Official', 'Default') }}
     </option>
+
+    <option v-if="!verifyPipedApi">
+      {{ getStore('pipedapi') || 'pipedapi.kavin.rocks' }}
+    </option>
   </select>
 
   <h3>{{ t('instances.auth') }}</h3>
@@ -188,9 +212,13 @@ onMounted(() => {
     <option
       v-for="i in instances"
       :key="i.name"
-      :value="i.api_url.replace('https://', '').replace('http://', '')">
+      :value="i.api_url.replace('https://', '')">
       {{ i.name.replace('Official', 'Default') }}
     </option>
+
+    <option v-if="!verifyAuthApi">
+      {{ getStore('authapi') || 'pipedapi.kavin.rocks' }}
+    </option>
   </select>
 
   <div class="table-wrap">