Не могу перетащить компонент игрока реакции

Question

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

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

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

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

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

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

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

Приведенный выше пример кода объединяет два примера. Первый пример показывает видео, которое нельзя перетаскивать. Второй имеет видео в 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);

Answer 1

Хитрость в том, чтобы отключить управление на реактивном игроке.

Но.

Согласно документации реагирующего игрока, "Vimeo, Twitch и Wistia player всегда будут отображать элементы управления". В действительности, могут быть один или два дополнительных игрока без возможности отключить элементы управления дисплеем.

Если вы вместо этого воспроизводите файл mp4, все работает!

<ReactPlayer
  url="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4"
  height="100px"
  width="100px"
  volume={0.8}
  muted={true}
  playing={true}
  controls={false}
/>

Полный пример кода с реакцией-dnd, работающей с игроком-реагированием. Он даже перетаскивает снимок экрана с видео, а это больше, чем я надеялся.