feat: audio from jellyfin

_data/sounds.yml

@@ -3,68 +3,101 @@
   artist: Valknar
   title: Hyperloop
   tracks:
-    - Hyperloop I.mp3
-    - Hyperloop II.mp3
-    - Hyperloop III.mp3
-    - Hyperloop IV.mp3
-    - Hyperloop IX.mp3
-    - Hyperloop V.mp3
-    - Hyperloop VI.mp3
-    - Hyperloop VII.mp3
-    - Hyperloop VIII.mp3
-    - Hyperloop X.mp3
-    - Hyperloop XI.mp3
-    - Hyperloop XII.mp3
-    - Hyperloop.mp3
+    - title: Hyperloop I
+      url: https://jellyfin.media.pivoine.art/Items/46b9e3ae1e940df1dfdfd735556552d3/Download?api_key=53d58826a49b4026a815d13db5e38ff7
+    - title: Hyperloop II
+      url: https://jellyfin.media.pivoine.art/Items/9e33b9dad8badd9d547091ae87628e6c/Download?api_key=53d58826a49b4026a815d13db5e38ff7
+    - title: Hyperloop III
+      url: https://jellyfin.media.pivoine.art/Items/f6dd08a8ff227328e2d1491c9196d4f9/Download?api_key=53d58826a49b4026a815d13db5e38ff7
+    - title: Hyperloop IV
+      url: https://jellyfin.media.pivoine.art/Items/aa6f40d03f982e5e520634bb50fc6275/Download?api_key=53d58826a49b4026a815d13db5e38ff7
+    - title: Hyperloop IX
+      url: https://jellyfin.media.pivoine.art/Items/a8b7919e0ee2bdf260369c1d1219cd20/Download?api_key=53d58826a49b4026a815d13db5e38ff7
+    - title: Hyperloop V
+      url: https://jellyfin.media.pivoine.art/Items/5d36d48f33d9a3138940f271f22a4729/Download?api_key=53d58826a49b4026a815d13db5e38ff7
+    - title: Hyperloop VI
+      url: https://jellyfin.media.pivoine.art/Items/168b4c8ac0c3062348fec2929e1ebf57/Download?api_key=53d58826a49b4026a815d13db5e38ff7
+    - title: Hyperloop VII
+      url: https://jellyfin.media.pivoine.art/Items/2d87945379960133e08a8a1077b3bc7b/Download?api_key=53d58826a49b4026a815d13db5e38ff7
+    - title: Hyperloop VIII
+      url: https://jellyfin.media.pivoine.art/Items/48896c69d5c0330772f0ffec77390097/Download?api_key=53d58826a49b4026a815d13db5e38ff7
+    - title: Hyperloop X
+      url: https://jellyfin.media.pivoine.art/Items/1dd63ac01b3376223ecfa8dbdf90ff86/Download?api_key=53d58826a49b4026a815d13db5e38ff7
+    - title: Hyperloop XI
+      url: https://jellyfin.media.pivoine.art/Items/1dbe70cbce104eea3d979fbd42f042e0/Download?api_key=53d58826a49b4026a815d13db5e38ff7
+    - title: Hyperloop XII
+      url: https://jellyfin.media.pivoine.art/Items/655636972180c6110592cb052204f2bf/Download?api_key=53d58826a49b4026a815d13db5e38ff7
+    - title: Hyperloop
+      url: https://jellyfin.media.pivoine.art/Items/60a07b3fc0e0a6e632fb9198df5d43bc/Download?api_key=53d58826a49b4026a815d13db5e38ff7
 -
   slug: massive
   artist: Valknar
   title: Massive
   tracks:
