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

major refactors

Browse Source
This commit is contained in:
geoffrey45
2022-03-30 14:56:40 +03:00
parent 1a19fb61cd
commit 0c1e792839
21 changed files with 164 additions and 322 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/composables/mediaNotification.js → src/composables/mediaNotification.ts
+19 -22
View File
@@ -1,41 +1,44 @@
import { Track } from "../interfaces.js";
import perks from "./perks.js";
import playAudio from "./playAudio.js";
let showMediaNotif = () => {
let current = perks.current.value;
export default (
track: Track,
playPause: () => void,
playNext: () => void,
playPrev: () => void
) => {
if ("mediaSession" in navigator) {
navigator.mediaSession.metadata = new window.MediaMetadata({
title: current.title,
artist: current.artists,
title: track.title,
artist: track.artists.join(", "),
artwork: [
{
src: current.image,
src: track.image,
sizes: "96x96",
type: "image/jpeg",
},
{
src: current.image,
src: track.image,
sizes: "128x128",
type: "image/webp",
},
{
src: current.image,
src: track.image,
sizes: "192x192",
type: "image/webp",
},
{
src: current.image,
src: track.image,
sizes: "256x256",
type: "image/webp",
},
{
src: current.image,
src: track.image,
sizes: "384x384",
type: "image/webp",
},
{
src: current.image,
src: track.image,
sizes: "512x512",
type: "image/webp",
},
@@ -43,22 +46,16 @@ let showMediaNotif = () => {
});
navigator.mediaSession.setActionHandler("play", function () {
playAudio.playPause();
playPause();
});
navigator.mediaSession.setActionHandler("pause", function () {
playAudio.playPause();
playPause();
});
navigator.mediaSession.setActionHandler("seekbackward", function () {});
navigator.mediaSession.setActionHandler("seekforward", function () {});
navigator.mediaSession.setActionHandler("previoustrack", function () {
playAudio.playPrev();
playPrev();
});
navigator.mediaSession.setActionHandler("nexttrack", function () {
playAudio.playNext();
playNext();
});
}
};
export default {
showMediaNotif,
};
src/composables/perks.js
+3 -114
View File
@@ -1,26 +1,3 @@
import { ref } from "@vue/reactivity";
import { watch } from "@vue/runtime-core";
import media from "./mediaNotification.js";
import playAudio from "./playAudio.js";
import state from "./state";
const current = ref(state.current);
const next = ref({
title: "The next song",
artists: ["... blah blah blah"],
image: "http://127.0.0.1:8900/images/defaults/4.webp",
_id: {
$oid: "",
},
});
const prev = ref(state.prev);
const queue = ref(state.queue);
const search = ref("");
const putCommas = (artists) => {
let result = [];
@@ -35,74 +12,6 @@ const putCommas = (artists) => {
return result;
};
function updateNext(song_) {
const index = state.queue.value.findIndex(
(item) => item.trackid === song_.trackid
);
if (index === queue.value.length - 1) {
next.value = queue.value[0];
state.prev.value = queue.value[queue.value.length - 2];
} else if (index === 0) {
next.value = queue.value[1];
} else {
next.value = queue.value[index + 1];
}
}
function updatePrev(song) {
const index = state.queue.value.findIndex(
(item) => item.trackid === song.trackid
);
if (index === 0) {
prev.value = queue.value[queue.value.length - 1];
} else if (index === queue.value.length - 1) {
prev.value = queue.value[index - 1];
} else {
prev.value = queue.value[index - 1];
}
}
const readQueue = () => {
const prev_queue = JSON.parse(localStorage.getItem("queue"));
const last_played = JSON.parse(localStorage.getItem("current"));
if (last_played) {
state.current.value = last_played;
}
if (prev_queue) {
state.queue.value = prev_queue;
updateNext(state.current.value);
updatePrev(state.current.value);
}
};
const updateQueue = async (song, type) => {
playAudio.playAudio(song.trackid);
let list;
switch (type) {
case "folder":
list = state.folder_song_list.value;
break;
case "album":
list = state.album.tracklist;
break;
}
if (state.queue.value[0].trackid !== list[0].trackid) {
const new_queue = list;
localStorage.setItem("queue", JSON.stringify(new_queue));
state.queue.value = new_queue;
}
state.current.value = song;
localStorage.setItem("current", JSON.stringify(song));
};
function focusCurrent() {
const elem = document.getElementsByClassName("currentInQueue")[0];
@@ -132,17 +41,6 @@ function focusSearchBox() {
elem.focus();
}
setTimeout(() => {
watch(current, (new_current) => {
media.showMediaNotif();
updateNext(new_current);
updatePrev(new_current);
localStorage.setItem("current", JSON.stringify(new_current));
});
}, 1000);
let key_down_fired = false;
window.addEventListener("keydown", (e) => {
@@ -161,7 +59,7 @@ window.addEventListener("keydown", (e) => {
key_down_fired = false;
}, 1000);
playAudio.playNext();
// playAudio.playNext();
}
}
break;
@@ -173,7 +71,7 @@ window.addEventListener("keydown", (e) => {
key_down_fired = true;
playAudio.playPrev();
// playAudio.playPrev();
setTimeout(() => {
key_down_fired = false;
@@ -190,7 +88,7 @@ window.addEventListener("keydown", (e) => {
e.preventDefault();
key_down_fired = true;
playAudio.playPause();
// playAudio.playPause();
}
}
@@ -212,8 +110,6 @@ window.addEventListener("keyup", () => {
key_down_fired = false;
});
function formatSeconds(seconds) {
// check if there are arguments
@@ -256,14 +152,7 @@ function formatSeconds(seconds) {
export default {
putCommas,
readQueue,
focusCurrent,
updateQueue,
formatSeconds,
getElem,
current,
queue,
next,
prev,
search,
};
src/composables/playAudio.js
-86
View File
@@ -1,86 +0,0 @@
import {ref} from "@vue/reactivity";
import perks from "./perks";
import media from "./mediaNotification.js";
import state from "./state";
const audio = ref(new Audio()).value;
const pos = ref(0);
const current_time = ref(0);
const playing = ref(state.is_playing);
const url = "http://127.0.0.1:9876//file/";
const playAudio = (trackid) => {
const elem = document.getElementById('progress');
const full_path = url + encodeURIComponent(trackid);
new Promise((resolve, reject) => {
audio.src = full_path;
audio.oncanplaythrough = resolve;
audio.onerror = reject;
})
.then(() => {
audio.play().then(() => {
perks.focusCurrent()
state.is_playing.value = true;
}
);
audio.ontimeupdate = () => {
current_time.value = audio.currentTime;
pos.value = (audio.currentTime / audio.duration) * 100;
let bg_size = ((audio.currentTime / audio.duration) * 100)
elem.style.backgroundSize = `${bg_size}% 100%`;
};
})
.catch((err) => console.log(err));
};
function playNext() {
playAudio(perks.next.value.trackid);
perks.current.value = perks.next.value;
media.showMediaNotif();
}
function playPrev() {
playAudio(state.prev.value.trackid);
perks.current.value = perks.prev.value;
}
function seek(position) {
audio.currentTime = (position / 100) * audio.duration;
}
function playPause() {
if (audio.src === "") {
playAudio(perks.current.value.trackid);
}
if (audio.paused) {
audio.play();
} else {
audio.pause();
}
}
audio.addEventListener("play", () => {
state.is_playing.value = true;
});
audio.addEventListener("pause", () => {
state.is_playing.value = false;
});
audio.addEventListener("ended", () => {
playNext();
});
export default {playAudio, playNext, playPrev, playPause, seek, pos, playing, current_time};
// TODO
// Try implementing classes to play audio .ie. Make the seek, playNext, playPrev, etc the methods of a class. etc