Create a Dynamic Livewire Embed Component

Hello friends, Tony here. Welcome. In today's video, I'm going to demo you another project I created with the cloud code and this is not a project. I just created one feature which is the embed component and is with Laravel and Lewire. So I'm going to sign up first and then if I if I navigate / embed I have created an URL for this. Now if we want to embed we just paste the URL here and it's going to preview. So enter a URL above and the preview an embed and support that is YouTube Vmail and Spotify. And for example I have open here the Vmail. I'm going to copy just the URL here. We can come here and paste that URL and say preview. And yeah, it's going to preview the file from Vimeo. As you can see, also if I go to YouTube and just copy this one. Come here. Replace now with the YouTube. Click the preview. Now we have the YouTube video. This is with the full URL. So YouTube come watch. If I refresh uh and just come here, I'm going to copy the video URL and then paste it right here. Now we have YouTube slash and ID. And if I say preview, the same thing is going to preview this this one. Also for the Spotify, if you go to Spotify, I'm going to copy for example. Let's copy this. Copy link the song and come here. paste that in. Click the preview and it's going to preview this one. So can preview. Okay. Now let's show you the code which I come here. I'm going to open first the web routes and we have the route live wire embed pages embed here and you can find also in the views pages embed.php. Here we have a class and HTML. Now let's see the class. First we have a string URL and then preview URL and then the preview method. First, it's going to validate the URL to be required URL and new embedable URL which is in the app rules embedable URL and it's going to work with this embed manager which is I'm going to show you but it's going to check if not embed app embed manager class supports passing the value is going to fail the attribute must be supported embed URL like YouTube, Vimeo or Spotify. Okay. So let's go again to embed plate and it's going to validate. Then it's going to say this preview URL to be as this URL here and computed supported providers returning the an array with We have the PL setting and text embed preview. Paste uh YouTube Vmail Spotify URL to preview. It's embed. And then we have a form with the input. So this is a form and a flux button to type submit and or submit preview. So it's going to call this method. Then we're going to show the error for the URL if we don't have a URL. So let's just say remove this preview. And yeah, we have the error. Then it's going to check if we have a preview URL. It's going to paste this live wire embed component which we have here. Pass in the URL and also the wire key. Now let's open this embed blade liveware component public string here we have public string URL and then provider if empty this URL is going to return null otherwise going to return app embed using that embed manager resolve pass in this URL and then if this provider is going to add a div with style aspect ratio and then the i frame with source of this provider embed URL class allow full screen allow autoplay loading lazy and title this provider name as if the URL is going to say once imported embed URL okay now let's see up here we have the in the app we have the embed and then we have embed manager what we saw earlier and we have this resolve and also support resolve is going to receive the URL which is a string and then it's going to return the provider said to make for each this providers as provider class because here we have a protected providers which is an array with YouTube class vmail and Spotify I'm going to show you right now and it's going to make for each these providers as provider class and if provider class detect passing the URL we have here is going to return new provider class in the URL otherwise it's going to return null and also supports is going to receive the URL and it's going to return a boolean and say this resolve pass in the URL is not able to null now let's open the YouTube vimeo and Spotify and here we have providers Spotify provider we detect method receiving the URL and is going to return boolean pretty much openspotify.com and that URL pretty much match open Spotify comb episode show type and id and then it's going to return https open Spotify com/bed slash the type slash the id aspect ratio 4x1 and name Spotify then we have the Vmail provider private read only string URL detect receiving the URL and pragmasvmail.com URL embed URL pragmatv com video this URL matches and playervo.com/vide/ matches one or an empty string aspect ratio six 16 by9 and name vmail then we have a YouTube the same We have also the constructs provider and here we have public function embed URL aspect ratio and name. Okay. So embed URL aspect ratio and the name. Okay friends this is all about this video what I wanted to show you an embed component with liveware and Laravel which can work with YouTube vmail and Spotify but yeah you can add more if you like. Now, if you like such a videos, don't forget to subscribe to my channel, like the video, share with your friends, and I'm going to see you in another one. All the best, and thank you very much.