audio player fix, mobile view

rauversion · Sep 1, 2024 · f3e81f5 · f3e81f5
1 parent d6b5539
commit f3e81f5
Show file tree

Hide file tree

Showing 4 changed files with 213 additions and 182 deletions.
diff --git a/app/javascript/controllers/audio_player_controller.js b/app/javascript/controllers/audio_player_controller.js
@@ -58,16 +58,14 @@ export default class extends Controller {
     if (playPromise !== undefined) {
       playPromise
         .then(() => {
+          this.toggleIcons()
           // Automatic playback started!
-          this.playIconTarget.classList.toggle("hidden")
-          this.pauseIconTarget.classList.toggle("hidden")
         })
         .catch((error) => {
           // Auto-play was prevented
           console.error("Playback failed:", error);
           //this.playButton.textContent = "Play";
-          this.playIconTarget.classList.toggle("hidden")
-          this.pauseIconTarget.classList.toggle("hidden")
+          this.toggleIcons()
         });
     }
   }
@@ -76,13 +74,11 @@ export default class extends Controller {
     if (this.audio.paused) {
       this.audio.play();
       //this.playButton.textContent = "Pause";
-      this.playIconTarget.classList.toggle("hidden")
-      this.pauseIconTarget.classList.toggle("hidden")
+      this.toggleIcons()
     } else {
       this.audio.pause();
+      this.toggleIcons()
       //this.playButton.textContent = "Play";
-      this.playIconTarget.classList.toggle("hidden")
-      this.pauseIconTarget.classList.toggle("hidden")
     }
   }
 
@@ -159,6 +155,11 @@ export default class extends Controller {
     return `${minutes}:${secs < 10 ? "0" : ""}${secs}`;
   }
 
+  toggleIcons() {
+    this.playIconTargets.forEach((e)=> e.classList.toggle("hidden") )
+    this.pauseIconTargets.forEach((e)=> e.classList.toggle("hidden") )
+  }
+
   closeSidebar(){
     this.sidebarTarget.classList.add("hidden")
   }

diff --git a/app/javascript/controllers/marquee_controller.js b/app/javascript/controllers/marquee_controller.js
@@ -7,20 +7,24 @@ export default class extends Controller {
 
   }
 
-  marqueeTargetConected(element){
-
-    debugger
-    this.checkOverflow();
+  marqueeTargetConnected(element){
+    setTimeout(()=>{
+      this.checkOverflow()
+    }, 1000)
   }
 
   checkOverflow() {
     const marqueeElement = this.element
     const spanElement = marqueeElement.querySelector("span");
-    debugger
+
+    console.log("Span content:", spanElement.textContent);  // Check if content is present
+    console.log("Span scrollWidth:", spanElement.scrollWidth);  // Check scrollWidth
+    console.log("Span clientWidth:", marqueeElement.clientWidth);  // Check clientWidth
+
     if (spanElement.scrollWidth > marqueeElement.clientWidth) {
       // The text overflows, apply marquee animation
       const overflowDistance = spanElement.scrollWidth - marqueeElement.clientWidth;
-      const animationDuration = overflowDistance / 100; // Adjust speed by modifying the divisor (e.g., 100)
+      const animationDuration = 3 //overflowDistance / 100; // Adjust speed by modifying the divisor (e.g., 100)
 
       spanElement.style.animationDuration = `${animationDuration}s`;
       marqueeElement.classList.add("marquee-active");