feat: port ImageViewer

src/components/common/messaging/attachments/ImageFile.tsx

@@ -2,11 +2,10 @@ import { API } from "revolt.js";
 
 import styles from "./Attachment.module.scss";
 import classNames from "classnames";
-import { useContext, useState } from "preact/hooks";
+import { useState } from "preact/hooks";
-
-import { useIntermediate } from "../../../../context/intermediate/Intermediate";
 
 import { useClient } from "../../../../controllers/client/ClientController";
+import { modalController } from "../../../../controllers/modals/ModalController";
 
 enum ImageLoadingState {
     Loading,
@@ -21,7 +20,6 @@ type Props = JSX.HTMLAttributes<HTMLImageElement> & {
 export default function ImageFile({ attachment, ...props }: Props) {
     const [loading, setLoading] = useState(ImageLoadingState.Loading);
     const client = useClient();
-    const { openScreen } = useIntermediate();
     const url = client.generateFileURL(attachment)!;
 
     return (
@@ -33,7 +31,9 @@ export default function ImageFile({ attachment, ...props }: Props) {
             className={classNames(styles.image, {
                 [styles.loading]: loading !== ImageLoadingState.Loaded,
             })}
-            onClick={() => openScreen({ id: "image_viewer", attachment })}
+            onClick={() =>
+                modalController.push({ type: "image_viewer", attachment })
+            }
             onMouseDown={(ev) => ev.button === 1 && window.open(url, "_blank")}
             onLoad={() => setLoading(ImageLoadingState.Loaded)}
             onError={() => setLoading(ImageLoadingState.Error)}

src/components/common/messaging/embed/Embed.tsx

@@ -7,6 +7,7 @@ import { useContext } from "preact/hooks";
 import { useIntermediate } from "../../../../context/intermediate/Intermediate";
 
 import { useClient } from "../../../../controllers/client/ClientController";
+import { modalController } from "../../../../controllers/modals/ModalController";
 import { MessageAreaWidthContext } from "../../../../pages/channels/messaging/MessageArea";
 import Markdown from "../../../markdown/Markdown";
 import Attachment from "../attachments/Attachment";
@@ -24,7 +25,7 @@ const MAX_PREVIEW_SIZE = 150;
 export default function Embed({ embed }: Props) {
     const client = useClient();
 
-    const { openScreen, openLink } = useIntermediate();
+    const { openLink } = useIntermediate();
     const maxWidth = Math.min(
         useContext(MessageAreaWidthContext) - CONTAINER_PADDING,
         MAX_EMBED_WIDTH,
@@ -191,7 +192,9 @@ export default function Embed({ embed }: Props) {
                     type="text/html"
                     frameBorder="0"
                     loading="lazy"
-                    onClick={() => openScreen({ id: "image_viewer", embed })}
+                    onClick={() =>
+                        modalController.push({ type: "image_viewer", embed })
+                    }
                     onMouseDown={(ev) => ev.button === 1 && openLink(embed.url)}
                 />
             );

src/components/common/messaging/embed/EmbedMedia.tsx

@@ -3,9 +3,8 @@ import { API } from "revolt.js";
 
 import styles from "./Embed.module.scss";
 
-import { useIntermediate } from "../../../../context/intermediate/Intermediate";
-
 import { useClient } from "../../../../controllers/client/ClientController";
+import { modalController } from "../../../../controllers/modals/ModalController";
 
 interface Props {
     embed: API.Embed;
@@ -15,7 +14,6 @@ interface Props {
 
 export default function EmbedMedia({ embed, width, height }: Props) {
     if (embed.type !== "Website") return null;
-    const { openScreen } = useIntermediate();
     const client = useClient();
 
     switch (embed.special?.type) {
@@ -118,8 +116,8 @@ export default function EmbedMedia({ embed, width, height }: Props) {
                         loading="lazy"
                         style={{ width, height }}
                         onClick={() =>
-                            openScreen({
+                            modalController.push({
-                                id: "image_viewer",
+                                type: "image_viewer",
                                 embed: embed.image!,
                             })
                         }

src/context/intermediate/Popovers.tsx

@@ -4,7 +4,6 @@ import { IntermediateContext, useIntermediate } from "./Intermediate";
 import { SpecialInputModal } from "./modals/Input";
 import { SpecialPromptModal } from "./modals/Prompt";
 import { CreateBotModal } from "./popovers/CreateBot";
-import { ImageViewer } from "./popovers/ImageViewer";
 import { UserPicker } from "./popovers/UserPicker";
 import { UserProfile } from "./popovers/UserProfile";
 
@@ -24,8 +23,6 @@ export default function Popovers() {
         case "user_picker":
             // @ts-expect-error someone figure this out :)
             return <UserPicker {...screen} onClose={onClose} />;
-        case "image_viewer":
-            return <ImageViewer {...screen} onClose={onClose} />;
         case "create_bot":
             // @ts-expect-error someone figure this out :)
             return <CreateBotModal onClose={onClose} {...screen} />;

src/context/intermediate/popovers/ChannelInfo.module.scss

@@ -1,16 +0,0 @@
-.info {
-    .header {
-        display: flex;
-        align-items: center;
-        flex-direction: row;
-
-        h1 {
-            margin: 0;
-            flex-grow: 1;
-        }
-
-        div {
-            cursor: pointer;
-        }
-    }
-}

src/context/intermediate/popovers/ChannelInfo.tsx

@@ -1,41 +0,0 @@
-import { X } from "@styled-icons/boxicons-regular";
-import { observer } from "mobx-react-lite";
-import { Channel } from "revolt.js";
-
-import styles from "./ChannelInfo.module.scss";
-
-import { Modal } from "@revoltchat/ui";
-
-import Markdown from "../../../components/markdown/Markdown";
-import { getChannelName } from "../../revoltjs/util";
-
-interface Props {
-    channel: Channel;
-    onClose: () => void;
-}
-
-export const ChannelInfo = observer(({ channel, onClose }: Props) => {
-    if (
-        channel.channel_type === "DirectMessage" ||
-        channel.channel_type === "SavedMessages"
-    ) {
-        onClose();
-        return null;
-    }
-
-    return (
-        <Modal onClose={onClose}>
-            <div className={styles.info}>
-                <div className={styles.header}>
-                    <h1>{getChannelName(channel, true)}</h1>
-                    <div onClick={onClose}>
-                        <X size={36} />
-                    </div>
-                </div>
-                <p>
-                    <Markdown content={channel.description!} />
-                </p>
-            </div>
-        </Modal>
-    );
-});

src/context/intermediate/popovers/ImageViewer.module.scss

@@ -1,20 +0,0 @@
-.viewer {
-    display: flex;
-    overflow: hidden;
-    flex-direction: column;
-    border-end-end-radius: 4px;
-    border-end-start-radius: 4px;
-
-    max-width: 100vw;
-
-    img {
-        width: auto;
-        height: auto;
-        max-width: 90vw;
-        max-height: 75vh;
-        object-fit: contain;
-        border-bottom: thin solid var(--tertiary-foreground);
-
-        -webkit-touch-callout: default;
-    }
-}

src/context/intermediate/popovers/UserProfile.tsx

@@ -13,7 +13,7 @@ import { UserPermission, API } from "revolt.js";
 
 import styles from "./UserProfile.module.scss";
 import { Localizer, Text } from "preact-i18n";
-import { useContext, useEffect, useLayoutEffect, useState } from "preact/hooks";
+import { useEffect, useLayoutEffect, useState } from "preact/hooks";
 
 import {
     Button,
@@ -35,6 +35,7 @@ import { Username } from "../../../components/common/user/UserShort";
 import UserStatus from "../../../components/common/user/UserStatus";
 import Markdown from "../../../components/markdown/Markdown";
 import { useSession } from "../../../controllers/client/ClientController";
+import { modalController } from "../../../controllers/modals/ModalController";
 import { useIntermediate } from "../Intermediate";
 
 interface Props {
@@ -159,8 +160,8 @@ export const UserProfile = observer(
                             hover={typeof user.avatar !== "undefined"}
                             onClick={() =>
                                 user.avatar &&
-                                openScreen({
+                                modalController.push({
-                                    id: "image_viewer",
+                                    type: "image_viewer",
                                     attachment: user.avatar,
                                 })
                             }

src/controllers/modals/ModalController.tsx

@@ -21,6 +21,7 @@ import Changelog from "./components/Changelog";
 import ChannelInfo from "./components/ChannelInfo";
 import Clipboard from "./components/Clipboard";
 import Error from "./components/Error";
+import ImageViewer from "./components/ImageViewer";
 import LinkWarning from "./components/LinkWarning";
 import MFAEnableTOTP from "./components/MFAEnableTOTP";
 import MFAFlow from "./components/MFAFlow";
@@ -222,6 +223,7 @@ export const modalController = new ModalControllerExtended({
     channel_info: ChannelInfo,
     clipboard: Clipboard,
     error: Error,
+    image_viewer: ImageViewer,
     link_warning: LinkWarning,
     mfa_flow: MFAFlow,
     mfa_recovery: MFARecovery,

src/controllers/modals/components/ImageViewer.tsx

@@ -1,23 +1,40 @@
-/* eslint-disable react-hooks/rules-of-hooks */
+import styled from "styled-components";
-import { API } from "revolt.js";
-
-import styles from "./ImageViewer.module.scss";
 
 import { Modal } from "@revoltchat/ui";
 
 import AttachmentActions from "../../../components/common/messaging/attachments/AttachmentActions";
 import EmbedMediaActions from "../../../components/common/messaging/embed/EmbedMediaActions";
-import { useClient } from "../../../controllers/client/ClientController";
+import { useClient } from "../../client/ClientController";
+import { ModalProps } from "../types";
 
-interface Props {
+const Viewer = styled.div`
-    onClose: () => void;
+    display: flex;
-    embed?: API.Image;
+    overflow: hidden;
-    attachment?: API.File;
+    flex-direction: column;
-}
+    border-end-end-radius: 4px;
+    border-end-start-radius: 4px;
 
-type ImageMetadata = API.Metadata & { type: "Image" };
+    max-width: 100vw;
+
+    img {
+        width: auto;
+        height: auto;
+        max-width: 90vw;
+        max-height: 75vh;
+        object-fit: contain;
+        border-bottom: thin solid var(--tertiary-foreground);
+
+        -webkit-touch-callout: default;
+    }
+`;
+
+export default function ImageViewer({
+    embed,
+    attachment,
+    ...props
+}: ModalProps<"image_viewer">) {
+    const client = useClient();
 
-export function ImageViewer({ attachment, embed, onClose }: Props) {
     if (attachment && attachment.metadata.type !== "Image") {
         console.warn(
             `Attempted to use a non valid attatchment type in the image viewer: ${attachment.metadata.type}`,
@@ -25,20 +42,16 @@ export function ImageViewer({ attachment, embed, onClose }: Props) {
         return null;
     }
 
-    const client = useClient();
-
     return (
-        <Modal onClose={onClose} transparent maxHeight="100vh" maxWidth="100vw">
+        <Modal {...props} transparent maxHeight="100vh" maxWidth="100vw">
-            <div className={styles.viewer}>
+            <Viewer>
                 {attachment && (
                     <>
                         <img
                             loading="eager"
                             src={client.generateFileURL(attachment)}
-                            width={(attachment.metadata as ImageMetadata).width}
+                            width={(attachment.metadata as any).width}
-                            height={
+                            height={(attachment.metadata as any).height}
-                                (attachment.metadata as ImageMetadata).height
-                            }
                         />
                         <AttachmentActions attachment={attachment} />
                     </>
@@ -54,7 +67,7 @@ export function ImageViewer({ attachment, embed, onClose }: Props) {
                         <EmbedMediaActions embed={embed} />
                     </>
                 )}
-            </div>
+            </Viewer>
         </Modal>
     );
 }

src/controllers/modals/types.ts

@@ -80,6 +80,11 @@ export type Modal = {
           type: "server_info";
           server: Server;
       }
+    | {
+          type: "image_viewer";
+          embed?: API.Image;
+          attachment?: API.File;
+      }
 );
 
 export type ModalProps<T extends Modal["type"]> = Modal & { type: T } & {