mobile player nav

client/src/assets/styles.css

@@ -1,4 +1,4 @@
-@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.2/font/bootstrap-icons.css");
+@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.4/font/bootstrap-icons.css");
 
 html,
 body {
@@ -54,6 +54,11 @@ img {
     cursor: pointer;
 }
 
+.progress-minified {
+    height: 3px !important;
+    cursor: pointer;
+}
+
 .progress-bar {
     transition: unset !important;
 }

client/src/components/Login.vue

@@ -22,7 +22,7 @@
                             <div class="input-group flex-nowrap">
                                 <span class="input-group-text bi bi-universal-access"></span>
                                 <input ref="server" type="text" class="form-control" placeholder="Forte server"
-                                    aria-label="Server" aria-describedby="addon-wrapping">
+                                    aria-label="Server" aria-describedby="addon-wrapping" value="localhost">
                             </div>
                             <div class="input-group flex-nowrap">
                                 <span class="input-group-text bi bi-person-circle"></span>

client/src/components/NavBar.vue

@@ -1,47 +1,18 @@
 <template>
-    <nav class="card mx-3 mt-3 rounded-0 border-0">
+    <nav class="card mx-3 mt-3 rounded-0 border-0 hide-on-mobile">
         <div class="card-body p-3">
             <div class="d-flex flex-column">
                 <div class="d-inline-flex input-group flex-nowrap">
                     <input ref="search_field" type="text" class="form-control search-card-input" placeholder="Search"
                         aria-label="Search" @input="search" @keyup.enter="search_now">
                 </div>
-                <div class="hide-on-desktop mt-3">
-                    <ul class="nav nav-pills nav-justified">
-                        <li class="nav-item">
-                            <router-link to="/" class="nav-link fw-bold" aria-current="page"
-                                :class="{ 'active theme-btn text-white': path == '/', 'theme-color': path != '/' }">
-                                <span class="fs-5">Home</span>
-                            </router-link>
-                        </li>
-                        <li class="nav-item">
-                            <router-link to="/artists" class="nav-link fw-bold" aria-current="page"
-                                :class="{ 'active theme-btn text-white': path == '/artists', 'theme-color': path != '/artists' }">
-                                <span class="fs-5">Artists</span>
-                            </router-link>
-                        </li>
-                        <li class="nav-item">
-                            <router-link to="/albums" class="nav-link fw-bold" aria-current="page"
-                                :class="{ 'active theme-btn text-white': path == '/albums', 'theme-color': path != '/albums' }">
-                                <span class="fs-5">Albums</span>
-                            </router-link>
-                        </li>
-                        <li class="nav-item">
-                            <router-link to="/profile" class="nav-link fw-bold" aria-current="page"
-                                :class="{ 'active theme-btn text-white': path == '/profile', 'theme-color': path != '/profile' }">
-                                <span class="fs-5">Profile</span>
-                            </router-link>
-                        </li>
-                    </ul>
-                </div>
             </div>
         </div>
     </nav>
 </template>
 
 <script setup>
 import { ref } from 'vue';
-import { computed } from 'vue';
 import { useRouter } from 'vue-router'
 
 const router = useRouter();
@@ -53,21 +24,12 @@ function debounce(func, timeout = 200) {
         clearTimeout(timer);
         timer = setTimeout(() => { func.apply(this, args); }, timeout);
     };
-
 }
 
-const path = computed(() => {
-    return router.currentRoute.value.path;
-})
-
 async function focus_search() {
     search_field.value.focus();
 }
 
