Implemented video view page with stereoscopic options

diff --git a/index.cgi b/index.cgi
index 6b0dc549d6676f53491e28adca926666e008e4f3..421b81e95ece53ff9c0c58f096518b596062bb0c 100755 (executable)
--- a/index.cgi
+++ b/index.cgi
@@ -48,6 +48,9 @@ if [ "$ITEM" = "/style.css" ]; then
   . "$_EXEC/cgilite/file.sh"
   [ -r "$_DATA/$ITEM" ] && FILE "$_DATA/$ITEM" \
                         || FILE "$_EXEC/style.css"
+elif [ "$ITEM" = "/stereoview.js" ]; then
+  . "$_EXEC/cgilite/file.sh"
+  FILE "$_EXEC/stereoview.js"
 elif [ -f "$_DATA/$ITEM" ]; then
   case $ACTION in
     tag)
@@ -62,10 +65,11 @@ elif [ -f "$_DATA/$ITEM" ]; then
     ;;
     delete)
     ;;
-    *) . "$_EXEC/cgilite/file.sh"
+    download) . "$_EXEC/cgilite/file.sh"
       fakemp4="$(COOKIE fakemp4)"
       FILE "$_DATA/$ITEM" "$([ "$fakemp4" = yes ] && printf 'video/mp4')"
     ;;
+    *) . "$_EXEC/view.sh"
   esac
 elif [ -d "$_DATA/$ITEM" ]; then
   case $ACTION in

diff --git a/list.sh b/list.sh
index f6f99750b86910bf4770f48ba355ab4257280e08..f36fe67fe13fa969677195f9152b225fcb1cdf6b 100644 (file)
--- a/list.sh
+++ b/list.sh
@@ -37,11 +37,11 @@ list_item() {
       "$width" "$height" \
       "$(printf '%s\n' "${tags#tags=}" \
          | sed -r "$UNSTRING"' s;^;,;; s;,+;,;g; s;,$;;;
-                   :X s;,([^,]+)(,|$); [span .tag \1]\2;; tX;'
+                   :X s;,([^,]+)(,|$); [span .tag\n \1]\2;; tX;'
       )" "$name" "$link" "$link"
   else
     printf 'Canning record for nonexist file: %s\n' "$name" >&2
-    # meta_purge "$_DATA/$ITEM/$name"
+    meta_purge "$_DATA/$ITEM/$name"
   fi
 }
 

diff --git a/static/stereoview.js b/stereoview.js
similarity index 100%
rename from static/stereoview.js
rename to stereoview.js

diff --git a/style.css b/style.css
index 0d1431a84f036c23de0d8a1a4db889dea39c0bc3..880b2b89e29c04b5635d6052e5b041f379bf599e 100644 (file)
--- a/style.css
+++ b/style.css
@@ -359,6 +359,33 @@ a[href="#advsearch"]:before {
 #index input, #index button { margin-left: 1em;}
 
 
+/* ###  Video View  ### */
+
+#view h1 {
+  margin: 1em .5em;
+  font-size: 1.25em;
+  font-weight: bold;
+  text-decoration: none;
+}
+
+#view #mainvideo {
+  display: inline;
+  width: 100%;
+  max-height: 70%;
+}
+
+#view .time, #view .dim,
+#view .tag {
+  margin-right: -.125em;
+  padding: .125em .25em;
+  color: black;
+}
+#view .time,
+#view .dim { background-color: #CCD; }
+#view .tag { background-color: #DCC; }
+
+
+
 /* ###  Multi Tagging Drawer  ### */
 
 #multitag fieldset{

diff --git a/view.sh b/view.sh
new file mode 100644 (file)
index 0000000..baaad11
--- /dev/null
+++ b/view.sh
@@ -0,0 +1,49 @@
+#!/bin/sh
+
+. "$_EXEC/indexmeta.sh"
+. "$_EXEC/widgets.sh"
+
+read length width height tags comment short <<-EOF
+       $(meta_info "$_DATA/$ITEM")
+       EOF
+
+printf 'Content-Type: text/html;charset=utf-8\r\n\r\n'
+
+{ printf '
+[!DOCTYPE HTML]
+[html [head [title Listing]
+  [meta name="viewport" content="width=device-width"]
+  [link rel=stylesheet href="/style.css" ]
+] [body #view
+  [script type="text/javascript" src="/stereoview.js"\n]
+  [div #navigation
+    [a #t_bookmarks href="#bookmarks" &#x2605;]'
+    w_search
+    printf '
+    [a #t_avsearch href="#advsearch" Advanced]
+    [a #t_prefs href="#prefs" &#x2699;]
+  ]'
+  w_bookmarks
+  w_advsearch
+  w_prefs
+  printf '
+  [h1\n %s]
+  [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"]]
+  [span .time %i:%imin] [span .dim %ix%i] %s
+  ' "$(HTML "${ITEM##*/}")" \
+    "$((length / 60))" "$((length % 60))" "$width" "$height" \
+    "$(printf '%s\n' "${tags#tags=}" |sed -r "$UNSTRING"'
+       s;^;,;; s;,+;,;g; s;,$;;; :X s;,([^,]+)(,|$); [span .tag\n \1]\2;; tX;'
+    )"
+  printf '
+  [div #editing
+    [form method=POST action="?a=multitag"'
+      [ -d "$_DATA/${ITEM%/*}/.index/" ] && w_tagging
+    printf '
+    ]
+  ]
+] ]
+'; } | "$_EXEC/cgilite/html-sh.sed"