fix inconsistency in url handling and don't let parseEmbedURL throw

This commit is contained in:
keyan 2024-06-04 12:10:37 -05:00
parent ea97fbf4a4
commit 2775b49ce7
2 changed files with 70 additions and 57 deletions

View File

@ -259,39 +259,35 @@ export default memo(function Text ({ rel, imgproxyUrls, children, tab, itemId, o
paddingRight: '15px' paddingRight: '15px'
} }
try { const { provider, id, meta } = parseEmbedUrl(href)
const { provider, id, meta } = parseEmbedUrl(href) // Youtube video embed
// Youtube video embed if (provider === 'youtube') {
if (provider === 'youtube') { return (
return ( <div style={videoWrapperStyles}>
<div style={videoWrapperStyles}> <YouTube
<YouTube videoId={id} className={styles.videoContainer} opts={{
videoId={id} className={styles.videoContainer} opts={{ playerVars: {
playerVars: { start: meta?.start || 0
start: meta?.start || 0 }
} }}
}} />
</div>
)
}
// Rumble video embed
if (provider === 'rumble') {
return (
<div style={videoWrapperStyles}>
<div className={styles.videoContainer}>
<iframe
title='Rumble Video'
allowFullScreen=''
src={meta?.href}
/> />
</div> </div>
) </div>
} )
// Rumble video embed
if (provider === 'rumble') {
return (
<div style={videoWrapperStyles}>
<div className={styles.videoContainer}>
<iframe
title='Rumble Video'
allowFullScreen=''
src={meta?.href}
/>
</div>
</div>
)
}
} catch {
// ignore invalid URLs
} }
// assume the link is an image which will fallback to link if it's not // assume the link is an image which will fallback to link if it's not

View File

@ -1,10 +1,23 @@
export function ensureProtocol (value) { export function ensureProtocol (value) {
if (!value) return value if (!value) return value
value = value.trim() value = value.trim()
if (!/^([a-z0-9]+:\/\/|mailto:)/.test(value)) { let url
value = 'http://' + value
try {
url = new URL(value)
} catch {
try {
url = new URL('http://' + value)
} catch {
return value
}
} }
return value
// remove trailing slash if new URL() added it
if (url.href.endsWith('/') && !value.endsWith('/')) {
return url.href.slice(0, -1)
}
return url.href
} }
export function isExternal (url) { export function isExternal (url) {
@ -63,38 +76,42 @@ export function parseInternalLinks (href) {
} }
export function parseEmbedUrl (href) { export function parseEmbedUrl (href) {
const { hostname, pathname, searchParams } = new URL(href) try {
const { hostname, pathname, searchParams } = new URL(href)
if (hostname.endsWith('youtube.com') && pathname.includes('/watch')) { if (hostname.endsWith('youtube.com') && pathname.includes('/watch')) {
return { return {
provider: 'youtube', provider: 'youtube',
id: searchParams.get('v'), id: searchParams.get('v'),
meta: { meta: {
href, href,
start: searchParams.get('t') start: searchParams.get('t')
}
} }
} }
}
if (hostname.endsWith('youtu.be') && pathname.length > 1) { if (hostname.endsWith('youtu.be') && pathname.length > 1) {
return { return {
provider: 'youtube', provider: 'youtube',
id: pathname.slice(1), // remove leading slash id: pathname.slice(1), // remove leading slash
meta: { meta: {
href, href,
start: searchParams.get('t') start: searchParams.get('t')
}
} }
} }
}
if (hostname.endsWith('rumble.com') && pathname.includes('/embed')) { if (hostname.endsWith('rumble.com') && pathname.includes('/embed')) {
return { return {
provider: 'rumble', provider: 'rumble',
id: null, // not required id: null, // not required
meta: { meta: {
href href
}
} }
} }
} catch {
// ignore
} }
// Important to return empty object as default // Important to return empty object as default