Use <video> element for videos

Somewhat rough attempt at making this work.  Doesn't do a good
job with matching file extensions or setting mime types for different
falvors of video.  No longer attempts transcoding video to the right
resolution.

src/main/java/org/forkalsrud/album/video/MovieCoder.java

@@ -56,11 +56,12 @@ public class MovieCoder {
         return temp;
     }
 
-    private void deleteTempDirectory(File dir) throws IOException {
+    private void deleteTempDirectory(File dir) {
-        try (Stream<Path> s = Files.walk(dir.toPath())) {
+        for (File sub : dir.listFiles()) {
-            if (!s.allMatch(f -> f.toFile().delete())) {
+            if (sub.isDirectory()) {
-                throw new IOException("problem deleting " + dir);
+                deleteTempDirectory(sub);
             }
+            sub.delete();
         }
     }
 

src/main/java/org/forkalsrud/album/web/AlbumServlet.java

@@ -20,6 +20,7 @@ import javax.servlet.http.HttpServletResponse;
 import com.fasterxml.jackson.databind.ObjectMapper;
 import com.fasterxml.jackson.databind.node.ArrayNode;
 import com.fasterxml.jackson.databind.node.ObjectNode;
+import org.apache.commons.io.IOUtils;
 import org.apache.log4j.PropertyConfigurator;
 import org.forkalsrud.album.db.DirectoryDatabase;
 import org.forkalsrud.album.db.DirectoryProps;
@@ -289,8 +290,26 @@ public class AlbumServlet
                 log.info("{} not modified (based on date)", file.getName());
                 return;
             }
+
+            String size = req.getParameter("size");
+            if (size == null) {
+
+
+                try (FileInputStream in = new FileInputStream(file);
+                     OutputStream out = res.getOutputStream()) {
+                    res.setStatus(HttpServletResponse.SC_OK);
+                    res.setDateHeader("Last-Modified", entry.getPath().lastModified());
+                    res.setDateHeader("Expires", System.currentTimeMillis() + (30 * 24 * 3600 * 1000L)); // 30 days
+                    res.setContentType("video/mp4");
+                    IOUtils.copyLarge(in, out);
+                } catch (IOException e) {
+                    log("sadness", e);
+                }
+                return;
+            }
+
+
             try {
-                String size = req.getParameter("size");
                 res.setStatus(HttpServletResponse.SC_OK);
                 res.setDateHeader("Last-Modified", entry.getPath().lastModified());
                 res.setDateHeader("Expires", System.currentTimeMillis() + (30 * 24 * 3600 * 1000L)); // 30 days

src/main/webapp/WEB-INF/ng.html

@@ -6,13 +6,9 @@
   <title>album</title>
 
 <script type="text/javascript" src="/photo/assets/jquery/jquery-3.7.1.min.js"></script>
-  <!--
-<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
-  -->
 <script type="text/javascript" src="/photo/assets/fancybox/jquery.fancybox-1.3.1.js"></script>
 <script type="text/javascript" src="/photo/assets/fancybox/jquery.easing-1.3.pack.js"></script>
 <script type="text/javascript" src="/photo/assets/fancybox/jquery.mousewheel-3.0.2.pack.js"></script>
-<script type="text/javascript" src="/photo/assets/flowplayer/flowplayer-3.0.3.min.js"></script>
 
 <link rel="stylesheet" href="/photo/assets/fancybox/jquery.fancybox-1.3.1.css" type="text/css" media="screen" />
 
@@ -61,7 +57,7 @@
       max-width: 275px;
       overflow: hidden;
     }
-    img.imagepic {
+    img.imagepic, img.moviepic {
       box-shadow: 5px 5px 5px #777;
       -webkit-box-shadow: 5px 5px 5px #777;
       -moz-box-shadow: 5px 5px 5px #777;
@@ -80,7 +76,7 @@
       vertical-align: middle;
     }
     #fancybox-left, #fancybox-right {
-      bottom: 30px;
+      bottom: 70px;
     }
   </style>
   <script type="text/javascript" src="/photo/assets/render.js"></script>

src/main/webapp/assets/render.js

@@ -83,11 +83,18 @@ $(function() {
             }
 
             var dim = scale(entry.width, entry.height, thmb);
-
+            var href, poster;
+            if (entry.thumbtype == "movie") {
+                href = "/photo/album" + encUri(entry.path) + ".movie";
+                poster = "/photo/album" + encUri(entry.path) + ".frame";
+            } else {
+                href = "/photo/album" + encUri(entry.path) + "?size=" + picSize;
+                poster = "/photo/album" + encUri(entry.path);
+            }
             var gridDiv = $("<div class=\"grid\">\n"
                        		+ "   <span class=\"name\">" + entry.name + "</span><br/>\n"
-                            + "   <div class=\"imgborder\"><a class=\"ss\" id=\"ent" + idx + "\" href=\"/photo/album" + encUri(entry.path) + "?size=" + picSize + "\" title=\"" + entry.name + "\">"
+                            + "   <div class=\"imgborder\"><a class=\"ss\" id=\"ent" + idx + "\" href=\"" + href + "\" title=\"" + entry.name + "\">"
-                            + "<img class=\"" + entry.type + "pic\" src=\"/photo/album" + (entry.thumbtype == "movie" ? encUri(entry.path) + ".frame" : encUri(entry.path)) + "?size=" + thmb + "\" border=\"0\" width=\"" + dim.w + "\" height=\"" + dim.h + "\"/></a></div>\n"
+                            + "<img class=\"" + entry.type + "pic\" src=\"" + poster + "?size=" + thmb + "\" border=\"0\" width=\"" + dim.w + "\" height=\"" + dim.h + "\"/></a></div>\n"
                        		+ "</div>\n");
 
             var captionP = $("<p class=\"caption\"></p>\n");
@@ -103,7 +110,7 @@ $(function() {
             case "movie":
             case "image":
                 var largeDim = scale(entry.width, entry.height, picSize);
-                $("#ent" + idx).attr("rel",  "album").fancybox({
+                var options = {
                     'titlePosition' : 'inside',
                     'transitionIn'  : 'elastic',
                     'transitionOut' : 'elastic',
@@ -112,9 +119,13 @@ $(function() {
                     'titleFormat'   : formatCaption,
                     'width'         : largeDim.w,
                     'height'        : largeDim.h,
-                    'type'          : "image",
+                    'type'          : entry.type,
-                    'href'          : $("#ent" + idx).href
+                    'href'          : href
-                });
+                };
+                if (entry.thumbtype == "movie") {
+                    options['poster'] = poster + "?size=" + largeDim.w + "w";
+                }
+                $("#ent" + idx).attr("rel",  "album").fancybox(options);
                 break;
             case "dir":
                 $("#ent" + idx).attr("href", location.pathname.replace(/\.album?($|\?)/, "/" + entry.name + ".album"));