diff --git a/packages/app/src/Element/LinkPreview.tsx b/packages/app/src/Element/LinkPreview.tsx
index 83512264..e6d5881f 100644
--- a/packages/app/src/Element/LinkPreview.tsx
+++ b/packages/app/src/Element/LinkPreview.tsx
@@ -4,6 +4,7 @@ import { CSSProperties, useEffect, useState } from "react";
import Spinner from "Icons/Spinner";
import SnortApi, { LinkPreviewData } from "SnortApi";
import useImgProxy from "Hooks/useImgProxy";
+import { MediaElement } from "Element/MediaElement";
async function fetchUrlPreviewInfo(url: string) {
const api = new SnortApi();
@@ -21,8 +22,12 @@ const LinkPreview = ({ url }: { url: string }) => {
useEffect(() => {
(async () => {
const data = await fetchUrlPreviewInfo(url);
- if (data && data.image) {
- setPreview(data);
+ if (data) {
+ const type = data.og_tags?.find(a => a[0].toLowerCase() === "og:type");
+ const canPreviewType = type?.[1].startsWith("image") || type?.[1].startsWith("video") || false;
+ if (canPreviewType || data.image) {
+ setPreview(data);
+ }
} else {
setPreview(null);
}
@@ -36,14 +41,37 @@ const LinkPreview = ({ url }: { url: string }) => {
);
- const backgroundImage = preview?.image ? `url(${proxy(preview?.image)})` : "";
- const style = { "--img-url": backgroundImage } as CSSProperties;
+ function previewElement() {
+ const type = preview?.og_tags?.find(a => a[0].toLowerCase() === "og:type")?.[1];
+ if (type?.startsWith("video")) {
+ const urlTags = ["og:video:secure_url", "og:video:url", "og:video"];
+ const link = preview?.og_tags?.find(a => urlTags.includes(a[0].toLowerCase()))?.[1];
+ const videoType = preview?.og_tags?.find(a => a[0].toLowerCase() === "og:video:type")?.[1] ?? "video/mp4";
+ if (link) {
+ return