Skip to content

Commit

Permalink
Browse files Browse the repository at this point in the history
WEBUI: EPG - add direct navigation for title/channel/genre
  • Loading branch information
@perexg
perexg committed Sep 28, 2014
1 parent 0cb841a commit d201a7a
Show file tree
Hide file tree
Showing 3 changed files with 76 additions and 15 deletions.
80 changes: 65 additions & 15 deletions src/webui/static/app/epg.js
View file
Expand Up @@ -14,8 +14,9 @@ tvheadend.contentGroupLookupName = function(code) {
ret = "";
if (!code)
code = 0;
code &= 0xf0;
tvheadend.ContentGroupStore.each(function(r) {
if (r.data.key === code & 0xf0)
if (r.data.key === code)
ret = r.data.val;
});
return ret;
Expand Down Expand Up @@ -222,6 +223,8 @@ tvheadend.epgDetails = function(event) {
};

tvheadend.epg = function() {
var lookup = '<span class="x-zoom">&nbsp;</span>';

var actions = new Ext.ux.grid.RowActions({
header: '',
width: 20,
Expand Down Expand Up @@ -262,7 +265,7 @@ tvheadend.epg = function() {
dateFormat: 'U' /* unix time */
},
{ name: 'starRating' },
{ name: 'ageRating' },
{ name: 'ageRating' },
{ name: 'genre' },
{ name: 'dvrState' },
{ name: 'serieslinkId' },
Expand Down Expand Up @@ -317,6 +320,13 @@ tvheadend.epg = function() {
return value;
}

function renderTextLookup(value, meta, record, rowIndex, colIndex, store) {
setMetaAttr(meta, record);

if (!value) return "";
return lookup + value;
}

function renderInt(value, meta, record, rowIndex, colIndex, store) {
setMetaAttr(meta, record);

Expand Down Expand Up @@ -352,7 +362,8 @@ tvheadend.epg = function() {
id: 'title',
header: "Title",
dataIndex: 'title',
renderer: renderText
renderer: renderTextLookup,
listeners: { click: { fn: clicked } },
},
{
width: 250,
Expand Down Expand Up @@ -402,7 +413,8 @@ tvheadend.epg = function() {
id: 'channelName',
header: "Channel",
dataIndex: 'channelName',
renderer: renderText
renderer: renderTextLookup,
listeners: { click: { fn: clicked } },
},
{
width: 50,
Expand All @@ -429,8 +441,10 @@ tvheadend.epg = function() {
if (v)
r.push(v);
});
return r.join(',');
}
if (r.length < 1) return "";
return lookup + r.join(',');
},
listeners: { click: { fn: clicked } },
}
]
});
Expand Down Expand Up @@ -592,12 +606,16 @@ tvheadend.epg = function() {
* Filter selection event handlers
*/

epgFilterChannels.on('select', function(c, r) {
if (r.data.key == -1)
function epgFilterChannelSet(val) {
if (!val)
clearChannelFilter();
else if (epgStore.baseParams.channel !== r.data.key)
epgStore.baseParams.channel = r.data.key;
else if (epgStore.baseParams.channel !== val)
epgStore.baseParams.channel = val;
epgView.reset();
}

epgFilterChannels.on('select', function(c, r) {
epgFilterChannelSet(r.data.key == -1 ? "" : r.data.key);
});

epgFilterChannelTags.on('select', function(c, r) {
Expand All @@ -608,12 +626,16 @@ tvheadend.epg = function() {
epgView.reset();
});

epgFilterContentGroup.on('select', function(c, r) {
if (r.data.key == -1)
function epgFilterContentGroupSet(val) {
if (!val)
clearContentGroupFilter();
else if (epgStore.baseParams.contentType !== r.data.key)
epgStore.baseParams.contentType = r.data.key;
else if (epgStore.baseParams.contentType !== val)
epgStore.baseParams.contentType = val;
epgView.reset();
}

epgFilterContentGroup.on('select', function(c, r) {
epgFilterContentGroupSet(r.data.key == -1 ? "" : r.data.key);
});

epgFilterDuration.on('select', function(c, r) {
Expand Down Expand Up @@ -730,7 +752,35 @@ tvheadend.epg = function() {
epgStore.reload();
});

function rowclicked(grid, index) {
function clicked(column, grid, index, e) {
if (column.dataIndex === 'title') {
var value = grid.getStore().getAt(index).data[column.dataIndex];
if (value && epgStore.baseParams.title !== value) {
epgFilterTitle.setValue(value);
return false;
}
} else if (column.dataIndex === 'channelName') {
var value = grid.getStore().getAt(index).data[column.dataIndex];
if (value && epgStore.baseParams.channel !== value) {
epgFilterChannels.setValue(value);
epgFilterChannelSet(value);
return false;
}
} else if (column.dataIndex === 'genre') {
var value = grid.getStore().getAt(index).data[column.dataIndex];
if (value && value.length > 0) {
value = parseInt(value[0]) & 0xf0;
if (value && epgStore.baseParams.channelTag !== value) {
var l = tvheadend.contentGroupLookupName(value);
epgFilterContentGroup.setValue(l);
epgFilterContentGroupSet(value);
return false;
}
}
}
}

function rowclicked(grid, index, e) {
new tvheadend.epgDetails(grid.getStore().getAt(index).data);
}

Expand Down
10 changes: 10 additions & 0 deletions src/webui/static/app/ext.css
View file
Expand Up @@ -322,6 +322,16 @@
background-image: url(../icons/film_edit.png) !important;
}

.zoom {
background-image: url(../icons/zoom.png) !important;
}

.x-zoom {
display: inline-block;
background-image: url(../icons/zoom.png) !important;
width: 16px;
}

.x-smallhdr {
float: left;
width: 100px;
Expand Down
1 change: 1 addition & 0 deletions src/webui/static/icons/zoom.png
View file
@@ -0,0 +1 @@
../../../../vendor/famfamsilk/zoom.png

6 comments on commit d201a7a

@ProfYaffle
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@perexg - I wonder if we now need an 'info' button to bring up the programme details in the light of this change. We now have inconsistent behaviour: click on a title, and it filters; click on it again, and you get the programme details as previously, unless you've filtered down to a partial match (e.g. filtering on "News" to give "News" and "News HD"), in which case clicking on the former will give information while the latter will simply filter further. Another click and you'll get the information.

You can, of course, click on one of the unfiltered fields (e.g. start time), but that's not as obvious as an info icon - which would also be consistent with the DVR grid entries.

@perexg
Copy link
Contributor Author

@perexg perexg commented on d201a7a Sep 28, 2014

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@ProfYaffle : Ideally, the click on the zoom icon should do the filter job, but it's not so easy to implement this in the standard extjs classes, so I gave up.

I added the info icon now..

@ProfYaffle
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@perexg So here's a question... now we have the info icon, do we need the zoom icon, or is there some other way to say "you can filter on this field" - font weight? colour? format (underline, italic)? Might make things look cleaner.

@perexg
Copy link
Contributor Author

@perexg perexg commented on d201a7a Sep 29, 2014

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I replaced the zoom icon with the small blue triangle like the red one for the changed fields. I think it looks better now...

@ProfYaffle
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yup, agreed - much less cluttered. Thanks.

btw, while clicking on an entry filters the list properly, I don't think the filter value is then passed to autorec... not the channel, anyway, it seems to work with tag and title.

@perexg
Copy link
Contributor Author

@perexg perexg commented on d201a7a Sep 29, 2014

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Channel filter issue is fixed in commit b528de6 . Thanks.

Please sign in to comment.