-async function clear_search() {
-    search_field.value.value = "";
-}
-
 async function search_now() {
     let query = search_field.value.value;
     if (!query.length) {

client/src/components/NavBarMobile.vue

@@ -0,0 +1,54 @@
+<template>
+    <div class="player-card hide-on-desktop">
+        <ul class="nav nav-pills nav-fill">
+            <li class="nav-item">
+                <router-link to="/" class="nav-link text-white fw-bold" aria-current="page">
+                    <span class="fs-5 bi me-1"
+                        :class="{ 'bi-house-door-fill': path == '/', 'bi-house-door': path != '/' }"></span>
+                </router-link>
+            </li>
+            <li class="nav-item">
+                <router-link to="/search" class="nav-link text-white fw-bold" aria-current="page">
+                    <span class="fs-5 bi me-1"
+                        :class="{ 'bi bi-compass-fill': path.startsWith('/search'), 'bi bi-compass': !path.startsWith('/search') }"></span>
+                </router-link>
+            </li>
+            <li class="nav-item">
+                <router-link to="/artists" class="nav-link text-white fw-bold" aria-current="page">
+                    <span class="fs-5 bi me-1"
+                        :class="{ 'bi-person-fill': path == '/artists', 'bi-person': path != '/artists' }"></span>
+                </router-link>
+            </li>
+            <li class="nav-item">
+                <router-link to="/albums" class="nav-link text-white fw-bold" aria-current="page">
+                    <span class="fs-5 bi me-1"
+                        :class="{ 'bi-vinyl-fill': path == '/albums', 'bi-vinyl': path != '/albums' }"></span>
+                </router-link>
+            </li>
+            <li class="nav-item">
+                <router-link to="/playlists" class="nav-link text-white fw-bold" aria-current="page">
+                    <span class="fs-5 bi me-1"
+                        :class="{ 'bi-cassette-fill': path == '/playlists', 'bi-cassette': path != '/playlists' }"></span>
+                </router-link>
+            </li>
+            <li class="nav-item">
+                <router-link to="/profile" class="nav-link text-white fw-bold" aria-current="page">
+                    <span class="fs-5 bi bi-person-circle me-1"></span>
+                </router-link>
+            </li>
+        </ul>
+    </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+import { computed } from 'vue';
+import { useRouter } from 'vue-router'
+
+const router = useRouter();
+const search_field = ref(null);
+
+const path = computed(() => {
+    return router.currentRoute.value.path;
+})
+</script>

client/src/components/Player.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="player-card card text-bg-dark rounded-0 hide-on-mobile">
+    <div class="player-card card rounded-0 hide-on-mobile">
         <div class="card-body p-0">
             <div class="d-flex flex-column">
                 <div v-show="store.playing.loaded">
@@ -31,8 +31,8 @@
                     <div class="btn-group btn-group-sm" role="group" aria-label="Basic example">
                         <button type="button" class="btn btn-light bi bi-skip-start-fill" @click="play_previous"></button>
                         <button type="button" class="btn btn-light bi" :class="{
-                            'bi-play-fill': !store.playing.is_playing, 'bi-pause-fill': store.playing.is_playing
-                        }" @click="play"></button>
+                                'bi-play-fill': !store.playing.is_playing, 'bi-pause-fill': store.playing.is_playing
+                            }" @click="play"></button>
                         <button type="button" class="btn btn-light bi bi-skip-end-fill" @click="play_next"></button>
                     </div>
                     <!-- Progress bar -->
@@ -99,19 +99,20 @@
                     <div class="btn-group btn-group-sm me-2" role="group" aria-label="Basic example">
                         <button type="button" class="btn btn-light bi bi-skip-start-fill" @click="play_previous"></button>
                         <button type="button" class="btn btn-light bi" :class="{
-                            'bi-play-fill': !store.playing.is_playing, 'bi-pause-fill': store.playing.is_playing
-                        }" @click="play"></button>
+                                    'bi-play-fill': !store.playing.is_playing, 'bi-pause-fill': store.playing.is_playing
+                                }" @click="play"></button>
                         <button type="button" class="btn btn-light bi bi-skip-end-fill" @click="play_next"></button>
                     </div>
                 </div>
             </div>
-            <div class="progress flex-fill m-2" @click="seekProgress($event)">
+            <div class="progress progress-minified flex-fill" @click="seekProgress($event)">
                 <div class="progress-bar theme-btn progress-bar-animated" aria-valuenow="0" aria-valuemin="0"
                     aria-valuemax="100" :style="{ 'width': store.playing.progress + '%' }">
                 </div>
             </div>
         </div>
     </div>
+    <NavBarMobile />
     <Lyrics ref="lyricsEl" />
     <Queue ref="queueEl" />
     <MobileView ref="mobileViewEl" :seekProgress="seekProgress" :play="play" :play_next="play_next"
