Code Challenge: Build A Movie Player
The Challenge is to build a movie player with image thumbnails with a playlist section and a separate section to play the selected video.
Feel free to add in any other cool tweaks or features.
Tech Requirements:
- Any Tech Stack
- But Angular 2+ is preferable.
Create an api that fetch's the video url and thumbnail from youtube and return the list.
Refer to below sample API URL: https://api-uat.greatmanagerinstitute.com/api/v2/getTrailerList
- A Playlist Section with all the available videos from the API.
- A Video Player Section that plays the selected video
- Load the newly selected video from the playlist to the video player
- The API requires a
Source
header so use a request interceptor to send it on every request - The Angular Components should communicate with each other using a Parent Child Relation and not Events. (For Ex: The Playlist and Video Player should be 2 different components )
- Add in a custom transform pipe to convert the Title of the video to Uppercase
- Avoid using any kind of HTML/CSS framework.
- A Carousel for scrolling through the playlist
- Toast Message for an Error on Bad Requests or Incorrect Request Params
- Get to know your Knowledge of dealing with an External API
- Visualisation of Data from that API
- Handling HTML DOM Events
- Understanding Component communication
- Know your Expertise of HTML/CSS