refactor: improve audio and progress bar

dewanakl · Jan 5, 2025 · 3a9a139 · 3a9a139
1 parent 1351b7e
commit 3a9a139
Show file tree

Hide file tree

Showing 4 changed files with 46 additions and 12 deletions.
diff --git a/js/app.js b/js/app.js
@@ -5,7 +5,6 @@ import { comment } from './comment/comment.js';
 
 document.addEventListener('DOMContentLoaded', () => {
     guest.init();
-    window.AOS.init();
 
     window.util = util;
     window.guest = guest;

diff --git a/js/guest/audio.js b/js/guest/audio.js
@@ -15,42 +15,51 @@ export const audio = (() => {
     const statePlay = '<i class="fa-solid fa-circle-pause spin-button"></i>';
     const statePause = '<i class="fa-solid fa-circle-play"></i>';
 
+    /**
+     * @returns {Promise<void>}
+     */
     const play = async () => {
         music.disabled = true;
         try {
             await audio.play();
             isPlay = true;
+            music.disabled = false;
             music.innerHTML = statePlay;
         } catch (err) {
             isPlay = false;
             alert(err);
         }
-        music.disabled = false;
     };
 
+    /**
+     * @returns {void}
+     */
     const pause = () => {
         isPlay = false;
         audio.pause();
         music.innerHTML = statePause;
     };
 
+    /**
+     * @returns {void}
+     */
     const init = () => {
         music = document.getElementById('button-music');
 
         audio = new Audio(music.getAttribute('data-url'));
+        audio.volume = 1;
+        audio.loop = true;
+        audio.muted = false;
         audio.currentTime = 0;
         audio.autoplay = false;
-        audio.muted = false;
-        audio.loop = true;
-        audio.volume = 1;
         audio.controls = false;
 
+        play();
         music.addEventListener('offline', pause);
         music.addEventListener('click', () => isPlay ? pause() : play());
     };
 
     return {
         init,
-        play,
     };
 })();
diff --git a/js/guest/guest.js b/js/guest/guest.js
@@ -156,7 +156,6 @@ export const guest = (() => {
         opacity('welcome', 0.025);
 
         audio.init();
-        audio.play();
         theme.spyTop();
 
         util.timeOut(animation, 1500);
@@ -200,6 +199,7 @@ export const guest = (() => {
         theme.init();
         session.init();
         offline.init();
+        window.AOS.init();
 
         normalize();
         countDownDate();

diff --git a/js/guest/progress.js b/js/guest/progress.js
@@ -17,36 +17,60 @@ export const progress = (() => {
     let valid = true;
     let push = true;
 
+    /**
+     * @returns {void}
+     */
     const onComplete = () => {
         guest.name();
     };
 
+    /**
+     * @returns {void}
+     */
     const add = () => {
         if (push) {
             total += 1;
         }
     };
 
+    /**
+     * @returns {string}
+     */
+    const showInformation = () => {
+        return `(${loaded}/${total}) [${parseInt((loaded / total) * 100).toFixed(0)}%]`;
+    };
+
+    /**
+     * @param {string} type
+     * @returns {void}
+     */
     const complete = (type) => {
         if (!valid) {
             return;
         }
 
         loaded += 1;
+        info.innerText = `Loading ${type} complete ${showInformation()}`;
         bar.style.width = Math.min((loaded / total) * 100, 100).toString() + '%';
-        info.innerText = `Loading ${type} complete (${loaded}/${total}) [${parseInt((loaded / total) * 100).toFixed(0)}%]`;
 
         if (loaded === total) {
             onComplete();
         }
     };
 
+    /**
+     * @param {string} type
+     * @returns {void}
+     */
     const invalid = (type) => {
-        info.innerText = `Error loading ${type} (${loaded}/${total}) [${parseInt((loaded / total) * 100).toFixed(0)}%]`;
-        bar.style.backgroundColor = 'red';
         valid = false;
+        bar.style.backgroundColor = 'red';
+        info.innerText = `Error loading ${type} ${showInformation()}`;
     };
 
+    /**
+     * @returns {Promise<void>}
+     */
     const run = async () => {
         document.querySelectorAll('img').forEach((asset) => {
             asset.onerror = () => {
@@ -64,13 +88,15 @@ export const progress = (() => {
         });
     };
 
+    /**
+     * @returns {void}
+     */
     const init = () => {
-        document.querySelectorAll('img').forEach(add);
-
         info = document.getElementById('progress-info');
         bar = document.getElementById('progress-bar');
         info.style.display = 'block';
 
+        document.querySelectorAll('img').forEach(add);
         push = false;
         run();
     };