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

fix 720p screens layout issue

Browse Source 
~ add media queries
+ handle responsiveness on folder header
This commit is contained in:
geoffrey45 2022-08-11 02:53:24 +03:00
parent 24ef21e6ba
commit 992d3a7003
15 changed files with 79 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

@ -11,7 +11,7 @@
"dependencies": {
"@vueuse/core": "^8.5.0",
"axios": "^0.26.1",
"pinia": "^2.0.11",
"pinia": "^2.0.17",
"sass": "^1.49.0",
"sass-loader": "^10",
"vite-svg-loader": "^3.4.0",

3
src/assets/scss/Global/app-grid.scss
View File

@ -7,12 +7,11 @@
"l-sidebar content r-sidebar"
"l-sidebar content r-sidebar"
"l-sidebar content tabs";
align-content: center;
max-width: 2720px;
height: calc(100vh - 1rem);
margin: 0 auto;
gap: 1rem;
margin: $small;
margin: $small auto;
}
#acontent {

11
src/assets/scss/Global/index.scss
View File

@ -11,13 +11,20 @@
}
body {
margin: 0;
background-color: $body;
color: #fff;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
font-family: "SF Compact Display" !important;
font-size: 1rem;
overflow: hidden;
image-rendering: -webkit-optimize-contrast;
width: calc(100vw - 1rem);
overflow: hidden;
height: calc(100vh - 1rem);
#app {
width: 100%;
overflow: hidden;
margin: 0 auto;
}
}

4
src/assets/scss/_variables.scss
View File

