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

diff --git a/src/webui/static/tv.css b/src/webui/static/tv.css
index dd1df1aa6aaed5177878fd9599681130ef690a71..0083e2e9a059840dce0e9b8a7616664074c8fedf 100644 (file)
--- a/src/webui/static/tv.css
+++ b/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;
+}

diff --git a/src/webui/static/tv.js b/src/webui/static/tv.js
index 12ff881a9780d9b11fede864a1f07cbdde9c9a76..a9c46b9508188eb2301077c5c903928db174eda4 100644 (file)
--- a/src/webui/static/tv.js
+++ b/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);
            };