tcsenpai/swingmusic
1
0
Fork 0
mirror of https://github.com/tcsenpai/swingmusic.git synced 2025-06-06 03:05:35 +00:00
Code Issues Packages Projects Releases Wiki Activity

add repeat functionality

Browse Source 
+ add "play next" context menu svg icon
+ handle focusing current track in sidebar queue on component mounted
This commit is contained in:
geoffrey45 2023-01-12 16:43:04 +03:00 committed by Mungai Njoroge
parent f8f3f7317e
commit 22da349948
10 changed files with 117 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/assets/icons/add-to-queue.svg Normal file
View File

@ -0,0 +1,4 @@
<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M3.02445 6.1448H25.1201C25.6925 6.1448 26.1638 5.68309 26.1638 5.11075C26.1638 4.53841 25.6925 4.0863 25.1201 4.0863H3.02445C2.45211 4.0863 2 4.53841 2 5.11075C2 5.68309 2.45211 6.1448 3.02445 6.1448ZM3.02445 12.2758H25.1201C25.6925 12.2758 26.1638 11.8216 26.1638 11.2493C26.1638 10.6769 25.6925 10.2152 25.1201 10.2152H3.02445C2.45211 10.2152 2 10.6769 2 11.2493C2 11.8216 2.45211 12.2758 3.02445 12.2758ZM16.8493 18.4144H25.1201C25.6925 18.4144 26.1638 17.9623 26.1638 17.3899C26.1638 16.8059 25.6925 16.3538 25.1201 16.3538H16.8493C16.2748 16.3538 15.8227 16.8059 15.8227 17.3899C15.8227 17.9623 16.2748 18.4144 16.8493 18.4144ZM16.8493 24.5529H25.1201C25.6925 24.5529 26.1638 24.1008 26.1638 23.5285C26.1638 22.9465 25.6925 22.4944 25.1201 22.4944H16.8493C16.2748 22.4944 15.8227 22.9465 15.8227 23.5285C15.8227 24.1008 16.2748 24.5529 16.8493 24.5529Z" fill="white"/>
<path d="M2.01172 16.5307V18.9767C2.01172 20.8306 3.22578 21.9134 5.07218 21.9134H8.22969V23.1195C8.22969 24.132 9.19531 24.51 9.97156 23.8807L13.314 21.188C13.8155 20.7919 13.8198 20.0881 13.314 19.6824L9.97156 17.0014C9.21664 16.403 8.22969 16.7715 8.22969 17.7563V18.9514H5.42069C5.12585 18.9514 4.97374 18.7779 4.97374 18.4927V16.5054C4.97374 15.5204 4.4014 14.8658 3.48687 14.8658C2.57445 14.8658 2.01172 15.495 2.01172 16.5307Z" fill="white"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.4 KiB

4
src/assets/icons/play-next.svg Normal file
View File

@ -0,0 +1,4 @@
<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M16.8493 6.0585H25.1201C25.6925 6.0585 26.1638 5.6064 26.1638 5.02445C26.1638 4.45211 25.6925 4 25.1201 4H16.8493C16.2748 4 15.8227 4.45211 15.8227 5.02445C15.8227 5.6064 16.2748 6.0585 16.8493 6.0585ZM16.8493 12.1991H25.1201C25.6925 12.1991 26.1638 11.747 26.1638 11.163C26.1638 10.5906 25.6925 10.1385 25.1201 10.1385H16.8493C16.2748 10.1385 15.8227 10.5906 15.8227 11.163C15.8227 11.747 16.2748 12.1991 16.8493 12.1991ZM3.02445 18.3376H25.1201C25.6925 18.3376 26.1638 17.8759 26.1638 17.3036C26.1638 16.7312 25.6925 16.277 25.1201 16.277H3.02445C2.45211 16.277 2 16.7312 2 17.3036C2 17.8759 2.45211 18.3376 3.02445 18.3376ZM3.02445 24.4666H25.1201C25.6925 24.4666 26.1638 24.0144 26.1638 23.4421C26.1638 22.8698 25.6925 22.408 25.1201 22.408H3.02445C2.45211 22.408 2 22.8698 2 23.4421C2 24.0144 2.45211 24.4666 3.02445 24.4666Z" fill="white"/>
<path d="M2.01172 12.0219C2.01172 13.0576 2.57445 13.6869 3.48687 13.6869C4.4014 13.6869 4.97374 13.0323 4.97374 12.0473V10.06C4.97374 9.77475 5.12585 9.60131 5.42069 9.60131H8.22969V10.7964C8.22969 11.7812 9.21664 12.1497 9.97156 11.5513L13.314 8.8703C13.8198 8.46459 13.8155 7.76077 13.314 7.36467L9.97156 4.67195C9.19531 4.04266 8.22969 4.4207 8.22969 5.43319V6.63929H5.07218C3.22578 6.63929 2.01172 7.7221 2.01172 9.576V12.0219Z" fill="white"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.4 KiB

