major redesign and refactor

+ centralized urls
+ reduce max app width
+ bump up header height to 23rem

src/App.vue

@@ -3,7 +3,7 @@
   <Modal />
   <Notification />
   <div id="tooltip"></div>
-  <div
+  <section
     id="app-grid"
     :class="{
       showAltNP: settings.use_sidebar && settings.use_alt_np,
@@ -19,7 +19,7 @@
     <NowPlayingRight />
     <SearchInput v-if="settings.use_sidebar && xl" />
     <RightSideBar v-if="settings.use_sidebar && xl" />
-  </div>
+  </section>
 </template>
 
 <script setup lang="ts">

src/assets/scss/Global/app-grid.scss

@@ -7,11 +7,14 @@
     "l-sidebar content r-sidebar"
     "l-sidebar content r-sidebar"
     "l-sidebar content bottombar";
-  max-width: 2720px;
+  max-width: 1720px;
-  height: calc(100vh - 1rem);
+  height: calc(100vh);
   margin: 0 auto;
   gap: 1rem;
-  margin: $small auto;
+  padding: $small;
+  padding-right: $medium;
+  border-right: solid 1px $gray4;
+  margin-top: -$small;
 }
 
 #app-grid.isSmall {
@@ -89,7 +92,7 @@
   grid-area: l-sidebar;
   display: grid;
   grid-template-rows: 1fr max-content;
-  background-color: $gray;
+  background-color: rgb(22, 22, 22);
   height: 100vh;
   margin-top: -$small;
   margin-left: -$small;

src/components/AlbumView/Header.vue

@@ -10,23 +10,14 @@
         : '',
     }"
   >
+    <div class="big-img noscroll" :class="{ imgSmall: widthIsSmall }">
+      <img :src="imguri.thumb + album.image" class="rounded" />
+    </div>
     <div
       class="info"
       :class="{ nocontrast: album.colors ? isLight(album.colors[0]) : false }"
     >
-      <div class="art">
+      <div class="album-info">
-        <img
-          :src="
-            widthIsSmall
-              ? imguri.thumb + album.image
-              : imguri.artist + album.artistimg
-          "
-          class="shadow-lg"
-          loading="lazy"
-          :class="`${widthIsSmall ? 'rounded' : 'circular'}`"
-        />
-      </div>
-      <div>
         <div class="top">
           <div class="h">
             <span v-if="album.is_soundtrack">Soundtrack</span>
@@ -53,9 +44,13 @@
           />
         </div>
       </div>
+      <div class="art" v-if="!widthIsSmall">
+        <img
+          :src="imguri.artist + album.artistimg"
+          class="shadow-lg circular"
+          loading="lazy"
+        />
       </div>
-    <div class="big-img noscroll" v-if="!widthIsSmall">
-      <img :src="imguri.thumb + album.image" class="rounded" />
     </div>
   </div>
 </template>
