Closed kgnfth closed 3 years ago
Because click to close will check:
var elements = '.cool-lightbox-zoom, .cool-lightbox-zoom *, .cool-lightbox-thumbs, svg, path, rect, .cool-lightbox-thumbs *, .cool-lightbox-button, .cool-lightbox-toolbar__btn, .cool-lightbox-toolbar__btn *, .cool-lightbox-button *, .cool-lightbox__slide__img *, .cool-lightbox-video, .cool-lightbox-caption h6, .cool-lightbox-caption p, .cool-lightbox-caption a';
if (!event.target.matches(elements)) {
this.close()
}
A workaround is to add 'cool-lightbox-video' class to these controls:
let list = document.querySelectorAll(".plyr__control");
for (var i = 0; i < list.length; ++i) {
if (!list[i].classList.contains('cool-lightbox-video')) {
list[i].classList.add('cool-lightbox-video');
}
}
Look forward to the official fix.
Because click to close will check:
var elements = '.cool-lightbox-zoom, .cool-lightbox-zoom *, .cool-lightbox-thumbs, svg, path, rect, .cool-lightbox-thumbs *, .cool-lightbox-button, .cool-lightbox-toolbar__btn, .cool-lightbox-toolbar__btn *, .cool-lightbox-button *, .cool-lightbox__slide__img *, .cool-lightbox-video, .cool-lightbox-caption h6, .cool-lightbox-caption p, .cool-lightbox-caption a'; if (!event.target.matches(elements)) { this.close() }
A workaround is to add 'cool-lightbox-video' class to these controls:
let list = document.querySelectorAll(".plyr__control"); for (var i = 0; i < list.length; ++i) { if (!list[i].classList.contains('cool-lightbox-video')) { list[i].classList.add('cool-lightbox-video'); } }
Look forward to the official fix.
this works little but only when u click the play buttons
the rest buttons for example when u slide the volume, the modal moves together with it
and the fullscreen video is not on the center because of :style="aspectRatioVideo"
Hello @kgnfth and @killwing!
I'm working on this component again, I'll let you know as soon as I have it fixed.
Hey guys @killwing @killwing, please update the component to version 2.7.3
.
Things to consider:
fade
I added a new event called on-change-end
. So now the setup of the component should be like this: <CoolLightBox
effect="fade"
:items="items"
:index="index"
@on-change-end="plyr"
@close="index = null">
</CoolLightBox>
That is because when effect is fade the slide element is removed from the DOM when is changed, so we have to run that function every time when the new slide is shown.
swipe
the setup of the component should be like this: <CoolLightBox
effect="fade"
:items="items"
:index="index"
@on-open="plyr"
@close="index = null">
</CoolLightBox>
You should run once that function, only when the lightbox is opened.
Let me know if that works correct for you.
@lucaspulliese Hi, thank you it works great now, but there is one little issue where the plyr.js styles are little messed up
see demo here https://pixelphoto-demo.netlify.app/ click on plyr.js test
user = demo
pass = password
the plyr.js buttons is messed beacause of padding 0
https://github.com/lucaspulliese/vue-cool-lightbox/blob/master/src/components/CoolLightBox.vue#L2301
and the slider or seeker or progress or whatever it is called 🤣 is because of margin 0
https://github.com/lucaspulliese/vue-cool-lightbox/blob/master/src/components/CoolLightBox.vue#L2302
And the fullscreen stays at top left because of :style="aspectRatioVideo"
Oh yes, I see, sorry, my bad, could you post a screenshot of fullscreen stays at top left because of :style="aspectRatioVideo"
please? And I will let you know when all of this are fixed.
Found another issue: can not close the player when click outside. 😀
i have resolved the plyr style by removing the import statement, instead i add the css to the head
head() {
return {
link: [
{
rel: 'stylesheet',
href: '//cdnjs.cloudflare.com/ajax/libs/plyr/3.6.7/plyr.css',
},
],
}
},
this will load the plyr css above vue-cool-light-box but the fullscreen remains the same
you can see it in action here https://pixeldemo.netlify.app/albums/plyr-js-test
Whatever
For what it's worth, this was enough to get past this issue for me.
.plyr {
height: auto !important;
}
With fancybox you could do something like this in pure js
but with vue-cool-lightbox i can do it like this
it works, but when i click the middle play button, then the lightbox is closing same for the bottom left play button or other plyr interaction buttons see video for demonstration
https://user-images.githubusercontent.com/73314940/112304300-9e636400-8c9d-11eb-9bfc-39bfc9998d0a.mp4
Youtube link: https://youtu.be/ETddGVtEQbk