4
src/assets/icons/repeat-one.svg Normal file
View File

@ -0,0 +1,4 @@
<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M2.20702 14.7471C2.90241 14.7471 3.40983 14.2376 3.40983 13.5401V12.4964C3.40983 10.466 4.78303 9.16615 6.93787 9.16615H13.1636V11.8715C13.1636 12.431 13.5018 12.7617 14.0666 12.7617C14.3219 12.7617 14.556 12.667 14.7508 12.5095L19.3471 8.67702C19.7929 8.30999 19.7983 7.74632 19.3471 7.36968L14.7508 3.52969C14.556 3.3743 14.3219 3.28711 14.0666 3.28711C13.5018 3.28711 13.1636 3.6082 13.1636 4.17937V6.81375H7.12115C3.38804 6.81375 1 8.88468 1 12.263V13.5401C1 14.2354 1.50203 14.7471 2.20702 14.7471ZM25.5676 13.6303C24.8626 13.6303 24.3627 14.1281 24.3627 14.8373V15.881C24.3627 17.9114 22.9916 19.1995 20.8251 19.1995H11.7646V16.5187C11.7646 15.9476 11.436 15.6265 10.8712 15.6265C10.6063 15.6265 10.3722 15.7115 10.1795 15.869L5.58109 19.7015C5.14703 20.0803 5.13953 20.644 5.58109 21.0089L10.1795 24.8489C10.3722 25.0064 10.6063 25.1011 10.8712 25.1011C11.436 25.1011 11.7646 24.7704 11.7646 24.2109V21.5636H20.6418C24.3845 21.5636 26.7725 19.4906 26.7725 16.1144V14.8373C26.7725 14.1323 26.263 13.6303 25.5676 13.6303Z" fill="white"/>
<path d="M25.6006 11.2024C26.3485 11.2024 26.8133 10.7639 26.8133 9.9621V4.4632C26.8133 3.58312 26.2154 3 25.3663 3C24.6831 3 24.2448 3.22242 23.7137 3.62695L22.1455 4.81172C21.8214 5.06156 21.7236 5.26898 21.7236 5.56031C21.7236 5.99624 22.048 6.31007 22.5151 6.31007C22.7256 6.31007 22.9065 6.25264 23.0799 6.10897L24.2621 5.16983H24.373V9.9621C24.373 10.7639 24.8474 11.2024 25.6006 11.2024Z" fill="white"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.5 KiB

2
src/assets/icons/repeat.svg
View File

