tcsenpai/swingmusic
1
0
Fork 0
mirror of https://github.com/tcsenpai/swingmusic.git synced 2025-06-11 21:47:22 +00:00
Code Issues Packages Projects Releases Wiki Activity

remove bottom content

Browse Source
This commit is contained in:
geoffrey45 2022-08-17 20:16:22 +03:00
parent 703b3cf240
commit a7dc2fa6bd
14 changed files with 94 additions and 107 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
package.json
View File

@ -18,6 +18,7 @@
"vue": "^3.2.37",
"vue-debounce": "^3.0.2",
"vue-router": "^4.1.3",
"vue-template-compiler": "^2.0.0",
"webpack": "^5.74.0"
},
"devDependencies": {

14
src/assets/scss/_mixins.scss
View File

@ -10,17 +10,19 @@
@content;
}
}
@mixin tablet-portrait {
@media (max-width: 810) {
@content;
}
}
@mixin tablet-landscape {
@media (max-width: 1080px) {
@content;
}
}
@mixin tablet-portrait {
@media (max-width: 810) {
@content;
}
}
@mixin for-desktop-down {
@media (max-width: 1600px) {
@content;
@ -31,4 +33,4 @@
@media (min-width: 1800px) {
@content;
}
}
}

14
src/components/AlbumView/Header.vue
View File

