[core] Handle Youtube short URL

[peterpeterparker]

Description

Urls provided to the slide Youtube, for example when video Url are copied/pasted from the browser bar, are formatted automatically in order to be able to render the video (embedding Youtube video is only possible if the url is passed with a specific format).

Currently, if a short Youtube Url is used, it won't be automatically formatted, as the support for that kind of source Url is not yet implemented.

Therefore, it would be great to enhance the deckgo-youtube component to also parse automatically such Urls.

Side note

Short Url are used when web social share is used on mobile, that's why this improvement would be really appreciated.

Tech info

The component Youtube finds place in webcomponents/core/extra and is called deckgo-youtube.

The improvement should most probably be implemented in a method called formatSrc().

Get started

Interested to get involved and to try to resolve this issue? Ping me if you have any questions or need help to get started, David (@peterpeterparker or twitter.com/daviddalbusco) 😃

[silvererudite]

I am interested to work in this issue. Can this be assigned to me?

I have a confusion. By short url do you mean for ex
https://www.youtube.com/watch?v=e63Cgln6Yag
this is the browser link for a Bob Ross video and this is the link for the same video
https://youtu.be/e63Cgln6Yag if I click the share option in youtube.
And the problem is that currently links like the latter cannot be parsed ? Pls correct me if I'm wrong

[peterpeterparker]

Super cool 👍

Exactly, I mean the "https://youtu.be/e63Cgln6Yag" for short Url, sorry for not having described that correctly

Currently:

https://www.youtube.com/watch?v=e63Cgln6Yag are transformed in https://www.youtube.com/embed/e63Cgln6Yag?enablejsapi=1

Goal:

https://www.youtube.com/watch?v=e63Cgln6Yag and https://youtu.be/e63Cgln6Yag should be transformed in https://www.youtube.com/embed/e63Cgln6Yag?enablejsapi=1

[adibwoy]

There are some packages on npm which do this for you Eg: https://github.com/nodeca/url-unshort
This could handle use-cases where people use a different service to shorten urls, no? Eg: tinyurl

[peterpeterparker]

@adityarb88 it would, but actually I rather like to have agnostic components, specially in the case of our core component, when possible.

It's a bit more challenging but it's interesting to develop and sometimes more performant (in terms of not having to fetch extra unused codes)

[bokaderohit98]

@peterpeterparker how to get started with this project?

[peterpeterparker]

@bokaderohit98 what do you mean, generally speaking or regarding this issue?

[peterpeterparker]

@bokaderohit98 this project is a monorepo containing, when it comes to the frontend, multiple web components and apps. once cloned, go in the (sub)projects which interest you, install the decencies (npm install) and run (npm run start)

[bokaderohit98]

@peterpeterparker i have raised a pr for this issue. #207

[peterpeterparker]

@bokaderohit98 thx 👍

P.S.: @silvererudite Rohit was super fast to provide a PR, hope it's ok for you. if you would like to try to resolve another one, it would be my pleasure. ping me