mirror of
https://github.com/scottlamb/moonfire-nvr.git
synced 2024-12-26 23:25:55 -05:00
45abeb22de
* use content-hashed paths for static resources (except the top-level request), with immutable Cache-Control headers. This should improve cache behavior in both directions: avoid preventable HTTP requests and cause immediate refresh when needed. I had some staleness when browsing with my phone. * set up the favicons properly while I'm at it (closes #50). I used the convenient favicons-webpack-plugin to build everything from a .svg. I've hit an error similar to lovell/sharp#1593 at least once though so I might change my mind about that part if it continues to be problematic. * use http-serve's new directory traversal code for static file serving. This removes the odd behavior where files that weren't present at server startup couldn't be served. (I wasn't comfortable switching to the content-hashed paths before doing this.) It also means the static files can be served compressed. JSON API responses were already served compressed, so this closes #25. * for a given API URL, decide if we want it to be cached or not server-side. Stop using jQuery's kludgy cache-defeating _=<timestamp> URL parameter. I might start setting etags on some of these things and could serve 304 Not Modified responses if it's genuinely unmodified.
111 lines
4.5 KiB
HTML
111 lines
4.5 KiB
HTML
<!DOCTYPE html>
|
|
<head>
|
|
<title>Moonfire NVR</title>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
</head>
|
|
|
|
<div id="top">
|
|
<a id="toggle-nav">☰</a>
|
|
<span id="session"></div>
|
|
</div>
|
|
<div id="nav">
|
|
<form action="#">
|
|
<fieldset>
|
|
<legend>Streams</legend>
|
|
<table id="streams"></table>
|
|
</fieldset>
|
|
<fieldset id="datetime">
|
|
<legend>Date & Time Range</legend>
|
|
<div id="from">
|
|
<legend>From</legend>
|
|
<div id="start-date"></div>
|
|
<label for="start-time">Time:</label>
|
|
<input id="start-time" name="start-time" type="text"
|
|
max-length="20"
|
|
title="Starting time within the day. Blank for the beginning of
|
|
the day. Otherwise HH:mm[:ss[:FFFFF]][+-HH:mm], where F is
|
|
90,000ths of a second. Timezone is normally left out; it's useful
|
|
once a year during the ambiguous times of the "fall
|
|
back" hour.">
|
|
</div>
|
|
<div id="to">
|
|
<legend>To</legend>
|
|
<div id="range">
|
|
<input type="radio" name="end-date-type" id="end-date-same" checked>
|
|
<label for="end-date-same">Same Day</label>
|
|
<input type="radio" name="end-date-type" id="end-date-other">
|
|
<label for="end-date-other">Other Day</label><br/>
|
|
</div>
|
|
<div id="end-date"></div>
|
|
<label for="end-time">Time:</label>
|
|
<input id="end-time" name="end-time" type="text" max-length="20"
|
|
title="Ending time within the day. Blank for the end of the day.
|
|
Otherwise HH:mm[:ss[:FFFFF]][+-HH:mm], where F is 90,000ths of a
|
|
second. Timezone is normally left out; it's useful once a year
|
|
during the ambiguous times of the "fall back" hour.">
|
|
</div>
|
|
</fieldset>
|
|
<fieldset>
|
|
<legend>Recordings Display</legend>
|
|
<label for="split">Max Video Duration:</label>
|
|
<select name="split" id="split">
|
|
<option value="324000000">1 hour</option>
|
|
<option value="1296000000">4 hours</option>
|
|
<option value="7776000000">24 hours</option>
|
|
<option value="infinite">infinite</option>
|
|
</select><br>
|
|
<input type="checkbox" checked id="trim" name="trim">
|
|
<label for="trim" title="Trim each segment of video so that it is fully
|
|
contained within the select time range. When this is not selected,
|
|
all segments will overlap with the selected time range but may start
|
|
and/or end outside it.">Trim Segment Start & End</label><br>
|
|
<input type="checkbox" checked id="ts" name="ts">
|
|
<label for="ts" title="Include a text track in each .mp4 with the
|
|
timestamp at which the video was recorded.">Timestamp Track</label><br>
|
|
<label for="timefmt" title="The time format to use when displaying start
|
|
and end times in the video segment list. Note this currently doesn't
|
|
apply to the start/entry inputs.">Time Format:</label>
|
|
<select name="timefmt" id="timefmt">
|
|
<option value="MM/DD/YY hh:mm A">US-short</option>
|
|
<option value="MM/DD/YYYY hh:mm:ss A">US</option>
|
|
<option value="MM/DD/YY HH:mm" selected>Military-short</option>
|
|
<option value="MM/DD/YYYY HH:mm:ss">Military</option>
|
|
<option value="DD.MM.YY HH:mm">EU-short</option>
|
|
<option value="DD-MM-YYYY HH:mm:ss">EU</option>
|
|
<option value="YY-MM-DD hh:mm A">ISO-short (12h)</option>
|
|
<option value="YY-MM-DD HH:mm">ISO-short (24h)</option>
|
|
<option value="YYYY-MM-DD hh:mm:ss A">ISO (12h)</option>
|
|
<option value="YYYY-MM-DD HH:mm:ss">ISO (24h)</option>
|
|
<option value="YYYY-MM-DD HH:mm:ss">ISO 8601-like (No TZ)</option>
|
|
<option value="YYYY-MM-DDTHH:mm:ss">ISO 8601 (No TZ)</option>
|
|
<option value="YYYY-MM-DDTHH:mm:ssZ">ISO 8601</option>
|
|
<option value="YYYY-MM-DDTHH:mm:ss:FFFFFZ">Internal</option>
|
|
</select>
|
|
</fieldset>
|
|
</form>
|
|
</div>
|
|
<table id="videos"></table>
|
|
<div id="login">
|
|
<form>
|
|
<fieldset>
|
|
<table>
|
|
<tr>
|
|
<td><label for="login-username">Username:</label></td>
|
|
<td><input type="text" id="login-username" name="username"
|
|
autocomplete="username"></td>
|
|
</tr>
|
|
<tr>
|
|
<td><label for="login-password">Password:</label></td>
|
|
<td><input type="password" id="login-password" name="password"
|
|
autocomplete="current-password"></td>
|
|
</tr>
|
|
<tr>
|
|
<td></td>
|
|
<td><input type="submit" tabindex="-1" style="position:absolute; top:-1000px"></td>
|
|
</tr>
|
|
</table>
|
|
<p id="login-error"></p>
|
|
</fieldset>
|
|
</form>
|
|
</div>
|