broodjeaap/streamwatcher
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

added basic 'scrolling' through a moment with a range input

Browse source
This commit is contained in:
BroodjeAap 2020-08-04 19:53:41 +00:00
parent b6dcd6a93b
commit e4102dccb9
3 changed files with 30 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
main.go
View file

@ -218,7 +218,6 @@ func (server Server) streamRecordings(w http.ResponseWriter, r *http.Request) {
if i == 0 { if i == 0 {
continue continue
} }
log.Println(i)
previousImage := images[i-1] previousImage := images[i-1]
previousTime, err := time.Parse(timeLayout, previousImage.Name()) previousTime, err := time.Parse(timeLayout, previousImage.Name())
if err != nil { if err != nil {
@ -254,7 +253,7 @@ func (server Server) streamRecordings(w http.ResponseWriter, r *http.Request) {
log.Println(err) log.Println(err)
return return
} }
momentsTemplate.Execute(w, struct { err = momentsTemplate.Execute(w, struct {
Streams map[string]*Stream Streams map[string]*Stream
Moments [][]string Moments [][]string
Stream *Stream Stream *Stream
@ -265,6 +264,7 @@ func (server Server) streamRecordings(w http.ResponseWriter, r *http.Request) {
stream, stream,
watchArea, watchArea,
}) })
log.Println(err)
} }
func main() { func main() {

15
static/js/moments.js Executable file
View file

@ -0,0 +1,15 @@
let current_moment = null;
document.addEventListener("DOMContentLoaded", function(){
current_moment = moments[0];
let moment_current_image = document.getElementById("moment_current_image");
moment_current_image.src = "/streams/" + streamName + "/" + watchAreaName + "/" + current_moment[0];
let moment_slider = document.getElementById("moment_slider");
moment_slider.max = current_moment.length - 1;
moment_slider.value = 0;
moment_slider.addEventListener("change", e => {
moment_current_image.src = "/streams/" + streamName + "/" + watchAreaName + "/" + current_moment[moment_slider.value];
});
});

14
templates/moments.html
View file

@ -3,9 +3,21 @@
<script src="/static/js/moments.js"></script> <script src="/static/js/moments.js"></script>
{{end}} {{end}}
{{define "content"}} {{define "content"}}
<img src="#" id="moment_current_image">
<input type="range" min="0" max="1" value="0" id="moment_slider">
<script>
let streamName = "{{.Stream.Name}}";
let watchAreaName = "{{.WatchArea.Name}}";
let moments = [
{{range $moment := .Moments}} {{range $moment := .Moments}}
[
{{range $image := $moment}} {{range $image := $moment}}
<img src="/streams/{{$.Stream.Name}}/{{$.WatchArea.Name}}/{{$image}}"> '{{$image}}',
{{end}} {{end}}
],
{{end}} {{end}}
];
</script>
{{end}} {{end}}