From 7f2102f931b54db0e8a3449e9bd3349385dc07a4 Mon Sep 17 00:00:00 2001 From: geoffrey45 Date: Sun, 6 Mar 2022 10:27:01 +0300 Subject: [PATCH] refactor UI layout --- package.json | 1 + server/app/api.py | 3 +- server/app/functions.py | 17 ++--- server/app/helpers.py | 19 +++++- server/app/models.py | 29 ++++++--- src/App.vue | 42 +++---------- src/assets/css/BottomBar/BottomBar.scss | 6 +- src/assets/css/_variables.scss | 2 +- src/assets/css/global.scss | 11 +++- src/components/AlbumView/Header.vue | 18 +++--- src/components/BottomBar/BottomBar.vue | 12 +--- src/components/LeftSidebar/AlbumArt.vue | 13 ++-- .../{BottomBar => LeftSidebar}/SongCard.vue | 0 src/components/RightSideBar/Main.vue | 51 ++++----------- src/components/RightSideBar/Tabs.vue | 62 +++++++++---------- src/components/nav/NavBar.vue | 34 +++++++++- src/components/shared/PlayBtn.vue | 23 +++++++ src/components/shared/SongItem.vue | 2 +- src/composables/state.js | 12 +++- src/main.js | 3 + yarn.lock | 18 ++++++ 21 files changed, 214 insertions(+), 164 deletions(-) rename src/components/{BottomBar => LeftSidebar}/SongCard.vue (100%) create mode 100644 src/components/shared/PlayBtn.vue diff --git a/package.json b/package.json index d6e85445..5f276402 100644 --- a/package.json +++ b/package.json @@ -11,6 +11,7 @@ "dependencies": { "axios": "^0.26.0", "mitt": "^3.0.0", + "pinia": "^2.0.11", "register-service-worker": "^1.7.1", "sass": "^1.49.0", "sass-loader": "^10", diff --git a/server/app/api.py b/server/app/api.py index d20458c8..1f72c315 100644 --- a/server/app/api.py +++ b/server/app/api.py @@ -11,7 +11,8 @@ bp = Blueprint("api", __name__, url_prefix="") home_dir = helpers.home_dir -all_the_f_music = helpers.get_all_songs() +all_the_f_albums = helpers.create_all_albums() +all_the_f_music = helpers.create_all_tracks() def initialize() -> None: diff --git a/server/app/functions.py b/server/app/functions.py index 0df31d97..00fdf044 100644 --- a/server/app/functions.py +++ b/server/app/functions.py @@ -20,6 +20,7 @@ from app import helpers from app import instances from app import api from app import models +import urllib def populate(): @@ -41,7 +42,7 @@ def populate(): if tags is not None: instances.songs_instance.insert_song(tags) - api.all_the_f_music = helpers.get_all_songs() + api.all_the_f_music = helpers.create_all_tracks() print("\n check done") end = time.time() @@ -165,7 +166,7 @@ def extract_thumb(audio_file_path: str) -> str: """ Extracts the thumbnail from an audio file. Returns the path to the thumbnail. """ - webp_path = audio_file_path.split("/")[-1] + ".webp" + webp_path = urllib.parse.quote_plus(audio_file_path.split("/")[-1] + ".webp") img_path = os.path.join(helpers.app_dir, "images", "thumbnails", webp_path) if os.path.exists(img_path): @@ -366,17 +367,11 @@ def get_all_albums(): album["count"] = len(album_tracks) album["duration"] = helpers.get_album_duration(album_tracks) album["date"] = album_tracks[0]["date"] - album["artistimage"] = ( - "http://127.0.0.1:8900/images/artists/" - + album_tracks[0]["albumartist"].replace("/", "::") - + ".webp" + album["artistimage"] = urllib.parse.quote_plus( + album_tracks[0]["albumartist"] + ".webp" ) - if len(album_tracks) == 1: - album["image"] = extract_thumb(album_tracks[0]["filepath"]) - - if len(album_tracks) > 1: - album["image"] = helpers.get_album_image(album_tracks) + album["image"] = helpers.get_album_image(album_tracks) instances.album_instance.insert_album(album) diff --git a/server/app/helpers.py b/server/app/helpers.py index 2df97a0a..7ea82e9b 100644 --- a/server/app/helpers.py +++ b/server/app/helpers.py @@ -146,7 +146,7 @@ def create_config_dir() -> None: os.chmod(path, 0o755) -def get_all_songs() -> List[models.Track]: +def create_all_tracks() -> List[models.Track]: """ Gets all songs under the ~/ directory. """ @@ -160,11 +160,26 @@ def get_all_songs() -> List[models.Track]: except FileNotFoundError: instances.songs_instance.remove_song_by_filepath(track["filepath"]) + album = instances.album_instance.get_album_by_name(track['album', track['albumartist']]) + + if album is None: + track['albumid'] = album['albumid'] + track['image'] = album['image'] tracks.append(models.Track(track)) return tracks +def create_all_albums() -> List[models.Album]: + """Creates album objects for all albums""" + albums: list[models.Album] = [] + + for album in instances.album_instance.get_all_albums(): + albums.append(models.Album(album)) + + return albums + + def extract_colors(image) -> list: """Extracts 2 of the most dominant colors from an image.""" try: @@ -208,4 +223,4 @@ def get_album_image(album: list) -> str: if img is not None: return img - return functions.use_defaults() \ No newline at end of file + return functions.use_defaults() diff --git a/server/app/models.py b/server/app/models.py index 5d8bb68d..e5f31ba7 100644 --- a/server/app/models.py +++ b/server/app/models.py @@ -237,6 +237,7 @@ class Track: """ trackid: str + albumid: str title: str artists: str albumartist: str @@ -244,7 +245,6 @@ class Track: folder: str filepath: str length: int - date: int genre: str bitrate: int image: str @@ -260,7 +260,6 @@ class Track: self.folder = tags["folder"] self.filepath = tags["filepath"] self.length = tags["length"] - self.date = tags["date"] self.genre = tags["genre"] self.bitrate = tags["bitrate"] self.image = "http://127.0.0.1:8900/images/thumbnails/" + tags["image"] @@ -287,6 +286,13 @@ class Albums(Mongo): upsert=True, ).upserted_id + def get_all_albums(self) -> list: + """ + Returns all the albums in the database. + """ + albums = self.collection.find() + return convert_many(albums) + def get_album_by_id(self, id: str) -> dict: """ Returns a single album matching the id in the query params. @@ -294,11 +300,11 @@ class Albums(Mongo): album = self.collection.find_one({"_id": ObjectId(id)}) return convert_one(album) - def get_album_by_name(self, name: str) -> dict: + def get_album_by_name(self, name: str, artist: str) -> dict: """ Returns a single album matching the name in the query params. """ - album = self.collection.find_one({"album": name}) + album = self.collection.find_one({"album": name, "artist": artist}) return convert_one(album) def get_album_by_artist(self, name: str) -> dict: @@ -318,15 +324,18 @@ class Album: albumid: str album: str artist: str - albumartist: str - year: int + count: int + duration: int + date: int + artistimage: str image: str - tracks: list def __init__(self, tags): self.albumid = tags["_id"]["$oid"] self.album = tags["album"] self.artist = tags["artist"] - self.albumartist = tags["albumartist"] - self.year = tags["year"] - self.image = "" \ No newline at end of file + self.count = tags["count"] + self.duration = tags["duration"] + self.date = tags["date"] + self.artistimage = tags["artistimage"] + self.image = tags["image"] diff --git a/src/App.vue b/src/App.vue index 6b4ee05a..a677adb1 100644 --- a/src/App.vue +++ b/src/App.vue @@ -3,7 +3,6 @@
- @@ -18,49 +17,28 @@
+
- +
- diff --git a/src/components/BottomBar/SongCard.vue b/src/components/LeftSidebar/SongCard.vue similarity index 100% rename from src/components/BottomBar/SongCard.vue rename to src/components/LeftSidebar/SongCard.vue diff --git a/src/components/RightSideBar/Main.vue b/src/components/RightSideBar/Main.vue index 0db9aaf1..eeff1b5b 100644 --- a/src/components/RightSideBar/Main.vue +++ b/src/components/RightSideBar/Main.vue @@ -2,70 +2,45 @@
-
+
-
+
-
+
-
- -
diff --git a/src/components/nav/NavBar.vue b/src/components/nav/NavBar.vue index eaf99fe5..e1977de5 100644 --- a/src/components/nav/NavBar.vue +++ b/src/components/nav/NavBar.vue @@ -1,14 +1,42 @@ diff --git a/src/components/shared/PlayBtn.vue b/src/components/shared/PlayBtn.vue new file mode 100644 index 00000000..d237d2b1 --- /dev/null +++ b/src/components/shared/PlayBtn.vue @@ -0,0 +1,23 @@ + + + diff --git a/src/components/shared/SongItem.vue b/src/components/shared/SongItem.vue index edf1cc1d..f7debd18 100644 --- a/src/components/shared/SongItem.vue +++ b/src/components/shared/SongItem.vue @@ -207,7 +207,7 @@ export default { .song-album { .album { cursor: pointer; - width: max-content; + max-width: max-content; } @include tablet-portrait { diff --git a/src/composables/state.js b/src/composables/state.js index 9393ab20..24ec2bd7 100644 --- a/src/composables/state.js +++ b/src/composables/state.js @@ -50,7 +50,15 @@ const is_playing = ref(false); const settings = reactive({ uri: "http://0.0.0.0:9876", -}) +}); + +const tablist = { + home: "home", + search: "search", + queue: "queue", +}; + +const current_tab = ref(tablist.home); export default { search_query, @@ -65,4 +73,6 @@ export default { is_playing, album, settings, + current_tab, + tablist }; diff --git a/src/main.js b/src/main.js index 6daa2e96..d8c6b0d5 100644 --- a/src/main.js +++ b/src/main.js @@ -2,9 +2,12 @@ import { createApp } from "vue"; import App from "./App.vue"; import "./registerServiceWorker"; import router from "./router"; +import { createPinia } from 'pinia' + import "../src/assets/css/global.scss"; const app = createApp(App); app.use(router); +app.use(createPinia()) app.mount('#app'); \ No newline at end of file diff --git a/yarn.lock b/yarn.lock index 4c13cc3e..0b79b4ec 100644 --- a/yarn.lock +++ b/yarn.lock @@ -119,6 +119,11 @@ resolved "https://registry.yarnpkg.com/@vue/devtools-api/-/devtools-api-6.0.0-beta.21.1.tgz#f1410f53c42aa67fa3b01ca7bdba891f69d7bc97" integrity sha512-FqC4s3pm35qGVeXRGOjTsRzlkJjrBLriDS9YXbflHLsfA9FrcKzIyWnLXoNm+/7930E8rRakXuAc2QkC50swAw== +"@vue/devtools-api@^6.0.0-beta.21": + version "6.0.12" + resolved "https://registry.yarnpkg.com/@vue/devtools-api/-/devtools-api-6.0.12.tgz#7b57cce215ae9f37a86984633b3aa3d595aa5b46" + integrity sha512-iO/4FIezHKXhiDBdKySCvJVh8/mZPxHpiQrTy+PXVqJZgpTPTdHy4q8GXulaY+UKEagdkBb0onxNQZ0LNiqVhw== + "@vue/reactivity-transform@3.2.29": version "3.2.29" resolved "https://registry.yarnpkg.com/@vue/reactivity-transform/-/reactivity-transform-3.2.29.tgz#a08d606e10016b7cf588d1a43dae4db2953f9354" @@ -1175,6 +1180,14 @@ picomatch@^2.0.4, picomatch@^2.2.1: resolved "https://registry.yarnpkg.com/picomatch/-/picomatch-2.3.1.tgz#3ba3833733646d9d3e4995946c1365a67fb07a42" integrity sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA== +pinia@^2.0.11: + version "2.0.11" + resolved "https://registry.yarnpkg.com/pinia/-/pinia-2.0.11.tgz#ff03c714f5e5f16207280a4fc2eab01f3701ee2b" + integrity sha512-JzcmnMqu28PNWOjDgEDK6fTrIzX8eQZKPPKvu/fpHdpXARUj1xeVdFi3YFIMOWswqaBd589cpmAMdSSTryI9iw== + dependencies: + "@vue/devtools-api" "^6.0.0-beta.21" + vue-demi "*" + postcss@^8.1.10, postcss@^8.4.5: version "8.4.6" resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.6.tgz#c5ff3c3c457a23864f32cb45ac9b741498a09ae1" @@ -1443,6 +1456,11 @@ vue-debounce@^3.0.2: resolved "https://registry.yarnpkg.com/vue-debounce/-/vue-debounce-3.0.2.tgz#3b29c33db7cd2a8c20f77e0be66beda1b85f7e8d" integrity sha512-+shuc9Ry+AFqJbN7BMfagazB81/bTiPWvUZ4KBjambgrd3B5EQBojxeGzeNZ21xRflnwB098BG1d0HtWv8WyzA== +vue-demi@*: + version "0.12.1" + resolved "https://registry.yarnpkg.com/vue-demi/-/vue-demi-0.12.1.tgz#f7e18efbecffd11ab069d1472d7a06e319b4174c" + integrity sha512-QL3ny+wX8c6Xm1/EZylbgzdoDolye+VpCXRhI2hug9dJTP3OUJ3lmiKN3CsVV3mOJKwFi0nsstbgob0vG7aoIw== + vue-eslint-parser@^8.0.1: version "8.2.0" resolved "https://registry.yarnpkg.com/vue-eslint-parser/-/vue-eslint-parser-8.2.0.tgz#8c3990deb901b0d528d99f4d052a831cd1d0284c"