audio player, auto play

TODO.md

@@ -1,5 +1,8 @@
 TODO:
 
+  + links in article internal to playlists
+  + player do disable play at page load!
+  + 
   + player
     + sidebar show selected
 

app/javascript/controllers/audio_player_controller.js

@@ -16,6 +16,13 @@ export default class extends Controller {
     "sidebar"
   ];
 
+  static values = {
+    id: Number,
+    url: String,
+    peaks: String,
+    height: Number,
+  }
+
   connect() {
     this.audio = this.audioTarget;
     this.playButton = this.playButtonTarget;
@@ -25,7 +32,6 @@ export default class extends Controller {
     this.volumeSlider = this.volumeSliderTarget;
     this.volumeOnIcon = this.volumeOnIconTarget;
     this.volumeOffIcon = this.volumeOffIconTarget;
-
     this.audio.addEventListener("timeupdate", this.updateProgress.bind(this));
     this.audio.addEventListener("loadedmetadata", this.updateDuration.bind(this));
 
@@ -40,6 +46,12 @@ export default class extends Controller {
   }
 
   autoPlay() {
+
+    // check if at attribute is provided, if not, do not do autoplay
+    if(!this.audio.dataset.ap){ 
+      console.log("Skip AutoPlay")
+      return 
+    }
     // Show loading animation (optional)
     const playPromise = this.audio.play();
 
@@ -132,7 +144,6 @@ export default class extends Controller {
     .catch(error => console.error("Error tracking event:", error));
   }
 
-
   updateDuration() {
     this.duration.textContent = this.formatTime(this.audio.duration);
   }

app/javascript/controllers/marquee_controller.js

@@ -4,13 +4,20 @@ export default class extends Controller {
   static targets = ["marquee"];
 
   connect() {
+
+  }
+
+  marqueeTargetConected(element){
+
+    debugger
     this.checkOverflow();
   }
 
   checkOverflow() {
     const marqueeElement = this.element
     const spanElement = marqueeElement.querySelector("span");
-    if (true) { //(spanElement.scrollWidth > marqueeElement.clientWidth) {
+    debugger
+    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)
@@ -20,7 +27,8 @@ export default class extends Controller {
     } else {
       // The text doesn't overflow, disable marquee
       marqueeElement.classList.remove("marquee-active");
-      spanElement.style.animation = "none"; // Disable animation if not overflowing
+      // spanElement.style.animation = "none"; // Disable animation if not overflowing
     }
   }
+
 }

app/views/player/_player.erb

@@ -2,6 +2,7 @@
   <div id="main-player"
     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">
 
 <%
@@ -50,7 +51,7 @@
     <div class="text-white">
       <div class="font-semibold text-sm w-[129px] truncate" 
         data-controller="marquee">
-        <span><%= @track.title %></span>
+        <span data-marquee-target="marquee"><%= @track.title %></span>
       </div>
       <div class="text-xs text-gray-400 truncate w-48">
         <%= link_to @track.user.username, user_path(@track.user.username) %>
@@ -102,14 +103,14 @@
       </svg>
     </button>
 
-    <%= link_to player_url(id: Track.where("id < ?", @track.id).order(id: :desc).first&.id ),  class: "text-white" do %>
+    <button class="text-white" data-action="click->audio-player#nextSong">
       <!-- next -->
       <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" 
         viewBox="0 0 24 24" fill="none" stroke="currentColor" 
         stroke-width="2" stroke-linecap="round" stroke-linejoin="round" 
         class="lucide lucide-chevron-right"><path d="m9 18 6-6-6-6"/>
       </svg>
-    <% end %>
+    </button>
 
     <button class="text-white">
       <!-- loop -->
@@ -168,7 +169,8 @@
 </div>
 
 <!-- Audio Element -->
-<audio data-audio-player-target="audio" 
+<audio data-audio-player-target="audio"
+  <%= params[:t] ? "data-ap=true" : "" %>
   src="<%= track.mp3_audio.url %>" 
   data-track-id="<%= track.slug %>" 
   id="audioElement">