JAVASCRIPT

How to build your own Youtube – Part 10


Introduction: If you missed the earlier parts, in this series we are covering how to build your own YouTube clone, Click here.

Note: You need to have at least some prior experience with client-side Javascript frameworks  and Node.js to get the most out of this tutorial.

In the previous post, we looked at Adaptive bitrate streaming – HLS and MPEG-DASH, creating  mpd and streaming files with various transformations, creating an mpd master playlist file, creating animated GIFs and webP files and delivering  animated GIFs and webP files.

In this post, we’ll be looking at how to add number of views and comment functionality to Yourtube.

Add Number of Views

On Youtube, you can see the total number of views that each video has accrued over time. We will implement the same functionality in our Yourtube app right now!

Step 1

Open up your views/pages/home.client.view.html. We will wrap the video divs in an anchor tag like so:

Step 2

Open up server/models and create a new View model like so:

view.server.model.js

Step 3

Open up server/controllers and create a new View controller like so:

view.server.controller.js

If the video has never been viewed before, it goes ahead to create a new record for it, then starts to update the view counter on the second HTTP request.

Step 4

Open up server/routes.js and add these routes like so:

First route to grab each view hit and send to the database. Second route to retrieve the number of views for each video.

Step 5

Open up public/js/services and create a new View service like so:

view.client.service.js

Step 6

Open up public/js/controllers/transform.client.controller.js and update the file like so:

What we did was to inject the View service, call the increment method of the View service and also the retrieveEachView  method.  As the app retrieves the details of each video, it increments the views on that video.

Now, open up index.html and reference the view service like so:

Step 7

Open up public/views/pages/edit_video.client.view.html and add this just before the form like so:

Now when you click on a video from the home page, it should direct you to a page where you can edit the video details. On that page, you will be able to see the number of views for that video like so:

screen shot 2016-08-01 at 5 14 18 pm

Viola!!!, now users can see the number of views a video has!

Add Comment Functionality

This is probably the simplest functionality we will add to the Yourtube platform. There are two ways of handling this:

  1. Create comments functionality from scratch and store all the comments on a video in your database.
  2. Outsource the functionality to a third-party comment system and let the third-party comment service store all the comments and take away that load from our server.

We’ll go with No 2. It’s easier and also scalable that way!

The third-party comment service we’ll use is Disqus. If you haven’t created an admin account on it before, please go ahead and create one now.

Step 1:

There is a very nice angular directive that serves as a wrapper for disqus integration. Let’s install the directive like so:

Now, open up public/js/app.js and inject the Disqus module like so:

angularUtils.directives.dirDisqus is the module we just injected.

Step 2:

Open up public/views/pages/edit_video.client.view.html and add this just after the Trimmed Video div like so:

This is the Disqus directive dir-disqus with a unique identifier, title and url so that each video will have different unique comments section else the comment data will overlap.

Now, reload the edit video page and you should see the Disqus comment box show up like so:

screen shot 2016-08-01 at 5 14 35 pm

Now, you can easily inspect the disqus element and add styles to the app that will make it look very attractive and also provide nice margins by the sides.

Conclusion

In this post, we have looked at adding the number of views and the ability for users to comment on Yourtube.

It’s really been an exciting journey creating a mini-clone of Youtube. I hope you have been able to learn a lot of new concepts. Once again, Cloudinary is a great service for video uploads and manipulation. They also provide an awesome image storage and manipulation service. You can check out their documentation for more info.

The source code for this project is on GitHub.

You can also check out the Project Management app series I covered using Laravel 5.

If you have any questions or observations, please drop your thoughts in the comment section below :smile:

PROSPER OTEMUYIWA

About PROSPER OTEMUYIWA

Food Ninja, Code Slinger, Technical Trainer, Accidental Writer, Open Source Advocate and Developer Evangelist.