improved player on small screens

svn path=/trunk/; revision=108

diff --git a/pages/playctl.sh b/pages/playctl.sh
index ad6ea24e0b81955f912fb62f86d30f19aae75bc4..143c4d952c7f440e03383132e3ad5dfab064aca7 100755 (executable)
--- 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 62eaabb30f96455b5d2d8ae8564e3f54c15be1b7..8c7e2d8e159d5d749e71cdd765b3d9256ca4b5bd 100755 (executable)
--- 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 1aada8062ca81adcb4ead0f28fa002d33d801b41..339644dda86993a16c4cd9a6606bf0d2cac042a5 100755 (executable)
--- 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 7a89a9ec31666cc2104dbbe9ea287b1f4bf4149b..46a1d412edfd89806bef41ca0ff9f0e1b587588d 100755 (executable)
--- 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">