add media queries

server/app/api.py

@@ -98,7 +98,7 @@ def get_album_artists(album, artist):
     for artist in artists:
         artist_obj = {
             "name": artist,
-            "image": "http://127.0.0.1:8900/images/artists/webp/" + artist.replace('/', '::') + ".webp"
+            "image": "http://0.0.0.0:8900/images/artists/webp/" + artist.replace('/', '::') + ".webp"
         }
         final_artists.append(artist_obj)
 
@@ -190,6 +190,9 @@ def getFolderTree(folder: str):
         if x['folder'] == req_dir:
             songs.append(x)
 
+    for song in songs:
+        song['image'] = song['image'].replace('127.0.0.1', '0.0.0.0')
+
     return {"files": helpers.remove_duplicates(songs), "folders": sorted(folders, key=lambda i: i['name'])}
 
 
@@ -261,7 +264,7 @@ def getAlbumSongs(query: str):
 @cache.cached()
 def drop_db(title, artist):
     bio = functions.getAlbumBio(title, artist)
-    return {'bio': bio}
+    return {'bio': bio}, 200
 
 
 @bp.route('/convert')
@@ -278,3 +281,7 @@ def convert_images_to_webp():
             img.save(os.path.join(final_path, file.name.replace('.jpg', '.webp')), format='webp')
 
     return "Done"
+
+@bp.route('/test')
+def test_http_status_response():
+    return "OK", 200

server/app/functions.py

@@ -128,11 +128,10 @@ def extract_thumb(path: str) -> str:
             except:
                 return use_defaults()
 
-        final_path = "http://127.0.0.1:8900/images/thumbnails/" + webp_path
+        final_path = "http://0.0.0.0:8900/images/thumbnails/" + webp_path
 
         return final_path
 
