mirror of
https://github.com/captbaritone/webamp.git
synced 2026-01-23 02:15:01 +00:00
Use hooks for WebampComponent
This commit is contained in:
Jordan Eldredge
parent
ec77debbd6
commit
b7692aca80
2 changed files with 163 additions and 172 deletions
|
|
@ -1,177 +1,168 @@
|
|||
import React from "react";
|
||||
import Disposable from "./Disposable";
|
||||
import React, { useEffect, useRef } from "react";
|
||||
|
||||
class WebampComponent extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this._disposable = new Disposable();
|
||||
}
|
||||
async componentDidMount() {
|
||||
await this._loadWebamp();
|
||||
}
|
||||
function WebampComponent({ skinUrl, closeModal, loaded }) {
|
||||
const ref = useRef(null);
|
||||
const webampRef = useRef(null);
|
||||
|
||||
componentWillUnmount() {
|
||||
this._disposable.dispose();
|
||||
}
|
||||
useEffect(() => {
|
||||
let disposed = false;
|
||||
let cleanup = () => {};
|
||||
|
||||
async _loadWebamp() {
|
||||
// TODO: Fix export
|
||||
await import("webamp");
|
||||
const Webamp = window.Webamp;
|
||||
async function loadWebamp() {
|
||||
const { default: Webamp } = await import("webamp");
|
||||
|
||||
if (this._disposable.disposed) {
|
||||
return;
|
||||
}
|
||||
// https://freemusicarchive.org/music/netBloc_Artists/netBloc_Vol_24_tiuqottigeloot/
|
||||
const album = "netBloc Vol. 24: tiuqottigeloot";
|
||||
if (disposed) return;
|
||||
|
||||
this._webamp = new Webamp({
|
||||
initialSkin: {
|
||||
url: this.props.skinUrl,
|
||||
},
|
||||
initialTracks: [
|
||||
{
|
||||
metaData: {
|
||||
artist: "DJ Mike Llama",
|
||||
title: "Llama Whippin' Intro",
|
||||
},
|
||||
url: "/llama.mp3",
|
||||
duration: 5.322286,
|
||||
},
|
||||
{
|
||||
url: "https://raw.githubusercontent.com/captbaritone/webamp-music/4b556fbf/Diablo_Swing_Orchestra_-_01_-_Heroines.mp3",
|
||||
duration: 322.612245,
|
||||
metaData: {
|
||||
title: "Heroines",
|
||||
artist: "Diablo Swing Orchestra",
|
||||
album,
|
||||
},
|
||||
},
|
||||
{
|
||||
url: "https://raw.githubusercontent.com/captbaritone/webamp-music/4b556fbf/Eclectek_-_02_-_We_Are_Going_To_Eclecfunk_Your_Ass.mp3",
|
||||
duration: 190.093061,
|
||||
metaData: {
|
||||
title: "We Are Going To Eclecfunk Your Ass",
|
||||
artist: "Eclectek",
|
||||
album,
|
||||
},
|
||||
},
|
||||
{
|
||||
url: "https://raw.githubusercontent.com/captbaritone/webamp-music/4b556fbf/Auto-Pilot_-_03_-_Seventeen.mp3",
|
||||
duration: 214.622041,
|
||||
metaData: {
|
||||
title: "Seventeen",
|
||||
artist: "Auto-Pilot",
|
||||
album,
|
||||
},
|
||||
},
|
||||
{
|
||||
url: "https://raw.githubusercontent.com/captbaritone/webamp-music/4b556fbf/Muha_-_04_-_Microphone.mp3",
|
||||
duration: 181.838367,
|
||||
metaData: {
|
||||
title: "Microphone",
|
||||
artist: "Muha",
|
||||
album,
|
||||
},
|
||||
},
|
||||
{
|
||||
url: "https://raw.githubusercontent.com/captbaritone/webamp-music/4b556fbf/Just_Plain_Ant_-_05_-_Stumble.mp3",
|
||||
duration: 86.047347,
|
||||
metaData: {
|
||||
title: "Stumble",
|
||||
artist: "Just Plain Ant",
|
||||
album,
|
||||
},
|
||||
},
|
||||
{
|
||||
url: "https://raw.githubusercontent.com/captbaritone/webamp-music/4b556fbf/Sleaze_-_06_-_God_Damn.mp3",
|
||||
duration: 226.795102,
|
||||
metaData: {
|
||||
title: "God Damn",
|
||||
artist: "Sleaze",
|
||||
album,
|
||||
},
|
||||
},
|
||||
{
|
||||
url: "https://raw.githubusercontent.com/captbaritone/webamp-music/4b556fbf/Juanitos_-_07_-_Hola_Hola_Bossa_Nova.mp3",
|
||||
duration: 207.072653,
|
||||
metaData: {
|
||||
title: "Hola Hola Bossa Nova",
|
||||
artist: "Juanitos",
|
||||
album,
|
||||
},
|
||||
},
|
||||
{
|
||||
url: "https://raw.githubusercontent.com/captbaritone/webamp-music/4b556fbf/Entertainment_for_the_Braindead_-_08_-_Resolutions_Chris_Summer_Remix.mp3",
|
||||
duration: 314.331429,
|
||||
metaData: {
|
||||
title: "Resolutions (Chris Summer Remix)",
|
||||
artist: "Entertainment for the Braindead",
|
||||
album,
|
||||
},
|
||||
},
|
||||
{
|
||||
url: "https://raw.githubusercontent.com/captbaritone/webamp-music/4b556fbf/Nobara_Hayakawa_-_09_-_Trail.mp3",
|
||||
duration: 204.042449,
|
||||
metaData: {
|
||||
title: "Trail",
|
||||
artist: "Nobara Hayakawa",
|
||||
album,
|
||||
},
|
||||
},
|
||||
{
|
||||
url: "https://raw.githubusercontent.com/captbaritone/webamp-music/4b556fbf/Paper_Navy_-_10_-_Tongue_Tied.mp3",
|
||||
duration: 201.116735,
|
||||
metaData: {
|
||||
title: "Tongue Tied",
|
||||
artist: "Paper Navy",
|
||||
album,
|
||||
},
|
||||
},
|
||||
{
|
||||
url: "https://raw.githubusercontent.com/captbaritone/webamp-music/4b556fbf/60_Tigres_-_11_-_Garage.mp3",
|
||||
duration: 245.394286,
|
||||
metaData: {
|
||||
title: "Garage",
|
||||
artist: "60 Tigres",
|
||||
album,
|
||||
},
|
||||
},
|
||||
{
|
||||
url: "https://raw.githubusercontent.com/captbaritone/webamp-music/4b556fbf/CM_aka_Creative_-_12_-_The_Cycle_Featuring_Mista_Mista.mp3",
|
||||
duration: 221.44,
|
||||
metaData: {
|
||||
title: "The Cycle (Featuring Mista Mista)",
|
||||
artist: "CM aka Creative",
|
||||
album,
|
||||
},
|
||||
},
|
||||
],
|
||||
hotkeys: true,
|
||||
zIndex: 1001,
|
||||
});
|
||||
|
||||
this._disposable.add(this._webamp.onClose(this.props.closeModal));
|
||||
|
||||
await this._webamp.renderWhenReady(this._ref);
|
||||
if (this._disposable.disposed) {
|
||||
this._webamp.dispose();
|
||||
} else {
|
||||
this._disposable.add(() => {
|
||||
this._webamp.dispose();
|
||||
const webamp = new Webamp({
|
||||
initialSkin: { url: skinUrl },
|
||||
initialTracks,
|
||||
hotkeys: true,
|
||||
zIndex: 1001,
|
||||
});
|
||||
this.props.loaded();
|
||||
}
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div
|
||||
style={{ width: "100%", height: "100%", position: "absolute" }}
|
||||
ref={(node) => (this._ref = node)}
|
||||
/>
|
||||
);
|
||||
}
|
||||
webampRef.current = webamp;
|
||||
cleanup = () => webamp.dispose();
|
||||
|
||||
webamp.onClose(closeModal);
|
||||
await webamp.renderWhenReady(ref.current);
|
||||
if (!disposed) loaded();
|
||||
}
|
||||
|
||||
loadWebamp();
|
||||
|
||||
return () => {
|
||||
disposed = true;
|
||||
cleanup();
|
||||
};
|
||||
}, [skinUrl, closeModal, loaded]);
|
||||
|
||||
return (
|
||||
<div
|
||||
style={{ width: "100%", height: "100%", position: "absolute" }}
|
||||
ref={ref}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
const album = "netBloc Vol. 24: tiuqottigeloot";
|
||||
|
||||
const initialTracks = [
|
||||
{
|
||||
metaData: {
|
||||
artist: "DJ Mike Llama",
|
||||
title: "Llama Whippin' Intro",
|
||||
},
|
||||
url: "/llama.mp3",
|
||||
duration: 5.322286,
|
||||
},
|
||||
{
|
||||
url: "https://raw.githubusercontent.com/captbaritone/webamp-music/4b556fbf/Diablo_Swing_Orchestra_-_01_-_Heroines.mp3",
|
||||
duration: 322.612245,
|
||||
metaData: {
|
||||
title: "Heroines",
|
||||
artist: "Diablo Swing Orchestra",
|
||||
album,
|
||||
},
|
||||
},
|
||||
{
|
||||
url: "https://raw.githubusercontent.com/captbaritone/webamp-music/4b556fbf/Eclectek_-_02_-_We_Are_Going_To_Eclecfunk_Your_Ass.mp3",
|
||||
duration: 190.093061,
|
||||
metaData: {
|
||||
title: "We Are Going To Eclecfunk Your Ass",
|
||||
artist: "Eclectek",
|
||||
album,
|
||||
},
|
||||
},
|
||||
{
|
||||
url: "https://raw.githubusercontent.com/captbaritone/webamp-music/4b556fbf/Auto-Pilot_-_03_-_Seventeen.mp3",
|
||||
duration: 214.622041,
|
||||
metaData: {
|
||||
title: "Seventeen",
|
||||
artist: "Auto-Pilot",
|
||||
album,
|
||||
},
|
||||
},
|
||||
{
|
||||
url: "https://raw.githubusercontent.com/captbaritone/webamp-music/4b556fbf/Muha_-_04_-_Microphone.mp3",
|
||||
duration: 181.838367,
|
||||
metaData: {
|
||||
title: "Microphone",
|
||||
artist: "Muha",
|
||||
album,
|
||||
},
|
||||
},
|
||||
{
|
||||
url: "https://raw.githubusercontent.com/captbaritone/webamp-music/4b556fbf/Just_Plain_Ant_-_05_-_Stumble.mp3",
|
||||
duration: 86.047347,
|
||||
metaData: {
|
||||
title: "Stumble",
|
||||
artist: "Just Plain Ant",
|
||||
album,
|
||||
},
|
||||
},
|
||||
{
|
||||
url: "https://raw.githubusercontent.com/captbaritone/webamp-music/4b556fbf/Sleaze_-_06_-_God_Damn.mp3",
|
||||
duration: 226.795102,
|
||||
metaData: {
|
||||
title: "God Damn",
|
||||
artist: "Sleaze",
|
||||
album,
|
||||
},
|
||||
},
|
||||
{
|
||||
url: "https://raw.githubusercontent.com/captbaritone/webamp-music/4b556fbf/Juanitos_-_07_-_Hola_Hola_Bossa_Nova.mp3",
|
||||
duration: 207.072653,
|
||||
metaData: {
|
||||
title: "Hola Hola Bossa Nova",
|
||||
artist: "Juanitos",
|
||||
album,
|
||||
},
|
||||
},
|
||||
{
|
||||
url: "https://raw.githubusercontent.com/captbaritone/webamp-music/4b556fbf/Entertainment_for_the_Braindead_-_08_-_Resolutions_Chris_Summer_Remix.mp3",
|
||||
duration: 314.331429,
|
||||
metaData: {
|
||||
title: "Resolutions (Chris Summer Remix)",
|
||||
artist: "Entertainment for the Braindead",
|
||||
album,
|
||||
},
|
||||
},
|
||||
{
|
||||
url: "https://raw.githubusercontent.com/captbaritone/webamp-music/4b556fbf/Nobara_Hayakawa_-_09_-_Trail.mp3",
|
||||
duration: 204.042449,
|
||||
metaData: {
|
||||
title: "Trail",
|
||||
artist: "Nobara Hayakawa",
|
||||
album,
|
||||
},
|
||||
},
|
||||
{
|
||||
url: "https://raw.githubusercontent.com/captbaritone/webamp-music/4b556fbf/Paper_Navy_-_10_-_Tongue_Tied.mp3",
|
||||
duration: 201.116735,
|
||||
metaData: {
|
||||
title: "Tongue Tied",
|
||||
artist: "Paper Navy",
|
||||
album,
|
||||
},
|
||||
},
|
||||
{
|
||||
url: "https://raw.githubusercontent.com/captbaritone/webamp-music/4b556fbf/60_Tigres_-_11_-_Garage.mp3",
|
||||
duration: 245.394286,
|
||||
metaData: {
|
||||
title: "Garage",
|
||||
artist: "60 Tigres",
|
||||
album,
|
||||
},
|
||||
},
|
||||
{
|
||||
url: "https://raw.githubusercontent.com/captbaritone/webamp-music/4b556fbf/CM_aka_Creative_-_12_-_The_Cycle_Featuring_Mista_Mista.mp3",
|
||||
duration: 221.44,
|
||||
metaData: {
|
||||
title: "The Cycle (Featuring Mista Mista)",
|
||||
artist: "CM aka Creative",
|
||||
album,
|
||||
},
|
||||
},
|
||||
];
|
||||
|
||||
export default WebampComponent;
|
||||
|
|
|
|||
|
|
@ -94,11 +94,11 @@ export function useWebampAnimation({ initialPosition }) {
|
|||
}
|
||||
}, [initialPosition, setCentered, transitionBeginEvents]);
|
||||
|
||||
return {
|
||||
centered,
|
||||
loaded,
|
||||
handleWebampLoaded: () => webampLoadedEvents.next(null),
|
||||
};
|
||||
const handleWebampLoaded = useCallback(() => {
|
||||
webampLoadedEvents.next(null);
|
||||
}, [webampLoadedEvents]);
|
||||
|
||||
return { centered, loaded, handleWebampLoaded };
|
||||
}
|
||||
|
||||
export function useQuery(query, variables) {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue