diff options
Diffstat (limited to '')
| -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> |