TDvorak/swingmusic-extended
1
0
Fork 0
mirror of https://github.com/Dvorinka/swingmusic-extended.git synced 2026-06-04 20:43:04 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

use virtual scroll layout on playlist page

Browse Source 
+ fix playlist and album page header width
This commit is contained in:
geoffrey45
2022-09-21 15:33:38 +03:00
committed by Mungai Njoroge
parent f2aee70a8a
commit 097c2b4a83
8 changed files with 23 additions and 88 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/views/FolderView.vue
-1
View File
@@ -15,7 +15,6 @@ import useLoaderStore from "@/stores/loader";
import useFolderStore from "@/stores/pages/folder";
import Layout from "@/layouts/HeaderAndVList.vue";
import SongList from "@/components/FolderView/SongList.vue";
import FolderList from "@/components/FolderView/FolderList.vue";
const loader = useLoaderStore();
src/views/album/Header.vue
-12
View File
@@ -1,12 +0,0 @@
<template>
<Header :album="album" />
</template>
<script setup lang="ts">
import Header from "@/components/AlbumView/Header.vue";
import { AlbumInfo } from "@/interfaces";
defineProps<{
album: AlbumInfo;
}>();
</script>
src/views/album/index.vue
+2 -2
View File
@@ -5,7 +5,7 @@
:on_album_page="true"
>
<template #header>
<Header :album="album.info" :bio="album.bio" />
<Header :album="album.info" />
</template>
</Layout>
</template>
@@ -23,7 +23,7 @@ import useQueueStore from "@/stores/queue";
import useAStore from "@/stores/pages/album";
// @components
import Header from "./Header.vue";
import Header from "@/components/AlbumView/Header.vue";
import Layout from "@/layouts/HeaderAndVList.vue";
// @vars
src/views/playlist/Content.vue
-47
View File
@@ -1,47 +0,0 @@
<template>
<div class="songlist rounded">
<div v-if="tracks.length">
<SongList
:tracks="tracks"
:pname="name"
:playlistid="playlistid"
@playFromPage="playFromPlaylistPage"
/>
</div>
<div v-else-if="tracks.length === 0 && count > 0">
<div class="no-results">
<div class="text">We can't find your music 🦋</div>
</div>
</div>
<div v-else-if="tracks.length === 0 && count == 0">
<div class="no-results">
<div class="text">Nothing here</div>
</div>
</div>
</div>
</template>
<script setup lang="ts">
import useQueueStore from "@/stores/queue";
import usePlaylistStore from "@/stores/pages/playlist";
import SongList from "@/components/FolderView/SongList.vue";
import { Track } from "@/interfaces";
import { onUpdated } from "vue";
const props = defineProps<{
tracks: Track[];
count: number;
name: string;
playlistid: string;
}>();
const queue = useQueueStore();
const playlist = usePlaylistStore();
function playFromPlaylistPage(index: number) {
const { name, playlistid } = playlist.info;
queue.playFromPlaylist(name, playlistid, playlist.allTracks);
queue.play(index);
}
</script>
src/views/playlist/index.vue
+18 -23
View File
@@ -1,37 +1,32 @@
<template>
<Page>
<Layout :tracks="playlist.tracks" @playFromPage="playFromPlaylistPage">
<template #header>
<Header :info="playlist" />
<Header :info="playlist.info" />
</template>
<template #content>
<Content
:tracks="tracks"
:count="playlist.count"
:name="playlist.name"
:playlistid="playlist.playlistid"
/>
</template>
</Page>
</Layout>
</template>
<script setup lang="ts">
import { storeToRefs } from "pinia";
import Page from "@/layouts/HeaderContentBottom.vue";
import Header from "@/components/PlaylistView/Header.vue";
import Content from "./Content.vue";
import usePlaylistStore from "@/stores/pages/playlist";
import { onBeforeRouteLeave } from "vue-router";
const store = usePlaylistStore();
const { info: playlist, tracks } = storeToRefs(store);
import useQueueStore from "@/stores/queue";
import usePlaylistStore from "@/stores/pages/playlist";
import Layout from "@/layouts/HeaderAndVList.vue";
import Header from "@/components/PlaylistView/Header.vue";
const queue = useQueueStore();
const playlist = usePlaylistStore();
function playFromPlaylistPage(index: number) {
const { name, playlistid } = playlist.info;
queue.playFromPlaylist(name, playlistid, playlist.allTracks);
queue.play(index);
}
onBeforeRouteLeave(() => {
setTimeout(() => {
store.resetQuery();
playlist.resetQuery();
}, 500);
});
</script>
<style lang="scss"></style>