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

Tidy up snapshot, actions and vm names according to MVVM doc (#32819)

Browse Source 
* chore: rename snapshot, actions and vm according to MVVM doc

* doc: add naming conventions

* chore: fix UrlGroupView naming, folders and children

* chore: remove `Example` column

* refactor: rename `UrlPreviewGroupViewPreview` into `UrlPreview`
This commit is contained in:
Florian Duros
2026-03-17 14:20:52 +00:00
committed by GitHub
parent 6339bcda15
commit 136bb78c15
54 changed files with 194 additions and 162 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/web/src/viewmodels/message-body/UrlPreviewViewModel.ts → apps/web/src/viewmodels/message-body/UrlPreviewGroupViewModel.ts
+18 -18
View File
@@ -9,7 +9,7 @@ import {
BaseViewModel,
type UrlPreviewGroupViewSnapshot,
type UrlPreviewGroupViewActions,
type UrlPreviewViewSnapshotPreview,
type UrlPreview,
} from "@element-hq/web-shared-components";
import { logger as rootLogger } from "matrix-js-sdk/src/logger";
import { type IPreviewUrlResponse, type MatrixClient, MatrixError, type MatrixEvent } from "matrix-js-sdk/src/matrix";
@@ -21,14 +21,14 @@ import PlatformPeg from "../../PlatformPeg";
import { thumbHeight } from "../../ImageUtils";
import SettingsStore from "../../settings/SettingsStore";
const logger = rootLogger.getChild("UrlPreviewViewModel");
const logger = rootLogger.getChild("UrlPreviewGroupViewModel");
export interface UrlPreviewViewModelProps {
export interface UrlPreviewGroupViewModelProps {
client: MatrixClient;
mxEvent: MatrixEvent;
mediaVisible: boolean;
visible: boolean;
onImageClicked: (preview: UrlPreviewViewSnapshotPreview) => void;
onImageClicked: (preview: UrlPreview) => void;
}
export const MAX_PREVIEWS_WHEN_LIMITED = 2;
@@ -57,8 +57,8 @@ export enum PreviewVisibility {
/**
* ViewModel for fetching and rendering URL previews for an individual event.
*/
export class UrlPreviewViewModel
extends BaseViewModel<UrlPreviewGroupViewSnapshot, UrlPreviewViewModelProps>
export class UrlPreviewGroupViewModel
extends BaseViewModel<UrlPreviewGroupViewSnapshot, UrlPreviewGroupViewModelProps>
implements UrlPreviewGroupViewActions
{
/**
@@ -89,7 +89,7 @@ export class UrlPreviewViewModel
private static getBaseMetadataFromResponse(
response: IPreviewUrlResponse,
link: string,
): Pick<UrlPreviewViewSnapshotPreview, "title" | "description" | "siteName"> {
): Pick<UrlPreview, "title" | "description" | "siteName"> {
let title =
typeof response["og:title"] === "string" && response["og:title"].trim()
? response["og:title"].trim()
@@ -215,14 +215,14 @@ export class UrlPreviewViewModel
/**
* A cache containing all previously calculated previews.
*/
private readonly previewCache = new Map<string, UrlPreviewViewSnapshotPreview>();
private readonly previewCache = new Map<string, UrlPreview>();
/**
* Called when the user clicks on the preview thumbnail.
*/
public readonly onImageClick: (preview: UrlPreviewViewSnapshotPreview) => void;
public readonly onImageClick: (preview: UrlPreview) => void;
public constructor(props: UrlPreviewViewModelProps) {
public constructor(props: UrlPreviewGroupViewModelProps) {
const storageKey = `hide_preview_${props.mxEvent.getId()}`;
super(props, {
previews: [],
@@ -256,7 +256,7 @@ export class UrlPreviewViewModel
* @returns A Promise that returns the snapshot needed to render the preview, or null
* if the resource could not be previewed.
*/
private async fetchPreview(link: string): Promise<UrlPreviewViewSnapshotPreview | null> {
private async fetchPreview(link: string): Promise<UrlPreview | null> {
const cached = this.previewCache.get(link);
if (cached) {
return cached;
@@ -275,18 +275,18 @@ export class UrlPreviewViewModel
return null;
}
const { title, description, siteName } = UrlPreviewViewModel.getBaseMetadataFromResponse(preview, link);
const { title, description, siteName } = UrlPreviewGroupViewModel.getBaseMetadataFromResponse(preview, link);
const hasImage = preview["og:image"] && typeof preview?.["og:image"] === "string";
// Ensure we have something relevant to render.
// The title must not just be the link, or we must have an image.
if (title === link && !hasImage) {
return null;
}
let image: UrlPreviewViewSnapshotPreview["image"];
let image: UrlPreview["image"];
if (typeof preview["og:image"] === "string" && this.visibility > PreviewVisibility.MediaHidden) {
const media = mediaFromMxc(preview["og:image"], this.client);
const declaredHeight = UrlPreviewViewModel.getNumberFromOpenGraph(preview["og:image:height"]);
const declaredWidth = UrlPreviewViewModel.getNumberFromOpenGraph(preview["og:image:width"]);
const declaredHeight = UrlPreviewGroupViewModel.getNumberFromOpenGraph(preview["og:image:height"]);
const declaredWidth = UrlPreviewGroupViewModel.getNumberFromOpenGraph(preview["og:image:width"]);
const width = Math.min(declaredWidth ?? PREVIEW_WIDTH, PREVIEW_WIDTH);
const height = thumbHeight(width, declaredHeight, PREVIEW_WIDTH, PREVIEW_WIDTH) ?? PREVIEW_WIDTH;
const thumb = media.getThumbnailOfSourceHttp(PREVIEW_WIDTH, PREVIEW_HEIGHT, "scale");
@@ -297,7 +297,7 @@ export class UrlPreviewViewModel
imageFull: media.srcHttp ?? thumb,
width,
height,
fileSize: UrlPreviewViewModel.getNumberFromOpenGraph(preview["matrix:image:size"]),
fileSize: UrlPreviewGroupViewModel.getNumberFromOpenGraph(preview["matrix:image:size"]),
};
}
}
@@ -309,7 +309,7 @@ export class UrlPreviewViewModel
siteName,
showTooltipOnLink: link !== title && PlatformPeg.get()?.needsUrlTooltips(),
image,
} satisfies UrlPreviewViewSnapshotPreview;
} satisfies UrlPreview;
this.previewCache.set(link, result);
return result;
}
@@ -356,7 +356,7 @@ export class UrlPreviewViewModel
* @param eventElement
*/
public async updateEventElement(eventElement: HTMLDivElement): Promise<void> {
const newLinks = UrlPreviewViewModel.findLinks([eventElement]);
const newLinks = UrlPreviewGroupViewModel.findLinks([eventElement]);
// Only recalculate if the set of links has changed.
if (newLinks.some((x) => !this.links.includes(x)) || this.links.some((x) => !newLinks.includes(x))) {
this.links = newLinks;
apps/web/src/viewmodels/right-panel/WidgetContextMenuViewModel.tsx
+3 -3
View File
@@ -11,7 +11,7 @@ import { type Room, type MatrixClient } from "matrix-js-sdk/src/matrix";
import { type IWidget, MatrixCapabilities } from "matrix-widget-api";
import {
BaseViewModel,
type WidgetContextMenuSnapshot,
type WidgetContextMenuViewSnapshot,
WidgetContextMenuView,
type WidgetContextMenuViewModel as WidgetContextMenuViewModelInterface,
} from "@element-hq/web-shared-components";
@@ -56,7 +56,7 @@ const checkRevokeButtonState = (
};
export class WidgetContextMenuViewModel
extends BaseViewModel<WidgetContextMenuSnapshot, WidgetContextMenuViewModelProps>
extends BaseViewModel<WidgetContextMenuViewSnapshot, WidgetContextMenuViewModelProps>
implements WidgetContextMenuViewModelInterface
{
private _app: IWidget;
@@ -96,7 +96,7 @@ export class WidgetContextMenuViewModel
menuDisplayed: boolean,
trigger: ReactNode,
onDeleteClick?: () => void,
): WidgetContextMenuSnapshot => {
): WidgetContextMenuViewSnapshot => {
const showStreamAudioStreamButton = !!getConfigLivestreamUrl() && WidgetType.JITSI.matches(app.type);
const canModify = userWidget || WidgetUtils.canUserModifyWidgets(cli, room?.roomId);
const widgetMessaging = WidgetMessagingStore.instance.getMessagingForUid(WidgetUtils.getWidgetUid(app));
apps/web/src/viewmodels/room-list/RoomListItemViewModel.ts
+6 -6
View File
@@ -8,8 +8,8 @@ Please see LICENSE files in the repository root for full details.
import {
BaseViewModel,
RoomNotifState,
type RoomListItemSnapshot,
type RoomListItemActions,
type RoomListItemViewSnapshot,
type RoomListItemViewActions,
} from "@element-hq/web-shared-components";
import { RoomEvent } from "matrix-js-sdk/src/matrix";
import { CallType } from "matrix-js-sdk/src/webrtc/call";
@@ -46,11 +46,11 @@ interface RoomItemProps {
/**
* View model for an individual room list item.
* Manages per-room subscriptions and updates only when this specific room's data changes.
* Implements RoomListItemActions to provide interaction callbacks.
* Implements RoomListItemViewActions to provide interaction callbacks.
*/
export class RoomListItemViewModel
extends BaseViewModel<RoomListItemSnapshot, RoomItemProps>
implements RoomListItemActions
extends BaseViewModel<RoomListItemViewSnapshot, RoomItemProps>
implements RoomListItemViewActions
{
private notifState: RoomNotificationState;
/**
@@ -205,7 +205,7 @@ export class RoomListItemViewModel
room: Room,
client: MatrixClient,
notifState: RoomNotificationState,
): RoomListItemSnapshot {
): RoomListItemViewSnapshot {
// Get room tags for menu state
const roomTags = room.tags;
const isDm = Boolean(DMRoomMap.shared().getUserIdForRoomId(room.roomId));
apps/web/src/viewmodels/room-list/RoomListViewViewModel.ts → apps/web/src/viewmodels/room-list/RoomListViewModel.ts
+5 -5
View File
@@ -7,7 +7,7 @@ Please see LICENSE files in the repository root for full details.
import {
BaseViewModel,
type RoomListSnapshot,
type RoomListViewSnapshot,
type FilterId,
type RoomListViewActions,
type RoomListViewState,
@@ -27,7 +27,7 @@ import { SdkContextClass } from "../../contexts/SDKContext";
import { hasCreateRoomRights } from "./utils";
import { keepIfSame } from "../../utils/keepIfSame";
interface RoomListViewViewModelProps {
interface RoomListViewModelProps {
client: MatrixClient;
}
@@ -41,8 +41,8 @@ const filterKeyToIdMap: Map<FilterKey, FilterId> = new Map([
[FilterKey.LowPriorityFilter, "low_priority"],
]);
export class RoomListViewViewModel
extends BaseViewModel<RoomListSnapshot, RoomListViewViewModelProps>
export class RoomListViewModel
extends BaseViewModel<RoomListViewSnapshot, RoomListViewModelProps>
implements RoomListViewActions
{
// State tracking
@@ -54,7 +54,7 @@ export class RoomListViewViewModel
private roomItemViewModels = new Map<string, RoomListItemViewModel>();
private roomsMap = new Map<string, Room>();
public constructor(props: RoomListViewViewModelProps) {
public constructor(props: RoomListViewModelProps) {
const activeSpace = SpaceStore.instance.activeSpaceRoom;
// Get initial rooms