@ -67,8 +67,8 @@ $side-nav-svg: $red;
@content;
}
}
@mixin for-desktop-up {
@media (min-width: 1200px) {
@mixin for-desktop-down {
@media (max-width: 1280px) {
@content;
}
}

2
src/components/LeftSidebar/nowPlaying.vue
View File

@ -47,7 +47,7 @@ const showContextMenu = (e: Event) => {
e.stopPropagation();
const menus = trackContext(
queue.tracks[queue.current],
queue.tracklist[queue.current],
useModalStore,
useQueueStore
);

2
src/components/RightSideBar/Home/Main.vue
View File

@ -1,6 +1,6 @@
<template>
<div class="r-home">
<UpNext :next="queue.tracks[queue.next]" :playNext="queue.playNext" />
<UpNext :next="queue.tracklist[queue.next]" :playNext="queue.playNext" />
<Recommendations />
</div>
</template>

7
src/components/RightSideBar/Main.vue
View File

@ -27,7 +27,7 @@ const tabs = useTabStore();
<style lang="scss">
.r-sidebar {
width: 100%;
@include phone-only {
display: none;
@ -38,13 +38,14 @@ const tabs = useTabStore();
}
.grid {
height: 100%;
display: flex;
position: relative;
height: 100%;
.r-content {
grid-area: content;
width: 29rem;
// width: 29rem;
width: 100%;
// @include tablet-landscape {
// display: none;

4
src/components/RightSideBar/Queue.vue
View File

@ -1,7 +1,7 @@
<template>
<div class="up-next">
<div class="r-grid">
<UpNext :next="queue.tracks[queue.next]" :playNext="queue.playNext" />
<UpNext :next="queue.tracklist[queue.next]" :playNext="queue.playNext" />
<div class="scrollable-r bg-black rounded">
<QueueActions />
<div
@ -10,7 +10,7 @@
@mouseleave="setMouseOver(false)"
>
<TrackItem
v-for="(t, index) in queue.tracks"
v-for="(t, index) in queue.tracklist"
:key="t.trackid"
:track="t"
@playThis="queue.play(index)"

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

@ -81,14 +81,15 @@ watch(
.topnav {
display: grid;
grid-template-columns: 1fr min-content max-content;
width: 100%;
.left {
display: grid;
grid-template-columns: max-content 1fr;
width: min-content;
overflow: scroll;
.info {
min-width: 15rem;
.title {
font-size: 1.5rem;
font-weight: bold;

5
src/components/nav/Titles/Folder.vue
View File

@ -63,7 +63,10 @@ onUpdated(() => {
margin-left: $smaller;
overflow: auto;
padding-right: $smaller;
color: rgba(255, 255, 255, 0.678);
@include for-desktop-down {
max-width: 9rem;
}
.icon {
height: 2rem;

41
src/stores/queue.ts
View File

@ -56,6 +56,11 @@ export default defineStore("Queue", {
current: 0,
full: 0,
},
indexes: {
current: 0,
next: 0,
previous: 0,
},
current: 0,
next: 0,
prev: 0,
@ -63,12 +68,12 @@ export default defineStore("Queue", {
playing: false,
from: {} as From,
currenttrack: {} as Track,
tracks: [defaultTrack] as Track[],
tracklist: [defaultTrack] as Track[],
}),
actions: {
play(index: number = 0) {
this.current = index;
const track = this.tracks[index];
const track = this.tracklist[index];
this.currentid = track.trackid;
const uri = state.settings.uri + "/file/" + track.trackid;
const elem = document.getElementById("progress");
@ -134,7 +139,7 @@ export default defineStore("Queue", {
if (queue) {
const parsed = JSON.parse(queue);
this.from = parsed.from;
this.tracks = parsed.tracks;
this.tracklist = parsed.tracks;
}
this.updateCurrent(readCurrent());
@ -147,7 +152,7 @@ export default defineStore("Queue", {
writeCurrent(index);
},
updateNext(index: number) {
if (index == this.tracks.length - 1) {
if (index == this.tracklist.length - 1) {
this.next = 0;
return;
}
@ -156,14 +161,14 @@ export default defineStore("Queue", {
},
updatePrev(index: number) {
if (index === 0) {
this.prev = this.tracks.length - 1;
this.prev = this.tracklist.length - 1;
return;
}
this.prev = index - 1;
},
setCurrent(index: number) {
const track = this.tracks[index];
const track = this.tracklist[index];
this.currenttrack = track;
this.current = index;
@ -171,10 +176,10 @@ export default defineStore("Queue", {
this.duration.full = track.length;
},
setNewQueue(tracklist: Track[]) {
if (this.tracks !== tracklist) {
this.tracks = [];
this.tracks.push(...tracklist);
writeQueue(this.from, this.tracks);
if (this.tracklist !== tracklist) {
this.tracklist = [];
this.tracklist.push(...tracklist);
writeQueue(this.from, this.tracklist);
}
},
playFromFolder(fpath: string, tracks: Track[]) {
@ -218,17 +223,17 @@ export default defineStore("Queue", {
this.setNewQueue(tracks);
},
addTrackToQueue(track: Track) {
this.tracks.push(track);
writeQueue(this.from, this.tracks);
this.tracklist.push(track);
writeQueue(this.from, this.tracklist);
this.updateNext(this.current);
},
playTrackNext(track: Track) {
const Toast = useNotifStore();
if (this.current == this.tracks.length - 1) {
this.tracks.push(track);
if (this.current == this.tracklist.length - 1) {
this.tracklist.push(track);
} else {
const nextindex = this.current + 1;
const next: Track = this.tracks[nextindex];
const next: Track = this.tracklist[nextindex];
if (next.trackid === track.trackid) {
Toast.showNotification("Track is already queued", NotifType.Info);
@ -236,16 +241,16 @@ export default defineStore("Queue", {
}
}
this.tracks.splice(this.current + 1, 0, track);
this.tracklist.splice(this.current + 1, 0, track);
this.updateNext(this.current);
Toast.showNotification(
`Added ${track.title} to queue`,
NotifType.Success
);
writeQueue(this.from, this.tracks);
writeQueue(this.from, this.tracklist);
},
clearQueue() {
this.tracks = [defaultTrack] as Track[];
this.tracklist = [defaultTrack] as Track[];
this.current = 0;
this.currentid = "";
this.next = 0;

16
src/stores/queue/actions.ts Normal file
View File

@ -0,0 +1,16 @@
export function handlePlayPause(
currentIndex: number,
audio: HTMLAudioElement,
state: boolean,
play: (index: number) => void
) {
if (audio.src === "") {
play(currentIndex);
} else if (audio.paused) {
audio.play();
state = true;
} else {
audio.pause();
state = false;
}
}

5
src/views/FolderView.vue
View File

@ -79,12 +79,17 @@ onBeforeRouteUpdate((to, from) => {
height: $banner-height;
pointer-events: none;
user-select: none;
width: 100%;
.text {
bottom: 1rem;
left: 1rem;
background-color: $black;
@include for-desktop-down {
max-width: 31rem;
}
h3 {
margin: $small;
display: flex;

1
tsconfig.json
View File

@ -1,5 +1,6 @@
{
"compilerOptions": {
"strict": true,
"jsx": "preserve",
"paths": {
"baseUrl": ["./"],

17
yarn.lock
View File

@ -129,12 +129,7 @@
"@vue/compiler-dom" "3.2.37"
"@vue/shared" "3.2.37"
"@vue/devtools-api@^6.0.0-beta.21":
version "6.0.12"
resolved "https://registry.yarnpkg.com/@vue/devtools-api/-/devtools-api-6.0.12.tgz#7b57cce215ae9f37a86984633b3aa3d595aa5b46"
integrity sha512-iO/4FIezHKXhiDBdKySCvJVh8/mZPxHpiQrTy+PXVqJZgpTPTdHy4q8GXulaY+UKEagdkBb0onxNQZ0LNiqVhw==
"@vue/devtools-api@^6.1.4":
"@vue/devtools-api@^6.1.4", "@vue/devtools-api@^6.2.1":
version "6.2.1"
resolved "https://registry.yarnpkg.com/@vue/devtools-api/-/devtools-api-6.2.1.tgz#6f2948ff002ec46df01420dfeff91de16c5b4092"
integrity sha512-OEgAMeQXvCoJ+1x8WyQuVZzFo0wcyCmUR3baRVLmKBo1LmYZWMlRiXlux5jd0fqVJu6PfDbOrZItVqUEzLobeQ==
@ -1727,12 +1722,12 @@ picomatch@^2.0.4, picomatch@^2.2.1:
resolved "https://registry.yarnpkg.com/picomatch/-/picomatch-2.3.1.tgz#3ba3833733646d9d3e4995946c1365a67fb07a42"
integrity sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==
pinia@^2.0.11:
version "2.0.11"
resolved "https://registry.yarnpkg.com/pinia/-/pinia-2.0.11.tgz#ff03c714f5e5f16207280a4fc2eab01f3701ee2b"
integrity sha512-JzcmnMqu28PNWOjDgEDK6fTrIzX8eQZKPPKvu/fpHdpXARUj1xeVdFi3YFIMOWswqaBd589cpmAMdSSTryI9iw==
pinia@^2.0.17:
version "2.0.17"
resolved "https://registry.yarnpkg.com/pinia/-/pinia-2.0.17.tgz#f925e5e4f73c15e16dfb4838176a9ca50752f26b"
integrity sha512-AtwLwEWQgIjofjgeFT+nxbnK5lT2QwQjaHNEDqpsi2AiCwf/NY78uWTeHUyEhiiJy8+sBmw0ujgQMoQbWiZDfA==
dependencies:
"@vue/devtools-api" "^6.0.0-beta.21"
"@vue/devtools-api" "^6.2.1"
vue-demi "*"
postcss@^8.1.10: