antontranelis/utopia-ui
1
0
Fork 0
mirror of https://github.com/utopia-os/utopia-ui.git synced 2026-01-15 01:14:40 +00:00
Code Issues Packages Projects Releases Wiki Activity

basic video support

Browse Source
This commit is contained in:
Anton 2024-01-12 20:40:55 +01:00
parent 5b699b7d74
commit 40cec9c674
3 changed files with 32 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
package-lock.json generated
View File

@ -21,6 +21,7 @@
"react-markdown": "^9.0.1",
"react-router-dom": "^6.16.0",
"react-toastify": "^9.1.3",
"rehype-video": "^2.0.2",
"tributejs": "^5.1.3",
"tw-elements": "^1.0.0"
},
@ -28,7 +29,6 @@
"@types/leaflet": "^1.7.11",
"@types/react": "^18.0.14",
"@types/react-dom": "^18.0.5",
"@types/react-helmet": "^6.1.6",
"@types/react-leaflet": "^2.8.2",
"@typescript-eslint/eslint-plugin": "^5.38.1",
"@typescript-eslint/parser": "^5.38.1",
@ -382,15 +382,6 @@
"@types/react": "*"
}
},
"node_modules/@types/react-helmet": {
"version": "6.1.6",
"resolved": "https://registry.npmjs.org/@types/react-helmet/-/react-helmet-6.1.6.tgz",
"integrity": "sha512-ZKcoOdW/Tg+kiUbkFCBtvDw0k3nD4HJ/h/B9yWxN4uDO8OkRksWTO+EL+z/Qu3aHTeTll3Ro0Cc/8UhwBCMG5A==",
"dev": true,
"dependencies": {
"@types/react": "*"
}
},
"node_modules/@types/react-leaflet": {
"version": "2.8.2",
"resolved": "https://registry.npmjs.org/@types/react-leaflet/-/react-leaflet-2.8.2.tgz",
@ -4870,6 +4861,21 @@
"url": "https://github.com/sponsors/mysticatea"
}
},
"node_modules/rehype-video": {
"version": "2.0.2",
"resolved": "https://registry.npmjs.org/rehype-video/-/rehype-video-2.0.2.tgz",
"integrity": "sha512-iT4kOiixMn+ytjpKRsBo/o+3ws9+q+eIyrzUlOhuL97buOO38ayEog2NhxR3R+g6J2lEOTK66XtHVfvzQ3H7Ug==",
"dependencies": {
"unified": "^11.0.0",
"unist-util-visit": "^5.0.0"
},
"engines": {
"node": ">=16"
},
"funding": {
"url": "https://jaywcjlove.github.io/#/sponsor"
}
},
"node_modules/remark-parse": {
"version": "11.0.0",
"resolved": "https://registry.npmjs.org/remark-parse/-/remark-parse-11.0.0.tgz",

2
package.json
View File

@ -20,7 +20,6 @@
"@types/leaflet": "^1.7.11",
"@types/react": "^18.0.14",
"@types/react-dom": "^18.0.5",
"@types/react-helmet": "^6.1.6",
"@types/react-leaflet": "^2.8.2",
"@typescript-eslint/eslint-plugin": "^5.38.1",
"@typescript-eslint/parser": "^5.38.1",
@ -55,6 +54,7 @@
"react-markdown": "^9.0.1",
"react-router-dom": "^6.16.0",
"react-toastify": "^9.1.3",
"rehype-video": "^2.0.2",
"tributejs": "^5.1.3",
"tw-elements": "^1.0.0"
}

38
src/Components/Map/Subcomponents/ItemPopupComponents/TextView.tsx
View File

@ -5,18 +5,17 @@ import { useAddFilterTag } from '../../hooks/useFilter';
import { hashTagRegex } from '../../../../Utils/HashTagRegex';
import { fixUrls, mailRegex } from '../../../../Utils/ReplaceURLs';
import Markdown from 'react-markdown'
import rehypeVideo from 'rehype-video';
export const TextView = ({ item }: { item?: Item }) => {
const tags = useTags();
const addFilterTag = useAddFilterTag();
let replacedText;
console.log(item?.text);
let replacedText;
if (item && item.text) replacedText = fixUrls(item.text);
replacedText = replacedText.replace(/(?<!\]\()https?:\/\/[^\s\)]+(?!\))/g, (url) => {
replacedText = replacedText.replace(/(?<!\]?\()https?:\/\/[^\s\)]+(?!\))/g, (url) => {
let shortUrl = url;
if (url.match('^https:\/\/')) {
shortUrl = url.split('https://')[1];
@ -25,24 +24,16 @@ export const TextView = ({ item }: { item?: Item }) => {
shortUrl = url.split('http://')[1];
}
return `[${shortUrl}](${url})`
})
console.log(replacedText);
})
replacedText = replacedText.replace(mailRegex, (url) => {
return `[${url}](mailto:${url})`
})
console.log(replacedText);
replacedText = replacedText.replace(hashTagRegex, (match) => {
return `[${match}](${match})`
})
console.log(replacedText);
const CustomH1 = ({ children }) => (
<h1 className="tw-text-xl tw-font-bold">{children}</h1>
@ -89,23 +80,25 @@ const CustomExternalLink = ({ href, children }) => (
</a>
);
const CustomHashTagLink = ({ children, tag, item }) => (
<a style={{ color: tag ? tag.color : '#faa' , fontWeight: 'bold', cursor: 'pointer' }} key={tag ? tag.id+item!.id : item.id} onClick={() => {
<a
style={{ color: tag ? tag.color : '#faa' , fontWeight: 'bold', cursor: 'pointer' }}
key={tag ? tag.id+item!.id : item.id}
onClick={(e) => {
e.stopPropagation();
addFilterTag(tag!);
// map.fitBounds(items)
// map.closePopup();
}}>{children}</a>
);
return (
<Markdown components={{
//@ts-ignore
<Markdown rehypePlugins={[rehypeVideo]} components={{
p: CustomParagraph,
a: ({ href, children }) => {
if (href?.startsWith("#")) {
console.log(href);
const tag = tags.find(t => t.id.toLowerCase() == href.slice(1).toLowerCase())
console.log(tag);
if (href?.startsWith("#")) {
const tag = tags.find(t => t.id.toLowerCase() == href.slice(1).toLowerCase())
return <CustomHashTagLink tag={tag} item={item}>{children}</CustomHashTagLink>;
} else {
return (
@ -129,5 +122,4 @@ const CustomHashTagLink = ({ children, tag, item }) => (
}
}