동영상 섬네일, GIF로 취급 기능 추가

이미지, 동영상 첨부시 구분할 수 있도록 그 섬네일에 play 아이콘 추가
모듈별 파일 설정시 파일 모듈의 업로드 기본, 이미지, 동영상 설정을 각각 달리 적용할 수 있도록 기본 설정 제어 옵션 분리
This commit is contained in:
conory 2019-09-27 00:34:19 +09:00
parent c2025c4bde
commit cdbc2d7a82
14 changed files with 644 additions and 430 deletions

View file

@ -112,7 +112,25 @@
width: 100%;
height: 100%;
}
.xefu-file-video {
position: absolute;
top: 50%;
left: 50%;
margin: -15px;
width: 30px;
height: 30px;
background: rgb(0,0,0,.5);
border-radius: 50%;
}
.xefu-file-video-play {
position: absolute;
top: 50%;
left: 50%;
margin: -8px -5px;
border-width: 8px 0 8px 13px;
border-style: solid;
border-color: transparent transparent transparent #fff;
}
.selected {
}

View file

@ -23,7 +23,8 @@
actSetCover : '.xefu-act-set-cover',
tmplXeUploaderFileitem : '<li class="xefu-file xe-clearfix" data-file-srl="{{file_srl}}"><span class="xefu-file-name">{{source_filename}}</span><span class="xefu-file-info"><span>{{disp_file_size}}</span><span><input type="checkbox" data-file-srl="{{file_srl}}"> Select</span></span></li>',
tmplXeUploaderFileitemImage: '<li class="xefu-file xefu-file-image {{#if cover_image}}xefu-is-cover-image{{/if}}" data-file-srl="{{file_srl}}"><strong class="xefu-file-name">{{source_filename}}</strong><span class="xefu-file-info"><span class="xefu-file-size">{{disp_file_size}}</span><span><img src="{{download_url}}" alt=""></span><span><input type="checkbox" data-file-srl="{{file_srl}}"></span><button class="xefu-act-set-cover" data-file-srl="{{file_srl}}" title="Be a cover image"><i class="xi-check-circle"></i></button></span></li>'
tmplXeUploaderFileitemImage: '<li class="xefu-file xefu-file-image {{#if cover_image}}xefu-is-cover-image{{/if}}" data-file-srl="{{file_srl}}"><strong class="xefu-file-name">{{source_filename}}</strong><span class="xefu-file-info"><span class="xefu-file-size">{{disp_file_size}}</span><span><img src="{{download_url}}" alt=""></span><span><input type="checkbox" data-file-srl="{{file_srl}}"></span><button class="xefu-act-set-cover" data-file-srl="{{file_srl}}" title="Be a cover image"><i class="xi-check-circle"></i></button></span></li>',
tmplXeUploaderFileitemVideo: '<li class="xefu-file xefu-file-image {{#if cover_image}}xefu-is-cover-image{{/if}}" data-file-srl="{{file_srl}}"><strong class="xefu-file-name">{{source_filename}}</strong><span class="xefu-file-info"><span class="xefu-file-size">{{disp_file_size}}</span><span><span class="xefu-file-video"><span class="xefu-file-video-play"></span></span><img src="{{download_url}}" alt=""></span><span><input type="checkbox" data-file-srl="{{file_srl}}"></span><button class="xefu-act-set-cover" data-file-srl="{{file_srl}}" title="Be a cover image"><i class="xi-check-circle"></i></button></span></li>'
};
var _elements = [
@ -156,7 +157,7 @@
else if(/\.(mp3)$/i.test(result.source_filename)) {
temp_code += '<audio src="' + result.download_url + '" controls data-file-srl="' + result.file_srl + '" />';
}
else if(/\.(mp4|webm)$/i.test(result.source_filename)) {
else if(/\.(mp4|webm|ogg)$/i.test(result.source_filename)) {
if(result.original_type === 'gif') {
temp_code += '<video src="' + result.download_url + '" autoplay loop muted data-file-srl="' + result.file_srl + '" />';
} else {
@ -328,7 +329,7 @@
else if(/\.(mp3)$/i.test(result.source_filename)) {
temp_code += '<audio src="' + result.download_url + '" controls data-file-srl="' + result.file_srl + '" />';
}
else if(/\.(mp4|webm)$/i.test(result.source_filename)) {
else if(/\.(mp4|webm|ogg)$/i.test(result.source_filename)) {
if(result.original_type === 'gif') {
temp_code += '<video src="' + result.download_url + '" autoplay loop muted data-file-srl="' + result.file_srl + '" />';
} else {
@ -412,8 +413,10 @@
var tmpl_fileitem = data.settings.tmplXeUploaderFileitem;
var tmpl_fileitem_image = data.settings.tmplXeUploaderFileitemImage;
var tmpl_fileitem_video = data.settings.tmplXeUploaderFileitemVideo;
var template_fileimte = Handlebars.compile(tmpl_fileitem);
var template_fileimte_image = Handlebars.compile(tmpl_fileitem_image);
var template_fileimte_video = Handlebars.compile(tmpl_fileitem_video);
var result_image = [];
var result = [];
@ -434,7 +437,11 @@
file.source_filename = file.source_filename.replace("&amp;", "&");
if(file.thumbnail_filename) {
file.download_url = file.thumbnail_filename;
result_image.push(template_fileimte_image(file));
if(/\.(mp4|webm|ogg)$/i.test(file.source_filename)) {
result_image.push(template_fileimte_video(file));
} else {
result_image.push(template_fileimte_image(file));
}
}
else if(/\.(jpe?g|png|gif|webp)$/i.test(file.source_filename)) {
result_image.push(template_fileimte_image(file));