@ -1,3 +1,3 @@
<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M4.12988 12.8984C4.12988 13.5049 4.62207 13.9971 5.22852 13.9971C5.84375 13.9971 6.32715 13.5049 6.32715 12.8984V12.3271C6.32715 10.8945 7.31152 9.97168 8.80566 9.97168H15.4062V11.8086C15.4062 12.3359 15.7402 12.6699 16.2764 12.6699C16.5137 12.6699 16.7334 12.582 16.9092 12.4414L20.3721 9.55859C20.8027 9.21582 20.7939 8.63574 20.3721 8.28418L16.9092 5.39258C16.7334 5.24316 16.5137 5.15527 16.2764 5.15527C15.7402 5.15527 15.4062 5.48926 15.4062 6.0166V7.80957H8.98145C6.00195 7.80957 4.12988 9.4707 4.12988 12.1162V12.8984ZM12.5938 15.3066C12.5938 14.7793 12.2598 14.4365 11.7324 14.4365C11.4951 14.4365 11.2666 14.5332 11.0908 14.6738L7.63672 17.5566C7.20605 17.8994 7.20605 18.4707 7.63672 18.8311L11.0908 21.7227C11.2666 21.8721 11.4951 21.96 11.7324 21.96C12.2598 21.96 12.5938 21.626 12.5938 21.0986V19.2969H19.0273C22.0068 19.2969 23.8701 17.627 23.8701 14.9902V14.208C23.8701 13.5928 23.3867 13.1006 22.7715 13.1006C22.165 13.1006 21.6729 13.5928 21.6729 14.208V14.7793C21.6729 16.2031 20.6973 17.1348 19.1943 17.1348H12.5938V15.3066Z" fill="#F2F2F2"/>
<path d="M2.20702 14.46C2.88131 14.46 3.40983 13.9294 3.40983 13.253V12.2093C3.40983 10.1789 4.78303 8.87904 6.93787 8.87904H15.9983V11.5844C15.9983 12.1439 16.3365 12.4746 16.9014 12.4746C17.1566 12.4746 17.4004 12.3799 17.5855 12.2224L22.1818 8.38991C22.6159 8.03249 22.633 7.45921 22.1818 7.08257L17.5855 3.24258C17.4004 3.08719 17.1566 3 16.9014 3C16.3365 3 15.9983 3.32109 15.9983 3.89226V6.52664H7.12115C3.38804 6.52664 1 8.59757 1 11.9758V13.253C1 13.9294 1.52101 14.46 2.20702 14.46ZM25.5676 13.3432C24.8816 13.3432 24.3627 13.8642 24.3627 14.5502V15.5939C24.3627 17.6243 22.9916 18.9124 20.8251 18.9124H11.7646V16.2316C11.7646 15.6605 11.436 15.3394 10.8712 15.3394C10.6063 15.3394 10.3722 15.4244 10.1795 15.5819L5.58109 19.4144C5.14703 19.7932 5.13953 20.3568 5.58109 20.7218L10.1795 24.5618C10.3722 24.7193 10.6063 24.8139 10.8712 24.8139C11.436 24.8139 11.7646 24.4832 11.7646 23.9238V21.2765H20.6418C24.3845 21.2765 26.7725 19.2035 26.7725 15.8273V14.5502C26.7725 13.8642 26.2419 13.3432 25.5676 13.3432Z" fill="white"/>
</svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.1 KiB

After

Width:  |  Height:  |  Size: 1.1 KiB

38
src/components/BottomBar.vue
View File

