mirror of
https://github.com/usememos/memos.git
synced 2025-06-05 22:09:59 +02:00
feat: support display video (#558)
This commit is contained in:
@@ -21,25 +21,34 @@ const MemoResources: React.FC<Props> = (props: Props) => {
|
||||
...getDefaultProps(),
|
||||
...props,
|
||||
};
|
||||
const imageList = resourceList.filter((resource) => resource.type.includes("image"));
|
||||
const otherResourceList = resourceList.filter((resource) => !resource.type.includes("image"));
|
||||
const availableResourceList = resourceList.filter((resource) => resource.type.startsWith("image") || resource.type.startsWith("video"));
|
||||
const otherResourceList = resourceList.filter((resource) => !availableResourceList.includes(resource));
|
||||
|
||||
const handlPreviewBtnClick = (resource: Resource) => {
|
||||
const resourceUrl = `${window.location.origin}/o/r/${resource.id}/${resource.filename}`;
|
||||
window.open(resourceUrl);
|
||||
};
|
||||
|
||||
const imgUrls = imageList.map((resource) => {
|
||||
return `/o/r/${resource.id}/${resource.filename}`;
|
||||
});
|
||||
const imgUrls = availableResourceList
|
||||
.filter((resource) => resource.type.startsWith("image"))
|
||||
.map((resource) => {
|
||||
return `/o/r/${resource.id}/${resource.filename}`;
|
||||
});
|
||||
|
||||
return (
|
||||
<div className={`resource-wrapper ${className || ""}`}>
|
||||
{imageList.length > 0 && (
|
||||
{availableResourceList.length > 0 && (
|
||||
<div className={`images-wrapper ${style}`}>
|
||||
{imageList.map((resource, index) => (
|
||||
<Image className="memo-img" key={resource.id} imgUrls={imgUrls} index={index} />
|
||||
))}
|
||||
{availableResourceList.map((resource) => {
|
||||
const url = `/o/r/${resource.id}/${resource.filename}`;
|
||||
if (resource.type.startsWith("image")) {
|
||||
return (
|
||||
<Image className="memo-resource" key={resource.id} imgUrls={imgUrls} index={imgUrls.findIndex((item) => item === url)} />
|
||||
);
|
||||
} else {
|
||||
return <video className="memo-resource" controls key={resource.id} src={url} />;
|
||||
}
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
<div className="other-resource-wrapper">
|
||||
|
@@ -4,8 +4,8 @@
|
||||
> .images-wrapper {
|
||||
@apply w-full flex mt-2 pb-1;
|
||||
|
||||
> .memo-img {
|
||||
@apply w-auto h-auto shrink-0 grow-0 cursor-pointer;
|
||||
> .memo-resource {
|
||||
@apply w-auto h-auto shrink-0 grow-0 cursor-pointer rounded;
|
||||
|
||||
> img {
|
||||
@apply rounded hover:shadow;
|
||||
@@ -15,8 +15,8 @@
|
||||
&.row {
|
||||
@apply flex-row justify-start items-start overflow-x-auto overflow-y-hidden;
|
||||
|
||||
> .memo-img {
|
||||
@apply max-w-xs h-auto mr-2 last:mr-0;
|
||||
> .memo-resource {
|
||||
@apply max-w-xs h-auto max-h-40 mr-2 last:mr-0;
|
||||
|
||||
> img {
|
||||
@apply w-auto max-h-40;
|
||||
@@ -27,7 +27,7 @@
|
||||
&.col {
|
||||
@apply flex-col justify-start items-start;
|
||||
|
||||
> .memo-img {
|
||||
> .memo-resource {
|
||||
@apply w-full h-auto mb-2 last:mb-0;
|
||||
|
||||
> img {
|
||||
|
Reference in New Issue
Block a user