Open acwolff opened 9 months ago
Your lightbox.pswp.currSlide.data
for the video slide is just:
{html: '<video controls poster="slides/IMG_0877.jpg"><sou…t/slides/IMG_0877.mp4" type="video/mp4"> </video>'}
I'm not sure how do you generate it, but you can store either a reference to the element or contents of data-photodata
itself.
@dimsemenov I generate that in the 'itemData' event:
lightbox.on('itemData', (e) => {
const element = e.itemData.element;
if (element && element.dataset.pswpIsVideo) {
const videoURL = element.href;
const imgPoster= element.dataset.pswpIsPoster;
e.itemData = {
html: `<video controls poster="${imgPoster}"><source src="${videoURL}" type="video/mp4"> </video>`
};
}
But that is a rather complicated way to handle videos.
I still hope that you develop a video plugin!
you can do something like:
if (element && element.dataset.pswpIsVideo) {
const videoURL = element.href;
const imgPoster= element.dataset.pswpIsPoster;
e.itemData = {
html: `<video controls poster="${imgPoster}"><source src="${videoURL}" type="video/mp4"> </video>`,
photodata: element.dataset.photodata,
};
}
and then access it via pswp.currSlide.data.photodata
Yes that solves the problem, thanks!
@dimsemenov I wonder if there is not a simular way to solve this Dynamic caption issue: https://github.com/dimsemenov/photoswipe-dynamic-caption-plugin/issues/1
If I use the dynamic caption plugin in this album, videos do not show a caption with this code:
const captionPlugin = new PhotoSwipeDynamicCaption(lightbox, {
type: 'below',
mobileLayoutBreakpoint: 0,
captionContent: (slide) => {
try {
return slide.data.element.dataset.caption;
}
catch(err)
return null; //'', false or null;
}
}
});
So I tried this:
lightbox.on('itemData', (e) => {
const element = e.itemData.element;
if (element && element.dataset.pswpIsVideo) {
const videoURL = element.href;
const imgPoster= element.dataset.pswpIsPoster;
e.itemData = {
html: `<video controls poster="${imgPoster}"><source src="${videoURL}" type="video/mp4"> </video>`,
photodata: element.dataset.photodata,
caption: element.dataset.caption,
};
}
And changed the PhotoSwipeDynamicCaption:
const captionPlugin = new PhotoSwipeDynamicCaption(lightbox, {
type: 'below',
mobileLayoutBreakpoint: 0,
captionContent: (slide) => {
try {
return slide.data.element.dataset.caption;
}
catch(err) {
return pswp.currSlide.data.caption;
}
}
});
But that does not solve the video caption problem.
What should I change to solve also this caption problem?
ChatGPT advised to use this code:
`const captionPlugin = new PhotoSwipeDynamicCaption(lightbox, { type: 'below', mobileLayoutBreakpoint: 0, captionContent: (slide) => { try { // Check if the current slide is a video const isVideo = slide.data.element && slide.data.element.dataset.pswpIsVideo;
if (isVideo) {
// Log video caption
console.log('Video Caption:', slide.data.caption);
return slide.data.caption;
} else {
// Check if slide.data.element is defined
if (slide.data.element) {
// Log image caption
console.log('Image Caption:', slide.data.element.dataset.caption);
// Return image caption or fallback to the default caption
return slide.data.element.dataset.caption || pswp.currSlide.data.caption;
} else {
// Log a message if slide.data.element is undefined
console.warn('Image element is undefined.');
return pswp.currSlide.data.caption;
}
}
} catch (err) {
// Log any errors
console.error('Error in captionContent:', err);
return pswp.currSlide.data.caption;
}
}
}); ` But that does not solve the problem as you see in my test album https://andrewolff.jalbum.net/PhotoSwipeVideoTest/
If I click on the 2nd thumbnail, no caption is displayed and the console show this:
I have a data-photodata attribute for fetching metadata of a picture and video:
I use next code to show a button to display these metadata:
This works correctly for an image, but not for a video, see the first 2 slides of this album: https://andrewolff.jalbum.net/PhotoSwipeVideoTest/
My question is why is lightbox.pswp.currSlide.data.element.getAttribute('data-photodata') not showing the metadata of an mp4 video?