Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix youtube embed doesn't render if url has more query params #152

Merged
merged 4 commits into from
Dec 15, 2023
Merged

Fix youtube embed doesn't render if url has more query params #152

Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
95f1755
fix: update youtube embed link so it now gets the id in better way
teodorus-nathaniel Dec 15, 2023
979127f
fix: remove dummy data
teodorus-nathaniel Dec 15, 2023
db6652a
fix: improve vimeo link parser
teodorus-nathaniel Dec 15, 2023
63277a6
refactor: move regex to be outside of each func
teodorus-nathaniel Dec 15, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
32 changes: 20 additions & 12 deletions src/components/posts/embed/Embed.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,13 +16,30 @@ const componentMap: {
youtube: YoutubeEmbed,
}

const YOUTUBE_REGEX = /^.*(youtu\.be\/|v\/|u\/\w\/|embed\/|watch\?v=|\&v=)([^#\&\?]*).*/
export function getYoutubeVideoId(youtubeLink: string) {
const match = youtubeLink.match(YOUTUBE_REGEX)
if (match && match[2].length == 11) {
return match[2]
} else {
return undefined
}
}

const VIMEO_REGEX = /^.*(vimeo\.com\/)((channels\/[A-z]+\/)|(groups\/[A-z]+\/videos\/))?([0-9]+)/
export function getVimeoVideoId(vimeoLink: string) {
const parseUrl = vimeoLink.match(VIMEO_REGEX)
if (!parseUrl) return undefined
return parseUrl[5]
}

const getEmbedUrl = (url: string, embed: string | undefined) => {
if (!embed) return

const urls: Record<string, string> = {
vimeo: `https://player.vimeo.com/video/${url.split('/').pop()}`,
youtube: `https://www.youtube.com/embed/${url.split('=').pop()}`,
'youtu.be': `https://www.youtube.com/embed/${url.split('/').pop()}`,
vimeo: `https://player.vimeo.com/video/${getVimeoVideoId(url)}`,
youtube: `https://www.youtube.com/embed/${getYoutubeVideoId(url)}`,
'youtu.be': `https://www.youtube.com/embed/${getYoutubeVideoId(url)}`,
soundcloud: `https://w.soundcloud.com/player/
?url=${url}&amp;auto_play=false&amp;hide_related=true&amp;show_comments=true&amp;show_user=true&amp;show_reposts=false&amp;visual=true`,
}
Expand Down Expand Up @@ -61,15 +78,6 @@ const Embed = ({ link, className }: EmbedProps) => {
)
}

export function getYoutubeVideoId(youtubeLink: string) {
const regExp = /^.*(youtu\.be\/|v\/|u\/\w\/|embed\/|watch\?v=|\&v=)([^#\&\?]*).*/
const match = youtubeLink.match(regExp)
if (match && match[2].length == 11) {
return match[2]
} else {
return undefined
}
}
function YoutubeEmbed({ src }: { src: string }) {
const youtubeId = useMemo(() => getYoutubeVideoId(src), [src])

Expand Down
Loading