custom onClick in light mode

[kien-pham]

Current Behavior

I use light mode to show thumb for the videos. When click on a video, it will show modal. After close modal, the video I just click not show thumb as normal. It show video player instead.

Expected Behavior

I know, when click on light mode, video will play. But is there any way to make it custom onClick instead playing video? This is my code

<ReactPlayer
                        ref={vidRef}
                        url={mp4}
                        playing={playing}
                        light={vidCover}
                        playIcon={<div className="lg:h-96 h-40"></div>}
                        onPlay={() => setPlaying(true)}
                        onPause={() => setPlaying(false)}
                        stopOnUnmount
                        playsinline={true}
                        pip={false}
                        width='100%'
                        height='100%'
                        className="h-full object-cover"
                        onClick={props.handleOpenModal}
                        onMouseOver={() => setVidCover(props.dynamic_cover)}
                        onMouseOut={() => setVidCover(props.cover)}
                    />

Steps to Reproduce

I attach video here for better exlaination

https://user-images.githubusercontent.com/43236511/129466107-801f43a6-1532-4f17-8f5d-9bf8bc46ad8d.mov

Thanks for help

[anjanvb]

Same as #1295

[msuhov]

Would it be more simple to add a layer on top of your video and click on it?

const handleOnClick = (e) => {
 e.stopPropagation()
 ...
}

<div style="position: relative">
  <ReactPlayer />
  <div style="position: absolute; z-index: 2, top: 0, left: 0, bottom: 0, right: 0" onClick={handleOnClick} />
</div>

[anjanvb]

Would it be more simple to add a layer on top of your video and click on it?

const handleOnClick = (e) => {
 e.stopPropagation()
 ...
}

<div style="position: relative">
  <ReactPlayer />
  <div style="position: absolute; z-index: 2, top: 0, left: 0, bottom: 0, right: 0" onClick={handleOnClick} />
</div>

Sort of. That could work. What would be ideal is a thumbnail={true} prop in case light is used in which case the onClickPreview would do whatever I want it to do without playing the video in-line.

What I ended up doing is render just an <img> element with the thumbnail image URL. I am using Youtube and self uploaded MP4s only so it's rather easy to capture the thumbnail URL (for self uploaded MP4s I use a placeholder image, and for Youtube I use the youtube's oembed endpoint to grab the Thumbnail URL and store them). It was a bit of work but it worked for me, however I am not sure how easy it would be to capture the thumbnail URLs for other players, in which case your idea should work just fine.

[kien-pham]

I also endup like @anjanvb, I render images instead video player.