From c65d3ea514221e03440dfc12739618ff9b25879c Mon Sep 17 00:00:00 2001
From: Baraa Al-Masri <pub@mbaraa.com>
Date: Thu, 4 Jul 2024 23:01:21 +0300
Subject: [PATCH 1/6] chore(player): update usages of audio player's source

---
 app/static/js/player.js | 23 +++++++++--------------
 1 file changed, 9 insertions(+), 14 deletions(-)

diff --git a/app/static/js/player.js b/app/static/js/player.js
index bf11835..c7dee08 100644
--- a/app/static/js/player.js
+++ b/app/static/js/player.js
@@ -217,10 +217,8 @@ function playPauser(audioEl) {
  */
 function stopper(audioEl) {
   return () => {
-    if (!audioEl.paused) {
-      audioEl.pause();
-      audioEl.currentTime = 0;
-    }
+    audioEl.pause();
+    audioEl.currentTime = 0;
     const songEl = document.getElementById(
       "song-" + playerState.playlist.songs[playerState.currentSongIdx].yt_id,
     );
@@ -265,7 +263,7 @@ function shuffler(state) {
     state.playlist.songs.push(...extraSongs);
     __shuffleArray(state.playlist.songs);
     let sIdx = 0;
-    if (!!audioPlayerEl.src) {
+    if (!!audioPlayerEl.childNodes.length) {
       sIdx = state.playlist.songs.findIndex((s) => s.yt_id === songYtId);
       if (sIdx !== -1) {
         [state.playlist.songs[sIdx], state.playlist.songs[0]] = [
@@ -280,11 +278,9 @@ function shuffler(state) {
   const __toggleShuffle = () => {
     state.shuffled = !state.shuffled;
     if (state.shuffled) {
+      const src = audioPlayerEl.childNodes.item(0);
       shuffle(
-        audioPlayerEl.src.substring(
-          audioPlayerEl.src.lastIndexOf("/") + 1,
-          audioPlayerEl.src.length - 4,
-        ),
+        src.src.substring(src.src.lastIndexOf("/") + 1, src.src.length - 4),
       );
     } else {
       const tmp = state.playlist.songs.sort((si, sj) => si.order - sj.order);
@@ -298,14 +294,12 @@ function shuffler(state) {
       if (tmp[tmp.length - 1].yt_id !== tmp[tmp.length - 2]) {
         state.playlist.songs.push(tmp[tmp.length - 1]);
       }
-      if (!!audioPlayerEl.src) {
+      if (!!src) {
+        console.log("src", src.src);
         state.currentSongIdx = state.playlist.songs.findIndex(
           (s) =>
             s.yt_id ===
-            audioPlayerEl.src.substring(
-              audioPlayerEl.src.lastIndexOf("/") + 1,
-              audioPlayerEl.src.length - 4,
-            ),
+            src.src.substring(src.src.lastIndexOf("/") + 1, src.src.length - 4),
         );
       }
     }
@@ -626,6 +620,7 @@ async function playSong(song) {
   }
   const src = document.createElement("source");
   src.src = `${location.protocol}//${location.host}/muzikkx/${song.yt_id}.mp3`;
+  src.target = "audio/mpeg";
   audioPlayerEl.appendChild(src);
 
   // song's details setting, yada yada

From 9beff28d98742e0e8295045a124b94c8e95439d3 Mon Sep 17 00:00:00 2001
From: Baraa Al-Masri <pub@mbaraa.com>
Date: Thu, 4 Jul 2024 23:18:26 +0300
Subject: [PATCH 2/6] fix(player): add initial mute to trick webkit

---
 app/static/js/player.js                  | 1 +
 app/views/components/player/player.templ | 1 +
 2 files changed, 2 insertions(+)

diff --git a/app/static/js/player.js b/app/static/js/player.js
index c7dee08..5808a56 100644
--- a/app/static/js/player.js
+++ b/app/static/js/player.js
@@ -185,6 +185,7 @@ function setLoading(loading, fallback) {
  */
 function playPauser(audioEl) {
   const __play = () => {
+    audioEl.muted = null;
     audioEl.play();
     const songEl = document.getElementById(
       "song-" + playerState.playlist.songs[playerState.currentSongIdx].yt_id,
diff --git a/app/views/components/player/player.templ b/app/views/components/player/player.templ
index cf4c0d1..35bb14f 100644
--- a/app/views/components/player/player.templ
+++ b/app/views/components/player/player.templ
@@ -36,6 +36,7 @@ templ PlayerSticky() {
 		id="audio-player"
 		controls
 		preload="none"
+		muted
 	></audio>
 	///
 	<style>

From 19ed36196bc9a04d5e01ea18cab834588325fa4b Mon Sep 17 00:00:00 2001
From: Baraa Al-Masri <pub@mbaraa.com>
Date: Thu, 4 Jul 2024 23:43:00 +0300
Subject: [PATCH 3/6] fix(player): add delay for just safari

---
 app/static/js/player.js | 17 ++++++++++-------
 1 file changed, 10 insertions(+), 7 deletions(-)

diff --git a/app/static/js/player.js b/app/static/js/player.js
index 5808a56..3f39818 100644
--- a/app/static/js/player.js
+++ b/app/static/js/player.js
@@ -621,9 +621,14 @@ async function playSong(song) {
   }
   const src = document.createElement("source");
   src.src = `${location.protocol}//${location.host}/muzikkx/${song.yt_id}.mp3`;
-  src.target = "audio/mpeg";
+  src.type = "audio/mpeg";
   audioPlayerEl.appendChild(src);
 
+  if (isSafari()) {
+    setTimeout(80);
+  }
+  audioPlayerEl.load();
+
   // song's details setting, yada yada
   {
     if (song.title) {
@@ -664,12 +669,6 @@ async function playSong(song) {
       songImageExpandedEl.innerHTML = "";
     }
   }
-  {
-    setTimeout(75);
-    audioPlayerEl.load();
-    setTimeout(75);
-    audioPlayerEl.load();
-  }
   setMediaSessionMetadata(song);
   playMuzikk();
   await updateSongPlays();
@@ -908,6 +907,10 @@ function setMediaSessionMetadata(song) {
   });
 }
 
+function isSafari() {
+  return navigator.userAgent.toLowerCase().includes("safari");
+}
+
 const [toggleLoop, handleLoop, checkLoop] = looper();
 const [playMuzikk, pauseMuzikk, togglePP] = playPauser(audioPlayerEl);
 const stopMuzikk = stopper(audioPlayerEl);

From 3bdafaa5972ea4ac9a036f8f6585a5f05a7a19cc Mon Sep 17 00:00:00 2001
From: Baraa Al-Masri <pub@mbaraa.com>
Date: Fri, 5 Jul 2024 02:27:44 +0300
Subject: [PATCH 4/6] fix(player): duration hack for safari

---
 app/static/js/player.js | 46 ++++++++++++++++++++++-------------------
 1 file changed, 25 insertions(+), 21 deletions(-)

diff --git a/app/static/js/player.js b/app/static/js/player.js
index 3f39818..6dcb191 100644
--- a/app/static/js/player.js
+++ b/app/static/js/player.js
@@ -620,8 +620,11 @@ async function playSong(song) {
     audioPlayerEl.removeChild(audioPlayerEl.childNodes.item(0));
   }
   const src = document.createElement("source");
-  src.src = `${location.protocol}//${location.host}/muzikkx/${song.yt_id}.mp3`;
-  src.type = "audio/mpeg";
+  src.setAttribute("type", "audio/mpeg");
+  src.setAttribute(
+    "src",
+    `${location.protocol}//${location.host}/muzikkx/${song.yt_id}.mp3`,
+  );
   audioPlayerEl.appendChild(src);
 
   if (isSafari()) {
@@ -971,6 +974,24 @@ loopExpandEl?.addEventListener("click", toggleLoop);
   }
 })();
 
+function setDuration(duration) {
+  if (Number.isNaN(duration) || !Number.isFinite(duration)) {
+    duration = 0;
+  }
+  songSeekBarEl.max = Math.ceil(duration);
+  songSeekBarEl.value = 0;
+  if (!!songSeekBarExpandedEl) {
+    songSeekBarExpandedEl.max = Math.ceil(duration);
+    songSeekBarExpandedEl.value = 0;
+  }
+  if (!!songDurationEl) {
+    songDurationEl.innerHTML = Utils.formatTime(duration);
+  }
+  if (!!songDurationExpandedEl) {
+    songDurationExpandedEl.innerHTML = Utils.formatTime(duration);
+  }
+}
+
 audioPlayerEl.addEventListener("loadeddata", (event) => {
   if (!!playPauseToggleEl) playPauseToggleEl.disabled = null;
   if (!!playPauseToggleExapndedEl) playPauseToggleExapndedEl.disabled = null;
@@ -983,31 +1004,14 @@ audioPlayerEl.addEventListener("loadeddata", (event) => {
   if (!!loopEl) loopEl.disabled = null;
   if (!!loopExpandEl) loopExpandEl.disabled = null;
 
-  // set duration AAA
-  {
-    let duration = event.target.duration;
-    if (isNaN(duration)) {
-      duration = 0;
-    }
-    songSeekBarEl.max = Math.ceil(duration);
-    songSeekBarEl.value = 0;
-    if (!!songSeekBarExpandedEl) {
-      songSeekBarExpandedEl.max = Math.ceil(duration);
-      songSeekBarExpandedEl.value = 0;
-    }
-    if (!!songDurationEl) {
-      songDurationEl.innerHTML = Utils.formatTime(duration);
-    }
-    if (!!songDurationExpandedEl) {
-      songDurationExpandedEl.innerHTML = Utils.formatTime(duration);
-    }
-  }
+  setDuration(event.target.duration);
 
   setLoading(false, Player.icons.pause);
 });
 
 audioPlayerEl.addEventListener("timeupdate", (event) => {
   const currentTime = Math.floor(event.target.currentTime);
+  setDuration(currentTime);
   if (songCurrentTimeEl) {
     songCurrentTimeEl.innerHTML = Utils.formatTime(currentTime);
   }

From d1c4d7aba3b3acf84c3d27bd86c3a1cc989e77fb Mon Sep 17 00:00:00 2001
From: Baraa Al-Masri <pub@mbaraa.com>
Date: Fri, 5 Jul 2024 02:31:09 +0300
Subject: [PATCH 5/6] feat(conf): add nginx configuration file

---
 nginx/dankmuzikk.conf | 23 +++++++++++++++++++++++
 1 file changed, 23 insertions(+)
 create mode 100644 nginx/dankmuzikk.conf

diff --git a/nginx/dankmuzikk.conf b/nginx/dankmuzikk.conf
new file mode 100644
index 0000000..8924a16
--- /dev/null
+++ b/nginx/dankmuzikk.conf
@@ -0,0 +1,23 @@
+server {
+	listen 80;
+	listen [::]:80;
+	server_name dankmuzikk.com;
+
+	location ~ ^/(.*)$ {
+		set $upstream http://127.0.0.1:20251;
+		proxy_read_timeout 180;
+		proxy_connect_timeout 180;
+		proxy_send_timeout 180;
+        # required headers for safari :)
+		proxy_set_header Connection "keep-alive";
+		proxy_set_header Range "bytes=0-";
+		proxy_set_header Icy-Metadata "0";
+		proxy_pass_request_headers on;
+		proxy_pass $upstream/$1$is_args$args;
+	}
+
+	location / {
+		proxy_pass http://127.0.0.1:20251;
+	}
+}
+

From 26922480e212ae94f2974bf2fbfe3d5d1dc3234a Mon Sep 17 00:00:00 2001
From: Baraa Al-Masri <pub@mbaraa.com>
Date: Fri, 5 Jul 2024 02:33:06 +0300
Subject: [PATCH 6/6] chore(player): add the max duation update for safari

---
 app/static/js/player.js | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/app/static/js/player.js b/app/static/js/player.js
index 6dcb191..60c58c5 100644
--- a/app/static/js/player.js
+++ b/app/static/js/player.js
@@ -1011,7 +1011,9 @@ audioPlayerEl.addEventListener("loadeddata", (event) => {
 
 audioPlayerEl.addEventListener("timeupdate", (event) => {
   const currentTime = Math.floor(event.target.currentTime);
-  setDuration(currentTime);
+  if (isSafari()) {
+    setDuration(currentTime);
+  }
   if (songCurrentTimeEl) {
     songCurrentTimeEl.innerHTML = Utils.formatTime(currentTime);
   }