Fix 404 not working on ios

js/404.js

@@ -12,9 +12,9 @@ document.title = `Star Logs - ${repo}`
 let fetchCommitMessagesPromise
 
 play.onclick = function() {
-  sounds.canPlayNext.then(() => {
-    sounds.play()
-    sounds.queueNext('/assets/theme.mp3')
+  sounds.canPlayNextTrack.then(() => {
+    sounds.startPlayingCurrentTrack()
+    sounds.queueNextTrack('/assets/theme.mp3')
 
     play.classList.add('zoomed')
 
@@ -25,9 +25,9 @@ play.onclick = function() {
 
 
 play.ontransitionend = function() {
-  Promise.all([fetchCommitMessagesPromise, sounds.canPlayNext]).then(([messages]) => {
+  Promise.all([fetchCommitMessagesPromise, sounds.canPlayNextTrack]).then(([messages]) => {
     if (messages) {
-      sounds.play()
+      sounds.startPlayingCurrentTrack()
       performCrawl(messages)
     } else {
       playErrorMessage(repo)

js/index.js

@@ -12,9 +12,9 @@ inputContainer.onkeydown = function (e) {
   if (e.key === 'Enter') {
     repo = inputContainer.querySelector('input').value
 
-    sounds.canPlayNext.then(() => {
-      sounds.play()
-      sounds.queueNext('/assets/theme.mp3')
+    sounds.canPlayNextTrack.then(() => {
+      sounds.startPlayingCurrentTrack()
+      sounds.queueNextTrack('/assets/theme.mp3')
 
       inputContainer.classList.add('zoomed')
 
@@ -36,13 +36,13 @@ window.onpopstate = function () {
 }
 
 inputContainer.ontransitionend = function() {
-  Promise.all([fetchCommitMessagesPromise, sounds.canPlayNext]).then(([messages]) => {
+  Promise.all([fetchCommitMessagesPromise, sounds.canPlayNextTrack]).then(([messages]) => {
     if (messages) {
       window.history.pushState({}, '', `/${repo}`)
       document.title = `Star Logs - ${repo}`
 
       performCrawl(messages)
-      sounds.play()
+      sounds.startPlayingCurrentTrack()
     } else {
       playErrorMessage(repo)
     }

js/performCrawl.js

@@ -42,7 +42,7 @@ function stopAutoScroll() {
 }
 
 function startAutoScroll() {
-  sounds.play()
+  sounds.startPlayingCurrentTrack()
   const scroll = () => {
     crawlContainer.scrollBy({ top: window.innerHeight > 1000 ? 2 : 1 })
     reqId = requestAnimationFrame(scroll)

js/playErrorMessage.js

@@ -5,11 +5,10 @@ import sounds from "./sounds.js";
  * @param {string} repo
  */
 export default function playErrorMessage(repo) {
-  sounds.queueNext('/assets/imperial_march.mp3').then(() => {
-    sounds.play()
+  sounds.startPlayingTrackNow('/assets/imperial_march.mp3').then(() => {
     performCrawl([
       '404',
-      `${repo} doesn't seem to be a github repository`,
+      `'${repo}' doesn't seem to be a github repository`,
       "E.g. 'artemave/starlogs'",
     ]);
   })

js/sounds.js

@@ -15,7 +15,7 @@ class Sounds {
       this.#audio.autoplay = true
     }
 
-    this.canPlayNext = new Promise((resolve) => {
+    this.canPlayNextTrack = new Promise((resolve) => {
       this.#audio.oncanplaythrough = resolve
     })
   }
@@ -34,23 +34,28 @@ class Sounds {
   /**
      * @param {string} path
      */
-  async queueNext(path) {
-    if (this.#audio.paused || this.#audio.ended) {
+  async queueNextTrack(path) {
+    this.#audio.onended = () => {
       this.#audio.src = path
-    } else {
-      this.#audio.onended = () => {
-        this.#audio.src = path
-      }
     }
 
-    this.canPlayNext = new Promise((resolve) => {
+    return this.canPlayNextTrack = new Promise((resolve) => {
       this.#audio.oncanplaythrough = resolve
     })
+  }
 
-    return this.canPlayNext
+  /**
+     * @param {string} path
+     */
+  async startPlayingTrackNow(path) {
+    this.#audio.src = path
+
+    return this.canPlayNextTrack = new Promise((resolve) => {
+      this.#audio.oncanplaythrough = resolve
+    })
   }
 
-  play() {
+  startPlayingCurrentTrack() {
     this.#audio.play()
   }
 }