@@ -106,7 +101,7 @@ useVisibility(albumheaderthing, handleVisibilityState);
 <style lang="scss">
 .a-header {
   display: grid;
-  grid-template-columns: 1fr max-content;
+  grid-template-columns: max-content 1fr;
   gap: 1rem;
   padding: 1rem;
   height: 100% !important;
@@ -116,23 +111,38 @@ useVisibility(albumheaderthing, handleVisibilityState);
   .big-img {
     height: calc(100%);
     width: 16rem;
-    margin: auto 0;
+    display: flex;
+    align-items: flex-end;
 
     img {
-      height: 100%;
+      height: 16rem;
       aspect-ratio: 1;
     }
   }
 
+  .big-img.imgSmall {
+    width: 12rem;
+
+    img {
+      height: 12rem;
+    }
+  }
+
   .nocontrast {
     color: $black;
   }
 
   .info {
     width: 100%;
+    display: grid;
+    grid-template-columns: 1fr max-content;
+    height: 100%;
+    align-items: flex-end;
+
+    .art {
       display: flex;
-    flex-direction: column;
+      align-items: flex-end;
-    justify-content: space-between;
+    }
 
     img {
       height: 6rem;
@@ -146,6 +156,7 @@ useVisibility(albumheaderthing, handleVisibilityState);
         font-size: 14px;
         opacity: 0.5;
       }
+
       .title {
         font-size: 2.5rem;
         font-weight: 600;
@@ -158,10 +169,6 @@ useVisibility(albumheaderthing, handleVisibilityState);
       }
     }
 
-    .separator {
-      width: 20rem;
-    }
-
     .bottom {
       margin-top: $smaller;
 

src/components/FolderView/SongList.vue

@@ -1,6 +1,6 @@
 <template>
   <div
-    class="table border rounded"
+    class="table"
     v-if="tracks.length"
     ref="tracklistElem"
     :class="{
@@ -181,7 +181,7 @@ function getTrackList() {
 
 .table.isSmall {
   .songlist-item {
-    grid-template-columns: 1.5rem 1.5fr 2rem 2.5rem;
+    grid-template-columns: 1.5rem 2fr 2rem 2.5rem;
   }
 
   .song-artists,
@@ -199,7 +199,7 @@ function getTrackList() {
 
 .table.isMedium {
   .songlist-item {
-    grid-template-columns: 1.5rem 1.5fr 1fr 2rem 2.5rem;
+    grid-template-columns: 1.5rem 2fr 1fr 2rem 2.5rem;
   }
 
   .song-album {

src/components/shared/Input.vue

@@ -2,7 +2,7 @@
   <input
     type="search"
     class="header-input rounded-sm pad-sm"
-    placeholder="search here"
+    placeholder="Search here"
     v-model.trim="source"
     id="page-search"
   />

src/components/shared/SongItem.vue

@@ -103,7 +103,7 @@ function showMenu(e: Event) {
 <style lang="scss">
 .songlist-item {
   display: grid;
-  grid-template-columns: 1.5rem 1.5fr 1fr 1.5fr 2rem 2.5rem;
+  grid-template-columns: 1.5rem 2fr 1fr 1.5fr 2rem 2.5rem;
   align-items: center;
   justify-content: flex-start;
   height: 3.75rem;

src/composables/fetch/album.ts

@@ -1,18 +1,23 @@
+import { paths } from "@/config";
 import state from "../state";
 import { AlbumInfo, Track } from "../../interfaces";
 import useAxios from "./useAxios";
 import { NotifType, useNotifStore } from "@/stores/notification";
 
-const getAlbumData = async (hash: string, ToastStore: typeof useNotifStore) => {
+const {
-  const url = state.settings.uri + "/album";
+  album: albumUrl,
+  albumartists: albumArtistsUrl,
+  albumbio: albumBioUrl
+} = paths.api
 
+const getAlbumData = async (hash: string, ToastStore: typeof useNotifStore) => {
   interface AlbumData {
     info: AlbumInfo;
     tracks: Track[];
   }
 
   const { data, status } = await useAxios({
-    url,
+    url: albumUrl,
     props: {
       hash: hash,
     },
@@ -31,7 +36,7 @@ const getAlbumData = async (hash: string, ToastStore: typeof useNotifStore) => {
 
 const getAlbumArtists = async (hash: string) => {
   const { data, error } = await useAxios({
-    url: state.settings.uri + "/album/artists",
+    url: albumArtistsUrl,
     props: {
       hash: hash,
     },
@@ -46,7 +51,7 @@ const getAlbumArtists = async (hash: string) => {
 
 const getAlbumBio = async (hash: string) => {
   const { data, status } = await useAxios({
-    url: state.settings.uri + "/album/bio",
+    url: albumBioUrl,
     props: {
       hash: hash,
     },

src/composables/fetch/folders.ts

@@ -1,5 +1,5 @@
+import { paths } from "@/config";
 import { Folder, Track } from "@/interfaces";
-import state from "../state";
 import useAxios from "./useAxios";
 
 export default async function (path: string) {
@@ -9,7 +9,7 @@ export default async function (path: string) {
   }
 
   const { data, error } = await useAxios({
-    url: `${state.settings.uri}/folder`,
+    url: paths.api.folder,
     props: {
       folder: path,
     },

src/composables/fetch/playlists.ts

@@ -1,15 +1,24 @@
+import { paths } from "@/config";
 import { Artist } from "../../interfaces";
 import { Playlist, Track } from "../../interfaces";
 import { Notification, NotifType } from "../../stores/notification";
 import state from "../state";
 import useAxios from "./useAxios";
+
+const {
+  new: newPlaylistUrl,
+  all: allPlaylistsUrl,
+  base: basePlaylistUrl,
+  artists: playlistArtistsUrl
+} = paths.api.playlist;
+
 /**
  * Creates a new playlist on the server.
  * @param playlist_name The name of the playlist to create.
  */
 async function createNewPlaylist(playlist_name: string, track?: Track) {
   const { data, status } = await useAxios({
-    url: state.settings.uri + "/playlist/new",
+    url: newPlaylistUrl,
     props: {
       name: playlist_name,
     },
@@ -44,7 +53,7 @@ async function createNewPlaylist(playlist_name: string, track?: Track) {
  */
 async function getAllPlaylists(): Promise<Playlist[]> {
   const { data, error } = await useAxios({
-    url: state.settings.uri + "/playlists",
+    url: allPlaylistsUrl,
     get: true,
   });
 
@@ -58,7 +67,7 @@ async function getAllPlaylists(): Promise<Playlist[]> {
 }
 
 async function addTrackToPlaylist(playlist: Playlist, track: Track) {
-  const uri = `${state.settings.uri}/playlist/${playlist.playlistid}/add`;
+  const uri = `${basePlaylistUrl}/${playlist.playlistid}/add`;
 
   const { status } = await useAxios({
     url: uri,
@@ -76,7 +85,7 @@ async function addTrackToPlaylist(playlist: Playlist, track: Track) {
 }
 
 async function getPlaylist(pid: string) {
-  const uri = state.settings.uri + "/playlist/" + pid;
+  const uri = `${basePlaylistUrl}/${pid}`;
 
   interface PlaylistData {
     info: Playlist;
@@ -100,7 +109,7 @@ async function getPlaylist(pid: string) {
 }
 
 async function updatePlaylist(pid: string, playlist: FormData, pStore: any) {
-  const uri = state.settings.uri + "/playlist/" + pid + "/update";
+  const uri = `${basePlaylistUrl}/${pid}/update`;
 
   const { data, error } = await useAxios({
     url: uri,
@@ -127,10 +136,8 @@ async function updatePlaylist(pid: string, playlist: FormData, pStore: any) {
  * @returns {Promise<Artist[]>} A promise that resolves to an array of artists.
  */
 export async function getPlaylistArtists(pid: string): Promise<Artist[]> {
-  const uri = state.settings.uri + "/playlist/artists";
-
   const { data, error } = await useAxios({
-    url: uri,
+    url: playlistArtistsUrl,
     props: {
       pid: pid,
     },

src/composables/fetch/searchMusic.ts

@@ -1,14 +1,14 @@
+import { paths } from "@/config";
 import state from "../state";
 import axios from "axios";
 import useAxios from "./useAxios";
 
-const base_url = `${state.settings.uri}/search`;
+const {
-
+  tracks: searchTracksUrl,
-const uris = {
+  albums: searchAlbumsUrl,
-  tracks: `${base_url}/tracks?q=`,
+  artists: searchArtistsUrl,
-  albums: `${base_url}/albums?q=`,
+  load: loadMoreUrl,
-  artists: `${base_url}/artists?q=`,
+} = paths.api.search;
-};
 
 /**
  * Fetch data from url
@@ -25,24 +25,22 @@ async function fetchData(url: string) {
 }
 
 async function searchTracks(query: string) {
-  const url = uris.tracks + encodeURIComponent(query.trim());
+  const url = searchTracksUrl + encodeURIComponent(query.trim());
   return await fetchData(url);
 }
 
 async function searchAlbums(query: string) {
-  const url = uris.albums + encodeURIComponent(query.trim());
+  const url = searchAlbumsUrl + encodeURIComponent(query.trim());
   return await fetchData(url);
 }
 
 async function searchArtists(query: string) {
-  const url = uris.artists + encodeURIComponent(query.trim());
+  const url = searchArtistsUrl + encodeURIComponent(query.trim());
   return await fetchData(url);
 }
 
-const loadmore_url = state.settings.uri + "/search/loadmore";
-
 async function loadMoreTracks(index: number) {
-  const response = await axios.get(loadmore_url, {
+  const response = await axios.get(loadMoreUrl, {
     params: {
       type: "tracks",
       index: index,
@@ -53,7 +51,7 @@ async function loadMoreTracks(index: number) {
 }
 
 async function loadMoreAlbums(index: number) {
-  const response = await axios.get(loadmore_url, {
+  const response = await axios.get(loadMoreUrl, {
     params: {
       type: "albums",
       index: index,
@@ -64,7 +62,7 @@ async function loadMoreAlbums(index: number) {
 }
 
 async function loadMoreArtists(index: number) {
-  const response = await axios.get(loadmore_url, {
+  const response = await axios.get(loadMoreUrl, {
     params: {
       type: "artists",
       index: index,

src/composables/fetch/useAxios.ts

@@ -1,6 +1,10 @@
 import { FetchProps } from "../../interfaces";
 import axios, { AxiosError, AxiosResponse } from "axios";
+
 import useLoaderStore from "@/stores/loader";
+import { paths } from "@/config";
+
+const url = paths.api
 
 export default async (args: FetchProps) => {
   let data: any = null;

src/composables/state.ts

@@ -1,10 +1,9 @@
 import { ref } from "@vue/reactivity";
-import { reactive } from "vue";
 
 const loading = ref(false);
-const settings = reactive({
+const settings = {
-  uri: "http://127.0.0.1:1970",
+  uri: "http://10.5.8.81:1970",
-});
+};
 
 export default {
   loading,

src/config.ts

@@ -1,13 +1,85 @@
-const baseImgUrl = "http://0.0.0.0:1971"
+export interface D<T = string> {
+  [key: string]: T;
+}
+
+const domains: D = {
+  local: "http://localhost:",
+  remote: "http://10.5.86.154:",
+};
+
+const ports = {
+  api: 1970,
+  images: 1971,
+};
+
+const imageRoutes = {
+  thumb: "/t/",
+  artist: "/a/",
+  playlist: "/p/",
+  raw: "/raw/",
+};
+
+let mode: string = "remote";
+
+function toggleMode() {
+  mode = mode === "local" ? "remote" : "local";
+}
+
+function getDomain() {
+  return domains[mode];
+}
+
+const baseImgUrl = getDomain() + ports.images;
+
+const baseApiUrl = getDomain() + ports.api;
 
 const paths = {
-  api: "",
+  api: {
+    album: baseApiUrl + "/album",
+    get albumartists() {
+      return this.album + "/artists";
+    },
+    get albumbio() {
+      return this.album + "/bio";
+    },
+    folder: baseApiUrl + "/folder",
+    playlist: {
+      base: baseApiUrl + "/playlist",
+      get new() {
+        return this.base + "/new";
+      },
+      get all() {
+        return this.base + "s";
+      },
+      get artists() {
+        return this.base + "/artists";
+      },
+    },
+    search: {
+      base: baseApiUrl + "/search",
+      get tracks() {
+        return this.base + "/tracks?q=";
+      },
+      get albums() {
+        return this.base + "/albums?q=";
+      },
+      get artists() {
+        return this.base + "/artists?q=";
+      },
+      get load() {
+        return this.base + "/loadmore";
+      },
+    },
+    files: baseApiUrl + "/file",
+  },
   images: {
-    thumb: `${baseImgUrl}/t/`,
+    thumb: baseImgUrl + imageRoutes.thumb,
-    artist: `${baseImgUrl}/a/`,
+    artist: baseImgUrl + imageRoutes.artist,
-    playlist: `${baseImgUrl}/p/`,
+    playlist: baseImgUrl + imageRoutes.playlist,
-    raw: `${baseImgUrl}/raw/`
+    raw: baseImgUrl + imageRoutes.raw,
   },
 };
 
-export { paths };
+export { paths, toggleMode };
+
+// TODO: Add setting to toggle between extending to edges or not

src/layouts/HeaderContentBottom.vue

@@ -27,7 +27,7 @@ useVisibility(apheader, handleVisibilityState);
 <style lang="scss">
 #ap-page {
   display: grid;
-  grid-template-rows: 18rem 1fr;
+  grid-template-rows: 23rem 1fr;
   gap: 1rem;
 }
 </style>

src/stores/queue.ts

@@ -1,3 +1,4 @@
+import { paths } from "@/config";
 import { defineStore } from "pinia";
 import state from "../composables/state";
 import { NotifType, useNotifStore } from "./notification";
@@ -44,7 +45,7 @@ export default defineStore("Queue", {
       this.currentindex = index;
       const track = this.tracklist[index];
       this.currentid = track.trackid;
-      const uri = state.settings.uri + "/file/" + track.hash;
+      const uri = `${paths.api.files}/${track.hash}`;
 
       new Promise((resolve, reject) => {
         audio.autoplay = true;

src/utils/useCreateSubPaths.ts

@@ -49,5 +49,4 @@ export default function createSubPaths(
   }
 }
 
-// function that takes 2 strings as parameters and returns a string
+// TODO: Fix the includes issue.
-// that is the concatenation of the two strings

src/views/PlaylistList.vue

@@ -15,6 +15,8 @@ import PlaylistCard from "@/components/PlaylistsList/PlaylistCard.vue";
 
 import usePStore from "@/stores/pages/playlists";
 const pStore = usePStore();
+
+// TODO: When you add a song to playlist when you are in this page, increase the count on the card.
 </script>
 
 <style lang="scss">