JavaScript

As earlier stated Vue was used in buiding out the movie player interface because of its flexibility with handling data and passing this data to the DOM. In building this player, we split each part - the movie display and the thumbnail, into components to keep our code tidy and also for probable reusability.

The <video-thumbnails> component is an object containing a template, props declaration and a list of methods utilized in the compoenent.

In the component's template, we utilize the list rendering Vue directive v-for to render each thumbnail in a list with identical divs. In each thumbnail, the poster of each thumbnail is displayed and an event directive is used to specify a function to be called once the div of each thumbnail is clicked. We shall proceed to create this function.

Free Node eBook

Build your first Node apps and learn server-side JavaScript.

📧

Thank you!

You have successfully joined the Scotchy super duper web dev awesome mailing list.

In the methods object, we created a changeCurrent() function which takes an argument of the current movie clicked. In the function, a custom event - choose-movie is emitted to the parent element with a second argument which is the movie selected. So whenever a poster is clicked, the action is sent to the parent <video-thumbnails> div which is watching for any choose-movie event emitted by child components.

While props are used to pass data from parent to child components, $emit is used to send events/actions from the child component to the parent.

We created a Vue instance and mounted it on the DOM element with the app id. Next, we defined the components created and a data function which returns an object that holds state data. The data function can also be written explicitly as an object but using a function which returns an object allows room for the creation of variables in the data function. We can use these variables to manipulate the returned object's values.

In the data object, we created a key holding our API URL as its value, an empty movies array to hold the fetched movies and a current variable to hold a value for any selected movie.

To fetch the data contained, we used Axios, a promised based HTTP client. The Vue lifecycle method created(), makes a get request using Axios to our API, fetches the movie data, and assigns this data to the movies array created previously. Also, the current movie to be displayed is set to the first movie in the list of movies fetched.

To handle the selection of a new movie from the thumbnails, a function handleChangeCurrent is created. This function receives an argument of the current movie data selected and assigns the value of state data current to the selected movie data.

Notice how we passed current as props to the <video-frame> component with the source attribute. Also, the movies array is passed to the <video-thumbnails> component in the same manner and the custom event choose-movie triggers the handleChangeCurrent function.

We built a minimal movie player using Vue. Features used include props, custom events, emits, and components. While completing this, feel free to make use of other frameworks or tools, let's look forward to the next awesome challenge. Happy coding!