Spacebar/client
1
0
Fork 0
mirror of https://github.com/spacebarchat/client.git synced 2024-11-22 10:22:30 +01:00
Code Issues Releases Activity

open gifs in image viewer

Browse Source
This commit is contained in:
Puyodead1 2023-12-22 23:27:36 -05:00
parent f810397861
commit ecda1d7c12
No known key found for this signature in database
GPG Key ID: A4FA4FEC0DD353FC
4 changed files with 35 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
src/components/messaging/EmbedMedia.tsx
View File

@ -101,6 +101,13 @@ function EmbedMedia({ embed, width, height, thumbnail }: Props) {
controls={embed.type !== EmbedType.GIFV}
autoPlay={embed.type === EmbedType.GIFV}
muted={embed.type === EmbedType.GIFV ? true : undefined}
onClick={() => {
modalController.push({
type: "image_viewer",
attachment: embed.video!,
isVideo: true,
});
}}
/>
);
} else if (embed.image && !thumbnail) {
@ -113,13 +120,9 @@ function EmbedMedia({ embed, width, height, thumbnail }: Props) {
loading="lazy"
style={{ width: "100%", height: "100%" }}
onClick={() => {
if (!embed.image) {
console.error("embed has no image... wtf");
return;
}
modalController.push({
type: "image_viewer",
attachment: embed.image,
attachment: embed.image!,
});
}}
/>
@ -134,13 +137,9 @@ function EmbedMedia({ embed, width, height, thumbnail }: Props) {
loading="lazy"
style={{ width, height }}
onClick={() => {
if (!embed.thumbnail) {
console.error("embed has no thumbnail... wtf");
return;
}
modalController.push({
type: "image_viewer",
attachment: embed.thumbnail,
attachment: embed.thumbnail!,
});
}}
/>

7
src/components/messaging/MessageEmbed.tsx
View File

@ -74,7 +74,12 @@ function MessageEmbed({ embed }: Props) {
}
const { width, height } = calculateSize(mw, mh);
if (embed.type === EmbedType.GIFV || EMBEDDABLE_PROVIDERS.includes(embed.provider?.name ?? "")) {
if (
embed.type === EmbedType.GIFV ||
embed.type === EmbedType.Image ||
embed.type === EmbedType.Video ||
EMBEDDABLE_PROVIDERS.includes(embed.provider?.name ?? "")
) {
return <EmbedMedia embed={embed} width={height} height={height} />;
}

20
src/components/modals/ImageViewerModal.tsx
View File

@ -1,4 +1,4 @@
import { APIAttachment, APIEmbedImage, APIEmbedThumbnail } from "@spacebarchat/spacebar-api-types/v9";
import { APIAttachment, APIEmbedImage, APIEmbedThumbnail, APIEmbedVideo } from "@spacebarchat/spacebar-api-types/v9";
import styled from "styled-components";
import { Modal } from "./ModalComponents";
@ -15,9 +15,10 @@ const Container = styled.div`
`;
interface Props {
attachment: APIAttachment | APIEmbedImage | APIEmbedThumbnail;
attachment: APIAttachment | APIEmbedImage | APIEmbedThumbnail | APIEmbedVideo;
width?: number;
height?: number;
isVideo?: boolean; // should only be for gifs
}
export function ImageViewerModal(props: Props) {
@ -27,7 +28,20 @@ export function ImageViewerModal(props: Props) {
return (
<Modal {...props} transparent maxWidth="100vw" maxHeight="100vh" withoutCloseButton withEmptyActionBar>
<Container>
<img src={props.attachment.url} width={width} height={height} loading="eager" />
{props.isVideo ? (
<video
loop
autoPlay
onContextMenu={(e) => {
e.preventDefault();
e.stopPropagation();
}}
>
<source src={props.attachment.url} />
</video>
) : (
<img src={props.attachment.url} width={width} height={height} loading="eager" />
)}
</Container>
</Modal>
);

5
src/controllers/modals/types.ts
View File

@ -1,6 +1,6 @@
// adapted from https://github.com/revoltchat/revite/blob/master/src/controllers/modals/types.ts
import { APIAttachment, APIEmbedImage, APIEmbedThumbnail } from "@spacebarchat/spacebar-api-types/v9";
import { APIAttachment, APIEmbedImage, APIEmbedThumbnail, APIEmbedVideo } from "@spacebarchat/spacebar-api-types/v9";
import Channel from "../../stores/objects/Channel";
import Guild from "../../stores/objects/Guild";
import GuildMember from "../../stores/objects/GuildMember";
@ -45,9 +45,10 @@ export type Modal = {
}
| {
type: "image_viewer";
attachment: APIAttachment | APIEmbedImage | APIEmbedThumbnail;
attachment: APIAttachment | APIEmbedImage | APIEmbedThumbnail | APIEmbedVideo;
width?: number;
height?: number;
isVideo?: boolean;
}
);