feat: port ImageViewer

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

View File

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

View File

@@ -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({
id: "image_viewer",
modalController.push({
type: "image_viewer",
embed: embed.image!,
})
}