Refactor MFileBody using MVVM and move to shared-components (#32730)
* Refactor MFileBody using MVVM and move to shared component * Simplyfing rendering properties * Create a first version of view model for the component * Simplifying component properties and make it possible to override module css using data-* attributes * Create a MBodyFactory in element-web and use it to render MFileBodyView from MessageEvent * Use <MediaBody instead of <button to support legacy rendering * Updated styling and comments * Refactoring className from snapshot to component property * Rename MFileBody* to FileBody* * Rename MFileBody* to FileBody* * Refactoring render branches to allow for displaying nothing * Fix styling issues * Fix lint errors * Fix for css selectors in playwright tests * Remove the MFileBody component and change all callers to use MBodyFactory:FileBodyView * Remove unused strings in element-web * Revert to render text in story iframes * Fix for prettier error * Fix playwright test css selectors * Apply legacy styling in element-web * Add legacy styling for mx_MFileBody * Restore file * Change from <div to <button * Calculate span width ad update screenshots * Remove width calculation and update snapshots * Fix for letter-spacing and better content in story * Updated playwright screenshots * Updated snapshots * Fixing Sonar errors/warnings * Removed extra parentheses * Changes after review * Change border-radius to px and updated snapshots * Fix typo in description * And another typo fix * Changes after review
This commit is contained in:
rbondesson
@@ -7,6 +7,7 @@
|
||||
|
||||
.audioPlayer {
|
||||
padding: var(--cpd-space-4x) var(--cpd-space-3x) var(--cpd-space-3x) var(--cpd-space-3x) !important;
|
||||
border-radius: 8px !important;
|
||||
}
|
||||
|
||||
.mediaInfo {
|
||||
|
||||
@@ -6,6 +6,7 @@
|
||||
"back": "Back",
|
||||
"delete": "Delete",
|
||||
"dismiss": "Dismiss",
|
||||
"download": "Download",
|
||||
"edit": "Edit",
|
||||
"explore_rooms": "Explore rooms",
|
||||
"go": "Go",
|
||||
@@ -22,6 +23,7 @@
|
||||
"start_chat": "Start chat"
|
||||
},
|
||||
"common": {
|
||||
"attachment": "Attachment",
|
||||
"encryption_enabled": "Encryption enabled",
|
||||
"preferences": "Preferences",
|
||||
"state_encryption_enabled": "Experimental state encryption enabled"
|
||||
@@ -168,6 +170,9 @@
|
||||
"error_downloading_audio": "Error downloading audio",
|
||||
"unnamed_audio": "Unnamed audio"
|
||||
},
|
||||
"m.file": {
|
||||
"error_invalid": "Invalid file"
|
||||
},
|
||||
"m.room.encryption": {
|
||||
"disable_attempt": "Ignored attempt to disable encryption",
|
||||
"disabled": "Encryption not enabled",
|
||||
|
||||
@@ -20,6 +20,7 @@ export * from "./message-body/EventContentBody";
|
||||
export * from "./message-body/MediaBody";
|
||||
export * from "./message-body/MessageTimestampView";
|
||||
export * from "./message-body/DecryptionFailureBodyView";
|
||||
export * from "./message-body/FileBodyView";
|
||||
export * from "./message-body/PinnedMessageBadge";
|
||||
export * from "./message-body/ReactionsRowButtonTooltip";
|
||||
export * from "./message-body/ReactionsRowButton";
|
||||
|
||||
@@ -0,0 +1,72 @@
|
||||
/*
|
||||
* Copyright 2026 Element Creations Ltd.
|
||||
*
|
||||
* 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.
|
||||
*/
|
||||
|
||||
.content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-width: 0;
|
||||
gap: var(--cpd-space-2x);
|
||||
|
||||
& a {
|
||||
display: flex;
|
||||
flex-grow: 1;
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
.content [data-type="info"] {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
flex-grow: 1;
|
||||
|
||||
& button {
|
||||
display: flex;
|
||||
margin: 0 !important;
|
||||
padding: 0 !important;
|
||||
border: none;
|
||||
width: 100%;
|
||||
min-block-size: unset;
|
||||
color: inherit;
|
||||
background-color: inherit;
|
||||
gap: var(--cpd-space-3x);
|
||||
|
||||
& svg {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
padding: var(--cpd-space-2x);
|
||||
}
|
||||
|
||||
& span {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
text-align: start;
|
||||
font: var(--cpd-font-body-md-regular);
|
||||
letter-spacing: var(--cpd-font-letter-spacing-body-md);
|
||||
color: var(--cpd-color-text-primary);
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.content [data-type="download"] {
|
||||
align-items: center;
|
||||
color: var(--cpd-color-text-action-accent);
|
||||
|
||||
& iframe {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: none;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.invalid {
|
||||
color: var(--cpd-color-text-critical-primary);
|
||||
}
|
||||
@@ -0,0 +1,156 @@
|
||||
/*
|
||||
* Copyright 2026 Element Creations Ltd.
|
||||
*
|
||||
* 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 { expect, userEvent, within } from "storybook/test";
|
||||
|
||||
import type { Meta, StoryObj } from "@storybook/react-vite";
|
||||
import {
|
||||
FileBodyView,
|
||||
FileBodyViewInfoIcon,
|
||||
FileBodyViewState,
|
||||
type FileBodyViewActions,
|
||||
type FileBodyViewSnapshot,
|
||||
} from "./FileBodyView";
|
||||
import { useMockedViewModel } from "../../viewmodel/useMockedViewModel";
|
||||
import { withViewDocs } from "../../../.storybook/withViewDocs";
|
||||
|
||||
type FileBodyViewProps = FileBodyViewSnapshot & FileBodyViewActions;
|
||||
|
||||
const FileBodyViewWrapperImpl = ({
|
||||
onInfoClick,
|
||||
onDownloadClick,
|
||||
onDownloadLinkClick,
|
||||
onDownloadIframeLoad,
|
||||
className,
|
||||
...snapshotProps
|
||||
}: FileBodyViewProps & { className?: string }): ReactNode => {
|
||||
const vm = useMockedViewModel(snapshotProps, {
|
||||
onInfoClick,
|
||||
onDownloadClick,
|
||||
onDownloadLinkClick,
|
||||
onDownloadIframeLoad,
|
||||
});
|
||||
|
||||
return <FileBodyView vm={vm} className={className} />;
|
||||
};
|
||||
|
||||
const FileBodyViewWrapper = withViewDocs(FileBodyViewWrapperImpl, FileBodyView);
|
||||
|
||||
const meta = {
|
||||
title: "MessageBody/FileBodyView",
|
||||
component: FileBodyViewWrapper,
|
||||
tags: ["autodocs"],
|
||||
argTypes: {
|
||||
state: {
|
||||
options: Object.entries(FileBodyViewState)
|
||||
.filter(([key, value]) => key === value)
|
||||
.map(([key]) => key),
|
||||
control: { type: "select" },
|
||||
},
|
||||
infoIcon: {
|
||||
options: Object.entries(FileBodyViewInfoIcon)
|
||||
.filter(([key, value]) => key === value)
|
||||
.map(([key]) => key),
|
||||
control: { type: "select" },
|
||||
},
|
||||
showInfo: { control: "boolean" },
|
||||
showDownload: { control: "boolean" },
|
||||
className: { control: "text" },
|
||||
},
|
||||
args: {
|
||||
state: FileBodyViewState.UNENCRYPTED,
|
||||
showInfo: true,
|
||||
infoLabel: "spec.pdf",
|
||||
infoTooltip: "spec.pdf (22 KB)",
|
||||
infoIcon: FileBodyViewInfoIcon.ATTACHMENT,
|
||||
infoHref: "https://example.org/spec.pdf",
|
||||
showDownload: true,
|
||||
downloadLabel: "Download file",
|
||||
downloadTitle: "Download title",
|
||||
downloadHref: "https://example.org/download/spec.pdf",
|
||||
className: undefined,
|
||||
},
|
||||
} satisfies Meta<typeof FileBodyViewWrapper>;
|
||||
|
||||
export default meta;
|
||||
type Story = StoryObj<typeof meta>;
|
||||
|
||||
export const Default: Story = {};
|
||||
|
||||
export const Export: Story = {
|
||||
args: {
|
||||
state: FileBodyViewState.EXPORT,
|
||||
},
|
||||
};
|
||||
|
||||
export const Invalid: Story = {
|
||||
args: {
|
||||
state: FileBodyViewState.INVALID,
|
||||
},
|
||||
};
|
||||
|
||||
export const LongFilenameInfo: Story = {
|
||||
args: {
|
||||
showDownload: false,
|
||||
infoLabel: "a very long filename to show ellipsis.pdf",
|
||||
infoTooltip: "a very long filename to show ellipsis.pdf (12 kB)",
|
||||
},
|
||||
play: async ({ canvasElement }) => {
|
||||
const canvas = within(canvasElement);
|
||||
await userEvent.hover(canvas.getByText("a very long filename to show ellipsis.pdf"));
|
||||
await expect(
|
||||
within(canvasElement.ownerDocument.body).findByText("a very long filename to show ellipsis.pdf (12 kB)"),
|
||||
).resolves.toBeInTheDocument();
|
||||
},
|
||||
};
|
||||
|
||||
export const AudioInfo: Story = {
|
||||
args: {
|
||||
showDownload: false,
|
||||
infoIcon: FileBodyViewInfoIcon.AUDIO,
|
||||
infoLabel: "voice-message.ogg",
|
||||
},
|
||||
};
|
||||
|
||||
export const VideoInfo: Story = {
|
||||
args: {
|
||||
showDownload: false,
|
||||
infoIcon: FileBodyViewInfoIcon.VIDEO,
|
||||
infoLabel: "clip.mp4",
|
||||
},
|
||||
};
|
||||
|
||||
export const UnencryptedDownload: Story = {
|
||||
args: {
|
||||
state: FileBodyViewState.UNENCRYPTED,
|
||||
showInfo: false,
|
||||
},
|
||||
};
|
||||
|
||||
export const EncryptedIframeDownload: Story = {
|
||||
args: {
|
||||
state: FileBodyViewState.ENCRYPTED,
|
||||
showInfo: false,
|
||||
},
|
||||
};
|
||||
|
||||
export const DecryptionPendingDownload: Story = {
|
||||
args: {
|
||||
state: FileBodyViewState.DECRYPTION_PENDING,
|
||||
showInfo: false,
|
||||
},
|
||||
};
|
||||
|
||||
export const LongFilenameDownload: Story = {
|
||||
args: {
|
||||
state: FileBodyViewState.UNENCRYPTED,
|
||||
showInfo: false,
|
||||
showDownload: true,
|
||||
downloadLabel: "a very long filename that show no ellipsis.pdf",
|
||||
},
|
||||
};
|
||||
@@ -0,0 +1,288 @@
|
||||
/*
|
||||
* Copyright 2026 Element Creations Ltd.
|
||||
*
|
||||
* 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 MouseEvent } from "react";
|
||||
import { composeStories } from "@storybook/react-vite";
|
||||
import { fireEvent, render, screen } from "@test-utils";
|
||||
import { describe, it, expect, vi } from "vitest";
|
||||
|
||||
import { FileBodyView, FileBodyViewState, type FileBodyViewActions, type FileBodyViewSnapshot } from "./FileBodyView";
|
||||
import { MockViewModel } from "../../viewmodel/MockViewModel";
|
||||
import { I18nApi } from "../../index";
|
||||
import { I18nContext } from "../../utils/i18nContext";
|
||||
import * as stories from "./FileBodyView.stories";
|
||||
|
||||
const renderWithI18n = (ui: React.ReactElement): ReturnType<typeof render> =>
|
||||
render(ui, {
|
||||
wrapper: ({ children }) => <I18nContext.Provider value={new I18nApi()}>{children}</I18nContext.Provider>,
|
||||
});
|
||||
|
||||
const {
|
||||
Default,
|
||||
Export,
|
||||
Invalid,
|
||||
AudioInfo,
|
||||
VideoInfo,
|
||||
LongFilenameInfo,
|
||||
UnencryptedDownload,
|
||||
EncryptedIframeDownload,
|
||||
DecryptionPendingDownload,
|
||||
LongFilenameDownload,
|
||||
} = composeStories(stories);
|
||||
|
||||
const defaultSnapshot: FileBodyViewSnapshot = {
|
||||
state: FileBodyViewState.UNENCRYPTED,
|
||||
showInfo: true,
|
||||
};
|
||||
|
||||
class TestViewModel extends MockViewModel<FileBodyViewSnapshot> implements FileBodyViewActions {
|
||||
public onInfoClick?: () => void;
|
||||
public onDownloadClick?: () => void;
|
||||
public onDownloadLinkClick?: (event: MouseEvent<HTMLAnchorElement>) => void;
|
||||
public onDownloadIframeLoad?: () => void;
|
||||
|
||||
public constructor(snapshot: FileBodyViewSnapshot, actions: FileBodyViewActions = {}) {
|
||||
super(snapshot);
|
||||
this.onInfoClick = actions.onInfoClick;
|
||||
this.onDownloadClick = actions.onDownloadClick;
|
||||
this.onDownloadLinkClick = actions.onDownloadLinkClick;
|
||||
this.onDownloadIframeLoad = actions.onDownloadIframeLoad;
|
||||
}
|
||||
}
|
||||
|
||||
describe("FileBodyView", () => {
|
||||
it.each([
|
||||
["default", Default],
|
||||
["export", Export],
|
||||
["invalid", Invalid],
|
||||
["long-filename-info", LongFilenameInfo],
|
||||
["audio-info", AudioInfo],
|
||||
["video-info", VideoInfo],
|
||||
["unencrypted-download", UnencryptedDownload],
|
||||
["encrypted-iframe-download", EncryptedIframeDownload],
|
||||
["decryption-pending-download", DecryptionPendingDownload],
|
||||
["long-filename-download", LongFilenameDownload],
|
||||
])("matches snapshot for %s story", (_name, Story) => {
|
||||
const { container } = renderWithI18n(<Story />);
|
||||
expect(container).toMatchSnapshot();
|
||||
});
|
||||
|
||||
it("renders info row in info-only mode", () => {
|
||||
const vm = new TestViewModel(defaultSnapshot);
|
||||
|
||||
renderWithI18n(<FileBodyView vm={vm} />);
|
||||
|
||||
expect(screen.getByRole("button", { name: "Attachment" })).toBeInTheDocument();
|
||||
expect(screen.queryByRole("button", { name: "Download" })).not.toBeInTheDocument();
|
||||
});
|
||||
|
||||
it("renders info row in info-only mode using label and tooltip", () => {
|
||||
const vm = new TestViewModel({
|
||||
...defaultSnapshot,
|
||||
infoLabel: "spec.pdf",
|
||||
infoTooltip: "spec.pdf (22 KB)",
|
||||
});
|
||||
|
||||
renderWithI18n(<FileBodyView vm={vm} />);
|
||||
|
||||
expect(screen.getByRole("button", { name: "spec.pdf" })).toBeInTheDocument();
|
||||
expect(screen.queryByRole("button", { name: "Attachment" })).not.toBeInTheDocument();
|
||||
expect(screen.queryByRole("button", { name: "Download" })).not.toBeInTheDocument();
|
||||
});
|
||||
|
||||
it("uses href in export mode", () => {
|
||||
const vm = new TestViewModel({
|
||||
state: FileBodyViewState.EXPORT,
|
||||
showInfo: true,
|
||||
infoHref: "https://example.org/export.pdf",
|
||||
});
|
||||
|
||||
renderWithI18n(<FileBodyView vm={vm} />);
|
||||
|
||||
const link = screen.getByRole("link");
|
||||
expect(link).toHaveAttribute("href", "https://example.org/export.pdf");
|
||||
});
|
||||
|
||||
it("uses href in unencrypted download mode", () => {
|
||||
const vm = new TestViewModel({
|
||||
state: FileBodyViewState.UNENCRYPTED,
|
||||
showDownload: true,
|
||||
downloadHref: "https://example.org/download.pdf",
|
||||
});
|
||||
|
||||
renderWithI18n(<FileBodyView vm={vm} />);
|
||||
|
||||
const link = screen.getByRole("link", { name: "Download" });
|
||||
expect(link).toHaveAttribute("href", "https://example.org/download.pdf");
|
||||
expect(link).toHaveAttribute("target", "_blank");
|
||||
expect(link).toHaveAttribute("rel", "noreferrer noopener");
|
||||
});
|
||||
|
||||
it("renders safely when href is missing in EXPORT mode", () => {
|
||||
const vm = new TestViewModel({ state: FileBodyViewState.EXPORT, showInfo: true });
|
||||
|
||||
const { container } = renderWithI18n(<FileBodyView vm={vm} />);
|
||||
|
||||
expect(screen.getByRole("button", { name: "Attachment" })).toBeInTheDocument();
|
||||
expect(screen.queryByRole("link")).not.toBeInTheDocument();
|
||||
expect(container.querySelector("a")).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it("renders safely when href is missing in UNENCRYPTED mode", () => {
|
||||
const vm = new TestViewModel({ state: FileBodyViewState.UNENCRYPTED, showDownload: true });
|
||||
|
||||
renderWithI18n(<FileBodyView vm={vm} />);
|
||||
|
||||
expect(screen.getByText("Download")).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it("uses label as fallback tooltip content", () => {
|
||||
const vm = new TestViewModel({
|
||||
...defaultSnapshot,
|
||||
infoLabel: "spec.pdf",
|
||||
});
|
||||
|
||||
renderWithI18n(<FileBodyView vm={vm} />);
|
||||
|
||||
expect(screen.getByRole("button", { name: "spec.pdf" })).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it("renders download button in decryption-pending mode", () => {
|
||||
const vm = new TestViewModel({
|
||||
...defaultSnapshot,
|
||||
state: FileBodyViewState.DECRYPTION_PENDING,
|
||||
showDownload: true,
|
||||
});
|
||||
|
||||
renderWithI18n(<FileBodyView vm={vm} />);
|
||||
|
||||
expect(screen.getByRole("button", { name: "Download" })).toBeInTheDocument();
|
||||
expect(screen.queryByRole("button", { name: "spec.pdf" })).not.toBeInTheDocument();
|
||||
});
|
||||
|
||||
it("invokes onInfoClick when info row is clicked", () => {
|
||||
const onInfoClick = vi.fn();
|
||||
const vm = new TestViewModel(defaultSnapshot, { onInfoClick });
|
||||
|
||||
renderWithI18n(<FileBodyView vm={vm} />);
|
||||
|
||||
fireEvent.click(screen.getByRole("button", { name: "Attachment" }));
|
||||
expect(onInfoClick).toHaveBeenCalledTimes(1);
|
||||
});
|
||||
|
||||
it("invokes onDownloadClick in encrypted-pending mode", () => {
|
||||
const onDownloadClick = vi.fn();
|
||||
const vm = new TestViewModel(
|
||||
{
|
||||
...defaultSnapshot,
|
||||
state: FileBodyViewState.DECRYPTION_PENDING,
|
||||
showDownload: true,
|
||||
},
|
||||
{ onDownloadClick },
|
||||
);
|
||||
|
||||
renderWithI18n(<FileBodyView vm={vm} />);
|
||||
|
||||
fireEvent.click(screen.getByRole("button", { name: "Download" }));
|
||||
expect(onDownloadClick).toHaveBeenCalledTimes(1);
|
||||
});
|
||||
|
||||
it("invokes onDownloadLinkClick in unencrypted-download mode", () => {
|
||||
const onDownloadLinkClick = vi.fn((event: MouseEvent<HTMLAnchorElement>) => event.preventDefault());
|
||||
const vm = new TestViewModel(
|
||||
{
|
||||
...defaultSnapshot,
|
||||
state: FileBodyViewState.UNENCRYPTED,
|
||||
showDownload: true,
|
||||
},
|
||||
{ onDownloadLinkClick },
|
||||
);
|
||||
|
||||
renderWithI18n(<FileBodyView vm={vm} />);
|
||||
|
||||
fireEvent.click(screen.getByRole("link", { name: "Download" }));
|
||||
expect(onDownloadLinkClick).toHaveBeenCalledTimes(1);
|
||||
});
|
||||
|
||||
it("invokes onDownloadIframeLoad in encrypted-iframe-download mode", () => {
|
||||
const onDownloadIframeLoad = vi.fn();
|
||||
const vm = new TestViewModel(
|
||||
{
|
||||
...defaultSnapshot,
|
||||
state: FileBodyViewState.ENCRYPTED,
|
||||
showDownload: true,
|
||||
},
|
||||
{ onDownloadIframeLoad },
|
||||
);
|
||||
|
||||
renderWithI18n(<FileBodyView vm={vm} />);
|
||||
|
||||
const iframe = screen.getByTitle("Download");
|
||||
fireEvent.load(iframe);
|
||||
expect(onDownloadIframeLoad).toHaveBeenCalledTimes(1);
|
||||
});
|
||||
|
||||
it("wires refLink in encrypted-iframe-download mode", () => {
|
||||
const vm = new TestViewModel({
|
||||
...defaultSnapshot,
|
||||
state: FileBodyViewState.ENCRYPTED,
|
||||
showDownload: true,
|
||||
});
|
||||
const refLink = React.createRef<HTMLAnchorElement>() as React.RefObject<HTMLAnchorElement>;
|
||||
|
||||
renderWithI18n(<FileBodyView vm={vm} refLink={refLink} />);
|
||||
|
||||
expect(refLink.current).toBeInstanceOf(HTMLAnchorElement);
|
||||
});
|
||||
|
||||
it("wires refIFrame in encrypted-iframe-download mode", () => {
|
||||
const vm = new TestViewModel({
|
||||
...defaultSnapshot,
|
||||
state: FileBodyViewState.ENCRYPTED,
|
||||
showDownload: true,
|
||||
});
|
||||
const refIFrame = React.createRef<HTMLIFrameElement>() as React.RefObject<HTMLIFrameElement>;
|
||||
|
||||
renderWithI18n(<FileBodyView vm={vm} refIFrame={refIFrame} />);
|
||||
|
||||
expect(refIFrame.current).toBeInstanceOf(HTMLIFrameElement);
|
||||
});
|
||||
|
||||
it.each([FileBodyViewState.UNENCRYPTED, FileBodyViewState.DECRYPTION_PENDING, FileBodyViewState.ENCRYPTED])(
|
||||
"hides info row in %s mode",
|
||||
(state) => {
|
||||
const vm = new TestViewModel({
|
||||
...defaultSnapshot,
|
||||
state,
|
||||
showInfo: false,
|
||||
showDownload: true,
|
||||
});
|
||||
|
||||
renderWithI18n(<FileBodyView vm={vm} />);
|
||||
|
||||
expect(screen.queryByRole("button", { name: "Attachment" })).not.toBeInTheDocument();
|
||||
},
|
||||
);
|
||||
|
||||
it("shows message in invalid mode", () => {
|
||||
const vm = new TestViewModel({
|
||||
state: FileBodyViewState.INVALID,
|
||||
});
|
||||
|
||||
renderWithI18n(<FileBodyView vm={vm} />);
|
||||
|
||||
expect(screen.queryByRole("button", { name: "Attachment" })).not.toBeInTheDocument();
|
||||
expect(screen.getByText("Invalid file")).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it("applies extra class names to the root element", () => {
|
||||
const vm = new TestViewModel(defaultSnapshot);
|
||||
|
||||
const { container } = renderWithI18n(<FileBodyView vm={vm} className="custom-file-body another-class" />);
|
||||
expect(container.firstElementChild).toHaveClass("custom-file-body", "another-class");
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,315 @@
|
||||
/*
|
||||
* Copyright 2026 Element Creations Ltd.
|
||||
*
|
||||
* 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 ComponentType, type JSX, type MouseEvent } from "react";
|
||||
import classNames from "classnames";
|
||||
import { Button, Tooltip } from "@vector-im/compound-web";
|
||||
import {
|
||||
AttachmentIcon,
|
||||
DownloadIcon,
|
||||
VideoCallSolidIcon,
|
||||
VolumeOnSolidIcon,
|
||||
} from "@vector-im/compound-design-tokens/assets/web/icons";
|
||||
|
||||
import styles from "./FileBodyView.module.css";
|
||||
import { type ViewModel } from "../../viewmodel/ViewModel";
|
||||
import { useViewModel } from "../../viewmodel/useViewModel";
|
||||
import { useI18n } from "../../utils/i18nContext";
|
||||
import { MediaBody } from "../MediaBody";
|
||||
|
||||
/**
|
||||
* Which visual state to render for the component.
|
||||
*/
|
||||
export enum FileBodyViewState {
|
||||
/** Export-only rendering where the info row links to the source file. */
|
||||
EXPORT = "EXPORT",
|
||||
/** Encrypted file before decryption has completed; shows the button that starts the flow. */
|
||||
DECRYPTION_PENDING = "DECRYPTION_PENDING",
|
||||
/** Encrypted file after decryption; renders the sandboxed iframe download path. */
|
||||
ENCRYPTED = "ENCRYPTED",
|
||||
/** Unencrypted file with a direct download link. */
|
||||
UNENCRYPTED = "UNENCRYPTED",
|
||||
/** Fallback for missing or unusable file metadata. */
|
||||
INVALID = "INVALID",
|
||||
}
|
||||
|
||||
/**
|
||||
* Which info icon to render.
|
||||
*/
|
||||
export enum FileBodyViewInfoIcon {
|
||||
ATTACHMENT = "ATTACHMENT",
|
||||
AUDIO = "AUDIO",
|
||||
DOWNLOAD = "DOWNLOAD",
|
||||
VIDEO = "VIDEO",
|
||||
}
|
||||
|
||||
export interface FileBodyViewSnapshot {
|
||||
/**
|
||||
* Primary rendering branch for the component.
|
||||
* Controls the overall state (export, encrypted, unencrypted, invalid).
|
||||
*/
|
||||
state: FileBodyViewState;
|
||||
/**
|
||||
* Whether to render the info row (icon + label + tooltip).
|
||||
*/
|
||||
showInfo?: boolean;
|
||||
/**
|
||||
* Optional info label (normally the file name). Defaults to 'Attachment'.
|
||||
*/
|
||||
infoLabel?: string;
|
||||
/**
|
||||
* Optional tooltip for info button. Defaults to infoLabel.
|
||||
*/
|
||||
infoTooltip?: string;
|
||||
/**
|
||||
* Optional icon. Defaults to `ATTACHMENT`.
|
||||
*/
|
||||
infoIcon?: FileBodyViewInfoIcon;
|
||||
/**
|
||||
* Optional URL used by the info row in `EXPORT`.
|
||||
*/
|
||||
infoHref?: string;
|
||||
/**
|
||||
* Whether to render download controls for the current rendering branch.
|
||||
*/
|
||||
showDownload?: boolean;
|
||||
/**
|
||||
* Optional download label (normally file/action text). Defaults to 'Download'.
|
||||
*/
|
||||
downloadLabel?: string;
|
||||
/**
|
||||
* Optional title for encrypted iframe download flow.
|
||||
* Defaults to `downloadLabel`.
|
||||
*/
|
||||
downloadTitle?: string;
|
||||
/**
|
||||
* Optional URL used for `UNENCRYPTED` download links.
|
||||
*/
|
||||
downloadHref?: string;
|
||||
}
|
||||
|
||||
export interface FileBodyViewActions {
|
||||
/**
|
||||
* Click handler for the info row.
|
||||
*/
|
||||
onInfoClick?: () => void;
|
||||
/**
|
||||
* Click handler for a download button.
|
||||
*/
|
||||
onDownloadClick?: () => void;
|
||||
/**
|
||||
* Click handler for the unencrypted download anchor.
|
||||
*/
|
||||
onDownloadLinkClick?: (event: MouseEvent<HTMLAnchorElement>) => void;
|
||||
/**
|
||||
* Load handler for encrypted-download iframe.
|
||||
*/
|
||||
onDownloadIframeLoad?: () => void;
|
||||
}
|
||||
|
||||
/**
|
||||
* The view model for the control.
|
||||
*/
|
||||
export type FileBodyViewModel = ViewModel<FileBodyViewSnapshot> & FileBodyViewActions;
|
||||
|
||||
interface FileBodyViewProps {
|
||||
/**
|
||||
* The view model for the component.
|
||||
*/
|
||||
vm: FileBodyViewModel;
|
||||
|
||||
/**
|
||||
* Optional CSS class for host-level styling.
|
||||
*/
|
||||
className?: string;
|
||||
|
||||
/**
|
||||
* Optional iframe ref for encrypted download flow
|
||||
*/
|
||||
refIFrame?: React.RefObject<HTMLIFrameElement>;
|
||||
|
||||
/**
|
||||
* Optional hidden anchor ref used for encrypted download flow
|
||||
*/
|
||||
refLink?: React.RefObject<HTMLAnchorElement>;
|
||||
}
|
||||
|
||||
/**
|
||||
* Create the correct icon to render in the view
|
||||
*/
|
||||
function getInfoIcon(infoIcon?: FileBodyViewInfoIcon): ComponentType<React.SVGAttributes<SVGElement>> {
|
||||
if (infoIcon === FileBodyViewInfoIcon.AUDIO) {
|
||||
return VolumeOnSolidIcon;
|
||||
} else if (infoIcon === FileBodyViewInfoIcon.DOWNLOAD) {
|
||||
return DownloadIcon;
|
||||
} else if (infoIcon === FileBodyViewInfoIcon.VIDEO) {
|
||||
return VideoCallSolidIcon;
|
||||
}
|
||||
return AttachmentIcon;
|
||||
}
|
||||
|
||||
/**
|
||||
* Renders the body of a file message for info, export, and download flows.
|
||||
*
|
||||
* Rendering is selected by `snapshot.state` from the view model and supports:
|
||||
* - export link (`EXPORT`)
|
||||
* - encrypted download flows (`DECRYPTION_PENDING`, `ENCRYPTED`)
|
||||
* - unencrypted download flow (`UNENCRYPTED`)
|
||||
* - invalid-file fallback (`INVALID`)
|
||||
*
|
||||
* Visibility/content for the info row and download controls are driven by snapshot fields:
|
||||
* - `showInfo`, `infoLabel`, `infoTooltip`, `infoIcon`, `infoHref`
|
||||
* - `showDownload`, `downloadLabel`, `downloadTitle`, `downloadHref`
|
||||
*
|
||||
* Common usage patterns:
|
||||
* - info-only display: set `showInfo: true`, `showDownload: false`
|
||||
* - export link (`EXPORT`)
|
||||
* - download-only display: set `showInfo: false`, `showDownload: true`
|
||||
*
|
||||
* Note on using the encrypted iframe, `ENCRYPTED`:
|
||||
* To make this rendering branch work, it is expected that a `usercontent/` target
|
||||
* is available relative to the root of the application as is described in detail here,
|
||||
* https://github.com/element-hq/element-web/blob/develop/docs/usercontent.md
|
||||
*
|
||||
* @example
|
||||
* ```tsx
|
||||
* <FileBodyView vm={fileBodyViewModel} />
|
||||
* ```
|
||||
*/
|
||||
export function FileBodyView({ vm, refIFrame, refLink, className }: Readonly<FileBodyViewProps>): JSX.Element {
|
||||
const { translate: _t } = useI18n();
|
||||
|
||||
const {
|
||||
state,
|
||||
showInfo,
|
||||
infoLabel,
|
||||
infoTooltip,
|
||||
infoIcon,
|
||||
infoHref,
|
||||
showDownload,
|
||||
downloadLabel,
|
||||
downloadTitle,
|
||||
downloadHref,
|
||||
} = useViewModel(vm);
|
||||
|
||||
const resolvedInfoLabel = infoLabel ?? _t("common|attachment");
|
||||
const resolvedInfoTooltip = infoTooltip ?? resolvedInfoLabel;
|
||||
const resolvedInfoIcon = getInfoIcon(infoIcon);
|
||||
|
||||
const info = showInfo ? (
|
||||
<Tooltip description={resolvedInfoTooltip} placement="right">
|
||||
<MediaBody data-type="info">
|
||||
<Button
|
||||
as="button"
|
||||
size="sm"
|
||||
kind="secondary"
|
||||
aria-label={resolvedInfoLabel}
|
||||
Icon={resolvedInfoIcon}
|
||||
onClick={vm.onInfoClick}
|
||||
>
|
||||
<span>{resolvedInfoLabel}</span>
|
||||
</Button>
|
||||
</MediaBody>
|
||||
</Tooltip>
|
||||
) : null;
|
||||
|
||||
const classes = classNames(styles.content, className);
|
||||
|
||||
const resolvedDownloadLabel = downloadLabel ?? _t("action|download");
|
||||
const resolvedDownloadTitle = downloadTitle ?? resolvedDownloadLabel;
|
||||
|
||||
switch (state) {
|
||||
case FileBodyViewState.EXPORT:
|
||||
return (
|
||||
<span className={classes}>
|
||||
<a href={infoHref}>{info}</a>
|
||||
</span>
|
||||
);
|
||||
|
||||
case FileBodyViewState.DECRYPTION_PENDING:
|
||||
return (
|
||||
<span className={classes}>
|
||||
{info}
|
||||
{showDownload && (
|
||||
<div data-type="download">
|
||||
{/* Decrypt/download is triggered by the view model action, not by an anchor `href`. */}
|
||||
<Button size="sm" kind="secondary" Icon={DownloadIcon} onClick={vm.onDownloadClick}>
|
||||
{resolvedDownloadLabel}
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
</span>
|
||||
);
|
||||
|
||||
case FileBodyViewState.ENCRYPTED:
|
||||
return (
|
||||
<span className={classes}>
|
||||
{info}
|
||||
{showDownload && (
|
||||
<div data-type="download">
|
||||
<div aria-hidden style={{ display: "none" }}>
|
||||
{/*
|
||||
* Add dummy copy of the button
|
||||
* We'll use it to learn how the download button
|
||||
* would have been styled if it was rendered inline.
|
||||
* this violates multiple eslint rules so ignore it completely */}
|
||||
<Button size="sm" kind="secondary" Icon={DownloadIcon} as="a" ref={refLink} />
|
||||
</div>
|
||||
{/*
|
||||
TODO: Move iframe (and dummy link) into FileDownloader.
|
||||
We currently have it set up this way because of styles applied to the iframe
|
||||
itself which cannot be easily handled/overridden by the FileDownloader. In
|
||||
future, the download link may disappear entirely at which point it could also
|
||||
be suitable to just remove this bit of code.
|
||||
*/}
|
||||
<iframe
|
||||
aria-hidden
|
||||
title={resolvedDownloadTitle}
|
||||
src="usercontent/"
|
||||
onLoad={vm.onDownloadIframeLoad}
|
||||
ref={refIFrame}
|
||||
sandbox="allow-scripts allow-downloads"
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</span>
|
||||
);
|
||||
|
||||
case FileBodyViewState.UNENCRYPTED:
|
||||
return (
|
||||
<span className={classes}>
|
||||
{info}
|
||||
{showDownload && (
|
||||
<div data-type="download">
|
||||
{/* Unencrypted media uses an anchor element with VM-controlled click behavior. */}
|
||||
<Button
|
||||
size="sm"
|
||||
kind="secondary"
|
||||
Icon={DownloadIcon}
|
||||
as="a"
|
||||
href={downloadHref}
|
||||
target="_blank"
|
||||
rel="noreferrer noopener"
|
||||
onClick={vm.onDownloadLinkClick}
|
||||
>
|
||||
{resolvedDownloadLabel}
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
</span>
|
||||
);
|
||||
|
||||
case FileBodyViewState.INVALID:
|
||||
default:
|
||||
return (
|
||||
<>
|
||||
<span className={classes}>{info}</span>
|
||||
<span className={classNames(classes, styles.invalid)}>{_t("timeline|m.file|error_invalid")}</span>
|
||||
</>
|
||||
);
|
||||
}
|
||||
}
|
||||
+421
@@ -0,0 +1,421 @@
|
||||
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
|
||||
|
||||
exports[`FileBodyView > matches snapshot for audio-info story 1`] = `
|
||||
<div>
|
||||
<span
|
||||
class="content"
|
||||
>
|
||||
<div
|
||||
class="mx_MediaBody mediaBody"
|
||||
data-type="info"
|
||||
>
|
||||
<button
|
||||
aria-label="voice-message.ogg"
|
||||
class="_button_13vu4_8 _has-icon_13vu4_60"
|
||||
data-kind="secondary"
|
||||
data-size="sm"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
fill="currentColor"
|
||||
height="20"
|
||||
viewBox="0 0 24 24"
|
||||
width="20"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M3 14v-4a2 2 0 0 1 2-2h2l3.293-3.293c.63-.63 1.707-.184 1.707.707v13.172c0 .89-1.077 1.337-1.707.707L7 16H5a2 2 0 0 1-2-2m11.122-5.536a1 1 0 0 1 1.414 0A5 5 0 0 1 17 12c0 1.38-.56 2.632-1.464 3.536a1 1 0 0 1-1.415-1.415 3 3 0 0 0 .88-2.121c0-.829-.335-1.577-.88-2.121a1 1 0 0 1 0-1.415"
|
||||
/>
|
||||
<path
|
||||
d="M16.95 5.636a1 1 0 0 1 1.414 0A8.98 8.98 0 0 1 21 12a8.98 8.98 0 0 1-2.636 6.364 1 1 0 0 1-1.414-1.414A6.98 6.98 0 0 0 19 12a6.98 6.98 0 0 0-2.05-4.95 1 1 0 0 1 0-1.414"
|
||||
/>
|
||||
</svg>
|
||||
<span>
|
||||
voice-message.ogg
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</span>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`FileBodyView > matches snapshot for decryption-pending-download story 1`] = `
|
||||
<div>
|
||||
<span
|
||||
class="content"
|
||||
>
|
||||
<div
|
||||
data-type="download"
|
||||
>
|
||||
<button
|
||||
class="_button_13vu4_8 _has-icon_13vu4_60"
|
||||
data-kind="secondary"
|
||||
data-size="sm"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
fill="currentColor"
|
||||
height="20"
|
||||
viewBox="0 0 24 24"
|
||||
width="20"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M12 15.575q-.2 0-.375-.062a.9.9 0 0 1-.325-.213l-3.6-3.6a.95.95 0 0 1-.275-.7q0-.425.275-.7.274-.275.712-.288t.713.263L11 12.15V5q0-.424.287-.713A.97.97 0 0 1 12 4q.424 0 .713.287Q13 4.576 13 5v7.15l1.875-1.875q.274-.274.713-.263.437.014.712.288a.95.95 0 0 1 .275.7.95.95 0 0 1-.275.7l-3.6 3.6q-.15.15-.325.212a1.1 1.1 0 0 1-.375.063M6 20q-.824 0-1.412-.587A1.93 1.93 0 0 1 4 18v-2q0-.424.287-.713A.97.97 0 0 1 5 15q.424 0 .713.287Q6 15.576 6 16v2h12v-2q0-.424.288-.713A.97.97 0 0 1 19 15q.424 0 .712.287.288.288.288.713v2q0 .824-.587 1.413A1.93 1.93 0 0 1 18 20z"
|
||||
/>
|
||||
</svg>
|
||||
Download file
|
||||
</button>
|
||||
</div>
|
||||
</span>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`FileBodyView > matches snapshot for default story 1`] = `
|
||||
<div>
|
||||
<span
|
||||
class="content"
|
||||
>
|
||||
<div
|
||||
class="mx_MediaBody mediaBody"
|
||||
data-type="info"
|
||||
>
|
||||
<button
|
||||
aria-label="spec.pdf"
|
||||
class="_button_13vu4_8 _has-icon_13vu4_60"
|
||||
data-kind="secondary"
|
||||
data-size="sm"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
fill="currentColor"
|
||||
height="20"
|
||||
viewBox="0 0 24 24"
|
||||
width="20"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M11.5 22q-2.3 0-3.9-1.6T6 16.5V6q0-1.65 1.175-2.825T10 2t2.825 1.175T14 6v9.5q0 1.05-.725 1.775T11.5 18t-1.775-.725T9 15.5V6.75A.73.73 0 0 1 9.75 6a.73.73 0 0 1 .75.75v8.75q0 .424.287.712.288.288.713.288.424 0 .713-.288a.97.97 0 0 0 .287-.712V6q0-1.05-.725-1.775T10 3.5t-1.775.725T7.5 6v10.5q0 1.65 1.175 2.825T11.5 20.5t2.825-1.175T15.5 16.5V6.75a.73.73 0 0 1 .75-.75.73.73 0 0 1 .75.75v9.75q0 2.3-1.6 3.9T11.5 22"
|
||||
/>
|
||||
</svg>
|
||||
<span>
|
||||
spec.pdf
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
<div
|
||||
data-type="download"
|
||||
>
|
||||
<a
|
||||
class="_button_13vu4_8 _has-icon_13vu4_60"
|
||||
data-kind="secondary"
|
||||
data-size="sm"
|
||||
href="https://example.org/download/spec.pdf"
|
||||
rel="noreferrer noopener"
|
||||
role="link"
|
||||
tabindex="0"
|
||||
target="_blank"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
fill="currentColor"
|
||||
height="20"
|
||||
viewBox="0 0 24 24"
|
||||
width="20"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M12 15.575q-.2 0-.375-.062a.9.9 0 0 1-.325-.213l-3.6-3.6a.95.95 0 0 1-.275-.7q0-.425.275-.7.274-.275.712-.288t.713.263L11 12.15V5q0-.424.287-.713A.97.97 0 0 1 12 4q.424 0 .713.287Q13 4.576 13 5v7.15l1.875-1.875q.274-.274.713-.263.437.014.712.288a.95.95 0 0 1 .275.7.95.95 0 0 1-.275.7l-3.6 3.6q-.15.15-.325.212a1.1 1.1 0 0 1-.375.063M6 20q-.824 0-1.412-.587A1.93 1.93 0 0 1 4 18v-2q0-.424.287-.713A.97.97 0 0 1 5 15q.424 0 .713.287Q6 15.576 6 16v2h12v-2q0-.424.288-.713A.97.97 0 0 1 19 15q.424 0 .712.287.288.288.288.713v2q0 .824-.587 1.413A1.93 1.93 0 0 1 18 20z"
|
||||
/>
|
||||
</svg>
|
||||
Download file
|
||||
</a>
|
||||
</div>
|
||||
</span>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`FileBodyView > matches snapshot for encrypted-iframe-download story 1`] = `
|
||||
<div>
|
||||
<span
|
||||
class="content"
|
||||
>
|
||||
<div
|
||||
data-type="download"
|
||||
>
|
||||
<div
|
||||
aria-hidden="true"
|
||||
style="display: none;"
|
||||
>
|
||||
<a
|
||||
class="_button_13vu4_8 _has-icon_13vu4_60"
|
||||
data-kind="secondary"
|
||||
data-size="sm"
|
||||
role="link"
|
||||
tabindex="0"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
fill="currentColor"
|
||||
height="20"
|
||||
viewBox="0 0 24 24"
|
||||
width="20"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M12 15.575q-.2 0-.375-.062a.9.9 0 0 1-.325-.213l-3.6-3.6a.95.95 0 0 1-.275-.7q0-.425.275-.7.274-.275.712-.288t.713.263L11 12.15V5q0-.424.287-.713A.97.97 0 0 1 12 4q.424 0 .713.287Q13 4.576 13 5v7.15l1.875-1.875q.274-.274.713-.263.437.014.712.288a.95.95 0 0 1 .275.7.95.95 0 0 1-.275.7l-3.6 3.6q-.15.15-.325.212a1.1 1.1 0 0 1-.375.063M6 20q-.824 0-1.412-.587A1.93 1.93 0 0 1 4 18v-2q0-.424.287-.713A.97.97 0 0 1 5 15q.424 0 .713.287Q6 15.576 6 16v2h12v-2q0-.424.288-.713A.97.97 0 0 1 19 15q.424 0 .712.287.288.288.288.713v2q0 .824-.587 1.413A1.93 1.93 0 0 1 18 20z"
|
||||
/>
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
<iframe
|
||||
aria-hidden="true"
|
||||
sandbox="allow-scripts allow-downloads"
|
||||
src="usercontent/"
|
||||
title="Download title"
|
||||
/>
|
||||
</div>
|
||||
</span>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`FileBodyView > matches snapshot for export story 1`] = `
|
||||
<div>
|
||||
<span
|
||||
class="content"
|
||||
>
|
||||
<a
|
||||
href="https://example.org/spec.pdf"
|
||||
>
|
||||
<div
|
||||
class="mx_MediaBody mediaBody"
|
||||
data-type="info"
|
||||
>
|
||||
<button
|
||||
aria-label="spec.pdf"
|
||||
class="_button_13vu4_8 _has-icon_13vu4_60"
|
||||
data-kind="secondary"
|
||||
data-size="sm"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
fill="currentColor"
|
||||
height="20"
|
||||
viewBox="0 0 24 24"
|
||||
width="20"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M11.5 22q-2.3 0-3.9-1.6T6 16.5V6q0-1.65 1.175-2.825T10 2t2.825 1.175T14 6v9.5q0 1.05-.725 1.775T11.5 18t-1.775-.725T9 15.5V6.75A.73.73 0 0 1 9.75 6a.73.73 0 0 1 .75.75v8.75q0 .424.287.712.288.288.713.288.424 0 .713-.288a.97.97 0 0 0 .287-.712V6q0-1.05-.725-1.775T10 3.5t-1.775.725T7.5 6v10.5q0 1.65 1.175 2.825T11.5 20.5t2.825-1.175T15.5 16.5V6.75a.73.73 0 0 1 .75-.75.73.73 0 0 1 .75.75v9.75q0 2.3-1.6 3.9T11.5 22"
|
||||
/>
|
||||
</svg>
|
||||
<span>
|
||||
spec.pdf
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</a>
|
||||
</span>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`FileBodyView > matches snapshot for invalid story 1`] = `
|
||||
<div>
|
||||
<span
|
||||
class="content"
|
||||
>
|
||||
<div
|
||||
class="mx_MediaBody mediaBody"
|
||||
data-type="info"
|
||||
>
|
||||
<button
|
||||
aria-label="spec.pdf"
|
||||
class="_button_13vu4_8 _has-icon_13vu4_60"
|
||||
data-kind="secondary"
|
||||
data-size="sm"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
fill="currentColor"
|
||||
height="20"
|
||||
viewBox="0 0 24 24"
|
||||
width="20"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M11.5 22q-2.3 0-3.9-1.6T6 16.5V6q0-1.65 1.175-2.825T10 2t2.825 1.175T14 6v9.5q0 1.05-.725 1.775T11.5 18t-1.775-.725T9 15.5V6.75A.73.73 0 0 1 9.75 6a.73.73 0 0 1 .75.75v8.75q0 .424.287.712.288.288.713.288.424 0 .713-.288a.97.97 0 0 0 .287-.712V6q0-1.05-.725-1.775T10 3.5t-1.775.725T7.5 6v10.5q0 1.65 1.175 2.825T11.5 20.5t2.825-1.175T15.5 16.5V6.75a.73.73 0 0 1 .75-.75.73.73 0 0 1 .75.75v9.75q0 2.3-1.6 3.9T11.5 22"
|
||||
/>
|
||||
</svg>
|
||||
<span>
|
||||
spec.pdf
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</span>
|
||||
<span
|
||||
class="content invalid"
|
||||
>
|
||||
Invalid file
|
||||
</span>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`FileBodyView > matches snapshot for long-filename-download story 1`] = `
|
||||
<div>
|
||||
<span
|
||||
class="content"
|
||||
>
|
||||
<div
|
||||
data-type="download"
|
||||
>
|
||||
<a
|
||||
class="_button_13vu4_8 _has-icon_13vu4_60"
|
||||
data-kind="secondary"
|
||||
data-size="sm"
|
||||
href="https://example.org/download/spec.pdf"
|
||||
rel="noreferrer noopener"
|
||||
role="link"
|
||||
tabindex="0"
|
||||
target="_blank"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
fill="currentColor"
|
||||
height="20"
|
||||
viewBox="0 0 24 24"
|
||||
width="20"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M12 15.575q-.2 0-.375-.062a.9.9 0 0 1-.325-.213l-3.6-3.6a.95.95 0 0 1-.275-.7q0-.425.275-.7.274-.275.712-.288t.713.263L11 12.15V5q0-.424.287-.713A.97.97 0 0 1 12 4q.424 0 .713.287Q13 4.576 13 5v7.15l1.875-1.875q.274-.274.713-.263.437.014.712.288a.95.95 0 0 1 .275.7.95.95 0 0 1-.275.7l-3.6 3.6q-.15.15-.325.212a1.1 1.1 0 0 1-.375.063M6 20q-.824 0-1.412-.587A1.93 1.93 0 0 1 4 18v-2q0-.424.287-.713A.97.97 0 0 1 5 15q.424 0 .713.287Q6 15.576 6 16v2h12v-2q0-.424.288-.713A.97.97 0 0 1 19 15q.424 0 .712.287.288.288.288.713v2q0 .824-.587 1.413A1.93 1.93 0 0 1 18 20z"
|
||||
/>
|
||||
</svg>
|
||||
a very long filename that show no ellipsis.pdf
|
||||
</a>
|
||||
</div>
|
||||
</span>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`FileBodyView > matches snapshot for long-filename-info story 1`] = `
|
||||
<div>
|
||||
<span
|
||||
class="content"
|
||||
>
|
||||
<div
|
||||
class="mx_MediaBody mediaBody"
|
||||
data-type="info"
|
||||
>
|
||||
<button
|
||||
aria-label="a very long filename to show ellipsis.pdf"
|
||||
class="_button_13vu4_8 _has-icon_13vu4_60"
|
||||
data-kind="secondary"
|
||||
data-size="sm"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
fill="currentColor"
|
||||
height="20"
|
||||
viewBox="0 0 24 24"
|
||||
width="20"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M11.5 22q-2.3 0-3.9-1.6T6 16.5V6q0-1.65 1.175-2.825T10 2t2.825 1.175T14 6v9.5q0 1.05-.725 1.775T11.5 18t-1.775-.725T9 15.5V6.75A.73.73 0 0 1 9.75 6a.73.73 0 0 1 .75.75v8.75q0 .424.287.712.288.288.713.288.424 0 .713-.288a.97.97 0 0 0 .287-.712V6q0-1.05-.725-1.775T10 3.5t-1.775.725T7.5 6v10.5q0 1.65 1.175 2.825T11.5 20.5t2.825-1.175T15.5 16.5V6.75a.73.73 0 0 1 .75-.75.73.73 0 0 1 .75.75v9.75q0 2.3-1.6 3.9T11.5 22"
|
||||
/>
|
||||
</svg>
|
||||
<span>
|
||||
a very long filename to show ellipsis.pdf
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</span>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`FileBodyView > matches snapshot for unencrypted-download story 1`] = `
|
||||
<div>
|
||||
<span
|
||||
class="content"
|
||||
>
|
||||
<div
|
||||
data-type="download"
|
||||
>
|
||||
<a
|
||||
class="_button_13vu4_8 _has-icon_13vu4_60"
|
||||
data-kind="secondary"
|
||||
data-size="sm"
|
||||
href="https://example.org/download/spec.pdf"
|
||||
rel="noreferrer noopener"
|
||||
role="link"
|
||||
tabindex="0"
|
||||
target="_blank"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
fill="currentColor"
|
||||
height="20"
|
||||
viewBox="0 0 24 24"
|
||||
width="20"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M12 15.575q-.2 0-.375-.062a.9.9 0 0 1-.325-.213l-3.6-3.6a.95.95 0 0 1-.275-.7q0-.425.275-.7.274-.275.712-.288t.713.263L11 12.15V5q0-.424.287-.713A.97.97 0 0 1 12 4q.424 0 .713.287Q13 4.576 13 5v7.15l1.875-1.875q.274-.274.713-.263.437.014.712.288a.95.95 0 0 1 .275.7.95.95 0 0 1-.275.7l-3.6 3.6q-.15.15-.325.212a1.1 1.1 0 0 1-.375.063M6 20q-.824 0-1.412-.587A1.93 1.93 0 0 1 4 18v-2q0-.424.287-.713A.97.97 0 0 1 5 15q.424 0 .713.287Q6 15.576 6 16v2h12v-2q0-.424.288-.713A.97.97 0 0 1 19 15q.424 0 .712.287.288.288.288.713v2q0 .824-.587 1.413A1.93 1.93 0 0 1 18 20z"
|
||||
/>
|
||||
</svg>
|
||||
Download file
|
||||
</a>
|
||||
</div>
|
||||
</span>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`FileBodyView > matches snapshot for video-info story 1`] = `
|
||||
<div>
|
||||
<span
|
||||
class="content"
|
||||
>
|
||||
<div
|
||||
class="mx_MediaBody mediaBody"
|
||||
data-type="info"
|
||||
>
|
||||
<button
|
||||
aria-label="clip.mp4"
|
||||
class="_button_13vu4_8 _has-icon_13vu4_60"
|
||||
data-kind="secondary"
|
||||
data-size="sm"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
fill="currentColor"
|
||||
height="20"
|
||||
viewBox="0 0 24 24"
|
||||
width="20"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M6 4h10a2 2 0 0 1 2 2v4.286l3.35-2.871a1 1 0 0 1 1.65.76v7.65a1 1 0 0 1-1.65.76L18 13.715V18a2 2 0 0 1-2 2H6a4 4 0 0 1-4-4V8a4 4 0 0 1 4-4"
|
||||
/>
|
||||
</svg>
|
||||
<span>
|
||||
clip.mp4
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</span>
|
||||
</div>
|
||||
`;
|
||||
@@ -0,0 +1,15 @@
|
||||
/*
|
||||
* Copyright 2026 Element Creations Ltd.
|
||||
*
|
||||
* 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.
|
||||
*/
|
||||
|
||||
export {
|
||||
FileBodyView,
|
||||
FileBodyViewState,
|
||||
FileBodyViewInfoIcon,
|
||||
type FileBodyViewActions,
|
||||
type FileBodyViewSnapshot,
|
||||
type FileBodyViewModel,
|
||||
} from "./FileBodyView";
|
||||
@@ -7,7 +7,7 @@
|
||||
|
||||
.mediaBody {
|
||||
background-color: var(--cpd-color-bg-subtle-secondary);
|
||||
border-radius: var(--cpd-space-2x) !important;
|
||||
border-radius: 12px;
|
||||
max-width: 243px; /* use max-width instead of width so it fits within right panels */
|
||||
|
||||
font: var(--cpd-font-body-md-regular);
|
||||
|
||||
Reference in New Issue
Block a user