emoji pack editing - WIP

This commit is contained in:
Ajay Bura 2025-01-05 15:01:20 +05:30
parent 5bc1eabff2
commit b18bce0c7e
10 changed files with 75 additions and 21 deletions

View file

@ -1,7 +1,7 @@
import React, { useMemo } from 'react';
import { as, Box, Text, config, Avatar, AvatarImage, AvatarFallback, Button } from 'folds';
import Linkify from 'linkify-react';
import { ImagePack } from '../../plugins/custom-emoji';
import { ImagePack, PackMetaReader } from '../../plugins/custom-emoji';
import { mxcUrlToHttp } from '../../utils/matrix';
import { useMediaAuthentication } from '../../hooks/useMediaAuthentication';
import { useMatrixClient } from '../../hooks/useMatrixClient';
@ -12,34 +12,44 @@ import { LINKIFY_OPTS } from '../../plugins/react-custom-html-parser';
import { ContainerColor } from '../../styles/ContainerColor.css';
import { ImageTile } from './ImageTile';
export type ImagePackViewerProps = {
type ImagePackAvatarProps = {
meta: PackMetaReader;
};
function ImagePackAvatar({ meta }: ImagePackAvatarProps) {
const mx = useMatrixClient();
const useAuthentication = useMediaAuthentication();
const packAvatar = meta.avatar ? mxcUrlToHttp(mx, meta.avatar, useAuthentication) : undefined;
return (
<Avatar size="400" className={ContainerColor({ variant: 'Secondary' })}>
{packAvatar ? (
<AvatarImage src={packAvatar} alt={meta.name ?? 'Unknown'} />
) : (
<AvatarFallback>
<Text size="H4">{nameInitials(meta.name ?? 'Unknown')}</Text>
</AvatarFallback>
)}
</Avatar>
);
}
export type ImagePackContentProps = {
imagePack: ImagePack;
canEdit?: boolean;
};
export const ImagePackViewer = as<'div', ImagePackViewerProps>(
export const ImagePackContent = as<'div', ImagePackContentProps>(
({ imagePack, canEdit, ...props }, ref) => {
const mx = useMatrixClient();
const useAuthentication = useMediaAuthentication();
const { meta } = imagePack;
const images = useMemo(() => Array.from(imagePack.images.collection.values()), [imagePack]);
const packAvatar = meta.avatar ? mxcUrlToHttp(mx, meta.avatar, useAuthentication) : undefined;
return (
<Box grow="Yes" direction="Column" gap="700" {...props} ref={ref}>
<Box gap="400">
<Box shrink="No">
<Avatar size="400" className={ContainerColor({ variant: 'Secondary' })}>
{packAvatar ? (
<AvatarImage src={packAvatar} alt={meta.name ?? 'Unknown'} />
) : (
<AvatarFallback>
<Text size="H4">{nameInitials(meta.name ?? 'Unknown')}</Text>
</AvatarFallback>
)}
</Avatar>
<ImagePackAvatar meta={meta} />
</Box>
<Box grow="Yes" direction="Column" gap="300">
<Box direction="Column" gap="100">

View file

@ -1,14 +1,20 @@
import React from 'react';
import { Box, IconButton, Text, Icon, Icons, Scroll, Chip } from 'folds';
import { ImagePack } from '../../../plugins/custom-emoji';
import { Page, PageHeader, PageContent } from '../../../components/page';
import { ImagePackViewer } from '../../../components/image-pack-viewer';
import { ImagePack } from '../../plugins/custom-emoji';
import { Page, PageHeader, PageContent } from '../page';
import { useMatrixClient } from '../../hooks/useMatrixClient';
import { RoomImagePack } from './RoomImagePack';
import { UserImagePack } from './UserImagePack';
type ImagePackViewProps = {
imagePack: ImagePack;
requestClose: () => void;
};
export function ImagePackView({ imagePack, requestClose }: ImagePackViewProps) {
const mx = useMatrixClient();
const { roomId } = imagePack.address ?? {};
const room = mx.getRoom(roomId);
return (
<Page>
<PageHeader outlined={false} balance>
@ -34,7 +40,11 @@ export function ImagePackView({ imagePack, requestClose }: ImagePackViewProps) {
<Scroll hideTrack visibility="Hover">
<PageContent>
<Box direction="Column" gap="700">
<ImagePackViewer imagePack={imagePack} />
{room ? (
<RoomImagePack room={room} imagePack={imagePack} />
) : (
<UserImagePack imagePack={imagePack} />
)}
</Box>
</PageContent>
</Scroll>

View file

@ -0,0 +1,23 @@
import React from 'react';
import { Room } from 'matrix-js-sdk';
import { usePowerLevels, usePowerLevelsAPI } from '../../hooks/usePowerLevels';
import { useMatrixClient } from '../../hooks/useMatrixClient';
import { ImagePackContent } from './ImagePackContent';
import { ImagePack } from '../../plugins/custom-emoji';
import { StateEvent } from '../../../types/matrix/room';
type RoomImagePackProps = {
room: Room;
imagePack: ImagePack;
};
export function RoomImagePack({ room, imagePack }: RoomImagePackProps) {
const mx = useMatrixClient();
const userId = mx.getUserId()!;
const powerLevels = usePowerLevels(room);
const { getPowerLevel, canSendStateEvent } = usePowerLevelsAPI(powerLevels);
const canEditImagePack = canSendStateEvent(StateEvent.PoniesRoomEmotes, getPowerLevel(userId));
return <ImagePackContent imagePack={imagePack} canEdit={canEditImagePack} />;
}

View file

@ -0,0 +1,11 @@
import React from 'react';
import { ImagePackContent } from './ImagePackContent';
import { ImagePack } from '../../plugins/custom-emoji';
type UserImagePackProps = {
imagePack: ImagePack;
};
export function UserImagePack({ imagePack }: UserImagePackProps) {
return <ImagePackContent imagePack={imagePack} canEdit />;
}

View file

@ -0,0 +1 @@
export * from './ImagePackView';

View file

@ -1 +0,0 @@
export * from './ImagePackViewer';

View file

@ -4,7 +4,7 @@ import { Page, PageContent, PageHeader } from '../../../components/page';
import { GlobalPacks } from './GlobalPacks';
import { UserPack } from './UserPack';
import { ImagePack } from '../../../plugins/custom-emoji';
import { ImagePackView } from './ImagePackView';
import { ImagePackView } from '../../../components/image-pack-view';
type EmojisStickersProps = {
requestClose: () => void;