sorb/ThreadNet-Web
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 4 Wiki Activity

Refactor and move MVideoBody to shared components (#32849)

Browse Source 
* init MVideoBody to shared components, including test, stories and view

* fix prettier and other warnings

* move video message body to shared view + app viewmodel

* Fix prettier warnings and masking spinner for tests

* stabilize VideoBodyView screenshots with local media asset

* Disable spinner from changing image all the time

* Added mask over video spinner to prevent issues with new generated images on playwright tests

* Update prettier fix

* Update snapshot

* Add tests to cover different states of Video

* Update code to prevent the previous component Hack fix regarding jumps on the timeline.

* Update snapshot

* Update code to improve code quality for Sonar + update snapshot

* adde documentation snippets

* refactor: move m.video rendering into body factory

* docs: add tsdoc for video body view model

* docs: add thumbnail tsdoc for video body view model

* docs: add content-url tsdoc for video body view model

* docs: add dimensions tsdoc for video body view model

* docs: add aspect-ratio tsdoc for video body view model

* docs: add tsdoc for video body view state

* refactor: replace video body view state enum

* refactor: remove duplicate video body state init

* refactor: drop unused video body view state attribute

* Fix Prettier

* Update snapshot screenshot

* test: restore video story screenshot mask

* chore: refresh PR head

* Add mask to screenshot to pass CI tests

* test: narrow video story mask hook

* Fix easy Sonar warnings in video body components

* Move shared message body views into event-tile layout

* Move shared message body visual baselines

* Revert unrelated shared message body moves
This commit is contained in:
Zack
2026-04-01 09:48:22 +00:00
committed by GitHub
parent 3e04b24d1e
commit 0391543bbc
27 changed files with 1763 additions and 524 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/web/src/components/views/messages/MBodyFactory.tsx
+81 -4
View File
@@ -11,15 +11,18 @@ import {
DecryptionFailureBodyView,
FileBodyView,
RedactedBodyView,
VideoBodyView,
useCreateAutoDisposedViewModel,
} from "@element-hq/web-shared-components";
import { type IBodyProps } from "./IBodyProps";
import RoomContext from "../../../contexts/RoomContext";
import RoomContext, { TimelineRenderingType } from "../../../contexts/RoomContext";
import { LocalDeviceVerificationStateContext } from "../../../contexts/LocalDeviceVerificationStateContext";
import { useMediaVisible } from "../../../hooks/useMediaVisible";
import { DecryptionFailureBodyViewModel } from "../../../viewmodels/room/timeline/event-tile/body/DecryptionFailureBodyViewModel";
import { FileBodyViewModel } from "../../../viewmodels/message-body/FileBodyViewModel";
import { RedactedBodyViewModel } from "../../../viewmodels/message-body/RedactedBodyViewModel";
import { VideoBodyViewModel } from "../../../viewmodels/message-body/VideoBodyViewModel";
type MBodyComponent = React.ComponentType<IBodyProps>;
@@ -59,6 +62,78 @@ export function FileBodyFactory({
return <FileBodyView vm={vm} refIFrame={refIFrame} refLink={refLink} className="mx_MFileBody" />;
}
export function VideoBodyFactory({
mxEvent,
mediaEventHelper,
forExport,
inhibitInteraction,
}: Readonly<Pick<IBodyProps, "mxEvent" | "mediaEventHelper" | "forExport" | "inhibitInteraction">>): JSX.Element {
const { timelineRenderingType } = useContext(RoomContext);
const [mediaVisible, setMediaVisible] = useMediaVisible(mxEvent);
const videoRef = useRef<HTMLVideoElement>(null);
const vm = useCreateAutoDisposedViewModel(
() =>
new VideoBodyViewModel({
mxEvent,
mediaEventHelper,
forExport,
inhibitInteraction,
mediaVisible,
onPreviewClick: (): void => setMediaVisible(true),
videoRef,
}),
);
useEffect(() => {
vm.loadInitialMediaIfVisible();
}, [vm]);
useEffect(() => {
vm.setEvent(mxEvent, mediaEventHelper);
}, [mxEvent, mediaEventHelper, vm]);
useEffect(() => {
vm.setForExport(forExport);
}, [forExport, vm]);
useEffect(() => {
vm.setInhibitInteraction(inhibitInteraction);
}, [inhibitInteraction, vm]);
useEffect(() => {
vm.setMediaVisible(mediaVisible);
}, [mediaVisible, vm]);
useEffect(() => {
vm.setOnPreviewClick((): void => setMediaVisible(true));
}, [setMediaVisible, vm]);
const showFileBody =
!forExport &&
timelineRenderingType !== TimelineRenderingType.Room &&
timelineRenderingType !== TimelineRenderingType.Pinned &&
timelineRenderingType !== TimelineRenderingType.Search;
return (
<VideoBodyView
vm={vm}
className="mx_MVideoBody"
containerClassName="mx_MVideoBody_container"
videoRef={videoRef}
>
{showFileBody ? (
<FileBodyFactory
mxEvent={mxEvent}
mediaEventHelper={mediaEventHelper}
forExport={forExport}
showFileInfo={false}
/>
) : null}
</VideoBodyView>
);
}
export function RedactedBodyFactory({ mxEvent, ref }: Pick<IBodyProps, "mxEvent" | "ref">): JSX.Element {
const vm = useCreateAutoDisposedViewModel(() => new RedactedBodyViewModel({ mxEvent }));
@@ -87,9 +162,11 @@ export function DecryptionFailureBodyFactory({ mxEvent, ref }: Pick<IBodyProps,
return <DecryptionFailureBodyView vm={vm} ref={ref} className="mx_DecryptionFailureBody mx_EventTile_content" />;
}
// Message body factory registry.
// Start small: only m.file currently routes to the new FileBodyView path.
const MESSAGE_BODY_TYPES = new Map<string, MBodyComponent>([[MsgType.File, FileBodyFactory]]);
// Message body factory registry for bodies that already route through view-model-backed wrappers.
const MESSAGE_BODY_TYPES = new Map<string, MBodyComponent>([
[MsgType.File, FileBodyFactory],
[MsgType.Video, VideoBodyFactory],
]);
// Render a body using the picked factory.
// Falls back to the provided factory when msgtype has no specific handler.
apps/web/src/components/views/messages/MVideoBody.tsx
-353
View File
@@ -1,353 +0,0 @@
/*
Copyright 2024 New Vector Ltd.
Copyright 2015-2021 The Matrix.org Foundation C.I.C.
SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/
import React, { type ReactNode } from "react";
import { decode } from "blurhash";
import { type MediaEventContent } from "matrix-js-sdk/src/types";
import { logger } from "matrix-js-sdk/src/logger";
import { _t } from "../../../languageHandler";
import SettingsStore from "../../../settings/SettingsStore";
import InlineSpinner from "../elements/InlineSpinner";
import { mediaFromContent } from "../../../customisations/Media";
import { BLURHASH_FIELD } from "../../../utils/image-media";
import { type IBodyProps } from "./IBodyProps";
import { type ImageSize, suggestedSize as suggestedVideoSize } from "../../../settings/enums/ImageSize";
import RoomContext, { TimelineRenderingType } from "../../../contexts/RoomContext";
import MediaProcessingError from "./shared/MediaProcessingError";
import { HiddenMediaPlaceholder } from "./HiddenMediaPlaceholder";
import { useMediaVisible } from "../../../hooks/useMediaVisible";
import { FileBodyFactory, renderMBody } from "./MBodyFactory";
interface IState {
decryptedUrl: string | null;
decryptedThumbnailUrl: string | null;
decryptedBlob: Blob | null;
error?: any;
fetchingData: boolean;
posterLoading: boolean;
blurhashUrl: string | null;
}
interface IProps extends IBodyProps {
/**
* Should the media be behind a preview.
*/
mediaVisible: boolean;
/**
* Set the visibility of the media event.
* @param visible Should the event be visible.
*/
setMediaVisible: (visible: boolean) => void;
}
class MVideoBodyInner extends React.PureComponent<IProps, IState> {
public static contextType = RoomContext;
declare public context: React.ContextType<typeof RoomContext>;
private videoRef = React.createRef<HTMLVideoElement>();
private sizeWatcher?: string;
public state = {
fetchingData: false,
decryptedUrl: null,
decryptedThumbnailUrl: null,
decryptedBlob: null,
error: null,
posterLoading: false,
blurhashUrl: null,
};
private onClick = (): void => {
this.props.setMediaVisible(true);
};
private getContentUrl(): string | undefined {
const content = this.props.mxEvent.getContent<MediaEventContent>();
// During export, the content url will point to the MSC, which will later point to a local url
if (this.props.forExport) return content.file?.url ?? content.url;
const media = mediaFromContent(content);
if (media.isEncrypted) {
return this.state.decryptedUrl ?? undefined;
} else {
return media.srcHttp ?? undefined;
}
}
private hasContentUrl(): boolean {
const url = this.getContentUrl();
return !!url && !url.startsWith("data:");
}
private getThumbUrl(): string | null {
// there's no need of thumbnail when the content is local
if (this.props.forExport) return null;
const content = this.props.mxEvent.getContent<MediaEventContent>();
const media = mediaFromContent(content);
if (media.isEncrypted && this.state.decryptedThumbnailUrl) {
return this.state.decryptedThumbnailUrl;
} else if (this.state.posterLoading) {
return this.state.blurhashUrl;
} else if (media.hasThumbnail) {
return media.thumbnailHttp;
} else {
return null;
}
}
private loadBlurhash(): void {
const info = this.props.mxEvent.getContent()?.info;
if (!info[BLURHASH_FIELD]) return;
const canvas = document.createElement("canvas");
const { w: width, h: height } = suggestedVideoSize(SettingsStore.getValue("Images.size") as ImageSize, {
w: info.w,
h: info.h,
});
canvas.width = width;
canvas.height = height;
const pixels = decode(info[BLURHASH_FIELD], width, height);
const ctx = canvas.getContext("2d")!;
const imgData = ctx.createImageData(width, height);
imgData.data.set(pixels);
ctx.putImageData(imgData, 0, 0);
this.setState({
blurhashUrl: canvas.toDataURL(),
posterLoading: true,
});
const content = this.props.mxEvent.getContent<MediaEventContent>();
const media = mediaFromContent(content);
if (media.hasThumbnail) {
const image = new Image();
image.onload = () => {
this.setState({ posterLoading: false });
};
image.src = media.thumbnailHttp!;
}
}
private async downloadVideo(): Promise<void> {
try {
this.loadBlurhash();
} catch (e) {
logger.error("Failed to load blurhash", e);
}
if (this.props.mediaEventHelper?.media.isEncrypted && this.state.decryptedUrl === null) {
try {
const autoplay = SettingsStore.getValue("autoplayVideo") as boolean;
const thumbnailUrl = await this.props.mediaEventHelper.thumbnailUrl.value;
if (autoplay) {
logger.log("Preloading video");
this.setState({
decryptedUrl: await this.props.mediaEventHelper.sourceUrl.value,
decryptedThumbnailUrl: thumbnailUrl,
decryptedBlob: await this.props.mediaEventHelper.sourceBlob.value,
});
} else {
logger.log("NOT preloading video");
const content = this.props.mxEvent.getContent<MediaEventContent>();
let mimetype = content?.info?.mimetype;
// clobber quicktime muxed files to be considered MP4 so browsers
// are willing to play them
if (mimetype == "video/quicktime") {
mimetype = "video/mp4";
}
this.setState({
// For Chrome and Electron, we need to set some non-empty `src` to
// enable the play button. Firefox does not seem to care either
// way, so it's fine to do for all browsers.
decryptedUrl: `data:${mimetype},`,
decryptedThumbnailUrl: thumbnailUrl || `data:${mimetype},`,
decryptedBlob: null,
});
}
} catch (err) {
logger.warn("Unable to decrypt attachment: ", err);
// Set a placeholder image when we can't decrypt the image.
this.setState({
error: err,
});
}
}
}
public async componentDidMount(): Promise<void> {
this.sizeWatcher = SettingsStore.watchSetting("Images.size", null, () => {
this.forceUpdate(); // we don't really have a reliable thing to update, so just update the whole thing
});
// Do not attempt to load the media if we do not want to show previews here.
if (this.props.mediaVisible) {
await this.downloadVideo();
}
}
public async componentDidUpdate(prevProps: Readonly<IProps>): Promise<void> {
if (!prevProps.mediaVisible && this.props.mediaVisible) {
await this.downloadVideo();
}
}
public componentWillUnmount(): void {
SettingsStore.unwatchSetting(this.sizeWatcher);
}
private videoOnPlay = async (): Promise<void> => {
if (this.hasContentUrl() || this.state.fetchingData || this.state.error) {
// We have the file, we are fetching the file, or there is an error.
return;
}
this.setState({
// To stop subsequent download attempts
fetchingData: true,
});
if (!this.props.mediaEventHelper!.media.isEncrypted) {
this.setState({
error: "No file given in content",
});
return;
}
this.setState(
{
decryptedUrl: await this.props.mediaEventHelper!.sourceUrl.value,
decryptedBlob: await this.props.mediaEventHelper!.sourceBlob.value,
fetchingData: false,
},
() => {
if (!this.videoRef.current) return;
this.videoRef.current.play();
},
);
};
protected get showFileBody(): boolean {
return (
this.context.timelineRenderingType !== TimelineRenderingType.Room &&
this.context.timelineRenderingType !== TimelineRenderingType.Pinned &&
this.context.timelineRenderingType !== TimelineRenderingType.Search
);
}
private getFileBody = (): ReactNode => {
if (this.props.forExport) return null;
return this.showFileBody && renderMBody({ ...this.props, showFileInfo: false }, FileBodyFactory);
};
public render(): React.ReactNode {
const content = this.props.mxEvent.getContent();
const autoplay = !this.props.inhibitInteraction && SettingsStore.getValue("autoplayVideo");
let aspectRatio;
if (content.info?.w && content.info?.h) {
aspectRatio = `${content.info.w}/${content.info.h}`;
}
const { w: maxWidth, h: maxHeight } = suggestedVideoSize(SettingsStore.getValue("Images.size") as ImageSize, {
w: content.info?.w,
h: content.info?.h,
});
// HACK: This div fills out space while the video loads, to prevent scroll jumps
const spaceFiller = <div style={{ width: maxWidth, height: maxHeight }} />;
if (this.state.error !== null) {
return (
<MediaProcessingError className="mx_MVideoBody">
{_t("timeline|m.video|error_decrypting")}
</MediaProcessingError>
);
}
// Users may not even want to show a poster, so instead show a preview button.
if (!this.props.mediaVisible) {
return (
<span className="mx_MVideoBody">
<div
className="mx_MVideoBody_container"
style={{ width: maxWidth, height: maxHeight, aspectRatio }}
>
<HiddenMediaPlaceholder onClick={this.onClick}>
{_t("timeline|m.video|show_video")}
</HiddenMediaPlaceholder>
</div>
</span>
);
}
// Important: If we aren't autoplaying and we haven't decrypted it yet, show a video with a poster.
if (!this.props.forExport && content.file !== undefined && this.state.decryptedUrl === null && autoplay) {
// Need to decrypt the attachment
// The attachment is decrypted in componentDidMount.
// For now show a spinner.
return (
<span className="mx_MVideoBody">
<div className="mx_MVideoBody_container" style={{ maxWidth, maxHeight, aspectRatio }}>
<InlineSpinner />
</div>
{spaceFiller}
</span>
);
}
const contentUrl = this.getContentUrl();
const thumbUrl = this.getThumbUrl();
let poster: string | undefined;
let preload = "metadata";
if (content.info && thumbUrl) {
poster = thumbUrl;
preload = "none";
}
const fileBody = this.getFileBody();
return (
<span className="mx_MVideoBody">
<div className="mx_MVideoBody_container" style={{ maxWidth, maxHeight, aspectRatio }}>
<video
className="mx_MVideoBody"
ref={this.videoRef}
src={contentUrl}
title={content.body}
controls={!this.props.inhibitInteraction}
// Disable downloading as it doesn't work with e2ee video,
// users should use the dedicated Download button in the Message Action Bar
controlsList="nodownload"
// The video uses a cross-origin request.
// Firefox explicitly bypasses services workers for crossorigin
// video elements without crossorigin attribute.
crossOrigin="anonymous"
preload={preload}
muted={autoplay}
autoPlay={autoplay}
poster={poster}
onPlay={this.videoOnPlay}
/>
{spaceFiller}
</div>
{fileBody}
</span>
);
}
}
// Wrap MVideoBody component so we can use a hook here.
const MVideoBody: React.FC<IBodyProps> = (props) => {
const [mediaVisible, setVisible] = useMediaVisible(props.mxEvent);
return <MVideoBodyInner mediaVisible={mediaVisible} setMediaVisible={setVisible} {...props} />;
};
export default MVideoBody;
apps/web/src/components/views/messages/MessageEvent.tsx
+10 -4
View File
@@ -28,14 +28,19 @@ import { type IBodyProps } from "./IBodyProps";
import TextualBody from "./TextualBody";
import MImageBody from "./MImageBody";
import MVoiceOrAudioBody from "./MVoiceOrAudioBody";
import MVideoBody from "./MVideoBody";
import MStickerBody from "./MStickerBody";
import MPollBody from "./MPollBody";
import MLocationBody from "./MLocationBody";
import MjolnirBody from "./MjolnirBody";
import MBeaconBody from "./MBeaconBody";
import { type GetRelationsForEvent, type IEventTileOps } from "../rooms/EventTile";
import { DecryptionFailureBodyFactory, FileBodyFactory, RedactedBodyFactory, renderMBody } from "./MBodyFactory";
import {
DecryptionFailureBodyFactory,
FileBodyFactory,
RedactedBodyFactory,
VideoBodyFactory,
renderMBody,
} from "./MBodyFactory";
// onMessageAllowed is handled internally
interface IProps extends Omit<IBodyProps, "onMessageAllowed" | "mediaEventHelper"> {
@@ -65,7 +70,7 @@ const baseBodyTypes = new Map<string, React.ComponentType<IBodyProps>>([
[MsgType.Image, MImageBody],
[MsgType.File, (props: IBodyProps) => renderMBody(props, FileBodyFactory)!],
[MsgType.Audio, MVoiceOrAudioBody],
[MsgType.Video, MVideoBody],
[MsgType.Video, VideoBodyFactory],
]);
const baseEvTypes = new Map<string, React.ComponentType<IBodyProps>>([
[EventType.Sticker, MStickerBody],
@@ -260,7 +265,8 @@ export default class MessageEvent extends React.Component<IProps> implements IMe
}
if (
((BodyType === MImageBody || BodyType == MVideoBody) && !this.validateImageOrVideoMimetype(content)) ||
((BodyType === MImageBody || BodyType === VideoBodyFactory) &&
!this.validateImageOrVideoMimetype(content)) ||
(BodyType === MStickerBody && !this.validateStickerMimetype(content))
) {
BodyType = this.bodyTypes.get(MsgType.File)!;