feat: random track playback, fix new tracks urls

.claude/settings.local.json

@@ -13,7 +13,8 @@
       "WebSearch",
       "WebFetch(domain:htmx.org)",
       "Bash(cat:*)",
-      "Bash(git remote:*)"
+      "Bash(git remote:*)",
+      "Bash(ls:*)"
     ],
     "deny": [],
     "ask": []

.gitignore

@@ -30,3 +30,6 @@ npm-debug.log*
 
 # Cache
 .cache/
+
+# Claude
+.claude/

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)

config/_default/hugo.toml

@@ -14,7 +14,7 @@ title = "Valknar's"
 
 [outputs]
   home = ["HTML", "RSS"]
-  section = ["HTML", "RSS"]
+  section = ["HTML", "RSS", "JSON"]
 
 [sitemap]
   changefreq = "weekly"

content/tracks/listen-to-your-heart/index.md

@@ -4,7 +4,7 @@ date: 2025-12-31
 draft: false
 description: "Roxette"
 
-audio: "https://pivoine.art/tracks/listen-to-your-heart/Listen To Your Heart.mp3"
+audio: "https://jellyfin.media.pivoine.art/Items/7665d067afb622eef70db5fa65ab8829/Download?api_key=8db4f88966fd4feb9308dfff68e9eeea"
 duration: "4:23"
 
 artist: "Valknar"

content/tracks/paule/index.md

@@ -4,7 +4,7 @@ date: 2025-12-31
 draft: false
 description: "Du Bisch"
 
-audio: "https://pivoine.art/tracks/paule/Paule.mp3"
+audio: "https://jellyfin.media.pivoine.art/Items/f1050f982226566de6ef11f4f2edbf33/Download?api_key=8db4f88966fd4feb9308dfff68e9eeea"
 duration: "0:31"
 
 artist: "Valknar"

content/tracks/rome/index.md

@@ -4,7 +4,7 @@ date: 2025-12-31
 draft: false
 description: "Honor Et Virtus"
 
-audio: "https://pivoine.art/tracks/rome/Rome.mp3"
+audio: "https://jellyfin.media.pivoine.art/Items/9f4b3b6e523b3488c850e2d50fbe157f/Download?api_key=8db4f88966fd4feb9308dfff68e9eeea"
 duration: "3:57"
 
 artist: "Valknar"

layouts/tracks/list.json.json

@@ -0,0 +1,18 @@
+{{- $tracks := slice -}}
+{{- range .Pages -}}
+  {{- $track := dict
+    "title" .Title
+    "url" .Permalink
+    "slug" .File.ContentBaseName
+    "audio" .Params.audio
+    "duration" .Params.duration
+    "genre" .Params.genre
+    "image" ""
+  -}}
+  {{- with .Resources.GetMatch "cover.*" -}}
+    {{- $img := .Resize "200x webp q85" -}}
+    {{- $track = merge $track (dict "image" $img.RelPermalink) -}}
+  {{- end -}}
+  {{- $tracks = $tracks | append $track -}}
+{{- end -}}
+{{- dict "tracks" $tracks | jsonify (dict "indent" "  ") -}}

static/css/main.css

@@ -907,14 +907,6 @@
       }
     }
   }
-  .hover\:grayscale-0 {
-    &:hover {
-      @media (hover: hover) {
-        --tw-grayscale: grayscale(0%);
-        filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
-      }
-    }
-  }
   .hover\:after\:w-full {
     &:hover {
       @media (hover: hover) {