0

I'm working on a carousel with html5 video and audio inside. All works fine but, when I click on options button (the three dots button), the player disappears. This happens for video and also for audio, only inside the carousel, the player is working fine outside.

I've used the react-slick component, here's my simple code: 

<Slider {...settings}>
    { (this.props.thePost || []).map((media, i) => {
        if (media.media_type == 'image') {
            return (
                <div className={"imageWrapper"} key={"theMedia-"+p.id+i}>
                    <img src={ endpoint.mediaRoot +'/'+ this.props.thePost[i].media_url } />
                </div>
            );
        }
        else if (media.media_type == 'video') {
            return (
                <div className="playerWrapper video" key={"theMedia-"+p.id+i} style={{ width:"100%"}}>
                    <Player src={ endpoint.mediaRoot +'/'+ this.props.thePost[videoIndex].media_url } />
                </div>
            );
        }
        else if (media.media_type == 'audio') {
            return (
                <div className="playerWrapper audio" key={"theMedia-"+p.id+i} style={{ width:"100%;"}}>
                    <div className="audioPlayer">
                        <Player src={ endpoint.mediaRoot +'/'+ this.props.thePost[audioIndex].media_url } />
                    </div>
                </div>
            );
        }
    })}
</Slider>

I think that the problem is related to transform: translate3d(-500px, 0px, 0px) (500px is just an example) that slick uses to scroll within slides. I've tried to add 3d transformation to a wrapper of a player (outside the carousel) and this broke the position of the overlay (the download / pip opened on three dots click). Is there a way to fix this?

Thank you in advance.

M0nst3R
  • 5,186
  • 1
  • 23
  • 36
red
  • 1,529
  • 1
  • 12
  • 33
  • 1
    We would have a much better chance of helping you if you provide a working example of your problem, do you think you can do that? – M0nst3R Jul 23 '19 at 08:58
  • Hi, really strange, I've created a working example but the problems not happen `https://codesandbox.io/s/sad-fast-foeg0` I've to looking in my code what is wrong. – red Jul 23 '19 at 09:30
  • That link contains an empty Sandbox, could you make sure it's the correct link? Also, if it works on Sandbox, maybe you have problems with the versions of libraries you're using locally. – M0nst3R Jul 23 '19 at 09:38
  • Hi, please refresh, I can see my sandbox at that link, maybe I haven't save sandbox before share, now I've saved it. Thank you for your help – red Jul 23 '19 at 09:42
  • 1
    I've looked at it, I could not find the source of the issue but it seems that if you do not need `infinite: true`, the problem is resolved. Although, another problem remains, and it's with the positioning of the three dots menu. – M0nst3R Jul 23 '19 at 10:05

0 Answers0