i am trying to load an streamplayer in a react app. It does work the way below but it needs to be fixed, as i don't want document.getElementById in the react code. But i am strugeling to get this resoved.
I got the followng code:
import { useState } from "react";
import { FaPlayCircle, FaPauseCircle } from "react-icons/fa";
import { GetConfiguration } from "../../../api";
import { Base, Text, Column, Flex, Button, LayoutGridItem } from "../../../common";
export const RadioView = () => {
const [audio, setAudio] = useState(new Audio( GetConfiguration<string>("radio.stream.url") ));
const [isPlaying] = useState(false);
const startRadio = () => {
var resp = audio.play();
if (resp !== undefined) {
resp
.then((_) => {
document.getElementById("startRadio").style.color = "blue";
document.getElementById("pauseRadio").style.color = "black";
})
}
};
const pauseRadio = () => {
document.getElementById("startRadio").style.color = "black";
document.getElementById("pauseRadio").style.color = "red";
audio.pause();
};
const updateVolume = (volume) => {
let radioVolume = Math.round(volume);
radioVolume = Math.max(0, radioVolume);
radioVolume = Math.min(100, radioVolume);
audio.volume = radioVolume / 100;
}
audio.autoplay = true;
audio.volume = 0.3;
return (
<Base className="notification-radio rounded">
<Column>
<Flex gap={1}>
<Button
id="startRadio"
type="button"
style={{ backgroundColor: "#F1B941", color: "blue", cursor: "pointer", }}
onClick={(e) => startRadio()}
>
{" "}<FaPlayCircle className="radio-font-icons fa-icon" />{" "}
</Button>
<Button
id="pauseRadio"
type="button"
style={{ backgroundColor: "#F1B941", color: "black", cursor: "pointer", }}
onClick={(e) => pauseRadio()}
>
{" "}<FaPauseCircle className="radio-font-icons fa-icon" />{" "}
</Button>
</Flex>
<input
onChange={(e) => updateVolume(e.target.value)}
style={{ marginTop: "7px", display: "inline-block" }}
type="range"
className="form-range"
id="customRange1"
min="0"
max="100"
step="1"
>
</input>
<div className="col-md-1" />
</Column>
</Base>
);
};
How do i fix the document.getElementById.
I think the button should be something like:
<Button
onClick={() => audio.play()}
type="button"
style={{ backgroundColor: "#F1B941", color: audio.paused ? "black" : "blue", cursor: "pointer", }}
>
But how should i solve the:
- const pauseRadio
- if (resp !== undefined)
Solved it :)