{
+export default abstract class HeaderButtons extends React.Component {
private storeToken: EventSubscription;
private dispatcherRef: string;
- constructor(props: IProps, kind: HeaderKind) {
+ constructor(props: IProps & P, kind: HeaderKind) {
super(props);
const rps = RightPanelStore.getSharedInstance();
@@ -95,7 +95,7 @@ export default abstract class HeaderButtons extends React.Component
diff --git a/src/components/views/right_panel/PinnedMessagesCard.tsx b/src/components/views/right_panel/PinnedMessagesCard.tsx
new file mode 100644
index 0000000000..a3f1f2d9df
--- /dev/null
+++ b/src/components/views/right_panel/PinnedMessagesCard.tsx
@@ -0,0 +1,176 @@
+/*
+Copyright 2021 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, useState} from "react";
+import { Room } from "matrix-js-sdk/src/models/room";
+import { RoomState } from "matrix-js-sdk/src/models/room-state";
+import { MatrixEvent } from "matrix-js-sdk/src/models/event";
+import { EventType } from 'matrix-js-sdk/src/@types/event';
+
+import { _t } from "../../../languageHandler";
+import BaseCard from "./BaseCard";
+import Spinner from "../elements/Spinner";
+import MatrixClientContext from "../../../contexts/MatrixClientContext";
+import { useEventEmitter } from "../../../hooks/useEventEmitter";
+import PinningUtils from "../../../utils/PinningUtils";
+import { useAsyncMemo } from "../../../hooks/useAsyncMemo";
+import PinnedEventTile from "../rooms/PinnedEventTile";
+
+interface IProps {
+ room: Room;
+ onClose(): void;
+}
+
+export const usePinnedEvents = (room: Room): string[] => {
+ const [pinnedEvents, setPinnedEvents] = useState([]);
+
+ const update = useCallback((ev?: MatrixEvent) => {
+ if (!room) return;
+ if (ev && ev.getType() !== EventType.RoomPinnedEvents) return;
+ setPinnedEvents(room.currentState.getStateEvents(EventType.RoomPinnedEvents, "")?.getContent()?.pinned || []);
+ }, [room]);
+
+ useEventEmitter(room?.currentState, "RoomState.events", update);
+ useEffect(() => {
+ update();
+ return () => {
+ setPinnedEvents([]);
+ };
+ }, [update]);
+ return pinnedEvents;
+};
+
+export const ReadPinsEventId = "im.vector.room.read_pins";
+
+export const useReadPinnedEvents = (room: Room): Set => {
+ const [readPinnedEvents, setReadPinnedEvents] = useState>(new Set());
+
+ const update = useCallback((ev?: MatrixEvent) => {
+ if (!room) return;
+ if (ev && ev.getType() !== ReadPinsEventId) return;
+ const readPins = room.getAccountData(ReadPinsEventId)?.getContent()?.event_ids;
+ setReadPinnedEvents(new Set(readPins || []));
+ }, [room]);
+
+ useEventEmitter(room, "Room.accountData", update);
+ useEffect(() => {
+ update();
+ return () => {
+ setReadPinnedEvents(new Set());
+ };
+ }, [update]);
+ return readPinnedEvents;
+};
+
+const useRoomState = (room: Room, mapper: (state: RoomState) => T): T => {
+ const [value, setValue] = useState(room ? mapper(room.currentState) : undefined);
+
+ const update = useCallback(() => {
+ if (!room) return;
+ setValue(mapper(room.currentState));
+ }, [room, mapper]);
+
+ useEventEmitter(room?.currentState, "RoomState.events", update);
+ useEffect(() => {
+ update();
+ return () => {
+ setValue(undefined);
+ };
+ }, [update]);
+ return value;
+};
+
+const PinnedMessagesCard = ({ room, onClose }: IProps) => {
+ const cli = useContext(MatrixClientContext);
+ const canUnpin = useRoomState(room, state => state.mayClientSendStateEvent(EventType.RoomPinnedEvents, cli));
+ const pinnedEventIds = usePinnedEvents(room);
+ const readPinnedEvents = useReadPinnedEvents(room);
+
+ useEffect(() => {
+ const newlyRead = pinnedEventIds.filter(id => !readPinnedEvents.has(id));
+ if (newlyRead.length > 0) {
+ // clear out any read pinned events which no longer are pinned
+ cli.setRoomAccountData(room.roomId, ReadPinsEventId, {
+ event_ids: pinnedEventIds,
+ });
+ }
+ }, [cli, room.roomId, pinnedEventIds, readPinnedEvents]);
+
+ const pinnedEvents = useAsyncMemo(() => {
+ const promises = pinnedEventIds.map(async eventId => {
+ const timelineSet = room.getUnfilteredTimelineSet();
+ const localEvent = timelineSet?.getTimelineForEvent(eventId)?.getEvents().find(e => e.getId() === eventId);
+ if (localEvent) return localEvent;
+
+ try {
+ const evJson = await cli.fetchRoomEvent(room.roomId, eventId);
+ const event = new MatrixEvent(evJson);
+ if (event.isEncrypted()) {
+ await cli.decryptEventIfNeeded(event); // TODO await?
+ }
+ if (event && PinningUtils.isPinnable(event)) {
+ return event;
+ }
+ } catch (err) {
+ console.error("Error looking up pinned event " + eventId + " in room " + room.roomId);
+ console.error(err);
+ }
+ return null;
+ });
+
+ return Promise.all(promises);
+ }, [cli, room, pinnedEventIds], null);
+
+ let content;
+ if (!pinnedEvents) {
+ content = ;
+ } else if (pinnedEvents.length > 0) {
+ let onUnpinClicked;
+ if (canUnpin) {
+ onUnpinClicked = async (event: MatrixEvent) => {
+ const pinnedEvents = room.currentState.getStateEvents(EventType.RoomPinnedEvents, "");
+ if (pinnedEvents?.getContent()?.pinned) {
+ const pinned = pinnedEvents.getContent().pinned;
+ const index = pinned.indexOf(event.getId());
+ if (index !== -1) {
+ pinned.splice(index, 1);
+ await cli.sendStateEvent(room.roomId, EventType.RoomPinnedEvents, { pinned }, "");
+ }
+ }
+ };
+ }
+
+ // show them in reverse, with latest pinned at the top
+ content = pinnedEvents.filter(Boolean).reverse().map(ev => (
+
+ ));
+ } else {
+ content =
+
{_t("You’re all caught up")}
+
{_t("You have no visible notifications.")}
+
+
+ { remText }
+ { avatars }
+
+
+ )
}
onSenderProfileClick = event => {
@@ -790,13 +812,6 @@ export default class EventTile extends React.Component {
return null;
}
const eventId = this.props.mxEvent.getId();
- if (!eventId) {
- // XXX: Temporary diagnostic logging for https://github.com/vector-im/element-web/issues/11120
- console.error("EventTile attempted to get relations for an event without an ID");
- // Use event's special `toJSON` method to log key data.
- console.log(JSON.stringify(this.props.mxEvent, null, 4));
- console.trace("Stacktrace for https://github.com/vector-im/element-web/issues/11120");
- }
return this.props.getRelationsForEvent(eventId, "m.annotation", "m.reaction");
};
@@ -960,7 +975,8 @@ export default class EventTile extends React.Component {
onFocusChange={this.onActionBarFocusChange}
/> : undefined;
- const timestamp = this.props.mxEvent.getTs() ?
+ const showTimestamp = this.props.mxEvent.getTs() && (this.props.alwaysShowTimestamps || this.state.hover);
+ const timestamp = showTimestamp ?
: null;
const keyRequestHelpText =
@@ -1023,11 +1039,7 @@ export default class EventTile extends React.Component {
let msgOption;
if (this.props.showReadReceipts) {
const readAvatars = this.getReadAvatars();
- msgOption = (
-
- { readAvatars }
-
- );
+ msgOption = readAvatars;
}
switch (this.props.tileShape) {
@@ -1131,11 +1143,20 @@ export default class EventTile extends React.Component {
// tab-index=-1 to allow it to be focusable but do not add tab stop for it, primarily for screen readers
return (
-
- { ircTimestamp }
- { sender }
- { ircPadlock }
-
+ React.createElement(this.props.as || "div", {
+ "ref": this.ref,
+ "className": classes,
+ "tabIndex": -1,
+ "aria-live": ariaLive,
+ "aria-atomic": "true",
+ "data-scroll-tokens": this.props["data-scroll-tokens"],
+ "onMouseEnter": () => this.setState({ hover: true }),
+ "onMouseLeave": () => this.setState({ hover: false }),
+ }, [
+ ircTimestamp,
+ sender,
+ ircPadlock,
+
{ groupTimestamp }
{ groupPadlock }
{ thread }
@@ -1152,16 +1173,12 @@ export default class EventTile extends React.Component {
{ keyRequestInfo }
{ reactionsRow }
{ actionBar }
-
- {msgOption}
- {
- // The avatar goes after the event tile as it's absolutely positioned to be over the
- // event tile line, so needs to be later in the DOM so it appears on top (this avoids
- // the need for further z-indexing chaos)
- }
- { avatar }
-
- );
+
{ _t("Invited") }
;
invitedSection = ;
+ createOverflowElement={this._createOverflowTileInvited}
+ getChildren={this._getChildrenInvited}
+ getChildCount={this._getChildCountInvited}
+ />;
}
const footer = (
@@ -520,9 +518,9 @@ export default class MemberList extends React.Component {
>
+ createOverflowElement={this._createOverflowTileJoined}
+ getChildren={this._getChildrenJoined}
+ getChildCount={this._getChildCountJoined} />
{ invitedHeader }
{ invitedSection }
diff --git a/src/components/views/rooms/PinnedEventTile.js b/src/components/views/rooms/PinnedEventTile.js
deleted file mode 100644
index 78cf422cc6..0000000000
--- a/src/components/views/rooms/PinnedEventTile.js
+++ /dev/null
@@ -1,111 +0,0 @@
-/*
-Copyright 2017 Travis Ralston
-
-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 from "react";
-import PropTypes from 'prop-types';
-import {MatrixClientPeg} from "../../../MatrixClientPeg";
-import dis from "../../../dispatcher/dispatcher";
-import AccessibleButton from "../elements/AccessibleButton";
-import MessageEvent from "../messages/MessageEvent";
-import MemberAvatar from "../avatars/MemberAvatar";
-import { _t } from '../../../languageHandler';
-import {formatFullDate} from '../../../DateUtils';
-import {replaceableComponent} from "../../../utils/replaceableComponent";
-
-@replaceableComponent("views.rooms.PinnedEventTile")
-export default class PinnedEventTile extends React.Component {
- static propTypes = {
- mxRoom: PropTypes.object.isRequired,
- mxEvent: PropTypes.object.isRequired,
- onUnpinned: PropTypes.func,
- };
-
- onTileClicked = () => {
- dis.dispatch({
- action: 'view_room',
- event_id: this.props.mxEvent.getId(),
- highlighted: true,
- room_id: this.props.mxEvent.getRoomId(),
- });
- };
-
- onUnpinClicked = () => {
- const pinnedEvents = this.props.mxRoom.currentState.getStateEvents("m.room.pinned_events", "");
- if (!pinnedEvents || !pinnedEvents.getContent().pinned) {
- // Nothing to do: already unpinned
- if (this.props.onUnpinned) this.props.onUnpinned();
- } else {
- const pinned = pinnedEvents.getContent().pinned;
- const index = pinned.indexOf(this.props.mxEvent.getId());
- if (index !== -1) {
- pinned.splice(index, 1);
- MatrixClientPeg.get().sendStateEvent(this.props.mxRoom.roomId, 'm.room.pinned_events', {pinned}, '')
- .then(() => {
- if (this.props.onUnpinned) this.props.onUnpinned();
- });
- } else if (this.props.onUnpinned) this.props.onUnpinned();
- }
- };
-
- _canUnpin() {
- return this.props.mxRoom.currentState.mayClientSendStateEvent('m.room.pinned_events', MatrixClientPeg.get());
- }
-
- render() {
- const sender = this.props.mxEvent.getSender();
- // Get the latest sender profile rather than historical
- const senderProfile = this.props.mxRoom.getMember(sender);
- const avatarSize = 40;
-
- let unpinButton = null;
- if (this._canUnpin()) {
- unpinButton = (
-
- ![{_t('Unpin]({require("../../../../res/img/cancel-red.svg")} "{_t('Unpin")
-
- );
- }
-
- return (
-
-
-
- { _t("Jump to message") }
-
- { unpinButton }
-
-
-
-
-
-
- { senderProfile ? senderProfile.name : sender }
-
-
- { formatFullDate(new Date(this.props.mxEvent.getTs())) }
-
-
- {}} // we need to give this, apparently
- />
-
-
+
+
+
+ { senderProfile?.name || sender }
+
+
+ { unpinButton }
+
+
+ {}} // we need to give this, apparently
+ />
+
+
+
+
+ { formatDate(new Date(this.props.event.getTs())) }
+
+
+
+ { _t("View message") }
+
+
+
{ _t("No pinned messages.") }
);
- }
-
- return this.state.pinned.map((context) => {
- return (
-
- );
- });
- }
-
- render() {
- let tiles = { _t("Loading...") }
;
- if (this.state && !this.state.loading) {
- tiles = this._getPinnedTiles();
- }
-
- return (
-
-
-
- ![]({require("../../../../res/img/cancel.svg")})
-
-
{ _t("Pinned Messages") }
- { tiles }
-
-
{ videoCallButton }
{ voiceCallButton }
- { pinnedEventsButton }
{ forgetButton }
{ appsButton }
{ searchButton }
@@ -275,7 +219,7 @@ export default class RoomHeader extends React.Component {
{ topicElement }
{ cancelButton }
{ rightRow }
-
+