mobile-friendly UI

[scottlamb]

The current (table-based) UI is meant to be temporary (see #32) but will probably last a while longer.

It's quite unpleasant to use on a phone. Some ideas to improve this:

• the page is too wide. Maybe the div#nav on the left could be a pull-out menu, or just stacked on top rather than on the left. Maybe the column list could be trimmed to the essentials (just start and end time really).
• time entry is awkward. there's probably some input attribute to create a keyboard with just number keys and colons, not all the alpha keys.
• it should be easier to switch from main streams to more bandwidth-friendly sub streams, rather than tapping literally all the checkboxes. Maybe default to sub streams. Maybe make the "main" and "sub" table labels themselves clickable and toggle everything.
• when you tap on a video, it opens a window that's meant to be draggable and resizable, but I'm not sure that's even possible on mobile. And when it's a sub stream, it's too small to manipulate at all (I think the go full-screen button is missing on Chrome/Android). It might make more sense to just always open full-screen instead.
• the error handling is poor, which is particularly noticeable on a flaky connection like a freshly-connected captive portal. It sometimes shows the (cached) main page and no streams (because the api requests have a dynamic url parameter that makes them non-cacheable). Anything would be better, like a butter-bar at the top.

[IronOxidizer]

<input type="time"> is a viable option for time entry but it lacks sub-second granularity as well as time zone adjustment:

[scottlamb]

Thanks for pointing that out! That certainly looks more pleasant. Does it have to be minute granularity? I think giving up subseconds isn't a big deal but going all the way up to minute granularity means giving up a lot in terms of ability to create a clip of just an event of interest. I suppose as a last resort, there could be a checkbox in the UI for using that time picker or not, similar to the output time format.

[IronOxidizer]

<input name="start-time" type="time" step="1"> enables seconds level of granularity.

<input name="start-time" type="time" step=".001"> enables milliseconds level of granularity, and so on,

On a side note, do you prefer PRs on separate branches, or in master?

[IronOxidizer]

Also, for cips, I was thinking that scrub bar markers would be more intuitive. Simply move the start and end marker on the scrub bar / timeline, then losslessly export (nearest key frame split) the clip for downloading in the web client. This would be akin to a video editing workflow.

[scottlamb]

The new react-based UI has an actual time picker. (It also has some annoying time zone flaws as mentioned in #111 but overall I think it's an improvement.)

I missed a couple comments from way back, sorry!

On a side note, do you prefer PRs on separate branches, or in master?

For small stuff, master is great. I use branches myself for longer-running development like completely rewriting the UI or a new database schema version.

Also, for cips, I was thinking that scrub bar markers would be more intuitive.

I definitely want this! And I think the server-side components are ready for a real Media Source Extension-based scrub bar UI. The live view is based on this, but it should also be possible to use for looking at historical recordings.