47 lines
1.5 KiB
TypeScript
47 lines
1.5 KiB
TypeScript
import { mediaStore } from "@shared";
|
||
import { useEffect } from "react";
|
||
import { useParams } from "react-router-dom";
|
||
import { MediaViewer } from "@widgets";
|
||
import { observer } from "mobx-react-lite";
|
||
import { Download } from "lucide-react";
|
||
import { Button } from "@mui/material";
|
||
|
||
export const MediaPreviewPage = observer(() => {
|
||
const { id } = useParams();
|
||
const { oneMedia, getOneMedia } = mediaStore;
|
||
|
||
useEffect(() => {
|
||
getOneMedia(id!);
|
||
}, []);
|
||
|
||
return (
|
||
<div className="w-full flex flex-col justify-center items-center gap-4">
|
||
<div className="w-full flex flex-col justify-center items-center gap-4">
|
||
<div className="flex justify-center items-center max-w-[60%]">
|
||
<MediaViewer media={oneMedia!} />
|
||
</div>
|
||
|
||
{oneMedia && (
|
||
<div className="flex-1 flex flex-col items-center gap-4 bg-[#998879] p-4 rounded-md">
|
||
<p className="text-white text-center">
|
||
Чтобы скачать файл, нажмите на кнопку ниже
|
||
</p>
|
||
<Button
|
||
variant="contained"
|
||
color="primary"
|
||
startIcon={<Download size={16} />}
|
||
component="a"
|
||
href={`${
|
||
import.meta.env.VITE_KRBL_MEDIA
|
||
}${id}/download?token=${localStorage.getItem("token")}`}
|
||
target="_blank"
|
||
>
|
||
Скачать
|
||
</Button>
|
||
</div>
|
||
)}
|
||
</div>
|
||
</div>
|
||
);
|
||
});
|