From e17ce855e39e2009b8bd490f2660b6519717b3b4 Mon Sep 17 00:00:00 2001 From: Raunak Raj <71929976+bajrangCoder@users.noreply.github.com> Date: Thu, 9 Jan 2025 20:45:06 +0530 Subject: [PATCH] fix: use Ref instead of querrySelector follow up #1136 --- src/components/audioPlayer/index.js | 104 +++++++++++++++++----------- 1 file changed, 62 insertions(+), 42 deletions(-) diff --git a/src/components/audioPlayer/index.js b/src/components/audioPlayer/index.js index 33b552dd0..ebc8c73f8 100644 --- a/src/components/audioPlayer/index.js +++ b/src/components/audioPlayer/index.js @@ -1,62 +1,80 @@ import "./style.scss"; +import Ref from "html-tag-js/ref"; export default class AudioPlayer { constructor(container) { this.container = container; this.audio = new Audio(); this.isPlaying = false; + this.elements = { + playBtn: new Ref(), + playIcon: new Ref(), + timeline: new Ref(), + progress: new Ref(), + progressHandle: new Ref(), + timeDisplay: new Ref(), + duration: new Ref(), + volumeBtn: new Ref(), + }; this.initializeUI(); this.initializeEvents(); this.cleanup = this.cleanup.bind(this); } initializeUI() { - const auidoPlayer = ( + const audioPlayer = (
- -
-
-
+
+
+
-
0:00
+
+ 0:00 +
- +
); - this.container.appendChild(auidoPlayer); + this.container.appendChild(audioPlayer); - this.elements = { - playBtn: this.container.querySelector(".play-btn"), - playIcon: this.container.querySelector(".play-btn .icon"), - timeline: this.container.querySelector(".timeline"), - progress: this.container.querySelector(".progress"), - progressHandle: this.container.querySelector(".progress-handle"), - timeDisplay: this.container.querySelector(".time"), - duration: this.container.querySelector(".duration"), - volumeBtn: this.container.querySelector(".volume-btn"), - }; - this.elements.volumeBtn.innerHTML = ` - - `; + this.elements.volumeBtn.el.innerHTML = ` + + `; } initializeEvents() { // Play/Pause - this.elements.playBtn.addEventListener("click", () => this.togglePlay()); + this.elements.playBtn.el.addEventListener("click", () => this.togglePlay()); // Timeline - this.elements.timeline.addEventListener("click", (e) => this.seek(e)); - this.elements.timeline.addEventListener("touchstart", (e) => this.seek(e)); + this.elements.timeline.el.addEventListener("click", (e) => this.seek(e)); + this.elements.timeline.el.addEventListener("touchstart", (e) => + this.seek(e), + ); // Volume - this.elements.volumeBtn.addEventListener("click", () => this.toggleMute()); + this.elements.volumeBtn.el.addEventListener("click", () => + this.toggleMute(), + ); // Audio events this.audio.addEventListener("timeupdate", () => this.updateProgress()); @@ -66,18 +84,18 @@ export default class AudioPlayer { togglePlay() { if (this.isPlaying) { this.audio.pause(); - this.elements.playIcon.classList.remove("pause"); - this.elements.playIcon.classList.add("play_arrow"); + this.elements.playIcon.el.classList.remove("pause"); + this.elements.playIcon.el.classList.add("play_arrow"); } else { this.audio.play(); - this.elements.playIcon.classList.remove("play_arrow"); - this.elements.playIcon.classList.add("pause"); + this.elements.playIcon.el.classList.remove("play_arrow"); + this.elements.playIcon.el.classList.add("pause"); } this.isPlaying = !this.isPlaying; } seek(e) { - const rect = this.elements.timeline.getBoundingClientRect(); + const rect = this.elements.timeline.el.getBoundingClientRect(); const pos = (e.type.includes("touch") ? e.touches[0].clientX : e.clientX) - rect.left; const percentage = pos / rect.width; @@ -86,9 +104,9 @@ export default class AudioPlayer { updateProgress() { const percentage = (this.audio.currentTime / this.audio.duration) * 100; - this.elements.progress.style.width = `${percentage}%`; - this.elements.progressHandle.style.left = `${percentage}%`; - this.elements.timeDisplay.textContent = this.formatTime( + this.elements.progress.el.style.width = `${percentage}%`; + this.elements.progressHandle.el.style.left = `${percentage}%`; + this.elements.timeDisplay.el.textContent = this.formatTime( this.audio.currentTime, ); } @@ -102,18 +120,18 @@ export default class AudioPlayer { toggleMute() { this.audio.muted = !this.audio.muted; if (this.audio.muted) { - this.elements.volumeBtn.innerHTML = + this.elements.volumeBtn.el.innerHTML = ''; } else { - this.elements.volumeBtn.innerHTML = + this.elements.volumeBtn.el.innerHTML = ''; } } audioEnded() { this.isPlaying = false; - this.elements.playIcon.classList.remove("pause"); - this.elements.playIcon.classList.add("play_arrow"); + this.elements.playIcon.el.classList.remove("pause"); + this.elements.playIcon.el.classList.add("play_arrow"); } loadTrack(src) { @@ -126,12 +144,14 @@ export default class AudioPlayer { this.audio.currentTime = 0; this.isPlaying = false; - this.elements.playBtn.removeEventListener("click", () => this.togglePlay()); - this.elements.timeline.removeEventListener("click", (e) => this.seek(e)); - this.elements.timeline.removeEventListener("touchstart", (e) => + this.elements.playBtn.el.removeEventListener("click", () => + this.togglePlay(), + ); + this.elements.timeline.el.removeEventListener("click", (e) => this.seek(e)); + this.elements.timeline.el.removeEventListener("touchstart", (e) => this.seek(e), ); - this.elements.volumeBtn.removeEventListener("click", () => + this.elements.volumeBtn.el.removeEventListener("click", () => this.toggleMute(), ); this.audio.removeEventListener("timeupdate", () => this.updateProgress());