@ -25,6 +25,21 @@
@handleFav="handleFav"
/>
</button>
<button
class="repeat"
:class="{ 'repeat-disabled': settings.no_repeat }"
@click="settings.toggleRepeatMode"
:title="
settings.repeat_all
? 'Repeat all'
: settings.no_repeat
? 'No repeat'
: 'Repeat one'
"
>
<RepeatOneSvg v-if="settings.repeat_one" />
<RepeatAllSvg v-else />
</button>
</div>
<div class="info">
@ -72,17 +87,22 @@
import { Routes } from "@/router/routes";
import { paths } from "@/config";
import { formatSeconds } from "@/utils";
import { favType } from "@/composables/enums";
import favoriteHandler from "@/composables/favoriteHandler";
import useQStore from "@/stores/queue";
import useSettingsStore from "@/stores/settings";
import HotKeys from "@/components/LeftSidebar/NP/HotKeys.vue";
import Progress from "@/components/LeftSidebar/NP/Progress.vue";
import ArtistName from "@/components/shared/ArtistName.vue";
import useQStore from "@/stores/queue";
import HeartSvg from "./shared/HeartSvg.vue"; // import PlusSvg from "@/assets/icons/plus.svg";
import favoriteHandler from "@/composables/favoriteHandler";
import { favType } from "@/composables/enums";
import HeartSvg from "./shared/HeartSvg.vue";
import RepeatAllSvg from "@/assets/icons/repeat.svg";
import RepeatOneSvg from "@/assets/icons/repeat-one.svg";
const queue = useQStore();
const settings = useSettingsStore();
function handleFav() {
favoriteHandler(
@ -147,6 +167,16 @@ function handleFav() {
padding: 0;
border: none;
}
button.repeat {
svg {
transform: scale(0.75);
}
}
button.repeat.repeat-disabled {
opacity: 0.25;
}
}
img {

7
src/components/Contextmenu/ContextItem.vue
View File

@ -189,10 +189,15 @@ function runChildAction(action: () => void) {
background-image: url("../../assets/icons/plus.svg");
}
.add_to_queue {
.play_next {
background-image: url("../../assets/icons/add_to_queue.svg");
}
.add_to_queue {
background-image: url("../../assets/icons/add-to-queue.svg");
transform: scale(0.8); // reason: icon is not from same source as other
}
.heart {
background-image: url("../../assets/icons/heart.svg");
}

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

@ -61,6 +61,7 @@ function scrollToCurrent() {
onMounted(() => {
queue.setScrollFunction(scrollToCurrent, mouseover);
queue.focusCurrentInSidebar();
});
onBeforeUnmount(() => {

2
src/contexts/track_context.ts
View File

@ -92,7 +92,7 @@ export default async (
action: () => {
QueueStore().playTrackNext(track);
},
icon: "add_to_queue",
icon: "play_next",
};
const go_to_folder: Option = {

53
src/stores/queue.ts
View File

@ -6,6 +6,7 @@ import { NotifType, useNotifStore } from "./notification";
import { favType, FromOptions } from "../composables/enums";
import updateMediaNotif from "../composables/mediaNotification";
import { isFavorite } from "@/composables/fetch/favorite";
import useSettingsStore from "./settings";
import {
fromAlbum,
@ -51,13 +52,17 @@ export default defineStore("Queue", {
mousover: <Ref | null>null,
}),
actions: {
focusCurrentInSidebar(timeout = 500) {
if (!this.mousover) {
setTimeout(() => {
this.queueScrollFunction(this.currentindex - 1);
}, timeout);
}
},
play(index: number = 0) {
if (this.tracklist.length === 0) return;
this.currentindex = index;
if (!this.mousover) {
this.queueScrollFunction(this.currentindex - 1);
}
this.focusCurrentInSidebar();
const track = this.tracklist[index];
const uri = `${paths.api.files}/${track.trackhash}`;
@ -79,7 +84,7 @@ export default defineStore("Queue", {
};
audio.onended = () => {
this.playNext();
this.autoPlayNext();
};
});
})
@ -92,15 +97,14 @@ export default defineStore("Queue", {
if (this.currentindex !== this.tracklist.length - 1) {
setTimeout(() => {
if (!this.playing) return;
this.playNext();
this.autoPlayNext();
}, 5000);
}
});
},
stop() {
this.playing = false;
audio.src = "";
// audio.pause();
this.playing = false;
},
playPause() {
if (audio.src === "") {
@ -116,12 +120,28 @@ export default defineStore("Queue", {
audio.pause();
this.playing = false;
}
},
autoPlayNext() {
const settings = useSettingsStore();
const is_last = this.currentindex === this.tracklist.length - 1;
// if (this.playing) {
// this.playing = false;
// } else {
// this.playing = true;
// }
if (settings.repeat_one) {
this.play(this.currentindex);
return;
}
if (settings.repeat_all) {
this.play(is_last ? 0 : this.currentindex + 1);
return;
}
const resetQueue = () => {
this.currentindex = 0;
this.playing = false;
this.focusCurrentInSidebar();
};
!is_last ? this.play(this.currentindex + 1) : resetQueue();
},
playNext() {
this.play(this.nextindex);
@ -152,6 +172,13 @@ export default defineStore("Queue", {
this.tracklist = [];
this.tracklist.push(...tracklist);
}
const settings = useSettingsStore();
if (settings.repeat_one) {
settings.toggleRepeatMode();
}
this.focusCurrentInSidebar(1000);
},
playFromFolder(fpath: string, tracks: Track[]) {
console.log("play from folder");

22
src/stores/settings/index.ts
View File

@ -9,6 +9,8 @@ export default defineStore("settings", {
extend_width: false,
contextChildrenShowMode: contextChildrenShowMode.click,
artist_top_tracks_count: 5,
repeat_all: true,
repeat_one: false,
}),
actions: {
toggleUseNPImg() {
@ -29,11 +31,31 @@ export default defineStore("settings", {
? contextChildrenShowMode.hover
: contextChildrenShowMode.click;
},
toggleRepeatMode() {
if (this.repeat_all) {
this.repeat_all = false;
this.repeat_one = true;
return;
}
if (this.repeat_one) {
this.repeat_one = false;
this.repeat_all = false;
return;
}
if (!this.repeat_all && !this.repeat_one) {
this.repeat_all = true;
}
},
},
getters: {
can_extend_width(): boolean {
return xxl.value;
},
no_repeat(): boolean {
return !this.repeat_all && !this.repeat_one;
},
},
persist: true,
});