Bug Fixes

- Fixes #10
- Fixes #12
- Fixes #13
- Added CSP

src/App.vue

@@ -321,18 +321,20 @@ onMounted(() => {
   };
 
   /* Media Controls */
-  navigator.mediaSession.setActionHandler('previoustrack', () => {
-    if (data.state.urls.length > 2) {
-      const i = data.state.urls.map(s => s.url).indexOf(data.state.url);
-      getSong(data.state.urls[i - 1].url);
-    }
-  });
-  navigator.mediaSession.setActionHandler('nexttrack', () => {
-    if (data.state.urls.length > 2) {
-      const i = data.state.urls.map(s => s.url).indexOf(data.state.url);
-      getSong(data.state.urls[i + 1].url);
-    }
-  });
+  if ('mediaSession' in navigator) {
+    navigator.mediaSession.setActionHandler('previoustrack', () => {
+      if (data.state.urls.length > 2) {
+        const i = data.state.urls.map(s => s.url).indexOf(data.state.url);
+        getSong(data.state.urls[i - 1].url);
+      }
+    });
+    navigator.mediaSession.setActionHandler('nexttrack', () => {
+      if (data.state.urls.length > 2) {
+        const i = data.state.urls.map(s => s.url).indexOf(data.state.url);
+        getSong(data.state.urls[i + 1].url);
+      }
+    });
+  }
 
   /* Setup IndexedDB for storing custom playlists */
   useSetupDB();

src/components/NavBar.vue

@@ -17,12 +17,16 @@ function home() {
 }
 
 function set(page) {
-  nav.state.page = page;
   if (page == 'home') {
     useRoute('/');
   } else {
     useRoute(`/${page}/`);
   }
+
+  if (page == 'home' && nav.state.page == 'home') {
+    emit('explore');
+  }
+  nav.state.page = page;
 }
 </script>
 

src/components/Playlists.vue

@@ -37,7 +37,7 @@ defineEmits(['playthis']);
   flex-direction: column;
   position: fixed;
   top: 2rem;
-  bottom: 5rem;
+  bottom: calc(5rem + 5vh);
   right: 1rem;
   width: 30rem;
   max-width: calc(100% - 2rem);

src/components/Prefs.vue

@@ -277,6 +277,8 @@ th {
 }
 td {
   text-align: center;
+  max-width: 40vw;
+  overflow-wrap: break-word;
 }
 td.bi {
   color: indianred;
@@ -291,4 +293,10 @@ footer {
 footer .bi:before {
   font-size: 1.75rem;
 }
+@media (max-width: 500px) {
+  select,
+  input {
+    max-width: 100% !important;
+  }
+}
 </style>

src/components/SearchBar.vue

@@ -18,7 +18,10 @@ const show = ref(false),
           type="text"
           aria-label="Search Input"
           placeholder="Search..."
-          @change="nav.state.search = $event.target.value"
+          @change="
+            nav.state.search = $event.target.value;
+            nav.state.page = 'home';
+          "
           :value="nav.state.search" />
       </div>
     </Transition>

src/components/StatusBar.vue

@@ -319,5 +319,8 @@ input[type='range']::-moz-range-track {
     left: initial;
     right: -0.5rem;
   }
+  #statusbar-progress {
+    min-width: initial;
+  }
 }
 </style>

src/components/TextModal.vue

@@ -10,7 +10,7 @@
   flex-direction: column;
   position: fixed;
   top: 2rem;
-  bottom: 5rem;
+  bottom: calc(5rem + 5vh);
   right: 1rem;
   width: 30rem;
   max-width: calc(100% - 2rem);
@@ -33,4 +33,6 @@
   letter-spacing: 0.1rem;
   font-weight: 600;
 }
+
+@media();
 </style>