Create an infinite scrolling wall of holiday videos with Laravel 8

Today we'll learn how to grab video data from api.video, add it to a database, then use that information to create an infinite wall of videos that you can keep scrolling through.

For this project, we're going to also use Laravel 8.

Prerequisites

• api.video account - Register here
• Laravel 8 installed
• Project repository - https://github.com/apivideo/api.video-php-client/tree/main/examples/laravel/infinite_scroll
• api.video PHP client
• Symfony HTTP client - composer require symfony/http-client
• composer - https://getcomposer.org/

What you'll be doing

You have three tasks for this project:

1. Retrieve your data from api.video
2. Add your data to your database
3. Set up your page to show the videos in an infinite scroll

Retrieve your data

You need to collect some data from api.video about the videos you're going to use. To keep it simple, for this walkthrough I'm just retrieving videos tagged 'holiday' and keeping the title, video ID, and MP4 link for each one. You can retain any information you might want to use or display, the most important thing is the MP4 link.

For this part of the project, I didn't use Laravel 8, I just set up a php file with my code and used composer.

After you run the code, you'll have a list of all videos from your account that you tagged holiday in a .csv file. Save the file, we'll use it for the next part of our project.

Set up your project

Now it's time to set up our Laravel 8 project. We'll need this before we can do anything with our database. These instructions are for Macs.

1. Make a new project by opening a terminal in the place where you want to store your project by typing laravel new holiday.

2. Install the api.video PHP client. composer require api-video/php-api-client

3. Install the Symfony HTTP client. composer require symfony/http-client

4. Go into your project and find the .env file. For the section that starts DB_ delete every DB_ item except for DB_CONNECTION. Set DB_CONNECTION to sqlite. DB_CONNECTION=sqlite

5. Create a database table for the .csv file we made. php artisan make:migration create_holidays_table

6. Go into your project in the database folder and open the migrations folder. There should be a .php file with a timestamp at the start followed by the name of the table you just created in the terminal. Open this file and paste in this code:

7. Migrate your new table. php artisan:migrate

8. Now we're going to create two models. The first is for handling infinite scroll. php artisan make:model Model/InfiniteScroll

9. After you've made this model, go find it in your project and paste in this code:

10. The second model we're going to make is for setting up our Holidays table contents. php artisan make:model Model/Holiday

11. Navigate to your new Holiday model and paste in this code:

12. Let's create a seeder that we can use to populate our new table using our .csv file. php artisan make:seeder HolidaySeeder

13. Take your .csv file and place in the data folder for your database.

14. Go to the seeders folder and open your HolidaySeeder.php file. Paste in this code:

15. Now we can run our seeder! php artisan db:seed --class=HolidaySeeder This should populate your database with the information from your .csv file. We're ready to set up our page to display our video collection.

Display videos

In this section we'll set up routes, a controller, and the page that will display videos whose links are retrieved from our database.

1. We're going to add a new route, but before we do that, navigate to RouteServiceProvider.php. Scroll down to the line that reads protected $namespace = 'App\\Http\\Controllers'; - it's probably commented out. Remove the commenting so it is active again.

2. Navigate to routes\web.php. Add a new route Route::get('/load-more-data', 'VideoController@InfiniteScroll' );

3. Make a new controller. php artisan make:controller VideoController

4. Navigate to Controllers and open your VideoController file. Paste in this code:

5. Now let's set up our blade file. Navigate to views and craete a new blade file called holidayView.blade.php. Open the new file and paste this in:

6. If you don't have a data.blade.php file, create one in the same folder as your other blade files. Open data.blade.php and paste in this code:

Run your project

Open a terminal in your project and type php artisan serve. You should be able to see a list of scrolling videos!

If you have any questions about this tutorial, or would like to share what you've built, please join our community forum.