-
 def getTags(full_path: str) -> dict:
     """
     Returns a dictionary of tags for a given file.

server/manage.py

@@ -3,4 +3,4 @@ from app import create_app
 
 if __name__ == '__main__':
     app = create_app()
-    app.run(debug=True, threaded=True, host="127.0.0.1", port=9876)
+    app.run(debug=True, threaded=True, host="0.0.0.0", port=9876)

src/assets/css/_variables.scss

@@ -1,11 +1,39 @@
 // colors
 
-$card-dark: #08090C;
+$card-dark: #08090c;
 $red: #df4646;
 $blue: rgb(5, 80, 150);
 $green: rgb(67, 148, 67);
 $separator: #ffffff46;
 $pink: rgb(196, 58, 58);
 // sizes
-$small: .5em;
+$small: 0.5em;
-$smaller: .25em;
+$smaller: 0.25em;
+
+// media query mixins
+
+@mixin phone-only {
+  @media (max-width: 599px) {
+    @content;
+  }
+}
+@mixin tablet-portrait {
+  @media (max-width: 900px) {
+    @content;
+  }
+}
+@mixin tablet-landscape {
+  @media (max-width: 1200px) {
+    @content;
+  }
+}
+@mixin for-desktop-up {
+  @media (min-width: 1200px) {
+    @content;
+  }
+}
+@mixin for-big-desktop-up {
+  @media (min-width: 1800px) {
+    @content;
+  }
+}

src/assets/css/global.scss

@@ -136,14 +136,13 @@ button {
   width: 30em;
   position: relative;
   margin-bottom: 0.5em;
-}
 
-@media (max-width: 70em) {
+  @include tablet-landscape {
-  .r-sidebar {
     display: none;
   }
 }
 
+
 .image {
   background-position: center;
   background-repeat: no-repeat;
@@ -248,3 +247,5 @@ button {
   background-image: url(../../assets/icons/playing.webp);
   transition: all 0.3s ease-in-out;
 }
+
+

src/components/FolderView/Header.vue

@@ -112,6 +112,10 @@ export default {
       background-image: url(../../assets/icons/folder.svg);
       margin-right: $small;
     }
+    
+    @include phone-only {
+      display: none;
+    }
   }
 }
 </style>

src/components/FolderView/SongList.vue

@@ -4,10 +4,10 @@
       <table>
         <thead>
           <tr>
-            <th>Track</th>
+            <th class="track-header">Track</th>
-            <th>Artist</th>
+            <th class="artists-header">Artist</th>
-            <th>Album</th>
+            <th class="album-header">Album</th>
-            <th>Duration</th>
+            <th class="duration-header">Duration</th>
           </tr>
         </thead>
         <tbody>
@@ -121,56 +121,33 @@ export default {
   width: 100%;
   table-layout: fixed;
 
+  @include phone-only {
+    border-collapse: separate;
+    border-spacing: 0 $small;
+  }
+
   thead {
     height: 2rem;
     text-transform: uppercase;
 
+    @include phone-only {
+      display: none;
+    }
+
     th {
       text-align: left;
       padding-left: $small;
     }
-  }
 
-
+    th.duration-header {
-  tbody tr {
+      @include tablet-landscape {
-    cursor: pointer;
+        display: none;
-
-    .flex {
-      position: relative;
-      padding-left: 4rem;
-      align-items: center;
-
-      .album-art {
-        position: absolute;
-        left: $small;
-        width: 3rem;
-        height: 3rem;
-        margin-right: 1rem;
-        background-image: url(../../assets/images/null.webp);
-        display: grid;
-        place-items: center;
       }
     }
 
-    td {
+    th.album-header {
-      height: 4rem;
+      @include tablet-portrait {
-      padding: $small;
+        display: none;
-
-    }
-
-    &:hover {
-      & {
-        & > td {
-          background-color: rgb(5, 80, 150);
-        }
-
-        & td:first-child {
-          border-radius: $small 0 0 $small;
-        }
-
-        & td:last-child {
-          border-radius: 0 $small $small 0;
-        }
       }
     }
   }

src/components/PlaylistView/Header.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="p-header rounded border">
+  <div class="p-header rounded">
     <div class="info rounded card-dark">
       <div>
         <div class="name">Makaveli Radio</div>
@@ -16,7 +16,7 @@
       </div>
     </div>
     <div class="last-updated">
-      Last updated yesterday |
+      <span class="status">Last updated yesterday |&#160;</span>
       <span class="edit">Edit</span>
     </div>
   </div>
@@ -39,6 +39,18 @@
     color: rgb(255, 255, 255);
     font-size: 0.9rem;
     border-radius: $smaller;
+    box-shadow: 0px 0px 1rem rgba(0, 0, 0, 0.479);
+
+    @include phone-only {
+      // border: solid;
+      bottom: 1rem;
+      right: 1rem;
+      font-size: small;
+
+      .status {
+        display: none;
+      }
+    }
 
     .edit {
       cursor: pointer;
@@ -54,8 +66,13 @@
     padding: $small;
     display: flex;
     flex-direction: row;
-    align-items: end;
+    align-items: flex-end;
     padding-bottom: 3.5rem;
+    box-shadow: 0px 0px 1.5rem rgba(0, 0, 0, 0.658);
+
+    @include phone-only {
+      width: calc(100% - 1rem);
+    }
 
     .name {
       font-size: 1.5rem;

src/components/SongItem.vue

@@ -1,9 +1,9 @@
 <template>
-  <tr :class="{ current: current._id.$oid == song._id.$oid }">
+  <tr
-    <td
+    class="songlist-item"
-      class="flex"
+    :class="{ current: current._id.$oid == song._id.$oid }"
-      @click="emitUpdate(song)"
   >
+    <td class="flex" @click="emitUpdate(song)">
       <div
         class="album-art rounded image"
         :style="{
@@ -18,9 +18,15 @@
       </div>
       <div>
         <span class="ellip">{{ song.title }}</span>
+        <div class="separator no-border"></div>
+        <div class="artist ellip">
+          <span v-for="artist in putCommas(song.artists)" :key="artist">{{
+            artist
+          }}</span>
+        </div>
       </div>
     </td>
-    <td>
+    <td class="song-artists">
       <div class="ellip" v-if="song.artists[0] != ''">
         <span
           class="artist"
@@ -33,15 +39,12 @@
         <span class="artist">{{ song.album_artist }}</span>
       </div>
     </td>
-    <td>
+    <td class="song-album">
-      <div
+      <div class="ellip" @click="emitLoadAlbum(song.album, song.album_artist)">
-        class="ellip"
+        {{ song.album }}
-       @click="emitLoadAlbum(song.album, song.album_artist)"
+      </div>
-        >{{ song.album }}</div
-      >
     </td>
-    <td
+    <td class="song-duration">
-    >
       {{ `${Math.trunc(song.length / 60)} min` }}
     </td>
   </tr>
@@ -59,7 +62,7 @@ export default {
     }
 
     function emitLoadAlbum(title, artist) {
-      emit("loadAlbum", title, artist)
+      emit("loadAlbum", title, artist);
     }
 
     return {
@@ -67,11 +70,109 @@ export default {
       emitUpdate,
       emitLoadAlbum,
       is_playing: state.is_playing,
-      current: state.current
+      current: state.current,
     };
   },
 };
 </script>
 
-<style>
+<style lang="scss">
+.songlist-item {
+  @include phone-only {
+    border: solid;
+
+    td {
+      background-color: $card-dark;
+      border: 1px solid rgba(255, 255, 255, 0.096);
+      border-radius: $small;
+    }
+  }
+
+  cursor: pointer;
+
+  .flex {
+    position: relative;
+    padding-left: 4rem;
+    align-items: center;
+
+    .album-art {
+      position: absolute;
+      left: $small;
+      width: 3rem;
+      height: 3rem;
+      margin-right: 1rem;
+      display: grid;
+      place-items: center;
+    }
+
+    .artist {
+      display: none;
+      font-size: 0.8rem;
+      color: rgba(255, 255, 255, 0.719);
+
+      @include phone-only {
+        display: unset;
+      }
+    }
+  }
+
+  td {
+    height: 4rem;
+    padding: $small;
+  }
+
+  &:hover {
+    & {
+      & td {
+        background-color: rgb(5, 80, 150);
+      }
+
+      & td:first-child {
+        border-radius: $small 0 0 $small;
+
+        @include phone-only {
+          border-radius: $small;
+        }
+      }
+
+      td:nth-child(2) {
+        @include tablet-portrait {
+          border-radius: 0 $small $small 0 !important;
+        }
+
+        @include tablet-landscape {
+          border-radius: 0;
+        }
+      }
+
+      & > td:nth-child(3) {
+        @include tablet-landscape {
+          border-radius: 0 $small $small 0 !important;
+        }
+      }
+
+      & td:last-child {
+        border-radius: 0 $small $small 0;
+      }
+    }
+  }
+
+  .song-duration {
+    @include tablet-landscape {
+      display: none;
+    }
+  }
+
+  .song-album {
+    @include tablet-portrait {
+      display: none;
+    }
+  }
+
+  .song-artists {
+    @include phone-only {
+      display: none;
+    }
+  }
+}
 </style>

src/composables/album.js

@@ -1,4 +1,4 @@
-let base_uri = "http://127.0.0.1:9876";
+let base_uri = "http://0.0.0.0:9876";
 
 const getAlbumTracks = async (name, artist) => {
   const res = await fetch(

src/composables/getFiles.js

@@ -1,4 +1,4 @@
-let base_uri = "http://127.0.0.1:9876";
+let base_uri = "http://0.0.0.0:9876";
 
 const getData = async (path) => {
   let url;

src/composables/perks.js

@@ -10,7 +10,7 @@ const current = ref(state.current);
 const next = ref({
   title: "The next song",
   artists: ["... blah blah blah"],
-  image: "http://127.0.0.1:8900/images/defaults/4.webp",
+  image: "http://0.0.0.0:8900/images/defaults/4.webp",
   _id: {
     $oid: "",
   },

src/composables/playAudio.js

@@ -8,7 +8,7 @@ const audio = ref(new Audio()).value;
 const pos = ref(0);
 const playing = ref(state.is_playing);
 
-const url = "http://127.0.0.1:8901/";
+const url = "http://0.0.0.0:8901/";
 
 const playAudio = (path) => {
   const full_path = url + encodeURIComponent(path);

src/composables/searchMusic.js

@@ -1,6 +1,6 @@
 import state from "./state.js";
 
-const base_url = "http://127.0.0.1:9876/search?q=";
+const base_url = "http://0.0.0.0:9876/search?q=";
 
 async function search(query) {
   const url = base_url + encodeURIComponent(query);

src/composables/state.js

@@ -6,7 +6,7 @@ const queue = ref([
   {
     title: "Nothing played yet",
     artists: ["... blah blah blah"],
-    image: "http://127.0.0.1:8900/images/defaults/5.webp",
+    image: "http://0.0.0.0:8900/images/defaults/5.webp",
     _id: {
       $oid: "",
     },
@@ -19,7 +19,7 @@ const folder_list = ref([]);
 const current = ref({
   title: "Nothing played yet",
   artists: ["... blah blah blah"],
-  image: "http://127.0.0.1:8900/images/defaults/1.webp",
+  image: "http://0.0.0.0:8900/images/defaults/1.webp",
   _id: {
     $oid: "",
   },

src/views/FolderView.vue

@@ -130,5 +130,13 @@ export default {
   overflow-y: auto;
   height: calc(100% - $small);
   padding-right: $small;
+
+  @include phone-only {
+    padding-right: 0;
+
+    &::-webkit-scrollbar {
+      display: none;
+    }
+  }
 }
 </style>