[ad_1]
Getting response from API. API response
Group_Name: "Group_1"
Video_Name: "http://localhost:4000/video/0"
After populating data to table create one button then ag-grid look like this
Then call API using fetch.after that stores response in usestate, I am currently mapping through all the videos to button and II click button it opens multiple video but I want only one video at a time but I don’t know how to properly play one at a time. I appreciate any help. I’ve been stuck on this for a few days.
app.js
export default function App(data, handleFormSubmit) {
const { id } = data;
const actionButton = (params) => {
setOpen(true);
};
const [response, setResponse] = useState([]);
const [open, setOpen] = React.useState(false);
const [formData, setFormData] = useState(initialValue);
const handleClose = () => {
setOpen(false);
response.map(({ Video_Name }) => videoName);
setFormData(initialValue);
console.log(videoName);
};
const onChange = (e) => {
const { value, id } = e.target;
// console.log(value,id)
setFormData({ ...formData, https://stackoverflow.com/q/72487878: value });
};
const columnDefs = [
{ headerName: "Name", field: "Company_Name", filter: "agSetColumnFilter" },
{ headerName: "Floor", field: "Floor Number" },
{ headerName: "Group", field: "Group_Name" },
{ headerName: "Camera", field: "Camera_Number" },
{ headerName: "Videos", field: "Video_Name" },
{
headerName: "Actions",
field: "Video_Name",
cellRendererFramework: (params) => (
<div>
<Button
variant="contained"
size="medium"
color="primary"
onClick={() => actionButton(params)}
>
Play
</Button>
</div>
),
},
];
const onGridReady = (params) => {
console.log("grid is ready");
fetch("http://localhost:8000/get_all")
.then((resp) => resp.json())
.then((resp) => {
console.log(resp.results);
setResponse(resp.results);
params.api.applyTransaction({ add: resp.results });
});
};
return (
<div className="App">
<h1 align="center"> React FastAPI Integration</h1>
<h3> API Data </h3>
<div className="ag-theme-alpine" style={{ height: "400px" }}>
<AgGridReact
columnDefs={columnDefs}
defaultColDef={defaultColDef}
onGridReady={onGridReady}
pagination={true}
></AgGridReact>
</div>
<div>
<Dialog
open={open}
onClose={handleClose}
aria-labelledby="alert-dialog-title"
aria-describedby="alert-dialog-description"
>
<DialogContent>
{response.map(({ Video_Name }) => (
<iframe
width="420"
height="315"
title="videos"
src={Video_Name}
/>
))}
</DialogContent>
</Dialog>
</div>
</div>
);
}
Multiple video open at same time,I don’t know how to properly play one at a time. I appreciate any help. I’ve been stuck on this for a few days.
Multiple video open at a time. but i want one video at a time
Thanks in advance
[ad_2]