tcsenpai/swingmusic
1
0
Fork 0
mirror of https://github.com/tcsenpai/swingmusic.git synced 2025-07-28 13:41:42 +00:00
Code Issues Packages Projects Releases Wiki Activity

move nav folder-paths into a new component (#66)

Browse Source 
* move folder-paths into a new component

* move nav playlist title into new components
This commit is contained in:
Mungai Geoffrey 2022-06-07 12:51:47 +03:00 committed by GitHub
parent f7218875a6
commit 4e1e1b8979
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 155 additions and 139 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
server/app/functions.py
View File

@ -6,18 +6,14 @@ import time
from io import BytesIO
import requests
from tqdm import tqdm
from app import api
from app import helpers
from app import settings
from app.lib import watchdoge
from app.lib.populate import Populate
from PIL import Image
from progress.bar import Bar
from concurrent.futures import ThreadPoolExecutor
from app.lib.trackslib import create_all_tracks
@helpers.background
def reindex_tracks():
@ -44,9 +40,9 @@ def populate():
pop = Populate()
pop.run()
tracks = create_all_tracks()
api.TRACKS.clear()
api.TRACKS.extend(tracks)
# tracks = create_all_tracks()
# api.TRACKS.clear()
# api.TRACKS.extend(tracks)
class getArtistImage:

2
server/app/lib/folderslib.py
View File

@ -123,9 +123,7 @@ class getFnF:
dirs.append(Dir(**dir))
elif entry.is_file() and entry.name.endswith((".mp3", ".flac")):
files.append(entry.path)
s = time()
tracks = self.get_tracks(files)
print(f"{time() - s} seconds to get tracks")
folders = [create_folder(dir) for dir in dirs]
folders = filter(lambda f: f.trackcount > 0, folders)

135
src/components/nav/NavBar.vue
View File

@ -6,51 +6,8 @@
</div>
<div class="info">
<div
class="title"
v-show="$route.name == 'Playlists'"
v-motion
:initial="{
opacity: 0,
x: -20,
}"
:visible="{
opacity: 1,
x: 0,
transition: {
delay: 100,
},
}"
>
Playlists
</div>
<div
class="folder"
v-show="$route.name == 'FolderView'"
v-motion
:initial="{
opacity: 0,
x: -20,
}"
:visible="{
opacity: 1,
x: 0,
transition: {
delay: 100,
},
}"
>
<div class="fname">
<div class="icon image"></div>
<div class="paths">
<!-- {{ $route.params.path.split("/").splice(-1)[0] }} -->
<!-- {{ $route.params.path }} -->
<div class="path" v-for="path in subPaths" :key="path.path">
<span class="text">{{ path.name }}</span>
</div>
</div>
</div>
</div>
<Playlists v-show="$route.name == Routes.playlists" />
<Folder v-show="$route.name == Routes.folder" :subPaths="subPaths" />
</div>
</div>
@ -73,10 +30,12 @@ import { onMounted, ref, watch } from "vue";
import { Routes } from "@/composables/enums";
import createSubPaths from "@/composables/createSubPaths";
import { subPath } from "@/interfaces";
import Folder from "./Titles/Folder.vue";
import Playlists from "./Titles/Playlists.vue";
const route = useRoute();
const subPaths = ref<subPath[]>();
const subPaths = ref<subPath[]>([]);
function useSubRoutes() {
watch(
@ -129,90 +88,6 @@ onMounted(() => {
font-size: 1.5rem;
font-weight: bold;
}
.folder {
display: flex;
gap: $small;
.playbtnrect {
height: 2.25rem;
}
.drop-btn {
width: 2.25rem;
.drop-icon {
height: 2.25rem;
width: 2.25rem;
}
}
.fname {
background-color: $gray4;
border-radius: $small;
height: 2.25rem;
display: flex;
align-items: center;
margin-left: $smaller;
overflow: auto;
.icon {
height: 2rem;
aspect-ratio: 1;
background-image: url("../../assets/icons/folder.fill.svg");
background-size: 1.5rem;
background-position: 75% 50%;
}
.paths {
display: flex;
gap: $smaller;
overflow: auto;
height: 100%;
scrollbar-width: none;
&::-webkit-scrollbar {
display: none;
}
.path {
white-space: nowrap;
display: flex;
align-items: center;
cursor: default;
.text {
padding: $smaller;
border-radius: $smaller;
}
&::before {
content: "";
height: $medium;
margin-right: $smaller;
border-right: solid 1px $white;
transform: rotate(20deg);
}
&:first-child {
&::before {
display: none;
}
}
&:last-child {
padding-right: $small;
}
&:hover {
.text {
background-color: $gray;
}
}
}
}
}
}
}
}

127
src/components/nav/Titles/Folder.vue Normal file
View File

@ -0,0 +1,127 @@
<template>
<div id="folder-nav-title">
<div
class="folder"
v-motion
:initial="{
opacity: 0,
x: -20,
}"
:visible="{
opacity: 1,
x: 0,
transition: {
delay: 100,
},
}"
>
<div class="fname">
<div class="icon image"></div>
<div class="paths">
<div class="path" v-for="path in subPaths" :key="path.path">
<span class="text">{{ path.name }}</span>
</div>
</div>
</div>
</div>
</div>
</template>
<script setup lang="ts">
import { subPath } from "@/interfaces";
defineProps<{
subPaths: subPath[];
}>();
</script>
<style lang="scss">
#folder-nav-title {
.folder {
display: flex;
gap: $small;
.playbtnrect {
height: 2.25rem;
}
.drop-btn {
width: 2.25rem;
.drop-icon {
height: 2.25rem;
width: 2.25rem;
}
}
.fname {
background-color: $gray4;
border-radius: $small;
height: 2.25rem;
display: flex;
align-items: center;
margin-left: $smaller;
overflow: auto;
padding-right: $smaller;
.icon {
height: 2rem;
aspect-ratio: 1;
background-image: url("../../../assets/icons/folder.fill.svg");
background-size: 1.5rem;
margin-left: $smaller;
background-position: 65% 50%;
}
.paths {
display: flex;
gap: $smaller;
overflow: auto;
height: 100%;
scrollbar-width: none;
&::-webkit-scrollbar {
display: none;
}
.path {
white-space: nowrap;
display: flex;
align-items: center;
cursor: default;
.text {
padding: $smaller;
border-radius: $smaller;
}
&::before {
content: "";
height: $medium;
margin-right: $smaller;
border-right: solid 1px $white;
transform: rotate(20deg);
}
&:first-child {
&::before {
display: none;
}
}
&:last-child {
padding-right: $smaller;
}
&:hover {
.text {
background-color: $gray;
}
}
}
}
}
}
}
</style>

20
src/components/nav/Titles/Playlists.vue Normal file
View File

@ -0,0 +1,20 @@
<template>
<div
class="title"
v-show="$route.name == 'Playlists'"
v-motion
:initial="{
opacity: 0,
x: -20,
}"
:visible="{
opacity: 1,
x: 0,
transition: {
delay: 100,
},
}"
>
Playlists
</div>
</template>