Changes:

- Closes #14
- Removed margin for player (#9)
- Bug Fixes
- Blur theme

Dockerfile

@@ -7,9 +7,9 @@ WORKDIR /app/
 
 COPY . .
 
-RUN sed -i "s/hyperpipeapi.onrender.com/$api/g" src/scripts/fetch.js src/components/Prefs.vue
+RUN sed -i "s/hyperpipeapi.onrender.com/$api/g" index.html src/scripts/fetch.js src/components/Prefs.vue
 
-RUN sed -i "s/pipedapi.kavin.rocks/$pipedapi/g" src/scripts/fetch.js src/components/Prefs.vue
+RUN sed -i "s/pipedapi.kavin.rocks/$pipedapi/g" index.html src/scripts/fetch.js src/components/Prefs.vue
 
 RUN npm install && \
     npm run build

index.html

@@ -4,11 +4,11 @@
     <meta charset="UTF-8" />
     <meta
       http-equiv="Content-Security-Policy"
-      content="default-src 'self'; img-src *; media-src * blob:; script-src 'self'; style-src 'unsafe-inline' 'self' cdn.jsdelivr.net; font-src cdn.jsdelivr.net; connect-src *" />
+      content="default-src 'self'; img-src *; media-src * blob:; style-src 'unsafe-inline' 'self'; connect-src *" />
     <link rel="icon" href="/favicon.svg" />
-    <link rel="preconnect" href="https://pipedapi.kavin.rocks" />
     <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" />
     <link rel="dns-prefetch" href="https://hyperpipe-proxy.onrender.com" />
     <link rel="dns-prefetch" href="https://piped-instances.kavin.rocks" />
 
@@ -22,9 +22,9 @@
 
     <div id="app"></div>
 
-    <link
+    <!--link
       rel="stylesheet"
-      href="https://cdn.jsdelivr.net/npm/bootstrap-icons@latest/font/bootstrap-icons.css" />
+      href="https://cdn.jsdelivr.net/npm/bootstrap-icons@latest/font/bootstrap-icons.css" /-->
     <script type="module" src="/src/main.js" defer></script>
   </body>
 </html>

package-lock.json

@@ -8,12 +8,12 @@
       "name": "hyperpipe",
       "version": "0.0.0",
       "dependencies": {
+        "bootstrap-icons": "^1.9.1",
         "buffer": "^6.0.3",
         "dompurify": "^2.3.10",
         "mux.js": "^6.2.0",
         "peerjs": "^1.4.6",
         "pinia": "^2.0.16",
-        "readable-stream": "^4.1.0",
         "shaka-player": "^4.1.2",
         "stream-browserify": "^3.0.0",
         "vue": "^3.2.31",
@@ -175,17 +175,6 @@
       "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.2.37.tgz",
       "integrity": "sha512-4rSJemR2NQIo9Klm1vabqWjD8rs/ZaJSzMxkMNeJS6lHiUjjUeYFbooN19NgFjztubEKh3WlZUeOLVdbbUWHsw=="
     },
-    "node_modules/abort-controller": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/abort-controller/-/abort-controller-3.0.0.tgz",
-      "integrity": "sha512-h8lQ8tacZYnR3vNQTgibj+tODHI5/+l06Au2Pcriv/Gmet0eaj4TwWH41sO9wnHDiQsEj19q0drzdWdeAHtweg==",
-      "dependencies": {
-        "event-target-shim": "^5.0.0"
-      },
-      "engines": {
-        "node": ">=6.5"
-      }
-    },
     "node_modules/base64-js": {
       "version": "1.5.1",
       "resolved": "https://registry.npmjs.org/base64-js/-/base64-js-1.5.1.tgz",
@@ -205,6 +194,11 @@
         }
       ]
     },
+    "node_modules/bootstrap-icons": {
+      "version": "1.9.1",
+      "resolved": "https://registry.npmjs.org/bootstrap-icons/-/bootstrap-icons-1.9.1.tgz",
+      "integrity": "sha512-d4ZkO30MIkAhQ2nNRJqKXJVEQorALGbLWTuRxyCTJF96lRIV6imcgMehWGJUiJMJhglN0o2tqLIeDnMdiQEE9g=="
+    },
     "node_modules/buffer": {
       "version": "6.0.3",
       "resolved": "https://registry.npmjs.org/buffer/-/buffer-6.0.3.tgz",
@@ -608,14 +602,6 @@
       "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-2.0.2.tgz",
       "integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w=="
     },
-    "node_modules/event-target-shim": {
-      "version": "5.0.1",
-      "resolved": "https://registry.npmjs.org/event-target-shim/-/event-target-shim-5.0.1.tgz",
-      "integrity": "sha512-i/2XbnSz/uxRCU6+NdVJgKWDTM427+MqYbkQzD321DuCQJUqOuJKIA0IM2+W2xtYHdKOmZ4dR6fExsd4SXL+WQ==",
-      "engines": {
-        "node": ">=6"
-      }
-    },
     "node_modules/eventemitter3": {
       "version": "4.0.7",
       "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-4.0.7.tgz",
@@ -871,17 +857,6 @@
         "node": ">= 0.6.0"
       }
     },
