mirror of
https://github.com/cinnyapp/cinny.git
synced 2025-02-13 17:10:06 +00:00
emoji pack editing - WIP
This commit is contained in:
parent
5bc1eabff2
commit
b18bce0c7e
src/app
components
image-pack-view
ImagePackContent.tsxImagePackView.tsxImageTile.tsxRoomImagePack.tsxUsageSelector.tsxUserImagePack.tsxindex.tsstyle.css.ts
image-pack-viewer
features/settings/emojis-stickers
|
@ -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">
|
|
@ -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>
|
23
src/app/components/image-pack-view/RoomImagePack.tsx
Normal file
23
src/app/components/image-pack-view/RoomImagePack.tsx
Normal 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} />;
|
||||
}
|
11
src/app/components/image-pack-view/UserImagePack.tsx
Normal file
11
src/app/components/image-pack-view/UserImagePack.tsx
Normal 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 />;
|
||||
}
|
1
src/app/components/image-pack-view/index.ts
Normal file
1
src/app/components/image-pack-view/index.ts
Normal file
|
@ -0,0 +1 @@
|
|||
export * from './ImagePackView';
|
|
@ -1 +0,0 @@
|
|||
export * from './ImagePackViewer';
|
|
@ -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;
|
||||
|
|
Loading…
Reference in a new issue