diff options
| author | Jon duSaint | 2022-07-24 12:39:51 -0700 |
|---|---|---|
| committer | Jon duSaint | 2022-07-24 12:39:51 -0700 |
| commit | 4445becdc84e05859d90d13d0d98625a0b72f9e9 (patch) | |
| tree | 667f07b308e5ad05ee98a12f11433e9144548089 | |
| parent | 1aab996a6b443b2db82dc606e795b28aa4028de5 (diff) | |
reolink: add video tab
The output web page now has slideshow and video tabs. The video tab lets you select from and play existing videos.
N.b. videos that are still being generated will show up.
| -rwxr-xr-x | reolink/reolink | 137 |
1 files changed, 117 insertions, 20 deletions
diff --git a/reolink/reolink b/reolink/reolink index 0dcb83e..1b0ca70 100755 --- a/reolink/reolink +++ b/reolink/reolink @@ -397,33 +397,69 @@ sub respool_and_generate_slideshow { error ("open(index.html): $!"); } + my $generated = localtime; + if ($fh) { print $fh <<"SLIDESHOW"; <!DOCTYPE html> <html> <head> - <title>Slideshow</title> + <title>Slideshow [$generated]</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <style type="text/css"> + /* Image size (actual size is 2560x1920) */ + :root { + --width: 1440px; + --height: 1080px; + } body { background-color: #008080; color: black; } - div.outer { - background-color: #004040; - border-radius: 1%; + div.tabbed-wrapper { position: fixed; - padding: 10px; top: 50%; - margin-top: -480px; + margin-top: calc(-1 * var(--height) / 2); left: 50%; - margin-left: -640px; + margin-left: calc(-1 * var(--width) / 2); + } + div.tabs { + display: flex; + } + span.tab { + background-color: #004040; + flex-grow: 1; + font-size: 2em; + text-align: center; + border: 1px solid black; + border-radius: 10px; + margin-bottom: 2px; + } + span.tab-left { margin-right: 1px; } + span.tab-right { margin-left: 1px; } + div.video { + background-color: #004040; + border: 1px solid black; + border-radius: 10px; + padding: 10px; + } + select.video-menu { + background-color: #004040; + font-size: 1em; + font-weight: bold; + border: none; + } + div.slideshow { + background-color: #004040; + border: 1px solid black; + border-radius: 10px; + padding: 10px; } div.caption { font-size: 2em; display: flex; } - div.caption > span { + div.caption > span, select { margin: auto; } div.controls { @@ -526,31 +562,92 @@ IMAGE current = parseInt(p / 100 * (images.length - 1)) set_image(); } + + function slideshow_tab() { + s = document.getElementById ("slideshow-tab"); + v = document.getElementById ("video-tab"); + ts = document.getElementById ("tab-slideshow"); + tv = document.getElementById ("tab-video"); + s.style.display = ""; + v.style.display = "none"; + ts.style.fontWeight = "bold"; + tv.style.fontWeight = "normal"; + } + + function video_select() { + op = document.getElementById ("video-menu"); + stem = op.options[op.selectedIndex].value; + vb = document.getElementById ("videobox"); + vb.src = stem + ".webm"; + vb.poster = stem + "_kf.jpg"; + } + + function video_tab() { + s = document.getElementById ("slideshow-tab"); + v = document.getElementById ("video-tab"); + ts = document.getElementById ("tab-slideshow"); + tv = document.getElementById ("tab-video"); + s.style.display = "none"; + v.style.display = ""; + ts.style.fontWeight = "normal"; + tv.style.fontWeight = "bold"; + } </script> </head> - <body onload="ffwd_image();"> - <div class="outer"> - <div class="caption"> - <span id="photo-caption"></span> + <body onload="slideshow_tab(); ffwd_image();"> + <div class="tabbed-wrapper"> + <div class="tabs"> + <span class="tab tab-left" id="tab-slideshow" onclick="slideshow_tab();">Slideshow</span> + <span class="tab tab-right" id="tab-video" onclick="video_tab();">Video</span> </div> - <div class="inner"> - <div class="slide"><img id="photo-display" src="" width="1280" height="960"/></div> + + <div class="video" id="video-tab"> + <div class="caption"> + <select class="video-menu" id="video-menu" onchange="video_select();"> +SLIDESHOW + + my @videos; + foreach my $video (<"$server_params{spool_dir}/*.webm">) { + if ($video =~ m,/(\d{4})(\d{2})(\d{2})\.webm$,) { + push @videos, [$1, $2, $3]; + } + } + + print $fh $_ foreach map { qq( <option value="$_->[0]$_->[1]$_->[2]">$_->[0]-$_->[1]-$_->[2]</option>\n) } reverse @videos; + + my ($video, $keyframe) = ("$videos[-1]->[0]$videos[-1]->[1]$videos[-1]->[2].webm", + "$videos[-1]->[0]$videos[-1]->[1]$videos[-1]->[2]_kf.jpg"); + + print $fh <<"SLIDESHOW"; + </select> + </div> + <video id="videobox" src="$video" poster="$keyframe" controls> + This could be a video instead. + </video> </div> - <div class="controls"> - <span class="button" onclick="rewind_image()"><<</span> - <span class="button" onclick="previous_image()"><</span> + + <div class="slideshow" id="slideshow-tab"> + <div class="caption"> + <span id="photo-caption"></span> + </div> + <div class="inner"> + <div class="slide"><img id="photo-display" src="" width="1440" height="1080"/></div> + </div> + <div class="controls"> + <span class="button" onclick="rewind_image()"><<</span> + <span class="button" onclick="previous_image()"><</span> SLIDESHOW foreach (0..100) { my $class = ($_ % 10) ? 'tick' : 'bigtick'; print $fh <<"SLIDESHOW"; - <span class="$class" id="tick$_" onclick="seek_image($_);">|</span> + <span class="$class" id="tick$_" onclick="seek_image($_);">|</span> SLIDESHOW } print $fh <<"SLIDESHOW"; - <span class="button" onclick="next_image()">></span> - <span class="button" onclick="ffwd_image()">>></span> + <span class="button" onclick="next_image()">></span> + <span class="button" onclick="ffwd_image()">>></span> </div> </div> |