-    "node_modules/readable-stream": {
-      "version": "4.1.0",
-      "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-4.1.0.tgz",
-      "integrity": "sha512-sVisi3+P2lJ2t0BPbpK629j8wRW06yKGJUcaLAGXPAUhyUxVJm7VsCTit1PFgT4JHUDMrGNR+ZjSKpzGaRF3zw==",
-      "dependencies": {
-        "abort-controller": "^3.0.0"
-      },
-      "engines": {
-        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
-      }
-    },
     "node_modules/regenerator-runtime": {
       "version": "0.13.9",
       "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.9.tgz",
@@ -1255,19 +1230,16 @@
       "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.2.37.tgz",
       "integrity": "sha512-4rSJemR2NQIo9Klm1vabqWjD8rs/ZaJSzMxkMNeJS6lHiUjjUeYFbooN19NgFjztubEKh3WlZUeOLVdbbUWHsw=="
     },
-    "abort-controller": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/abort-controller/-/abort-controller-3.0.0.tgz",
-      "integrity": "sha512-h8lQ8tacZYnR3vNQTgibj+tODHI5/+l06Au2Pcriv/Gmet0eaj4TwWH41sO9wnHDiQsEj19q0drzdWdeAHtweg==",
-      "requires": {
-        "event-target-shim": "^5.0.0"
-      }
-    },
     "base64-js": {
       "version": "1.5.1",
       "resolved": "https://registry.npmjs.org/base64-js/-/base64-js-1.5.1.tgz",
       "integrity": "sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA=="
     },
+    "bootstrap-icons": {
+      "version": "1.9.1",
+      "resolved": "https://registry.npmjs.org/bootstrap-icons/-/bootstrap-icons-1.9.1.tgz",
+      "integrity": "sha512-d4ZkO30MIkAhQ2nNRJqKXJVEQorALGbLWTuRxyCTJF96lRIV6imcgMehWGJUiJMJhglN0o2tqLIeDnMdiQEE9g=="
+    },
     "buffer": {
       "version": "6.0.3",
       "resolved": "https://registry.npmjs.org/buffer/-/buffer-6.0.3.tgz",
@@ -1470,11 +1442,6 @@
       "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-2.0.2.tgz",
       "integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w=="
     },
-    "event-target-shim": {
-      "version": "5.0.1",
-      "resolved": "https://registry.npmjs.org/event-target-shim/-/event-target-shim-5.0.1.tgz",
-      "integrity": "sha512-i/2XbnSz/uxRCU6+NdVJgKWDTM427+MqYbkQzD321DuCQJUqOuJKIA0IM2+W2xtYHdKOmZ4dR6fExsd4SXL+WQ=="
-    },
     "eventemitter3": {
       "version": "4.0.7",
       "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-4.0.7.tgz",
@@ -1625,14 +1592,6 @@
       "resolved": "https://registry.npmjs.org/process/-/process-0.11.10.tgz",
       "integrity": "sha512-cdGef/drWFoydD1JsMzuFf8100nZl+GT+yacc2bEced5f9Rjk4z+WtFUTBu9PhOi9j/jfmBPu0mMEY4wIdAF8A=="
     },
-    "readable-stream": {
-      "version": "4.1.0",
-      "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-4.1.0.tgz",
-      "integrity": "sha512-sVisi3+P2lJ2t0BPbpK629j8wRW06yKGJUcaLAGXPAUhyUxVJm7VsCTit1PFgT4JHUDMrGNR+ZjSKpzGaRF3zw==",
-      "requires": {
-        "abort-controller": "^3.0.0"
-      }
-    },
     "regenerator-runtime": {
       "version": "0.13.9",
       "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.9.tgz",

package.json

@@ -10,6 +10,7 @@
     "check": "prettier --check ."
   },
   "dependencies": {
+    "bootstrap-icons": "^1.9.1",
     "buffer": "^6.0.3",
     "dompurify": "^2.3.10",
     "mux.js": "^6.2.0",

src/App.vue

@@ -173,6 +173,7 @@ async function getAlbum(e) {
   });
 
   useRoute(e);
+  nav.state.page = 'home';
 
   artist.reset();
 }
