Consolidate TileShape into TimelineRenderingType (#7843)
This commit is contained in:
Michael Telatynski
GitHub
parent
ca89d3b96e
commit
5f5bb4a4fe
21 changed files with 174 additions and 154 deletions
|
|
@ -56,7 +56,7 @@ $left-gutter: 64px;
|
|||
font-size: $font-14px;
|
||||
position: relative;
|
||||
|
||||
&[data-shape=thread_list][data-notification]::before {
|
||||
&[data-shape=ThreadsList][data-notification]::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 8px;
|
||||
|
|
@ -67,11 +67,11 @@ $left-gutter: 64px;
|
|||
left: auto;
|
||||
}
|
||||
|
||||
&[data-shape=thread_list][data-notification=total]::before {
|
||||
&[data-shape=ThreadsList][data-notification=total]::before {
|
||||
background-color: $roomtile-default-badge-bg-color;
|
||||
}
|
||||
|
||||
&[data-shape=thread_list][data-notification=highlight]::before {
|
||||
&[data-shape=ThreadsList][data-notification=highlight]::before {
|
||||
background-color: $alert;
|
||||
}
|
||||
|
||||
|
|
@ -797,7 +797,7 @@ $left-gutter: 64px;
|
|||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.mx_EventTile[data-shape=thread_list] {
|
||||
.mx_EventTile[data-shape=ThreadsList] {
|
||||
--topOffset: 20px;
|
||||
--leftOffset: 46px;
|
||||
|
||||
|
|
|
|||
|
|
@ -33,7 +33,6 @@ import { replaceableComponent } from "../../utils/replaceableComponent";
|
|||
import ResizeNotifier from '../../utils/ResizeNotifier';
|
||||
import TimelinePanel from "./TimelinePanel";
|
||||
import Spinner from "../views/elements/Spinner";
|
||||
import { TileShape } from '../views/rooms/EventTile';
|
||||
import { Layout } from "../../settings/enums/Layout";
|
||||
import RoomContext, { TimelineRenderingType } from '../../contexts/RoomContext';
|
||||
|
||||
|
|
@ -270,7 +269,6 @@ class FilePanel extends React.Component<IProps, IState> {
|
|||
timelineSet={this.state.timelineSet}
|
||||
showUrlPreview={false}
|
||||
onPaginationRequest={this.onPaginationRequest}
|
||||
tileShape={TileShape.FileGrid}
|
||||
resizeNotifier={this.props.resizeNotifier}
|
||||
empty={emptyState}
|
||||
layout={Layout.Group}
|
||||
|
|
|
|||
|
|
@ -29,7 +29,7 @@ import SettingsStore from '../../settings/SettingsStore';
|
|||
import RoomContext, { TimelineRenderingType } from "../../contexts/RoomContext";
|
||||
import { Layout } from "../../settings/enums/Layout";
|
||||
import { _t } from "../../languageHandler";
|
||||
import EventTile, { haveTileForEvent, IReadReceiptProps, TileShape } from "../views/rooms/EventTile";
|
||||
import EventTile, { haveTileForEvent, IReadReceiptProps } from "../views/rooms/EventTile";
|
||||
import { hasText } from "../../TextForEvent";
|
||||
import IRCTimelineProfileResizer from "../views/elements/IRCTimelineProfileResizer";
|
||||
import DMRoomMap from "../../utils/DMRoomMap";
|
||||
|
|
@ -144,9 +144,6 @@ interface IProps {
|
|||
// className for the panel
|
||||
className: string;
|
||||
|
||||
// shape parameter to be passed to EventTiles
|
||||
tileShape?: TileShape;
|
||||
|
||||
// show twelve hour timestamps
|
||||
isTwelveHour?: boolean;
|
||||
|
||||
|
|
@ -802,7 +799,6 @@ export default class MessagePanel extends React.Component<IProps, IState> {
|
|||
showUrlPreview={this.props.showUrlPreview}
|
||||
checkUnmounting={this.isUnmounting}
|
||||
eventSendStatus={mxEv.getAssociatedStatus()}
|
||||
tileShape={this.props.tileShape}
|
||||
isTwelveHour={this.props.isTwelveHour}
|
||||
permalinkCreator={this.props.permalinkCreator}
|
||||
last={last}
|
||||
|
|
@ -994,7 +990,10 @@ export default class MessagePanel extends React.Component<IProps, IState> {
|
|||
const style = this.props.hidden ? { display: 'none' } : {};
|
||||
|
||||
let whoIsTyping;
|
||||
if (this.props.room && !this.props.tileShape && this.state.showTypingNotifications) {
|
||||
if (this.props.room &&
|
||||
this.state.showTypingNotifications &&
|
||||
this.context.timelineRenderingType === TimelineRenderingType.Room
|
||||
) {
|
||||
whoIsTyping = (<WhoIsTypingTile
|
||||
room={this.props.room}
|
||||
onShown={this.onTypingShown}
|
||||
|
|
|
|||
|
|
@ -23,7 +23,6 @@ import BaseCard from "../views/right_panel/BaseCard";
|
|||
import { replaceableComponent } from "../../utils/replaceableComponent";
|
||||
import TimelinePanel from "./TimelinePanel";
|
||||
import Spinner from "../views/elements/Spinner";
|
||||
import { TileShape } from "../views/rooms/EventTile";
|
||||
import { Layout } from "../../settings/enums/Layout";
|
||||
import RoomContext, { TimelineRenderingType } from "../../contexts/RoomContext";
|
||||
|
||||
|
|
@ -53,7 +52,6 @@ export default class NotificationPanel extends React.PureComponent<IProps> {
|
|||
manageReadMarkers={false}
|
||||
timelineSet={timelineSet}
|
||||
showUrlPreview={false}
|
||||
tileShape={TileShape.Notif}
|
||||
empty={emptyState}
|
||||
alwaysShowTimestamps={true}
|
||||
layout={Layout.Group}
|
||||
|
|
|
|||
|
|
@ -36,7 +36,6 @@ import ContextMenu, { ChevronFace, MenuItemRadio, useContextMenu } from './Conte
|
|||
import RoomContext, { TimelineRenderingType } from '../../contexts/RoomContext';
|
||||
import TimelinePanel from './TimelinePanel';
|
||||
import { Layout } from '../../settings/enums/Layout';
|
||||
import { TileShape } from '../views/rooms/EventTile';
|
||||
import { RoomPermalinkCreator } from '../../utils/permalinks/Permalinks';
|
||||
import { useEventEmitter } from '../../hooks/useEventEmitter';
|
||||
|
||||
|
|
@ -302,7 +301,6 @@ const ThreadPanel: React.FC<IProps> = ({ roomId, onClose, permalinkCreator }) =>
|
|||
className="mx_RoomView_messagePanel mx_GroupLayout"
|
||||
membersLoaded={true}
|
||||
permalinkCreator={permalinkCreator}
|
||||
tileShape={TileShape.ThreadPanel}
|
||||
disableGrouping={true}
|
||||
/>
|
||||
) }
|
||||
|
|
|
|||
|
|
@ -28,7 +28,6 @@ import BaseCard from "../views/right_panel/BaseCard";
|
|||
import { RightPanelPhases } from "../../stores/right-panel/RightPanelStorePhases";
|
||||
import { replaceableComponent } from "../../utils/replaceableComponent";
|
||||
import ResizeNotifier from '../../utils/ResizeNotifier';
|
||||
import { TileShape } from '../views/rooms/EventTile';
|
||||
import MessageComposer from '../views/rooms/MessageComposer';
|
||||
import { RoomPermalinkCreator } from '../../utils/permalinks/Permalinks';
|
||||
import { Layout } from '../../settings/enums/Layout';
|
||||
|
|
@ -284,7 +283,6 @@ export default class ThreadView extends React.Component<IProps, IState> {
|
|||
sendReadReceiptOnLoad={true}
|
||||
timelineSet={this.state?.thread?.timelineSet}
|
||||
showUrlPreview={true}
|
||||
tileShape={TileShape.Thread}
|
||||
// ThreadView doesn't support IRC layout at this time
|
||||
layout={this.state.layout === Layout.Bubble ? Layout.Bubble : Layout.Group}
|
||||
hideThreadedMessages={false}
|
||||
|
|
|
|||
|
|
@ -39,7 +39,7 @@ import { Action } from '../../dispatcher/actions';
|
|||
import { Key } from '../../Keyboard';
|
||||
import Timer from '../../utils/Timer';
|
||||
import shouldHideEvent from '../../shouldHideEvent';
|
||||
import { haveTileForEvent, TileShape } from "../views/rooms/EventTile";
|
||||
import { haveTileForEvent } from "../views/rooms/EventTile";
|
||||
import { UIFeature } from "../../settings/UIFeature";
|
||||
import { replaceableComponent } from "../../utils/replaceableComponent";
|
||||
import { arrayFastClone } from "../../utils/arrays";
|
||||
|
|
@ -103,9 +103,6 @@ interface IProps {
|
|||
// classname to use for the messagepanel
|
||||
className?: string;
|
||||
|
||||
// shape property to be passed to EventTiles
|
||||
tileShape?: TileShape;
|
||||
|
||||
// placeholder to use if the timeline is empty
|
||||
empty?: ReactNode;
|
||||
|
||||
|
|
@ -1644,7 +1641,6 @@ class TimelinePanel extends React.Component<IProps, IState> {
|
|||
this.state.alwaysShowTimestamps
|
||||
}
|
||||
className={this.props.className}
|
||||
tileShape={this.props.tileShape}
|
||||
resizeNotifier={this.props.resizeNotifier}
|
||||
getRelationsForEvent={this.getRelationsForEvent}
|
||||
editState={this.props.editState}
|
||||
|
|
|
|||
|
|
@ -18,7 +18,6 @@ import React, { ReactNode } from "react";
|
|||
import { logger } from "matrix-js-sdk/src/logger";
|
||||
|
||||
import { Playback, PlaybackState } from "../../../audio/Playback";
|
||||
import { TileShape } from "../rooms/EventTile";
|
||||
import { UPDATE_EVENT } from "../../../stores/AsyncStore";
|
||||
import { replaceableComponent } from "../../../utils/replaceableComponent";
|
||||
import { _t } from "../../../languageHandler";
|
||||
|
|
@ -29,7 +28,6 @@ interface IProps {
|
|||
playback: Playback;
|
||||
|
||||
mediaName?: string;
|
||||
tileShape?: TileShape;
|
||||
}
|
||||
|
||||
interface IState {
|
||||
|
|
|
|||
|
|
@ -19,16 +19,19 @@ import React, { ReactNode } from "react";
|
|||
import PlayPauseButton from "./PlayPauseButton";
|
||||
import PlaybackClock from "./PlaybackClock";
|
||||
import { replaceableComponent } from "../../../utils/replaceableComponent";
|
||||
import { TileShape } from "../rooms/EventTile";
|
||||
import PlaybackWaveform from "./PlaybackWaveform";
|
||||
import AudioPlayerBase from "./AudioPlayerBase";
|
||||
import RoomContext, { TimelineRenderingType } from "../../../contexts/RoomContext";
|
||||
|
||||
@replaceableComponent("views.audio_messages.RecordingPlayback")
|
||||
export default class RecordingPlayback extends AudioPlayerBase {
|
||||
static contextType = RoomContext;
|
||||
public context!: React.ContextType<typeof RoomContext>;
|
||||
|
||||
private get isWaveformable(): boolean {
|
||||
return this.props.tileShape !== TileShape.Notif
|
||||
&& this.props.tileShape !== TileShape.FileGrid
|
||||
&& this.props.tileShape !== TileShape.Pinned;
|
||||
return this.context.timelineRenderingType !== TimelineRenderingType.Notification
|
||||
&& this.context.timelineRenderingType !== TimelineRenderingType.File
|
||||
&& this.context.timelineRenderingType !== TimelineRenderingType.Pinned;
|
||||
}
|
||||
|
||||
protected renderComponent(): ReactNode {
|
||||
|
|
|
|||
|
|
@ -17,7 +17,6 @@ limitations under the License.
|
|||
import { MatrixEvent } from "matrix-js-sdk/src/models/event";
|
||||
import { Relations } from "matrix-js-sdk/src/models/relations";
|
||||
|
||||
import { TileShape } from "../rooms/EventTile";
|
||||
import { MediaEventHelper } from "../../../utils/MediaEventHelper";
|
||||
import EditorStateTransfer from "../../../utils/EditorStateTransfer";
|
||||
import { RoomPermalinkCreator } from "../../../utils/permalinks/Permalinks";
|
||||
|
|
@ -36,7 +35,6 @@ export interface IBodyProps {
|
|||
|
||||
showUrlPreview?: boolean;
|
||||
forExport?: boolean;
|
||||
tileShape: TileShape;
|
||||
maxImageHeight?: number;
|
||||
replacingEventId?: string;
|
||||
editState?: EditorStateTransfer;
|
||||
|
|
|
|||
|
|
@ -28,6 +28,7 @@ import { IBodyProps } from "./IBodyProps";
|
|||
import { PlaybackManager } from "../../../audio/PlaybackManager";
|
||||
import { isVoiceMessage } from "../../../utils/EventUtils";
|
||||
import { PlaybackQueue } from "../../../audio/PlaybackQueue";
|
||||
import RoomContext, { TimelineRenderingType } from "../../../contexts/RoomContext";
|
||||
|
||||
interface IState {
|
||||
error?: Error;
|
||||
|
|
@ -36,6 +37,9 @@ interface IState {
|
|||
|
||||
@replaceableComponent("views.messages.MAudioBody")
|
||||
export default class MAudioBody extends React.PureComponent<IBodyProps, IState> {
|
||||
static contextType = RoomContext;
|
||||
public context!: React.ContextType<typeof RoomContext>;
|
||||
|
||||
constructor(props: IBodyProps) {
|
||||
super(props);
|
||||
|
||||
|
|
@ -82,6 +86,12 @@ export default class MAudioBody extends React.PureComponent<IBodyProps, IState>
|
|||
this.state.playback?.destroy();
|
||||
}
|
||||
|
||||
protected get showFileBody(): boolean {
|
||||
return this.context.timelineRenderingType !== TimelineRenderingType.Room &&
|
||||
this.context.timelineRenderingType !== TimelineRenderingType.Pinned &&
|
||||
this.context.timelineRenderingType !== TimelineRenderingType.Search;
|
||||
}
|
||||
|
||||
public render() {
|
||||
if (this.state.error) {
|
||||
return (
|
||||
|
|
@ -115,7 +125,7 @@ export default class MAudioBody extends React.PureComponent<IBodyProps, IState>
|
|||
return (
|
||||
<span className="mx_MAudioBody">
|
||||
<AudioPlayer playback={this.state.playback} mediaName={this.props.mxEvent.getContent().body} />
|
||||
{ this.props.tileShape && <MFileBody {...this.props} showGenericPlaceholder={false} /> }
|
||||
{ this.showFileBody && <MFileBody {...this.props} showGenericPlaceholder={false} /> }
|
||||
</span>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -24,12 +24,12 @@ import AccessibleButton from "../elements/AccessibleButton";
|
|||
import { replaceableComponent } from "../../../utils/replaceableComponent";
|
||||
import { mediaFromContent } from "../../../customisations/Media";
|
||||
import ErrorDialog from "../dialogs/ErrorDialog";
|
||||
import { TileShape } from "../rooms/EventTile";
|
||||
import { presentableTextForFile } from "../../../utils/FileUtils";
|
||||
import { IMediaEventContent } from "../../../customisations/models/IMediaEventContent";
|
||||
import { IBodyProps } from "./IBodyProps";
|
||||
import { FileDownloader } from "../../../utils/FileDownloader";
|
||||
import TextWithTooltip from "../elements/TextWithTooltip";
|
||||
import RoomContext, { TimelineRenderingType } from "../../../contexts/RoomContext";
|
||||
|
||||
export let DOWNLOAD_ICON_URL; // cached copy of the download.svg asset for the sandboxed iframe later on
|
||||
|
||||
|
|
@ -108,6 +108,9 @@ interface IState {
|
|||
|
||||
@replaceableComponent("views.messages.MFileBody")
|
||||
export default class MFileBody extends React.Component<IProps, IState> {
|
||||
static contextType = RoomContext;
|
||||
public context!: React.ContextType<typeof RoomContext>;
|
||||
|
||||
static defaultProps = {
|
||||
showGenericPlaceholder: true,
|
||||
};
|
||||
|
|
@ -223,8 +226,15 @@ export default class MFileBody extends React.Component<IProps, IState> {
|
|||
</span>;
|
||||
}
|
||||
|
||||
const showDownloadLink = (this.props.tileShape || !this.props.showGenericPlaceholder) &&
|
||||
this.props.tileShape !== TileShape.Thread;
|
||||
let showDownloadLink = !this.props.showGenericPlaceholder || (
|
||||
this.context.timelineRenderingType !== TimelineRenderingType.Room &&
|
||||
this.context.timelineRenderingType !== TimelineRenderingType.Search &&
|
||||
this.context.timelineRenderingType !== TimelineRenderingType.Pinned
|
||||
);
|
||||
|
||||
if (this.context.timelineRenderingType === TimelineRenderingType.Thread) {
|
||||
showDownloadLink = false;
|
||||
}
|
||||
|
||||
if (isEncrypted) {
|
||||
if (!this.state.decryptedBlob) {
|
||||
|
|
@ -334,9 +344,11 @@ export default class MFileBody extends React.Component<IProps, IState> {
|
|||
<span className="mx_MFileBody_download_icon" />
|
||||
{ _t("Download %(text)s", { text: this.linkText }) }
|
||||
</a>
|
||||
{ this.props.tileShape === TileShape.FileGrid && <div className="mx_MImageBody_size">
|
||||
{ this.context.timelineRenderingType === TimelineRenderingType.File && (
|
||||
<div className="mx_MImageBody_size">
|
||||
{ this.content.info && this.content.info.size ? filesize(this.content.info.size) : "" }
|
||||
</div> }
|
||||
</div>
|
||||
) }
|
||||
</div> }
|
||||
</span>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -26,7 +26,6 @@ import MFileBody from './MFileBody';
|
|||
import Modal from '../../../Modal';
|
||||
import { _t } from '../../../languageHandler';
|
||||
import SettingsStore from "../../../settings/SettingsStore";
|
||||
import MatrixClientContext from "../../../contexts/MatrixClientContext";
|
||||
import InlineSpinner from '../elements/InlineSpinner';
|
||||
import { replaceableComponent } from "../../../utils/replaceableComponent";
|
||||
import { Media, mediaFromContent } from "../../../customisations/Media";
|
||||
|
|
@ -34,8 +33,9 @@ import { BLURHASH_FIELD } from "../../../ContentMessages";
|
|||
import { IMediaEventContent } from '../../../customisations/models/IMediaEventContent';
|
||||
import ImageView from '../elements/ImageView';
|
||||
import { IBodyProps } from "./IBodyProps";
|
||||
import { TileShape } from '../rooms/EventTile';
|
||||
import { ImageSize, suggestedSize as suggestedImageSize } from "../../../settings/enums/ImageSize";
|
||||
import { MatrixClientPeg } from '../../../MatrixClientPeg';
|
||||
import RoomContext, { TimelineRenderingType } from "../../../contexts/RoomContext";
|
||||
|
||||
interface IState {
|
||||
decryptedUrl?: string;
|
||||
|
|
@ -55,7 +55,9 @@ interface IState {
|
|||
|
||||
@replaceableComponent("views.messages.MImageBody")
|
||||
export default class MImageBody extends React.Component<IBodyProps, IState> {
|
||||
static contextType = MatrixClientContext;
|
||||
static contextType = RoomContext;
|
||||
public context!: React.ContextType<typeof RoomContext>;
|
||||
|
||||
private unmounted = true;
|
||||
private image = createRef<HTMLImageElement>();
|
||||
private timeout?: number;
|
||||
|
|
@ -297,7 +299,7 @@ export default class MImageBody extends React.Component<IBodyProps, IState> {
|
|||
|
||||
componentDidMount() {
|
||||
this.unmounted = false;
|
||||
this.context.on('sync', this.onClientSync);
|
||||
MatrixClientPeg.get().on('sync', this.onClientSync);
|
||||
|
||||
const showImage = this.state.showImage ||
|
||||
localStorage.getItem("mx_ShowImage_" + this.props.mxEvent.getId()) === "true";
|
||||
|
|
@ -327,7 +329,7 @@ export default class MImageBody extends React.Component<IBodyProps, IState> {
|
|||
|
||||
componentWillUnmount() {
|
||||
this.unmounted = true;
|
||||
this.context.removeListener('sync', this.onClientSync);
|
||||
MatrixClientPeg.get().removeListener('sync', this.onClientSync);
|
||||
this.clearBlurhashTimeout();
|
||||
SettingsStore.unwatchSetting(this.sizeWatcher);
|
||||
}
|
||||
|
|
@ -524,9 +526,11 @@ export default class MImageBody extends React.Component<IBodyProps, IState> {
|
|||
* In the room timeline or the thread context we don't need the download
|
||||
* link as the message action bar will fullfil that
|
||||
*/
|
||||
const hasMessageActionBar = !this.props.tileShape
|
||||
|| this.props.tileShape === TileShape.Thread
|
||||
|| this.props.tileShape === TileShape.ThreadPanel;
|
||||
const hasMessageActionBar = this.context.timelineRenderingType === TimelineRenderingType.Room
|
||||
|| this.context.timelineRenderingType === TimelineRenderingType.Pinned
|
||||
|| this.context.timelineRenderingType === TimelineRenderingType.Search
|
||||
|| this.context.timelineRenderingType === TimelineRenderingType.Thread
|
||||
|| this.context.timelineRenderingType === TimelineRenderingType.ThreadsList;
|
||||
if (!hasMessageActionBar) {
|
||||
return <MFileBody {...this.props} showGenericPlaceholder={false} />;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -28,6 +28,7 @@ import { IMediaEventContent } from "../../../customisations/models/IMediaEventCo
|
|||
import { IBodyProps } from "./IBodyProps";
|
||||
import MFileBody from "./MFileBody";
|
||||
import { ImageSize, suggestedSize as suggestedVideoSize } from "../../../settings/enums/ImageSize";
|
||||
import RoomContext, { TimelineRenderingType } from "../../../contexts/RoomContext";
|
||||
|
||||
interface IState {
|
||||
decryptedUrl?: string;
|
||||
|
|
@ -41,6 +42,9 @@ interface IState {
|
|||
|
||||
@replaceableComponent("views.messages.MVideoBody")
|
||||
export default class MVideoBody extends React.PureComponent<IBodyProps, IState> {
|
||||
static contextType = RoomContext;
|
||||
public context!: React.ContextType<typeof RoomContext>;
|
||||
|
||||
private videoRef = React.createRef<HTMLVideoElement>();
|
||||
private sizeWatcher: string;
|
||||
|
||||
|
|
@ -235,9 +239,15 @@ export default class MVideoBody extends React.PureComponent<IBodyProps, IState>
|
|||
this.props.onHeightChanged();
|
||||
};
|
||||
|
||||
protected get showFileBody(): boolean {
|
||||
return this.context.timelineRenderingType !== TimelineRenderingType.Room &&
|
||||
this.context.timelineRenderingType !== TimelineRenderingType.Pinned &&
|
||||
this.context.timelineRenderingType !== TimelineRenderingType.Search;
|
||||
}
|
||||
|
||||
private getFileBody = () => {
|
||||
if (this.props.forExport) return null;
|
||||
return this.props.tileShape && <MFileBody {...this.props} showGenericPlaceholder={false} />;
|
||||
return this.showFileBody && <MFileBody {...this.props} showGenericPlaceholder={false} />;
|
||||
};
|
||||
|
||||
render() {
|
||||
|
|
|
|||
|
|
@ -47,8 +47,8 @@ export default class MVoiceMessageBody extends MAudioBody {
|
|||
// At this point we should have a playable state
|
||||
return (
|
||||
<span className="mx_MVoiceMessageBody">
|
||||
<RecordingPlayback playback={this.state.playback} tileShape={this.props.tileShape} />
|
||||
{ this.props.tileShape && <MFileBody {...this.props} showGenericPlaceholder={false} /> }
|
||||
<RecordingPlayback playback={this.state.playback} />
|
||||
{ this.showFileBody && <MFileBody {...this.props} showGenericPlaceholder={false} /> }
|
||||
</span>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -161,7 +161,6 @@ export default class MessageEvent extends React.Component<IProps> implements IMe
|
|||
highlights={this.props.highlights}
|
||||
highlightLink={this.props.highlightLink}
|
||||
showUrlPreview={this.props.showUrlPreview}
|
||||
tileShape={this.props.tileShape}
|
||||
forExport={this.props.forExport}
|
||||
maxImageHeight={this.props.maxImageHeight}
|
||||
replacingEventId={this.props.replacingEventId}
|
||||
|
|
|
|||
|
|
@ -24,7 +24,7 @@ import { getUserNameColorClass } from '../../../utils/FormattingUtils';
|
|||
import MatrixClientContext from "../../../contexts/MatrixClientContext";
|
||||
import { replaceableComponent } from "../../../utils/replaceableComponent";
|
||||
import UserIdentifier from '../../../customisations/UserIdentifier';
|
||||
import { TileShape } from '../rooms/EventTile';
|
||||
import RoomContext, { TimelineRenderingType } from '../../../contexts/RoomContext';
|
||||
import SettingsStore from "../../../settings/SettingsStore";
|
||||
import { MatrixClientPeg } from "../../../MatrixClientPeg";
|
||||
|
||||
|
|
@ -32,7 +32,6 @@ interface IProps {
|
|||
mxEvent: MatrixEvent;
|
||||
onClick?(): void;
|
||||
enableFlair: boolean;
|
||||
tileShape?: TileShape;
|
||||
}
|
||||
|
||||
interface IState {
|
||||
|
|
@ -121,7 +120,11 @@ export default class SenderProfile extends React.Component<IProps, IState> {
|
|||
const displayName = member?.rawDisplayName || mxEvent.getSender() || "";
|
||||
const mxid = member?.userId || mxEvent.getSender() || "";
|
||||
|
||||
if (msgtype === MsgType.Emote && this.props.tileShape !== TileShape.ThreadPanel) {
|
||||
return <RoomContext.Consumer>
|
||||
{ roomContext => {
|
||||
if (msgtype === MsgType.Emote &&
|
||||
roomContext.timelineRenderingType !== TimelineRenderingType.ThreadsList
|
||||
) {
|
||||
return null; // emote message must include the name so don't duplicate it
|
||||
}
|
||||
|
||||
|
|
@ -142,10 +145,7 @@ export default class SenderProfile extends React.Component<IProps, IState> {
|
|||
this.state.userGroups, this.state.relatedGroups,
|
||||
);
|
||||
|
||||
flair = <Flair key='flair'
|
||||
userId={mxEvent.getSender()}
|
||||
groups={displayedGroups}
|
||||
/>;
|
||||
flair = <Flair key='flair' userId={mxEvent.getSender()} groups={displayedGroups} />;
|
||||
}
|
||||
|
||||
return (
|
||||
|
|
@ -157,5 +157,7 @@ export default class SenderProfile extends React.Component<IProps, IState> {
|
|||
{ flair }
|
||||
</div>
|
||||
);
|
||||
} }
|
||||
</RoomContext.Consumer>;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -29,6 +29,7 @@ import PinningUtils from "../../../utils/PinningUtils";
|
|||
import { useAsyncMemo } from "../../../hooks/useAsyncMemo";
|
||||
import PinnedEventTile from "../rooms/PinnedEventTile";
|
||||
import { useRoomState } from "../../../hooks/useRoomState";
|
||||
import RoomContext, { TimelineRenderingType } from "../../../contexts/RoomContext";
|
||||
|
||||
interface IProps {
|
||||
room: Room;
|
||||
|
|
@ -78,6 +79,7 @@ export const useReadPinnedEvents = (room: Room): Set<string> => {
|
|||
|
||||
const PinnedMessagesCard = ({ room, onClose }: IProps) => {
|
||||
const cli = useContext(MatrixClientContext);
|
||||
const roomContext = useContext(RoomContext);
|
||||
const canUnpin = useRoomState(room, state => state.mayClientSendStateEvent(EventType.RoomPinnedEvents, cli));
|
||||
const pinnedEventIds = usePinnedEvents(room);
|
||||
const readPinnedEvents = useReadPinnedEvents(room);
|
||||
|
|
@ -166,7 +168,12 @@ const PinnedMessagesCard = ({ room, onClose }: IProps) => {
|
|||
className="mx_PinnedMessagesCard"
|
||||
onClose={onClose}
|
||||
>
|
||||
<RoomContext.Provider value={{
|
||||
...roomContext,
|
||||
timelineRenderingType: TimelineRenderingType.Pinned,
|
||||
}}>
|
||||
{ content }
|
||||
</RoomContext.Provider>
|
||||
</BaseCard>;
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -64,7 +64,7 @@ import SettingsStore from "../../../settings/SettingsStore";
|
|||
import MKeyVerificationConclusion from "../messages/MKeyVerificationConclusion";
|
||||
import { showThread } from '../../../dispatcher/dispatch-actions/threads';
|
||||
import { MessagePreviewStore } from '../../../stores/room-list/MessagePreviewStore';
|
||||
import { TimelineRenderingType } from "../../../contexts/RoomContext";
|
||||
import RoomContext, { TimelineRenderingType } from "../../../contexts/RoomContext";
|
||||
import { MediaEventHelper } from "../../../utils/MediaEventHelper";
|
||||
import Toolbar from '../../../accessibility/Toolbar';
|
||||
import { RovingAccessibleTooltipButton } from '../../../accessibility/roving/RovingAccessibleTooltipButton';
|
||||
|
|
@ -213,14 +213,6 @@ export interface IReadReceiptProps {
|
|||
ts: number;
|
||||
}
|
||||
|
||||
export enum TileShape {
|
||||
Notif = "notif",
|
||||
FileGrid = "file_grid",
|
||||
Pinned = "pinned",
|
||||
Thread = "thread",
|
||||
ThreadPanel = "thread_list"
|
||||
}
|
||||
|
||||
interface IProps {
|
||||
// the MatrixEvent to show
|
||||
mxEvent: MatrixEvent;
|
||||
|
|
@ -281,14 +273,6 @@ interface IProps {
|
|||
// that we can tell when it changes.
|
||||
eventSendStatus?: string;
|
||||
|
||||
// the shape of the tile. by default, the layout is intended for the
|
||||
// normal room timeline. alternative values are: "file_list", "file_grid"
|
||||
// and "notif". This could be done by CSS, but it'd be horribly inefficient.
|
||||
// It could also be done by subclassing EventTile, but that'd be quite
|
||||
// boiilerplatey. So just make the necessary render decisions conditional
|
||||
// for now.
|
||||
tileShape?: TileShape;
|
||||
|
||||
forExport?: boolean;
|
||||
|
||||
// show twelve hour timestamps
|
||||
|
|
@ -367,6 +351,7 @@ interface IState {
|
|||
threadNotification?: NotificationCountType;
|
||||
}
|
||||
|
||||
// MUST be rendered within a RoomContext with a set timelineRenderingType
|
||||
@replaceableComponent("views.rooms.EventTile")
|
||||
export default class EventTile extends React.Component<IProps, IState> {
|
||||
private suppressReadReceiptAnimation: boolean;
|
||||
|
|
@ -385,13 +370,12 @@ export default class EventTile extends React.Component<IProps, IState> {
|
|||
layout: Layout.Group,
|
||||
};
|
||||
|
||||
static contextType = MatrixClientContext;
|
||||
public context!: React.ContextType<typeof MatrixClientContext>;
|
||||
static contextType = RoomContext;
|
||||
public context!: React.ContextType<typeof RoomContext>;
|
||||
|
||||
constructor(props: IProps, context: React.ContextType<typeof MatrixClientContext>) {
|
||||
super(props, context);
|
||||
|
||||
this.context = context;
|
||||
const thread = this.thread;
|
||||
|
||||
this.state = {
|
||||
|
|
@ -437,12 +421,12 @@ export default class EventTile extends React.Component<IProps, IState> {
|
|||
if (!this.props.mxEvent) return false;
|
||||
|
||||
// Sanity check (should never happen, but we shouldn't explode if it does)
|
||||
const room = this.context.getRoom(this.props.mxEvent.getRoomId());
|
||||
const room = MatrixClientPeg.get().getRoom(this.props.mxEvent.getRoomId());
|
||||
if (!room) return false;
|
||||
|
||||
// Quickly check to see if the event was sent by us. If it wasn't, it won't qualify for
|
||||
// special read receipts.
|
||||
const myUserId = this.context.getUserId();
|
||||
const myUserId = MatrixClientPeg.get().getUserId();
|
||||
if (this.props.mxEvent.getSender() !== myUserId) return false;
|
||||
|
||||
// Finally, determine if the type is relevant to the user. This notably excludes state
|
||||
|
|
@ -473,7 +457,7 @@ export default class EventTile extends React.Component<IProps, IState> {
|
|||
|
||||
// If anyone has read the event besides us, we don't want to show a sent receipt.
|
||||
const receipts = this.props.readReceipts || [];
|
||||
const myUserId = this.context.getUserId();
|
||||
const myUserId = MatrixClientPeg.get().getUserId();
|
||||
if (receipts.some(r => r.userId !== myUserId)) return false;
|
||||
|
||||
// Finally, we should show a receipt.
|
||||
|
|
@ -501,7 +485,7 @@ export default class EventTile extends React.Component<IProps, IState> {
|
|||
|
||||
componentDidMount() {
|
||||
this.suppressReadReceiptAnimation = false;
|
||||
const client = this.context;
|
||||
const client = MatrixClientPeg.get();
|
||||
if (!this.props.forExport) {
|
||||
client.on("deviceVerificationChanged", this.onDeviceVerificationChanged);
|
||||
client.on("userTrustStatusChanged", this.onUserVerificationChanged);
|
||||
|
|
@ -526,12 +510,12 @@ export default class EventTile extends React.Component<IProps, IState> {
|
|||
}
|
||||
}
|
||||
|
||||
const room = this.context.getRoom(this.props.mxEvent.getRoomId());
|
||||
const room = MatrixClientPeg.get().getRoom(this.props.mxEvent.getRoomId());
|
||||
room?.on(ThreadEvent.New, this.onNewThread);
|
||||
}
|
||||
|
||||
private setupNotificationListener = (thread: Thread): void => {
|
||||
const room = this.context.getRoom(this.props.mxEvent.getRoomId());
|
||||
const room = MatrixClientPeg.get().getRoom(this.props.mxEvent.getRoomId());
|
||||
const notifications = RoomNotificationStateStore.instance.getThreadsRoomState(room);
|
||||
|
||||
this.threadState = notifications.getThreadRoomState(thread);
|
||||
|
|
@ -592,7 +576,7 @@ export default class EventTile extends React.Component<IProps, IState> {
|
|||
}
|
||||
|
||||
componentWillUnmount() {
|
||||
const client = this.context;
|
||||
const client = MatrixClientPeg.get();
|
||||
client.removeListener("deviceVerificationChanged", this.onDeviceVerificationChanged);
|
||||
client.removeListener("userTrustStatusChanged", this.onUserVerificationChanged);
|
||||
client.removeListener("Room.receipt", this.onRoomReceipt);
|
||||
|
|
@ -606,7 +590,7 @@ export default class EventTile extends React.Component<IProps, IState> {
|
|||
this.props.mxEvent.off(ThreadEvent.Update, this.updateThread);
|
||||
}
|
||||
|
||||
const room = this.context.getRoom(this.props.mxEvent.getRoomId());
|
||||
const room = MatrixClientPeg.get().getRoom(this.props.mxEvent.getRoomId());
|
||||
room?.off(ThreadEvent.New, this.onNewThread);
|
||||
if (this.threadState) {
|
||||
this.threadState.off(NotificationStateEvents.Update, this.onThreadStateUpdate);
|
||||
|
|
@ -616,7 +600,7 @@ export default class EventTile extends React.Component<IProps, IState> {
|
|||
componentDidUpdate(prevProps: IProps, prevState: IState, snapshot) {
|
||||
// If we're not listening for receipts and expect to be, register a listener.
|
||||
if (!this.isListeningForReceipts && (this.shouldShowSentReceipt || this.shouldShowSendingReceipt)) {
|
||||
this.context.on("Room.receipt", this.onRoomReceipt);
|
||||
MatrixClientPeg.get().on("Room.receipt", this.onRoomReceipt);
|
||||
this.isListeningForReceipts = true;
|
||||
}
|
||||
}
|
||||
|
|
@ -624,7 +608,7 @@ export default class EventTile extends React.Component<IProps, IState> {
|
|||
private onNewThread = (thread: Thread) => {
|
||||
if (thread.id === this.props.mxEvent.getId()) {
|
||||
this.updateThread(thread);
|
||||
const room = this.context.getRoom(this.props.mxEvent.getRoomId());
|
||||
const room = MatrixClientPeg.get().getRoom(this.props.mxEvent.getRoomId());
|
||||
room.off(ThreadEvent.New, this.onNewThread);
|
||||
}
|
||||
};
|
||||
|
|
@ -734,7 +718,7 @@ export default class EventTile extends React.Component<IProps, IState> {
|
|||
|
||||
private onRoomReceipt = (ev: MatrixEvent, room: Room): void => {
|
||||
// ignore events for other rooms
|
||||
const tileRoom = this.context.getRoom(this.props.mxEvent.getRoomId());
|
||||
const tileRoom = MatrixClientPeg.get().getRoom(this.props.mxEvent.getRoomId());
|
||||
if (room !== tileRoom) return;
|
||||
|
||||
if (!this.shouldShowSentReceipt && !this.shouldShowSendingReceipt && !this.isListeningForReceipts) {
|
||||
|
|
@ -746,7 +730,7 @@ export default class EventTile extends React.Component<IProps, IState> {
|
|||
this.forceUpdate(() => {
|
||||
// Per elsewhere in this file, we can remove the listener once we will have no further purpose for it.
|
||||
if (!this.shouldShowSentReceipt && !this.shouldShowSendingReceipt) {
|
||||
this.context.removeListener("Room.receipt", this.onRoomReceipt);
|
||||
MatrixClientPeg.get().removeListener("Room.receipt", this.onRoomReceipt);
|
||||
this.isListeningForReceipts = false;
|
||||
}
|
||||
});
|
||||
|
|
@ -779,9 +763,9 @@ export default class EventTile extends React.Component<IProps, IState> {
|
|||
return;
|
||||
}
|
||||
|
||||
const encryptionInfo = this.context.getEventEncryptionInfo(mxEvent);
|
||||
const encryptionInfo = MatrixClientPeg.get().getEventEncryptionInfo(mxEvent);
|
||||
const senderId = mxEvent.getSender();
|
||||
const userTrust = this.context.checkUserTrust(senderId);
|
||||
const userTrust = MatrixClientPeg.get().checkUserTrust(senderId);
|
||||
|
||||
if (encryptionInfo.mismatchedSender) {
|
||||
// something definitely wrong is going on here
|
||||
|
|
@ -799,7 +783,7 @@ export default class EventTile extends React.Component<IProps, IState> {
|
|||
return;
|
||||
}
|
||||
|
||||
const eventSenderTrust = encryptionInfo.sender && this.context.checkDeviceTrust(
|
||||
const eventSenderTrust = encryptionInfo.sender && MatrixClientPeg.get().checkDeviceTrust(
|
||||
senderId, encryptionInfo.sender.deviceId,
|
||||
);
|
||||
if (!eventSenderTrust) {
|
||||
|
|
@ -878,14 +862,16 @@ export default class EventTile extends React.Component<IProps, IState> {
|
|||
|
||||
private shouldHighlight(): boolean {
|
||||
if (this.props.forExport) return false;
|
||||
if (this.props.tileShape === TileShape.Notif) return false;
|
||||
if (this.props.tileShape === TileShape.ThreadPanel) return false;
|
||||
if (this.context.timelineRenderingType === TimelineRenderingType.Notification) return false;
|
||||
if (this.context.timelineRenderingType === TimelineRenderingType.ThreadsList) return false;
|
||||
|
||||
const actions = this.context.getPushActionsForEvent(this.props.mxEvent.replacingEvent() || this.props.mxEvent);
|
||||
const actions = MatrixClientPeg.get().getPushActionsForEvent(
|
||||
this.props.mxEvent.replacingEvent() || this.props.mxEvent,
|
||||
);
|
||||
if (!actions || !actions.tweaks) { return false; }
|
||||
|
||||
// don't show self-highlights from another of our clients
|
||||
if (this.props.mxEvent.getSender() === this.context.credentials.userId) {
|
||||
if (this.props.mxEvent.getSender() === MatrixClientPeg.get().credentials.userId) {
|
||||
return false;
|
||||
}
|
||||
|
||||
|
|
@ -1013,7 +999,7 @@ export default class EventTile extends React.Component<IProps, IState> {
|
|||
// Cancel any outgoing key request for this event and resend it. If a response
|
||||
// is received for the request with the required keys, the event could be
|
||||
// decrypted successfully.
|
||||
this.context.cancelAndResendEventRoomKeyRequest(this.props.mxEvent);
|
||||
MatrixClientPeg.get().cancelAndResendEventRoomKeyRequest(this.props.mxEvent);
|
||||
};
|
||||
|
||||
private onPermalinkClicked = e => {
|
||||
|
|
@ -1054,7 +1040,7 @@ export default class EventTile extends React.Component<IProps, IState> {
|
|||
}
|
||||
}
|
||||
|
||||
if (this.context.isRoomEncrypted(ev.getRoomId())) {
|
||||
if (MatrixClientPeg.get().isRoomEncrypted(ev.getRoomId())) {
|
||||
// else if room is encrypted
|
||||
// and event is being encrypted or is not_sent (Unknown Devices/Network Error)
|
||||
if (ev.status === EventStatus.ENCRYPTING) {
|
||||
|
|
@ -1169,7 +1155,10 @@ export default class EventTile extends React.Component<IProps, IState> {
|
|||
const isEncryptionFailure = this.props.mxEvent.isDecryptionFailure();
|
||||
|
||||
let isContinuation = this.props.continuation;
|
||||
if (this.props.tileShape && this.props.layout !== Layout.Bubble) {
|
||||
if (this.context.timelineRenderingType !== TimelineRenderingType.Room &&
|
||||
this.context.timelineRenderingType !== TimelineRenderingType.Search &&
|
||||
this.props.layout !== Layout.Bubble
|
||||
) {
|
||||
isContinuation = false;
|
||||
}
|
||||
|
||||
|
|
@ -1196,7 +1185,7 @@ export default class EventTile extends React.Component<IProps, IState> {
|
|||
mx_EventTile_bad: isEncryptionFailure,
|
||||
mx_EventTile_emote: msgtype === MsgType.Emote,
|
||||
mx_EventTile_noSender: this.props.hideSender,
|
||||
mx_EventTile_clamp: this.props.tileShape === TileShape.ThreadPanel,
|
||||
mx_EventTile_clamp: this.context.timelineRenderingType === TimelineRenderingType.ThreadsList,
|
||||
mx_EventTile_noBubble: noBubbleEvent,
|
||||
});
|
||||
|
||||
|
|
@ -1219,7 +1208,9 @@ export default class EventTile extends React.Component<IProps, IState> {
|
|||
let avatarSize;
|
||||
let needsSenderProfile;
|
||||
|
||||
if (this.props.tileShape === TileShape.Notif || this.props.tileShape === TileShape.ThreadPanel) {
|
||||
if (this.context.timelineRenderingType === TimelineRenderingType.Notification ||
|
||||
this.context.timelineRenderingType === TimelineRenderingType.ThreadsList
|
||||
) {
|
||||
avatarSize = 24;
|
||||
needsSenderProfile = true;
|
||||
} else if (tileHandler === 'messages.RoomCreate' || isBubbleMessage) {
|
||||
|
|
@ -1234,7 +1225,7 @@ export default class EventTile extends React.Component<IProps, IState> {
|
|||
avatarSize = 14;
|
||||
needsSenderProfile = true;
|
||||
} else if (
|
||||
(this.props.continuation && this.props.tileShape !== TileShape.FileGrid) ||
|
||||
(this.props.continuation && this.context.timelineRenderingType !== TimelineRenderingType.File) ||
|
||||
eventType === EventType.CallInvite
|
||||
) {
|
||||
// no avatar or sender profile for continuation messages and call tiles
|
||||
|
|
@ -1269,17 +1260,20 @@ export default class EventTile extends React.Component<IProps, IState> {
|
|||
}
|
||||
|
||||
if (needsSenderProfile && this.props.hideSender !== true) {
|
||||
if (!this.props.tileShape || this.props.tileShape === TileShape.Thread) {
|
||||
sender = <SenderProfile onClick={this.onSenderProfileClick}
|
||||
if (this.context.timelineRenderingType === TimelineRenderingType.Room ||
|
||||
this.context.timelineRenderingType === TimelineRenderingType.Search ||
|
||||
this.context.timelineRenderingType === TimelineRenderingType.Pinned ||
|
||||
this.context.timelineRenderingType === TimelineRenderingType.Thread
|
||||
) {
|
||||
sender = <SenderProfile
|
||||
onClick={this.onSenderProfileClick}
|
||||
mxEvent={this.props.mxEvent}
|
||||
enableFlair={this.props.enableFlair}
|
||||
tileShape={this.props.tileShape}
|
||||
/>;
|
||||
} else {
|
||||
sender = <SenderProfile
|
||||
mxEvent={this.props.mxEvent}
|
||||
enableFlair={this.props.enableFlair}
|
||||
tileShape={this.props.tileShape}
|
||||
/>;
|
||||
}
|
||||
}
|
||||
|
|
@ -1303,16 +1297,16 @@ export default class EventTile extends React.Component<IProps, IState> {
|
|||
|| this.state.hover
|
||||
|| this.state.actionBarFocused);
|
||||
|
||||
const room = this.context.getRoom(this.props.mxEvent.getRoomId());
|
||||
const room = MatrixClientPeg.get().getRoom(this.props.mxEvent.getRoomId());
|
||||
const thread = room?.findThreadForEvent?.(this.props.mxEvent);
|
||||
|
||||
// Thread panel shows the timestamp of the last reply in that thread
|
||||
const ts = this.props.tileShape !== TileShape.ThreadPanel
|
||||
const ts = this.context.timelineRenderingType !== TimelineRenderingType.ThreadsList
|
||||
? this.props.mxEvent.getTs()
|
||||
: thread?.replyToEvent.getTs();
|
||||
|
||||
const messageTimestamp = <MessageTimestamp
|
||||
showRelative={this.props.tileShape === TileShape.ThreadPanel}
|
||||
showRelative={this.context.timelineRenderingType === TimelineRenderingType.ThreadsList}
|
||||
showTwelveHour={this.props.isTwelveHour}
|
||||
ts={ts}
|
||||
/>;
|
||||
|
|
@ -1392,7 +1386,7 @@ export default class EventTile extends React.Component<IProps, IState> {
|
|||
msgOption = readAvatars;
|
||||
}
|
||||
|
||||
const renderTarget = this.props.tileShape === TileShape.Thread
|
||||
const renderTarget = this.context.timelineRenderingType === TimelineRenderingType.Thread
|
||||
? RelationType.Thread
|
||||
: undefined;
|
||||
|
||||
|
|
@ -1412,11 +1406,11 @@ export default class EventTile extends React.Component<IProps, IState> {
|
|||
/>
|
||||
: null;
|
||||
|
||||
const isOwnEvent = this.props.mxEvent?.sender?.userId === this.context.getUserId();
|
||||
const isOwnEvent = this.props.mxEvent?.sender?.userId === MatrixClientPeg.get().getUserId();
|
||||
|
||||
switch (this.props.tileShape) {
|
||||
case TileShape.Notif: {
|
||||
const room = this.context.getRoom(this.props.mxEvent.getRoomId());
|
||||
switch (this.context.timelineRenderingType) {
|
||||
case TimelineRenderingType.Notification: {
|
||||
const room = MatrixClientPeg.get().getRoom(this.props.mxEvent.getRoomId());
|
||||
return React.createElement(this.props.as || "li", {
|
||||
"className": classes,
|
||||
"aria-live": ariaLive,
|
||||
|
|
@ -1443,7 +1437,6 @@ export default class EventTile extends React.Component<IProps, IState> {
|
|||
highlightLink={this.props.highlightLink}
|
||||
showUrlPreview={this.props.showUrlPreview}
|
||||
onHeightChanged={this.props.onHeightChanged}
|
||||
tileShape={this.props.tileShape}
|
||||
editState={this.props.editState}
|
||||
getRelationsForEvent={this.props.getRelationsForEvent}
|
||||
isSeeingThroughMessageHiddenForModeration={isSeeingThroughMessageHiddenForModeration}
|
||||
|
|
@ -1451,8 +1444,8 @@ export default class EventTile extends React.Component<IProps, IState> {
|
|||
</div>,
|
||||
]);
|
||||
}
|
||||
case TileShape.Thread: {
|
||||
const room = this.context.getRoom(this.props.mxEvent.getRoomId());
|
||||
case TimelineRenderingType.Thread: {
|
||||
const room = MatrixClientPeg.get().getRoom(this.props.mxEvent.getRoomId());
|
||||
return React.createElement(this.props.as || "li", {
|
||||
"ref": this.ref,
|
||||
"className": classes,
|
||||
|
|
@ -1485,7 +1478,6 @@ export default class EventTile extends React.Component<IProps, IState> {
|
|||
highlightLink={this.props.highlightLink}
|
||||
showUrlPreview={this.props.showUrlPreview}
|
||||
onHeightChanged={this.props.onHeightChanged}
|
||||
tileShape={this.props.tileShape}
|
||||
editState={this.props.editState}
|
||||
replacingEventId={this.props.replacingEventId}
|
||||
getRelationsForEvent={this.props.getRelationsForEvent}
|
||||
|
|
@ -1497,7 +1489,7 @@ export default class EventTile extends React.Component<IProps, IState> {
|
|||
reactionsRow,
|
||||
]);
|
||||
}
|
||||
case TileShape.ThreadPanel: {
|
||||
case TimelineRenderingType.ThreadsList: {
|
||||
// tab-index=-1 to allow it to be focusable but do not add tab stop for it, primarily for screen readers
|
||||
return (
|
||||
React.createElement(this.props.as || "li", {
|
||||
|
|
@ -1508,7 +1500,7 @@ export default class EventTile extends React.Component<IProps, IState> {
|
|||
"aria-atomic": "true",
|
||||
"data-scroll-tokens": scrollToken,
|
||||
"data-layout": this.props.layout,
|
||||
"data-shape": this.props.tileShape,
|
||||
"data-shape": this.context.timelineRenderingType,
|
||||
"data-self": isOwnEvent,
|
||||
"data-has-reply": !!replyChain,
|
||||
"data-notification": this.state.threadNotification,
|
||||
|
|
@ -1550,7 +1542,7 @@ export default class EventTile extends React.Component<IProps, IState> {
|
|||
</>)
|
||||
);
|
||||
}
|
||||
case TileShape.FileGrid: {
|
||||
case TimelineRenderingType.File: {
|
||||
return React.createElement(this.props.as || "li", {
|
||||
"className": classes,
|
||||
"aria-live": ariaLive,
|
||||
|
|
@ -1563,7 +1555,6 @@ export default class EventTile extends React.Component<IProps, IState> {
|
|||
highlights={this.props.highlights}
|
||||
highlightLink={this.props.highlightLink}
|
||||
showUrlPreview={this.props.showUrlPreview}
|
||||
tileShape={this.props.tileShape}
|
||||
onHeightChanged={this.props.onHeightChanged}
|
||||
editState={this.props.editState}
|
||||
getRelationsForEvent={this.props.getRelationsForEvent}
|
||||
|
|
@ -1584,7 +1575,7 @@ export default class EventTile extends React.Component<IProps, IState> {
|
|||
]);
|
||||
}
|
||||
|
||||
default: {
|
||||
default: { // Pinned, Room, Search
|
||||
// tab-index=-1 to allow it to be focusable but do not add tab stop for it, primarily for screen readers
|
||||
return (
|
||||
React.createElement(this.props.as || "li", {
|
||||
|
|
|
|||
|
|
@ -30,7 +30,6 @@ import { replaceableComponent } from "../../../utils/replaceableComponent";
|
|||
import MatrixClientContext from "../../../contexts/MatrixClientContext";
|
||||
import { getUserNameColorClass } from "../../../utils/FormattingUtils";
|
||||
import AccessibleTooltipButton from "../elements/AccessibleTooltipButton";
|
||||
import { TileShape } from "./EventTile";
|
||||
import { ViewRoomPayload } from "../../../dispatcher/payloads/ViewRoomPayload";
|
||||
|
||||
interface IProps {
|
||||
|
|
@ -92,7 +91,6 @@ export default class PinnedEventTile extends React.Component<IProps> {
|
|||
className="mx_PinnedEventTile_body"
|
||||
maxImageHeight={150}
|
||||
onHeightChanged={() => {}} // we need to give this, apparently
|
||||
tileShape={TileShape.Pinned}
|
||||
/>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -25,7 +25,8 @@ export enum TimelineRenderingType {
|
|||
ThreadsList = "ThreadsList",
|
||||
File = "File",
|
||||
Notification = "Notification",
|
||||
Search = "Search"
|
||||
Search = "Search",
|
||||
Pinned = "Pinned",
|
||||
}
|
||||
|
||||
const RoomContext = createContext<IRoomState>({
|
||||
|
|
|
|||
Loading…
Reference in a new issue