ps: improve thumb behavior

Signed-off-by: Varun Patil <varunpatil@ucla.edu>
pull/504/head
Varun Patil 2023-03-19 01:15:08 -07:00
parent efec80523a
commit d6a8198660
3 changed files with 27 additions and 48 deletions

View File

@ -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) => {

View File

@ -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;
}
}

View File

@ -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 {