diff --git a/app/javascript/controllers/audio_player_controller.js b/app/javascript/controllers/audio_player_controller.js index 24c8ccc..fcb06b3 100644 --- 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 index 324c74a..23ddb69 100644 --- 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"); diff --git a/app/views/player/_player.erb b/app/views/player/_player.erb index 4d87eda..64f3e34 100644 --- a/app/views/player/_player.erb +++ b/app/views/player/_player.erb @@ -5,178 +5,202 @@ 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"> -<% -=begin %> -
- data-player-id-value="<%= track.id %>" - data-player-peaks-value="<%= track.peaks %>" - data-player-url-value="<%= track.mp3_audio.url %>" - <% end %> - class="flex"> - - <%= render "player/controls" %> - -
-
- - <% if local_assigns[:track] %> -
- <%= render "player/track_info", track: track %> -
- <% end %> + +
+ +
+ <% if @track.cover_url.present? %> + <%= image_tag @track.cover_url, alt: "#{@track.title} Cover Art", class: "w-12 h-12 rounded-md" %> + <% end %> +
- <%= render "player/sidebar" %> + +
-
-<% -=end -%> - -
- -
- <% if @track.cover.present? %> - <%= @track.title %> Cover Art - <% end %> - -
-
- <%= @track.title %> + + <%= @track.title %> +
-
- <%= link_to @track.user.username, user_path(@track.user.username) %> + +
+ <%= @track.user.username %>
+ +
+ + + +
- -
- - - - - - - - - -
- -
- -
- - - - -
+ + + +
+ +
+ 0:00 +
+
+
+
+ + 4:09 + +
+ + +
<% end %> diff --git a/app/views/shared/_user_menu.html.erb b/app/views/shared/_user_menu.html.erb index 1124631..d47538c 100644 --- a/app/views/shared/_user_menu.html.erb +++ b/app/views/shared/_user_menu.html.erb @@ -81,19 +81,21 @@
-
- <%= link_to product_cart_path, class: "text-white px-4 py-2 rounded-full flex items-center text-sm" do %> - - - - Cart - <% if cart_item_count > 0 %> - - <%= cart_item_count %> - + <% if cart_item_count > 0 %> +
+ <%= link_to product_cart_path, class: "text-white px-4 py-2 rounded-full flex items-center text-sm" do %> + + + + Cart + <% if cart_item_count > 0 %> + + <%= cart_item_count %> + + <% end %> <% end %> - <% end %> -
+
+ <% end %> <%= link_to "#", class: "hidden sm:block text-brand-600 block- px-4 py-2 text-sm", data: { action: 'click->dark-mode#toggle'