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

remove transition group from queue track list

Browse Source
This commit is contained in:
geoffrey45
2022-08-27 19:50:43 +03:00
parent d3d7d1f139
commit 465383b5fa
7 changed files with 60 additions and 140 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/LeftSidebar/Playlists.vue
-1
View File
@@ -32,7 +32,6 @@ onMounted(() => {
<style lang="scss">
.sidebar-playlists {
// outline: solid 1px;
display: grid;
grid-template-rows: max-content 1fr;
src/components/LeftSidebar/nowPlaying.vue
+4 -35
View File
@@ -1,10 +1,10 @@
<template>
<div class="now-playing-card t-center rounded">
<div>
<SongCard :track="queue.currenttrack" />
<SongCard :track="currenttrack" />
<div class="l-track-time">
<span class="rounded">{{ formatSeconds(queue.duration.current) }}</span
><span class="rounded">{{ formatSeconds(queue.duration.full) }}</span>
<span class="rounded">{{ formatSeconds(duration.current) }}</span
><span class="rounded">{{ formatSeconds(duration.full) }}</span>
</div>
<Progress />
</div>
@@ -13,16 +13,7 @@
</template>
<script setup lang="ts">
import { ref } from "vue";
import useModalStore from "@/stores/modal";
import useQueueStore from "@/stores/queue";
import useQStore from "../../stores/queue";
import useContextStore from "@/stores/context";
import MenuSvg from "../../assets/icons/more.svg";
import trackContext from "@/contexts/track_context";
import { ContextSrc } from "@/composables/enums";
import { formatSeconds } from "@/utils";
import HotKeys from "./NP/HotKeys.vue";
@@ -30,28 +21,7 @@ import Progress from "./NP/Progress.vue";
import SongCard from "./NP/SongCard.vue";
const queue = useQStore();
const contextStore = useContextStore();
const context_on = ref(false);
const showContextMenu = (e: Event) => {
e.preventDefault();
e.stopPropagation();
const menus = trackContext(
queue.tracklist[queue.current],
useModalStore,
useQueueStore
);
contextStore.showContextMenu(e, menus, ContextSrc.Track);
context_on.value = true;
contextStore.$subscribe((mutation, state) => {
if (!state.visible) {
context_on.value = false;
}
});
};
const { currenttrack, duration } = queue;
</script>
<style lang="scss">
.now-playing-card {
@@ -88,7 +58,6 @@ const showContextMenu = (e: Event) => {
}
}
.context_on {
background-color: $accent;
}
src/components/PlaylistsList/PlaylistCard.vue
-2
View File
@@ -48,8 +48,6 @@ const props = defineProps<{
.bottom {
margin-top: $smaller;
display: grid;
justify-items: center;
.name {
font-weight: 900;
src/components/RightSideBar/Main.vue
+3 -3
View File
@@ -7,13 +7,13 @@
>
<div class="grid">
<div class="r-content">
<div class="r-dash" v-show="tabs.current === tabs.tabs.home">
<div class="r-dash" v-if="tabs.current === tabs.tabs.home">
<DashBoard />
</div>
<div class="r-search" v-show="tabs.current === tabs.tabs.search">
<div class="r-search" v-if="tabs.current === tabs.tabs.search">
<Search />
</div>
<div class="r-queue" v-show="tabs.current === tabs.tabs.queue">
<div class="r-queue" v-if="tabs.current === tabs.tabs.queue">
<Queue />
</div>
</div>
src/components/RightSideBar/Queue.vue
+10 -28
View File
@@ -8,18 +8,16 @@
@mouseenter="setMouseOver(true)"
@mouseleave="setMouseOver(false)"
>
<TransitionGroup name="queuelist">
<TrackItem
v-for="(t, index) in queue.tracklist"
:key="index"
:track="t"
@playThis="queue.play(index)"
:isCurrent="index === queue.current"
:isPlaying="queue.playing"
:isQueueTrack="true"
:index="index"
/>
</TransitionGroup>
<TrackItem
v-for="(t, index) in queue.tracklist"
:key="index"
:track="t"
@playThis="queue.play(index)"
:isCurrent="index === queue.currentindex"
:isPlaying="queue.playing"
:isQueueTrack="true"
:index="index"
/>
</div>
</div>
</div>
@@ -52,21 +50,6 @@ onUpdated(() => {
</script>
<style lang="scss">
.queuelist-move, /* apply transition to moving elements */
.queuelist-enter-active {
transition: all 0.5s ease-in-out;
}
.queuelist-enter-from,
.queuelist-leave-to {
opacity: 0;
}
.queuelist-leave-active {
transition: none;
position: absolute;
}
.up-next {
overflow: hidden;
height: 100%;
@@ -80,7 +63,6 @@ onUpdated(() => {
position: relative;
height: 100%;
.scrollable-r {
height: 100%;
overflow: hidden;
src/composables/mediaNotification.ts
+13 -13
View File
@@ -1,4 +1,3 @@
import { Track } from "../interfaces.js";
import { paths } from "../config";
import useQueueStore from "../stores/queue";
@@ -6,54 +5,55 @@ import useQueueStore from "../stores/queue";
export default () => {
if ("mediaSession" in navigator) {
const queue = useQueueStore();
const { currenttrack: track } = queue;
navigator.mediaSession.metadata = new window.MediaMetadata({
title: queue.currenttrack.title,
artist: queue.currenttrack.artists.join(", "),
title: track.title,
artist: track.artists.join(", "),
artwork: [
{
src: paths.images.thumb + queue.currenttrack.image,
src: paths.images.thumb + track.image,
sizes: "96x96",
type: "image/jpeg",
},
{
src: paths.images.thumb + queue.currenttrack.image,
src: paths.images.thumb + track.image,
sizes: "128x128",
type: "image/webp",
},
{
src: paths.images.thumb + queue.currenttrack.image,
src: paths.images.thumb + track.image,
sizes: "192x192",
type: "image/webp",
},
{
src: paths.images.thumb + queue.currenttrack.image,
src: paths.images.thumb + track.image,
sizes: "256x256",
type: "image/webp",
},
{
src: paths.images.thumb + queue.currenttrack.image,
src: paths.images.thumb + track.image,
sizes: "384x384",
type: "image/webp",
},
{
src: paths.images.thumb + queue.currenttrack.image,
src: paths.images.thumb + track.image,
sizes: "512x512",
type: "image/webp",
},
],
});
navigator.mediaSession.setActionHandler("play", function () {
navigator.mediaSession.setActionHandler("play", () => {
queue.playPause();
});
navigator.mediaSession.setActionHandler("pause", function () {
navigator.mediaSession.setActionHandler("pause", () => {
queue.playPause();
});
navigator.mediaSession.setActionHandler("previoustrack", function () {
navigator.mediaSession.setActionHandler("previoustrack", () => {
queue.playPrev();
});
navigator.mediaSession.setActionHandler("nexttrack", function () {
navigator.mediaSession.setActionHandler("nexttrack", () => {
queue.playNext();
});
}
src/stores/queue.ts
+30 -58
View File
@@ -32,23 +32,19 @@ export default defineStore("Queue", {
current: 0,
full: 0,
},
current: 0,
next: 0,
prev: 0,
currentindex: 0,
currentid: <string | null>"",
playing: false,
from: {} as From,
currenttrack: {} as Track,
tracklist: [] as Track[],
}),
actions: {
play(index: number = 0) {
if (this.tracklist.length === 0) return;
this.current = index;
this.currentindex = index;
const track = this.tracklist[index];
this.currentid = track.trackid;
const uri = state.settings.uri + "/file/" + track.hash;
this.updateCurrent(index);
new Promise((resolve, reject) => {
audio.autoplay = true;
@@ -78,7 +74,7 @@ export default defineStore("Queue", {
NotifType.Error
);
if (this.current !== this.tracklist.length - 1) {
if (this.currentindex !== this.tracklist.length - 1) {
setTimeout(() => {
this.playNext();
}, 1000);
@@ -87,7 +83,7 @@ export default defineStore("Queue", {
},
playPause() {
if (audio.src === "") {
this.play(this.current);
this.play(this.currentindex);
} else if (audio.paused) {
audio.play();
this.playing = true;
@@ -97,10 +93,10 @@ export default defineStore("Queue", {
}
},
playNext() {
this.play(this.next);
this.play(this.nextindex);
},
playPrev() {
this.play(this.prev);
this.play(this.previndex);
},
seek(pos: number) {
try {
@@ -120,35 +116,6 @@ export default defineStore("Queue", {
this.tracklist = parsed.tracks;
}
},
updateCurrent(index: number) {
this.setCurrent(index);
this.updateNext(index);
this.updatePrev(index);
},
updateNext(index: number) {
if (index == this.tracklist.length - 1) {
this.next = 0;
return;
}
this.next = index + 1;
},
updatePrev(index: number) {
if (index === 0) {
this.prev = this.tracklist.length - 1;
return;
}
this.prev = index - 1;
},
setCurrent(index: number) {
const track = this.tracklist[index];
this.currenttrack = track;
this.current = index;
this.currentid = track?.trackid || null;
this.duration.full = track?.length || 0;
},
setNewQueue(tracklist: Track[]) {
if (this.tracklist !== tracklist) {
this.tracklist = [];
@@ -197,13 +164,11 @@ export default defineStore("Queue", {
},
addTrackToQueue(track: Track) {
this.tracklist.push(track);
// writeQueue(this.from, this.tracklist);
this.updateNext(this.current);
},
playTrackNext(track: Track) {
const Toast = useNotifStore();
const nextindex = this.current + 1;
const nextindex = this.currentindex + 1;
const next: Track = this.tracklist[nextindex];
// if track is already next, skip
@@ -214,14 +179,13 @@ export default defineStore("Queue", {
// if tracklist is empty or current track is last, push track
// else insert track after current track
if (this.current == this.tracklist.length - 1) {
if (this.currentindex == this.tracklist.length - 1) {
this.tracklist.push(track);
} else {
this.tracklist.splice(this.current + 1, 0, track);
this.tracklist.splice(this.currentindex + 1, 0, track);
}
// save queue
this.updateNext(this.current);
Toast.showNotification(
`Added ${track.title} to queue`,
NotifType.Success
@@ -230,7 +194,7 @@ export default defineStore("Queue", {
clearQueue() {
this.tracklist = [] as Track[];
this.currentid = "";
this.current, this.next, (this.prev = 0);
this.currentindex = 0;
this.from = <From>{};
},
shuffleQueue() {
@@ -243,34 +207,42 @@ export default defineStore("Queue", {
const shuffled = shuffle(this.tracklist);
this.tracklist = shuffled;
this.current = 0;
this.play(this.current);
this.currentindex = 0;
this.play(this.currentindex);
this.currentid = shuffled[0].trackid;
this.next = 1;
this.prev = this.tracklist.length - 1;
},
removeFromQueue(index: number = 0) {
this.tracklist.splice(index, 1);
},
},
getters: {
getNextTrack(): Track {
if (this.current == this.tracklist.length - 1) {
next(): Track {
if (this.currentindex == this.tracklist.length - 1) {
return this.tracklist[0];
} else {
return this.tracklist[this.current + 1];
return this.tracklist[this.currentindex + 1];
}
},
getPrevTrack(): Track {
if (this.current === 0) {
prev(): Track {
if (this.currentindex === 0) {
return this.tracklist[this.tracklist.length - 1];
} else {
return this.tracklist[this.current - 1];
return this.tracklist[this.currentindex - 1];
}
},
getCurrentTrack(): Track {
return this.tracklist[this.current];
currenttrack(): Track {
return this.tracklist[this.currentindex];
},
previndex(): number {
return this.currentindex === 0
? this.tracklist.length - 1
: this.currentindex - 1;
},
nextindex(): number {
return this.currentindex === this.tracklist.length - 1
? 0
: this.currentindex + 1;
},
},
persist: {