Add checkbox to make pack global

This commit is contained in:
Ajay Bura 2022-07-31 16:07:17 +05:30 committed by Ajay Bura
parent 91b18cc5fd
commit 9174d6d93e
3 changed files with 46 additions and 11 deletions

View file

@ -79,7 +79,7 @@ function useRoomImagePack(roomId, stateKey) {
const packEvent = room.currentState.getStateEvents('im.ponies.room_emotes', stateKey);
const pack = useMemo(() => (
ImagePackBuilder.parsePack(packEvent.getId(), packEvent.getContent(), room)
ImagePackBuilder.parsePack(packEvent.getId(), packEvent.getContent())
), [room, stateKey]);
const sendPackContent = (content) => {
@ -183,10 +183,29 @@ function useImagePackHandles(pack, sendPackContent) {
};
}
function addGlobalImagePack(mx, roomId, stateKey) {
const content = mx.getAccountData('im.ponies.emote_rooms')?.getContent() ?? {};
if (!content.rooms) content.rooms = {};
if (!content.rooms[roomId]) content.rooms[roomId] = {};
content.rooms[roomId][stateKey] = {};
return mx.setAccountData('im.ponies.emote_rooms', content);
}
function removeGlobalImagePack(mx, roomId, stateKey) {
const content = mx.getAccountData('im.ponies.emote_rooms')?.getContent() ?? {};
if (!content.rooms) return Promise.resolve();
if (!content.rooms[roomId]) return Promise.resolve();
delete content.rooms[roomId][stateKey];
if (Object.keys(content.rooms[roomId]).length === 0) {
delete content.rooms[roomId];
}
return mx.setAccountData('im.ponies.emote_rooms', content);
}
function ImagePack({ roomId, stateKey }) {
const mx = initMatrix.matrixClient;
const room = mx.getRoom(roomId);
const [viewMore, setViewMore] = useState(false);
const [isGlobal, setIsGlobal] = useState(isGlobalPack(roomId, stateKey));
const { pack, sendPackContent } = useRoomImagePack(roomId, stateKey);
@ -200,6 +219,12 @@ function ImagePack({ roomId, stateKey }) {
handleAddItem,
} = useImagePackHandles(pack, sendPackContent);
const handleGlobalChange = (isG) => {
setIsGlobal(isG);
if (isG) addGlobalImagePack(mx, roomId, stateKey);
else removeGlobalImagePack(mx, roomId, stateKey);
};
const myPowerlevel = room.getMember(mx.getUserId())?.powerLevel || 0;
const canChange = room.currentState.hasSufficientPowerLevelFor('state_default', myPowerlevel);
@ -251,7 +276,7 @@ function ImagePack({ roomId, stateKey }) {
</div>
)}
<div className="image-pack__global">
<Checkbox variant="positive" isActive={isGlobalPack(roomId, stateKey)} />
<Checkbox variant="positive" onToggle={handleGlobalChange} isActive={isGlobal} />
<div>
<Text variant="b2">Use globally</Text>
<Text variant="b3">Add this pack to your account to use in all rooms.</Text>

View file

@ -18,7 +18,7 @@ function RoomEmojis({ roomId }) {
return true;
});
return usablePacks.map((mEvent) => (
return usablePacks.reverse().map((mEvent) => (
<ImagePack
key={mEvent.getId()}
roomId={roomId}

View file

@ -3,23 +3,20 @@ import { emojis } from './emoji';
// https://github.com/Sorunome/matrix-doc/blob/soru/emotes/proposals/2545-emotes.md
class ImagePack {
static parsePack(eventId, packContent, room) {
static parsePack(eventId, packContent) {
if (!eventId || typeof packContent?.images !== 'object') {
return null;
}
return new ImagePack(eventId, packContent, room);
return new ImagePack(eventId, packContent);
}
constructor(eventId, content, room) {
constructor(eventId, content) {
this.id = eventId;
this.content = JSON.parse(JSON.stringify(content));
this.applyPack(content);
this.applyImages(content);
this.displayName ??= room?.name;
this.avatarUrl ??= room?.getMxcAvatarUrl();
}
applyPack(content) {
@ -160,7 +157,12 @@ function getGlobalImagePacks(mx) {
return stateKeys.map((stateKey) => {
const data = room.currentState.getStateEvents('im.ponies.room_emotes', stateKey);
return ImagePack.parsePack(data?.getId(), data?.getContent(), room);
const pack = ImagePack.parsePack(data?.getId(), data?.getContent());
if (pack) {
pack.displayName ??= room.name;
pack.avatarUrl ??= room.getMxcAvatarUrl();
}
return pack;
}).filter((pack) => pack !== null);
});
@ -174,6 +176,7 @@ function getUserImagePack(mx) {
}
const userImagePack = ImagePack.parsePack(mx.getUserId(), accountDataEmoji.event.content);
userImagePack.displayName ??= 'Personal Emoji';
return userImagePack;
}
@ -181,7 +184,14 @@ function getRoomImagePacks(room) {
const dataEvents = room.currentState.getStateEvents('im.ponies.room_emotes');
return dataEvents
.map((data) => ImagePack.parsePack(data.getId(), data.getContent(), room))
.map((data) => {
const pack = ImagePack.parsePack(data?.getId(), data?.getContent());
if (pack) {
pack.displayName ??= room.name;
pack.avatarUrl ??= room.getMxcAvatarUrl();
}
return pack;
})
.filter((pack) => pack !== null);
}