-    - Massive.mp3
-    - Sudden Death.mp3
-    - Strength And Honour.mp3
-    - Drums Of War.mp3
-    - Drums Of War (Remix).mp3
-    - Massive (Remix).mp3
-    - The Moon (Remix).mp3
+    - title: Massive
+      url: https://jellyfin.media.pivoine.art/Items/4c696ae488e5fa5301b894787f2b927c/Download?api_key=53d58826a49b4026a815d13db5e38ff7
+    - title: Sudden Death
+      url: https://jellyfin.media.pivoine.art/Items/8de46aaa2f2293ee97dd7a95f211c510/Download?api_key=53d58826a49b4026a815d13db5e38ff7
+    - title: Strength And Honour
+      url: https://jellyfin.media.pivoine.art/Items/07868b2f6f161febe8e783981e0d33e1/Download?api_key=53d58826a49b4026a815d13db5e38ff7
+    - title: Drums Of War
+      url: https://jellyfin.media.pivoine.art/Items/7abe3c62c30a405ab46d0c3902890588/Download?api_key=53d58826a49b4026a815d13db5e38ff7
+    - title: Drums Of War (Remix)
+      url: https://jellyfin.media.pivoine.art/Items/8087b44ef3221960a93f4fac2fc56d0b/Download?api_key=53d58826a49b4026a815d13db5e38ff7
+    - title: Massive (Remix)
+      url: https://jellyfin.media.pivoine.art/Items/c0f4cf1e9fffa5f2e5fc790fb1f991c6/Download?api_key=53d58826a49b4026a815d13db5e38ff7
+    - title: The Moon (Remix)
+      url: https://jellyfin.media.pivoine.art/Items/d91333f9c7c4d8251174c86a81588cbd/Download?api_key=53d58826a49b4026a815d13db5e38ff7
 -
   slug: pass-the-glock
-  artist: Terror Squad
+  artist: Valknar
   title: Pass The Glock
   tracks:
-    - Pass The Glock - Bulletproof Remix.mp3
+    - title: Pass The Glock - Bulletproof Remix
+      url: https://jellyfin.media.pivoine.art/Items/746863ccdc1f6779f1e86be243fcdbc0/Download?api_key=53d58826a49b4026a815d13db5e38ff7
 -
   slug: detroit
   artist: Valknar
   title: Detroit
   tracks:
-    - Detroit I.mp3
-    - Detroit II.mp3
-    - Detroit III.mp3
-    - Detroit IV.mp3
-    - Detroit V.mp3
-    - Detroit VI.mp3
-    - Detroit VII.mp3
-    - Detroit VIII.mp3
+    - title: Detroit I
+      url: https://jellyfin.media.pivoine.art/Items/ed31620e103e4f32861155f43dd05367/Download?api_key=53d58826a49b4026a815d13db5e38ff7
+    - title: Detroit II
+      url: https://jellyfin.media.pivoine.art/Items/48da9ea7efc2f42537e109e0898c1f38/Download?api_key=53d58826a49b4026a815d13db5e38ff7
+    - title: Detroit III
+      url: https://jellyfin.media.pivoine.art/Items/f1d8bef1053e6f122c484c75354576cf/Download?api_key=53d58826a49b4026a815d13db5e38ff7
+    - title: Detroit IV
+      url: https://jellyfin.media.pivoine.art/Items/b7114460481fbf45376e842b52c242b3/Download?api_key=53d58826a49b4026a815d13db5e38ff7
+    - title: Detroit V
+      url: https://jellyfin.media.pivoine.art/Items/4fff631bf596532efa73eb4bad3b7e54/Download?api_key=53d58826a49b4026a815d13db5e38ff7
+    - title: Detroit VI
+      url: https://jellyfin.media.pivoine.art/Items/fbf23642dd30dd561ad950967e684fc5/Download?api_key=53d58826a49b4026a815d13db5e38ff7
+    - title: Detroit VII
+      url: https://jellyfin.media.pivoine.art/Items/cef32c01be565016f576e0fa1dfd815b/Download?api_key=53d58826a49b4026a815d13db5e38ff7
+    - title: Detroit VIII
+      url: https://jellyfin.media.pivoine.art/Items/4002348ba445a02db3b48cd9e1562936/Download?api_key=53d58826a49b4026a815d13db5e38ff7
 -
   slug: stuttgart
   artist: Valknar
   title: Stuttgart
   tracks:
