feat(plugin): BiggerStreamPreview (#1222)

Co-authored-by: V <vendicated@riseup.net>

src/utils/constants.ts

@@ -319,6 +319,10 @@ export const Devs = /* #__PURE__*/ Object.freeze({
         name: "amia",
         id: 142007603549962240n
     },
+    phil: {
+        name: "phil",
+        id: 305288513941667851n
+    },
     ImLvna: {
         name: "Luna <3",
         id: 174200708818665472n

src/utils/discord.tsx

@@ -18,9 +18,11 @@
 
 import { MessageObject } from "@api/MessageEvents";
 import { findByPropsLazy, findLazy } from "@webpack";
-import { ChannelStore, ComponentDispatch, GuildStore, PrivateChannelsStore, SelectedChannelStore } from "@webpack/common";
+import { ChannelStore, ComponentDispatch, GuildStore, MaskedLink, ModalImageClasses, PrivateChannelsStore, SelectedChannelStore } from "@webpack/common";
 import { Guild, Message } from "discord-types/general";
 
+import { ImageModal, ModalRoot, ModalSize, openModal } from "./modal";
+
 const PreloadedUserSettings = findLazy(m => m.ProtoClass?.typeName.endsWith("PreloadedUserSettings"));
 const MessageActions = findByPropsLazy("editMessage", "sendMessage");
 
@@ -77,3 +79,23 @@ export function sendMessage(
 
     return MessageActions.sendMessage(channelId, messageData, waitForChannelReady, extra);
 }
+
+export function openImageModal(url: string, props?: Partial<React.ComponentProps<ImageModal>>): string {
+    return openModal(modalProps => (
+        <ModalRoot
+            {...modalProps}
+            className={ModalImageClasses.modal}
+            size={ModalSize.DYNAMIC}>
+            <ImageModal
+                className={ModalImageClasses.image}
+                original={url}
+                placeholder={url}
+                src={url}
+                renderLinkComponent={props => <MaskedLink {...props} />}
+                shouldHideMediaOptions={false}
+                shouldAnimate
+                {...props}
+            />
+        </ModalRoot>
+    ));
+}

src/utils/modal.tsx

@@ -16,7 +16,7 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
 */
 
-import { filters, mapMangledModuleLazy } from "@webpack";
+import { filters, findByCode, mapMangledModuleLazy } from "@webpack";
 import type { ComponentType, PropsWithChildren, ReactNode, Ref } from "react";
 
 import { LazyComponent } from "./react";
@@ -107,6 +107,25 @@ export const Modals = mapMangledModuleLazy(".closeWithCircleBackground", {
     }>;
 };
 
+export type ImageModal = ComponentType<{
+    className?: string;
+    src: string;
+    placeholder: string;
+    original: string;
+    width?: number;
+    height?: number;
+    animated?: boolean;
+    responsive?: boolean;
+    renderLinkComponent(props: any): ReactNode;
+    maxWidth?: number;
+    maxHeight?: number;
+    shouldAnimate?: boolean;
+    onClose?(): void;
+    shouldHideMediaOptions?: boolean;
+}>;
+
+export const ImageModal = LazyComponent(() => findByCode(".renderLinkComponent", ".responsive") as ImageModal);
+
 export const ModalRoot = LazyComponent(() => Modals.ModalRoot);
 export const ModalHeader = LazyComponent(() => Modals.ModalHeader);
 export const ModalContent = LazyComponent(() => Modals.ModalContent);