RPJosh
/
memories
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

viewer: ximg for live photo 

Signed-off-by: Varun Patil <varunpatil@ucla.edu>
pull/504/head
Varun Patil 2023-03-15 12:08:24 -07:00
parent 695b5c54ec
commit 033a70c0d0
2 changed files with 30 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

49
src/components/viewer/PsImage.ts
View File

@ -3,6 +3,32 @@ import { isVideoContent } from "./PsVideo";
import { isLiveContent } from "./PsLivePhoto";
import { fetchImage } from "../frame/XImgCache";
export function getXImgElem(
content: any,
onLoad: () => void
): HTMLImageElement {
const img = document.createElement("img");
img.classList.add("pswp__img");
img.style.visibility = "hidden";
// Fetch with Axios
fetchImage(content.data.src).then((blob) => {
// Check if destroyed already
if (!content.element) return;
// Insert image
const blobUrl = URL.createObjectURL(blob);
img.src = blobUrl;
img.onerror = img.onload = () => {
img.style.visibility = "visible";
onLoad();
URL.revokeObjectURL(blobUrl);
};
});
return img;
}
export default class ImageContentSetup {
constructor(lightbox: PhotoSwipe) {
this.initLightboxEvents(lightbox);
@ -16,28 +42,9 @@ export default class ImageContentSetup {
onContentLoad(e) {
if (isVideoContent(e.content) || isLiveContent(e.content)) return;
// Don't insert default image
// Insert image throgh XImgCache
e.preventDefault();
const content = e.content;
const img = document.createElement("img");
img.classList.add("pswp__img");
img.style.visibility = "hidden";
content.element = img;
// Fetch with Axios
fetchImage(content.data.src).then((blob) => {
// Check if destroyed already
if (!content.element) return;
// Insert image
const blobUrl = URL.createObjectURL(blob);
img.src = blobUrl;
img.onerror = img.onload = () => {
img.style.visibility = "visible";
content.onLoaded();
URL.revokeObjectURL(blobUrl);
};
});
e.content.element = getXImgElem(e.content, () => e.content.onLoaded());
}
onContentLoadImage(e) {

6
src/components/viewer/PsLivePhoto.ts
View File

@ -1,4 +1,5 @@
import PhotoSwipe from "photoswipe";
import { getXImgElem } from "./PsImage";
import * as utils from "../../services/Utils";
export function isLiveContent(content): boolean {
@ -46,10 +47,7 @@ class LivePhotoContentSetup {
utils.setupLivePhotoHooks(video);
const img = document.createElement("img");
img.classList.add("pswp__img");
img.src = content.data.src;
img.onload = () => content.onLoaded();
const img = getXImgElem(content, () => content.onLoaded());
div.appendChild(img);
content.element = div;