WebTV: Attempt at providing touchscreen-compatible navigation

[ProfYaffle]

I take no responsibility if this commit boils your kittens, runs off with your wife, or - more likely - doesn't work on the preferred esoteric browser of your choice. If you insist on running Netscape on CP/M then that's your problem.

This is a quick-and-dirty attempt at adding some touchscreen-compatible controls to the HTML TV player. This is done purely so we can more easily test transcoding on tablets and 'phones.

Specifically, this PR:

1. Adds paging buttons so you can move through the list of a gazillion channels we all have,
2. Makes that list scrollable without a keyboard (arrow keys otherwise), and
3. Adds a 'Play' button so you can launch a channel without the evidently-missing 'Enter' key

It will inevitably not render properly on all platforms - I've tested it on Firefox on Ubuntu only - but that's a task for another lifetime...

[ProfYaffle]

If anyone wants to test this, please do so - I'll keep it rebased to master for a while so it's a clean patch.

Remember that this isn't testing the transcoding to mobile devices, only providing a really simple couple of changes so you can navigate and try a few MPEG2/H.264 channels as the transcoding code changes.

I want to ensure I haven't broken normal browser use, so please take a look and report success or failure here. I'll take a look at the devices I have at my disposal.

If nothing breaks badly then I'll offer this up for merge as interim functionality. And if it does break badly... well, I might try to fix it 😄

[ProfYaffle]

Ubuntu 12.04.05

Firefox 33.0 - basic navigation works okay. The channel list doesn't resize properly (I don't know that it ever did), so you're limited to fullscreen as you can't scroll all the way down a given page of channels.

Chrome 38.0.2125.104 - basic navigation okay, doesn't resize as above.

Windows 7 SP1

Firefox 31.1.1 - same again. There's a pattern here, isn't there...

Internet Explorer 11.0.9600.x, Windows 7 SP1* - same again.

Android 4.4.4 (CM11)

Firefox 33.0 - similar resizing issue, although you can scroll within the viewport of the channel list but you lose the bottom few channels when you go into landscape. Page navigation works, including manually-specifying the page number.

Stock browser - same as FF, above.

---

That's enough to be going on with, I think. If someone can confirm basic navigation function on an iOS device and/or Windows 'Phone then that only leaves the resizing issue to fix. That said, it's there already in master, as the channel list is presented as a non-resizeable list that you can cursor through, so it's not exactly making anything worse...

[ProfYaffle]

Try this, then - from my idiot JS/CSS skills, you should now have a fixed paging/play panel and a scrollable-if-necessary channel list which you can then page through as required. Seems to work.

[perexg]

Nice improvement. Perhaps for keyboard - could you check up/down keys (a bit unstable selections) and add left/right and/or pgup/pgdown - channel page navigation? Perhaps home/end keys can be used, too..

[ProfYaffle]

Let me have a look - I wasn't intending on fixing this completely, but it does need some work (stop buttons, etc.), so I'll see what I can do.

[ProfYaffle]

@perexg Okay... try that. As well as fixing the up/down (especially on the final page of channels, which is normally going to be shorter than the others), we now have:

• Up/Down - previous/next channel on page
• PageUp/PageDown - previous/next page of channels
• Left/Right - previous/next page of channels
• Home/End - first/last page of channels
• Enter (on channel list) - play a channel
• Escape/backspace - show/hide channel list
• Enter (on video player) - show/hide on-screen controls

I've taken the opportunity to tidy up the code formatting a bit as well, so the diff looks far worse than it really should do.

[ProfYaffle]

One thing that's worth noting - there isn't really a 'stop' function. There isn't one in the HTML5 player itself - you can pause, you can play something else, you can refresh the page (which does indeed stop anything), but there's no 'just stop this video stream' that I can find.

I found some reference to pausing and then destroying the video's src attribute, but behaviour is undefined so it doesn't seem like a great idea...

[nmaclean]

This is really good. Can you explain the channel order? Would be really nice if it was by channel number.

[ProfYaffle]

@nmaclean No, that's lost on me at the moment... it's just 'as it comes' from the API, so probably in whatever internal id order they were detected, something like that. Ideally, you'd be able to sort on channel name or channel order, but that's probably a job for another day.

I will look to see if there's some more logical way of presenting them, even if it can't be changed...

[ProfYaffle]

@nmaclean Try that...

[nmaclean]

perfect. thanks

[ProfYaffle]

Merged and closed