mediaplayercontroller.js

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;