From 226516aca48e97d3dc4e4df213bc2023e64b1afd Mon Sep 17 00:00:00 2001 From: Minteck Date: Sun, 27 Mar 2022 21:29:24 +0200 Subject: Initial commit --- js/frame.js | 25 ++++++ js/logging.js | 3 + js/navigation.js | 41 +++++++++ js/player.js | 255 +++++++++++++++++++++++++++++++++++++++++++++++++++++++ js/seekbar.js | 29 +++++++ 5 files changed, 353 insertions(+) create mode 100644 js/frame.js create mode 100644 js/logging.js create mode 100644 js/navigation.js create mode 100644 js/player.js create mode 100644 js/seekbar.js (limited to 'js') diff --git a/js/frame.js b/js/frame.js new file mode 100644 index 0000000..6f26e16 --- /dev/null +++ b/js/frame.js @@ -0,0 +1,25 @@ +_argonLoadedHooks.push(function ArgonStartupFrame() { + try { + log("Processing initial hash"); + original = location.hash.substring(1); + document.getElementById("frame-inner").src = "/_frame" + original; + } catch (e) { + console.error(e); + location.hash = ""; + } + + window.addEventListener('hashchange', () => { + log("Processing hash change"); + try { + original = location.hash.substring(1); + document.getElementById("frame-inner").src = "/_frame" + original; + } catch (e) { + console.error(e); + } + }); + + document.getElementById("frame-inner").addEventListener('load', () => { + log("Changing hash as per iframe URL"); + location.hash = document.getElementById("frame-inner").contentDocument.location.href.split(location.host)[1].substring(7); + }) +}) \ No newline at end of file diff --git a/js/logging.js b/js/logging.js new file mode 100644 index 0000000..86a96a3 --- /dev/null +++ b/js/logging.js @@ -0,0 +1,3 @@ +function log(message) { + console.log('%c[' + new Date().toISOString() + "]%c " + message, 'font-family: monospace; background: rgba(0, 0, 0);', 'opacity: 1;'); +} \ No newline at end of file diff --git a/js/navigation.js b/js/navigation.js new file mode 100644 index 0000000..acab550 --- /dev/null +++ b/js/navigation.js @@ -0,0 +1,41 @@ +_argonLoadedHooks.push(function ArgonStartupNavigation() { + ArgonNavigation = { + home: () => { + document.getElementById("frame-inner").contentWindow.location.href = "/_frame/home"; + }, + library: () => { + document.getElementById("frame-inner").contentWindow.location.href = "/_frame/library"; + }, + lyrics: () => { + document.getElementById("frame-inner").contentWindow.location.href = "/_frame/lyrics"; + }, + settings: () => { + document.getElementById("frame-inner").contentWindow.location.href = "/_frame/settings"; + }, + about: () => { + document.getElementById("frame-inner").contentWindow.location.href = "/_frame/about"; + }, + } + + setInterval(() => { + path = document.getElementById("frame-inner").contentWindow.location.pathname.substring(7); + + document.getElementById("navigation-home-icon").src = "/icons/home-off.svg"; + document.getElementById("navigation-library-icon").src = "/icons/library-off.svg"; + document.getElementById("navigation-lyrics-icon").src = "/icons/lyrics-off.svg"; + document.getElementById("navigation-settings-icon").src = "/icons/settings-off.svg"; + document.getElementById("navigation-about-icon").style.filter = ""; + + if (path.startsWith("/home")) { + document.getElementById("navigation-home-icon").src = "/icons/home-on.svg"; + } else if (path.startsWith("/library")) { + document.getElementById("navigation-library-icon").src = "/icons/library-on.svg"; + } else if (path.startsWith("/lyrics")) { + document.getElementById("navigation-lyrics-icon").src = "/icons/lyrics-on.svg"; + } else if (path.startsWith("/settings")) { + document.getElementById("navigation-settings-icon").src = "/icons/settings-on.svg"; + } else if (path.startsWith("/about")) { + document.getElementById("navigation-about-icon").style.filter = "brightness(200%)"; + } + }) +}) \ No newline at end of file diff --git a/js/player.js b/js/player.js new file mode 100644 index 0000000..2c73333 --- /dev/null +++ b/js/player.js @@ -0,0 +1,255 @@ +_argonLoadedHooks.push(function ArgonStartupPlayer() { + ArgonPlayer = { + _player: document.getElementById("argon-player"), + _current: null, + _seekbar: true, + _shuffle: false, + _repeat: false, + _endTriggered: false, + _preferredQualityRaw: "0", + _preferredQualityPreference: ["0"], + _currentQuality: null, + _qualityChangeTime: 0, + _qualityGoingDown: false, + + _end: () => { + if (ArgonPlayer._endTriggered) return; + + if (!ArgonPlayer._player.paused) { + ArgonPlayer._endTriggered = true; + + if (ArgonPlayer._repeat) { + ArgonPlayer._player.currentTime = 0; + ArgonPlayer._player.play().catch(e => { + console.error(e); + alert("An error occurred while trying to play this song. Please try again later."); + }).then(() => { + ArgonPlayer._endTriggered = false; + }); + } else { + ArgonPlayer.next(); + } + } + }, + + _qualityDown: () => { + if (ArgonPlayer._qualityGoingDown) return; + ArgonPlayer._qualityGoingDown = true; + + if (ArgonPlayer._currentQuality === "high") { + ArgonPlayer._setQualityTo("medium"); + } else if (ArgonPlayer._currentQuality === "medium") { + ArgonPlayer._setQualityTo("low"); + } else if (ArgonPlayer._currentQuality === "low") { + ArgonPlayer._setQualityTo("verylow"); + } else if (ArgonPlayer._currentQuality === "verylow") { + ArgonPlayer._setQualityTo("ultralow"); + } else if (ArgonPlayer._currentQuality === "ultralow") { + ArgonPlayer._setQualityTo("superlow"); + } else { + log("Quality is already as low as possible"); + } + }, + + _setQualityTo: (quality) => { + log("Resolving track " + ArgonPlayer._current + "..."); + ArgonPlayer._qualityChangeTime = ArgonPlayer._player.currentTime; + window.fetch("/api/get_audio_files.php?_=" + ArgonPlayer._current).then((a) => { + a.text().then((b) => { + let data = JSON.parse(b); + ArgonPlayer._currentQuality = quality; + ArgonPlayer._player.src = data[ArgonPlayer._currentQuality]; + log("Playing " + ArgonPlayer._current); + ArgonPlayer._player.play().catch(e => { + console.error(e); + alert("An error occurred while trying to play this song. Please try again later."); + }).then(() => { + ArgonPlayer._player.currentTime = ArgonPlayer._qualityChangeTime; + ArgonPlayer._endTriggered = false; + ArgonPlayer._qualityGoingDown = false; + }); + }); + }); + }, + + play: (song) => { + ArgonPlayer._current = song; + document.getElementById("player-artwork").src = ""; + + document.getElementById("player-artwork").src = "/api/get_image.php?_=" + ArgonPlayer._current; + document.getElementById("player-info-text-title").innerHTML = "" + _argonSongsData.songs[ArgonPlayer._current].name.replaceAll(">", ">") + ""; + if (_argonSongsData.songs[ArgonPlayer._current].set !== null && _argonSongsData.songs[ArgonPlayer._current].set !== undefined) { + document.getElementById("player-info-text-set").innerHTML = _argonSongsData.songs[ArgonPlayer._current].author.replaceAll("<", "<").replaceAll(">", ">") + " · " + _argonSongsData.songs[ArgonPlayer._current].set.name.replaceAll("<", "<").replaceAll(">", ">") + " · " + _argonSongsData.songs[ArgonPlayer._current].release.substring(0, 4).replaceAll("<", "<").replaceAll(">", ">"); + } else { + document.getElementById("player-info-text-set").innerText = _argonSongsData.songs[ArgonPlayer._current].author + " · " + _argonSongsData.songs[ArgonPlayer._current].release.substring(0, 4); + } + + log("Resolving track " + song + "..."); + window.fetch("/api/get_audio_files.php?_=" + song).then((a) => { + a.text().then((b) => { + let data = JSON.parse(b); + if (ArgonPlayer._preferredQualityPreference[0] === "2") { + ArgonPlayer._currentQuality = "originalpcm"; + } else if (ArgonPlayer._preferredQualityPreference[0] === "0") { + ArgonPlayer._currentQuality = "high"; + } else { + ArgonPlayer._currentQuality = ArgonPlayer._preferredQualityPreference[1]; + } + ArgonPlayer._player.src = data[ArgonPlayer._currentQuality]; + log("Playing " + song); + ArgonPlayer._player.play().catch(e => { + if (e.name !== "DOMException") { + console.error(e); + alert("An error occurred while trying to play this song. Please try again later."); + } + }).then(() => { + ArgonPlayer._endTriggered = false; + }); + }); + }); + }, + + shuffle: () => { + ArgonPlayer._shuffle = !ArgonPlayer._shuffle; + + if (ArgonPlayer._shuffle) { + document.getElementById("player-button-shuffle-icon").src = "/icons/shuffle-on.svg"; + } else { + document.getElementById("player-button-shuffle-icon").src = "/icons/shuffle-off.svg"; + } + }, + + repeat: () => { + ArgonPlayer._repeat = !ArgonPlayer._repeat; + + if (ArgonPlayer._repeat) { + document.getElementById("player-button-repeat-icon").src = "/icons/repeat-on.svg"; + } else { + document.getElementById("player-button-repeat-icon").src = "/icons/repeat-off.svg"; + } + }, + + _controls: () => { + ArgonPlayer._preferredQualityRaw = localStorage.getItem("quality") ?? "0"; + ArgonPlayer._preferredQualityPreference = (localStorage.getItem("quality") ?? localStorage.getItem("quality") ?? "0").split(":"); + + if (ArgonPlayer._current !== null) { + document.getElementById("player-inner").style.display = ""; + + if (!ArgonPlayer._player.paused) { + if (_argonSongsData.songs[ArgonPlayer._current].original !== null) { + document.title = _argonSongsData.songs[ArgonPlayer._current].author + " - " + _argonSongsData.songs[ArgonPlayer._current].name + " (" + _argonSongsData.songs[ArgonPlayer._current].original + " cover)"; + } else { + document.title = _argonSongsData.songs[ArgonPlayer._current].author + " - " + _argonSongsData.songs[ArgonPlayer._current].name + } + } else { + document.title = AppName; + } + + if (ArgonPlayer._player.currentTime >= ArgonPlayer._player.duration) { + ArgonPlayer._end(); + } + + if (ArgonPlayer._player.readyState === 0) { + document.getElementById("player-button-load").style.display = ""; + document.getElementById("player-button-pause").style.display = "none"; + document.getElementById("player-button-play").style.display = "none"; + document.getElementById("player-seekbar").disabled = true; + + document.getElementById("player-seekbar-elapsed").innerText = "-:--"; + document.getElementById("player-seekbar-total").innerText = "-:--"; + } else { + document.getElementById("player-seekbar").disabled = false; + + if (ArgonPlayer._repeat) { + ArgonPlayer._player.loop = true; + } + + if (ArgonPlayer._player.paused) { + document.getElementById("player-button-play").style.display = ""; + document.getElementById("player-button-pause").style.display = "none"; + document.getElementById("player-button-load").style.display = "none"; + } else { + document.getElementById("player-button-pause").style.display = ""; + document.getElementById("player-button-play").style.display = "none"; + document.getElementById("player-button-load").style.display = "none"; + } + + if (!ArgonPlayer._shuffle) { + if (_argonSongsData.sorted[_argonSongsData.sorted.indexOf(ArgonPlayer._current) + 1]) { + document.getElementById("player-button-next").classList.remove("player-button-disabled"); + } else { + document.getElementById("player-button-next").classList.add("player-button-disabled"); + } + + if (_argonSongsData.sorted[_argonSongsData.sorted.indexOf(ArgonPlayer._current) - 1]) { + document.getElementById("player-button-previous").classList.remove("player-button-disabled"); + } else { + document.getElementById("player-button-previous").classList.add("player-button-disabled"); + } + } else { + document.getElementById("player-button-previous").classList.remove("player-button-disabled"); + document.getElementById("player-button-next").classList.remove("player-button-disabled"); + } + + let current; + let total; + if (ArgonPlayer._player.duration >= 600) { + current = new Date(ArgonPlayer._player.currentTime * 1000).toISOString().substr(14, 5); + total = new Date(ArgonPlayer._player.duration * 1000).toISOString().substr(14, 5); + } else { + current = new Date(ArgonPlayer._player.currentTime * 1000).toISOString().substr(15, 4); + total = new Date(ArgonPlayer._player.duration * 1000).toISOString().substr(15, 4); + } + + document.getElementById("player-seekbar-elapsed").innerText = current; + document.getElementById("player-seekbar-total").innerText = total; + } + + if (ArgonPlayer._seekbar) { + document.getElementById("player-seekbar").max = ArgonPlayer._player.duration * 1000; + document.getElementById("player-seekbar").value = ArgonPlayer._player.currentTime * 1000; + } + } else { + document.title = AppName; + document.getElementById("player-inner").style.display = "none"; + } + }, + + next: () => { + if (!ArgonPlayer._shuffle) { + if (_argonSongsData.sorted[_argonSongsData.sorted.indexOf(ArgonPlayer._current) + 1]) { + ArgonPlayer.play(_argonSongsData.sorted[_argonSongsData.sorted.indexOf(ArgonPlayer._current) + 1]); + } + } else { + items = _argonSongsData.sorted.filter(i => i !== ArgonPlayer._current) + ArgonPlayer.play(items[Math.floor(Math.random() * items.length)]); + } + }, + + previous: () => { + if (!ArgonPlayer._shuffle) { + if (_argonSongsData.sorted[_argonSongsData.sorted.indexOf(ArgonPlayer._current) - 1]) { + ArgonPlayer.play(_argonSongsData.sorted[_argonSongsData.sorted.indexOf(ArgonPlayer._current) - 1]); + } + } else { + items = _argonSongsData.sorted.filter(i => i !== ArgonPlayer._current) + ArgonPlayer.play(items[Math.floor(Math.random() * items.length)]); + } + } + } + + setInterval(ArgonPlayer._controls); + setInterval(() => { + if (ArgonPlayer._current !== null) { + if (ArgonPlayer._player.readyState <= 2) { + if (ArgonPlayer._preferredQualityPreference[0] === "0") { + log("Quality is too high for network, reducing quality..."); + ArgonPlayer._qualityDown() + } else { + log("Quality is too high for network, settings does not allow reducing quality."); + } + } + } + }, 10000) +}) \ No newline at end of file diff --git a/js/seekbar.js b/js/seekbar.js new file mode 100644 index 0000000..afeb745 --- /dev/null +++ b/js/seekbar.js @@ -0,0 +1,29 @@ +_argonLoadedHooks.push(function ArgonStartupSeekbar() { + document.getElementById("player-seekbar").addEventListener('mousedown', () => { + log("Started seeking"); + ArgonPlayer._seekbar = false; + }); + + document.getElementById("player-seekbar").addEventListener('mouseup', () => { + log("Stopped seeking"); + ArgonPlayer._player.currentTime = document.getElementById("player-seekbar").value / 1000; + ArgonPlayer._seekbar = true; + }); + + document.getElementById("player-seekbar").addEventListener('touchstart', () => { + log("Started seeking"); + ArgonPlayer._seekbar = false; + }); + + document.getElementById("player-seekbar").addEventListener('touchend', () => { + log("Stopped seeking"); + ArgonPlayer._player.currentTime = document.getElementById("player-seekbar").value / 1000; + ArgonPlayer._seekbar = true; + }); + + document.getElementById("player-seekbar").addEventListener('touchcancel', () => { + log("Stopped seeking"); + ArgonPlayer._player.currentTime = document.getElementById("player-seekbar").value / 1000; + ArgonPlayer._seekbar = true; + }); +}) \ No newline at end of file -- cgit