WebTV: Implement basic touchscreen-compatible navigation controls, inc. paging and scrolling channel list

src/webui/static/tv.css

@@ -1,5 +1,5 @@
 body {
-    font-size : 150%;
+    font-size : 100%;
     color     : #b2afa8;
     background: black;
 }
@@ -82,12 +82,22 @@ body {
     height: 100%;
 }
 
+.tv-channel-list-header {
+    z-index : 1;
+    position: static;
+    height  : 87%;
+}
+
+.tv-channel-list-content {
+    z-index : 1;
+    position: static;
+    height  : 87%;
+    overflow: auto;
+}
+
 .tv-channel-list {
     z-index : 1;
-    position: fixed;
-    top     : 8%;
-    left    : 5%;
-    height  : 80%;
+    height  : 95%;
 }
 
 .tv-video-idle {
@@ -115,3 +125,67 @@ body {
     background-position  : center;
     height: 100%;
 }
+
+/* Paging Toolbar - lifted from ext-all-notheme.css */
+
+.x-tbar-page-number{
+	width:30px;
+	height:14px;
+}
+
+.ext-ie .x-tbar-page-number{
+    margin-top: 2px;
+}
+
+.x-paging-info {
+    position:absolute;
+    top:5px;
+    right: 8px;
+}
+
+/* Buttons */
+
+.x-btn-text{
+    height:50px;
+    width:300px;
+}
+
+.x-tbar-page-first{
+    background:url(./extjs/resources/images/default/grid/page-first.gif) no-repeat;
+    border:0px;
+    height:20px;
+    width:20px;
+    background-size: 20px;
+}
+
+.x-tbar-page-prev{
+    background:url(./extjs/resources/images/default/grid/page-prev.gif) no-repeat;
+    border:0px;
+    height:20px;
+    width:20px;
+    background-size: 20px;
+}
+
+.x-tbar-page-next{
+    background:url(./extjs/resources/images/default/grid/page-next.gif) no-repeat;
+    border:0px;
+    height:20px;
+    width:20px;
+    background-size: 20px;
+}
+
+.x-tbar-page-last{
+    background:url(./extjs/resources/images/default/grid/page-last.gif) no-repeat;
+    border:0px;
+    height:20px;
+    width:20px;
+    background-size: 20px;
+}
+
+.x-tbar-loading{
+    background:url(./extjs/resources/images/default/grid/refresh.gif) no-repeat;
+    border:0px;
+    height:20px;
+    width:20px;
+    background-size: 20px;
+}

src/webui/static/tv.js

@@ -411,38 +411,66 @@ tv.app = function() {
     return {
 	init: function() {
 
+	    var channelStore = new Ext.data.JsonStore({
+	        autoLoad: {params:{start: 0, limit: 8}}, // limit initial page size to 8
+	        root : 'entries',
+	        fields : ['icon_public_url', 'number', 'name', 'uuid'],
+	        id : 'uuid',
+	        sortInfo : {
+	            field : 'number', // WIBI: Ideally, sort the whole channel list at source
+	            direction : "ASC"
+	        },
+	        url : "api/channel/grid"
+	    });
+
 	    var videoPlayer = new tv.ui.VideoPlayer({
 		params: { },
 		renderTo: Ext.getBody()
 	    });
 	    videoPlayer.setDisplaySize('100%', '00%');
 
-	    var chList = new tv.ui.ChannelList({
-		store: new Ext.data.JsonStore({
-		    autoLoad : true,
-		    root : 'entries',
-		    fields : ['icon_public_url', 'number', 'name', 'uuid'],
-		    id : 'uuid',
-		    sortInfo : {
-			field : 'number',
-			direction : "ASC"
-		    },
-		    url : "api/channel/grid"
-		})
+        var chList = new tv.ui.ChannelList({
+	        autoScroll: true,
+	        store: channelStore
+	    });
+
+// Play button that calls the "I've pressed Enter!" event when clicked
+
+        var playButton = new Ext.Button({
+	        text: 'Play Selected Channel',
+	        handler: function() {
+	            chList.fireEvent('naventer');
+	        }
+	    });
+
+// Paging bar so you can move through the list of channels
+
+	    var pageBar = new Ext.PagingToolbar({
+	        store: channelStore,
+	        pageSize: 8 // replicates initial page size
+	    });
+
+	    var chListPanel1 = new Ext.Panel({
+		items: [ pageBar, playButton ],
+		cls: 'tv-channel-list-header'
+	    });
+
+	    var chListPanel2 = new Ext.Panel({
+		items: [ chList ],
+		cls: 'tv-channel-list-content'
 	    });
 
 	    var chListPanel = new Ext.Panel({
 		title:'Channels',
-		items: chList,
+		items: [ chListPanel1, chListPanel2 ],
 		cls: 'tv-channel-list',
-		autoScroll: true,
 		renderTo: Ext.getBody()
 	    });
 
 	    window.onresize = function() {
 		var h = chListPanel.el.getHeight();
 		h -= chListPanel.header.getHeight();
-		h -= 25;
+		h -= 250;
 		
 		chList.setHeight(h);
 	    };