imterah/element-portable
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Consolidate TileShape into TimelineRenderingType (#7843)

Browse source
This commit is contained in:
Michael Telatynski 2022-02-18 15:56:05 +00:00 • committed by GitHub
parent ca89d3b96e
commit 5f5bb4a4fe
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
21 changed files with 174 additions and 154 deletions
Download patch file Download diff file Expand all files Collapse all files

2
src/components/views/messages/IBodyProps.ts
View file

@ -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;

12
src/components/views/messages/MAudioBody.tsx
View file

@ -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
src/components/views/messages/MFileBody.tsx
View file

@ -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.content.info && this.content.info.size ? filesize(this.content.info.size) : "" }
</div> }
{ this.context.timelineRenderingType === TimelineRenderingType.File && (
<div className="mx_MImageBody_size">
{ this.content.info && this.content.info.size ? filesize(this.content.info.size) : "" }
</div>
) }
</div> }
</span>
);

20
src/components/views/messages/MImageBody.tsx
View file

@ -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} />;
}

12
src/components/views/messages/MVideoBody.tsx
View file

@ -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() {

4
src/components/views/messages/MVoiceMessageBody.tsx
View file

@ -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>
);
}

1
src/components/views/messages/MessageEvent.tsx
View file

@ -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}

70
src/components/views/messages/SenderProfile.tsx
View file

@ -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,41 +120,44 @@ 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 null; // emote message must include the name so don't duplicate it
}
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
}
let mxidElement;
if (disambiguate) {
mxidElement = (
<span className="mx_SenderProfile_mxid">
{ UserIdentifier.getDisplayUserIdentifier(
mxid, { withDisplayName: true, roomId: mxEvent.getRoomId() },
) }
</span>
);
}
let mxidElement;
if (disambiguate) {
mxidElement = (
<span className="mx_SenderProfile_mxid">
{ UserIdentifier.getDisplayUserIdentifier(
mxid, { withDisplayName: true, roomId: mxEvent.getRoomId() },
) }
</span>
);
}
let flair;
if (this.props.enableFlair) {
const displayedGroups = this.getDisplayedGroups(
this.state.userGroups, this.state.relatedGroups,
);
let flair;
if (this.props.enableFlair) {
const displayedGroups = this.getDisplayedGroups(
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 (
<div className="mx_SenderProfile" dir="auto" onClick={this.props.onClick}>
<span className={`mx_SenderProfile_displayName ${colorClass}`}>
{ displayName }
</span>
{ mxidElement }
{ flair }
</div>
);
return (
<div className="mx_SenderProfile" dir="auto" onClick={this.props.onClick}>
<span className={`mx_SenderProfile_displayName ${colorClass}`}>
{ displayName }
</span>
{ mxidElement }
{ flair }
</div>
);
} }
</RoomContext.Consumer>;
}
}