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.
This commit is contained in:
parent
23fb5e4c68
commit
9dd452fe36
5 changed files with 1119 additions and 1079 deletions
|
|
@ -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();
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
try {
|
||||
|
||||
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 {
|
||||
res.setStatus(HttpServletResponse.SC_OK);
|
||||
res.setDateHeader("Last-Modified", entry.getPath().lastModified());
|
||||
res.setDateHeader("Expires", System.currentTimeMillis() + (30 * 24 * 3600 * 1000L)); // 30 days
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -20,7 +20,10 @@
|
|||
|
||||
selectedIndex = 0, selectedOpts = {}, selectedArray = [], currentIndex = 0, currentOpts = {}, currentArray = [],
|
||||
|
||||
ajaxLoader = null, imgPreloader = new Image(), imgRegExp = /\.(jpg|gif|png|bmp|jpeg)(.*)?$/i, swfRegExp = /[^\.]\.(swf)\s*$/i,
|
||||
ajaxLoader = null, imgPreloader = new Image(),
|
||||
imgRegExp = /\.(jpg|gif|png|bmp|jpeg)(.*)?$/i,
|
||||
movieRegExp = /\.(mov)(.*)?$/i,
|
||||
swfRegExp = /[^\.]\.(swf)\s*$/i,
|
||||
|
||||
loadingTimer, loadingFrame = 1,
|
||||
|
||||
|
|
@ -240,7 +243,7 @@
|
|||
},
|
||||
|
||||
_finish = function () {
|
||||
inner.css('overflow', (currentOpts.scrolling == 'auto' ? (currentOpts.type == 'image' || currentOpts.type == 'iframe' || currentOpts.type == 'swf' ? 'hidden' : 'auto') : (currentOpts.scrolling == 'yes' ? 'auto' : 'visible')));
|
||||
inner.css('overflow', (currentOpts.scrolling == 'auto' ? (currentOpts.type == 'image' || currentOpts.type == 'iframe' || currentOpts.type == 'swf' || currentOpts.type == 'movie' ? 'hidden' : 'auto') : (currentOpts.scrolling == 'yes' ? 'auto' : 'visible')));
|
||||
|
||||
if (!$.support.opacity) {
|
||||
inner.get(0).style.removeProperty('filter');
|
||||
|
|
@ -550,6 +553,9 @@
|
|||
if (href.match(imgRegExp)) {
|
||||
type = 'image';
|
||||
|
||||
} else if (href.match(movieRegExp)) {
|
||||
type = 'movie';
|
||||
|
||||
} else if (href.match(swfRegExp)) {
|
||||
type = 'swf';
|
||||
|
||||
|
|
@ -571,7 +577,7 @@
|
|||
selectedOpts.href = href;
|
||||
selectedOpts.title = title;
|
||||
|
||||
if (selectedOpts.autoDimensions && selectedOpts.type !== 'iframe' && selectedOpts.type !== 'swf') {
|
||||
if (selectedOpts.autoDimensions && selectedOpts.type !== 'iframe' && selectedOpts.type !== 'swf' && selectedOpts.type !== 'movie') {
|
||||
selectedOpts.width = 'auto';
|
||||
selectedOpts.height = 'auto';
|
||||
}
|
||||
|
|
@ -636,6 +642,13 @@
|
|||
|
||||
break;
|
||||
|
||||
case 'movie':
|
||||
str = '<video controls width="' + selectedOpts.width + '" height="' + selectedOpts.height + '" '
|
||||
+ 'src="' + href + '" poster="' + selectedOpts.poster + '"></video>'
|
||||
tmp.html(str);
|
||||
fancybox_process_inline();
|
||||
break;
|
||||
|
||||
case 'swf':
|
||||
str = '<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="' + selectedOpts.width + '" height="' + selectedOpts.height + '"><param name="movie" value="' + href + '"></param>';
|
||||
emb = '';
|
||||
|
|
|
|||
|
|
@ -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"));
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue