Проблема в пользовательских функциях Mute / UnMute в Reaction-JW-Player

Question

Я использовал act-jw-player для одного из моих реактивных проектов.

Мне нужно добавить одну пользовательскую кнопку для отключения / включения звука видеоплеера. Я реализовал mobx для обновления значений параметров. Он обновляет значения, но не отражает jwPlayer.

Сначала я попробовал без mobx , и это работает, но перезагружает весь плеер, поэтому мой список воспроизведения начинает воспроизводиться с первого раза. Поэтому я решил настроить mobx в этом. Он обновляет данные, но не влияет на игрока.

PlayerStore.js

class PlayerStore {

    @observable isMute = true;

    @action muteUnmuteVideo = (isMute) => {
        this.isMute = isMute;
    }
}

var Store = new PlayerStore();

export default Store;

MuteButton.js

@inject('Store')

export class MuteButton extends Component {

    constructor(props) {

        super(props);
        this.state = {isMute: true};

        // This binding is necessary to make `this` work in the callback
        this.handleClick = this.handleClick.bind(this);
    }

    handleClick() {

        this.setState(prevState => ({
            isMute: !prevState.isMute
        }));

        this.props.Store.muteUnmuteVideo(this.state.isMute);
    }

    render() {
        return (

            <button onClick={this.handleClick} className="btn mute-btn" id="mute-btn">Click Here</button>
        );
    }
}
export default MuteButton;

CustomJwPlayer.js

@inject('Store')
@observer
export class CustomJwPlayer extends Component {

    render() {

        const  { Store, playlist, isAutoPlay, isMuted, customProps } = this.props;

        return (

            <div className="full-height" >

                <ReactJWPlayer
                    className="single-player"
                    playerId='my-unique-id'
                    playerScript='https://content.jwplatform.com/libraries/4hK3AT2X.js'
                    playlist={playlist}
                    isAutoPlay={isAutoPlay}
                    isMuted={Store.isMute}
                    customProps={{ 
                        controls: false,
                        repeat: true,
                        defaultBandwidthEstimate: 400000,
                        stretching: 'fill',
                        preload: 'auto',
                        volume: 100,
                        width: '100%',
                        height: '100%',
                    }}
                />
            </div>
        );
    }
}
export default CustomJwPlayer;

Answer 1

попробуйте использовать обратный вызов setState

handleClick() {
    this.setState({
        isMute: !this.state.isMute
    }, () => {
    this.props.Store.muteUnmuteVideo(this.state.isMute);
  });
}