diff --git a/src/plugins/betterRoleContext/index.tsx b/src/plugins/betterRoleContext/index.tsx index f9eae586d..4a99d8822 100644 --- a/src/plugins/betterRoleContext/index.tsx +++ b/src/plugins/betterRoleContext/index.tsx @@ -18,6 +18,31 @@ const GuildSettingsActions = findByPropsLazy("open", "selectRole", "updateGuild" const DeveloperMode = getUserSettingLazy("appearance", "developerMode")!; +async function openRoleIconModal(roleId: string, roleIcon: string, roleName: string) { + const format = settings.store.roleIconFileFormat; + const contentType = format === "jpg" ? "image/jpeg" : `image/${format}`; + const original = `${location.protocol}//${window.GLOBAL_ENV.CDN_HOST}/role-icons/${roleId}/${roleIcon}.${format}`; + const url = original.replace(`//${window.GLOBAL_ENV.CDN_HOST}/`, "//media.discordapp.net/"); + + openImageModal({ + url, + original, + height: 128, + width: 128, + contentType, + originalContentType: contentType, + sourceMetadata: { + identifier: { + type: "attachment", + attachmentId: roleId, + filename: `role-icon-${roleId}.${format}`, + title: roleName, + size: 1, + } + } + }); +} + function PencilIcon() { return ( { - openImageModal({ - url: `${location.protocol}//${window.GLOBAL_ENV.CDN_HOST}/role-icons/${role.id}/${role.icon}.${settings.store.roleIconFileFormat}`, - height: 128, - width: 128 - }); - }} + action={() => openRoleIconModal(role.id, roleIcon, role.name)} icon={ImageIcon} />