This commit is contained in:
Mirco Wittrien 2023-01-22 20:08:42 +01:00
parent 2aa5956d7e
commit 4f1b232608
2 changed files with 60 additions and 50 deletions

View File

@ -292,7 +292,8 @@
"Image": ["containerRef"], "Image": ["containerRef"],
"ImageReadyStates": ["LOADING", "ERROR"] "ImageReadyStates": ["LOADING", "ERROR"]
}}, }},
"ImageModal": {"strings": ["mobileCloseWrapper", "closeAction"]}, "ImageModal": {"strings": ["renderLinkComponent", ".Messages.OPEN_IN_BROWSER", "animated"]},
"ImageVideoModal": {"strings": ["renderLinkComponent", ".Messages.OPEN_IN_BROWSER", "videoWrapper"]},
"LayerContainerComponents": {"strings": ["layerContainerElement", "LayerProvider"], "exported": false, "value": "exports", "map": { "LayerContainerComponents": {"strings": ["layerContainerElement", "LayerProvider"], "exported": false, "value": "exports", "map": {
"createLayer": [".createContext"], "createLayer": [".createContext"],
"LayerContainer": [".layerContainer", "missing parent"] "LayerContainer": [".layerContainer", "missing parent"]
@ -442,7 +443,8 @@
"HomeButton": {"strings": ["isOnOtherSidebarRoute", "showProgressBadge", "maybeTrackExposure"]}, "HomeButton": {"strings": ["isOnOtherSidebarRoute", "showProgressBadge", "maybeTrackExposure"]},
"HomeButtonDefault": {"strings": ["BUTTON_HOME", ".homeIcon", ".DISCODO_ENABLED"]}, "HomeButtonDefault": {"strings": ["BUTTON_HOME", ".homeIcon", ".DISCODO_ENABLED"]},
"I18nLoader": {"strings": [".Messages.I18N_LOCALE_LOADING_ERROR", ".loading"]}, "I18nLoader": {"strings": [".Messages.I18N_LOCALE_LOADING_ERROR", ".loading"]},
"ImageModal": {"strings": ["._mobileCloseRef", "mobileCloseWrapper", "renderMobileCloseButton", "\"ESC\""]}, "ImageModal": {"strings": ["renderLinkComponent", ".Messages.OPEN_IN_BROWSER", "animated"]},
"ImageVideoModal": {"strings": ["renderLinkComponent", ".Messages.OPEN_IN_BROWSER", "videoWrapper"]},
"InboxHeader": {"strings": [".UNREADS", ".TODOS", ".controls"]}, "InboxHeader": {"strings": [".UNREADS", ".TODOS", ".controls"]},
"IncomingCallModal": {"strings": [".Messages.INCOMING_VIDEO_CALL_ELLIPSIS", ".isFocused", "maxX:window.innerWidth"]}, "IncomingCallModal": {"strings": [".Messages.INCOMING_VIDEO_CALL_ELLIPSIS", ".isFocused", "maxX:window.innerWidth"]},
"InviteGuildName": {"strings": [".guild;return", "().guildName", "().guildNameWrapper"]}, "InviteGuildName": {"strings": [".guild;return", "().guildName", "().guildNameWrapper"]},

View File

@ -2,7 +2,7 @@
* @name ImageUtilities * @name ImageUtilities
* @author DevilBro * @author DevilBro
* @authorId 278543574059057154 * @authorId 278543574059057154
* @version 5.0.8 * @version 5.0.9
* @description Adds several Utilities for Images/Videos (Gallery, Download, Reverse Search, Zoom, Copy, etc.) * @description Adds several Utilities for Images/Videos (Gallery, Download, Reverse Search, Zoom, Copy, etc.)
* @invite Jx3TjNS * @invite Jx3TjNS
* @donate https://www.paypal.me/MircoWittrien * @donate https://www.paypal.me/MircoWittrien
@ -61,6 +61,7 @@ module.exports = (_ => {
var ownLocations = {}, downloadsFolder; var ownLocations = {}, downloadsFolder;
var firstViewedImage, viewedImage, viewedImageTimeout; var firstViewedImage, viewedImage, viewedImageTimeout;
var switchedImageProps;
var cachedImages; var cachedImages;
var eventTypes = {}; var eventTypes = {};
@ -115,7 +116,7 @@ module.exports = (_ => {
className: BDFDB.DOMUtils.formatClassName(BDFDB.disCN._imageutilitiessibling, this.props.className), className: BDFDB.DOMUtils.formatClassName(BDFDB.disCN._imageutilitiessibling, this.props.className),
onClick: event => { onClick: event => {
BDFDB.ListenerUtils.stopEvent(event); BDFDB.ListenerUtils.stopEvent(event);
_this.switchImages(this.props.modalInstance, this.props.offset); _this.switchImages(this.props.offset);
}, },
children: [ children: [
this.props.loadedImage || BDFDB.ReactUtils.createElement(BDFDB.LibraryComponents.SpinnerComponents.Spinner, { this.props.loadedImage || BDFDB.ReactUtils.createElement(BDFDB.LibraryComponents.SpinnerComponents.Spinner, {
@ -251,6 +252,7 @@ module.exports = (_ => {
this.modulePatches = { this.modulePatches = {
before: [ before: [
"ImageModal",
"MessageAccessories", "MessageAccessories",
"Spoiler" "Spoiler"
], ],
@ -263,14 +265,13 @@ module.exports = (_ => {
"UserBanner" "UserBanner"
], ],
componentDidMount: [ componentDidMount: [
"LazyImage", "LazyImage"
"ImageModal"
], ],
componentDidUpdate: [ componentDidUpdate: [
"LazyImage" "LazyImage"
], ],
componentWillUnmount: [ componentWillUnmount: [
"ImageModal" "LazyImage"
] ]
}; };
@ -913,23 +914,12 @@ module.exports = (_ => {
} }
processImageModal (e) { processImageModal (e) {
if (e.methodname == "componentDidMount") { if (!e.returnvalue) {
BDFDB.TimeUtils.clear(viewedImageTimeout); if (switchedImageProps) {
e.instance.props = Object.assign(e.instance.props, switchedImageProps);
let modal = BDFDB.DOMUtils.getParent(BDFDB.dotCN.modal, e.node); switchedImageProps = null;
if (modal) {
modal.className = BDFDB.DOMUtils.formatClassName(modal.className, this.settings.viewerSettings.galleryMode && BDFDB.disCN._imageutilitiesgallery, this.settings.viewerSettings.details && BDFDB.disCN._imageutilitiesdetailsadded);
if (this.settings.viewerSettings.galleryMode) {
BDFDB.DOMUtils.addClass(modal, BDFDB.disCN.imagemodal);
BDFDB.DOMUtils.removeClass(modal, BDFDB.disCN.modalcarouselmodal, BDFDB.disCN.modalcarouselmodalzoomed);
}
} }
} }
else if (e.methodname == "componentWillUnmount") {
firstViewedImage = null;
viewedImage = null;
this.cleanupListeners("Gallery");
}
else { else {
let url = this.getImageSrc(viewedImage && viewedImage.proxy_url || typeof e.instance.props.children == "function" && e.instance.props.children(Object.assign({}, e.instance.props, {size: e.instance.props})).props.src || e.instance.props.src); let url = this.getImageSrc(viewedImage && viewedImage.proxy_url || typeof e.instance.props.children == "function" && e.instance.props.children(Object.assign({}, e.instance.props, {size: e.instance.props})).props.src || e.instance.props.src);
let isVideo = this.isValid(url, "video"); let isVideo = this.isValid(url, "video");
@ -1078,7 +1068,6 @@ module.exports = (_ => {
})); }));
} }
} }
if (this.settings.viewerSettings.galleryMode && viewedImage) { if (this.settings.viewerSettings.galleryMode && viewedImage) {
if (!cachedImages || cachedImages.channelId != viewedImage.channelId || cachedImages.amount && this.getImageIndex(cachedImages.all, viewedImage) == -1) { if (!cachedImages || cachedImages.channelId != viewedImage.channelId || cachedImages.amount && this.getImageIndex(cachedImages.all, viewedImage) == -1) {
BDFDB.TimeUtils.clear(viewedImageTimeout); BDFDB.TimeUtils.clear(viewedImageTimeout);
@ -1103,7 +1092,7 @@ module.exports = (_ => {
newestId: null, newestId: null,
lastReached: null lastReached: null
}; };
BDFDB.ReactUtils.forceUpdate(e.instance); this.updateImageModal();
}).then(result => { }).then(result => {
if (!viewedImage) return; if (!viewedImage) return;
let messages = [], index = -1; let messages = [], index = -1;
@ -1131,20 +1120,18 @@ module.exports = (_ => {
newestId: null, newestId: null,
lastReached: null lastReached: null
}; };
BDFDB.ReactUtils.forceUpdate(e.instance); this.updateImageModal();
}); });
} }
else { else {
if (cachedImages.all[cachedImages.index - 1]) e.returnvalue.props.children.push(BDFDB.ReactUtils.createElement(LazyImageSiblingComponent, { if (cachedImages.all[cachedImages.index - 1]) e.returnvalue.props.children.push(BDFDB.ReactUtils.createElement(LazyImageSiblingComponent, {
className: BDFDB.disCN._imageutilitiesprevious, className: BDFDB.disCN._imageutilitiesprevious,
modalInstance: e.instance,
url: this.getImageSrc(cachedImages.all[cachedImages.index - 1].thumbnail || cachedImages.all[cachedImages.index - 1]), url: this.getImageSrc(cachedImages.all[cachedImages.index - 1].thumbnail || cachedImages.all[cachedImages.index - 1]),
offset: -1, offset: -1,
svgIcon: BDFDB.LibraryComponents.SvgIcon.Names.LEFT_CARET svgIcon: BDFDB.LibraryComponents.SvgIcon.Names.LEFT_CARET
})); }));
if (cachedImages.all[cachedImages.index + 1]) e.returnvalue.props.children.push(BDFDB.ReactUtils.createElement(LazyImageSiblingComponent, { if (cachedImages.all[cachedImages.index + 1]) e.returnvalue.props.children.push(BDFDB.ReactUtils.createElement(LazyImageSiblingComponent, {
className: BDFDB.disCN._imageutilitiesnext, className: BDFDB.disCN._imageutilitiesnext,
modalInstance: e.instance,
url: this.getImageSrc(cachedImages.all[cachedImages.index + 1].thumbnail || cachedImages.all[cachedImages.index + 1]), url: this.getImageSrc(cachedImages.all[cachedImages.index + 1].thumbnail || cachedImages.all[cachedImages.index + 1]),
offset: 1, offset: 1,
svgIcon: BDFDB.LibraryComponents.SvgIcon.Names.RIGHT_CARET svgIcon: BDFDB.LibraryComponents.SvgIcon.Names.RIGHT_CARET
@ -1153,8 +1140,8 @@ module.exports = (_ => {
this.addListener("keydown", "Gallery", event => { this.addListener("keydown", "Gallery", event => {
if (!firedEvents.includes("Gallery")) { if (!firedEvents.includes("Gallery")) {
firedEvents.push("Gallery"); firedEvents.push("Gallery");
if (event.keyCode == 37) this.switchImages(e.instance, -1); if (event.keyCode == 37) this.switchImages(-1);
else if (event.keyCode == 39) this.switchImages(e.instance, 1); else if (event.keyCode == 39) this.switchImages(1);
} }
}); });
this.addListener("keyup", "Gallery", _ => BDFDB.ArrayUtils.remove(firedEvents, "Gallery", true)); this.addListener("keyup", "Gallery", _ => BDFDB.ArrayUtils.remove(firedEvents, "Gallery", true));
@ -1190,7 +1177,22 @@ module.exports = (_ => {
BDFDB.ReactUtils.forceUpdate(e.instance); BDFDB.ReactUtils.forceUpdate(e.instance);
} }
} }
if (e.methodname == "componentDidMount" && BDFDB.ReactUtils.findOwner(BDFDB.ReactUtils.getInstance(e.node), {name: "ImageModal", up: true})) { if (e.methodname == "componentWillUnmount" && BDFDB.DOMUtils.getParent(BDFDB.dotCN.imagemodal, e.node)) {
firstViewedImage = null;
viewedImage = null;
this.cleanupListeners("Gallery");
}
if (e.methodname == "componentDidMount" && BDFDB.DOMUtils.getParent(BDFDB.dotCN.imagemodal, e.node)) {
BDFDB.TimeUtils.clear(viewedImageTimeout);
let modal = BDFDB.DOMUtils.getParent(BDFDB.dotCN.modal, e.node);
if (modal) {
modal.className = BDFDB.DOMUtils.formatClassName(modal.className, this.settings.viewerSettings.galleryMode && BDFDB.disCN._imageutilitiesgallery, this.settings.viewerSettings.details && BDFDB.disCN._imageutilitiesdetailsadded);
if (this.settings.viewerSettings.galleryMode) {
BDFDB.DOMUtils.addClass(modal, BDFDB.disCN.imagemodal);
BDFDB.DOMUtils.removeClass(modal, BDFDB.disCN.modalcarouselmodal, BDFDB.disCN.modalcarouselmodalzoomed);
}
}
let isVideo = typeof e.instance.props.children == "function"; let isVideo = typeof e.instance.props.children == "function";
if (isVideo && !BDFDB.LibraryStores.AccessibilityStore.useReducedMotion) e.node.style.setProperty("pointer-events", "none"); if (isVideo && !BDFDB.LibraryStores.AccessibilityStore.useReducedMotion) e.node.style.setProperty("pointer-events", "none");
if (this.settings.viewerSettings.zoomMode && !isVideo && !BDFDB.DOMUtils.containsClass(e.node.parentElement, BDFDB.disCN._imageutilitiessibling)) { if (this.settings.viewerSettings.zoomMode && !isVideo && !BDFDB.DOMUtils.containsClass(e.node.parentElement, BDFDB.disCN._imageutilitiessibling)) {
@ -1550,7 +1552,7 @@ module.exports = (_ => {
}); });
} }
switchImages (modalInstance, offset) { switchImages (offset) {
const newIndex = parseInt(cachedImages.index) + parseInt(offset); const newIndex = parseInt(cachedImages.index) + parseInt(offset);
if (newIndex < 0 || newIndex > (cachedImages.amount - 1)) return; if (newIndex < 0 || newIndex > (cachedImages.amount - 1)) return;
@ -1581,7 +1583,7 @@ module.exports = (_ => {
newestId: messages[messages.length-1] ? messages[messages.length-1].id : null, newestId: messages[messages.length-1] ? messages[messages.length-1].id : null,
lastReached: index == (cachedImages.all.length - 1) lastReached: index == (cachedImages.all.length - 1)
}); });
BDFDB.ReactUtils.forceUpdate(modalInstance); this.updateImageModal();
} }
}); });
} }
@ -1608,29 +1610,35 @@ module.exports = (_ => {
index: index, index: index,
amount: cachedImages.all.length amount: cachedImages.all.length
}); });
BDFDB.ReactUtils.forceUpdate(modalInstance); this.updateImageModal();
} }
}); });
} }
let isVideo = this.isValid(viewedImage.proxy_url, "video"); let isVideo = this.isValid(viewedImage.proxy_url, "video");
modalInstance.props.animated = !!isVideo; switchedImageProps = {
modalInstance.props.original = viewedImage.proxy_url; animated: !!isVideo,
modalInstance.props.placeholder = isVideo && (viewedImage.thumbnail && viewedImage.thumbnail.proxy_url || viewedImage.proxy_url); original: viewedImage.proxy_url,
modalInstance.props.src = viewedImage.proxy_url; placeholder: isVideo && (viewedImage.thumbnail && viewedImage.thumbnail.proxy_url || viewedImage.proxy_url),
modalInstance.props.width = viewedImage.width;
modalInstance.props.height = viewedImage.height;
modalInstance.props.children = !isVideo ? null : (videoData => BDFDB.ReactUtils.createElement(BDFDB.LibraryComponents.Video, {
ignoreMaxSize: true,
poster: viewedImage.proxy_url.replace("https://cdn.discordapp.com", "https://media.discordapp.net").split("?size=")[0] + "?format=jpeg",
src: viewedImage.proxy_url, src: viewedImage.proxy_url,
width: videoData.size.width, width: viewedImage.width,
height: videoData.size.height, height: viewedImage.height,
naturalWidth: viewedImage.width, children: !isVideo ? null : (videoData => BDFDB.ReactUtils.createElement(BDFDB.LibraryComponents.Video, {
naturalHeight: viewedImage.height, ignoreMaxSize: true,
play: true, poster: viewedImage.proxy_url.replace("https://cdn.discordapp.com", "https://media.discordapp.net").split("?size=")[0] + "?format=jpeg",
playOnHover: !!BDFDB.LibraryStores.AccessibilityStore.useReducedMotion src: viewedImage.proxy_url,
})); width: videoData.size.width,
BDFDB.ReactUtils.forceUpdate(modalInstance); height: videoData.size.height,
naturalWidth: viewedImage.width,
naturalHeight: viewedImage.height,
play: true,
playOnHover: !!BDFDB.LibraryStores.AccessibilityStore.useReducedMotion
}))
};
this.updateImageModal();
}
updateImageModal () {
BDFDB.ReactUtils.forceUpdate(BDFDB.ReactUtils.findOwner(document.querySelector(BDFDB.dotCN.imagemodal), {up: true, filter: n => n && n.stateNode && n.stateNode.props && n.stateNode.props.isTopModal && n.stateNode.props.modalKey}));
} }
filterForCopies (messages) { filterForCopies (messages) {