diff --git a/app/javascript/controllers/marquee_controller.js b/app/javascript/controllers/marquee_controller.js index 23ddb69..17469fc 100644 --- a/app/javascript/controllers/marquee_controller.js +++ b/app/javascript/controllers/marquee_controller.js @@ -21,6 +21,9 @@ export default class extends Controller { console.log("Span scrollWidth:", spanElement.scrollWidth); // Check scrollWidth console.log("Span clientWidth:", marqueeElement.clientWidth); // Check clientWidth + const contentWidth = spanElement.scrollWidth; + const containerWidth = marqueeElement.clientWidth; + if (spanElement.scrollWidth > marqueeElement.clientWidth) { // The text overflows, apply marquee animation const overflowDistance = spanElement.scrollWidth - marqueeElement.clientWidth; @@ -28,6 +31,7 @@ export default class extends Controller { spanElement.style.animationDuration = `${animationDuration}s`; marqueeElement.classList.add("marquee-active"); + } else { // The text doesn't overflow, disable marquee marqueeElement.classList.remove("marquee-active"); diff --git a/app/javascript/controllers/track_player_controller.js b/app/javascript/controllers/track_player_controller.js index 39f70bc..333cc8e 100644 --- a/app/javascript/controllers/track_player_controller.js +++ b/app/javascript/controllers/track_player_controller.js @@ -42,7 +42,7 @@ export default class extends Controller { document.removeEventListener(`audio-process-${this.idValue}`, this.audioProcessListeners) document.removeEventListener(`audio-process-${this.idValue}-play`, this.audioProcessPlayListeners) document.removeEventListener(`audio-process-${this.idValue}-pause`, this.audioProcessPauseListeners) - document.removeEventListener(`audio-process-mouseup-${trackId}`, this.audioProcessPauseListeners) + document.removeEventListener(`audio-process-mouseup-${this.idValue}`, this.audioProcessPauseListeners) this.destroyWave() } diff --git a/app/views/player/_player.erb b/app/views/player/_player.erb index a8434ae..12a49c8 100644 --- a/app/views/player/_player.erb +++ b/app/views/player/_player.erb @@ -3,41 +3,59 @@ data-controller="audio-player" phx-hook="PlayerInitiator" data-audio-player-id-value="<%= track.id %>" - class="z-50 fixed bottom-0 w-full h-[6rem]-- py-2 bg-default border-t border-muted"> + class="z-50 fixed bottom-0 w-full h-[6rem]-- py-2 bg-transparent md:bg-default border-t- border-muted-"> -