Невозможно сделать так, чтобы световая опора реагирующего игрока всегда была истинной.

Я реализовал слайдер как свойство. Внутри каждого слайда есть видео и его название. Я использую react-player для отображения миниатюры видео. Как только вы нажмете на любое видео, модальное окно откроется и воспроизведет видео, которое я визуализировал, проигрыватель реакции заключается в том, что свойство света всегда истинно. Но это не работает, когда вы нажимаете на видео, в этом конкретном положении ползунка теряется свойство света.

import React, { Component } from 'react'
import IndividualSlider from './IndividualSlider'
import ModalVideo from 'react-modal-video'
import { Modal, Button } from 'antd';

import ReactPlayer from 'react-player/youtube';


export class Experience extends Component {
  constructor(){
    super();
    this.state={
        Video:[
            {
                url:'https://www.youtube.com/embed/H2yCdBIpxGY',
                name:'Recurssion'
            },
            {
                url:'https://www.youtube.com/embed/s5YgyJcoUI4',
                name:'Array'
            },
            {
                url:'https://www.youtube.com/embed/_C4kMqEkGM0',
                name:'DP'
            },
            {
                url:'https://www.youtube.com/embed/VBnbYNksWTA',
                name:'Graph'
            },
            {
                url:'https://www.youtube.com/embed/M1q3Pzk2UXs',
                name:'Trie'
            }
        ],
        modalIsOpen:false,
        modalLink:""
    }
    this.left = this.left.bind(this);
    this.right=this.right.bind(this);
    this.modalPlay = this.modalPlay.bind(this);
    this.handleCancel = this.handleCancel.bind(this);
    this.handleOk = this.handleOk.bind(this);
}

    handleOk = e => {
      console.log(e);
      this.setState({
      modalIsOpen: false,
     });
    };

    handleCancel = e => {
      console.log(e);
      this.setState({
      modalIsOpen: false,
     });
    };

   modalPlay=(link)=>{
     this.setState({
        modalIsOpen:true,
        modalLink:link
    })
   }

  right=()=>{
    let arr = this.state.Video;
    let temp = arr[0];
    arr.shift();
    arr.push(temp);
    this.setState({
        Video:arr
    })
   }

   left=()=>{
    let arr = this.state.Video;
    let temp = arr[arr.length-1];
    arr.pop();
    arr.unshift(temp);
    this.setState({
        Video:arr
    })
   }

   render() {
    return (
        <div className="ExperienceAClass">
            <div className="OneWeekHeading">
                <h2 className="OneWeekCaption">
                    Experience a class
                </h2>
                <hr className="MentorsCaptionUnderLine" align="center" width="50%"></hr>
            </div>

             <Modal
                title=""
                visible={this.state.modalIsOpen}
                onOk={this.handleOk}
                onCancel={this.handleCancel}
                footer={null}

            >
              <ReactPlayer className="ModalVideo" url={this.state.modalLink}/>  
             </Modal>    
            
            <div className="EntireSliderWrapper">
            <a class="prev" onClick={this.left}>
            </a>

            <div className="VideoSlider">
                {this.state.Video.map((child,index)=>{
                        return <IndividualSlider modalPlay={this.modalPlay} url={child.url} name= 
                                {child.name}/>
                })
                }
            </div> 
            <a class="next" onClick={this.right}>
            </a>       
            </div>      
        </div>       
      )
  }
}

export default Experience

И компонент IndividualSlider выглядит следующим образом:

import React, { Component } from 'react'
import ReactPlayer from 'react-player/youtube';


export class IndividualSlider extends Component {
 constructor(){
    super();
    this.state={
        light:true
    }
    this.onClick=this.onClick.bind(this)
 }

  onClick=()=>{
    let modalPlay=this.props.modalPlay;
    modalPlay(this.props.url);
   }

   render() {
     return (
        <div className="VideoDetails fade">
             <ReactPlayer className="YoutubeVideo" onClick={this.onClick} light = 
              {this.state.light} url={this.props.url}/>
            <p>
                {this.props.name}
            </p>
        </div>
    )
  }
}

export default IndividualSlider

В приведенном выше коде я сделал свойство light всегда истинным. При щелчке слайда этот компонент отображается, но свойство эскиза не сохраняется.

Кроме того, когда модальное окно закрывается, видео продолжает воспроизводиться. Как с этим быть?

Как вы можете видеть, видео, которое было воспроизведено, восстанавливает свое light={true} после скольжения, но позиция, в которой оно было при воспроизведении, не означает light={true}