knut/album
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Use <video> element for videos

Browse source 
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.
This commit is contained in:
Knut Forkalsrud 2025-11-29 15:32:02 -08:00
parent 23fb5e4c68
commit 9dd452fe36
5 changed files with 1119 additions and 1079 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
src/main/java/org/forkalsrud/album/video/MovieCoder.java
View file

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

21
src/main/java/org/forkalsrud/album/web/AlbumServlet.java
View file

@ -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

8
src/main/webapp/WEB-INF/ng.html
View file

@ -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>

2135
src/main/webapp/assets/fancybox/jquery.fancybox-1.3.1.js
View file

File diff suppressed because it is too large Load diff

25
src/main/webapp/assets/render.js
View file

@ -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 + "\">"
+ "<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"
+ " <div class=\"imgborder\"><a class=\"ss\" id=\"ent" + idx + "\" href=\"" + href + "\" title=\"" + entry.name + "\">"
+ "<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",
'href' : $("#ent" + idx).href
});
'type' : entry.type,
'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"));