Reactjs: How to use <video> to upload video without change system settings? - javascript

In my project, I am trying to add and preview video using video tag. But here I am facing a problem "Not allowed to load local source: file:///C:/fakepath/test-video.mp4". When I search for some solutions, it suggested changing the browser settings. But I wish to find a solution without changing any browser settings.
Also how to get the exact file path?, if I got the correct path is that enough to fix this problem?
...
const [videofile, setVideo] = useState("");
...
const onChange = (e: any) => {
setTemp(true);
console.log("event inside onchange", e);
const a = e.target.value;
console.log("video file", a);
setVideo(a);
};
...
return (
<div>
<div style={{ width: "100%" }}>
<div className="container p-0">
{temp ? (
<video controls src={videofile} />
) : (
<div className={styles.uploadBlock}>
{edit ? (
<img src={"#"} />
) : (
<>
<div className={styles.multimediaBox}>
<span className={styles.iconBox}>
<FontAwesomeIcon icon={faCirclePlay} />
</span>
</div>
</>
)}
</div>
)}
</div>
<div className={styles.btnGroup}>
<Button
className="secondary-button"
variant="contained"
component="label"
onChange={onChange}
>
{buttonLabel}
<input hidden accept="video/*" type="file" />
</Button>
....
Please give me a suggestion to fix this problem.

Related

Change state for each button individually

I have a button to show details of each card in my react project like this. the amount of cards are unknown and it is based on what I get from API.
just like this, I get the data and I'm mapping it:
<div className={styles.contentCardContainer}>
{factorList !== undefined && factorList.length > 0 ? (
factorList.map((list, i) => (
<div key={uuidv4()} className={styles.contentCard}>
<IconButton
color={showListService ? "error" : "success"}
onClick={() => {
setShowlistService((prev) => !prev);
HandleFetchDetails(list.ID);
}}
sx={{
display: "flex",
alignItems: "center",
alignSelf: "flex-start",
}}
>
{showListService ? <RemoveCircle /> : <AddCircle />}
</IconButton>
<section className={styles.eachSection}>
<img src={doctorImage} alt="doctor" />
<p>{list.Doctor}</p>
</section>
<section className={styles.eachSection}>
<img src={calendarImage} alt="doctor" />
<p>
{list.Date}   
{list.Time}
</p>
</section>
<section className={styles.eachSection}>
<img src={RialImage} alt="doctor" />
<p>{list.Payable}  ریال</p>
</section>
<section className={styles.eachSection}>
<img src={discountImage} alt="doctor" />
<p>{list.discount}</p>
</section>
{showListService && (
<DetailsListService listDetails={listDetails} styles={styles} />
)}
</div>
))
) : (
<Alert
variant="filled"
severity="warning"
sx={{ justifyContent: "space-between" }}
>
<p>There's no data</p>
</Alert>
)}
</div>
</div>
as you can see, I have IconButton element that I mapped it so each element have this button. but there's a problem.
I just have one state.
just like this :
const [showListService, setShowlistService] = React.useState(false);
since the amount cards I will receive is unknown. I can't define multiple states, because I don't know how many I should define. this is a bad practice too.
so whenever I click on IconButton, state changes for ALL buttons. how can I make it work individually.
change state for just a button in that specific element
Create a component for the cards and each card can keep the state:
factorList.map((factor, index) => {
return <Card key={index} factor={factor} />;
});
const Card = ({ factor }) => {
const [state, setState] = useState(false);
return <div>Your card stuff here</div>;
};

Why does my id i get from next js router.query return undefined on refresh? [duplicate]

This question already has answers here:
useRouter/withRouter receive undefined on query in first render
(9 answers)
Closed 5 months ago.
I am using the id gotten from next router.query to render elements dynamically it works when i access the room from next/link but when i refresh the page it throws this error
here is my code (note: roomId here was gotten from const {roomId} = router.query):
return (
<>
<div className={styles.header}>
<div className={styles.title}>{rooms[roomId].name}</div>
<div className={styles.headerCon}>
<div className={styles.roomUsers}>
<AvatarGroup
max={3}
total={Object.keys(rooms[roomId].users).length}
>
{Object.keys(rooms[roomId].users).map((user) => (
<Avatar
key={user + Math.random()}
alt={users[user].name}
src={users[user].profile_pic}
/>
))}
</AvatarGroup>
</div>
<div className={styles.headerIcons}>
<div className={styles.react}>
<AddReactionOutlinedIcon />
</div>
<div className={styles.notif}>
<NotificationsNoneOutlinedIcon />
</div>
<div className={styles.more}>
<MoreHorizOutlined />
</div>
</div>
</div>
</div>
{user.name === rooms[roomId].createdBy.name ? (
<div className={styles.begin}>
{!roomActive ? (
<button onClick={handleStartSession}>Start</button>
) : (
<button onClick={handleEndSession}>End</button>
)}
</div>
) : (
""
)}
<div className={styles.participators}>
<div className={styles.pAvatars}>
<Avatar
alt={rooms[roomId].createdBy.name}
src={rooms[roomId].createdBy.profile_pic}
/>
<div className={styles.userName}>{rooms[roomId].createdBy.name}</div>
<div className={styles.userRole}>Admin</div>
<div>
<audio autoPlay ref={userAudio} />
{peers.map((peer, index) => {
return <Audio key={index} peer={peer} />;
})}
</div>
</div>
{Object.keys(rooms[roomId].users)
.filter((user) => users[user].name !== rooms[roomId].createdBy.name)
.map((user) => (
<div className={styles.pAvatars} key={Math.random() + user}>
<Avatar alt={users[user].name} src={users[user].profile_pic} />
<div className={styles.userName}>{users[user].name}</div>
<div className={styles.userRole}>Admin</div>
</div>
))}
</div>
</>
);
}
As you can see much of what i am rendering on this page depends on that id, so can someone please help?
You try to access the query parameter before its state is ready. There is a workaround to solve this problem.
import { useRouter } from 'next/router';
const router = useRouter();
useEffect(() => {
if (router.isReady) {
// Do your stuff
// for example: assign query param to a state
}
}, [router.isReady]);

