Rails + Webpacker-React, не могу установить currentTime видео в Active Storage

Question

Итак, у меня есть приложение (ссылка на репо) , где пользователи могут загружать видео через Rails Active Storage для создания постов.Когда я просматриваю посты, я хочу, чтобы пользователи могли нажимать на метки времени, которые изменят текущее время видео поста и позволят им просматривать его.Я смог получить видео для показа и воспроизведения , но не могу найти его для поиска .Шаг за шагом, вот что происходит:

Rails рендерит app/views/posts/_post_modal.html.haml, модал, который дает подробный обзор поста с отзывами и советами при нажатии кнопки на посте.Ниже приведены строки 17-26, где подготовлена ​​полезная нагрузка для реакции.Я передаю path видео в качестве атрибута в <div id="owc-post-payload">

.modal-body.border-dark
  - reviews = Review.where(post_id: post.id)
  - tips = []
  - profiles = []
  - reviews.each do |review|
    - Tip.where(review_id: review.id).each { |tip| tips.push(tip) }
    - profiles.push(Profile.find(review.profile_id))
  #owc-post-payload{ post: post.to_json, video: rails_blob_path(post.video).to_json, reviews: reviews.to_json, profiles: profiles.to_json, tips: tips.to_json }
  #owc_post
  = javascript_pack_tag 'owc_post'

Далее инициализируется состояние моего компонента (управляется Redux).Половина штата в reviewsReducer.js.Другая половина находится в timestampReducer.js.

В app/javascript/owc_post, index.js отображает App.js (ниже) в /components, что делает VideoPlayer.js.

const App = (props) => (
  <div className='row'>
    <div className='col-xl-6 pr-3 sticky-top'>
      <div className='mb-2 sticky-top'>
        <VideoPlayer post={post.id} source={video} timestamp={props.timestamp} />
      </div>
      <button onClick={(e) => { props.dispatch(changeTime(15)) }}>=15</button>
      <button onClick={(e) => { props.dispatch(changeTime(30)) }}>=30</button>
      <button onClick={(e) => { props.dispatch(changeTime(45)) }}>=45</button>
    </div>
    <div className='col-xl-6'>
      ...
    </div>
  </div>
);

Вот в чем проблема. Когда я нажимаю одну из кнопок в <App/> ("= 15", "= 30", "= 45"), state.timestampReducer изменяется, что также меняет реквизит <VideoPlayer/> (ниже).Это вызывает componentDidUpdate(), что вызывает seek() внутри seek() Я ясно вижу, что мой компонент обновляется через console.log() s, но свойство currentTime видео не изменится, и я понятия не имею, почему.

export default class VideoPlayer extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      source: props.source,
      timestamp: props.timestamp
    };
    this.videoRef = React.createRef();
  }

  componentDidUpdate(prevProps) {
    if (this.props !== prevProps) {
      this.setState(
        { timestamp: this.props.timestamp },
        () => { this.seek() }
      );
    }
  }

  seek = () => {
    console.log('inside seek')
    console.log(this.state.timestamp)
    console.log(this.videoRef.current)
    console.log('before: ' + this.videoRef.current.currentTime)
    this.videoRef.current.currentTime = this.state.timestamp;
    console.log('after: ' + this.videoRef.current.currentTime)
  }

  render() {
    return (
      <div>
        <video
          ref={this.videoRef}
          id='video-player'
          height='200px'
          type='video/mp4'
          controls>
          <source src={this.state.source} type='video/mp4' />
        </video>
      </div>
    );
  }
}

Здесь у меня есть скриншот того, как я нажимаю на разные кнопки и получаю обратную связь.Последний before: 0.752294 - это когда я позволяю воспроизвести видео, а затем нажимаю кнопку.CurrentTime всегда сбрасывается в 0 после нажатия кнопки.

Так что это моя проблема.Я не могу заставить его искать.Пожалуйста, дайте мне знать, если вам нужна дополнительная информация, и заранее благодарю за помощь.