abner/for-legacy-web
1
0
Fork 1
mirror of https://github.com/stoatchat/for-legacy-web.git synced 2026-03-07 01:15:28 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: port ImageViewer

Browse Source
This commit is contained in:
Paul Makles
2022-06-30 19:34:04 +01:00
parent 1664aaee15
commit 0d3f29515e
11 changed files with 58 additions and 116 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
src/context/intermediate/Popovers.tsx
View File

@@ -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} />;

16
src/context/intermediate/popovers/ChannelInfo.module.scss
View File

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

41
src/context/intermediate/popovers/ChannelInfo.tsx
View File

@@ -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>
);
});

20
src/context/intermediate/popovers/ImageViewer.module.scss
View File

@@ -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;
}
}

60
src/context/intermediate/popovers/ImageViewer.tsx
View File

@@ -1,60 +0,0 @@
/* eslint-disable react-hooks/rules-of-hooks */
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";
interface Props {
onClose: () => void;
embed?: API.Image;
attachment?: API.File;
}
type ImageMetadata = API.Metadata & { type: "Image" };
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}`,
);
return null;
}
const client = useClient();
return (
<Modal onClose={onClose} transparent maxHeight="100vh" maxWidth="100vw">
<div className={styles.viewer}>
{attachment && (
<>
<img
loading="eager"
src={client.generateFileURL(attachment)}
width={(attachment.metadata as ImageMetadata).width}
height={
(attachment.metadata as ImageMetadata).height
}
/>
<AttachmentActions attachment={attachment} />
</>
)}
{embed && (
<>
<img
loading="eager"
src={client.proxyFile(embed.url)}
width={embed.width}
height={embed.height}
/>
<EmbedMediaActions embed={embed} />
</>
)}
</div>
</Modal>
);
}

7
src/context/intermediate/popovers/UserProfile.tsx
View File

@@ -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({
id: "image_viewer",
modalController.push({
type: "image_viewer",
attachment: user.avatar,
})
}