mirror of
https://github.com/Dvorinka/swingmusic-extended.git
synced 2026-06-03 20:13:02 +00:00
rewrite playlist page with @Akryum/vue-virtual-scroller
This commit is contained in:
geoffrey45
committed by
Mungai Njoroge
Mungai Njoroge
parent
ffecfac8c7
commit
1fa7ec4c43
@@ -14,6 +14,7 @@
|
||||
"@vueuse/components": "^9.2.0",
|
||||
"@vueuse/core": "^8.5.0",
|
||||
"@vueuse/integrations": "^9.2.0",
|
||||
"vue-virtual-scroller": "^2.0.0-alpha.1",
|
||||
"axios": "^0.26.1",
|
||||
"fuse.js": "^6.6.2",
|
||||
"pinia": "^2.0.17",
|
||||
|
||||
@@ -54,6 +54,16 @@ $g-border: solid 1px $gray5;
|
||||
padding-right: calc(1rem - $small + 2px);
|
||||
}
|
||||
|
||||
.v-scroll-page {
|
||||
width: calc(100% + $medium) !important;
|
||||
|
||||
.scroller {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
padding-right: $small !important;
|
||||
}
|
||||
}
|
||||
|
||||
// ====== MODIFIERS =======
|
||||
|
||||
#app-grid.extendWidth {
|
||||
|
||||
@@ -21,6 +21,16 @@
|
||||
}
|
||||
}
|
||||
|
||||
.v-scroll-page {
|
||||
width: calc(100% + 1rem) !important;
|
||||
|
||||
.scroller {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
padding-right: 1rem !important;
|
||||
}
|
||||
}
|
||||
|
||||
#app-grid.noSidebar > #acontent {
|
||||
padding-right: 1rem !important;
|
||||
}
|
||||
|
||||
@@ -1,8 +1,13 @@
|
||||
import { createApp } from "vue";
|
||||
import { createPinia } from "pinia";
|
||||
|
||||
// @ts-ignore
|
||||
import { RecycleScroller } from "vue-virtual-scroller";
|
||||
import { autoAnimatePlugin } from "@formkit/auto-animate/vue";
|
||||
import piniaPluginPersistedstate from "pinia-plugin-persistedstate";
|
||||
|
||||
import "./assets/scss/index.scss";
|
||||
import "vue-virtual-scroller/dist/vue-virtual-scroller.css";
|
||||
|
||||
import App from "./App.vue";
|
||||
import router from "./router";
|
||||
@@ -16,5 +21,6 @@ app.use(pinia);
|
||||
app.use(router);
|
||||
app.directive("tooltip", vTooltip);
|
||||
app.use(autoAnimatePlugin);
|
||||
app.component("RecycleScroller", RecycleScroller)
|
||||
|
||||
app.mount("#app");
|
||||
|
||||
@@ -1,23 +1,69 @@
|
||||
<template>
|
||||
<Layout :tracks="playlist.tracks" @playFromPage="playFromPlaylistPage">
|
||||
<template #header>
|
||||
<Header :info="playlist.info" />
|
||||
</template>
|
||||
</Layout>
|
||||
<div class="playlist-virtual-scroller v-scroll-page">
|
||||
<RecycleScroller
|
||||
class="scroller"
|
||||
:items="scrollerItems"
|
||||
:item-size="null"
|
||||
key-field="id"
|
||||
v-slot="{ item }"
|
||||
>
|
||||
<component
|
||||
:is="item.component"
|
||||
v-bind="item.props"
|
||||
@playThis="playFromPlaylistPage(item.props.index - 1)"
|
||||
/>
|
||||
</RecycleScroller>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed } from "@vue/reactivity";
|
||||
import { onBeforeRouteLeave } from "vue-router";
|
||||
|
||||
import useQueueStore from "@/stores/queue";
|
||||
import usePlaylistStore from "@/stores/pages/playlist";
|
||||
|
||||
import Layout from "@/layouts/HeaderAndVList.vue";
|
||||
import Header from "@/components/PlaylistView/Header.vue";
|
||||
import SongItem from "@/components/shared/SongItem.vue";
|
||||
|
||||
const queue = useQueueStore();
|
||||
const playlist = usePlaylistStore();
|
||||
|
||||
interface ScrollerItem {
|
||||
id: string;
|
||||
component: typeof Header | typeof SongItem;
|
||||
props: Record<string, unknown>;
|
||||
size: number;
|
||||
}
|
||||
|
||||
const header: ScrollerItem = {
|
||||
id: "header",
|
||||
component: Header,
|
||||
props: {
|
||||
info: playlist.info,
|
||||
},
|
||||
size: 19 * 16,
|
||||
};
|
||||
|
||||
const scrollerItems = computed(() => {
|
||||
return [
|
||||
header,
|
||||
...playlist.tracks.map((track) => {
|
||||
return {
|
||||
id: track.trackid,
|
||||
component: SongItem,
|
||||
props: {
|
||||
track: track,
|
||||
index: track.index + 1,
|
||||
isCurrent: queue.currentid === track.trackid,
|
||||
isCurrentPlaying: queue.currentid === track.trackid && queue.playing,
|
||||
},
|
||||
size: 64,
|
||||
};
|
||||
}),
|
||||
];
|
||||
});
|
||||
|
||||
function playFromPlaylistPage(index: number) {
|
||||
const { name, playlistid } = playlist.info;
|
||||
queue.playFromPlaylist(name, playlistid, playlist.allTracks);
|
||||
@@ -30,3 +76,16 @@ onBeforeRouteLeave(() => {
|
||||
}, 500);
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.playlist-virtual-scroller {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
|
||||
.scroller {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
padding-bottom: 4rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1646,6 +1646,11 @@ minimist@^1.2.0, minimist@^1.2.5, minimist@^1.2.6:
|
||||
resolved "https://registry.yarnpkg.com/minimist/-/minimist-1.2.6.tgz#8637a5b759ea0d6e98702cfb3a9283323c93af44"
|
||||
integrity sha512-Jsjnk4bw3YJqYzbdyBiNsPWHPfO++UGG749Cxs6peCu5Xg4nrena6OVxOYxrQTqww0Jmwt+Ref8rggumkTLz9Q==
|
||||
|
||||
mitt@^2.1.0:
|
||||
version "2.1.0"
|
||||
resolved "https://registry.yarnpkg.com/mitt/-/mitt-2.1.0.tgz#f740577c23176c6205b121b2973514eade1b2230"
|
||||
integrity sha512-ILj2TpLiysu2wkBbWjAmww7TkZb65aiQO+DkVdUTBpBXq+MHYiETENkKFMtsJZX1Lf4pe4QOrTSjIfUwN5lRdg==
|
||||
|
||||
mkdirp@~0.5.1:
|
||||
version "0.5.6"
|
||||
resolved "https://registry.yarnpkg.com/mkdirp/-/mkdirp-0.5.6.tgz#7def03d2432dcae4ba1d611445c48396062255f6"
|
||||
@@ -2230,6 +2235,16 @@ vue-eslint-parser@^8.0.1:
|
||||
lodash "^4.17.21"
|
||||
semver "^7.3.5"
|
||||
|
||||
vue-observe-visibility@^2.0.0-alpha.1:
|
||||
version "2.0.0-alpha.1"
|
||||
resolved "https://registry.yarnpkg.com/vue-observe-visibility/-/vue-observe-visibility-2.0.0-alpha.1.tgz#1e4eda7b12562161d58984b7e0dea676d83bdb13"
|
||||
integrity sha512-flFbp/gs9pZniXR6fans8smv1kDScJ8RS7rEpMjhVabiKeq7Qz3D9+eGsypncjfIyyU84saU88XZ0zjbD6Gq/g==
|
||||
|
||||
vue-resize@^2.0.0-alpha.1:
|
||||
version "2.0.0-alpha.1"
|
||||
resolved "https://registry.yarnpkg.com/vue-resize/-/vue-resize-2.0.0-alpha.1.tgz#43eeb79e74febe932b9b20c5c57e0ebc14e2df3a"
|
||||
integrity sha512-7+iqOueLU7uc9NrMfrzbG8hwMqchfVfSzpVlCMeJQe4pyibqyoifDNbKTZvwxZKDvGkB+PdFeKvnGZMoEb8esg==
|
||||
|
||||
vue-router@^4.1.3:
|
||||
version "4.1.3"
|
||||
resolved "https://registry.yarnpkg.com/vue-router/-/vue-router-4.1.3.tgz#f8dc7931a2253cc5aa9b740f8b98969d08ca283c"
|
||||
@@ -2253,6 +2268,15 @@ vue-template-compiler@^2.0.0:
|
||||
de-indent "^1.0.2"
|
||||
he "^1.2.0"
|
||||
|
||||
vue-virtual-scroller@^2.0.0-alpha.1:
|
||||
version "2.0.0-alpha.1"
|
||||
resolved "https://registry.yarnpkg.com/vue-virtual-scroller/-/vue-virtual-scroller-2.0.0-alpha.1.tgz#5b5410105b8e60ca57bbd5f2faf5ad1d8108d046"
|
||||
integrity sha512-Mn5w3Qe06t7c3Imm2RHD43RACab1CCWplpdgzq+/FWJcpQtcGKd5vDep8i+nIwFtzFLsWAqEK0RzM7KrfAcBng==
|
||||
dependencies:
|
||||
mitt "^2.1.0"
|
||||
vue-observe-visibility "^2.0.0-alpha.1"
|
||||
vue-resize "^2.0.0-alpha.1"
|
||||
|
||||
vue@^3.2.37:
|
||||
version "3.2.37"
|
||||
resolved "https://registry.yarnpkg.com/vue/-/vue-3.2.37.tgz#da220ccb618d78579d25b06c7c21498ca4e5452e"
|
||||
|
||||
Reference in New Issue
Block a user