@ -30,9 +30,9 @@
</div>
<div class="bottom">
<div class="stats">
{{ album.count }} Tracks • {{ formatSeconds(album.duration, true) }} •
{{ album.artist }} •
{{ album.date }} •
{{ album.artist }}
{{ album.count }} Tracks • {{ formatSeconds(album.duration, true) }}
</div>
<PlayBtnRect
:source="playSources.album"
@ -59,6 +59,7 @@ import PlayBtnRect from "../shared/PlayBtnRect.vue";
const props = defineProps<{
album: AlbumInfo;
bio: string | null;
}>();
const emit = defineEmits<{
@ -89,7 +90,7 @@ useVisibility(albumheaderthing, handleVisibilityState);
<style lang="scss">
.a-header {
display: grid;
grid-template-columns: max-content 1fr;
grid-template-columns: 1fr;
gap: 1rem;
padding: 1rem;
height: 100% !important;
@ -102,7 +103,7 @@ useVisibility(albumheaderthing, handleVisibilityState);
position: relative;
img {
height: 16rem;
height: 6rem;
aspect-ratio: 1;
object-fit: cover;
transition: all 0.2s ease-in-out;
@ -122,7 +123,7 @@ useVisibility(albumheaderthing, handleVisibilityState);
.top {
.h {
opacity: 0.75;
opacity: 0.5;
}
.title {
font-size: 2.5rem;
@ -150,9 +151,8 @@ useVisibility(albumheaderthing, handleVisibilityState);
}
}
// grid-template-columns: 1fr !important;
@include for-desktop-down {
grid-template-columns: 1fr;
.art > img {
height: 6rem;
box-shadow: 0 0 1rem $black;

2
src/components/FolderView/SongList.vue
View File

@ -25,7 +25,7 @@
<div class="text">No tracks here</div>
</div>
</div>
<div class="copyright" v-if="copyright">
<div class="copyright" v-if="copyright && copyright()">
{{ copyright() }}
</div>
</div>

17
src/components/RightSideBar/Search/ArtistGrid.vue
View File

@ -11,7 +11,14 @@
:alt="true"
/>
</div>
<LoadMore v-if="search.artists.more" @loadMore="loadMore" />
<LoadMore
v-if="album_grid && search.albums.more"
:loader="search.loadAlbums"
/>
<LoadMore
v-if="!album_grid && search.artists.more"
:loader="search.loadArtists"
/>
</div>
</template>
@ -28,10 +35,10 @@ defineProps<{
album_grid?: boolean;
}>();
function loadMore() {
search.updateLoadCounter("artists");
search.loadArtists(search.loadCounter.artists);
}
// function loadMore() {
// search.updateLoadCounter("artists");
// search.loadArtists(search.loadCounter.artists);
// }
</script>
<style lang="scss">

10
src/components/RightSideBar/Search/LoadMore.vue
View File

@ -1,19 +1,17 @@
<template>
<div class="morexx">
<button @click="loadMore" class="btn">
<button class="btn" @click="loader">
<div class="text">Load More</div>
</button>
</div>
</template>
<script setup lang="ts">
const emit = defineEmits<{
(e: "loadMore"): void;
defineProps<{
loader: () => void;
}>();
function loadMore() {
emit("loadMore");
}
</script>
<style lang="scss">

7
src/components/RightSideBar/Search/TracksGrid.vue
View File

@ -11,7 +11,7 @@
@PlayThis="updateQueue(index)"
/>
</TransitionGroup>
<LoadMore v-if="search.tracks.more" @loadMore="loadMore" />
<LoadMore v-if="search.tracks.more" :loader="search.loadTracks" />
</div>
</template>
@ -24,11 +24,6 @@ import useSearchStore from "../../../stores/search";
const queue = useQStore();
const search = useSearchStore();
function loadMore() {
search.updateLoadCounter("tracks");
search.loadTracks(search.loadCounter.tracks);
}
function updateQueue(index: number) {
queue.playFromSearch(search.query, search.tracks.value);
queue.play(index);

19
src/layouts/HeaderContentBottom.vue
View File

@ -8,23 +8,6 @@
<slot name="content"></slot>
</main>
</div>
<div
class="ap-page-bottom-container rounded"
ref="apbottomcontainer"
:class="{
bottomexpanded: bottomContainerRaised,
}"
>
<div class="click-to-expand" @click="toggleBottom">
<div>
<div class="arrow">↑</div>
<span>tap here</span>
</div>
</div>
<div class="bottom-content">
<slot name="bottom"></slot>
</div>
</div>
</div>
</template>
@ -112,7 +95,7 @@ function toggleBottom() {
gap: 1rem;
.ap-page-content {
padding-bottom: 16rem;
// padding-bottom: 16rem;
@include for-desktop-down {
min-height: calc(100vh - 38.75rem);

5
src/router/index.js
View File

@ -74,8 +74,11 @@ const routes = [
component: AlbumView,
beforeEnter: async (to) => {
state.loading.value = true;
await useAStore()
const store = useAStore();
await store
.fetchTracksAndArtists(to.params.hash)
.then(() => store.fetchBio(to.params.hash))
.then(() => {
state.loading.value = false;
});

16
src/stores/queue.ts
View File

@ -1,3 +1,5 @@
// @ts-strict
import { defineStore } from "pinia";
import state from "../composables/state";
import { NotifType, useNotifStore } from "./notification";
@ -102,8 +104,18 @@ export default defineStore("Queue", {
};
});
})
.catch((err) => {
console.error(err);
.catch((err: ErrorEvent) => {
err.stopImmediatePropagation();
useNotifStore().showNotification(
"Can't play: " + track.title,
NotifType.Error
);
if (this.current !== this.tracklist.length - 1) {
setTimeout(() => {
this.playNext();
}, 1000);
}
});
},
playPause() {

58
src/stores/search.ts
View File

@ -17,7 +17,7 @@ import useTabStore from "./tabs";
* Scrolls on clicking the loadmore button
*/
function scrollOnLoad() {
const elem = document.getElementById("tab-content");
const elem = document.getElementById("tab-content") as HTMLElement;
elem.scroll({
top: elem.scrollHeight,
@ -88,13 +88,10 @@ export default defineStore("search", () => {
});
}
/**
* Loads more search tracks results
*
* @param index The starting index of the tracks to load
*/
function loadTracks(index: number) {
loadMoreTracks(index)
function loadTracks() {
loadCounter.tracks += 6;
loadMoreTracks(loadCounter.tracks)
.then((res) => {
tracks.value = [...tracks.value, ...res.tracks];
tracks.more = res.more;
@ -102,27 +99,25 @@ export default defineStore("search", () => {
.then(() => scrollOnLoad());
}
/**
* Loads more search albums results
*
* @param index The starting index of the albums to load
*/
function loadAlbums(index: number) {
loadMoreAlbums(index)
function loadAlbums() {
loadCounter.albums += 6;
loadMoreAlbums(loadCounter.albums)
.then((res) => {
albums.value = [...albums.value, ...res.albums];
albums.more = res.more;
})
.then(() => scrollOnLoad());
.then(() => {
setTimeout(() => {
scrollOnLoad();
}, 500);
});
}
/**
* Loads more search artists results
*
* @param index The starting index of the artists to load
*/
function loadArtists(index: number) {
loadMoreArtists(index)
function loadArtists() {
loadCounter.artists += 6;
loadMoreArtists(loadCounter.artists)
.then((res) => {
artists.value = [...artists.value, ...res.artists];
artists.more = res.more;
@ -130,22 +125,6 @@ export default defineStore("search", () => {
.then(() => scrollOnLoad());
}
type loadType = "tracks" | "albums" | "artists" | "playlists";
function updateLoadCounter(type: loadType) {
switch (type) {
case "tracks":
loadCounter.tracks += 6;
break;
case "albums":
loadCounter.albums += 6;
break;
case "artists":
loadCounter.artists += 6;
break;
}
}
watch(
() => query.value,
(newQuery) => {
@ -217,7 +196,6 @@ export default defineStore("search", () => {
query,
currentTab,
loadCounter,
updateLoadCounter,
loadTracks,
loadAlbums,
loadArtists,

16
src/views/album/index.vue
View File

@ -1,18 +1,11 @@
<template>
<Page :bottomRaisedCallback="fetchAlbumBio">
<Page>
<template #header>
<Header :album="album.info" />
<Header :album="album.info" :bio="album.bio" />
</template>
<template #content>
<Content :discs="album.discs" :copyright="album.info.copyright" />
</template>
<template #bottom>
<Bottom
:artists="album.artists"
:bio="album.bio"
:image="album.info?.image"
/>
</template>
</Page>
</template>
@ -25,7 +18,6 @@ import {
} from "vue-router";
import Page from "@/layouts/HeaderContentBottom.vue";
import Bottom from "./Bottom.vue";
import Content from "./Content.vue";
import Header from "./Header.vue";
@ -36,6 +28,8 @@ function fetchAlbumBio(params: RouteParams) {
}
onBeforeRouteUpdate(async (to: RouteLocationNormalized) => {
await album.fetchTracksAndArtists(to.params.hash.toString());
await album
.fetchTracksAndArtists(to.params.hash.toString())
.then(() => album.fetchBio(to.params.hash.toString()));
});
</script>

4
src/views/playlist/index.vue
View File

@ -11,9 +11,6 @@
:playlistid="playlist.info.playlistid"
/>
</template>
<template #bottom>
<FeaturedArtists :artists="playlist.artists" />
</template>
</Page>
</template>
@ -22,7 +19,6 @@ import Page from "@/layouts/HeaderContentBottom.vue";
import Header from "@/components/PlaylistView/Header.vue";
import Content from "./Content.vue";
import FeaturedArtists from "@/components/PlaylistView/FeaturedArtists.vue";
import usePTrackStore from "@/stores/pages/playlist";
import { onMounted, onUnmounted } from "vue";

18
yarn.lock
View File

@ -653,6 +653,11 @@ csstype@^2.6.8:
resolved "https://registry.yarnpkg.com/csstype/-/csstype-2.6.19.tgz#feeb5aae89020bb389e1f63669a5ed490e391caa"
integrity sha512-ZVxXaNy28/k3kJg0Fou5MiYpp88j7H9hLZp8PDC3jV0WFjfH5E9xHb56L0W59cPbKbcHXeP4qyT8PrHp8t6LcQ==
de-indent@^1.0.2:
version "1.0.2"
resolved "https://registry.yarnpkg.com/de-indent/-/de-indent-1.0.2.tgz#b2038e846dc33baa5796128d0804b455b8c1e21d"
integrity sha512-e/1zu3xH5MQryN2zdVaF0OrdNLUbvWxzMbi+iNA6Bky7l1RoP8a2fIbRocyHclXt/arDrrR6lL3TqFD9pMQTsg==
debug@^4.1.1, debug@^4.3.2:
version "4.3.3"
resolved "https://registry.yarnpkg.com/debug/-/debug-4.3.3.tgz#04266e0b70a98d4462e6e288e38259213332b664"
@ -1263,6 +1268,11 @@ has@^1.0.3:
dependencies:
function-bind "^1.1.1"
he@^1.2.0:
version "1.2.0"
resolved "https://registry.yarnpkg.com/he/-/he-1.2.0.tgz#84ae65fa7eafb165fddb61566ae14baf05664f0f"
integrity sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==
ignore@^4.0.6:
version "4.0.6"
resolved "https://registry.yarnpkg.com/ignore/-/ignore-4.0.6.tgz#750e3db5862087b4737ebac8207ffd1ef27b25fc"
@ -2170,6 +2180,14 @@ vue-svg-loader@^0.16.0:
loader-utils "^1.2.3"
svg-to-vue "^0.7.0"
vue-template-compiler@^2.0.0:
version "2.7.8"
resolved "https://registry.yarnpkg.com/vue-template-compiler/-/vue-template-compiler-2.7.8.tgz#eadd54ed8fbff55b7deb07093a976c07f451a1dc"
integrity sha512-eQqdcUpJKJpBRPDdxCNsqUoT0edNvdt1jFjtVnVS/LPPmr0BU2jWzXlrf6BVMeODtdLewB3j8j3WjNiB+V+giw==
dependencies:
de-indent "^1.0.2"
he "^1.2.0"
vue@^3.2.37:
version "3.2.37"
resolved "https://registry.yarnpkg.com/vue/-/vue-3.2.37.tgz#da220ccb618d78579d25b06c7c21498ca4e5452e"