-    - Stuttgart.mp3
-    - Stuttgart (Remix).mp3
+    - title: Stuttgart
+      url: https://jellyfin.media.pivoine.art/Items/400f2e423eaf3bdfb91f2c9eed0a85e2/Download?api_key=53d58826a49b4026a815d13db5e38ff7
+    - title: Stuttgart (Remix)
+      url: https://jellyfin.media.pivoine.art/Items/3558cde2c3eedf4fc1300340bac94406/Download?api_key=53d58826a49b4026a815d13db5e38ff7
 
 -
   slug: changed-her-mind-again
-  artist: Cold Stares
+  artist: Valknar
   title: Changed Her Mind Again... - Breaks Remix
   tracks:
-    - Changed Her Mind Again... - Breaks Remix.mp3
+    - title: Changed Her Mind Again... - Breaks Remix
+      url: https://jellyfin.media.pivoine.art/Items/ebd4e9f45b9dda1cada560af5e6cb7a8/Download?api_key=53d58826a49b4026a815d13db5e38ff7
 -
   slug: shadow
   artist: Valknar
   default: true
   title: Shadow
   tracks:
-    - Shadow.mp3
+    - title: Shadow
+      url: https://jellyfin.media.pivoine.art/Items/aada4e4ac0320e258595976a9edb6a09/Download?api_key=53d58826a49b4026a815d13db5e38ff7

_includes/components/post.html

@@ -75,12 +75,12 @@ hide_posted_in = include.hide_posted_in %}
         {% for track in sounds.first.tracks %}
         <tr>
           <td style="text-align: left">
-            <a class="sound-item" href="/assets/sounds/{{ page.sound }}/{{ track }}" target="_blank">
-              {{ sounds.first.artist }} - {{ track | replace: ".mp3", "" }}
+            <a class="sound-item" href="{{ track.url }}" target="_blank">
+              {{ sounds.first.artist }} - {{ track.title }}
             </a>
           </td>
           <td style="text-align: right">
-            <a download href="/assets/sounds/{{ page.sound }}/{{ track }}" target="_blank">
+            <a download href="{{ track.url }}" target="_blank">
               {{ site.data.strings.download }}
             </a>
           </td>

_js/src/sound.js

