Video auto close on play

[howdyhyber]

Description

I have a list of videos then when I click it, it will show fullscreen. There are times when I play the video, it will close automatically even if there is no actions done.

samplevideo.mov

[howdyhyber]

Additional Note : i noticed that it keeps on initializing even though there is no changes with the images array. When it re initialize, that's when the full screen view will suddenly close.

[bytesandbots3]

Hey @howdyhyber, Thanks for letting us know about the issue. Can you help us out by telling us which framework you're using (like React, Angular, or Vue)? Also, could you share the part of the code that's about the gallery? That way, we can help you more effectively. Thanks

[howdyhyber]

Hi, im using React for this project.

This is the code right now.

<LightGallery onInit={this.onInit} plugins={[lgVideo, lgThumbnail]} mode="lg-fade" licenseKey={"license here"}> { activeItem === 'image-front' || activeItem === 'image-back' || activeItem === 'image-cargo-bay' ? this.state.camreq_storage.map((image, index) => ( <a className="gallery-item" key={index} data-src={image.src} style={{ padding: 5, display: 'flex', flexDirection: 'column', color: 'black' }}> <img className="img-responsive" style={{ height: 166, width: 166, margin: 2, borderRadius: 5 }} src={image.src} /> <b style={{ marginTop: 5, fontSize: 12 }}>{dateFormat(new Date(image.requestedDatetime), "mmm dd yyyy, hh:MM TT")}</b> </a> )) : activeItem === 'video-front' || activeItem === 'video-back' ? this.state.camreq_storage.map((image, index) => ( <div style={{ height: 195, width: 166, margin: 5, borderRadius: 10, position: 'relative' }} key={index} data-lg-size="1800-1800" data-sub-html={"<b>Captured Video</b>"} data-video={JSON.stringify({ source: [{ src: image.src, type: 'video/mp4' }], attributes: { preload: true, playsinline: false, controls: true } })} > <img width="128" height="128" style={{ height: 166, width: 166, margin: 2, borderRadius: 5, marginBottom: 5 }} className="img-responsive" src={image.thumbnail} /> <Icon inverted color="grey" name='play circle outline' size='huge' style={{ position: 'absolute', top: '50%', left: '50%', transform: "translate(-50%,-50%)", }} /> <div style={{ overflow: 'hidden', whiteSpace: 'nowrap', textOverflow: 'ellipsis' }}> <b style={{ fontSize: 12 }}>Captured Video</b><br /> <i style={{ marginTop: 5, fontSize: 12 }}>{dateFormat(new Date(image.requestedDatetime), "mmm dd yyyy, hh:MM TT")}</i> </div> </div> )) : "" } </LightGallery>

this is the onInit function :

onInit = (gallery) => { console.log("Gallery Init : ", gallery); this.gallery = gallery.instance; }

Thats how I conclude that the fullscreen view will close once the console.log inside onInit logs.

[bytesandbots3]

@howdyhyber , when I check here
(link: https://stackblitz.com/edit/stackblitz-starters-vokuec?file=src%2Fstyle.scss,src%2FApp.tsx),

I didn't reproduce the closing issue. Is there anything else to add to the code?

[howdyhyber]

im using videos from s3, will it matter?