Skip to content

Better media preview/download implementation #53

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
aine-etke merged 2 commits into from
Oct 3, 2024
Merged

Better media preview/download implementation #53

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
f1c4f59
Add download option for non image media
beastafk Oct 3, 2024
c4db25b
make view media button change the icon during the loading; update readme
aine-etke Oct 3, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
make view media button change the icon during the loading; update readme
  • Loading branch information
@aine-etke
aine-etke committed Oct 3, 2024
commit c4db25bb208ecb9d2f1c2020b246b6401a6b185f
1 change: 1 addition & 0 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -62,6 +62,7 @@ The following changes are already implemented:
* [Add `Contact support` menu item](https://github.com/etkecc/synapse-admin/pull/45)
* [Provide options to delete media and redact events on user erase](https://github.com/etkecc/synapse-admin/pull/49)
* [Authenticated Media support](https://github.com/etkecc/synapse-admin/pull/51)
* [Better media preview/download](https://github.com/etkecc/synapse-admin/pull/53)

_the list will be updated as new changes are added_

Expand Down
10 changes: 8 additions & 2 deletions src/components/media.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ import FileOpenIcon from "@mui/icons-material/FileOpen";
import LockIcon from "@mui/icons-material/Lock";
import LockOpenIcon from "@mui/icons-material/LockOpen";
import DownloadIcon from '@mui/icons-material/Download';
import DownloadingIcon from '@mui/icons-material/Downloading';
import { Grid2 as Grid, Box, Dialog, DialogContent, DialogContentText, DialogTitle, Tooltip, Link } from "@mui/material";
import { alpha, useTheme } from "@mui/material/styles";
import {
Expand Down Expand Up @@ -313,6 +314,7 @@ export const QuarantineMediaButton = (props: ButtonProps) => {

export const ViewMediaButton = ({ mxcURL, label, uploadName, mimetype }) => {
const translate = useTranslate();
const [loading, setLoading] = useState(false);
const isImage = mimetype && mimetype.startsWith("image/");

const openFileInNewTab = (blobURL: string) => {
Expand All @@ -337,6 +339,7 @@ export const ViewMediaButton = ({ mxcURL, label, uploadName, mimetype }) => {
};

const handleFile = async (preview: boolean) => {
setLoading(true);
const response = await fetchAuthenticatedMedia(mxcURL, "original");
const blob = await response.blob();
const blobURL = URL.createObjectURL(blob);
Expand All @@ -345,6 +348,7 @@ export const ViewMediaButton = ({ mxcURL, label, uploadName, mimetype }) => {
} else {
downloadFile(blobURL);
}
setLoading(false);
};

return (
Expand All @@ -354,19 +358,21 @@ export const ViewMediaButton = ({ mxcURL, label, uploadName, mimetype }) => {
<span>
{isImage && (
<Button
disabled={loading}
onClick={() => handleFile(true)}
style={{ minWidth: 0, padding: 0, marginRight: 8 }}
>
<FileOpenIcon />
{loading ? <DownloadingIcon /> : <FileOpenIcon />}
</Button>
)}
</span>
</Tooltip>
<Button
disabled={loading}
onClick={() => handleFile(false)}
style={{ minWidth: 0, padding: 0, marginRight: 8 }}
>
<DownloadIcon />
{loading ? <DownloadingIcon /> : <DownloadIcon />}
</Button>
<span>{label}</span>
</Box>
Expand Down