commit 686de2b096bcad00d61a29355ecdebd7f6d2beaf
parent b73611102b1a704892a0256e89d1b68359ef1b40
Author: Brian C. Lane <bcl@brianlane.com>
Date: Sun, 27 Feb 2022 17:27:53 -0800
Add daily headers and links to jump to them
Diffstat:
3 files changed, 99 insertions(+), 19 deletions(-)
diff --git a/src/strix/ui/events.html b/src/strix/ui/events.html
@@ -7,10 +7,16 @@
<link href="/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
+ <div id="topview">
<div id="viewer">
<video controls autoplay=false playsinline=true></video>
</div>
- <div id="calendar"></div>
+ <div id="days">
+ <ul id="daylinks">
+ <li><a id="scrollback" onclick="">Jump Back</a></li>
+ </ul>
+ </div>
+ </div>
<div id="events"></div>
@@ -19,12 +25,29 @@ var camera_events;
function nice_time_string(time_str) {
var d = new Date(time_str);
+ return nice_short_time_string(time_str) + " " + d.toLocaleTimeString();
+}
+
+function nice_short_time_string(time_str) {
+ var d = new Date(time_str);
// DoW Mo Day Year
var fields = d.toDateString().split(" ");
- return fields.slice(0,3).join(" ") + " " + d.toLocaleTimeString();
+ return fields.slice(0,3).join(" ");
+}
+
+function add_day(starttime) {
+ let newLi = document.createElement("li");
+ let newDay = document.createElement("a");
+ newDay.innerHTML = nice_short_time_string(starttime);
+ newDay.href = `#${starttime}`;
+ newLi.appendChild(newDay);
+
+ document.querySelector("#daylinks").appendChild(newLi);
}
function get_all_events(camera_name) {
+ var last_start = 0;
+
// The API returns the events with the oldest one first in the .events list
fetch("/api/events/"+camera_name+"?limit=0")
.then(resp => resp.json())
@@ -32,29 +55,44 @@ function get_all_events(camera_name) {
// Save for onclick actions
camera_events = data.events[camera_name];
var events = document.querySelector("#events");
- // Try to get the size of the thumbnail images
+
+ // off-screen image used for onload to get width and height
let oneImg = document.createElement("img");
oneImg.onload = function() {
width = this.width;
height = this.height;
- html = data.events[camera_name].map(event => {
+ html = data.events[camera_name].reverse().map(event => {
let alt = nice_time_string(event.start);
- return `<img class="thumbnail"
- onclick="javascript:load_viewer('${event.video}');"
+ let html = `<img class="thumbnail"
+ onclick="javascript:load_viewer('${event.video}', scrollY);"
title="${alt}"
loading="lazy"
width=${width}
height=${height}
src="${event.thumbnail}" />`
- }).reverse().join("\n");
- events.innerHTML = html;
+ // Show a day banner every time it passes midnight
+ let od = new Date(last_start).getDay();
+ let nd = new Date(event.start).getDay();
+ if (last_start == 0) {
+ banner = `<div class="newday" id="${event.start}"><h1 align="center">${alt}</h1>`;
+ html = banner + html;
+ }
+ else if (od != nd) {
+ banner = `</div><div class="newday" id="${event.start}"><h1 align="center">${alt}</h1>`;
+ html = banner + html;
+ add_day(event.start);
+ }
+ last_start = event.start;
+ return html;
+ }).join("");
+ events.innerHTML = html + "</div>";
}
// Load the 1st thumbnail, triggering onload for it
oneImg.src = data.events[camera_name][0].thumbnail;
});
}
-function load_viewer(event) {
+function load_viewer(event, scrollY) {
scroll(0,0);
// Set the viewere to the event video
@@ -62,6 +100,9 @@ function load_viewer(event) {
viewer.src = event;
viewer.autoplay = true;
+ // Setup the scrollback link
+ var sb = document.querySelector("#scrollback");
+ sb.onclick = function() {scroll(0, scrollY);};
}
function setup_page() {
@@ -77,7 +118,7 @@ function setup_page() {
// Load the viewer with the event, if one was selected
if (event != null) {
- load_viewer(event);
+ load_viewer(event, 0);
}
}
diff --git a/src/strix/ui/index.html b/src/strix/ui/index.html
@@ -95,16 +95,12 @@ function setup_page() {
<tr class="controls">
<td class="prev"><</td>
<td class="thumbnails"><div>
- <a class="video" target="video" href="/"><img class="thumbnail" src="/" /></a>
- <a class="video" target="video" href="/"><img class="thumbnail" src="/" /></a>
- <a class="video" target="video" href="/"><img class="thumbnail" src="/" /></a>
- <a class="video" target="video" href="/"><img class="thumbnail" src="/" /></a>
- <a class="video" target="video" href="/"><img class="thumbnail" src="/" /></a>
+ <a class="video" target="video" href="/"><img class="thumbnail" src="/" /></a><a class="video" target="video" href="/"><img class="thumbnail" src="/" /></a><a class="video" target="video" href="/"><img class="thumbnail" src="/" /></a><a class="video" target="video" href="/"><img class="thumbnail" src="/" /></a><a class="video" target="video" href="/"><img class="thumbnail" src="/" /></a>
</div></td>
<td class="next">></td></tr>
</table>
</div>`;
- }).join("\n");
+ }).join("");
live_feeds.innerHTML = html;
set_feed_href();
diff --git a/src/strix/ui/style.css b/src/strix/ui/style.css
@@ -14,12 +14,54 @@ body {
}
}
+#topview {
+ width: 100%;
+ height: 100%
+}
+
#viewer {
+ width: 80%;
+ display: inline-block;
}
video {
width: 100%;
- height: 100%;
+}
+
+
+#days {
+ display: inline-block;
+ overflow: auto;
+}
+
+#days ul {
+ list-style: none;
+ line-height: 1.3em;
+ background-color: #f1f1f1;
+ margin: 0;
+ padding: 0;
+}
+
+#days li a {
+ display: block;
+ color: #000;
+ text-decoration: none;
+ padding: 8px 16px;
+}
+
+#days li a:hover {
+ background-color: #555;
+ color: white;
+}
+
+.newday {
+ display: inline;
+ whitespace: nowrap;
+}
+
+.newday h1 {
+ border: 1px solid black;
+ margin: 2px;
}
#events {
@@ -45,8 +87,9 @@ td.prev:hover,td.next:hover {
img.thumbnail {
width: 20%;
height: auto;
- display: block;
- float: left;
+ display: inline;
+ vertical-align: text-bottom;
+# float: left;
}
img.thumbnail:hover {
