Ionic 4 Video Streaming App Template-TeeVee: Features Overview
The days of having to tune in live or buy expensive discs in order to watch your favorite shows and movies are gone. Now, you can simply boot up one of the best streaming services, and watch your favorite movies and shows on-demand. One of the most popular service overall is Netflix, offering an excellent selection of TV shows, movies and original programming.
TeeVee — An Ionic 4 Video streaming App Template is a mobile app theme/template with Netflix style UI. With this template kit, you can build a complete working video-streaming and downloading application to provide the streaming services to people at an extremely convenient way. With this template, you can create video streaming apps like Netflix, Amazon Prime, Zee5, Hotstar, etc.
This template is the front-end part, which means the screens and user interfaces (screens) are ready. You can easily change the screens, styles, and logics to suit your requirements. To make it a live app like Netflix, Amazon Prime, Zee5, Hotstar, etc. you just need to add a back-end to the app, and load your data in the back-end.
You can use the screens coded in this app, navigation between the screens and specific functions applied to buttons, etc. This saves your 100% cost and time in front-end UI development. You can simply add a back-end/server to this app template, and replace the demo data with data coming from your server. This way, you only spend time and money on back-end development and a bit on front-end data integration.
This template is made in Ionic 4 language. With Ionic 4, you can
- Create iOS and an Android app (and a Progressive Web App as well) with a single source code
- Cut your project cost and time in half (or further if you are making a PWA)
- Ensure exact same UI in iOS and Android, while following the standard UI norms
- Saves you from doing separate updates for each app (iOS and Android) in future, hence saves time
Features of this template
Screens
Login
This page can be accessed from the Signup page as the app loads. By clicking on the sign-in button at the top right of the header, after the required entries in the input field, it redirects you to the home page.The login page can be used to perform login action with username/email and password. Currently, the login is only for demo purposes.The login page also contains “Need Help” and “Signup” page navigations.
Signup — Load
This page can be accessed as the app loads. By clicking on the “Join Free For A Month” button it redirects you to the Plan page. The signup page can be used to register a user with a username/email and password. Currently, the signup is only for demo purposes. The signup page also contains “Login page “ page and “Help” page navigations.
Signup — Choose a Plan
This page can be accessed from the signup loading page by clicking on the Join Free For a Month button at the bottom of the page. This page navigates to the Plan List page.
Signup — Plan List
This page can be accessed from the choose a plan page by clicking on the set the plan button at the bottom of the page.
This page navigates to the Create an account page.
Signup — Create an account
This page can be accessed from the select a plan List page by clicking on the set the plan button at the top of the page and after selection by clicking on the continue button at the bottom of the page.
This page navigates to the Payment setup page.
Signup — Payment setup page
This page can be accessed from the create an account page by clicking on the continue button at the bottom of the page. This page contains the payment methods for the subscription of the application.
This page navigates to the Home page.
Home
This page can be accessed from the Payment setup page by clicking on the Start Membership button at the bottom of the page, or if you login to the app directly from Login screen. This page contains the previews, Top Picks, and many other categories in the vertical direction. This layout is similar to Netflix’s latest layout. Each category contains multiple types or categories in the horizontal direction and is scrollable. This page navigates to the Previews, Full video, Movie details, TV Shows, Movies and My List pages. Home page contains the nested segments and tabs in the page.
Home — Previews
This page can be accessed from the Home page by clicking on each of the preview cards image arranged in the horizontal line as scrollable content on the home page. This page contains videos previews in a story format, very similar to Netflix, Whatsapp and Instagram stories.
This page navigates to the movie information page.
Home — Categories
This is the first tab of the app. This page can be accessed after a successful login or sign up. this page contains multiple categories of video streaming arranged in horizontal rows. Each row contains scrollable items in the horizontal rows.
By clicking on any item of any particular category navigates you to the detailed information of the movie page.
Home — Categories — Movie information
This page can be accessed from the first tab of the application by clicking on any item of any particular categories.
This page contains the complete information of the movies or shows streaming on TEEVEE.
This page contains segments including
1. EPISODES
2. TRAILER
3. MORE LIKE THIS
Home — Categories — Movie information — EPISODE
This page contains all the episode of the particular season of the series or TV shows. This page also has a share icon which can be used to share the page content among the network of yours.
Home — Categories — Movie information — TRAILERS
This page contains all the upcoming movies or TV Shows trailers of the particular season of the series or TV shows. By clicking on any of the trailers, this will navigate to the video player.
Home — Categories — Movie information — More Like This
This page contains the recommended video or episodes related to your search or preferences in the application. By clicking on any recommended card, it will navigate to the movie information page.
Search — Popular Searches
This is the second tab of the application. This page contains random searches in the application. By clicking on the image of a particular item it navigates to that search item details and by clicking on the play icon of the particular image of the item it navigates to the video player.
Search — Custom Search
This page can be accessed from the second tab of the application by writing more than three words in the search box. By clicking on any item of the page will navigate to the movie or show information page.
Here this is only UI demonstration but you can integrate back-end and make it dynamic.
Coming Soon
This is the third tab of the application. This tab contains all the upcoming movie trailers and short videos. By clicking on any of the movies it plays the video.
Downloads
This is the fourth tab of the application. This tab contains the list of downloaded videos, movies or TV Shows in the application. If you don’t have any video downloaded then this will contain a button to navigate you to the downloadable contains.
This page contains a smart downloadable toggle to enable and disable smart download service.
Downloads — Smart Downloads
This page can be accessed from the downloads tab by clicking on the “Smart Download ON” button in the header of the page.
This page contains detailed information about the smart download.
More
This is the fifth and last tab of the application. This tab contains all the functions of the app including: —
- Manage Profiles
- Refer a Friend
- Notifications
- My List
- App Settings
- Help
- Sign Out
More — Manage Profiles
This is the fifth tab and the first content of this application. This page contains the currently available users for the application. Here a user can edit the user details by clicking on any of the user profile delete the user from the application.
More — Manage Profiles — Edit profile
This page can be accessed from the applications fifth tab by clicking on the manage profile and inside manage profile click on any user to edit details. Here a user can edit his/her own or other users detail in the application can save that.
More — Notifications
This can be accessed from the more page by clicking on the notifications.
This page contains the notifications of upcoming movies or episodes or Tv Series. This page contains the notification as list items in the vertical direction of the page. By clicking on any item in the navigations it will redirect you to the notified item details. To enable and disable mobile notifications, you will first need a Push notifications system in your back-end. If you are using Firebase — implementing, enabling and disabling push notification is very easy compared to a custom back-end. Read more about Firebase- Ionic push notificationhere. You will first need a Push notifications system in your back-end. If you are using Firebase — implementing, enabling and disabling push notification is very easy compared to a custom back-end. Read more about Firebase- Ionic push notification here.
More — My List
This page can be accessed from the more page in the application by clicking on the “My List”. This page contains the selected or shortlisted movies, shows, series or any item within the application shortlisted by the user.
By clicking on the list item it will navigate to the item details page.
More — App Settings
This page can be accessed by clicking on the settings on the more page. In any app, settings page plays an important role in setting user’s preferences and requirement, here user can set the preferences for Push Notification, Email Notifications,download quality, device, storage, account, data usage and many more. This page allows you to toggle some preferences and navigates to other pages to select choices. This page allows the user to select Cellular Data Usage, Allows Notifications Toggle, and download video quality. We can select and set any setting from the list of settings arranged in the vertical direction. This is the only UI for the demo purpose.
More — Help
This page can be accessed from the more page by clicking on the “Help”. This page contains all the help regarding the application account cancellation, payment method update, connection issues, etc.
Social Sharing
Providing Social Sharing features is where you can share using your app. This template does have a Social Sharing pluginfunctionality but only for demo purpose. You can enter your own share URLs, text, images etc to share whatever you want.
Video Player
This feature allows us to watch the video in ionic 4 apps very easily. It gives us the facility to play/pause, seek, show/hide controllers and many more. In our app, we have implemented video rotate functionality — if you want to watch the video in landscape mode, you would only need to click on the rotate icon in the video screen.
Payments
You can implement the payments by using any one or multiple of the following for TeeVee subscription.
- Ionic PayPal
- Ionic Stripe
- Ionic in-app purchase
- Ionic Apple Pay and Android Pay
- Ionic Razorpay
- PhonePe
- GooglePay
- AmazonPay
Conclusions
In this article, we got to know in quick fashion about all the screens and features of “Ionic 4 Netflix style video streaming app template -TeeVee” from Enappd. Speedier internet connections and an abundance of video streaming devices have accelerated the decline of traditional cable. More and more viewers are cutting the cord entirely in favor of dedicated streaming alternatives. This starter can be a very useful and time-saving starting point for freelancers and so provide great value at a fraction of the price if one goes for the custom development from scratch.
— — — — — — — — — — — — — — — — — — — — — — — — — — -
Buy “Ionic 4 Netflix style video streaming app template -TeeVee” today!!