@@ -133,6 +134,7 @@ import Lyrics from './Lyrics.vue';
 import MobileView from './MobileView.vue';
 import { right_click, action } from '/js/events.js';
 import QualityDisplay from './QualityDisplay.vue';
+import NavBarMobile from './NavBarMobile.vue';
 
 const router = useRouter();
 

client/src/components/Search.vue

@@ -1,5 +1,13 @@
 <template>
     <ul class="list-group rounded-0 mx-3 px-3 pb-3 theme-background">
+        <div class="hide-on-desktop card-body py-3">
+            <div class="d-flex flex-column">
+                <div class="d-inline-flex input-group flex-nowrap">
+                    <input ref="search_field" type="text" class="form-control search-card-input" placeholder="Search"
+                        aria-label="Search" @input="search" @keyup.enter="search_now">
+                </div>
+            </div>
+        </div>
         <li v-if="results.length == 0"
             class="list-group-item theme-list-item-no-hover foreground theme-border d-flex justify-content-between">
             <div class="d-flex w-100 justify-content-between">
@@ -44,6 +52,7 @@ import { action, right_click } from '/js/events.js';
 
 const router = useRouter();
 const results = ref([]);
+const search_field = ref(null);
 
 const query_param = computed(() => {
     return router.currentRoute.value.params.query;
@@ -91,11 +100,37 @@ function get_cover(type, cover) {
     }
 }
 
+function debounce(func, timeout = 200) {
+    let timer;
+    return (...args) => {
+        clearTimeout(timer);
+        timer = setTimeout(() => { func.apply(this, args); }, timeout);
+    };
+}
+
+async function search_now() {
+    let query = search_field.value.value;
+    if (!query.length) {
+        search_field.value.focus();
+        return;
+    }
+    router.push('/search/' + query);
+}
+
+const search = debounce(async (event) => {
+    event.preventDefault();
+    let query = search_field.value.value;
+    if (!query.length) {
+        search_field.value.focus();
+        return;
+    }
+    router.push('/search/' + query);
+});
+
 async function get_search_results() {
     let query = router.currentRoute.value.params.query;
-    if (!query) {
-        router.push('/');
-    }
+    if (!query) return;
+
     let response = await ft.API('/search/' + query);
     if (!response) return;
 
@@ -104,9 +139,7 @@ async function get_search_results() {
 
 async function get_federated_search_results() {
     let query = router.currentRoute.value.params.query;
-    if (!query) {
-        router.push('/');
-    }
+    if (!query) return;
 
     // Get federated servers
     let federated_servers = JSON.parse(localStorage.getItem('federated_servers'));
@@ -115,7 +148,7 @@ async function get_federated_search_results() {
     for (let i = 0; i < federated_servers.length; i++) {
         let server = federated_servers[i];
         let response = await ft.fAPI(server, '/search/' + query);
-        if (!response) return;
+        if (!response || !response.data) return;
 
         // Add federated server results to results
         response.data.forEach(result => {

client/src/js/ft.js

@@ -1242,15 +1242,16 @@ class Forte {
             .then(data => data.filter(server => server.path == 'hostnames'))
             .then(data => data[0].url)
             .catch(() => null);
-        if (!url) return null;
+        if (!url) {
+            localStorage.setItem('federated_servers', JSON.stringify([]));
+            return;
+        };
 
         let servers = await fetch(url)
             .then(res => res.json())
             .then(data => data.tree)
             .then(data => data.map(server => server.path))
-            .catch(() => null);
-        if (!servers) return null;
-
+            .catch(() => []);
         localStorage.setItem('federated_servers', JSON.stringify(servers));
     }
 }

client/src/router/index.js

@@ -62,6 +62,10 @@ const routes = [
         path: "/search/:query",
         component: Search
     },
+    {
+        path: "/search",
+        component: Search
+    },
     {
         path: "/artist/:id",
         component: Artist

server/js/db.js

@@ -2796,7 +2796,6 @@ async function _add_friend(req, res, next) {
             await t.none("UPDATE users SET friends = array_append(friends, $1) WHERE session = $2", [req.body.id, req.query.session]);
             res.status(200).json({ "success": "Friend added." });
         } catch (e) {
-            console.log(e);
             res.status(500).json({ "error": "Internal server error." });
             return;
         }