CODEWITHSUNDEEP
reactjs
moesh
moesh

Reputation: 319

React Uncaught (in promise) DOMException: The play() request was interrupted by a new load request

I am trying to load video with a queue system using ReactJS for my UI. But when I setState to change the url of the video I get the error "Uncaught (in promise) DOMException: The play() request was interrupted by a new load request."

Here is my code: 

class Videoplayer extends Component {
    constructor(props){
        super(props);
        this.state = {
            queue: ['fi4s9uwrg9']
        }
    }
    componentWillMount(){
        fetch(/api).then((res)=>{
            res.json().then((data)=>{
                let hashedqueue = [];
                data.forEach((vid)=>hashedqueue.push(vid.hashed_id));
                this.setState({
                    queue: hashedqueue
                })          
            })
        })
    }
    finishedPlaying(){
        let videos = this.state.queue;
        videos.shift();
        this.setState({queue:videos}) //this is the line thats causing the issue
    }

    render(){       
        return(
        <div className="videoplayer">
            <ReactPlayer ref={player => { this.player = player }} onEnded={()=>this.finishedPlaying()} url={'/videosource/'+this.state.queue[0]} playing />
        </div>
        )
    }
}

By the way the hashedid is essentially the id of the video

Edit: I'm using this package: https://www.npmjs.com/package/react-player for the video player so I can use wistia with react

Upvotes: 0

Views: 2717

Answers (1)

Danny Delott
Danny Delott

Reputation: 7008

If you need access to the state to perform a state update, use a callback instead:

  finishedPlaying() {
    this.setState(prevState => {
      // make a shallow copy so as not to mutate state
      const videos = [...prevState.queue];
      videos.shift();
      return { queue: videos };
    });
  }

Upvotes: 0

Related Questions