There is so much content on YouTube and while YouTube has its own TV app, but it's not curated well for browsing categories of videos well. (YouTube has restrictions on what apps and websites can do with its videos.) Vintillect created apps to make it easy for smart TV viewers to browse content using their remote control.
Two main TV apps were created using Vue.js and the tv data objects were hosted on Firebase. During prototype testing with various smart TV brands, the apps had to be downgraded to use jQuery instead of Vue.js . Samsung and LG only supported jQuery instead of React.js and Vue.js .
It was tested on real TV devices from the major tv brands, and while it worked well on some, it performed poorly on others. Some TVs failed to provide enough brand/model information that was needed to calibrate the mouse-remote directional key taps correctly. Some TVs just didn't have enough RAM to support the app's size. Security became an increasing concern since YouTube loaded ads from 3rd party sources and there were news reports of ads spreading malware ... and there does not seem to be any anti-virus software on smart TVs.
Below are technical details about the skills, technologies, and services used to create and support these apps.
Emtivee was like MTV (YouTube-style) with browsable Video On Demand music videos. Users could browse by genre and year and decade. They could like videos to put in their favorite videos list. It also counted how many times a user watched a video so they can go to a list of most watched and last watched videos. This data was aggregated on a server and stored in JSON files stored on Firebase object storage.
At first, the JavaScript for the app used the Vue.js framework. It was assumed that Smart TVs would be advanced enough to allow any kind of JavaScript framework, but a lesson was learned the hard way. Go through the developer tutorials first and check what is supported. So then the JavaScript had to be converted to jQuery, which was supported by the major TV brands like Samsung and LG.
The JavaScript files were separated by major funcionality into components. jQuery isn't like React.js and Vue.js in which different components and hooks and be transpiled together. The various scripts were minified and obfuscated to deter hackers and those wanting to copy the app.
Depending on the TV brand and its JavaScript events passed to the app, the remote control directional key pad acted as mouse directional events or an app grid directional event. Often it acted as a mouse, which was painful for users to browse because it was so slow and sometimes unpredictable. This app captured the JavaScript events and translated them into app grid directional key presses.
Can you imagine entering in a text search just using the remote control directional keypad? That is painfully slow. So the search screen included a way to just search the first 3 letters of each word and it filtered the searches automatically with each letter entered.
How were the top music video lists created? Where did the top hits come from? How were the song lists matched to YouTube videos?
The top music lists were scraped from popular websites using Python scripts. The lists were aggregated and stored in JSON files and then uploaded to Firebase object storage. The TV apps sent requests to Firebase object URLs to download the list data.
YouTube has a music website and their music videos can be searched by artist and title. Python scripts searched for music videos by artist and song title, sorted by popularity.
This app was very much like Emtivee, except that it was curated differently. The most popular YouTube channels for DIY, hobby tutorials, crafting, and so on were searched and the top channel lists were organized manually. It was organized by category, channel, and playlist.
While the app shared a similar structure to Emtivee, it slowly grew apart due to the how it was curated and organized. It was planned to refactor these apps to share a common code base, but the project ended before that could happen.
Each video item contained the YouTube video ID, title, description, length, and preview image URL. The preview image and title was displayed in the TV grid buttons.
There was also a search feature to search text in titles and descriptions. It sent a search request to Firebase Cloud Firestore (NoSQL database) and it returned search the results.
Every night, Python scripts queried YouTube API for new playlist videos. Like Emtivee, Help Videos data was stored in JSON data files and uploaded to Firebase object storage. The object keys (and URL parts) were hierarchical by category, channel, playlist, and list number. Each JSON file contained a maximum of 50 videos, so each playlist was usually divided into several lists. This prevented long download latency, which would aggrevate TV viewers.
The video data was not only stored in JSON files, but also in the Firebase Cloud Firestore (NoSQL database) for text searching.
