On
If you are not familiar with the Office365 Video Portal please refer to the blog post here in which I tried to introduce the video portal and explained  how to check whether it has been activated for your Office365 Tenant or not.

The Office Video Portal Video Player page is responsive "finally" and by taking a quick look at the office road-map website, we can tell that Microsoft is intending to make the whole portal fully responsive.

The Current Channel Listing Page 

But by looking at the channel listing page located at https://{your_root_SiteCollection}/portals/hub/_layouts/15/videochannels.aspx I felt it’s very basic page and gives very limited Channel information. The limitation comes not only from the Information Architecture point of view, but also the way the channels have been rendered. 


The user can easily add a channel from the top right button “Add Channel” which allows him/her to name the channel and choose a color for the channel. That’s it! 


The user can’t add classify a channel based on categories or taxonomy or even add a channel description which is very frustrating. By taking a deep dive into the Video RESTful APIs I was shocked when I found out that Channel description field was retrieved for the get channels call /_api/VideoService/Channels 


So the field was already added to the information architecture and there is no way to update it from the Video Portal interface as the user adding a new channels! Why? I really can’t find an answer to that particular question!

How to provide a better user experience to render the Video Channels? 

First, I will create a new SharePoint Hosted App with a remote event receiver; the remote event receiver is used to handle the remote provisioning and it will add the following artifacts to the hub site collection as the app added to the hub site collection:
  1. Custom Channels Metadata List (extending the Channel Information architecture) 
  1. Custom Style List (contains all custom StyleSheets,JavaScript files and images
  1. Image Library (store the Channel Images)
  1. Custom user action to register a javascript File named VideoChannelsListing.js  (To override the OTB rendering for the Channels)
After adding the SharePoint hosted app "VideoChannelList" to the video hub SiteCollection we can see the above artifacts added successfully.

  
The Video Channel metadata list will hold the channel extended IA; it will use the channel ID to link between the channels (site collections) and the VideoChannelsMetadata List Items. 

All the needed styles and javascript files will be added to VideoChannelStyle library, if we install the app successfully it will render the channels as below 

Notice that only the channel name appears when the user hover the channel image, the user can easily go to VideoChannelsMetadata list and update the channels data by adding a row to the list. 
In this case I will change the sport channels data to be 


And below how the channel is rendered in the OTB videochannels.aspx page 


Happy SharePointing !