Something went wrong. Try again.
Experiment to rebuild Diffuse using web applets.
Something went wrong. Try again.
1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283import Webamp from "webamp";import { URLTrack } from "webamp";
import type { ResolvedUri, Track } from "@applets/core/types.d.ts";import { applet } from "@scripts/applets/common";
////////////////////////////////////////////// 🎨 Styles////////////////////////////////////////////import "@styles/themes/webamp/index.css";
////////////////////////////////////////////// 🗂️ Applets////////////////////////////////////////////import type * as OutputOrchestrator from "@applets/orchestrator/output-management/types.d.ts";
const configurator = { input: await applet("../../configurator/input"),};
const orchestrator = { output: await applet<OutputOrchestrator.State>("../../orchestrator/output-management"),
// TODO: Should this be explicitely be ran after the output orchestrator is loaded? input: await applet("../../orchestrator/input-cache"),};
////////////////////////////////////////////// ⚡////////////////////////////////////////////const amp = new Webamp({ initialTracks: [],});
const ampNode = document.createElement("div");ampNode.style = "height: 100vh; left: 0; position: absolute; top: 0; width: 100%; z-index: -1000;";document.body.appendChild(ampNode);amp.renderWhenReady(ampNode);
orchestrator.output.ondata = async () => { const tracks = await loadTracks(); amp.setTracksToPlay([]); amp.appendTracks(tracks); amp.nextTrack();};
////////////////////////////////////////////// 🛠️////////////////////////////////////////////async function loadTracks(): Promise<URLTrack[]> { return await orchestrator.output.data.tracks.collection.reduce( async (promise: Promise<URLTrack[]>, track: Track) => { const acc = await promise;
// TODO: Ideally the URL should only be resolved when needed, // but webamp doesn't allow for that. // Maybe you could work around it with a service worker. const resGet = await configurator.input.sendAction<ResolvedUri>( "resolve", { method: "GET", uri: track.uri }, { timeoutDuration: 60000, }, );
if (!resGet) return acc;
const urlTrack: URLTrack = { url: resGet.url, metaData: { title: track.tags?.title || "", artist: track.tags?.artist || "", album: track.tags?.album, }, duration: track.stats?.duration, };
return [...acc, urlTrack]; }, Promise.resolve([]), );}