How can I focus the cursor to the next TextInput in a React Draggable Menu?

I have a draggable context menu with three rows and three TextInputs. Right now I have two bugs:
When "tab" is hit, the menu closes
Even when I stop "tab" from closing (I return in the handleClose), "tab" doesn't focus the cursor to the next TextInput.
I've tried adding tabIndex={0} to the three divs that surround each TextInput, but this didn't help with the tab issue.
Does anyone know what might be wrong here?
Below is the simplified code (variables such as startNumber, endNumber, comments are state variables).
const handleClose = (event?, reason?) => {
if (reason && reason === 'tabKeyDown') {
// Prevent the 'Tab' key from closing the window
return;
}
setShouldOpen(false);
otherStuffHere();
}
...
return (
<Draggable cancel="textarea">
<Menu
open={shouldOpen}
onClose={handleClose}
anchorReference="anchorPosition"
anchorPosition={{ top: y, left: x }}
className={classes.myContextMenu}
>
<div className={classes.row}>
<div className={classes.title}>
<Text>First number</Text>
</div>
<div className={classes.text} tabIndex={0}>
<TextInput
fullWidth
value={startNumber}
disabled={readOnly}
onChange={handleStartNumberChange}
/>
</div>
</div>
<div className={classes.row}>
<div className={classes.title}>
<Text>End number</Text>
</div>
<div className={classes.text} tabIndex={0}>
<TextInput
fullWidth
value={endNumber}
disabled={readOnly}
onChange={handleEndNumberChange}
/>
</div>
</div>
<div className={classes.row}>
<div className={classes.title}>
<Text>Comments</Text>
</div>
<div className={classes.text} tabIndex={0}>
<TextInput
fullWidth
value={comments}
disabled={readOnly}
onChange={handleCommentsChange}
/>
</div>
</div>
</Menu>
</Draggable>
)
I wasn't able to find a solution while still using the Menu component, but I used the Popover component instead.
Using the same CSS and same everything else, I got the tab to work as intended without changing the UI.

Change State while hovering Button?

I´m at a bit of a loss. I´m fairly new at React. I have a background video which is playing through React.Player and I want to change the URL of it (they are local files in the project) while I hover the button.
I managed to change the url with the use of useState when I click the button with the onClick function. However, whileHover is not working for me :/ can someone help me out?
const [text, setText] = useState("videos/planet.mp4")
return (
<div
<div>
<Button whileHover={() => setText("videos/Transition.mp4")} >
"testbutton"
</Button>
</div>
<motion.div class="react-player.full">
<ReactPlayer
url={text}
width="120%"
height="120%"
playing="true"
loop="true"
align="center"
/>
</motion.div>
</div>
)
That´s not the whole code, just these two important things.
EDIT
solved it by adding a motion.wrapper around the button.
Use onMouseEnter and onMouseLeave
const [text, setText] = useState("videos/planet.mp4")
return (
<div
<div >
<Button
onMouseEnter={() => setText("videos/Transition.mp4")}
onMouseLeave={() => setText("videos/planet.mp4")} >
"testbutton"
</Button>
</div>
<motion.div class="react-player.full" >
<ReactPlayer
url={text}
width="120%"
height="120%"
playing="true"
loop="true"
align="center"
/>
</motion.div>
</div>
)

React mouseEnter event not working when on mapped children

I just want these child elements to show a remove button on mouseover...
console logging in handleMouseEnter shows that on render, ALL children fire the mouseEnter event. it seems stuck in a loop. debugging is next to impossible.
problems only arise when onMouseEnter and onMouseLeave are left in the code.
render(){
const handleMouseEnter = (tool) => this.setState({display : tool});
const handleMouseLeave = () => this.setState({display : "none"});
return (
<div>
<div className="search-result-background">
<div className="search-result-row row">
<div className="col-md-4">
</div>
<div className="col-md-4">
<form>
<TextFieldGroup className="find-tool-search-bar"
onChange= {this.checkToolExists}
value = {this.state.toolname}
field = 'toolname'
label = ''
error = {this.state.errors}
placeholder = "FIND IN FAVORITES"
/>
</form>
</div>
<div className="col-md-4">
<ButtonToolbar>
<DropdownButton noCaret onSelect={this.sort} bsSize="large" title="Sort by" id="dropdown-size-large">
<MenuItem eventKey="1">Name</MenuItem>
<MenuItem eventKey="2">Uploaded Date</MenuItem>
</DropdownButton>
</ButtonToolbar>
</div>
<h1 className="search-error">{this.state.errors}</h1>
<div className="col-md-12" >
{this.state.filteredTools.map((tool,i)=>
<div key ={i} className={"child " + tool.toolname } onMouseEnter={handleMouseEnter(tool.toolname)}
onMouseLeave={handleMouseLeave}> {this.state.display == tool.toolname ?
<button >remove?</button> : null}
<Link to={`/tools/${tool.id.substring(4)}`}>
<Thumbnail
className="thumb" src={logoImagePurple} alt="242x200">
<h3>{tool.toolname}</h3>
</Thumbnail>
</Link>
</div>
)}
</div>
</div>
</div>
</div>
)
}
}
The problem is this line:
onMouseEnter={handleMouseEnter(tool.toolname)}
You should change it to:
onMouseEnter={() => handleMouseEnter(tool.toolname)}

Categories