Allow different YouTube URL formats

tlb0 commented 7 months ago

Hi, when I used your plugin the video player did not work because the URL was not written in the right format. Since there are many ways a YouTube URL can be formatted, I slightly changed your code to allow allow almost all of these possibilities. I only added a small function. The function now allows for Links in these formats:

https://www.youtube.com/watch?v=DFYRQ_zQ-gk&feature=featured
https://www.youtube.com/watch?v=DFYRQ_zQ-gk
http://www.youtube.com/watch?v=DFYRQ_zQ-gk
//www.youtube.com/watch?v=DFYRQ_zQ-gk
www.youtube.com/watch?v=DFYRQ_zQ-gk
https://youtube.com/watch?v=DFYRQ_zQ-gk
http://youtube.com/watch?v=DFYRQ_zQ-gk
//youtube.com/watch?v=DFYRQ_zQ-gk
youtube.com/watch?v=DFYRQ_zQ-gk
https://m.youtube.com/watch?v=DFYRQ_zQ-gk
http://m.youtube.com/watch?v=DFYRQ_zQ-gk
//m.youtube.com/watch?v=DFYRQ_zQ-gk
m.youtube.com/watch?v=DFYRQ_zQ-gk
https://www.youtube.com/v/DFYRQ_zQ-gk?fs=1&hl=en_US
http://www.youtube.com/v/DFYRQ_zQ-gk?fs=1&hl=en_US
https://www.youtube.com/watch?v=aJ9h465mg50
//www.youtube.com/v/DFYRQ_zQ-gk?fs=1&hl=en_US
www.youtube.com/v/DFYRQ_zQ-gk?fs=1&hl=en_US
youtube.com/v/DFYRQ_zQ-gk?fs=1&hl=en_US
https://www.youtube.com/embed/DFYRQ_zQ-gk?autoplay=1
https://www.youtube.com/embed/DFYRQ_zQ-gk
http://www.youtube.com/embed/DFYRQ_zQ-gk
//www.youtube.com/embed/DFYRQ_zQ-gk
www.youtube.com/embed/DFYRQ_zQ-gk
https://youtube.com/embed/DFYRQ_zQ-gk
http://youtube.com/embed/DFYRQ_zQ-gk
//youtube.com/embed/DFYRQ_zQ-gk
youtube.com/embed/DFYRQ_zQ-gk
https://www.youtube-nocookie.com/embed/DFYRQ_zQ-gk?autoplay=1
https://www.youtube-nocookie.com/embed/DFYRQ_zQ-gk
http://www.youtube-nocookie.com/embed/DFYRQ_zQ-gk
//www.youtube-nocookie.com/embed/DFYRQ_zQ-gk
www.youtube-nocookie.com/embed/DFYRQ_zQ-gk
https://youtube-nocookie.com/embed/DFYRQ_zQ-gk
http://youtube-nocookie.com/embed/DFYRQ_zQ-gk
//youtube-nocookie.com/embed/DFYRQ_zQ-gk
youtube-nocookie.com/embed/DFYRQ_zQ-gk
https://youtu.be/DFYRQ_zQ-gk?t=120
https://youtu.be/DFYRQ_zQ-gk
http://youtu.be/DFYRQ_zQ-gk
//youtu.be/DFYRQ_zQ-gk
youtu.be/DFYRQ_zQ-gk
https://www.youtube.com/HamdiKickProduction?v=DFYRQ_zQ-gk

The code is based on this post. Maybe you don't like the placement of the function. Do what you want with it. :)

netlify[bot] commented 7 months ago

Deploy Preview for obsidian-media-notes ready!

Name	Link
Latest commit	bfd534f52081696d2de07dbe426d787afd0c2e35
Latest deploy log	https://app.netlify.com/sites/obsidian-media-notes/deploys/66002f5ffd5c8e0008d54583
Deploy Preview	https://deploy-preview-1--obsidian-media-notes.netlify.app
Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

jemstelos commented 6 months ago

hey @tlb0 thanks for contributing!

A couple questions:

can you share a specific link that wasn't working, to reproduce?
can you describe

Regarding the code changes:

there's already a function called getVideoId - it would be preferable to refactor that to work with any url type, instead of overwriting the mediaLink passed into the MediaFrame component
ideally we could also write a function that checks isValidMediaLink, and have that called in the condition on rendering the player

tlb0 commented 6 months ago

Hi @jemstelos , sorry for the late reply, I was really busy this week. You asked if I could reproduce the issue. In this example I used the same YouTube-video, but with a different link format. Screenshot (242) Screenshot (243) The first one works, but the second one just shows a black screen. So you said I should move the function to the get videoId function? Just to be sure that I understood you correctly, should I just place the code of the regularURL function into the getVideoId funtion? I'm asking since I am not familiar with the way you structured the code.

jemstelos commented 6 months ago

@tlb0 hey yes this is the function i'm referring to: https://github.com/jemstelos/obsidian-media-notes/blob/3b0a73767484fb731273d9cd231d275e93c11ef6/src/components/media-frame.tsx#L7

If that can be refactored with your regex to extract the right ID from different url's this should work and keep the same separation of concerns. We currently just pass in a videoId to the Youtube player component

tlb0 commented 6 months ago

Hi, I moved the regex to the getVideoId() function now. Works perfectly fine. You can ignore/delete the changes release,yml and manifest.json. I just had the check if everything works fine. Screenshot (249)

jemstelos / obsidian-media-notes