Alpha-level MSC2545 support

Signed-off-by: ckie <[email protected]>

res/css/_components.scss

@@ -236,6 +236,7 @@
 @import "./views/rooms/_Autocomplete.scss";
 @import "./views/rooms/_AuxPanel.scss";
 @import "./views/rooms/_BasicMessageComposer.scss";
+@import "./views/rooms/_Cookiestickers.scss";
 @import "./views/rooms/_E2EIcon.scss";
 @import "./views/rooms/_EditMessageComposer.scss";
 @import "./views/rooms/_EntityTile.scss";

res/css/views/rooms/_Cookiestickers.scss

@@ -0,0 +1,34 @@
+// .mx_Cookiestickers_*
+
+.mx_Cookiestickers_root {
+    overflow: scroll;
+    height: 500px;
+    .mx_RoomView_MessageList {
+        // grrr
+        height: unset !important;
+    }
+}
+
+.mx_Cookiestickers_grid {
+    display: flex;
+    flex-wrap: wrap;
+    max-width: 300px;
+    margin: 0 auto;
+}
+
+.mx_Cookiestickers_imageContainer {
+    flex-shrink: 1;
+    flex-basis: calc(25% - 10px);
+    margin: 5px;
+    user-select: none;
+    img {
+        width: 100%;
+        object-fit: contain;
+    }
+}
+
+.mx_Cookiestickers_label {
+    padding-left: 1em;
+    padding-right: 1em;
+    margin-top: 0px;
+}

src/components/views/rooms/Cookiestickerpicker.tsx

