This post presents a case-study of a Kaltura mobile application development. The selected Kaltura feature for this application was moderation – see Content Moderation Workflows for more information. We hope that after reading this post you will have a better understanding on how to develop your own mobile application that leverages Kaltura’s capabilities.
How cool would it be if you could ‘moderate on the go’?
kModerate lets you do just that – using your mobile device, you can see the list of entries that requires administrator’s approval, see each entry’s details and play its video in order to decide whether to approve or reject each entry.
kModerate is an example of mobile based moderation tool. kModerate is essentially a web application, suited for running on mobile devices, that provides simple interface for content moderation in Kaltura accounts. (@Learn @more about web-applications for mobile devices).
Developing web applications is super easy and fun! And if you worked with Kaltura’s API, most chances are that you already know your way around HTML, JavScript and CSS, the building blocks of web development. Developing a Web App for mobile devices is not more complicated than developing a regular web application. Thankfully, to support the various special features of mobile devices (such as touch-screen gestures, GPS, smaller screen size, common UI practices, etc.) there are frameworks that provide an easy jump-start. We’ll review the various frameworks in an upcoming post.
In iOS, WebApps can also be added to the home-screen. When a WebApp is added to the home-screen it also load without the browser interface which provide the WebApp with even a better feeling of a native app and more screen real estate to use!
kModerate is built of 3 main panels (screens):
- Login panel – where users input their KMC credentials (email and password) and login to the kModerate application.
- Entry List panel – where users see all the entries that are pending for moderation. Tapping on an entry leads to the next panel, the Entry Details.
- Entry Details panel – presenting the basic entry metadata. Here the video can also be played. Here the content administrator can also use the Approve or Reject buttons to moderate the entry.
The Login Panel
The login panel is built using Sencha Touch FormPanel. FormPanel includes a list of form-field items developers can use to create standardized native mobile app look & feel. The login form also includes a button, we set the tap handler (the form button click) to a separate function (loginClickHandler) that collects the input from the form fields and initiates the user.loginByLoginId API call to Kaltura in order to authenticate the user.
Usually, mobile apps default behavior of form submitting is triggered by tapping the “Return” or “Go” buttons in the virtual keyboard.
Setting the submit handler property, of the form panel object, to the same function (loginClickHandler) creates this behavior.
The Kaltura JS client library utilizes JSONP. When calling an API action, in addition to the call parameters and values developers also need to specify what will the callback function to be executed when the response is returned to the client. Upon a successful login, the returned KS (Kaltura Session) is stored in a global variable and the application loads the next panel (the Entry List panel). This is done in the loginCallback function, which was passed to the user.loginByLoginId API call as the callback function.
The Entry List Panel
Once authenticated (through the login form, or if we already have a valid KS from a previous login) the list of entries that are marked as pending moderation is fetched from Kaltura and displayed in the Entry List panel. Fetching the entry list is done by calling the baseEntry.listAction API call, with a pre-set filter to fetch media entries which are in status ready and their moderation status is either “pending moderation” or “flagged for review”. The list of entries is displayed by using Sencha Touch list object which is populated with data list. The data is an array of predefined data-model objects (called entryModel) which is registered at the beginning of the application. The entryModel determines the structure of an entry record in kModerate (i.e. what fields will it hold).
In the callback function when calling the baseEntry.listAction API (getEntrieListHandler) the returned array of KalturaMediaEntry objects is being “converted” into an array of entryModel objects:
The list object then provides an API for updating the data and refreshing the list in the view. In kModerate, whenever the list of entries needs to be fetched from Kaltura, the returned data is updated in the list object and when calling the refresh() action (on the list object) the view is updated.
The Entry Details Panel
Another List panel event is the “selectionchange” event which is triggered when an item in the list is tapped. Adding a listener to this event allows us to trigger a function that will load the Entry Details panel for the selected entry. The values that are passed to the event-listener function are the model of the list records and the selected records. With the selected record in hand, all that is left to do is update the HTML of the Entry Details panel with the data of the current entry. This is done by using Sencha Touch template object that contains a string with replacement place-holders (in curly brackets) which should match the input model object. The template object can simply apply record data on the template string, and return the replaced HTML.
Adding the Video to the entry details panel
The easiest way to integrate the Kaltura Video into the Entry Details panel was to use Kaltura’s HTML5 iframe-embedding method. This method means placing an iframe on the page, in which the Kaltura player will be dynamically loaded.
<iframe src="http://cdnakmi.kaltura.org/apis/html5lib/mwEmbed/mwEmbedFrame.php/wid/_9008/uiconf_id/48501/entry_id/1_llcyp09h" width="1440" height="1080" frameborder="0"/>
The player loaded in that iframe will fall-forward to the player that would fit best for the device where it is loaded in. For example:
- iPhone – A thumbnail is displayed, tapping it would launch the native iphone player.
- iPad – Kaltura’s HTML5 player will be loaded in the page.
- Android, when flash is installed – Kaltura’s flash KDP will be loaded in the page.
Action Buttons in the Entry Details Panel
In order to change the moderation status of an entry (to Accepted or Rejected), we created 2 simple buttons. The handlers of the approve & reject buttons point to functions that call the media.approve or media.reject API actions:
The callback function of the two calls, on success, refreshes and loads the entry list to the display.
kModerate Code and URL
Got cool ideas on how to make it better? Let us know in the comments!