msw-open-music/web/src/component/AudioPlayer.js

import { useEffect, useState } from "react";
import { useNavigate } from "react-router";
import { CalcReadableFilesizeDetail } from "./Common";
import FfmpegConfig from "./FfmpegConfig";
import FileDialog from "./FileDialog";

function AudioPlayer(props) {
  // props.playingFile
  // props.setPlayingFile

  const [fileDialogShowStatus, setFileDialogShowStatus] = useState(false);
  const [loop, setLoop] = useState(true);
  const [raw, setRaw] = useState(false);
  const [prepare, setPrepare] = useState(false);
  const [selectedFfmpegConfig, setSelectedFfmpegConfig] = useState({
    name: "",
    args: "",
  });
  const [playingURL, setPlayingURL] = useState("");
  const [isPreparing, setIsPreparing] = useState(false);
  const [timerCount, setTimerCount] = useState(0);
  const [timerID, setTimerID] = useState(null);

  useEffect(() => {
    // no playing file
    if (props.playingFile.id === undefined) {
      setPlayingURL("");
      return;
    }
    if (raw) {
      console.log("Play raw file");
      setPlayingURL("/api/v1/get_file_direct?id=" + props.playingFile.id);
    } else {
      if (prepare) {
        // prepare file
        setIsPreparing(true);
        fetch("/api/v1/prepare_file_stream_direct", {
          method: "POST",
          headers: { "Content-Type": "application/json" },
          body: JSON.stringify({
            id: props.playingFile.id,
            config_name: selectedFfmpegConfig.name,
          }),
        })
          .then((response) => response.json())
          .then((data) => {
            if (data.error) {
              alert(data.error);
              setIsPreparing(false);
              return;
            }
            props.setPlayingFile(data.file);
            setIsPreparing(false);
            setPlayingURL(
              `/api/v1/get_file_stream_direct?id=${props.playingFile.id}&config=${selectedFfmpegConfig.name}`
            );
          });
      } else {
        setPlayingURL(
          `/api/v1/get_file_stream?id=${props.playingFile.id}&config=${selectedFfmpegConfig.name}`
        );
      }
    }
  }, [props.playingFile.id, raw, prepare, selectedFfmpegConfig]);

  let navigate = useNavigate();

  return (
    <footer className="vertical">
      <h5>Player status</h5>
      {props.playingFile.id && (
        <span>
          <FileDialog
            showStatus={fileDialogShowStatus}
            setShowStatus={setFileDialogShowStatus}
            file={props.playingFile}
            setPlayingFile={() => {
              return;
            }}
          />

          <button
            onClick={() => {
              setFileDialogShowStatus(!fileDialogShowStatus);
            }}
          >
            {props.playingFile.filename}
          </button>

          <button
            onClick={() => navigate(`/folders/${props.playingFile.folder_id}`)}
          >
            {props.playingFile.foldername}
          </button>

          <button disabled>
            {CalcReadableFilesizeDetail(props.playingFile.filesize)}
          </button>

          {isPreparing && <button disabled>Preparing...</button>}

          {playingURL !== "" && (
            <button
              onClick={() => {
                props.setPlayingFile({});
              }}
            >
              Stop
            </button>
          )}
        </span>
      )}

      <br />

      <span className="horizontal">
        <input
          className="number-input"
          disabled={timerID !== null}
          type="number"
          value={timerCount}
          onChange={(e) => {
            setTimerCount(e.target.value);
          }}
        />
        <button
          onClick={() => {
            if (timerID != null) {
              clearInterval(timerID);
              setTimerID(null);
              return;
            }
            setTimerID(
              setTimeout(() => {
                props.setPlayingFile({});
                setTimerID(null);
              }, timerCount * 1000 * 60)
            );
          }}
        >
          Stop Timer
        </button>
      </span>

      <span>
        <input
          checked={loop}
          onChange={(event) => setLoop(event.target.checked)}
          type="checkbox"
        />
        <label>Loop</label>

        <input
          checked={raw}
          onChange={(event) => setRaw(event.target.checked)}
          type="checkbox"
        />
        <label>Raw</label>

        {!raw && (
          <span>
            <input
              checked={prepare}
              onChange={(event) => setPrepare(event.target.checked)}
              type="checkbox"
            />
            <label>Prepare</label>
          </span>
        )}

        <input
          type="checkbox"
          onClick={(e) => {
            const domVideoPlayer = document.getElementById("dom-video-player");
            if (domVideoPlayer === null) {
              return;
            }
            if (e.target.checked) {
              domVideoPlayer.style.height = "auto";
            } else {
              domVideoPlayer.style.height = "39px";
            }
          }}
        />
        <label>Video</label>
      </span>

      {playingURL !== "" && (
        <video
          id="dom-video-player"
          controls
          autoPlay
          loop={loop}
          className="audio-player"
          src={playingURL}
        ></video>
      )}

      <FfmpegConfig
        selectedFfmpegConfig={selectedFfmpegConfig}
        setSelectedFfmpegConfig={setSelectedFfmpegConfig}
      />
    </footer>
  );
}

export default AudioPlayer;