Невозможно перетащить компонент реагирующего игрока

Я пытаюсь перетащить видеокомпонент реагирующего проигрывателя. По какой-то причине перетаскивание не работает.

Я предполагаю, что компонент react-player захватывает действие мыши, а не передает его оболочке react-dnd. Итак, может быть, это ошибка/особенность реагирующего игрока? Я ожидал, что настройка controls = {false} скажет react-player не делать этого, так что, возможно, я чего-то не понимаю.

Прямо сейчас я вижу свои варианты как один из:

• Создайте приватную копию react-player и удалите взаимодействия с мышью или отключите их, добавив mouse = {false}. Возможно, добавьте эту функцию обратно в react-player.

• Некоторый обходной путь react-dnd, такой как прозрачный компонент, расположенный над видео. Перетащите прозрачный компонент.

Есть ли у меня другие варианты? Я что-то пропустил? Есть ли у кого-нибудь советы по отключению событий мыши в реагирующем плеере? Может ли кто-нибудь указать мне пример добавления прозрачного компонента для перетаскивания? (Я думаю, что могу сделать это... но просмотр примера может ускорить процесс!)

Пример кода - автозапуск видео

Приведенный выше пример кода объединяет два примера. В первом примере показано видео, которое нельзя перетащить. Второй имеет видео в div больше, чем видео. Вы можете перетащить второе видео за синюю «ручку» вокруг видео, но вы не можете перетащить, захватив само видео.

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

import React, { Component } from "react";
// import ReactDOM from "react-dom";
import { DndItemTypes } from "./dndConstants";
import { DragSource as dragSource } from "react-dnd";
import ReactPlayer from "react-player";

const boxSource = {
  beginDrag: (props, monitor, component) => {
    return { name: "Drag me" };
  },

  endDrag: (props, monitor, component) => {
    if (!monitor.didDrop() || !component) {
      return;
    }
  },

  canDrag: props => {
    return true;
  }
};

const collect = (connect, monitor) => {
  return {
    connectDragSource: connect.dragSource(),
    connectDragPreview: connect.dragPreview(),
    isDragging: monitor.isDragging(),
    canDrag: monitor.canDrag()
  };
};

class DragBox extends Component {
  render() {
    const {
      connectDragSource,
      connectDragPreview
      // isDragging, canDrag
    } = this.props;

    return connectDragPreview(
      <div>
        <p style = {{ margin: "10px" }}>Try to drag this video, and fail</p>
        {connectDragSource(
          <div
            style = {{
              height: "100px",
              width: "100px"
            }}
          >
            <ReactPlayer
              url = "https://vimeo.com/245291363"
              height = "100px"
              width = "100px"
              volume = {0.8}
              muted = {true}
              playing = {true}
              controls = {false}
            />
          </div>
        )}
      </div>
    );
  }
}

module.exports = dragSource(DndItemTypes.DROP_BOX, boxSource, collect)(DragBox);