feat: random track playback, fix new tracks urls

assets/js/main.js

@@ -16,6 +16,53 @@ class AudioManager {
     this.source = null;
     this.frequencyData = null;
     this.isInitialized = false;
+    this.tracks = [];
+    this.autoplayEnabled = true;
+  }
+
+  async fetchTracks() {
+    if (this.tracks.length > 0) return this.tracks;
+
+    try {
+      const response = await fetch('/tracks/index.json');
+      if (!response.ok) {
+        throw new Error(`HTTP ${response.status}: ${response.statusText}`);
+      }
+      const data = await response.json();
+      this.tracks = data.tracks || [];
+    } catch (e) {
+      console.error('Failed to fetch tracks:', e);
+      this.tracks = [];
+    }
+    return this.tracks;
+  }
+
+  getRandomTrack(excludeUrl = null) {
+    const available = this.tracks.filter((t) => t.audio !== excludeUrl);
+    if (available.length === 0) return null;
+    return available[Math.floor(Math.random() * available.length)];
+  }
+
+  async playRandomTrack() {
+    await this.fetchTracks();
+
+    const currentUrl = window.Alpine?.store('audio')?.currentTrack?.url;
+    const nextTrack = this.getRandomTrack(currentUrl);
+
+    if (nextTrack) {
+      // Store pending track info for auto-play on page load
+      sessionStorage.setItem(
+        'pivoine-autoplay',
+        JSON.stringify({
+          title: nextTrack.title,
+          url: nextTrack.audio,
+          image: nextTrack.image
+        })
+      );
+
+      // Navigate to the new track page
+      window.location.href = nextTrack.url;
+    }
   }
 
   async init() {
@@ -46,6 +93,10 @@ class AudioManager {
         if (window.Alpine) {
           Alpine.store('audio').isPlaying = false;
         }
+        // Auto-play next random track
+        if (this.autoplayEnabled) {
+          this.playRandomTrack();
+        }
       });
 
       this.audio.addEventListener('play', () => {
@@ -135,6 +186,32 @@ if (!window.__pivoine) {
     logo: null
   };
 
+  // Check for auto-play from shuffle/random track
+  const checkAutoplay = () => {
+    const autoplayData = sessionStorage.getItem('pivoine-autoplay');
+    if (autoplayData) {
+      sessionStorage.removeItem('pivoine-autoplay');
+      try {
+        const track = JSON.parse(autoplayData);
+        // Update Alpine store
+        if (window.Alpine) {
+          Alpine.store('audio').currentTrack = track;
+        }
+        // Start playback
+        audioManager.play(track.url);
+      } catch (e) {
+        console.error('Failed to auto-play track:', e);
+      }
+    }
+  };
+
+  // Run autoplay check after Alpine is ready
+  document.addEventListener('alpine:initialized', checkAutoplay);
+  // Fallback if Alpine is already initialized
+  if (window.Alpine) {
+    setTimeout(checkAutoplay, 100);
+  }
+
   // Initialize WebGL components after DOM is ready
   const initWebGL = () => {
     // Main visualizer (fullscreen background)