Infrastructure/Cloudreve
0
Fork 0
Code Issues Pull requests Activity

视频预览使用Dplayer

Browse source
This commit is contained in:
HFO4 2018-02-07 14:40:46 +08:00
parent 9cb572f0da
commit d2ca69b945
8 changed files with 216 additions and 105 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
static/css/DPlayer.min.css vendored Normal file
View file

File diff suppressed because one or more lines are too long

2
static/css/share_dir.css
View file

File diff suppressed because one or more lines are too long

2
static/js/DPlayer.min.js vendored Normal file
View file

File diff suppressed because one or more lines are too long

10
static/js/angular-filemanager.min.js vendored
View file

File diff suppressed because one or more lines are too long

10
static/js/filemanager_share.js
View file

File diff suppressed because one or more lines are too long

123
static/js/home.js
View file

@ -62,27 +62,27 @@
cache: true
});
openUpload = function() {
$("#pickfiles").css("z-index", "9999");
$('#upload_modal').modal();
if (!upload_load) {
$("#up_text").html("正在加载上传组件...");
$.getScript("/static/js/moxie.js").done(function() {
$.getScript("/static/js/plupload.dev.js").done(function() {
$.getScript("/static/js/i18n/zh_CN.js").done(function() {
$.getScript("/static/js/ui.js").done(function() {
$.getScript("/static/js/qiniu.js").done(function() {
$.getScript("/static/js/main.js");
$("#up_text").html("选择文件");
toastr.clear();
upload_load = 1;
});
});
});
});
});
} else {
$("[class='moxie-shim moxie-shim-html5']").show();
}
$("#pickfiles").css("z-index", "9999");
$('#upload_modal').modal();
if (!upload_load) {
$("#up_text").html("正在加载上传组件...");
$.getScript("/static/js/moxie.js").done(function() {
$.getScript("/static/js/plupload.dev.js").done(function() {
$.getScript("/static/js/i18n/zh_CN.js").done(function() {
$.getScript("/static/js/ui.js").done(function() {
$.getScript("/static/js/qiniu.js").done(function() {
$.getScript("/static/js/main.js");
$("#up_text").html("选择文件");
toastr.clear();
upload_load = 1;
});
});
});
});
});
} else {
$("[class='moxie-shim moxie-shim-html5']").show();
}
}
function closeUpload() {
$('#upload_modal').modal('hide');
@ -95,12 +95,12 @@
})
});
function includeCss(filename) {
var head = document.getElementsByTagName('head')[0];
var link = document.createElement('link');
link.href = filename;
link.rel = 'stylesheet';
link.type = 'text/css';
head.appendChild(link)
var head = document.getElementsByTagName('head')[0];
var link = document.createElement('link');
link.href = filename;
link.rel = 'stylesheet';
link.type = 'text/css';
head.appendChild(link)
}
function loadMdEditor(result){
if (mdLoad == 0) {
@ -114,17 +114,17 @@
$.getScript("/static/js/mdeditor/squire-raw.js").done(function() {
$.when(
$.ajax({
async: false,
url: "/static/js/mdeditor/tui-editor-Editor-all.min.js",
dataType: "script"
async: false,
url: "/static/js/mdeditor/tui-editor-Editor-all.min.js",
dataType: "script"
})).done(function(){
editor = new tui.Editor({
el: document.querySelector('#md'),
initialEditType: 'markdown',
previewStyle: 'vertical',
height: 'auto',
initialValue: result,
language:"zh",
el: document.querySelector('#md'),
initialEditType: 'markdown',
previewStyle: 'vertical',
height: 'auto',
initialValue: result,
language:"zh",
});
toastr.clear();
@ -154,7 +154,7 @@
function audioPause() {
document.getElementById('audiopreview-target').pause();
document.getElementById('videopreview-target').pause();
dp.pause()
}
@ -190,6 +190,39 @@
openPhotoSwipe(t);
}
}
vplayderLoad = false;
var loadDPlayer = function(url){
if (!vplayderLoad) {
toastr["info"]("加载预览组件...");
includeCss("/static/css/DPlayer.min.css");
$.getScript("/static/js/DPlayer.min.js").done(function() {
toastr.clear();
vplayderLoad = 1;
playVideo(url);
});
}else{
playVideo(url);
}
}
var playVideo = function(url){
dp = new DPlayer({
container: document.getElementById("videopreview-target"),
screenshot: true,
video: {
url: url
},
});
dp.on("fullscreen", function(){
$(".modal-backdrop").hide();
$("#side").hide();
return false;
});
dp.on("fullscreen_cancel", function(){
$(".modal-backdrop").show();
$("#side").show();
return false;
})
}
function suffix($fname){
alert($fname);
}
@ -198,15 +231,15 @@
$('a[ng-click|="selectOrUnselect(item, $event)"]').click(function(event){
var menu = $("#context-menu");
if (event.pageX >= window.innerWidth - menu.width()) {
event.pageX -= menu.width();
}
if (event.pageY >= window.innerHeight - menu.height()) {
event.pageY -= menu.height();
}
event.pageX -= menu.width();
}
if (event.pageY >= window.innerHeight - menu.height()) {
event.pageY -= menu.height();
}
$("#context-menu").css({
"left": event.pageX,
"top": event.pageY
});
"left": event.pageX,
"top": event.pageY
});
$(this).contextmenu();
return false;
})

41
static/js/share_dir.js
View file

@ -21,6 +21,14 @@
}),
});
}]);
function includeCss(filename) {
var head = document.getElementsByTagName('head')[0];
var link = document.createElement('link');
link.href = filename;
link.rel = 'stylesheet';
link.type = 'text/css';
head.appendChild(link)
}
previewLoad = 0;
var openPhotoSwipe = function(items) {
var pswpElement = document.querySelectorAll('.pswp')[0];
@ -56,6 +64,39 @@
openPhotoSwipe(t);
}
}
vplayderLoad = false;
var loadDPlayer = function(url){
if (!vplayderLoad) {
toastr["info"]("加载预览组件...");
includeCss("/static/css/DPlayer.min.css");
$.getScript("/static/js/DPlayer.min.js").done(function() {
toastr.clear();
vplayderLoad = 1;
playVideo(url);
});
}else{
playVideo(url);
}
}
var playVideo = function(url){
dp = new DPlayer({
container: document.getElementById("videopreview-target"),
screenshot: true,
video: {
url: url
},
});
dp.on("fullscreen", function(){
$(".modal-backdrop").hide();
$("#side").hide();
return false;
});
dp.on("fullscreen_cancel", function(){
$(".modal-backdrop").show();
$("#side").show();
return false;
})
}
function mobileBind(){
if($(window).width()<768){
$('a[ng-click|="selectOrUnselect(item, $event)"]').click(function(event){

131
static/js/share_single.js
View file

@ -14,8 +14,8 @@
});
jQuery.ajaxSetup({
cache: true
});
cache: true
});
function getSize(size) {
var filetype = ['Bytes', 'KB', 'MB', 'GB', 'TB'];
@ -27,12 +27,12 @@
}
Date.prototype.format = function(fmt) {
var o = {
"M+": this.getMonth() + 1,
"M+": this.getMonth() + 1,
"d+": this.getDate(),
"h+": this.getHours(),
"m+": this.getMinutes(),
"s+": this.getSeconds(),
"q+": Math.floor((this.getMonth() + 3) / 3),
"h+": this.getHours(),
"m+": this.getMinutes(),
"s+": this.getSeconds(),
"q+": Math.floor((this.getMonth() + 3) / 3),
"S": this.getMilliseconds()
};
if (/(y+)/.test(fmt)) {
@ -45,8 +45,10 @@
}
return fmt;
}
function audioPause() {
document.getElementById('preview-target').pause();
dp.pause();
}
$("#size").html(getSize(shareInfo.fileSize));
$("#down_num").html(shareInfo.downloadNum);
@ -64,16 +66,55 @@
}
});
});
var openPhotoSwipe = function(pic,ww,hh) {
vplayderLoad = false;
function includeCss(filename) {
var head = document.getElementsByTagName('head')[0];
var link = document.createElement('link');
link.href = filename;
link.rel = 'stylesheet';
link.type = 'text/css';
head.appendChild(link)
}
var loadDPlayer = function(url){
if (!vplayderLoad) {
toastr["info"]("加载预览组件...");
includeCss("/static/css/DPlayer.min.css");
$.getScript("/static/js/DPlayer.min.js").done(function() {
toastr.clear();
vplayderLoad = 1;
playVideo(url);
});
}else{
playVideo(url);
}
}
var playVideo = function(url){
dp = new DPlayer({
container: document.getElementById("preview-target"),
screenshot: true,
video: {
url: url
},
});
dp.on("fullscreen", function(){
$(".modal-backdrop").hide();
$("#side").hide();
return false;
});
dp.on("fullscreen_cancel", function(){
$(".modal-backdrop").show();
$("#side").show();
return false;
})
}
var openPhotoSwipe = function(pic, ww, hh) {
var pswpElement = document.querySelectorAll('.pswp')[0];
items= [
{
src: pic,
w: ww,
h: hh
}
];
var options = {
items = [{
src: pic,
w: ww,
h: hh
}];
var options = {
history: false,
focus: false,
showAnimationDuration: 5,
@ -86,57 +127,57 @@
var gallery = new PhotoSwipe(pswpElement, PhotoSwipeUI_Default, items, options);
gallery.init();
};
if(/\.(gif|jpg|jpeg|png|svg|SVG|GIF|JPG|PNG)$/.test(shareInfo.fileName)){
if (/\.(gif|jpg|jpeg|png|svg|SVG|GIF|JPG|PNG)$/.test(shareInfo.fileName)) {
$.getScript("/static/js/photoswipe.min.js").done(function() {
$.getScript("/static/js/photoswipe-ui-default.js").done(function() {
$("#previewButton").click(function(){
if(shareInfo.allowPreview){
$("#previewButton").click(function() {
if (shareInfo.allowPreview) {
x = shareInfo.picSize.split(",")[0];
y = shareInfo.picSize.split(",")[1];
openPhotoSwipe("/Share/Preview/"+shareInfo.shareId,x,y);
}else{
openPhotoSwipe("/Share/Preview/" + shareInfo.shareId, x, y);
} else {
toastr["error"]("请先登录")
}
})
})
})
}else if(/\.(mp4|flv|avi|tff|MP4|FLV|AVI|TFF)$/.test(shareInfo.fileName)){
} else if (/\.(mp4|flv|avi|tff|MP4|FLV|AVI|TFF)$/.test(shareInfo.fileName)) {
$(".file-sign").html('<i class="fa fa-file-movie-o" aria-hidden="true"></i>')
$("#previewButton").click(function(){
if(shareInfo.allowPreview){
$(".previewContent").html('<video id="preview-target" style="width: 100%;object-fit: fill" controls="controls" class="preview" src="/Share/Preview/'+shareInfo.shareId+'" ></video>');
$("#previewButton").click(function() {
if (shareInfo.allowPreview) {
$(".previewContent").html('<div id="preview-target" style="width: 100%;object-fit: fill" class="preview"></div>');
$('#previewModal').modal();
}else{
loadDPlayer('/Share/Preview/' + shareInfo.shareId);
} else {
toastr["error"]("请先登录")
}
})
}
else if(/\.(MP3|mp3|wav|WAV|ogg|OGG)$/.test(shareInfo.fileName)){
} else if (/\.(MP3|mp3|wav|WAV|ogg|OGG)$/.test(shareInfo.fileName)) {
$(".file-sign").html('<i class="fa fa-file-audio-o" aria-hidden="true"></i>');
$("#previewButton").click(function(){
if(shareInfo.allowPreview){
$(".previewContent").html('<audio id="preview-target" style="width: 100%;object-fit: fill" controls="controls" class="preview" src="/Share/Preview/'+shareInfo.shareId+'" ></audio>');
$("#previewButton").click(function() {
if (shareInfo.allowPreview) {
$(".previewContent").html('<audio id="preview-target" style="width: 100%;object-fit: fill" controls="controls" class="preview" src="/Share/Preview/' + shareInfo.shareId + '" ></audio>');
$('#previewModal').modal();
}else{
} else {
toastr["error"]("请先登录")
}
})
}else{
$("#previewButton").click(function(){
toastr["warning"]("当前文件暂不支持预览")
});
if(/\.(doc|DOC|docx|DOCX|ogg)$/.test(shareInfo.fileName)){
$(".file-sign").html('<i class="fa fa-file-word-o" aria-hidden="true"></i>');
}else if(/\.(ppt|PPT|pptx|PPTX)$/.test(shareInfo.fileName)){
} else {
$("#previewButton").click(function() {
toastr["warning"]("当前文件暂不支持预览")
});
if (/\.(doc|DOC|docx|DOCX|ogg)$/.test(shareInfo.fileName)) {
$(".file-sign").html('<i class="fa fa-file-word-o" aria-hidden="true"></i>');
} else if (/\.(ppt|PPT|pptx|PPTX)$/.test(shareInfo.fileName)) {
$(".file-sign").html('<i class="fa fa-file-powerpoint-o" aria-hidden="true"></i>');
}else if(/\.(pdf|PDF)$/.test(shareInfo.fileName)){
} else if (/\.(pdf|PDF)$/.test(shareInfo.fileName)) {
$(".file-sign").html('<i class="fa fa-file-pdf-o" aria-hidden="true"></i>');
}
else if(/\.(zip|ZIP|RAR|rar|7z|7Z)$/.test(shareInfo.fileName)){
} else if (/\.(zip|ZIP|RAR|rar|7z|7Z)$/.test(shareInfo.fileName)) {
$(".file-sign").html('<i class="fa fa-file-archive-o" aria-hidden="true"></i>');
}else{
} else {
$(".file-sign").html('<i class="fa fa-file-text" aria-hidden="true"></i>');
}
}
}