@@ -1,19 +1,14 @@
-import { fromEvent } from "rxjs";
-import { webComponentsReady, stylesheetReady } from "./common.js";
-import { Wave } from "@foobar404/wave";
+import { fromEvent } from 'rxjs';
+import { webComponentsReady, stylesheetReady } from './common.js';
+import { Wave } from '@foobar404/wave';
 
 (async () => {
   await Promise.all([
-		...("customElements" in window
+    ...('customElements' in window
       ? []
       : [
-					import(
-						/* webpackChunkName: "webcomponents" */ "./polyfills/webcomponents.js"
-					).then(
-						() =>
-							import(
-								/* webpackChunkName: "shadydom" */ "./polyfills/shadydom.js"
-							),
+          import(/* webpackChunkName: "webcomponents" */ './polyfills/webcomponents.js').then(() =>
+            import(/* webpackChunkName: "shadydom" */ './polyfills/shadydom.js'),
           ),
         ]),
   ]);
@@ -21,86 +16,94 @@ import { Wave } from "@foobar404/wave";
   await webComponentsReady;
   await stylesheetReady;
 
-	const sound = document.querySelector(".sound-player");
+  const sound = document.querySelector('.sound-player');
 
   if (!sound) return;
 
-	const fallback = JSON.parse(sound.getAttribute("data-featured"));
+  const fallback = JSON.parse(sound.getAttribute('data-featured'));
   let featured = fallback;
   let currentIndex = undefined;
 
-	const randomTrackIndex = () =>
-		Math.floor(Math.random() * (featured.tracks.length - 1));
+  const randomTrackIndex = () => Math.floor(Math.random() * (featured.tracks.length - 1));
 
   const updateTrack = (index, active) => {
     if (index != null) {
       const track = featured.tracks[index];
-			audioElement.setAttribute(
-				"src",
-				`/assets/sounds/${featured.slug}/${track}`,
-			);
+      audioElement.setAttribute('src', track.url);
       currentIndex = index;
     }
 
     if (active) {
       const track = featured.tracks[currentIndex];
-			buttonElement.textContent = `[ ${track.substring(0, track.lastIndexOf("."))} ]`;
+      buttonElement.textContent = `[ ${track.title} ]`;
       audioElement.play();
-			canvasElement.classList.remove("hidden");
+      canvasElement.classList.remove('hidden');
     } else {
-			buttonElement.textContent = "[ SOUND ON ]";
+      buttonElement.textContent = '[ SOUND ON ]';
       audioElement.pause();
-			canvasElement.classList.add("hidden");
+      canvasElement.classList.add('hidden');
     }
   };
 
   const updateSound = () => {
-		const sound = document.querySelector(".sound-wrapper");
+    const sound = document.querySelector('.sound-wrapper');
 
     if (!sound) return;
 
-		featured = JSON.parse(sound.getAttribute("data-featured"));
+    featured = JSON.parse(sound.getAttribute('data-featured'));
     updateTrack(0, !audioElement.paused);
 
-		const buttons = document.querySelectorAll(".sound-wrapper .sound-item");
+    const buttons = document.querySelectorAll('.sound-wrapper .sound-item');
     buttons.forEach((button, i) => {
-			fromEvent(button, "click").subscribe((event) => {
+      fromEvent(button, 'click').subscribe((event) => {
         event.preventDefault();
         updateTrack(i, true);
       });
     });
   };
 
-	const audioElement = document.querySelector(".sound-player audio");
-	const buttonElement = document.querySelector(".sound-player a");
-	const canvasElement = document.querySelector(".sound-player canvas");
-	const pushStateEl = document.querySelector("hy-push-state");
+  const audioElement = document.querySelector('.sound-player audio');
+  audioElement.crossOrigin = 'anonymous';
+  const buttonElement = document.querySelector('.sound-player a');
+  const canvasElement = document.querySelector('.sound-player canvas');
+  const pushStateEl = document.querySelector('hy-push-state');
   const wave = new Wave(audioElement, canvasElement);
 
   wave.addAnimation(
     new wave.animations.Arcs({
       lineColor: {
         gradient: [
-				  "#ce275b", "#cc2269", "#c82176", "#c22484", "#ba2a91", "#af329e", "#a33aaa", "#9342b5", "#814abe", "#6c51c5", "#5157cb", "#275cce"
+          '#ce275b',
+          '#cc2269',
+          '#c82176',
+          '#c22484',
+          '#ba2a91',
+          '#af329e',
+          '#a33aaa',
+          '#9342b5',
+          '#814abe',
+          '#6c51c5',
+          '#5157cb',
+          '#275cce',
         ],
         rotate: 45,
       },
       lineWidth: 10,
       diameter: 4,
       count: 20,
-			frequencyBand: "lows",
+      frequencyBand: 'lows',
     }),
   );
 
-	fromEvent(buttonElement, "click").subscribe(() => {
+  fromEvent(buttonElement, 'click').subscribe(() => {
     updateTrack(undefined, audioElement.paused);
   });
 
-	fromEvent(audioElement, "ended").subscribe(() => {
+  fromEvent(audioElement, 'ended').subscribe(() => {
     updateTrack(randomTrackIndex(), true);
   });
 
-	fromEvent(pushStateEl, "hy-push-state-after").subscribe(() => {
+  fromEvent(pushStateEl, 'hy-push-state-after').subscribe(() => {
     updateSound();
   });