antontranelis/utopia-ui
1
0
Fork 0
mirror of https://github.com/utopia-os/utopia-ui.git synced 2025-12-13 07:46:10 +00:00
Code Issues Packages Projects Releases Wiki Activity

youtube video support

Browse Source
This commit is contained in:
Anton 2024-01-15 13:05:55 +01:00
parent cfe3b9e432
commit 56e849729d
3 changed files with 92 additions and 61 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
package-lock.json generated
View File

@ -22,6 +22,7 @@
"react-leaflet-cluster": "^2.1.0",
"react-markdown": "^9.0.1",
"react-router-dom": "^6.16.0",
"react-string-replace": "^1.1.1",
"react-toastify": "^9.1.3",
"rehype-video": "^2.0.2",
"tributejs": "^5.1.3",
@ -4890,6 +4891,14 @@
"react-dom": ">=16.8"
}
},
"node_modules/react-string-replace": {
"version": "1.1.1",
"resolved": "https://registry.npmjs.org/react-string-replace/-/react-string-replace-1.1.1.tgz",
"integrity": "sha512-26TUbLzLfHQ5jO5N7y3Mx88eeKo0Ml0UjCQuX4BMfOd/JX+enQqlKpL1CZnmjeBRvQE8TR+ds9j1rqx9CxhKHQ==",
"engines": {
"node": ">=0.12.0"
}
},
"node_modules/react-toastify": {
"version": "9.1.3",
"resolved": "https://registry.npmjs.org/react-toastify/-/react-toastify-9.1.3.tgz",

1
package.json
View File

@ -55,6 +55,7 @@
"react-leaflet-cluster": "^2.1.0",
"react-markdown": "^9.0.1",
"react-router-dom": "^6.16.0",
"react-string-replace": "^1.1.1",
"react-toastify": "^9.1.3",
"rehype-video": "^2.0.2",
"tributejs": "^5.1.3",

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

@ -16,7 +16,7 @@ export const TextView = ({ item }: { item?: Item }) => {
if (item && item.text) replacedText = fixUrls(item.text);
replacedText = replacedText.replace(/(?<!\]?\()https?:\/\/[^\s\)]+(?!\))/g, (url) => {
let shortUrl = url;
let shortUrl = url;
if (url.match('^https:\/\/')) {
shortUrl = url.split('https://')[1];
}
@ -26,70 +26,75 @@ export const TextView = ({ item }: { item?: Item }) => {
return `[${shortUrl}](${url})`
})
replacedText = replacedText.replace(mailRegex, (url) => {
return `[${url}](mailto:${url})`
})
replacedText = replacedText.replace(mailRegex, (url) => {
return `[${url}](mailto:${url})`
})
replacedText = replacedText.replace(hashTagRegex, (match) => {
return `[${match}](${match})`
})
replacedText = replacedText.replace(hashTagRegex, (match) => {
return `[${match}](${match})`
})
const CustomH1 = ({ children }) => (
<h1 className="tw-text-xl tw-font-bold">{children}</h1>
);
const CustomH2 = ({ children }) => (
<h2 className="tw-text-lg tw-font-bold">{children}</h2>
);
const CustomH3 = ({ children }) => (
<h3 className="tw-text-base tw-font-bold">{children}</h3>
);
const CustomH4 = ({ children }) => (
<h4 className="tw-text-base tw-font-bold">{children}</h4>
);
const CustomH5 = ({ children }) => (
<h5 className="tw-text-sm tw-font-bold">{children}</h5>
);
const CustomH6 = ({ children }) => (
<h6 className="tw-text-sm tw-font-bold">{children}</h6>
);
const CustomParagraph = ({ children }) => (
<p className="!tw-my-1">{children}</p>
);
const CustomUnorderdList = ({ children }) => (
<ul className="tw-list-disc tw-list-inside">{children}</ul>
);
const CustomOrderdList = ({ children }) => (
<ol className="tw-list-decimal tw-list-inside">{children}</ol>
);
const CustomImage = ({ alt, src, title }) => (
const CustomH1 = ({ children }) => (
<h1 className="tw-text-xl tw-font-bold">{children}</h1>
);
const CustomH2 = ({ children }) => (
<h2 className="tw-text-lg tw-font-bold">{children}</h2>
);
const CustomH3 = ({ children }) => (
<h3 className="tw-text-base tw-font-bold">{children}</h3>
);
const CustomH4 = ({ children }) => (
<h4 className="tw-text-base tw-font-bold">{children}</h4>
);
const CustomH5 = ({ children }) => (
<h5 className="tw-text-sm tw-font-bold">{children}</h5>
);
const CustomH6 = ({ children }) => (
<h6 className="tw-text-sm tw-font-bold">{children}</h6>
);
const CustomParagraph = ({ children }) => (
<p className="!tw-my-1">{children}</p>
);
const CustomUnorderdList = ({ children }) => (
<ul className="tw-list-disc tw-list-inside">{children}</ul>
);
const CustomOrderdList = ({ children }) => (
<ol className="tw-list-decimal tw-list-inside">{children}</ol>
);
const CustomImage = ({ alt, src, title }) => (
<img
className="max-w-full rounded-lg shadow-md"
src={src}
alt={alt}
title={title}
/>
);
const CustomExternalLink = ({ href, children }) => (
<a
href={href}
target="_blank"
rel="noopener noreferrer"
>
{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={(e) => {
e.stopPropagation();
addFilterTag(tag!);
// map.fitBounds(items)
// map.closePopup();
}}>{children}</a>
);
);
const CustomExternalLink = ({ href, children }) => (
<a
href={href}
target="_blank"
rel="noopener noreferrer"
>
{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={(e) => {
e.stopPropagation();
addFilterTag(tag!);
// map.fitBounds(items)
// map.closePopup();
}}>{children}</a>
);
const isSpecialYouTubeLink = (url) => {
return /(?<=!\()[^)]+(?=\))/g.test(url);
};
return (
@ -97,6 +102,22 @@ const CustomHashTagLink = ({ children, tag, item }) => (
<Markdown rehypePlugins={[rehypeVideo]} components={{
p: CustomParagraph,
a: ({ href, children }) => {
// Prüft, ob der Link ein YouTube-Video ist
const isYouTubeVideo = href?.startsWith('https://www.youtube.com/watch?v=');
if (isYouTubeVideo) {
const videoId = href?.split('v=')[1].split('&')[0]; // Extrahiert die Video-ID aus der URL
const youtubeEmbedUrl = `https://www.youtube-nocookie.com/embed/${videoId}`;
return (
<iframe className='tw-w-full'
src={youtubeEmbedUrl}
allowFullScreen
/>
);
}
if (href?.startsWith("#")) {
const tag = tags.find(t => t.id.toLowerCase() == href.slice(1).toLowerCase())
return <CustomHashTagLink tag={tag} item={item}>{children}</CustomHashTagLink>;