@@ -200,6 +201,7 @@ async function getArtist(e) {
   artist.set(json);
 
   useRoute('/channel/' + e);
+  nav.state.page = 'home';
 }
 
 async function getNext(hash) {
@@ -385,11 +387,17 @@ onMounted(() => {
     <Prefs v-if="nav.state.page == 'prefs'" />
   </main>
 
-  <Playlists v-if="player.state.playlist" @playthis="playThis" />
+  <Transition name="fade">
+    <Playlists v-if="player.state.playlist" @playthis="playThis" />
+  </Transition>
 
-  <Lyrics v-if="player.state.lyrics" />
+  <Transition name="fade">
+    <Lyrics v-if="player.state.lyrics" />
+  </Transition>
 
-  <Info v-if="player.state.info" :text="data.state.description" />
+  <Transition name="fade">
+    <Info v-if="player.state.info" :text="data.state.description" />
+  </Transition>
 
   <StatusBar @save="SaveTrack" />
 

src/assets/base.css

@@ -38,6 +38,24 @@ body[data-theme='dark'] {
   --color-text: var(--vt-c-text-dark-2);
 }
 
+body[data-theme='black'] {
+  --color-background: #000;
+  --color-shadow: var(--vt-c-black);
+}
+
+body[data-theme='blur'] #statusbar,
+body[data-theme='blur'] .txt-modal,
+body[data-theme='blur'] .pl-modal,
+body[data-theme='blur'] .modal-box,
+body[data-theme='blur'] .popup input[type='text'] {
+  background: #11111199;
+  backdrop-filter: blur(10px);
+}
+
+body[data-theme='blur'] .modal {
+  backdrop-filter: blur(5px);
+}
+
 body[data-theme='light'] {
   --color-foreground: cornflowerblue;
   --color-background: var(--vt-c-white);

src/components/Prefs.vue

@@ -63,6 +63,7 @@ onMounted(() => {
     @change="setTheme($event.target.value)">
     <option value="dark">Dark (Default)</option>
     <option value="light">Light</option>
+    <option value="blur">Blur</option>
     <option value="dracula">Dracula</option>
     <option value="nord">Nord</option>
   </select>

src/components/SearchBar.vue

@@ -30,6 +30,7 @@ const show = ref(false),
 
 <style scoped>
 .popup {
+  background: transparent;
   right: 0;
   top: -0.5rem;
   bottom: -0.5rem;

src/components/StatusBar.vue

@@ -118,38 +118,40 @@ function Save() {
           player.state.lyrics ? player.toggle('lyrics') : '';
           player.state.info ? player.toggle('info') : '';
         "></button>
-      <div id="menu" v-if="showme.menu" class="popup">
+      <Transition name="fade">
-        <button
+        <div id="menu" v-if="showme.menu" class="popup">
-          id="info-btn"
+          <button
-          class="bi bi-info-circle"
+            id="info-btn"
-          aria-label="Show Information About Song"
+            class="bi bi-info-circle"
-          @click="player.toggle('info')"></button>
+            aria-label="Show Information About Song"
-        <button
+            @click="player.toggle('info')"></button>
-          id="addToPlaylist"
+          <button
-          title="Add Current Song to a Playlist"
+            id="addToPlaylist"
-          aria-label="Add Current Song to a Playlist"
+            title="Add Current Song to a Playlist"
-          class="bi bi-collection"
+            aria-label="Add Current Song to a Playlist"
-          @click="Save"></button>
+            class="bi bi-collection"
-        <button
+            @click="Save"></button>
-          id="list-btn"
+          <button
-          title="Current Playlist"
+            id="list-btn"
-          aria-label="Current Playlist"
+            title="Current Playlist"
-          class="bi bi-music-note-list"
+            aria-label="Current Playlist"
-          :data-active="player.state.playlist"
+            class="bi bi-music-note-list"
-          @click="player.toggle('playlist')"></button>
+            :data-active="player.state.playlist"
-        <button
+            @click="player.toggle('playlist')"></button>
-          id="btn-lyrics"
+          <button
-          class="bi bi-file-music"
+            id="btn-lyrics"
-          :data-active="player.state.lyrics"
+            class="bi bi-file-music"
-          @click="player.toggle('lyrics')"></button>
+            :data-active="player.state.lyrics"
-        <button
+            @click="player.toggle('lyrics')"></button>
-          id="loop-btn"
+          <button
-          title="Loop"
+            id="loop-btn"
-          aria-label="Loop"
+            title="Loop"
-          class="bi bi-infinity"
+            aria-label="Loop"
-          :data-active="player.state.loop"
+            class="bi bi-infinity"
-          @click="player.toggle('loop')"></button>
+            :data-active="player.state.loop"
-      </div>
+            @click="player.toggle('loop')"></button>
+        </div>
+      </Transition>
     </div>
   </div>
 </template>
@@ -165,12 +167,8 @@ function Save() {
   background: var(--color-background);
   min-height: 15vh;
 }
-.statusbar-left {
-  margin-left: auto;
-}
 .statusbar-right {
   margin-left: 0.5rem;
-  margin-right: auto;
 }
 .bi-play,
 .bi-pause {

src/components/TextModal.vue

@@ -33,6 +33,4 @@
   letter-spacing: 0.1rem;
   font-weight: 600;
 }
-
-@media();
 </style>

src/main.js

@@ -3,6 +3,8 @@ import { createPinia } from 'pinia';
 
 import App from './App.vue';
 
+import('bootstrap-icons/font/bootstrap-icons.css');
+
 const pinia = createPinia(),
   app = createApp(App);