Can't drag and drop a react-player component

Question

I'm trying to drag and drop a react-player video component. For some reason, the drag isn't working.

My guess is that the react-player component is grabbing the mouse action, and not passing it along to the react-dnd wrapper. So, maybe it's a bug/feature of react-player? I expected setting controls={false} to tell react-player not to do that, so maybe there's something I don't understand there.

Right now I see my options as one of:

Fork a private copy of react-player, and rip out the mouse interactions or turn them off by adding a mouse={false}. Perhaps add this functionality back to react-player.
Some type of react-dnd workaround such as a transparent component sitting above the video. Drag and drop the transparent component.

Do I have other options? Did I miss something? Does anyone have tips on turning off mouse events in react-player? Can anyone point me to an example of adding a transparent component to drag and drop? (I think I can do this one... but seeing an example might speed things up!)

Sample code - auto runs video

The above sample code combines two examples. The first example shows a video that cannot be dragged. The second has a video in a div larger than the video. You can drag the second video by the blue "handle" around the video, but you can't drag by grabbing the video itself.

(One last minor point. I'm not trying to have live video on the item being dragged, just a rectangle is fine. Live video being dragged would probably be too laggy anyway.)

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);

score 0 · Accepted Answer · answered May 02 '19 at 21:13

The trick is to turn controls off on the react-player.

But.

According to the react-player documentation, "Vimeo, Twitch and Wistia player will always display controls". In reality, there may be one or two addition players without the ability to turn display controls off.

If you play an mp4 file instead, everything just works!

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

Full code example with react-dnd working with react-player It even drags a screen shot of the video, which is more than I hoped for.

Can't drag and drop a react-player component

1 Answers1