From 713dadca483cc306b787fea6b696783b7d3a2c31 Mon Sep 17 00:00:00 2001
From: paul <paul@plutz.net>
Date: Fri, 4 Mar 2016 14:06:10 +0000
Subject: [PATCH] improved player on small screens

svn path=/trunk/; revision=108
---
 pages/playctl.sh          |  2 +-
 templates/common.css.sh   | 27 +++++++++++++++++++++------
 templates/playctl.html.sh |  4 ++--
 templates/view.html.sh    |  3 +--
 4 files changed, 25 insertions(+), 11 deletions(-)

diff --git a/pages/playctl.sh b/pages/playctl.sh
index ad6ea24..143c4d9 100755
--- a/pages/playctl.sh
+++ b/pages/playctl.sh
@@ -30,7 +30,7 @@ meta="${_DATA}/meta/$info.meta"
                || video="${treeroot%/}/${location#/}"
 tags="$(sed -n '2p' "$meta")"
 description="$(sed -n '3,$p' "$meta")"
-length=0; width=0; height=0;
+head -n1 "$meta" |read length width height x
 
 video="videos/$info"
 [ -n "$info" ] && video="videos/$info" \
diff --git a/templates/common.css.sh b/templates/common.css.sh
index 62eaabb..8c7e2d8 100755
--- a/templates/common.css.sh
+++ b/templates/common.css.sh
@@ -53,6 +53,7 @@ textarea {
 .info.tag {
   line-height: 1.6em;
   background-color: #DBB;
+  margin-right: -.75ex;
 }
 
 .pagination_nav {
@@ -304,20 +305,34 @@ a.panel {
 #playctl form button {
   display: inline-block;
   height: 100%;
-  min-height: 2em;
-  margin: 0 -.75ex 2em 0;
+  min-height: 4em;
+  margin: 0 -.75ex .5em 0;
   background-color: #EEE;
   border: 1px solid #333;
-  max-width: 4em;
   vertical-align: bottom;
+  padding-top: 1em;
 }
-#playctl form button[name="ctl"] { width: 16%;}
-#playctl form button[name="amp"] { width: 15%;}
-#playctl form button[name="vol"] { width: 3%; min-height: 1em;}
+#playctl form button[name="seek"],
+#playctl form button[name="ctl"] { width: 40%;}
+#playctl form button[name="amp"] { width: 40%; margin-top: 2em;}
+#playctl form button[name="vol"] { width: 5%; min-height: 1em;}
 #playctl form button[name="vol"].selected { background-color: #FA6;}
 #playctl form button[name="vol"][value="100"],
 #playctl form button[name="vol"][value="0"] { width: 6%;}
 
+@media (min-width: 460px){
+  #playctl form button {
+    max-width: 4em;
+    min-height: 2em;
+    padding-top: 0em;
+    margin-bottom: 2em;
+  }
+  #playctl form button[name="seek"],
+  #playctl form button[name="ctl"] { width: 16%;}
+  #playctl form button[name="amp"] { width: 15%;}
+  #playctl form button[name="vol"] { width: 3%;}
+  #playctl form button[name="amp"] + br {display: none;}
+}
 EOF
 
 # vi:set filetype=css:
diff --git a/templates/playctl.html.sh b/templates/playctl.html.sh
index 1aada80..339644d 100755
--- a/templates/playctl.html.sh
+++ b/templates/playctl.html.sh
@@ -52,6 +52,7 @@ cat <<EOF
      <br>
      <button type="submit" name="amp" value="off">Amp Off</button>
      <button type="submit" name="amp" value="on">Amp On</button>
+     <br>
      $(for n in $(seq 0 5 100); do
        printf '<button class="%s" type="submit" name="vol" value="%s">&nbsp;</button>' "$([ "$volume" = "$n" ] && printf selected)" "$n"
      done)
@@ -61,8 +62,7 @@ cat <<EOF
   <span class="info width" >Width: $width</span>
   <span class="info height">Height: $height</span><br>
   
-  <label class="tags">Tags:</label>
-  $(printf %s\\n "$tags" |sed -r 's:\|*([^|]+)\|*:<span class="info tag">\1</span>:g')
+  $(printf %s\\n "$tags" |sed -r 's:\|*([^|]+)\|*:<span class="info tag">\1</span> :g')
   ${description:+<span class="info description">$(printf %s "$description" |_wiki)</span>}
 
   <form class="panel" id="tagger" action="?action=meta&${page_this}" method="post" accept-charset="UTF-8">
diff --git a/templates/view.html.sh b/templates/view.html.sh
index 7a89a9e..46a1d41 100755
--- a/templates/view.html.sh
+++ b/templates/view.html.sh
@@ -50,8 +50,7 @@ cat <<EOF
   <span class="info width" >Width: $width</span>
   <span class="info height">Height: $height</span><br>
   
-  <label class="tags">Tags:</label>
-  $(printf %s\\n "$tags" |sed -r 's:\|*([^|]+)\|*:<span class="info tag">\1</span>:g')
+  $(printf %s\\n "$tags" |sed -r 's:\|*([^|]+)\|*:<span class="info tag">\1</span> :g')
   ${description:+<span class="info description">$(printf %s "$description" |_wiki)</span>}
 
   <form class="panel" id="tagger" action="?action=meta&${page_this}" method="post" accept-charset="UTF-8">
-- 
2.39.2