Не могу перетащить компонент игрока реакции - PullRequest
Новая
       29

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

0 голосов
/ 30 апреля 2019

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

Я предполагаю, что компонент реагирующий игрок захватывает действие мыши, а не передает его оболочке реагирующий на вызов. Так что, может быть, это ошибка / особенность реакции-игрока? Я ожидал, что установив 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);

1 Ответ

0 голосов
/ 03 мая 2019

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

Но.

Согласно документации на реактивного игрока, "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}
/>

Полный пример кода, когда Reaction-Dnd работает с реагирующим плеером

...