diff --git a/Plugins/ShowImageDetails/ShowImageDetails.plugin.js b/Plugins/ShowImageDetails/ShowImageDetails.plugin.js
index 34b7902e4d..2e85baea72 100644
--- a/Plugins/ShowImageDetails/ShowImageDetails.plugin.js
+++ b/Plugins/ShowImageDetails/ShowImageDetails.plugin.js
@@ -2,6 +2,11 @@
class ShowImageDetails {
initConstructor () {
+ this.patchModules = {
+ "LazyImageZoomable":"componentDidMount",
+ "StandardSidebarView":"componentWillUnmount"
+ };
+
this.css = `
.image-details .image-details-size {
margin: 0 10px;
@@ -30,7 +35,7 @@ class ShowImageDetails {
getDescription () {return "Display the name, size and dimensions of uploaded images (does not include embed images) in the chat as an header or as a tooltip.";}
- getVersion () {return "1.0.9";}
+ getVersion () {return "1.1.0";}
getAuthor () {return "DevilBro";}
@@ -83,41 +88,7 @@ class ShowImageDetails {
if (typeof BDFDB === "object") {
BDFDB.loadMessage(this);
- var observer = null;
-
- observer = new MutationObserver((changes, _) => {
- changes.forEach(
- (change, i) => {
- if (change.addedNodes) {
- change.addedNodes.forEach((node) => {
- if (node.tagName && (node.querySelector(BDFDB.dotCN.message) || node.classList.contains(BDFDB.disCN.message))) {
- this.addDetails(node);
- }
- });
- }
- }
- );
- });
- BDFDB.addObserver(this, BDFDB.dotCN.messages, {name:"chatWindowObserver",instance:observer}, {childList:true, subtree:true});
-
- observer = new MutationObserver((changes, _) => {
- changes.forEach(
- (change, i) => {
- if (change.removedNodes) {
- change.removedNodes.forEach((node) => {
- if (node && $(node).attr("layer-id") == "user-settings" && this.updateDetails) {
- document.querySelectorAll(".image-details-added").forEach(image => {this.resetImage(image);});
- this.addDetails(document);
- this.updateDetails = false;
- }
- });
- }
- }
- );
- });
- BDFDB.addObserver(this, BDFDB.dotCN.layers, {name:"settingsWindowObserver",instance:observer}, {childList:true});
-
- this.addDetails(document);
+ BDFDB.WebModules.forceAllUpdates(this);
}
else {
console.error(this.getName() + ": Fatal Error: Could not load BD functions!");
@@ -126,19 +97,12 @@ class ShowImageDetails {
stop () {
if (typeof BDFDB === "object") {
- document.querySelectorAll(".image-details-added").forEach(image => {this.resetImage(image);});
+ document.querySelectorAll(".image-details-added").forEach(wrapper => {this.resetImage(wrapper);});
BDFDB.unloadMessage(this);
}
}
- onSwitch () {
- if (typeof BDFDB === "object") {
- this.addDetails(document);
- BDFDB.addObserver(this, BDFDB.dotCN.messages, {name:"chatWindowObserver"}, {childList:true, subtree:true});
- }
- }
-
// begin of own functions
@@ -151,51 +115,41 @@ class ShowImageDetails {
this.updateDetails = true;
}
- addDetails (container) {
- let scroller = document.querySelector(BDFDB.dotCNS.chat + BDFDB.dotCN.messages);
- if (!container || typeof container.querySelectorAll != "function" || !scroller) return;
- var settings = BDFDB.getAllData(this, "settings");
- container.querySelectorAll(BDFDB.dotCN.messageaccessory + " > " + BDFDB.dotCN.imagewrapper).forEach(image => {
- var data = this.getImageData(image);
- if (data) {
- image.classList.add("image-details-added");
- if (!settings.showOnHover) {
- $(``).insertBefore(image).append(image);
- scroller.scrollTop += image.parentElement.getBoundingClientRect().height - image.getBoundingClientRect().height;
- }
- else {
- $(image).on("mouseenter." + this.getName(), () => {
- BDFDB.createTooltip(`${data.filename}
${BDFDB.formatBytes(data.size)}
${data.width}x${data.height}px
`, image, {type:"right", html:true, selector:"image-details-tooltip", delay:BDFDB.getData("hoverDelay", this, "amounts")});
- });
- }
- }
- });
- }
-
- resetImage (image) {
- image.classList.remove("image-details-added");
- $(image).off("." + this.getName());
- var wrapper = image.parentElement;
+ resetImage (wrapper) {
+ wrapper.classList.remove("image-details-added");
+ $(wrapper).off("." + this.getName());
+ var wrapper = wrapper.parentElement;
if (wrapper.classList.contains("image-details-wrapper")) {
- wrapper.parentElement.insertBefore(image, wrapper);
+ wrapper.parentElement.insertBefore(wrapper, wrapper);
wrapper.remove();
}
}
- getImageData (attachment) {
- var messageInfo = BDFDB.getKeyInformation({"node":attachment,"key":"message","up":true,"time":1000});
- if (messageInfo) {
- var message = null, temp = attachment;
- while (message == null || temp.parentElement) {
- temp = temp.parentElement;
- if (temp.classList && temp.classList.contains(BDFDB.disCN.message)) message = temp;
- }
- if (message) {
- var pos = $(message).find(BDFDB.dotCN.imagewrapper).index(attachment);
- var info = messageInfo.attachments;
- if (info && pos > -1) info = info[pos];
- return info;
+ processLazyImageZoomable (instance, wrapper) {
+ let fiber = instance._reactInternalFiber;
+ if (fiber.return && fiber.return.return && fiber.return.return.memoizedProps && fiber.return.return.memoizedProps.attachment) {
+ let info = fiber.return.return.memoizedProps.attachment;
+ if (info && !info.filename.endsWith(".bdemote.png") && !info.filename.endsWith(".bdemote.gif")) {
+ let scroller = BDFDB.getParentEle(BDFDB.dotCN.messages, wrapper);
+ wrapper.classList.add("image-details-added");
+ if (!settings.showOnHover) {
+ $(``).insertBefore(wrapper).append(wrapper);
+ scroller.scrollTop += wrapper.parentElement.getBoundingClientRect().height - wrapper.getBoundingClientRect().height;
+ }
+ else {
+ $(wrapper).on("mouseenter." + this.getName(), () => {
+ BDFDB.createTooltip(`${info.filename}
${BDFDB.formatBytes(info.size)}
${info.width}x${info.height}px
`, wrapper, {type:"right", html:true, selector:"image-details-tooltip", delay:BDFDB.getData("hoverDelay", this, "amounts")});
+ });
+ }
}
}
}
+
+ processStandardSidebarView (instance, wrapper) {
+ if (this.updateDetails) {
+ this.updateDetails = false;
+ document.querySelectorAll(".image-details-added").forEach(wrapper => {this.resetImage(wrapper);});
+ BDFDB.WebModules.forceAllUpdates(this);
+ }
+ }
}
\ No newline at end of file