fix current track in queue auto scroll position

- add another inner container to limit the offset
- auto scroll current track to container start
- add todo file
This commit is contained in:
geoffrey45 2022-06-13 09:17:00 +03:00
parent 9a2635d7c3
commit f1ec6309ba
11 changed files with 65 additions and 30 deletions

View File

@ -34,7 +34,7 @@ def initialize() -> None:
albumslib.create_everything()
folderslib.run_scandir()
playlistlib.create_all_playlists()
# functions.reindex_tracks()
functions.reindex_tracks()
initialize()

View File

@ -148,3 +148,7 @@ class Handler(PatternMatchingEventHandler):
watch = OnMyWatch()
# TODO
# When removing a track, check if there are other tracks in the same album,
# if it was the last one, remove the album.

View File

@ -13,7 +13,7 @@
</router-link>
</template>
<script setup>
<script setup lang="ts">
const props = defineProps({
folder: {
type: Object,

View File

@ -20,9 +20,9 @@
/>
</div>
</div>
<div v-else-if="tracks.length === 0 && search_query">
<div v-else-if="tracks.length === 0">
<div class="no-results">
<div class="text">Nothing down here 😑</div>
<div class="text">No tracks here</div>
</div>
</div>
</div>
@ -33,7 +33,6 @@ import { useRoute } from "vue-router";
import SongItem from "../shared/SongItem.vue";
import state from "../../composables/state";
import useQStore from "../../stores/queue";
import { Track } from "../../interfaces";
@ -47,7 +46,6 @@ const props = defineProps<{
}>();
let route = useRoute().name;
const search_query = state.search_query;
/**
* Plays a clicked track and updates the queue

View File

@ -2,8 +2,9 @@
<div class="up-next">
<div class="r-grid">
<UpNext :next="queue.next" :playNext="queue.playNext" />
<div class="scrollable-r border rounded">
<div
class="scrollable-r border rounded"
class="inner"
@mouseenter="setMouseOver(true)"
@mouseleave="setMouseOver(false)"
>
@ -16,6 +17,7 @@
:isPlaying="queue.playing"
/>
</div>
</div>
<PlayingFrom :from="queue.from" />
</div>
</div>
@ -62,11 +64,18 @@ onUpdated(() => {
.scrollable-r {
height: 100%;
padding: $small;
overflow: auto;
padding: $small 0 $small $small;
overflow: hidden;
.inner {
height: 100%;
overflow: scroll;
margin-top: 1rem;
padding-right: $small;
overflow-x: hidden;
scrollbar-color: grey transparent;
}
}
}
}
</style>

View File

@ -11,7 +11,6 @@
<ArtistGrid />
</Tab>
</TabsWrapper>
<component :is="s.currentTab" />
</div>
</template>
@ -22,8 +21,6 @@ import TracksGrid from "./TracksGrid.vue";
import AlbumGrid from "./AlbumGrid.vue";
import ArtistGrid from "./ArtistGrid.vue";
import "@/assets/css/Search/Search.scss";
import useSearchStore from "@/stores/search";
const s = useSearchStore();
</script>

View File

@ -41,7 +41,7 @@
/>
</div>
<div class="submit">
<input type="submit" class="rounded" value="Update" />
<input type="submit" id="updateplaylistsubmit" class="rounded" value="Update" @click="" />
</div>
</form>
</template>
@ -98,8 +98,19 @@ function handleFile(file: File) {
image = file;
}
let clicked = false;
function update_playlist(e: Event) {
e.preventDefault();
if (!clicked) {
clicked = true;
const elem = document.getElementById("updateplaylistsubmit") as HTMLFormElement
elem.value = "Updating"
} else {
return;
}
const form = e.target as HTMLFormElement;
const formData = new FormData(form);

View File

@ -19,7 +19,7 @@ function focusElem(className: string, delay?: number) {
if (dom) {
dom.scrollIntoView({
behavior: "smooth",
block: "center",
block: "start",
inline: "center",
});
}

16
todo Normal file
View File

@ -0,0 +1,16 @@
### Server
- [ ] Debug the watchdog module. It has some weird behavior.
- [ ] Dynamically add files as they are being processed. Current behavior is: process all, then add them at once. This can cause impatience in case of lots of files.
- [ ] Add settings module
- [ ] In case of duplicates, select the higher bitrate track
- [ ] Add and deploy demo branch
### Client
- [ ] Add processes tab to show running tasks, eg. when tagging files. I have no idea on how to go about it so far. Web sockets?
- [ ] Responsiveness, especially the track list.
- [ ] Make dummy buttons functional.
- [ ] Add settings page (or modal)
- [ ] Add keyboard shortcuts listing page (or modal)
- [ ] Add backspace shortcut to go back.
- [ ] Implement Esc key to cancel modals.