feat: audio from jellyfin

_data/sounds.yml

@@ -3,68 +3,101 @@
   artist: Valknar
   title: Hyperloop
   tracks:
-    - Hyperloop I.mp3
+    - title: Hyperloop I
-    - Hyperloop II.mp3
+      url: https://jellyfin.media.pivoine.art/Items/46b9e3ae1e940df1dfdfd735556552d3/Download?api_key=53d58826a49b4026a815d13db5e38ff7
-    - Hyperloop III.mp3
+    - title: Hyperloop II
-    - Hyperloop IV.mp3
+      url: https://jellyfin.media.pivoine.art/Items/9e33b9dad8badd9d547091ae87628e6c/Download?api_key=53d58826a49b4026a815d13db5e38ff7
-    - Hyperloop IX.mp3
+    - title: Hyperloop III
-    - Hyperloop V.mp3
+      url: https://jellyfin.media.pivoine.art/Items/f6dd08a8ff227328e2d1491c9196d4f9/Download?api_key=53d58826a49b4026a815d13db5e38ff7
-    - Hyperloop VI.mp3
+    - title: Hyperloop IV
-    - Hyperloop VII.mp3
+      url: https://jellyfin.media.pivoine.art/Items/aa6f40d03f982e5e520634bb50fc6275/Download?api_key=53d58826a49b4026a815d13db5e38ff7
-    - Hyperloop VIII.mp3
+    - title: Hyperloop IX
-    - Hyperloop X.mp3
+      url: https://jellyfin.media.pivoine.art/Items/a8b7919e0ee2bdf260369c1d1219cd20/Download?api_key=53d58826a49b4026a815d13db5e38ff7
-    - Hyperloop XI.mp3
+    - title: Hyperloop V
-    - Hyperloop XII.mp3
+      url: https://jellyfin.media.pivoine.art/Items/5d36d48f33d9a3138940f271f22a4729/Download?api_key=53d58826a49b4026a815d13db5e38ff7
-    - Hyperloop.mp3
+    - 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
+    - title: Massive
-    - Sudden Death.mp3
+      url: https://jellyfin.media.pivoine.art/Items/4c696ae488e5fa5301b894787f2b927c/Download?api_key=53d58826a49b4026a815d13db5e38ff7
-    - Strength And Honour.mp3
+    - title: Sudden Death
-    - Drums Of War.mp3
+      url: https://jellyfin.media.pivoine.art/Items/8de46aaa2f2293ee97dd7a95f211c510/Download?api_key=53d58826a49b4026a815d13db5e38ff7
-    - Drums Of War (Remix).mp3
+    - title: Strength And Honour
-    - Massive (Remix).mp3
+      url: https://jellyfin.media.pivoine.art/Items/07868b2f6f161febe8e783981e0d33e1/Download?api_key=53d58826a49b4026a815d13db5e38ff7
-    - The Moon (Remix).mp3
+    - 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
+    - title: Detroit I
-    - Detroit II.mp3
+      url: https://jellyfin.media.pivoine.art/Items/ed31620e103e4f32861155f43dd05367/Download?api_key=53d58826a49b4026a815d13db5e38ff7
-    - Detroit III.mp3
+    - title: Detroit II
-    - Detroit IV.mp3
+      url: https://jellyfin.media.pivoine.art/Items/48da9ea7efc2f42537e109e0898c1f38/Download?api_key=53d58826a49b4026a815d13db5e38ff7
-    - Detroit V.mp3
+    - title: Detroit III
-    - Detroit VI.mp3
+      url: https://jellyfin.media.pivoine.art/Items/f1d8bef1053e6f122c484c75354576cf/Download?api_key=53d58826a49b4026a815d13db5e38ff7
-    - Detroit VII.mp3
+    - title: Detroit IV
-    - Detroit VIII.mp3
+      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
+    - title: Stuttgart
-    - Stuttgart (Remix).mp3
+      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">
+            <a class="sound-item" href="{{ track.url }}" target="_blank">
-              {{ sounds.first.artist }} - {{ track | replace: ".mp3", "" }}
+              {{ 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,109 +1,112 @@
-import { fromEvent } from "rxjs";
+import { fromEvent } from 'rxjs';
-import { webComponentsReady, stylesheetReady } from "./common.js";
+import { webComponentsReady, stylesheetReady } from './common.js';
-import { Wave } from "@foobar404/wave";
+import { Wave } from '@foobar404/wave';
 
 (async () => {
-	await Promise.all([
+  await Promise.all([
-		...("customElements" in window
+    ...('customElements' in window
-			? []
+      ? []
-			: [
+      : [
-					import(
+          import(/* webpackChunkName: "webcomponents" */ './polyfills/webcomponents.js').then(() =>
-						/* webpackChunkName: "webcomponents" */ "./polyfills/webcomponents.js"
+            import(/* webpackChunkName: "shadydom" */ './polyfills/shadydom.js'),
-					).then(
+          ),
-						() =>
+        ]),
-							import(
+  ]);
-								/* webpackChunkName: "shadydom" */ "./polyfills/shadydom.js"
-							),
-					),
-				]),
-	]);
 
-	await webComponentsReady;
+  await webComponentsReady;
-	await stylesheetReady;
+  await stylesheetReady;
 
-	const sound = document.querySelector(".sound-player");
+  const sound = document.querySelector('.sound-player');
 
-	if (!sound) return;
+  if (!sound) return;
 
-	const fallback = JSON.parse(sound.getAttribute("data-featured"));
+  const fallback = JSON.parse(sound.getAttribute('data-featured'));
-	let featured = fallback;
+  let featured = fallback;
-	let currentIndex = undefined;
+  let currentIndex = undefined;
 
-	const randomTrackIndex = () =>
+  const randomTrackIndex = () => Math.floor(Math.random() * (featured.tracks.length - 1));
-		Math.floor(Math.random() * (featured.tracks.length - 1));
 
-	const updateTrack = (index, active) => {
+  const updateTrack = (index, active) => {
-		if (index != null) {
+    if (index != null) {
-			const track = featured.tracks[index];
+      const track = featured.tracks[index];
-			audioElement.setAttribute(
+      audioElement.setAttribute('src', track.url);
-				"src",
+      currentIndex = index;
-				`/assets/sounds/${featured.slug}/${track}`,
+    }
-			);
-			currentIndex = index;
-		}
 
-		if (active) {
+    if (active) {
-			const track = featured.tracks[currentIndex];
+      const track = featured.tracks[currentIndex];
-			buttonElement.textContent = `[ ${track.substring(0, track.lastIndexOf("."))} ]`;
+      buttonElement.textContent = `[ ${track.title} ]`;
-			audioElement.play();
+      audioElement.play();
-			canvasElement.classList.remove("hidden");
+      canvasElement.classList.remove('hidden');
-		} else {
+    } else {
-			buttonElement.textContent = "[ SOUND ON ]";
+      buttonElement.textContent = '[ SOUND ON ]';
-			audioElement.pause();
+      audioElement.pause();
-			canvasElement.classList.add("hidden");
+      canvasElement.classList.add('hidden');
-		}
+    }
-	};
+  };
 
-	const updateSound = () => {
+  const updateSound = () => {
-		const sound = document.querySelector(".sound-wrapper");
+    const sound = document.querySelector('.sound-wrapper');
 
-		if (!sound) return;
+    if (!sound) return;
 
-		featured = JSON.parse(sound.getAttribute("data-featured"));
+    featured = JSON.parse(sound.getAttribute('data-featured'));
-		updateTrack(0, !audioElement.paused);
+    updateTrack(0, !audioElement.paused);
 
-		const buttons = document.querySelectorAll(".sound-wrapper .sound-item");
+    const buttons = document.querySelectorAll('.sound-wrapper .sound-item');
-		buttons.forEach((button, i) => {
+    buttons.forEach((button, i) => {
-			fromEvent(button, "click").subscribe((event) => {
+      fromEvent(button, 'click').subscribe((event) => {
-				event.preventDefault();
+        event.preventDefault();
-				updateTrack(i, true);
+        updateTrack(i, true);
-			});
+      });
-		});
+    });
-	};
+  };
 
-	const audioElement = document.querySelector(".sound-player audio");
+  const audioElement = document.querySelector('.sound-player audio');
-	const buttonElement = document.querySelector(".sound-player a");
+  audioElement.crossOrigin = 'anonymous';
-	const canvasElement = document.querySelector(".sound-player canvas");
+  const buttonElement = document.querySelector('.sound-player a');
-	const pushStateEl = document.querySelector("hy-push-state");
+  const canvasElement = document.querySelector('.sound-player canvas');
-	const wave = new Wave(audioElement, canvasElement);
+  const pushStateEl = document.querySelector('hy-push-state');
+  const wave = new Wave(audioElement, canvasElement);
 
-	wave.addAnimation(
+  wave.addAnimation(
-		new wave.animations.Arcs({
+    new wave.animations.Arcs({
-			lineColor: {
+      lineColor: {
-				gradient: [
+        gradient: [
-				  "#ce275b", "#cc2269", "#c82176", "#c22484", "#ba2a91", "#af329e", "#a33aaa", "#9342b5", "#814abe", "#6c51c5", "#5157cb", "#275cce"
+          '#ce275b',
-				],
+          '#cc2269',
-				rotate: 45,
+          '#c82176',
-			},
+          '#c22484',
-			lineWidth: 10,
+          '#ba2a91',
-			diameter: 4,
+          '#af329e',
-			count: 20,
+          '#a33aaa',
-			frequencyBand: "lows",
+          '#9342b5',
-		}),
+          '#814abe',
-	);
+          '#6c51c5',
+          '#5157cb',
+          '#275cce',
+        ],
+        rotate: 45,
+      },
+      lineWidth: 10,
+      diameter: 4,
+      count: 20,
+      frequencyBand: 'lows',
+    }),
+  );
 
-	fromEvent(buttonElement, "click").subscribe(() => {
+  fromEvent(buttonElement, 'click').subscribe(() => {
-		updateTrack(undefined, audioElement.paused);
+    updateTrack(undefined, audioElement.paused);
-	});
+  });
 
-	fromEvent(audioElement, "ended").subscribe(() => {
+  fromEvent(audioElement, 'ended').subscribe(() => {
-		updateTrack(randomTrackIndex(), true);
+    updateTrack(randomTrackIndex(), true);
-	});
+  });
 
-	fromEvent(pushStateEl, "hy-push-state-after").subscribe(() => {
+  fromEvent(pushStateEl, 'hy-push-state-after').subscribe(() => {
-		updateSound();
+    updateSound();
-	});
+  });
 
-	updateTrack(randomTrackIndex(), false);
+  updateTrack(randomTrackIndex(), false);
-	updateSound();
+  updateSound();
 })();