diff --git a/src/components/viewer/PsImage.ts b/src/components/viewer/PsImage.ts index c91aaee5..f167d028 100644 --- a/src/components/viewer/PsImage.ts +++ b/src/components/viewer/PsImage.ts @@ -14,6 +14,7 @@ export default class ImageContentSetup { lightbox.on("zoomPanUpdate", this.zoomPanUpdate.bind(this)); lightbox.on("slideActivate", this.slideActivate.bind(this)); lightbox.addFilter("isContentLoading", this.isContentLoading.bind(this)); + lightbox.addFilter("placeholderSrc", this.placeholderSrc.bind(this)); } isContentLoading(isLoading: boolean, content: any) { @@ -33,16 +34,14 @@ export default class ImageContentSetup { e.preventDefault(); } + placeholderSrc(placeholderSrc: string, content: any) { + return content.data.msrc || placeholderSrc; + } + getXImgElem(content: any, onLoad: () => void): HTMLImageElement { const img = document.createElement("img"); img.classList.add("pswp__img", "ximg"); - - // Load thumbnail in case the user is scrolling fast - if (content.data.msrc) { - img.src = content.data.msrc; - } else { - img.style.visibility = "hidden"; - } + img.style.visibility = "hidden"; // Fetch with Axios fetchImage(content.data.src).then((blob) => { diff --git a/src/components/viewer/PsVideo.ts b/src/components/viewer/PsVideo.ts index 87ce2adb..317b7553 100644 --- a/src/components/viewer/PsVideo.ts +++ b/src/components/viewer/PsVideo.ts @@ -44,10 +44,6 @@ class VideoContentSetup { lightbox.on("contentDeactivate", this.onContentDeactivate.bind(this)); lightbox.on("contentResize", this.onContentResize.bind(this)); - lightbox.addFilter( - "isKeepingPlaceholder", - this.isKeepingPlaceholder.bind(this) - ); lightbox.addFilter("isContentZoomable", this.isContentZoomable.bind(this)); lightbox.addFilter( "useContentPlaceholder", @@ -240,8 +236,8 @@ class VideoContentSetup { } destroyVideo(content: any) { - if (isVideoContent(content) && content.videojs) { - content.videojs.dispose?.(); + if (isVideoContent(content)) { + content.videojs?.dispose?.(); content.videojs = null; content.plyr?.elements?.container?.remove(); @@ -438,12 +434,7 @@ class VideoContentSetup { } onContentDestroy({ content }) { - if (isVideoContent(content)) { - if (content.videojs) { - content.videojs.dispose?.(); - content.videojs = null; - } - } + this.destroyVideo(content); } onContentResize(e) { @@ -471,18 +462,8 @@ class VideoContentSetup { } } - isKeepingPlaceholder(isZoomable, content) { - if (isVideoContent(content)) { - return false; - } - return isZoomable; - } - isContentZoomable(isZoomable, content) { - if (isVideoContent(content)) { - return false; - } - return isZoomable; + return !isVideoContent(content) && isZoomable; } onContentActivate({ content }) { @@ -497,40 +478,30 @@ class VideoContentSetup { const content = e.content; if (!isVideoContent(e.content)) return; - // stop default content load + // Stop default content load e.preventDefault(); + content.type = "video"; if (content.element) return; // Create DIV content.element = document.createElement("div"); - content.element.classList.add("pswp__img"); - content.element.style.background = `url(${content.data.msrc})`; - content.element.style.backgroundSize = "cover"; + content.element.classList.add("video-container"); - if (config_videoIsSetup) { - content.state = "loading"; - content.type = "video"; - } else { - // Stop if video not setup + // Stop if video not setup + if (!config_videoIsSetup) { content.element.innerHTML = t( "memories", "Video not configured. Run occ memories:video-setup" ); - content.element.style.color = "red"; - content.element.style.display = "flex"; - content.element.style.alignItems = "center"; - content.element.style.justifyContent = "center"; + content.element.classList.add("error"); } content.onLoaded(); } - useContentPlaceholder(usePlaceholder, content) { - if (isVideoContent(content)) { - return true; - } - return usePlaceholder; + useContentPlaceholder(usePlaceholder: boolean, content: any) { + return isVideoContent(content) || usePlaceholder; } } diff --git a/src/components/viewer/Viewer.vue b/src/components/viewer/Viewer.vue index 0395a8fe..187bdc15 100644 --- a/src/components/viewer/Viewer.vue +++ b/src/components/viewer/Viewer.vue @@ -1256,6 +1256,15 @@ export default defineComponent({ .pswp__top-bar { background: linear-gradient(0deg, transparent, rgba(0, 0, 0, 0.3)); } + + .video-container { + &.error { + color: red; + display: flex; + align-items: center; + justify-content: center; + } + } } :deep .video-js .vjs-big-play-button {