From 5b358251b1771eba1eb00cdc65c9f0e87cde28ef Mon Sep 17 00:00:00 2001
From: =?utf8?q?Paul=20H=C3=A4nsch?= <paul@plutz.net>
Date: Sat, 15 Dec 2018 18:43:07 +0100
Subject: [PATCH] fit video view to screen size

---
 style.css | 17 +++++++++++++++--
 view.sh   |  6 +++---
 2 files changed, 18 insertions(+), 5 deletions(-)

diff --git a/style.css b/style.css
index f1e1881..bfd8541 100644
--- a/style.css
+++ b/style.css
@@ -367,7 +367,7 @@ body#view { padding-bottom: 6em; }
 
 #view h1 {
   max-width: 100%;
-  margin: 1em 0; padding: 0 .5em;
+  margin: .5em .75em;
   font-size: 1.25em;
   font-weight: bold;
   word-break: break-word;
@@ -377,7 +377,20 @@ body#view { padding-bottom: 6em; }
 #view #mainvideo {
   display: inline;
   width: 100%;
-  max-height: 70%;
+  max-height: 240px;
+}
+@media(min-height: 400px) { #view #mainvideo { max-height: 320px; } }
+@media(min-height: 480px) { #view #mainvideo { max-height: 460px; } }
+@media(min-height: 520px) { #view #mainvideo { max-height: 480px; } }
+@media(min-height: 640px) { #view #mainvideo { max-height: 600px; } }
+@media(min-height: 700px) { #view #mainvideo { max-height: 640px; } }
+@media(min-height: 760px) { #view #mainvideo { max-height: 720px; } }
+@media(min-height: 1000px){ #view #mainvideo { max-height: 960px; } }
+@media(min-height: 1200px){ #view #mainvideo { max-height: 1080px;} }
+
+#view a[href$=download],
+#view a[href^=javascript] {
+  margin-left: 1em;
 }
 
 #view .time, #view .dim,
diff --git a/view.sh b/view.sh
index eb348c6..887876d 100644
--- a/view.sh
+++ b/view.sh
@@ -11,7 +11,7 @@ printf 'Content-Type: text/html;charset=utf-8\r\n\r\n'
 
 { printf '
 [!DOCTYPE HTML]
-[html [head [title Listing]
+[html [head [title View]
   [meta name="viewport" content="width=device-width"]
   [link rel=stylesheet href="/style.css" ]
 ] [body #view
@@ -27,11 +27,11 @@ printf 'Content-Type: text/html;charset=utf-8\r\n\r\n'
   w_advsearch
   w_prefs
   printf '
-  [h1\n %s]
+  [video #mainvideo controls="controls" [source src="?a=download" type="video/mp4"]]
   [a "?a=download" Download]
   [a "javascript:stereoview(180, document.getElementById(&#34;mainvideo&#34;));" View 180° Stereoscopic]
   [a "javascript:stereoview(360, document.getElementById(&#34;mainvideo&#34;));" View 360° Stereoscopic]
-  [video #mainvideo controls="controls" [source src="?a=download" type="video/mp4"]]
+  [h1\n %s]
   [span .time %i:%02imin] [span .dim %ix%i] %s
   ' "$(HTML "${ITEM##*/}" |sed -r "$w_ascii"' s;[^0-9a-zA-Z&#];&[wbr];g')" \
     "$((length / 60))" "$((length % 60))" "$width" "$height" \
-- 
2.39.2