[英]How to play one video from array at a time in ReactJS & AG Grid
Getting response from API.从 API 获取响应。 API response
API 响应
API response :
0:
Camera_Number: "Camera_1"
Company_Name: "Fraction Analytics Limited"
Floor Number: "Ground_Floor"
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将数据填充到表后创建一个按钮,然后 ag-grid 看起来像这样
I am currently mapping through all the videos to button and I click button it opens multiple video but I want only one video at a time.我目前正在将所有视频映射到按钮,然后单击按钮它会打开多个视频,但我一次只想要一个视频。
app.js应用程序.js
const initialValue = { Name: "", Floor: "", Group: "", Camera: "", Videos: "" };
export default function App(data, handleFormSubmit) {
const { id } = data;
const actionButton = (params) => {
setResponse(params.response);
setOpen(true);
};
const [response, setResponse] = useState(0);
const [open, setOpen] = React.useState(false);
const [formData, setFormData] = useState(initialValue);
const handleClose = () => {
setOpen(false);
setFormData(initialValue);
};
const onChange = (e) => {
const { value, id } = e.target;
// console.log(value,id)
setFormData({ ...formData, [id]: 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" }}>
</div>
<div>
<DialogContent>
<iframe width="420" height="315" title="videos" src={id} />
</DialogContent>
;
<DialogActions>
<Button onClick={handleClose} color="secondary" variant="outlined">
Cancel
</Button>
<Button
color="primary"
onClick={() => handleFormSubmit()}
variant="contained"
>
{id ? "Update" : "Download"}
</Button>
</DialogActions>
</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
但我一次想要一个视频
If I correctly understood the question, it is because in DialogContent
you are mapping through all response
, and showing all of them.如果我正确理解了这个问题,那是因为在
DialogContent
中,您正在映射所有response
,并显示所有响应。 Instead why not here:相反,为什么不在这里:
const actionButton = (params) => {
setOpen(true);
};
instead of storing true
, store id
(it seems video name could work in your case too) of the row clicked.与其存储
true
,不如存储单击的行的id
(似乎视频名称也适用于您的情况)。 Then inside DialogContent
render only one iframe
, with video based on that id
.然后在
DialogContent
内只渲染一个iframe
,视频基于该id
。
PS. PS。 You can pass
!!id
as open
prop to Dialog, which means if there is something in id
, the Dialog will open (assuming there are no ids with falsy values).您可以将
!!id
作为open
属性传递给 Dialog,这意味着如果id
中有内容,则 Dialog 将打开(假设没有具有虚假值的 id)。
Or you can actually store the whole row itself in state, and then you can more easily access it, here is simple example what I mean:或者您实际上可以将整行本身存储在状态中,然后您可以更轻松地访问它,这是我的意思的简单示例:
let data = [
{ name: 'david', id: 0 },
{ name: 'nick', id: 1 },
{ name: 'john', id: 2 },
];
export default function App() {
let [clicked, setClicked] = React.useState(null);
return (
<div>
{data.map((x) => {
return (
<div
key={x.id}
onClick={() => {
setClicked(x);
}}
>
Row {x.name}
</div>
);
})}
<div>Clicked row {clicked && clicked.name}</div>
</div>
);
}
No need to use the click handler of the button.无需使用按钮的点击处理程序。 You cannot get row data with that.
你不能用它来获取行数据。
Add a colId
to column definition for actions.将
colId
添加到操作的列定义。 Then handle the onCellClicked
action of the grid.然后处理网格的
onCellClicked
动作。 You can get the row data using params.node.data
.您可以使用
params.node.data
获取行数据。
const [videoName, setVideoName] = useState("");
function onCellClicked(params) {
// maps to colId: "action" in columnDefs,
if (params.column.colId === "action") {
// set videoName for the row
setVideoName(params.node.data.Video_Name);
setOpen(true);
}
}
// grid config
<AgGridReact
...
rowData={response}
onCellClicked={onCellClicked}>
</AgGridReact>
// access videoName in dialog content
<DialogContent>
{/* <iframe width="420" height="315" title="videos" src={id} /> */}
<div>{videoName}</div>
</DialogContent>
Output - Click on any row's play button.输出- 单击任意行的播放按钮。 Result is that rows video url.
结果是行视频网址。 You can now use this to play the actual video.
您现在可以使用它来播放实际视频。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.