mediaplayercontroller.js
unknown
plain_text
a year ago
6.6 kB
6
Indexable
import React, { useState, useEffect, useRef } from 'react'; import MediaPlayer from './mediaplayer'; const MediaPlayerController = () => { const [mediaPlayers, setMediaPlayers] = useState([]); const [activePlayers, setActivePlayers] = useState([]); const [activeTitle, setTitle] = useState(""); const sliderRef = useRef(null); const blockerRef = useRef(null); useEffect(() => { fetchMedia(); // The next line prevents the empty dependency from throwing a warning. // eslint-disable-next-line react-hooks/exhaustive-deps }, []); const fetchMedia = async () => { try { const response = await fetch("/shortdb.json"); const data = await response.json(); data.forEach(element => { addMediaPlayer({ vol: 1, active: false, title: element.title, src: element.src, type: "loop" }); }); } catch (error) { console.error("Error fetching short form media.", error) } try { const response = await fetch("/longdb.json"); const data = await response.json(); data.forEach(element => { addMediaPlayer({ vol: 1, active: false, title: element.title, src: element.src, type: "long" }); }); } catch (error) { console.error("Error fetching short form media.", error) } }; const addMediaPlayer = ({ vol, active, title, src, type }) => { setMediaPlayers(prevState => { const newId = `player${prevState.length}`; return [...prevState, { id: newId, vol, active, title, src, type }]; }); }; const toggleActive = (id) => { setMediaPlayers(prevState => { return prevState.map(player => { if (player.id === id) { if (player.active === false) { setActivePlayers(prevActivePlayers => [...prevActivePlayers, player.id]); } else { setActivePlayers(prevActivePlayers => prevActivePlayers.filter(activeId => activeId !== player.id)); } return { ...player, active: !player.active }; } return player; }); }); }; const changeVolume = (id, vol) => { setMediaPlayers(prevState => { return prevState.map(player => { if (player.id === id) { return { ...player, vol }; } return player; }); }); }; const pauseAllPlayers = () => { setMediaPlayers(prevState => { return prevState.map(player => { if (activePlayers.includes(player.id)) { return { ...player, active: !player.active }; } return player; }); }); }; const buildMediaPlayers = (type) => { return mediaPlayers.map(player => { if (player.type === type && type === "loop") { return ( <div key={player.id} className="looping-audio-button"> <input type="range" min="0" max="1" step="0.025" value={player.vol} onChange={(e) => { changeVolume(player.id, e.target.value) }} /> <button onClick={() => { toggleActive(player.id); setTitle(player.title) }}> {player.title} </button> <MediaPlayer vol={player.vol} active={player.active} id={player.id} title={player.title} src={player.src} /> </div> ) } else if (player.type === type && type === "long") { return ( <div key={player.id} className="longform-audio-button"> <button onClick={() => { toggleActive(player.id); setTitle(player.title) }}> {player.title} </button> <MediaPlayer vol={player.vol} active={player.active} id={player.id} title={player.title} src={player.src} /> </div> ) } else { return null; } }); }; const toggleSlideOut = () => { if (sliderRef.current) { sliderRef.current.classList.toggle("visible") blockerRef.current.classList.toggle("visible") } } const slideOutContainer = () => { return ( <> <div ref={blockerRef} id="slide-out-blocker"></div> <div ref={sliderRef} id="slide-out-container"> <button className="toggler" onClick={() => { toggleSlideOut() }}>Toggle Open</button> <div id="alt-controls"> <div id="clock-controls"> <button>Clock</button> </div> <div id="lf-controls"> <button>Vol</button> <button onClick={() => { pauseAllPlayers() }}>||></button> </div> </div> <div id="longform-audio-container"> {buildMediaPlayers("long")} </div> </div> </> ) } return ( <> <button className="-debug" onClick={() => { console.log(mediaPlayers) }}>Log state of mediaPlayers</button> {/* <h2>Currently Playing: {activeTitle}</h2> */} <div className="looping-audio-container"> {buildMediaPlayers("loop")} </div> {slideOutContainer()} </> ); }; export default MediaPlayerController;
Editor is loading...
Leave a Comment