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 packEvent = room.currentState.getStateEvents('im.ponies.room_emotes', stateKey);
const pack = useMemo(() => ( const pack = useMemo(() => (
ImagePackBuilder.parsePack(packEvent.getId(), packEvent.getContent(), room) ImagePackBuilder.parsePack(packEvent.getId(), packEvent.getContent())
), [room, stateKey]); ), [room, stateKey]);
const sendPackContent = (content) => { 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 }) { function ImagePack({ roomId, stateKey }) {
const mx = initMatrix.matrixClient; const mx = initMatrix.matrixClient;
const room = mx.getRoom(roomId); const room = mx.getRoom(roomId);
const [viewMore, setViewMore] = useState(false); const [viewMore, setViewMore] = useState(false);
const [isGlobal, setIsGlobal] = useState(isGlobalPack(roomId, stateKey));
const { pack, sendPackContent } = useRoomImagePack(roomId, stateKey); const { pack, sendPackContent } = useRoomImagePack(roomId, stateKey);
@ -200,6 +219,12 @@ function ImagePack({ roomId, stateKey }) {
handleAddItem, handleAddItem,
} = useImagePackHandles(pack, sendPackContent); } = 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 myPowerlevel = room.getMember(mx.getUserId())?.powerLevel || 0;
const canChange = room.currentState.hasSufficientPowerLevelFor('state_default', myPowerlevel); const canChange = room.currentState.hasSufficientPowerLevelFor('state_default', myPowerlevel);
@ -251,7 +276,7 @@ function ImagePack({ roomId, stateKey }) {
</div> </div>
)} )}
<div className="image-pack__global"> <div className="image-pack__global">
<Checkbox variant="positive" isActive={isGlobalPack(roomId, stateKey)} /> <Checkbox variant="positive" onToggle={handleGlobalChange} isActive={isGlobal} />
<div> <div>
<Text variant="b2">Use globally</Text> <Text variant="b2">Use globally</Text>
<Text variant="b3">Add this pack to your account to use in all rooms.</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 true;
}); });
return usablePacks.map((mEvent) => ( return usablePacks.reverse().map((mEvent) => (
<ImagePack <ImagePack
key={mEvent.getId()} key={mEvent.getId()}
roomId={roomId} 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 // https://github.com/Sorunome/matrix-doc/blob/soru/emotes/proposals/2545-emotes.md
class ImagePack { class ImagePack {
static parsePack(eventId, packContent, room) { static parsePack(eventId, packContent) {
if (!eventId || typeof packContent?.images !== 'object') { if (!eventId || typeof packContent?.images !== 'object') {
return null; return null;
} }
return new ImagePack(eventId, packContent, room); return new ImagePack(eventId, packContent);
} }
constructor(eventId, content, room) { constructor(eventId, content) {
this.id = eventId; this.id = eventId;
this.content = JSON.parse(JSON.stringify(content)); this.content = JSON.parse(JSON.stringify(content));
this.applyPack(content); this.applyPack(content);
this.applyImages(content); this.applyImages(content);
this.displayName ??= room?.name;
this.avatarUrl ??= room?.getMxcAvatarUrl();
} }
applyPack(content) { applyPack(content) {
@ -160,7 +157,12 @@ function getGlobalImagePacks(mx) {
return stateKeys.map((stateKey) => { return stateKeys.map((stateKey) => {
const data = room.currentState.getStateEvents('im.ponies.room_emotes', 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); }).filter((pack) => pack !== null);
}); });
@ -174,6 +176,7 @@ function getUserImagePack(mx) {
} }
const userImagePack = ImagePack.parsePack(mx.getUserId(), accountDataEmoji.event.content); const userImagePack = ImagePack.parsePack(mx.getUserId(), accountDataEmoji.event.content);
userImagePack.displayName ??= 'Personal Emoji';
return userImagePack; return userImagePack;
} }
@ -181,7 +184,14 @@ function getRoomImagePacks(room) {
const dataEvents = room.currentState.getStateEvents('im.ponies.room_emotes'); const dataEvents = room.currentState.getStateEvents('im.ponies.room_emotes');
return dataEvents 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); .filter((pack) => pack !== null);
} }