From d919f560b114f85a5049b100f351dfd88d0e6481 Mon Sep 17 00:00:00 2001 From: ftwpala Date: Sun, 1 Feb 2026 22:21:47 +0100 Subject: [PATCH 1/2] chat-side implementation of modal preview --- assets/chat/css/style.scss | 24 ++++++++++++++++++++++++ assets/chat/js/chat.js | 1 + assets/chat/js/formatters.js | 18 +++++++++++++++++- assets/chat/js/settings.js | 1 + assets/dev/dev-chat/settings.json | 1 + assets/index.html | 5 +++++ 6 files changed, 49 insertions(+), 1 deletion(-) diff --git a/assets/chat/css/style.scss b/assets/chat/css/style.scss index 4d6c0cf9..b7143d38 100644 --- a/assets/chat/css/style.scss +++ b/assets/chat/css/style.scss @@ -1652,6 +1652,30 @@ a.flair12:hover { textarea.form-control { width: 100%; } +// modal when image is opened +.image-modal { + position: fixed; + inset: 0; + z-index: 9999; +} + +.image-modal__backdrop { + position: absolute; + inset: 0; + background: rgba(0,0,0,.8); +} + +.image-modal__content { + position: relative; + height: 100%; + display: grid; + place-items: center; +} + +.image-modal img { + max-width: 90vw; + max-height: 90vh; +} button.btn { display: inline-block; diff --git a/assets/chat/js/chat.js b/assets/chat/js/chat.js index 132f8515..6ef21d43 100644 --- a/assets/chat/js/chat.js +++ b/assets/chat/js/chat.js @@ -130,6 +130,7 @@ const settingsdefault = new Map([ ["formatter-green", true], ["formatter-emote", true], ["formatter-combo", true], + ["image-modal-preview", true], ["holidayemotemodifiers", true], ["disablespoilers", false], ["viewerstateindicator", 1], diff --git a/assets/chat/js/formatters.js b/assets/chat/js/formatters.js index d4431f24..d8f1f991 100644 --- a/assets/chat/js/formatters.js +++ b/assets/chat/js/formatters.js @@ -215,6 +215,11 @@ function moveModifierToFront(modifierList, modifierName) { return modifierList; } +window.__openImageModalFromLink = function (e, src) { + e.preventDefault(); + window.parent.postMessage({ action: 'IMAGE_MODAL_SRC', payload: src }, '*'); +}; + class DisabledFormatter { format(chat, str, message = null) { return str; @@ -623,6 +628,7 @@ class UrlFormatter { this.discordmp4Regex = /https:\/\/(media|cdn)\.discordapp\.(net|com)\/attachments.*?\.(mp4|webm|mov)/i; this.refLinkRegex = /^(https?:\/\/)?(www\.)?(((smile\.)?amazon)|twitter|(open\.)?spotify)\.[a-z]{2,3}/; this.twitterRegex = /^(?:https:\/\/)?(?:www\.)?twitter\.com\/([^ ?]+)/i; + this.imageRegEx = /\.(png|jpe?g|gif|webp|bmp|svg|avif)$/; // make sure to split at "?" if testing URL // e.g. youtube ids include "-" and "_". const embedCommonId = '([\\w-]{1,30})'; @@ -748,7 +754,17 @@ class UrlFormatter { // 70 characters is the 80th percentile for link length if (shortenLinks && url.length > 75) { - url = url.substring(0, 35) + '...' + url.substring(35, url.length - 35) + '' + url.substring(url.length - 35); + url = url.substring(0, 35) + '...' + url.substring(35, url.length - 35) + '' + url.substring(url.length - 35); + } + // if URL is an image, allow modal, otherwise treat it normally + if (chat.settings.get("image-modal-preview") && this.imageRegEx.test(url.split("?")[0].toLowerCase())) { + return `${url}${extra}`; } return `${url}${extra}`; } diff --git a/assets/chat/js/settings.js b/assets/chat/js/settings.js index a8ac72af..6e628a09 100644 --- a/assets/chat/js/settings.js +++ b/assets/chat/js/settings.js @@ -40,6 +40,7 @@ function upgradeSettings(chat, oldversion, newversion) { chat.settings.set("notificationsoundfile", arr); chat.settings.set("holidayemotemodifiers", arr); chat.settings.set("formatter-combo", arr); + chat.settings.set("image-modal-preview", arr); arr = chat.settings.get("notificationtimeout"); chat.settings.set("notificationtimeout", arr !== -1); diff --git a/assets/dev/dev-chat/settings.json b/assets/dev/dev-chat/settings.json index 0dcd5fd5..8e5a554d 100644 --- a/assets/dev/dev-chat/settings.json +++ b/assets/dev/dev-chat/settings.json @@ -43,5 +43,6 @@ ["formatter-green", true], ["formatter-emote", true], ["formatter-combo", true], + ["image-modal-preview", true], ["holidayemotemodifiers", true] ] diff --git a/assets/index.html b/assets/index.html index 6d383b86..9ff92b77 100644 --- a/assets/index.html +++ b/assets/index.html @@ -143,6 +143,11 @@

Messages

Shorten links +
+ +