@@ -0,0 +1,177 @@
+/*
+Copyright 2015, 2016 OpenMarket Ltd
+Copyright 2017, 2018 Vector Creations Ltd
+Copyright 2019 Michael Telatynski <[email protected]>
+Copyright 2019, 2020, 2022 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import React, { useCallback, useContext, useEffect, useMemo, useState } from 'react';
+import { ClientEvent, MatrixClient } from 'matrix-js-sdk/src/client';
+import { RoomMember } from 'matrix-js-sdk/src/models/room-member';
+import { User } from 'matrix-js-sdk/src/models/user';
+import { Room } from 'matrix-js-sdk/src/models/room';
+import { VerificationRequest } from "matrix-js-sdk/src/crypto/verification/request/VerificationRequest";
+import { logger } from "matrix-js-sdk/src/logger";
+
+import dis from '../../../dispatcher/dispatcher';
+import Modal from '../../../Modal';
+import { _t } from '../../../languageHandler';
+import DMRoomMap from '../../../utils/DMRoomMap';
+import AccessibleButton, { ButtonEvent } from '../elements/AccessibleButton';
+import SdkConfig from '../../../SdkConfig';
+import { MatrixClientPeg } from "../../../MatrixClientPeg";
+import E2EIcon from "../rooms/E2EIcon";
+import { useTypedEventEmitter } from "../../../hooks/useEventEmitter";
+import MatrixClientContext from "../../../contexts/MatrixClientContext";
+import { RightPanelPhases } from '../../../stores/right-panel/RightPanelStorePhases';
+import EncryptionPanel from "./EncryptionPanel";
+import { legacyVerifyUser, verifyDevice, verifyUser } from '../../../verification';
+import { Action } from "../../../dispatcher/actions";
+import { UserTab } from "../dialogs/UserTab";
+import { useIsEncrypted } from "../../../hooks/useIsEncrypted";
+import BaseCard from "./BaseCard";
+import { E2EStatus } from "../../../utils/ShieldUtils";
+import ImageView from "../elements/ImageView";
+import Spinner from "../elements/Spinner";
+import MemberAvatar from "../avatars/MemberAvatar";
+import PresenceLabel from "../rooms/PresenceLabel";
+import ErrorDialog from "../dialogs/ErrorDialog";
+import QuestionDialog from "../dialogs/QuestionDialog";
+import RoomAvatar from "../avatars/RoomAvatar";
+import RoomName from "../elements/RoomName";
+import { mediaFromMxc } from "../../../customisations/Media";
+import UIStore from "../../../stores/UIStore";
+import RightPanelStore from '../../../stores/right-panel/RightPanelStore';
+import { IRightPanelCardState } from '../../../stores/right-panel/RightPanelStoreIPanelState';
+import UserIdentifierCustomisations from '../../../customisations/UserIdentifier';
+import PosthogTrackers from "../../../PosthogTrackers";
+import ContextMenu, { ChevronFace } from '../../structures/ContextMenu';
+import GenericElementContextMenu from '../context_menus/GenericElementContextMenu';
+import MStickerBody from '../messages/MStickerBody';
+import ScrollPanel from '../../structures/ScrollPanel';
+import { IImageInfo } from 'matrix-js-sdk';
+
+const EMOTE_ROOMS_EVENT_TYPE = "im.ponies.emote_rooms";
+const ROOM_EMOTES_EVENT_TYPE = "im.ponies.room_emotes";
+
+// Css Class; it's a short name for easy usage.
+const CC = (thing: string) => "mx_Cookiestickers_" + thing;
+
+interface I2545Image {
+    body: string;
+    info: IImageInfo;
+    url: string; // mxc
+    usage: ("sticker" | "emoticon")[];
+}
+
+interface I2545Pack {
+    pack: {
+        attribution: string;
+        avatar_url: string;
+        display_name: string;
+    };
+    images: {
+        [id: string]: I2545Image;
+    }
+}
+
+export const Cookiestickerpicker: React.FC<{
+    room: Room;
+    threadId: string;
+    menuPosition?: any;
+    isStickerPickerOpen: boolean;
+    setStickerPickerOpen: (isStickerPickerOpen: boolean) => void;
+}> = ({ room, threadId, menuPosition, isStickerPickerOpen, setStickerPickerOpen }) => {
+    if (!isStickerPickerOpen) return null;
+
+    const cli = useContext(MatrixClientContext);
+    const evt = cli.getAccountData(EMOTE_ROOMS_EVENT_TYPE);
+    const evtContent = evt.event.content as { rooms: { [roomId: string]: { [packName: string]: {} } } };
+
+    const packs = Object.keys(evtContent.rooms)
+        .map(roomId => {
+            const room = cli.getRoom(roomId);
+            return Object.keys(evtContent.rooms[roomId])
+                .map(name => {
+                    const pack = room.currentState.getStateEvents(ROOM_EMOTES_EVENT_TYPE, name).event.content as I2545Pack;
+                    return { room, pack, packName: name };
+                });
+        }).flat(1);
+
+    const PackImage = (image: I2545Image) => {
+        const media = mediaFromMxc(image.url, cli);
+        // noinspection JSIgnoredPromiseFromCall
+        media.downloadSource();
+        const onImageClick = (imgEvt: React.MouseEvent) => {
+            imgEvt.preventDefault();
+            cli.sendStickerMessage(room.roomId, threadId, media.srcMxc, image.info, image.body);
+            setStickerPickerOpen(false);
+        };
+        return <div key={image.url} className={CC("imageContainer")}>
+            <img src={media.srcHttp} onClick={onImageClick} />
+        </div>;
+    };
+
+    const renderedPacks = packs.map(({ room, pack, packName }) => {
+        const images = Object.values(pack.images).map(PackImage);
+        return <div key={packName}>
+            <h3 className={CC("label")}>{pack.pack.display_name}</h3>
+            <div className={CC("grid")}>
+                {images}
+            </div>
+        </div>;
+    });
+
+    const finished = () => {
+        if (isStickerPickerOpen) {
+            setStickerPickerOpen(false);
+        }
+    }
+
+    return <ContextMenu
+        chevronFace={ChevronFace.Bottom}
+        menuWidth={300}
+        menuHeight={500}
+        onFinished={finished}
+        menuPaddingTop={0}
+        menuPaddingLeft={0}
+        menuPaddingRight={0}
+        zIndex={3500}
+        {...menuPosition}
+    >
+        <GenericElementContextMenu element={
+            <ScrollPanel startAtBottom={false} className={CC("root")}>
+                {renderedPacks}
+            </ScrollPanel>}
+            onResize={finished} />
+    </ContextMenu>;
+
+};
+
+
+/* const accountDataHandler = useCallback((ev) => {
+*     console.log("ckalm", ev);
+*     // TODO
+* }, [cli]);
+* useTypedEventEmitter(cli, ClientEvent.AccountData, accountDataHandler);
+*/
+    // Count of how many operations are currently in progress, if > 0 then show a Spinner
+/* const [pendingUpdateCount, setPendingUpdateCount] = useState(0); */
+/* const startUpdating = useCallback(() => {
+*     setPendingUpdateCount(pendingUpdateCount + 1);
+* }, [pendingUpdateCount]);
+* const stopUpdating = useCallback(() => {
+*     setPendingUpdateCount(pendingUpdateCount - 1);
+* }, [pendingUpdateCount]); */

src/components/views/rooms/MessageComposer.tsx

@@ -53,6 +53,7 @@ import MessageComposerButtons from './MessageComposerButtons';
 import { ButtonEvent } from '../elements/AccessibleButton';
 import { ViewRoomPayload } from "../../../dispatcher/payloads/ViewRoomPayload";
 import { Icon as InfoIcon } from "../../../../res/img/element-icons/room/room-summary.svg";
+import { Cookiestickerpicker } from './Cookiestickerpicker';
 
 let instanceCount = 0;
 
@@ -420,7 +421,7 @@ export default class MessageComposer extends React.Component<IProps, IState> {
             : null;
 
         controls.push(
-            <Stickerpicker
+            <Cookiestickerpicker
                 room={this.props.room}
                 threadId={threadId}
                 isStickerPickerOpen={this.state.isStickerPickerOpen}
@@ -430,6 +431,7 @@ export default class MessageComposer extends React.Component<IProps, IState> {
             />,
         );
 
+
         const showSendButton = !this.state.isComposerEmpty || this.state.haveRecording;
 
         if (this.props.e2eStatus) {